/*
 * BBTour chrome. Loaded on every page but inert until a tour starts - nothing here applies
 * without .bbt-root, which only exists while one is running.
 *
 * Colours follow the app rather than introducing a palette of their own. The header strip is
 * the Beep Beep red (#FF2900, sampled from the masthead logo); the controls stay on #3E5C76,
 * the accent the order-entry screens already use, so the red identifies the walkthrough
 * rather than competing with its own buttons.
 */

.bbt-root {
    position: fixed;
    inset: 0;
    z-index: 20000;                 /* above the fixed nav and any sticky rail */
    pointer-events: none;           /* only the blockers and the popover take clicks */
    font-family: inherit;
}

/* Four rectangles around the highlighted element rather than one overlay with a hole, so the
   element itself stays clickable while everything around it is blocked. */
.bbt-block {
    position: fixed;
    background: rgba(12, 19, 26, .66);   /* the card is white on a white app - the scrim is what lifts it */
    pointer-events: auto;
}

.bbt-ring {
    position: fixed;
    border: 2px solid #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(212, 34, 0, .95), 0 0 0 6px rgba(255, 41, 0, .30),
                0 6px 24px rgba(0, 0, 0, .34);
    pointer-events: none;
}

.bbt-pop {
    position: fixed;
    width: 340px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border: 1px solid #D42200;
    border-radius: 7px;
    /* Two shadows: a tight one to seat the edge, a wide soft one to lift it off the page. */
    box-shadow: 0 2px 6px rgba(10, 20, 30, .30), 0 18px 46px rgba(10, 20, 30, .42);
    padding: 0 0 12px;
    pointer-events: auto;
    outline: none;
}

/* Each step should announce itself rather than silently swapping text. Re-triggered per step
   by toggling .bbt-in from the script. */
.bbt-pop.bbt-in { animation: bbt-pop-in .16s ease-out; }
@keyframes bbt-pop-in {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: scale(1); }
}

/* A filled strip is what gives the popover an identity of its own - without it this is just
   another white panel on a page made of white panels.

   #FF2900 is the Beep Beep red, sampled from wwwroot/images/beepbeep_arrows_v2.png (the
   masthead logo), where it is 80.6% of the saturated pixels. */
.bbt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #FF2900;
    padding: 7px 12px 7px 14px;
    margin-bottom: 10px;
    border-radius: 6px 6px 0 0;      /* not overflow:hidden on the popover - that clips the arrow */
}

.bbt-count {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #FFFFFF;
    opacity: .92;
}

.bbt-x {
    border: 0;
    background: none;
    color: #FFFFFF;
    opacity: .8;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.bbt-x:hover { opacity: 1; }

.bbt-title {
    margin: 0 0 5px;
    padding: 0 14px;
    font-size: 15.5px;
    font-weight: 700;
    color: #16202B;
    line-height: 1.25;
}

.bbt-body {
    font-size: 13px;
    line-height: 1.5;
    color: #40505E;
    padding: 0 14px;
}
.bbt-body p { margin: 0 0 7px; }
.bbt-body p:last-child { margin-bottom: 0; }
.bbt-body strong { color: #16202B; }

.bbt-foot {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    padding: 0 14px;
}
.bbt-spacer { flex: 1; }

.bbt-foot button {
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 3px;
    padding: 6px 13px;
    cursor: pointer;
    border: 1px solid #c3ccd4;
    background: #fff;
    color: #3E5C76;
}
.bbt-foot .bbt-next {
    background: #3E5C76;
    border-color: #3E5C76;
    color: #fff;
}
.bbt-foot .bbt-next:hover { background: #33506A; }
.bbt-foot .bbt-skip {
    border-color: transparent;
    color: #7B8B99;
    padding-left: 0;
}
.bbt-foot .bbt-skip:hover { color: #16202B; text-decoration: underline; }
.bbt-foot button:focus-visible { outline: 2px solid #3E5C76; outline-offset: 2px; }

/* The arrow is positioned by the script against the TARGET, so it keeps pointing at the right
   thing even after the popover has been clamped to the viewport edge. */
.bbt-arrow {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    border: 1px solid #D42200;
    transform: rotate(45deg);
    z-index: 1;
}
.bbt-bottom .bbt-arrow { top: -6px;    margin-left: -5px; border-right: 0; border-bottom: 0; background: #FF2900; }
.bbt-top    .bbt-arrow { bottom: -6px; margin-left: -5px; border-left: 0;  border-top: 0; }
.bbt-right  .bbt-arrow { left: -6px;   margin-top: -5px;  border-right: 0; border-top: 0; }
.bbt-left   .bbt-arrow { right: -6px;  margin-top: -5px;  border-left: 0;  border-bottom: 0; }

/* Stop the page scrolling behind the walkthrough on touch, where a stray swipe otherwise
   drags the target out from under the highlight. */
html.bbt-on { overscroll-behavior: none; }

@media (max-width: 560px) {
    .bbt-pop { width: calc(100vw - 24px); }
}

@media (prefers-reduced-motion: reduce) {
    .bbt-ring, .bbt-pop { transition: none !important; }
    .bbt-pop.bbt-in { animation: none !important; }
}