/* ============================================
   Floor Designer v2 — Styles
   Bootstrap 5.3 customizations
   ============================================ */

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Canvas container — disable browser-default touch gestures so Konva's
   pinch/pan handlers can fire. Without this, iOS Safari intercepts two-finger
   pinch and zooms the whole page instead of the canvas. */
#fd2-canvas-container {
    touch-action: none;
}

/* Toolbar */
#fd2-toolbar {
    height: 72px;
    z-index: 100;
    /* Force single-row layout — Bootstrap's navbar default is flex-wrap: wrap,
       which can briefly reflow items on hover/focus as button states change.
       Locking to nowrap prevents the top bar from shifting during interactions. */
    flex-wrap: nowrap !important;
}
/* Brand cluster pinned so the hamburger's hover/focus states can't squeeze
   it against the next item and cause a left-shift. */
#fd2-brand-cluster {
    flex-shrink: 0;
}
#fd2-toolbar .logo-svg {
    height: 30px;
    width: auto;
}
/* ============================================
   Toolbar stepper — visual wizard nav
   ============================================
   Five (wood) or four (stone) connected pills showing the design journey.
   States: is-done (green), is-current (burgundy), is-future (grey),
   is-blocked (grey, not clickable). Line between pills mirrors the state of
   the LEFT pill — so the line "fills" up to the current step in green and
   stays grey from there. */
#fd2-stepper {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    /* Reserve enough width for the wider (wood = 5-step) configuration so
       the toolbar doesn't shift horizontally when the user switches to stone
       (4 steps). Stone leaves empty space on the right; the surrounding
       items (material toggle, brand cluster, primary actions) stay put.
       Per-breakpoint min-width overrides further down. */
    min-width: 620px;
}
/* Each step sizes to its pill+line content. Fixed-width lines (further down)
   keep the spacing between pills visually identical regardless of label
   length — Room and Medallion are connected by the same-size segment. */
.fd2-step {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.fd2-step-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 6px;
    border-radius: 18px;
    border: 1.5px solid #adb5bd;
    background: #fff;
    color: #6c757d;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
    position: relative;          /* anchor for the invisible tap-zone ::before */
    /* Safari/iOS button defaults override explicit width/height and add an
       intrinsic widget appearance — kill both so the pill renders as a clean
       circle on iPhone/iPad and not a vertical oval. flex-shrink: 0 keeps
       Safari's flex implementation from horizontally compressing the dot
       when the container runs out of room. box-sizing locked so the 28-px
       width is the rendered width, not just the content box. */
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    box-sizing: border-box;
}
/* Invisible tap-zone expander — the visual pill stays its rendered size,
   but the clickable area extends to at least 44 × 44 px (Apple HIG). On
   phone the dot-only pills are 28 × 28 visually, so the ::before's negative
   inset stretches the hit zone outward by 8 px on each side to make 44 px.
   transparent + no pointer events on the parent's other children = no
   layout impact. */
.fd2-step-pill::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: inherit;
}
.fd2-step-pill:focus-visible {
    outline: 2px solid #8B1A1A;
    outline-offset: 2px;
}
.fd2-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e9ecef;
    color: #6c757d;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.fd2-step-name {
    overflow: hidden;
    text-overflow: ellipsis;
}
.fd2-step-line {
    flex: 0 0 28px;
    width: 28px;          /* explicit width too — Safari sometimes collapses
                             flex-basis to 0 in space-constrained navbars */
    height: 2px;
    background: #ced4da;
    flex-shrink: 0;
}

/* Done — green pill, green num badge, green connecting line */
.fd2-step.is-done .fd2-step-pill {
    border-color: #28a745;
    color: #28a745;
}
.fd2-step.is-done .fd2-step-num {
    background: #28a745;
    color: #fff;
}
.fd2-step.is-done .fd2-step-line {
    background: #28a745;
}
.fd2-step.is-done .fd2-step-pill:hover {
    background: #e9f7ec;
}

/* Current — burgundy pill, white num on translucent badge */
.fd2-step.is-current .fd2-step-pill {
    border-color: #8B1A1A;
    background: #8B1A1A;
    color: #fff;
    box-shadow: 0 2px 6px rgba(139, 26, 26, 0.25);
    cursor: default;
}
.fd2-step.is-current .fd2-step-num {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* Future — muted grey pill, hover lifts slightly */
.fd2-step.is-future .fd2-step-pill {
    border-color: #adb5bd;
    color: #6c757d;
}
.fd2-step.is-future .fd2-step-pill:hover {
    background: #f8f9fa;
    color: #495057;
    border-color: #6c757d;
}

/* Blocked — same as future, but not clickable (e.g., wood Apron w/o border) */
.fd2-step.is-blocked .fd2-step-pill {
    cursor: not-allowed;
    opacity: 0.6;
}
.fd2-step.is-blocked .fd2-step-pill:hover {
    background: #fff;
    color: #6c757d;
    border-color: #adb5bd;
}
/* Action buttons (right side of toolbar) */
#fd2-toolbar .btn-primary {
    font-weight: 700;
    padding: 0.5rem 0.9rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
#fd2-toolbar .btn-outline-dark {
    font-weight: 600;
    border-width: 1.5px;
    border-color: #495057;
    color: #212529;
    background-color: #fff;
    padding: 0.45rem 0.8rem;
}
#fd2-toolbar .btn-outline-dark:hover:not(:disabled) {
    background-color: #231f20;
    border-color: #231f20;
    color: #fff;
}
#fd2-toolbar .btn-outline-dark:disabled {
    opacity: 0.45;
    background-color: #fff;
}

/* Sidebar */
#fd2-sidebar {
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 0.875rem;
}
#fd2-sidebar .fd2-panel {
    padding: 12px 16px !important;
}
#fd2-sidebar h6 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
}

