/* Build & Price builder (native rebuild) — .bpb component layer.
   Dark stage theme matching the original configurator. Note: global button
   styles from the model stylesheets are aggressive — every button here resets
   padding/background/text-transform explicitly. */

.bpb {
    /* Page backdrop mirrors the source app's stage surround: the dark
       topographic texture behind everything. */
    background: #2f2f2f url("/build-price/rebuild/assets/_ui/background_cam_1.jpg") 50% 50% / cover no-repeat;
    color: #eee;
    min-height: 100svh;
    padding-top: 3.3rem; /* fixed navbar */
}

/* Desktop layout mirrors the source app: the stage is a full-bleed backdrop
   and the menu / price panel / view switcher are absolute overlays at the
   source app's exact coordinates (components-global 370px @ 65/55,
   .price-section 315px @ 6/55, .frames-changer @ bottom 65 / right 55). */
.bpb__layout {
    position: relative;
    min-height: calc(100svh - 3.3rem);
}

/* ---------------------------------------------------------------- stage
   Like the source app: the stage is a full-bleed backdrop behind the floating
   menu/summary panels, and the 1920×1080 van frame renders at NATIVE size,
   centered (cropped on smaller viewports rather than scaled down). */

.bpb__stage-col {
    min-width: 0;
}

.bpb__stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    /* The source app's .tuning-background-block declares the inverted topo
       map under a 60→70% black gradient, but its image URL 404s in
       production — the backdrop that actually renders is the gradient over
       the white background-color: a smooth grey (#666 → #4d4d4d). Reproduce
       the rendered result, not the dead declaration. */
    background-color: #fff;
    background-image: repeating-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7));
}

.bpb__stage-foot {
    position: static;
}

.bpb__frame {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1920px;
    height: 1080px;
    /* centered, then the source app's offsets: .stage-container right:-140px
       (shift right 140) and carCustomStyles margin-top -35 (custom_offset). */
    margin-left: -820px;
    margin-top: -575px;
}

/* Per-view scale + origin per viewport width — ported verbatim from the
   source app's #frame-2/27/6/31 media queries (2=exterior, 27=interior,
   6=rear, 31=rear_top). */

@media only screen and (max-width: 1150px) {
    .bpb__frame[data-view="exterior"] { transform-origin: 53% 65%; transform: scale(0.35); }
    .bpb__frame[data-view="interior"] { transform-origin: 53% 55%; transform: scale(0.4); }
    .bpb__frame[data-view="rear"] { transform-origin: 62% 65%; transform: scale(0.4); }
    .bpb__frame[data-view="rear_top"] { transform-origin: 55% 65%; transform: scale(0.45); }
}

@media only screen and (min-width: 1150px) and (max-width: 1300px) {
    .bpb__frame[data-view="exterior"] { transform-origin: 52% 65%; transform: scale(0.4); }
    .bpb__frame[data-view="interior"] { transform-origin: 53% 50%; transform: scale(0.5); }
    .bpb__frame[data-view="rear"] { transform-origin: 60% 65%; transform: scale(0.45); }
    .bpb__frame[data-view="rear_top"] { transform-origin: 55% 65%; transform: scale(0.55); }
}

@media only screen and (min-width: 1300px) and (max-width: 1450px) {
    .bpb__frame[data-view="exterior"] { transform-origin: 50% 65%; transform: scale(0.5); }
    .bpb__frame[data-view="interior"] { transform-origin: 52% 50%; transform: scale(0.6); }
    .bpb__frame[data-view="rear"] { transform-origin: 60% 65%; transform: scale(0.5); }
    .bpb__frame[data-view="rear_top"] { transform-origin: 55% 65%; transform: scale(0.6); }
}

@media only screen and (min-width: 1450px) and (max-width: 1600px) {
    .bpb__frame[data-view="exterior"] { transform-origin: 50% 65%; transform: scale(0.6); }
    .bpb__frame[data-view="interior"] { transform-origin: 50% 50%; transform: scale(0.7); }
    .bpb__frame[data-view="rear"] { transform-origin: 60% 65%; transform: scale(0.6); }
    .bpb__frame[data-view="rear_top"] { transform-origin: 45% 65%; transform: scale(0.7); }
}