/* "Select a [type]" placeholder shown before a product is picked, on each step.
   Replaces empty/confusing controls until the user makes a selection. */
.fd2-select-prompt {
    text-align: center;
    padding: 16px 12px 12px;
    border: 1px dashed #cfd4d9;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #fafafa;
    color: #6c757d;
}
.fd2-select-prompt i.bi {
    font-size: 1.8rem;
    color: #0d6efd;
    opacity: 0.7;
}
.fd2-select-prompt p.fw-bold {
    color: #212529;
    font-size: 0.95rem;
}

/* Range slider — larger handle, more space */
#fd2-sidebar .form-range {
    margin: 8px 0;
}
#fd2-sidebar .form-range::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
}
#fd2-sidebar .form-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
}
#fd2-sidebar .form-range::-ms-thumb {
    width: 20px;
    height: 20px;
}

/* Touch devices — sliders live in the bottom panel "Adjust" pane on mobile
   and Bootstrap's default ~16px thumb is a tiny tap target. Bump thumb size,
   track height, and add extra vertical hit area so fingers can grab + drag
   reliably. Applies to every range input regardless of parent. */
@media (pointer: coarse) {
    .form-range {
        height: 36px;          /* expands the touch zone vertically */
        padding: 0;
    }
    .form-range::-webkit-slider-thumb {
        width: 28px;
        height: 28px;
        margin-top: -11px;     /* center the larger thumb on the taller track */
        box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    }
    .form-range::-moz-range-thumb {
        width: 28px;
        height: 28px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    }
    .form-range::-webkit-slider-runnable-track {
        height: 6px;
    }
    .form-range::-moz-range-track {
        height: 6px;
    }
    /* Active/pressed state gives a tactile signal that the thumb is grabbed */
    .form-range:active::-webkit-slider-thumb {
        transform: scale(1.1);
    }
    .form-range:active::-moz-range-thumb {
        transform: scale(1.1);
    }
}

/* Right palette (product thumbnails) */
#fd2-palette {
    width: 380px;
    min-width: 380px;
    flex-shrink: 0;
}
.fd2-palette-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    height: calc(100% - 36px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    align-content: start;
}
.fd2-palette-scroll .fd2-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    flex-shrink: 0;
    border-radius: 6px;
}

/* Palette thumbnail with SKU label */
.fd2-thumb-wrap {
    position: relative;
    display: inline-block;
    transition: transform 0.15s ease;
    cursor: pointer;
}
.fd2-thumb-wrap:hover {
    transform: scale(1.25);
    z-index: 10;
}
.fd2-thumb-wrap .fd2-sku-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    background: rgba(0,0,0,0.55);
    line-height: 1.2;
    padding: 2px 3px;
    pointer-events: none;
    word-wrap: break-word;
    white-space: normal;
    border-radius: 0 0 6px 6px;
}
.fd2-thumb-wrap:hover .fd2-sku-label {
    font-size: 12px;
}

/* Sidebar product preview */
.fd2-preview-img {
    width: 100%;
    height: 150px;
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    background: #f8f9fa;
}

/* Sidebar shape gallery */
.fd2-thumb-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 180px;
    overflow-y: auto;
    padding: 2px;
}
.fd2-thumb {
    width: 56px;
    height: 56px;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    object-fit: contain;
    background: #f8f9fa;
    transition: border-color 0.15s;
}
.fd2-thumb:hover {
    border-color: #999;
}
.fd2-thumb.active {
    border-color: #0d6efd;
    box-shadow: 0 0 0 2px rgba(13,110,253,0.25);
}

/* Measure tool cursor */
.fd2-measure-cursor { cursor: crosshair !important; }

/* Add-note mode banner — shown when comment add mode is active. Same pill
   pattern as the measure banner but slightly different red. */
#fd2-comment-banner {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    /* Must beat #fd2-toolbar (z-index: 100), which contains the phone's
       overlaid material toggle bar — otherwise the banner sits under it. */
    z-index: 150;
    pointer-events: none;
    background: rgba(217, 83, 79, 0.96);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    padding: 9px 18px;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
}
#fd2-comment-banner.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
@media (max-width: 600px) {
    #fd2-comment-banner { font-size: 0.85rem; padding: 8px 14px; top: 8px; }
}

/* Measure mode banner — top-of-canvas overlay that confirms you're in
   measure mode and walks through the two-tap flow */
#fd2-measure-banner {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    /* Must beat #fd2-toolbar (z-index: 100), which contains the phone's
       overlaid material toggle bar — otherwise the banner sits under it. */
    z-index: 150;
    pointer-events: none;
    background: rgba(230, 57, 70, 0.96);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    padding: 9px 18px;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
    max-width: 92vw;
    overflow: hidden;
    text-overflow: ellipsis;
}
#fd2-measure-banner.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
@media (max-width: 600px) {
    #fd2-measure-banner {
        font-size: 0.85rem;
        padding: 8px 14px;
        top: 8px;
    }
}

/* Description More/Less links */
.fd2-more-link, .fd2-less-link {
    font-size: 0.8rem;
    white-space: nowrap;
}

/* Shape gallery in palette — uses same grid as palette */
#fd2-shape-gallery {
    display: contents;
}
#fd2-shape-gallery .fd2-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 1.2;
    background: #fff;
}
#fd2-shape-gallery .fd2-thumb-wrap {
    position: relative;
}
#fd2-shape-gallery .fd2-sku-label {
    font-size: 10px;
}

/* Footer — explicit height + flex centering. Every direct child is forced
   to the SAME row height (44 px) so the help button doesn't tower over the
   copy/links and make them look bottom-aligned by comparison. */
#fd2-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 24px;
    background: #000;
    color: #fff;
    font-size: 15px;             /* up from 14 — was reading too small on desktop */
    line-height: 1;
    font-family: Helvetica, Arial, sans-serif;
    height: 44px;                /* explicit — no padding-top/bottom mismatch */
    padding: 0 16px;
    border-top: 1px solid #444;
}
/* Every direct child: matched height, centered content, no inherited
   baselines tugging text down. */
#fd2-footer > * {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    height: 100%;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0;
}
#fd2-footer svg {
    display: block;
    flex-shrink: 0;
}
#fd2-footer a {
    color: #fff;
    text-decoration: none;
    gap: 6px;
}
#fd2-footer a:hover {
    color: #ccc;
}
#fd2-footer #btn-help {
    color: #fff;
    text-decoration: none;
    gap: 6px;
    font-size: 15px;
    padding: 0 8px;
    border: none;
    background: none;
}
#fd2-footer #btn-help:hover { color: #ccc; }
#fd2-footer #btn-help:focus { box-shadow: none; outline: none; }

/* Canvas area */
#fd2-app > main {
    min-width: 0;
    overflow: hidden;
}

/* Canvas container */
#fd2-canvas-container {
    cursor: grab;
    background: #ffffff;
}
#fd2-canvas-container:active {
    cursor: grabbing;
}

/* Zoom + view controls — bumped from 36 → 44 px to clear Apple HIG.
   Apply the same min to the tool-palette (measure/comment/angle) and
   the fullscreen toggle so the whole canvas-overlay strip is consistent. */
#btn-zoom-in, #btn-zoom-out, #btn-zoom-reset, #btn-fullscreen,
#btn-measure-distance-canvas, #btn-measure-angle-canvas, #btn-comment-canvas {
    min-width: 44px;
    min-height: 44px;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Bootstrap's btn-outline-dark flips text color to white on :hover/:focus/:active,
   which collides with the bg-white class on these buttons -> invisible icon
   (white-on-white). Lock icon color dark in every state; use a subtle gray bg on
   hover/active so the press is still visible. */
#btn-zoom-in, #btn-zoom-out, #btn-zoom-reset, #btn-fullscreen,
#btn-zoom-in:hover, #btn-zoom-out:hover, #btn-zoom-reset:hover, #btn-fullscreen:hover,
#btn-zoom-in:focus, #btn-zoom-out:focus, #btn-zoom-reset:focus, #btn-fullscreen:focus,
#btn-zoom-in:active, #btn-zoom-out:active, #btn-zoom-reset:active, #btn-fullscreen:active,
#btn-zoom-in:focus-visible, #btn-zoom-out:focus-visible, #btn-zoom-reset:focus-visible, #btn-fullscreen:focus-visible {
    color: #212529 !important;
    border-color: #212529 !important;
}
#btn-zoom-in:hover, #btn-zoom-out:hover, #btn-zoom-reset:hover, #btn-fullscreen:hover,
#btn-zoom-in:active, #btn-zoom-out:active, #btn-zoom-reset:active, #btn-fullscreen:active {
    background-color: #e9ecef !important;
}

/* Also lock color on the floating tool palette buttons (same outline-dark +
   bg-white combo, same issue) when NOT in active mode. The .active class
   intentionally inverts to blue and lets the white icon read on the blue bg. */
#btn-measure-distance-canvas:not(.active),
#btn-measure-distance-canvas:hover:not(.active),
#btn-measure-distance-canvas:focus:not(.active),
#btn-measure-distance-canvas:active:not(.active),
#btn-measure-angle-canvas:not(.active),
#btn-measure-angle-canvas:hover:not(.active),
#btn-measure-angle-canvas:focus:not(.active),
#btn-measure-angle-canvas:active:not(.active),
#btn-comment-canvas,
#btn-comment-canvas:hover,
#btn-comment-canvas:focus,
#btn-comment-canvas:active {
    color: #212529 !important;
    border-color: #212529 !important;
}
#btn-measure-distance-canvas:hover:not(.active),
#btn-measure-angle-canvas:hover:not(.active),
#btn-comment-canvas:hover {
    background-color: #e9ecef !important;
}

/* ============================================
   Step hint — short contextual help at the top of each step panel
   ============================================
   Subtle burgundy-accented info banner for first-time users. Used on the
   Room step to explain shape selection + blue-dot drag handles; the same
   pattern can be extended to other steps as needed. */
.fd2-step-hint {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    background: #fbf3f3;
    border-left: 3px solid #8B1A1A;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    color: #495057;
    line-height: 1.4;
}
.fd2-step-hint i.bi {
    color: #8B1A1A;
    font-size: 1rem;
    line-height: 1.4;
    flex-shrink: 0;
}

/* ============================================
   Floating "Next step" CTA — bottom-right of canvas
   ============================================
   Burgundy pill that names the next step so the user always knows what's
   coming. JS toggles .d-none on the last step (no next), and toggles
   disabled when the current step has an unmet requirement. */
#fd2-next-step-cta {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);    /* horizontally centered between the
                                       bottom-left tool palette and the
                                       bottom-right zoom strip */
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: #8B1A1A;
    color: #fff;
    border: none;
    border-radius: 24px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 3px 12px rgba(139, 26, 26, 0.30);
    cursor: pointer;
    transition: transform 0.15s ease-in-out, box-shadow 0.15s, background 0.15s, opacity 0.15s;
}
#fd2-next-step-cta:hover:not(:disabled) {
    transform: translateX(-50%) scale(1.04);   /* preserve centering */
    background: #a01e1e;
    box-shadow: 0 6px 20px rgba(139, 26, 26, 0.45);
}
#fd2-next-step-cta:active:not(:disabled) {
    transform: translateX(-50%) scale(0.98);
}
#fd2-next-step-cta:disabled {
    background: #adb5bd;
    color: #fff;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.75;
}
#fd2-next-step-cta i.bi {
    font-size: 1.1rem;
    line-height: 1;
}