@media only screen and (min-width: 1600px) and (max-width: 1750px) {
    .bpb__frame[data-view="exterior"] { transform-origin: 45% 65%; transform: scale(0.7); }
    .bpb__frame[data-view="interior"] { transform-origin: 50% 50%; transform: scale(0.7); }
    .bpb__frame[data-view="rear"] { transform-origin: 60% 65%; transform: scale(0.7); }
    .bpb__frame[data-view="rear_top"] { transform-origin: 45% 65%; transform: scale(0.7); }
}

@media only screen and (min-width: 1751px) {
    .bpb__frame[data-view="exterior"] { transform-origin: 40% 65%; transform: scale(0.8); }
    .bpb__frame[data-view="interior"] { transform-origin: 30% 70%; transform: scale(0.8); }
    .bpb__frame[data-view="rear"] { transform-origin: 55% 65%; transform: scale(0.8); }
    .bpb__frame[data-view="rear_top"] { transform-origin: 40% 65%; transform: scale(0.8); }
}

.bpb__frame-inner {
    position: absolute;
    inset: 0;
}

.bpb__layer {
    position: absolute;
    display: block;
    pointer-events: none;
}

/* The source app renders this hint only on mobile; on desktop it's covered
   by the frame stack and never visible. */
.bpb__hint {
    display: none;
    font-size: 12px;
    color: #fff;
}

/* View switcher — the source app's .frames-changer: bottom 65 / right 55. */
.bpb__views {
    position: absolute;
    bottom: 65px;
    right: 55px;
    z-index: 150;
    display: flex;
    gap: 6px;
}

.bpb__view {
    background: rgba(238, 238, 238, 0.18);
    color: #fff;
    border: 0;
    margin: 0;
    padding: 7px 15px;
    font-size: 16px;
    line-height: 15px;
    letter-spacing: 1.12px;
    font-weight: 400;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
}

.bpb__view:hover {
    background: #a00;
    transition: 0.3s;
}

.bpb__view.is-active {
    background: #a00;
    color: #fff;
}

/* ----------------------------------------------------------------- menu */

/* Menu — the source app's components-global: 370px overlay at 65/55. */
.bpb__menu {
    position: absolute;
    top: 65px;
    left: 55px;
    width: 370px;
    z-index: 200;
    max-height: 70%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(238, 238, 238, 0.4) transparent;
}

/* Category header — .component-type-name: 58px bar, 6px gap below. */
.bpb__cat-head {
    width: 100%;
    background: rgba(238, 238, 238, 0.18);
    color: #fff;
    border: 0;
    height: 58px;
    line-height: 58px;
    padding: 0 20px;
    margin: 0 0 6px;
    text-align: left;
    font-size: 16px;
    letter-spacing: 1.12px;
    font-weight: 400;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
    transition: 0.4s;
}

.bpb__cat-head:hover,
.bpb__cat.is-open .bpb__cat-head {
    background: #a00;
    color: #fff;
}

/* No model selected → interior/finish categories are locked, like the source
   app's "inactiveInterior" state (.componentType.int-disable). */
.bpb__cat.is-disabled {
    opacity: 0.4;
}

.bpb__cat.is-disabled .bpb__cat-head {
    cursor: default;
}

.bpb__cat.is-disabled .bpb__cat-head:hover {
    background: rgba(238, 238, 238, 0.18);
}

.bpb__cat-body {
    display: none;
    padding: 0.2rem 0 1.6rem;
}

.bpb__cat.is-open .bpb__cat-body {
    display: block;
}

/* Option row — .component-item: transparent 30px row, red on hover, 20px
   checkbox at the right that shows a check when selected. */
.bpb__item {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 30px;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    background: transparent;
    color: #fff;
    border: 0;
    /* Right padding reserves the checkbox (right 10) and ?-info icon
       (right 40) zones — the source app's row geometry, where the price ends
       60px left of the content edge (70px from the row edge). */
    padding: 5px 70px 5px 10px;
    margin: 0;
    font-size: 16px;
    line-height: 18px;
    text-align: left;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    border-radius: 0; /* global button styles round corners — square row like the source app */
    font-weight: 400; /* the global * reset drops everything to 300; names are 400 in the source app */
}