/* Phone portrait — same bottom-center anchoring, smaller pill. The
   bottom-left tool palette and bottom-right zoom strip flank it; even on
   a 390-px iPhone the math is: 44 + ~140 (CTA) + 44 = 228, leaving ~80 px
   of canvas-bottom gap on each side. */
@media (max-width: 600px) and (orientation: portrait) {
    #fd2-next-step-cta {
        bottom: 12px;
        padding: 8px 14px;
        font-size: 0.82rem;
        border-radius: 20px;
    }
    #fd2-next-step-cta i.bi { font-size: 0.95rem; }
}

/* Comment button — active state when placing a pin */
#fd2-toolbar #btn-comment.active,
#fd2-toolbar #btn-comment.active:hover {
    background-color: #d9534f !important;
    border-color: #d9534f !important;
    color: #fff !important;
}

/* Comment drop mode — map-pin cursor on desktop, pulsing border on touch.
   The cursor change is invisible on touch devices, so the inset shadow gives
   a visible "armed for action" highlight on the canvas frame. */
.fd2-comment-drop,
.fd2-comment-drop * {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M 16,31 L 5.9,15.5 A 12,12 0 1,1 26.1,15.5 Z' fill='%23d9534f' stroke='%23ffffff' stroke-width='1.8' stroke-linejoin='round'/><circle cx='16' cy='12' r='4' fill='%23ffffff'/></svg>") 16 31, crosshair !important;
}
/* Visible glow around the canvas frame — works on every device including touch */
.fd2-comment-drop {
    box-shadow: inset 0 0 0 3px rgba(217, 83, 79, 0.55) !important;
    animation: fd2-comment-pulse 1.6s ease-in-out infinite;
}
@keyframes fd2-comment-pulse {
    0%, 100% { box-shadow: inset 0 0 0 3px rgba(217, 83, 79, 0.55); }
    50%      { box-shadow: inset 0 0 0 5px rgba(217, 83, 79, 0.85); }
}

/* Dimension inputs in sidebar */
#fd2-dim-inputs .form-control {
    font-size: 0.8rem;
}

/* Help modal */
#fd2-help-body {
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Estimate modal table */
#fd2-estimate-body table {
    font-size: 0.85rem;
}

/* ============================================
   Help Tour — spotlight overlay + tooltip
   ============================================ */
#fd2-tour-spotlight {
    position: fixed;
    border-radius: 4px;
    z-index: 1000;
    /* Ring tightened 4 → 2 px; spotlight padding tightened 10 → 4 px in JS.
       Was extending visibly into the canvas / footer on small targets. */
    box-shadow: 0 0 0 2px #e67e22, 0 0 0 9999px rgba(0,0,0,0.55);
    pointer-events: none;
    transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease;
    display: none;
}
#fd2-tour-tooltip {
    position: fixed;
    z-index: 1001;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    padding: 20px 24px;
    max-width: 340px;
    min-width: 260px;
    display: none;
    transition: opacity 0.2s ease;
}
.fd2-tour-dots {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}
.fd2-tour-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
}
.fd2-tour-dot.active {
    background: #e67e22;
}
.fd2-tour-step-label {
    font-size: 11px;
    font-weight: 700;
    color: #e67e22;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}
.fd2-tour-title {
    font-size: 17px;
    font-weight: 700;
    color: #212529;
    margin: 4px 0 6px 0;
}
.fd2-tour-desc {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    margin: 0 0 14px 0;
}
.fd2-tour-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.fd2-tour-skip {
    font-size: 13px;
    color: #888;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.fd2-tour-skip:hover {
    color: #333;
}
.fd2-tour-btn {
    background: #e67e22;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.fd2-tour-btn:hover {
    background: #cf6d17;
}

/* Quote form collapse (not display:none — allows Chrome autofill) */
.fd2-collapsed {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}
.fd2-expanded {
    max-height: 600px;
    overflow: visible;
    opacity: 1;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}

/* Download dropdown z-index */
#btn-save-group .dropdown-menu {
    z-index: 110;
}

/* ============================================
   Toolbar material indicator — plain "Wood" / "Stone" label
   ============================================
   Reads as a label, not a dropdown. No chrome at all — bold burgundy text
   with underline-on-hover as the only clickability signal. Clicking jumps
   to step 1 and flashes the material section. appearance:none kills the
   native <button> widget styling iOS/Safari otherwise paint around it. */
.fd2-material-indicator {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    color: #8B1A1A;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
}
.fd2-material-indicator:hover {
    text-decoration: underline;
}
.fd2-material-indicator:active {
    opacity: 0.7;
}
/* Keyboard focus — match the hover affordance (underline) instead of a box. */
.fd2-material-indicator:focus,
.fd2-material-indicator:focus-visible {
    outline: none;
    text-decoration: underline;
}

/* Step 1 panel — material radios (form-check) styled the same burgundy as
   the indicator + the stepper current pill so the brand colour ties together. */
#fd2-material-toggle {
    gap: 1.5rem;
}
#fd2-material-section .form-check {
    padding-left: 1.6em;
    display: inline-flex;
    align-items: center;
    min-height: auto;
}
#fd2-material-section .form-check-input {
    width: 1.2em;
    height: 1.2em;
    margin-top: 0;
    margin-left: -1.6em;
    cursor: pointer;
    border-color: #6c757d;
    border-width: 1.5px;
}
#fd2-material-section .form-check-input:checked {
    background-color: #8B1A1A;
    border-color: #8B1A1A;
}
#fd2-material-section .form-check-input:focus {
    border-color: #8B1A1A;
    box-shadow: 0 0 0 0.2rem rgba(139, 26, 26, 0.25);
}
#fd2-material-section .form-check-label {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    margin-left: 0.4rem;
    line-height: 1;
    user-select: none;
}
#fd2-material-section .form-check-input:checked ~ .form-check-label {
    color: #8B1A1A;
}

/* Brief burgundy flash on the material section when arrived from the
   indicator — helps the user spot WHERE the radios live in the panel. */
@keyframes fd2-flash {
    0%   { background: rgba(139, 26, 26, 0.18); box-shadow: 0 0 0 3px rgba(139, 26, 26, 0.18); }
    100% { background: transparent;             box-shadow: 0 0 0 3px transparent; }
}
.fd2-flash {
    animation: fd2-flash 1.5s ease-out;
    border-radius: 6px;
}

/* ============================================
   Bottom panel structure (hidden on desktop)
   ============================================ */
#fd2-bottom-panel { display: none; }

.fd2-bp-tabs {
    display: flex;
    gap: 6px;
    padding: 8px 12px 0;
    background: #f0f0f0;
    border-top: 1px solid #dee2e6;
    flex-shrink: 0;
}
.fd2-bp-tab {
    flex: 0 0 auto;
    border: 1px solid #ccc;
    border-bottom: none;
    background: #e9ecef;
    padding: 10px 20px;          /* 8 → 10 so the tap height clears 44 px */
    min-height: 44px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: background 0.15s, color 0.15s;
    position: relative;
    bottom: -1px;
}
.fd2-bp-tab.active {
    color: #212529;
    background: #fff;
    border-color: #dee2e6;
    z-index: 1;
}

/* One-shot attention pulse — added by JS the first time a user picks a
   product on a step, to teach that fine-tuning lives in the Adjust tab.
   Class is removed after ~2.5s. Per-step session-scoped so it only fires
   four times per session at most. */
@keyframes fd2-tab-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.55); background: #cfe2ff; }
    70%  { box-shadow: 0 0 0 10px rgba(13, 110, 253, 0);  background: #cfe2ff; }
    100% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);     background: #e9ecef; }
}
.fd2-bp-tab.fd2-pulse {
    animation: fd2-tab-pulse 1.1s ease-out 2;
    color: #0d6efd;
}
.fd2-bp-body {
    position: relative;
    flex-grow: 1;
    overflow: hidden;
    background: #fff;
    border-top: 1px solid #dee2e6;
}
.fd2-bp-pane {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    visibility: hidden;
    pointer-events: none;
}
.fd2-bp-pane.active {
    visibility: visible;
    pointer-events: auto;
}

/* Selection pane: thumbnail grid */
.fd2-bp-pane[data-bp-pane="selection"] .fd2-palette-scroll {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 8px;
    height: auto;
}

/* ============================================
   Hamburger menu
   ============================================ */
.fd2-hamburger-menu {
    position: absolute;
    top: 50px;
    right: 0;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 200;
    min-width: 200px;
    display: none;
    flex-direction: column;
    padding: 6px 0;
}
.fd2-hamburger-menu.open { display: flex; }
.fd2-hamburger-menu button {
    border: none;
    background: transparent;
    text-align: left;
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #212529;
    width: 100%;
    border-radius: 0;
    cursor: pointer;
}
.fd2-hamburger-menu button:hover:not(:disabled) { background: #f0f0f0; }
.fd2-hamburger-menu button:disabled { opacity: 0.4; cursor: default; }

/* Room Preview AI — burgundy styling to make it stand out as a premium feature */
.fd2-hamburger-menu button.fd2-hm-burgundy {
    color: #8B1A1A;
    font-weight: 700;
}
.fd2-hamburger-menu button.fd2-hm-burgundy i.bi {
    color: #8B1A1A;
}
.fd2-hamburger-menu button.fd2-hm-burgundy:hover:not(:disabled) {
    background: #fbeaea;
    color: #6b1414;
}

/* Hamburger toggle button — large + borderless on every screen so it
   stands out as a clean menu glyph at the far left of the toolbar. All
   layout properties (width, padding, border) are locked with !important so
   the .btn-outline-dark hover styles can't perturb them and shift the icon.
   The 1.5px transparent border reserves the same space the visible border
   would take, so toggling state can never sub-pixel-nudge the layout. */
#fd2-hamburger,
#fd2-hamburger:hover,
#fd2-hamburger:focus,
#fd2-hamburger:active,
#fd2-hamburger:focus-visible {
    font-size: 1.9rem;
    line-height: 1;
    width: 48px !important;
    min-height: 44px !important;   /* Apple HIG — was rendering at 43 px */
    padding: 0 !important;
    flex-shrink: 0;
    background: transparent !important;
    border: 1.5px solid transparent !important;
    box-shadow: none !important;
    color: #212529 !important;
    margin-right: 18px;       /* comfortable space before the logo */
    transition: transform 0.15s ease-in-out;
    transform-origin: center;
}
/* Hover: subtle scale-up — transform doesn't affect layout so nothing
   around it shifts, only the hamburger itself grows in place. */
#fd2-hamburger:hover:not(:disabled) {
    transform: scale(1.15);
}
#fd2-hamburger:active:not(:disabled) {
    transform: scale(0.95);
    opacity: 0.7;
}
#fd2-hamburger > i.bi {
    font-size: 1.9rem !important;
}

/* Hamburger menu — open it under the hamburger, not the far right edge */
.fd2-hamburger-menu {
    left: 0;
    right: auto;
    border-radius: 0 0 8px 8px;
}