.bpb__item::after {
    content: "";
    position: absolute;
    right: 10px;
    top: calc(50% - 10px);
    width: 20px;
    height: 20px;
    border: 2px solid #454241;
    background: center / 14px 14px no-repeat;
}

.bpb__item:hover {
    background: #a00;
    color: #fff;
}

.bpb__item:hover::after {
    border-color: #fff;
    transition: 0.3s;
}

.bpb__item.is-active::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8.5' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3C/svg%3E");
}

/* "?" info icon — the source app's .package-info (19px fa-question-circle at
   right 30px of the content box, growing to 24px on hover). */
.bpb__item-info {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
}

.bpb__item-info svg {
    width: 19px;
    height: 19px;
    display: block;
}

.bpb__item-info:hover svg {
    width: 24px;
    height: 24px;
}

.bpb__item-name {
    /* Names are never truncated: they take the free width and wrap onto a
       second line if needed (the row grows past 30px only then). */
    flex: 1 1 auto;
    /* Explicit: the global * reset restyles spans directly (300 / var(--c3)),
       so inheritance from .bpb__item alone doesn't survive it. */
    color: #fff;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
}

.bpb__item-price {
    flex: 0 0 auto;
    color: #fff;
    font-weight: 300;
    white-space: nowrap;
    font-size: 16px;
    margin: 0;
}

/* Colors — round glossy paint chips + "Color | <name>" header, per the
   source app's finishes widget (40px circles, paint-icon sheen overlay,
   border on light colors). */

.bpb__colors {
    padding: 28px 20px;
}

.bpb__colors-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
    font-size: 0.85rem;
}

.bpb__colors-key {
    color: #9a9a9a;
    padding-right: 0.5rem;
    border-right: 2px solid #656565;
}

.bpb__colors-value {
    color: #fff;
    font-weight: 600;
}

.bpb__colors-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bpb__paint {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    text-transform: none;
    flex: 0 0 auto;
}

.bpb__paint--light {
    border: 1px solid #ccc;
}

.bpb__paint.is-active {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.bpb__paint-gloss {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    pointer-events: none;
}

/* Laminate / Upholstery — photo swatches with caption + checkbox, per the
   source app's laminate widget (128px tiles, name + 24px check square). */

.bpb__finishes {
    padding: 28px 20px;
}

.bpb__finish-caption {
    display: block;
    font-size: 0.85rem;
    letter-spacing: 0.07em;
    color: #fff;
    margin-bottom: 1.1rem;
    text-align: left;
}

.bpb__finish-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.bpb__finish {
    width: 128px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    text-transform: none;
    text-align: left;
    overflow: visible;
}

.bpb__finish-img {
    display: block;
    width: 128px;
    border-radius: 0;
}

.bpb__finish-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.bpb__finish-name {
    color: #fff;
    font-size: 0.95rem;
}

.bpb__finish-check {
    width: 24px;
    height: 24px;
    border: 2px solid #454241;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bpb__finish:hover .bpb__finish-check {
    border-color: #fff;
    transition: 0.3s;
}

.bpb__finish-check svg {
    width: 16px;
    height: 16px;
    display: none;
}

.bpb__finish.is-active .bpb__finish-check svg {
    display: block;
}

/* -------------------------------------------------------------- summary */

/* Price panel — the source app's .price-section: 315px overlay at 6/55,
   translucent header block, 51px red Continue button. */
.bpb__summary {
    position: absolute;
    top: 6px;
    right: 55px;
    width: 315px;
    z-index: 999;
}

/* CONTACT NOW — the source's grey .buttons-section above the price block. */
.bpb__contact-now {
    display: block;
    width: 100%;
    margin: 0 0 6px;
    background: #585858;
    color: #fff;
    border: 0;
    height: 51px;
    line-height: 51px;
    padding: 0;
    text-align: center;
    font-size: 16px;
    letter-spacing: 1.12px;
    font-weight: 400;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
}

.bpb__contact-now:hover {
    background: #424242;
    transition: 0.3s;
}

.bpb__prices {
    background: rgba(238, 238, 238, 0.18);
    border-radius: 0;
    padding: 15px 16px;
    margin: 0 0 6px;
}

.bpb__price-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0;
    margin: 0 0 13px;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 1.12px;
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
}