/* Room Preview AI button (top toolbar) — burgundy text + outline */
.btn.fd2-ai-btn {
    color: #8B1A1A !important;
    border-color: #8B1A1A !important;
    font-weight: 600;
}
.btn.fd2-ai-btn > i.bi { color: #8B1A1A; }
.btn.fd2-ai-btn:hover:not(:disabled) {
    background-color: #8B1A1A !important;
    color: #fff !important;
    border-color: #8B1A1A !important;
}
.btn.fd2-ai-btn:hover:not(:disabled) > i.bi { color: #fff; }

/* Floating tool palette — top-left of canvas, mirrors the zoom strip on the right */
#fd2-tool-palette button.active {
    background-color: #0d6efd !important;
    color: #fff !important;
    border-color: #0d6efd !important;
}
/* Tool palette stays visible across all viewports now that it's a vertical
   column at bottom-left — the strip is slim (44 px wide), thumb-reachable on
   touch, and doesn't crowd the canvas top the way the old horizontal
   top-left strip did. Hamburger menu still mirrors the same tools for users
   who prefer that path. */

/* Menu items — larger text + more padding so they read well on every screen */
.fd2-hamburger-menu {
    min-width: 240px;
}
.fd2-hamburger-menu button {
    padding: 12px 18px;
    font-size: 0.95rem;
}
.fd2-hamburger-menu button > i.bi {
    font-size: 1.05rem;
    width: 1.4em;
    display: inline-block;
}

/* Section separators between groups of menu items */
.fd2-hamburger-menu .fd2-hm-sep {
    height: 1px;
    background: #dee2e6;
    margin: 6px 14px;
}

/* ============================================
   Landscape small screens: desktop layout, narrower panels
   ============================================ */
@media (max-width: 1366px) and (orientation: landscape) {
    #fd2-toolbar {
        height: 56px;
        padding: 0 10px !important;
    }
    #fd2-toolbar .logo-svg { height: 24px; }
    #fd2-toolbar .navbar-brand .fs-6 { font-size: 0.8rem !important; }
    /* Narrower landscape — shrink stepper pills + lines slightly */
    #fd2-stepper { min-width: 520px; }
    .fd2-step-pill { font-size: 0.8rem; padding: 3px 10px 3px 5px; }
    .fd2-step-num { width: 20px; height: 20px; font-size: 0.75rem; }
    .fd2-step-line { flex-basis: 20px; width: 20px; }

    /* Hamburger menu, hide desktop actions */
    #fd2-toolbar-actions { display: none !important; }
    #fd2-hamburger {
        display: inline-flex !important;
        font-size: 1.3rem;
        padding: 0.3rem 0.6rem;
    }
    .fd2-hamburger-menu {
        top: 56px;
        min-width: 220px;
    }
    .fd2-hamburger-menu button {
        padding: 10px 16px;
        font-size: 0.9rem;
    }

    #fd2-app {
        height: calc(100vh - 56px - 44px) !important;
        height: calc(100dvh - 56px - 44px) !important;
        margin-top: 0 !important;
    }

    /* Narrower sidebar */
    #fd2-sidebar {
        width: 220px !important;
        min-width: 220px !important;
        font-size: 0.8rem;
    }
    #fd2-sidebar .fd2-preview-img { height: 100px; }

    /* Narrower palette, 2 columns */
    #fd2-palette {
        width: 240px !important;
        min-width: 240px !important;
    }
    .fd2-palette-scroll {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px;
        padding: 6px;
    }

    /* Compact footer */
    #fd2-footer { font-size: 11px; padding: 6px 10px; gap: 10px; }

}

/* Very small landscape (phones) — even narrower */
@media (max-height: 500px) and (orientation: landscape) {
    #fd2-toolbar { height: 44px; }
    #fd2-toolbar .logo-svg { height: 20px; }
    #fd2-toolbar .navbar-brand .fs-6 { display: none !important; }
    /* Very small landscape — dots-only stepper */
    #fd2-stepper { min-width: 200px; }
    .fd2-step-name { display: none; }
    .fd2-step-pill {
        padding: 0;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        justify-content: center;
        gap: 0;
    }
    .fd2-step-num { background: transparent !important; width: auto; height: auto; }
    .fd2-step.is-current .fd2-step-pill { width: 30px; height: 30px; }
    /* Done — same fix as phone portrait: fill pill green so the white number reads */
    .fd2-step.is-done .fd2-step-pill {
        background: #28a745;
        border-color: #28a745;
        color: #fff;
    }
    .fd2-step-line { flex-basis: 8px; width: 8px; }
    .fd2-hamburger-menu { top: 44px; }

    #fd2-app {
        height: calc(100vh - 44px) !important;
        height: calc(100dvh - 44px) !important;
    }
    #fd2-footer { display: none !important; }

    #fd2-sidebar {
        width: 180px !important;
        min-width: 180px !important;
        font-size: 0.75rem;
    }
    #fd2-sidebar .fd2-preview-img { height: 70px; }

    #fd2-palette {
        width: 180px !important;
        min-width: 180px !important;
    }
    .fd2-palette-scroll {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 3px;
        padding: 4px;
    }
    .fd2-sku-label { font-size: 8px; }
}

/* ============================================
   Portrait mobile: max-width 1366px
   Bottom panel layout
   ============================================ */