/* Explicit on the spans: the global * reset restyles them directly
   (300 / var(--c3)); the source app sets its price-section spans to 400. */
.bpb__price-row span {
    color: #fff;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 1.12px;
    font-weight: 400;
    text-transform: uppercase;
}

.bpb__price-row--total {
    border-top: 1px solid grey;
    margin-bottom: 0;
    padding-top: 12px;
}

.bpb__continue {
    display: block;
    width: 100%;
    margin: 0;
    background: #a00;
    color: #fff;
    border: 0;
    height: 51px;
    line-height: 51px;
    padding: 0;
    text-align: center;
    font-size: 16px;
    letter-spacing: 1.12px;
    font-weight: 400;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
}

.bpb__continue:hover {
    background: #740000;
    transition: 0.3s;
}

/* ------------------------------------------------------ confirm dialog */

.bpb__confirm {
    position: fixed;
    inset: 0;
    /* Above the menu (200) and price panel (999), like the source app's
       comp-change-events dialog (1001). */
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
}

.bpb__confirm[hidden] {
    display: none;
}

.bpb__confirm-panel {
    width: min(460px, calc(100vw - 2rem));
    background: var(--tv-surface-active-solid);
    color: #eee;
    border-radius: 4px;
    padding: 1.4rem;
}

.bpb__confirm-title {
    display: block;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.8rem;
}

.bpb__confirm-head {
    display: block;
    font-size: 0.78rem;
    color: #bbb;
    margin: 0.6rem 0 0.3rem;
}

.bpb__confirm-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
}

.bpb__confirm-list li {
    padding: 0.25rem 0;
    border-bottom: 1px solid #333;
}

.bpb__confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.1rem;
}

.bpb__confirm-btn {
    background: #454545;
    color: #ddd;
    border: 0;
    padding: 0.55rem 1.1rem;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 2px;
}

.bpb__confirm-btn--accept {
    background: #aa0000;
    color: #fff;
}

/* -------------------------------------------------------- info lightbox */

/* The source app's .package-lightbox / .lightbox-backdrop, opened by an
   option row's "?" icon: 450×490 #1f1f1f panel over a 70% black backdrop,
   title + HTML paragraph + 200px photo with a hover play button that swaps
   in the mp4 walkthrough. */

.bpb__info-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}

.bpb__info-backdrop[hidden] {
    display: none;
}

.bpb__info {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--tv-surface-active-solid);
    width: 450px;
    max-width: calc(100vw - 2rem);
    height: 490px;
    max-height: calc(100vh - 2rem);
    z-index: 1002;
    /* The source declares 5rem 4rem 4rem with a 10px rem (62.5% root) —
       real values 50/40/40px, leaving the 370px content the video fits. */
    padding: 50px 40px 40px;
    overflow: hidden;
}

.bpb__info[hidden] {
    display: none;
}

.bpb__info-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: #fff;
    cursor: pointer;
}

.bpb__info-close svg {
    height: 20px; /* source .fa-times font-size 20, 25 on hover */
    width: auto;
    display: block;
    margin: 0 auto;
}

.bpb__info-close:hover svg {
    height: 25px;
}

.bpb__info-body {
    position: relative;
    height: 100%;
    /* The source's nicescroll rail is an always-visible overlay offset into
       the panel padding; scroll + negative margin keeps the text at the full
       370px and parks the thin white bar in the padding zone instead. */
    overflow-y: scroll;
    margin-right: -25px;
    padding-right: 14px;
    scrollbar-width: thin;
    scrollbar-color: #fff transparent;
    color: #fff;
}

.bpb__info-title {
    display: block;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1.12px;
    text-transform: uppercase;
    margin: 0 0 20px; /* source 2rem @ 10px rem */
}

.bpb__info-paragraph {
    color: #fff;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 1.12px;
    line-height: 20px; /* the source page's default; the site's is taller */
    margin: 0 0 25px; /* source 2.5rem @ 10px rem */
}

.bpb__info-media {
    position: relative;
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center center;
    margin: 0 0 25px;
}

.bpb__info-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    color: rgba(245, 245, 245, 0.513);
    cursor: pointer;
    display: none;
    z-index: 2;
}

.bpb__info-play svg {
    height: 65px; /* source .fa font-size 65 */
    width: auto;
    display: block;
}

/* Like the source, the play button only appears while hovering the photo. */
.bpb__info-media:hover .bpb__info-play:not([hidden]) {
    display: block;
}

.bpb__info-media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--tv-plate);
}

/* ------------------------------------------------------- contact modal */

/* The source app's .contact-now-section: centered 200px #1f1f1f panel over
   the shared backdrop — phone, selectable email, red "Book a meeting"
   (opens Calendly in a new tab). Source padding 2rem 4rem @ 10px rem. */

.bpb__contact {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--tv-surface-active-solid);
    height: 200px;
    z-index: 1001;
    padding: 20px 40px;
}

.bpb__contact[hidden] {
    display: none;
}

.bpb__contact section {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.bpb__contact section span {
    display: block;
    color: #fff;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 1.12px;
    font-weight: 400;
    text-transform: uppercase;
    user-select: none;
}

.bpb__contact-email {
    user-select: text !important;
}

.bpb__contact-book {
    background: #a00;
    color: #fff;
    border: 0;
    border-radius: 0;
    margin: 0 6px 0 0;
    padding: 14px 30px;
    text-align: center;
    cursor: pointer;
}

.bpb__contact-book span {
    font-size: 16px;
    line-height: 15px;
    letter-spacing: 1.12px;
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
}

.bpb__contact-book:hover {
    background: #740000;
    transition: 0.3s;
}

/* ---------------------------------------------- option-change loader */

/* The source's .new-style-loader + .blurry-load: while a selection's layers
   stream in, the van blurs 4px and the spinner + LOADING sits centered on
   the stage. */

.bpb__frame.is-loading {
    filter: blur(4px);
}

.bpb__opt-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    display: none;
}

.bpb__opt-loading.is-visible {
    display: block;
}

.bpb__opt-loading-spinner {
    width: 110px;
    height: 34px;
    background: url("/build-price/rebuild/assets/_ui/spinner-1s-400px.gif") center / 100% no-repeat;
    margin: 0 auto 20px;
}

.bpb__opt-loading-text {
    color: #fff;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: 1.12px;
    font-weight: 400;
    text-transform: uppercase;
}

/* ----------------------------------------------------- loading screen */

/* The source app's tuning-progress screen: dark cover with the red Titan
   mark (200×200), the spinner GIF (110×34) and LOADING while the first
   render's layers stream in. Covers menus/panels like the source (its menus
   sit at opacity 0 until ready). */

.bpb__loading {
    position: absolute;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* The source's loading backdrop: near-black with a subtle vertical
       inverted vignette — #181818 at the edges, pure black at center
       (sampled from the live app's cold load; not the topo texture). */
    background: linear-gradient(180deg, #181818 0%, #000 50%, #181818 100%);
    transition: opacity 0.35s;
}

.bpb__loading.is-done {
    opacity: 0;
    pointer-events: none;
}

.bpb__loading[hidden] {
    display: none;
}

.bpb__loading-logo {
    width: 200px;
    height: 200px;
    object-fit: contain;
}

/* "LOADING  47%" — the source's .for-tu-tuning-car .tuning-progress-title:
   35px italic Montserrat, LOADING with a 10px gap before the live percent.
   Explicit on the spans too: the global * reset restyles them directly
   (weight 300 / var(--c3) grey). */
.bpb__loading-title,
.bpb__loading-title span {
    color: #fff;
    font-family: Montserrat, "Work Sans", "Work Sans Fallback", sans-serif;
    font-size: 35px;
    line-height: 27px;
    font-weight: 400;
    font-style: italic;
}

.bpb__loading-word {
    margin-right: 10px;
}

/* ----------------------------------------------------- tutorial modal */

/* The source app's .demo-video-section — the Van Builder Tutorial that
   auto-opens on load: centered #1f1f1f panel (padding 6rem 4rem 4rem @ 10px
   rem), uppercase title pinned top-center, 470×265 video with poster. */

.bpb__tutorial {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--tv-surface-active-solid);
    z-index: 1001;
    text-align: center;
    padding: 60px 40px 40px;
}

.bpb__tutorial[hidden] {
    display: none;
}

.bpb__tutorial-title {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 16px;
    letter-spacing: 1.12px;
    font-weight: 400;
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0;
}

.bpb__tutorial-video {
    position: relative;
    width: 470px;
    height: 265px;
    max-width: calc(100vw - 120px);
}

.bpb__tutorial-video video {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--tv-plate);
}