@media (max-width: 1366px) and (orientation: portrait) {
    /* Toolbar */
    #fd2-toolbar {
        height: 60px;
        padding: 0 12px !important;
        flex-wrap: nowrap !important;
    }
    #fd2-toolbar .logo-svg { height: 30px; }
    #fd2-toolbar .navbar-brand .fs-6 { font-size: 0.9rem !important; }

    /* Stepper — iPad portrait has room for full pill labels, base sizing applies */
    #fd2-stepper { min-width: 540px; }

    /* Hide desktop action buttons + the right-side cluster — everything
       in those collapses to the hamburger menu on portrait mobile. */
    #fd2-toolbar-actions { display: none !important; }
    #fd2-toolbar-primary { display: none !important; }

    /* Phone/iPad portrait: dissolve the brand cluster so the hamburger and
       logo become direct flex children of the navbar. With the material
       toggle overlaid on canvas and the desktop actions hidden, the only
       remaining navbar items are hamburger | step-nav | logo — Bootstrap's
       built-in justify-content: space-between then distributes them evenly:
       hamburger at left, step nav at center, logo at right. */
    #fd2-brand-cluster {
        display: contents;
    }
    #fd2-toolbar .navbar-brand {
        margin: 0 !important;
        padding: 0;
    }

    /* Borderless larger hamburger — visually distinct from the framed
       wood/stone, step nav, and zoom buttons on either side. Same layout
       lock as the base rule: width + padding + transparent border identical
       across all states so hover never sub-pixel-shifts the icon. */
    #fd2-hamburger,
    #fd2-hamburger:hover,
    #fd2-hamburger:focus,
    #fd2-hamburger:active,
    #fd2-hamburger:focus-visible {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        font-size: 2.4rem;
        line-height: 1;
        width: 56px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 1.5px solid transparent !important;
        box-shadow: none !important;
        color: #212529 !important;
    }
    #fd2-hamburger:hover:not(:disabled) {
        transform: scale(1.1);
    }
    /* Also bump the inline icon override in the markup */
    #fd2-hamburger > i.bi {
        font-size: 2.4rem !important;
    }
    #fd2-hamburger:active:not(:disabled) {
        transform: scale(0.95);
        opacity: 0.55;
    }

    /* Stepper flows naturally as the middle flex child of the navbar (between
       hamburger and logo). justify-content: space-between on the navbar
       places it visually centered between the two ends. */
    #fd2-stepper {
        position: static;
        transform: none;
        z-index: auto;
    }

    /* Hide desktop sidebar + palette (content relocated by JS) */
    #fd2-sidebar { display: none !important; }
    #fd2-palette { display: none !important; }

    /* Show bottom panel — tuned to fit 2 rows of product thumbs without
       eating too much canvas space */
    #fd2-bottom-panel {
        display: flex !important;
        flex-direction: column;
        height: 280px;
        flex-shrink: 0;
        background: #f0f0f0;
    }

    /* Main app: column layout, leave room for footer */
    #fd2-app {
        flex-direction: column !important;
        height: calc(100vh - 60px - 44px) !important;
        height: calc(100dvh - 60px - 44px) !important;
        margin-top: 0 !important;
    }

    /* Footer */
    #fd2-footer {
        font-size: 12px;
        padding: 8px 12px;
        gap: 14px;
    }

    /* Canvas */
    #fd2-canvas-container { min-height: 200px; }

    /* Canvas-overlay strips are now anchored bottom-left / bottom-right
       (vertical columns). Override the iPad-portrait padding only — don't
       touch top/right/bottom or the strips bounce back to the top corners.
       The 44 × 44 button min size from the base CSS carries over (HIG). */
    #fd2-app > main > .position-absolute {
        padding: 6px !important;
    }

    /* Hamburger menu */
    .fd2-hamburger-menu {
        top: 60px;
        min-width: 240px;
    }
    .fd2-hamburger-menu button {
        padding: 14px 20px;
        font-size: 1rem;
    }

    /* Bottom panel tabs */
    .fd2-bp-tab {
        padding: 10px 24px;
        font-size: 0.95rem;
    }

    /* Thumbnails in bottom panel */
    .fd2-bp-pane .fd2-thumb-wrap:hover { transform: none; }
    .fd2-bp-pane .fd2-sku-label { font-size: 10px; }
    .fd2-bp-pane .fd2-thumb { width: 100%; height: auto; }

    /* Controls tab: hide preview images, horizontal layout */
    .fd2-bp-pane[data-bp-pane="controls"] .fd2-preview-img { display: none; }
    .fd2-bp-pane[data-bp-pane="controls"] .fd2-panel {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
        align-items: flex-start;
        padding: 10px 12px !important;
    }
    .fd2-bp-pane[data-bp-pane="controls"] .fd2-panel > * {
        flex: 0 0 auto;
    }
    .fd2-bp-pane[data-bp-pane="controls"] .fd2-panel h6 {
        width: 100%;
        margin-bottom: 0 !important;
    }
    .fd2-bp-pane[data-bp-pane="controls"] .fd2-panel .mb-2 {
        margin-bottom: 0 !important;
        min-width: 160px;
        max-width: 220px;
    }
    .fd2-bp-pane[data-bp-pane="controls"] .fd2-panel .row {
        min-width: 200px;
    }

    /* Pin form-select width so changing the option doesn't bounce the dropdown
       around when option text width varies (e.g., "20" x 20"" vs longer labels) */
    .fd2-bp-pane[data-bp-pane="controls"] .fd2-panel select.form-select {
        width: 100%;
    }

    /* Recommendation hint wraps below the dropdown — keep it from forcing
       the container to stretch by allowing it to wrap normally */
    #fd2-medallion-size-hint {
        line-height: 1.25;
        white-space: normal;
    }

    /* Measurements table: compact width */
    .fd2-bp-pane #fd2-summary table {
        max-width: 280px;
    }
}

/* ============================================
   Narrow portrait (small tablets / iPhone-Chrome simulation): 601-820px
   Hide brand text + shrink step buttons so the toolbar stays on one row.
   Wood/Stone toggle is overlaid on canvas via the broader portrait block above.
   ============================================ */
@media (max-width: 820px) and (min-width: 601px) and (orientation: portrait) {
    #fd2-toolbar .navbar-brand .fs-6 { display: none !important; }
    /* Narrow tablet portrait — full pills still fit but slightly smaller */
    #fd2-stepper { min-width: 440px; }
    .fd2-step-pill { font-size: 0.78rem; padding: 3px 9px 3px 4px; }
    .fd2-step-num { width: 20px; height: 20px; font-size: 0.72rem; }
    .fd2-step-line { flex-basis: 18px; width: 18px; }
}

/* ============================================
   Phone portrait: max-width 600px
   ============================================ */
@media (max-width: 600px) and (orientation: portrait) {
    #fd2-toolbar { height: 50px; }
    #fd2-toolbar .logo-svg { height: 24px; }
    #fd2-toolbar .navbar-brand .fs-6 { display: none !important; }

    /* Hide the material label entirely — phone toolbar is too cramped, and
       users still have two ways to switch material: the step 1 panel and
       the hamburger menu's Wood/Stone radios. */
    .fd2-material-indicator { display: none !important; }

    /* Phone stepper — dots only, names hidden. Each pill collapses into a
       numbered circle; the current circle is slightly larger and burgundy.
       Min-width sized for the actual content (5×28 dots + 4×12 lines +
       2px of margin) so there's still a gap between the stepper and the
       logo via the navbar's space-between distribution. */
    #fd2-stepper { min-width: 188px; }
    .fd2-step-name { display: none; }
    .fd2-step-pill {
        padding: 0;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        justify-content: center;
        gap: 0;
        font-size: 0.85rem;
    }
    .fd2-step-num {
        background: transparent !important;
        width: auto;
        height: auto;
        font-size: inherit;
    }
    .fd2-step.is-current .fd2-step-pill {
        width: 32px;
        height: 32px;
    }
    /* Done pill on phone — fill the WHOLE pill green so the white number
       reads. Without this, the base done state paints the num badge green
       but the phone override forces num bg transparent → white number on
       white pill = invisible. Mirroring the current-pill pattern (filled
       burgundy + white number) keeps the visual hierarchy consistent. */
    .fd2-step.is-done .fd2-step-pill {
        background: #28a745;
        border-color: #28a745;
        color: #fff;
    }
    .fd2-step-line { flex-basis: 12px; width: 12px; }

    .fd2-bp-pane[data-bp-pane="selection"] .fd2-palette-scroll {
        grid-template-columns: repeat(4, 1fr);
    }

    #fd2-app {
        height: calc(100vh - 50px - 44px) !important;
        height: calc(100dvh - 50px - 44px) !important;
    }
    /* Phone footer — icon-only. Hides the phone-number / email-address /
       "Help" text labels so the three links + copyright fit on one row.
       Icons enlarged to 22 px and each link gets a 44-wide tap zone (the
       base #fd2-footer > * height:100% gives the vertical 44 px from the
       footer's own height). */
    #fd2-footer { font-size: 12px; padding: 0 10px; gap: 26px; }
    #fd2-footer .fd2-footer-label { display: none; }
    #fd2-footer a, #fd2-footer #btn-help {
        gap: 0;
        min-width: 44px;
    }
    #fd2-footer a svg, #fd2-footer #btn-help i.bi {
        width: 22px;
        height: 22px;
    }
    #fd2-footer #btn-help i.bi {
        font-size: 22px !important;     /* override the inline style="font-size:1.1rem" */
    }

    .fd2-hamburger-menu { top: 50px; }

    /* Compact controls */
    .fd2-bp-pane .fd2-panel h6 { font-size: 0.75rem; }
    .fd2-bp-pane #fd2-summary { padding: 6px 8px !important; }
    .fd2-bp-pane #fd2-summary table { font-size: 0.75rem; max-width: 240px; }
}

/* ============================================
   Hamburger menu — material toggle
   ============================================
   Same burgundy form-check radio pattern as the toolbar material toggle so
   the user sees one consistent "selected" affordance everywhere. */
.fd2-hamburger-material {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
}
.fd2-hamburger-material .fd2-hm-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    margin-right: 4px;
}
.fd2-hamburger-material .form-check {
    padding-left: 1.6em;
    display: inline-flex;
    align-items: center;
    min-height: auto;
}
.fd2-hamburger-material .form-check-input {
    width: 1.2em;
    height: 1.2em;
    margin-top: 0;
    margin-left: -1.6em;
    cursor: pointer;
    border-color: #6c757d;
    border-width: 1.5px;
}
.fd2-hamburger-material .form-check-input:checked {
    background-color: #8B1A1A;
    border-color: #8B1A1A;
}
.fd2-hamburger-material .form-check-input:focus {
    border-color: #8B1A1A;
    box-shadow: 0 0 0 0.2rem rgba(139, 26, 26, 0.25);
}
.fd2-hamburger-material .form-check-label {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    color: #212529;
    user-select: none;
    margin-left: 0.4rem;
    line-height: 1;
    min-width: 3em;
}
.fd2-hamburger-material .form-check-input:checked ~ .form-check-label {
    color: #8B1A1A;
}

/* ============================================
   Loading overlay — shown while the page boots up.
   Sits above everything (z-index 9999) until app.js
   fires the fade-out at the end of FD2.app.init().
   ============================================ */
#fd2-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: #ffffff;
    transition: opacity 250ms ease-out;
}
#fd2-loading-overlay.fd2-fade-out {
    opacity: 0;
    pointer-events: none;
}
.fd2-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e9ecef;
    border-top-color: #231f20;
    border-radius: 50%;
    animation: fd2-spin 0.9s linear infinite;
}
@keyframes fd2-spin {
    to { transform: rotate(360deg); }
}
.fd2-loading-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    color: #6c757d;
    letter-spacing: 0.02em;
}

/* ============================================
   Palette loading — shown while a step's products
   are being lazy-fetched from api/products.asp.
   Applies to both desktop palette and mobile bottom-panel
   selection pane. Fade in/out on the .fd2-palette-loading class
   added by app.js showPaletteLoading().
   ============================================ */
#fd2-palette.fd2-palette-loading .fd2-palette-scroll,
#fd2-palette.fd2-palette-loading #fd2-gallery-container,
.fd2-bp-pane.fd2-palette-loading {
    position: relative;
    min-height: 120px;
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 150ms ease;
}
#fd2-palette.fd2-palette-loading .fd2-palette-scroll::after,
#fd2-palette.fd2-palette-loading #fd2-gallery-container::after,
.fd2-bp-pane.fd2-palette-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 3px solid #e9ecef;
    border-top-color: #231f20;
    border-radius: 50%;
    animation: fd2-spin 0.9s linear infinite;
    opacity: 1;
}