/* -------------------------------------------------------------- overlay */

/* Itemized build-estimate card — the prominent quote block at the top of the
   Continue overlay. Its own visual identity: dark card, red header strip,
   ruled line items with right-aligned amounts, highlighted total. */

.bpb-quote {
    background: var(--tv-surface-hover-solid);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.4rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.bpb-quote__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1.1rem;
    background: linear-gradient(90deg, #aa0000, #7d0000);
}

.bpb-quote__title {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
}

.bpb-quote__model {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.85);
    text-align: right;
}

.bpb-quote__items {
    padding: 0.5rem 1.1rem 0.2rem;
}

.bpb-quote__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.42rem 0;
    font-size: 0.85rem;
    color: #cfcfcf;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.bpb-quote__row:last-child {
    border-bottom: 0;
}

.bpb-quote__row-name {
    min-width: 0;
}

.bpb-quote__row-sku {
    font-style: normal;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    color: #8a8a8a;
    white-space: nowrap;
}

.bpb-quote__row-amount {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: #eee;
}

.bpb-quote__subtotals {
    padding: 0.55rem 1.1rem 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.bpb-quote__subtotal,
.bpb-quote__total {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-variant-numeric: tabular-nums;
}

.bpb-quote__subtotal {
    font-size: 0.8rem;
    color: #a8a8a8;
    padding: 0.15rem 0 0.35rem;
}

.bpb-quote__total {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.bpb-quote__total span:last-child {
    color: #ff5b5b;
    font-size: 1.15rem;
}

.bpb-quote__selections {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.4rem;
    padding: 0.6rem 1.1rem 0.8rem;
    background: var(--tv-band);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.bpb-quote__sel {
    display: flex;
    gap: 0.4rem;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.bpb-quote__sel span:first-child {
    text-transform: uppercase;
    color: #8a8a8a;
}

.bpb-quote__sel span:last-child {
    color: #ddd;
}

.bpb-quote__pref-label {
    display: block;
    margin-bottom: 0.35rem;
}

.bpb-quote__radio {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-right: 1.2rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.bpb-quote__radio input {
    width: auto;
    margin: 0;
}

/* The source form's pre-submit notice ("By clicking Finish …"). */
.bpb-quote__finish-note {
    font-size: 0.85rem;
    color: #b9b9b9;
    margin: 0;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1100px) {
    .bpb__layout {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
        min-height: 0;
    }

    .bpb__menu {
        position: static;
        width: auto;
        max-height: none;
        order: 2;
    }

    .bpb__stage-col {
        order: 1;
    }

    .bpb__summary {
        position: static;
        width: auto;
        order: 3;
    }

    /* Stacked mobile layout: back to an in-flow stage with the frame scaled
       to fit (the original's mobile template scales too). */
    .bpb__stage {
        position: relative;
        inset: auto;
        border-radius: 4px;
    }

    .bpb__frame {
        left: 0;
        top: 0;
        margin: 0;
    }

    .bpb__stage-foot {
        margin-top: 0.6rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .bpb__hint {
        display: block;
    }

    .bpb__views {
        position: static;
    }
}

/* Phones: the four view tabs at desktop size ran 401px wide and pushed a
   375px screen sideways (2026-10-18 responsive sweep). */
@media (max-width: 480px) {
    .bpb__views {
        flex-wrap: wrap;
    }

    .bpb__view {
        padding: 7px 10px;
        font-size: 14px;
        letter-spacing: 0.5px;
    }
}