/* =====================================================================
 * NGS Box Calculator — modal + inline (Material 3-inspired)
 *
 * All styles namespaced under .fbc-instance / .fbc-* so they don't leak
 * into the host theme.
 * ===================================================================== */

.fbc-instance {
    --fbc-surface:        #ffffff;
    --fbc-surface-low:    #f6f3f2;
    --fbc-surface-high:   #eae7e7;
    --fbc-surface-dim:    #e5e2e1;
    --fbc-on-surface:     #1c1b1b;
    --fbc-on-surface-mut: #5f5e5b;
    --fbc-outline:        #bfc9c3;
    --fbc-outline-faint:  rgba(28, 27, 27, 0.08);
    --fbc-on-bg:          #1c1b1b;     /* near-black for contrast surfaces */
    --fbc-brand:          #00b5bd;     /* teal accent — info bar left border */
    --fbc-on-brand:       #99e0e6;     /* lighter teal, used as info-bar text accent */
    --fbc-radius:         12px;
    --fbc-radius-sm:      8px;
    --fbc-radius-pill:    9999px;
    --fbc-pad:            24px;
    --fbc-gap:            24px;
    --fbc-transition:     0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    color: var(--fbc-on-surface);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    box-sizing: border-box;
}
.fbc-instance *,
.fbc-instance *::before,
.fbc-instance *::after { box-sizing: inherit; }

/* ============== Panel base ============== */
.fbc-panel {
    background: var(--fbc-surface);
    border-radius: var(--fbc-radius);
    width: 100%;
}

/* ============== Modal panel ============== */
.fbc-panel--modal { overflow: hidden; }

.fbc-panel-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: var(--fbc-pad);
    border-bottom: 1px solid var(--fbc-outline-faint);
}
.fbc-panel-header__main {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.fbc-panel-thumb {
    flex: 0 0 96px;
    width: 96px; height: 96px;
    border-radius: var(--fbc-radius-sm);
    overflow: hidden;
    background: var(--fbc-surface-low);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.fbc-panel-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.fbc-panel-titles { flex: 1; min-width: 0; }
.fbc-panel-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fbc-on-surface);
    line-height: 1.25;
}
.fbc-panel-meta { display: flex; flex-direction: column; gap: 2px; }
.fbc-panel-meta-row {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--fbc-on-surface-mut);
}
.fbc-panel-meta-label { color: var(--fbc-on-surface-mut); }
.fbc-panel-meta-value { color: var(--fbc-on-surface); font-weight: 700; margin-left: 2px; }
.fbc-panel-product-name {
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--fbc-on-surface);
    text-transform: uppercase;
}

.fbc-panel-body {
    padding: var(--fbc-pad);
    display: flex;
    flex-direction: column;
    gap: var(--fbc-gap);
}
.fbc-panel-description {
    margin: 0;
    color: var(--fbc-on-surface-mut);
    font-size: 14px;
    line-height: 1.6;
}

/* ============== Calc row (sqft = stepper) ============== */
.fbc-calc-row {
    display: grid;
    grid-template-columns: 1fr auto 1.2fr;
    align-items: end;
    gap: 16px;
}
.fbc-calc-cell { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fbc-row-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fbc-on-surface-mut);
}
.fbc-equals {
    align-self: end;
    padding-bottom: 22px;
    font-size: 22px;
    font-weight: 600;
    color: var(--fbc-outline);
    line-height: 1;
}

/* SQFT input — !important to defend against themes (Flatsome / Avada / etc.)
 * that inject border-radius:7px / box-shadow / borders on every input. */
.fbc-instance .fbc-sqft-input {
    width: 100% !important;
    height: 48px !important;
    padding: 0 16px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--fbc-on-surface) !important;
    background: var(--fbc-surface) !important;
    border: 1px solid var(--fbc-outline) !important;
    border-radius: var(--fbc-radius-sm) !important;
    box-shadow: none !important;
    transition: border-color var(--fbc-transition), box-shadow var(--fbc-transition) !important;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    line-height: normal !important;
    text-align: left !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.fbc-instance .fbc-sqft-input::placeholder { color: #9b988f !important; font-weight: 400 !important; }
.fbc-instance .fbc-sqft-input:focus {
    outline: none !important;
    border-color: var(--fbc-on-surface) !important;
    box-shadow: 0 0 0 3px rgba(28, 27, 27, 0.06) !important;
}
.fbc-sqft-input::-webkit-outer-spin-button,
.fbc-sqft-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ============== Stepper — pill (modal) ============== */
.fbc-stepper {
    display: flex;
    align-items: center;
    height: 48px;
    background: var(--fbc-surface-low);
    border: 1px solid var(--fbc-outline);
    padding: 4px;
    gap: 4px;
    transition: border-color var(--fbc-transition), box-shadow var(--fbc-transition);
}
.fbc-stepper--pill { border-radius: var(--fbc-radius-pill); }
.fbc-stepper:focus-within {
    border-color: var(--fbc-on-surface);
    box-shadow: 0 0 0 3px rgba(28, 27, 27, 0.06);
}
.fbc-step {
    width: 40px; height: 40px;
    border: 0;
    background: transparent;
    color: var(--fbc-on-surface);
    cursor: pointer;
    border-radius: var(--fbc-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: background var(--fbc-transition), transform 0.1s;
    flex: 0 0 auto;
}
.fbc-step:hover  { background: var(--fbc-surface-high); }
.fbc-step:active { transform: scale(0.92); }
.fbc-step:focus  { outline: none; }
.fbc-step svg { display: block; }
/* Stepper readout — defend against theme input chrome (border/radius/shadow).
 * The value is just a number — must look like text, not an input box. */
.fbc-instance .fbc-stepper-value {
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--fbc-on-surface) !important;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    -moz-appearance: textfield;
    box-sizing: border-box !important;
}
.fbc-stepper-value::-webkit-outer-spin-button,
.fbc-stepper-value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ============== Stepper — split (inline) — square pill with bordered button cells ============== */
.fbc-stepper--split {
    border-radius: var(--fbc-radius-sm);
    background: var(--fbc-surface-low);
    height: 56px;
    overflow: hidden;
}
.fbc-stepper--split .fbc-step {
    width: 40px; height: 40px;
    background: var(--fbc-surface);
    border: 1px solid var(--fbc-outline);
    border-radius: var(--fbc-radius-sm);
    transition: background var(--fbc-transition), transform 0.1s, border-color var(--fbc-transition);
}
.fbc-stepper--split .fbc-step:hover { background: var(--fbc-surface-high); }
.fbc-stepper--split .fbc-step:active { transform: scale(0.95); }
.fbc-stepper--split .fbc-stepper-value {
    font-size: 18px;
    font-weight: 600;
}

/* ============== Wastage toggle ============== */
.fbc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}
.fbc-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
}
.fbc-toggle-track {
    position: relative;
    display: inline-block;
    width: 44px; height: 24px;
    border-radius: var(--fbc-radius-pill);
    background: var(--fbc-surface-dim);
    transition: background var(--fbc-transition);
    flex-shrink: 0;
}
.fbc-toggle-track::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #d6d2cb;
    transition: transform var(--fbc-transition);
}
.fbc-toggle-input:checked + .fbc-toggle-track { background: var(--fbc-on-bg); }
.fbc-toggle-input:checked + .fbc-toggle-track::after {
    transform: translateX(20px);
    border-color: #fff;
}
.fbc-toggle-input:focus-visible + .fbc-toggle-track {
    box-shadow: 0 0 0 3px rgba(28, 27, 27, 0.15);
}
.fbc-toggle-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--fbc-on-surface);
}

/* ============== Info bar (modal — dark with brand-teal left accent) ============== */
.fbc-info-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--fbc-on-bg);
    color: var(--fbc-on-brand);
    border-left: 4px solid var(--fbc-brand);
    border-radius: var(--fbc-radius);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.fbc-info-bar__icon {
    flex: 0 0 20px;
    color: var(--fbc-on-brand);
}
.fbc-info-message { flex: 1; }
.fbc-info-bar[data-state="empty"] .fbc-info-message { color: #d6d2cb; font-weight: 500; }

/* ============== Inline header ============== */
.fbc-inline-header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fbc-inline-header__icon {
    color: var(--fbc-on-bg);
    display: inline-flex;
    align-items: center;
}
.fbc-inline-header__title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fbc-on-bg);
}

/* ============== Inline summary (replaces info bar in inline mode) ============== */
.fbc-summary {
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--fbc-outline-faint);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fbc-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.fbc-summary-coverage {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.fbc-summary-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fbc-on-surface-mut);
}
.fbc-summary-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--fbc-on-bg);
    font-variant-numeric: tabular-nums;
}
.fbc-summary-unit {
    font-size: 13px;
    font-weight: 400;
    color: var(--fbc-on-surface-mut);
}
.fbc-summary-pill {
    display: inline-flex;
    align-items: center;
    background: var(--fbc-on-bg);
    color: #fff;
    padding: 8px 16px;
    border-radius: var(--fbc-radius-sm);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.fbc-summary-shipping {
    font-size: 14px;
    font-weight: 600;
    color: var(--fbc-on-surface);
    line-height: 1.4;
    background-color: #24dfe7;
    padding: 10px;
    border-radius: 10px;
}
.fbc-summary-shipping[data-state="empty"] {
    color: var(--fbc-on-surface-mut);
    font-weight: 400;
}

/* ============== Email lead-capture ============== */
.fbc-email-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fbc-email-trigger {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--fbc-on-surface-mut);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 8px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: color var(--fbc-transition);
    width: 100%;
}
.fbc-email-trigger:hover { color: var(--fbc-on-surface); }
.fbc-icon { display: inline-block; }
.fbc-icon--caret { transition: transform var(--fbc-transition); }
.fbc-email-trigger[aria-expanded="true"] .fbc-icon--caret { transform: rotate(180deg); }

.fbc-email-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.fbc-email-form[hidden] { display: none; }
.fbc-instance .fbc-email-input {
    flex: 1 !important;
    min-width: 180px !important;
    height: 44px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    border: 1px solid var(--fbc-outline) !important;
    border-radius: var(--fbc-radius-pill) !important;
    background: var(--fbc-surface) !important;
    color: var(--fbc-on-surface) !important;
    box-shadow: none !important;
    transition: border-color var(--fbc-transition), box-shadow var(--fbc-transition) !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
}
.fbc-instance .fbc-email-input:focus {
    outline: none !important;
    border-color: var(--fbc-on-surface) !important;
    box-shadow: 0 0 0 3px rgba(28, 27, 27, 0.06) !important;
}
.fbc-email-send {
    height: 44px;
    background: var(--fbc-on-bg);
    color: #fff;
    border: 0;
    border-radius: var(--fbc-radius-pill);
    padding: 0 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--fbc-transition), transform 0.1s;
}
.fbc-email-send:hover { background: #000; }
.fbc-email-send:active { transform: scale(0.97); }
.fbc-email-send:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.fbc-email-status {
    flex-basis: 100%;
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--fbc-on-surface-mut);
    text-align: center;
}
.fbc-email-status[data-state="success"] { color: #1a7d3b; }
.fbc-email-status[data-state="error"]   { color: #b32d2e; }

/* ============== CTA row (modal only — sample + quote) ============== */
.fbc-cta-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 8px;
}
.fbc-cta { display: flex; }
.fbc-cta > * { flex: 1; }
/* Force the host shortcode buttons into a consistent full-width pill so the
   modal looks coherent regardless of which plugin renders them. */
.fbc-cta a,
.fbc-cta button {
    width: 100% !important;
    height: 56px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 24px !important;
    border-radius: var(--fbc-radius-pill) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
    text-decoration: none !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    transition: background var(--fbc-transition), transform 0.1s, box-shadow var(--fbc-transition) !important;
}
.fbc-cta a:active,
.fbc-cta button:active { transform: scale(0.98) !important; }

.fbc-cta--sample a,
.fbc-cta--sample button {
    background: var(--fbc-surface-high) !important;
    color: var(--fbc-on-surface) !important;
    border: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
.fbc-cta--sample a:hover,
.fbc-cta--sample button:hover { background: var(--fbc-surface-dim) !important; }

.fbc-cta--quote a,
.fbc-cta--quote button {
    background: var(--fbc-on-bg) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.fbc-cta--quote a:hover,
.fbc-cta--quote button:hover { background: #000 !important; }

/* ============== Opener button (modal mode) ============== */
.fbc-open-btn {
    border-radius: var(--fbc-radius-pill) !important;
    padding: 10px 22px !important;
}

/* ============== Modal overlay + content ============== */
body.fbc-modal-open { overflow: hidden; }

.fbc-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vh 16px;
    overflow-y: auto;
    /* Fade in/out */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--fbc-transition), visibility var(--fbc-transition);
}
.fbc-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.fbc-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 27, 27, 0.40);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.fbc-modal__content {
    position: relative;
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--fbc-radius);
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.12);
    background: var(--fbc-surface);
    /* Slight lift + fade on entry */
    transform: translateY(16px) scale(0.98);
    opacity: 0;
    transition: transform var(--fbc-transition), opacity var(--fbc-transition);
    margin: auto;
}
.fbc-modal.is-open .fbc-modal__content {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.fbc-modal .fbc-panel { background: transparent; }

/* ============== Close button — plain, just an icon, no background motion ============== */
.fbc-close {
    flex: 0 0 32px;
    width: 32px; height: 32px;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--fbc-on-surface-mut);
    cursor: pointer;
    border-radius: var(--fbc-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--fbc-transition), background var(--fbc-transition);
    margin-top: 2px;
}
.fbc-close:hover  { color: var(--fbc-on-surface); background: var(--fbc-surface-high); }
.fbc-close:focus-visible { outline: 2px solid var(--fbc-on-surface); outline-offset: 2px; }
.fbc-close svg { display: block; }

/* ============== Inline panel ============== */
.fbc-instance.fbc-inline,
.fbc-panel--inline {
    max-width: 480px !important;
}
.fbc-panel--inline {
    background: var(--fbc-surface);
    border: 1px solid var(--fbc-outline-faint);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    padding: var(--fbc-pad);
    display: flex;
    flex-direction: column;
    gap: var(--fbc-gap);
    border-radius: var(--fbc-radius);
}

/* ============== Responsive ============== */
@media only screen and (max-width: 600px) {
    .fbc-instance { --fbc-pad: 20px; --fbc-gap: 20px; }
    .fbc-modal { padding: 12px; align-items: flex-end; }
    .fbc-modal__content { max-height: 92vh; margin-bottom: 0; }
    .fbc-panel-title { font-size: 20px; }
    .fbc-panel-thumb { flex-basis: 72px; width: 72px; height: 72px; }
    .fbc-calc-row { grid-template-columns: 1fr; gap: 16px; }
    .fbc-equals { display: none; }
    .fbc-summary-row { flex-direction: column; align-items: flex-start; gap: 12px; }
    .fbc-summary-pill { align-self: flex-start; }
    .fbc-stepper { align-self: flex-start; }
}

/* Visually-hidden helper for screen-reader-only labels */
.fbc-instance .screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* =====================================================================
 * INLINE MODE — Tailwind-inspired refresh
 * ---------------------------------------------------------------------
 * Visual spec source: a Tailwind reference layout with:
 *   • Large centered SQFT input (text-4xl, 36px, py-6 px-8)
 *   • Pill stepper with wide black-gradient ± buttons (h-20, w-28)
 *   • Bright cyan results card (#24dfe7) with 2px black border
 *   • SQFT/BOX black badge on the right of the results card
 *   • Centered minimal "Email Product Details" link footer
 *
 * Selectors are scoped to .fbc-inline / .fbc-instance.fbc-inline so the
 * modal mode is untouched. !important is used liberally on the form
 * controls because host themes (Flatsome / Avada) aggressively reset
 * input chrome and this layer needs to win.
 * ===================================================================== */

/* Outer wrapper — full-width so the side-image grid column has room.
 * Only the calc PANEL is capped (~410px), not the whole instance.
 * 10px left margin keeps the card off the accordion's left edge. */
.fbc-instance.fbc-inline {
    max-width: none !important;
    margin-left: 0px !important;
}
.fbc-panel--inline {
    width: 100% !important;
    max-width: 410px !important;
    background: #f8f9fa !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;   /* was 0 25px 50px -12px rgba(0,0,0,0.25) — much softer */
    padding: 16px !important;
    border-radius: 16px !important;
    gap: 12px !important;
}

/* Outer 2-column grid — calc on the left, side image on the right (desktop ≥992px).
 * Single column on mobile/tablet (side image is hidden there). The `.has-image`
 * modifier is added by render_inline() ONLY when an admin has saved a side image,
 * so the second column doesn't render as an empty void when nothing's set. */
.fbc-inline-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    align-items: stretch;
    max-width: none;          /* let the grid fill the container so the image can span */
    margin: 0;
}
@media (min-width: 992px) {
    .fbc-inline-grid.has-image {
        /* Left: 410px fixed for the calc card.
         * Right: 1fr — takes ALL remaining horizontal space for the image. */
        grid-template-columns: 410px minmax(0, 1fr);
    }
}

/* Side image — hidden on mobile/tablet, visible on desktop with .has-image.
 *
 * The image is positioned ABSOLUTELY inside its grid cell so its natural
 * aspect ratio doesn't inflate the row height. With grid `align-items:
 * stretch` (default), the row's height is set by the tallest in-flow
 * item — the calc card. The image cell stretches to match that height
 * and crops via `object-fit: cover`. No more "image hangs below the
 * calculator" gap. */
.fbc-inline-side-image {
    display: none !important;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: var(--fbc-surface-low);
    min-height: 0;
    height: 100%;
}
.fbc-inline-side-image img,
.fbc-inline-side-image .fbc-inline-side-image__img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-width: none !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}
@media (min-width: 992px) {
    .fbc-inline-grid.has-image .fbc-inline-side-image {
        display: block !important;        /* block, not flex — no flex children to align */
    }
}

/* Mobile banner — separate slot rendered BELOW the calc on <992px.
 * Hidden on desktop where the side image takes over. */
.fbc-inline-mobile-image {
    display: block;
    width: 100%;
    max-width: 410px;
    overflow: hidden;
    border-radius: 16px;
    background: var(--fbc-surface-low);
}
.fbc-inline-mobile-image img {
    width: 100%;
    object-fit: contain;
    display: block;
}
@media (min-width: 992px) {
    .fbc-inline-mobile-image { display: none; }
}

/* Header row — icon + bold title + inline Total Coverage on the right.
 * The coverage value is now displayed up here (small, inline) instead
 * of taking a whole row in the results card below. */
.fbc-inline .fbc-inline-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
}
.fbc-inline .fbc-inline-header__icon {
    background: #edeeef;
    padding: 6px;
    border-radius: 8px;
    color: #012d1d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.fbc-inline .fbc-inline-header__icon svg {
    width: 18px; height: 18px;
}
.fbc-inline .fbc-inline-header__title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #191c1d !important;
    letter-spacing: -0.005em;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}
/* Total Coverage chip — small, inline, pushed to the right */
.fbc-inline .fbc-inline-header__coverage {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 9999px;
    background: #edeeef;
    color: #191c1d;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.fbc-inline .fbc-inline-header__coverage-label {
    color: rgba(25, 28, 29, 0.55);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.fbc-inline .fbc-inline-header__coverage-value { color: #191c1d; font-weight: 800; }
.fbc-inline .fbc-inline-header__coverage-unit  { color: rgba(25, 28, 29, 0.6); font-size: 10px; font-weight: 700; }

/* Field block — label sits above its control */
.fbc-inline .fbc-inline-field {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fbc-inline .fbc-inline-field .fbc-row-label,
.fbc-inline .fbc-row-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #414844 !important;
    margin: 0;
}

/* SQFT input — large centered text, soft fill, focus picks up green ring */
.fbc-inline .fbc-sqft-wrap {
    position: relative;
    width: 100%;
}
.fbc-instance.fbc-inline .fbc-sqft-input {
    width: 100% !important;
    height: auto !important;
    padding: 14px 44px 14px 20px !important;   /* was 18 / 48 / 24 — saves ~8px tall */
    font-size: 26px !important;                 /* was 28 */
    font-weight: 600 !important;
    text-align: center !important;
    background: #f3f4f5 !important;
    border: 2px solid #edeeef !important;
    border-radius: 12px !important;
    color: #191c1d !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease !important;
    line-height: 1.1 !important;
    box-sizing: border-box !important;
    font-variant-numeric: tabular-nums;
}
.fbc-instance.fbc-inline .fbc-sqft-input::placeholder {
    color: #9aa19c !important;
    font-weight: 500 !important;
    font-size: 20px !important;
}
.fbc-instance.fbc-inline .fbc-sqft-input:focus {
    border-color: #2c694e !important;
    box-shadow: none !important;
    outline: none !important;
}
.fbc-inline .fbc-sqft-unit {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #717973;
    font-size: 14px;
    font-weight: 500;
    pointer-events: none;
}

/* Stepper — three flex children, each with its OWN background. */
.fbc-inline .fbc-stepper--inline,
.fbc-inline .fbc-stepper {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 52px;                      /* was 64 — saves 12px */
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    gap: 0;
    overflow: visible;
    box-shadow: none;
}
.fbc-inline .fbc-stepper--inline .fbc-step,
.fbc-inline .fbc-stepper .fbc-step {
    width: 80px;                       /* was 90 */
    flex: 0 0 80px;
    height: 52px;                      /* match container */
    background: linear-gradient(to bottom, #333333, #000000);
    border: 0;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s ease;
    border-radius: 0;
}
/* OUTER edges are full pill curves — the button IS the corner. */
.fbc-inline .fbc-stepper--inline .fbc-step:first-of-type,
.fbc-inline .fbc-stepper .fbc-step:first-of-type {
    border-radius: 9999px 0 0 9999px;
}
.fbc-inline .fbc-stepper--inline .fbc-step:last-of-type,
.fbc-inline .fbc-stepper .fbc-step:last-of-type {
    border-radius: 0 9999px 9999px 0;
}
.fbc-inline .fbc-stepper--inline .fbc-step:hover,
.fbc-inline .fbc-stepper .fbc-step:hover {
    background: linear-gradient(to bottom, #444444, #111111);
}
/* No click animation — clicking a button should feel solid, not bouncy. */
.fbc-inline .fbc-stepper--inline .fbc-step:active,
.fbc-inline .fbc-stepper .fbc-step:active {
    transform: none;
}
.fbc-inline .fbc-stepper--inline .fbc-step svg,
.fbc-inline .fbc-stepper .fbc-step svg {
    width: 26px;
    height: 26px;
    stroke-width: 3;
}
.fbc-instance.fbc-inline .fbc-stepper-value {
    flex: 1 !important;
    height: 52px !important;
    min-width: 0 !important;
    background: #f3f4f5 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    color: #191c1d !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 52px !important;
    -moz-appearance: textfield;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

/* Wastage toggle — bigger label, slightly tighter spacing */
.fbc-inline .fbc-toggle {
    gap: 12px;
    margin: 0;
}
.fbc-inline .fbc-toggle-text {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #414844 !important;
}

/* Hairline divider before the results box — replaces the prior subtle line */
.fbc-inline .fbc-toggle::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -10px;
    height: 1px;
    background: #edeeef;
    pointer-events: none;
}
.fbc-inline .fbc-toggle { position: relative; padding-bottom: 6px; }

/* Results card — bright cyan with thick near-black border.
 * Compact one-line variant: total coverage moved to the top header,
 * sqft/box pill removed, only the shipping line remains here. */
.fbc-inline .fbc-summary,
.fbc-inline .fbc-summary--compact {
    background: #24dfe7 !important;
    border: 2px solid #191c1d !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;     /* was 16 / 18 — saves ~8px */
    margin-top: 0 !important;
    border-top: 2px solid #191c1d !important;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.fbc-inline .fbc-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0;
}
.fbc-inline .fbc-summary-coverage {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fbc-inline .fbc-summary-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: rgba(25, 28, 29, 0.65) !important;
}
.fbc-inline .fbc-summary-value {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #191c1d !important;
    line-height: 1.1;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-variant-numeric: tabular-nums;
}
.fbc-inline .fbc-summary-unit {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: rgba(25, 28, 29, 0.6) !important;
}
.fbc-inline .fbc-summary-pill {
    background: #000000 !important;
    color: #ffffff !important;
    padding: 7px 11px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: -0.005em !important;
    text-transform: uppercase !important;
    white-space: nowrap;
    align-self: center;
}
.fbc-inline .fbc-summary-shipping {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #191c1d !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    line-height: 1.3;
    letter-spacing: -0.005em;
    margin: 0;
}
.fbc-inline .fbc-summary-shipping[data-state="empty"] {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(25, 28, 29, 0.6) !important;
    text-decoration: none !important;
}

/* Email button — minimal centered link */
.fbc-inline .fbc-email-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 0;
}
.fbc-inline .fbc-email-trigger {
    background: transparent !important;
    border: 0 !important;
    cursor: pointer;
    color: #414844 !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    transition: color 0.2s ease;
}
.fbc-inline .fbc-email-trigger:hover {
    color: #012d1d !important;
}
.fbc-inline .fbc-email-trigger .fbc-icon--mail {
    width: 18px; height: 18px;
    transition: transform 0.2s ease;
}
.fbc-inline .fbc-email-trigger:hover .fbc-icon--mail {
    transform: scale(1.1);
}
.fbc-inline .fbc-email-trigger .fbc-icon--caret {
    width: 14px; height: 14px;
}

/* ============== Email modal — opens from "Email Product Details" button ==============
 * Centered overlay with input, send button, and an animated checkmark
 * success state that auto-dismisses after 2 seconds. */
.fbc-email-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.fbc-email-modal[hidden] { display: none; }
.fbc-email-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 15, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    cursor: pointer;
}
.fbc-email-modal__panel {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border-radius: 18px;
    padding: 36px 28px 28px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.35);
    text-align: center;
    animation: fbc-email-modal-in 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes fbc-email-modal-in {
    from { transform: translateY(12px) scale(0.96); opacity: 0; }
    to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.fbc-email-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #6b6b6b;
    padding: 6px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.fbc-email-modal__close:hover {
    color: #191c1d;
    background: #f0f1f2;
}

.fbc-email-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 181, 189, 0.10);
    color: #00b5bd;
    margin: 0 auto 14px;
}
.fbc-email-modal__title {
    margin: 0 0 8px !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #191c1d !important;
    letter-spacing: -0.01em;
    line-height: 1.3 !important;
}
.fbc-email-modal__desc {
    margin: 0 0 22px !important;
    font-size: 14px;
    color: #5f5e5b;
    line-height: 1.5;
}

/* Form inside the modal — full-width pill input + black send button */
.fbc-email-modal .fbc-email-form {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}
.fbc-email-modal .fbc-email-form[hidden] { display: none !important; }
.fbc-email-modal .fbc-email-input {
    width: 100% !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #191c1d !important;
    background: #f6f7f8 !important;
    border: 2px solid #edeeef !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    text-align: left !important;
    transition: border-color 0.2s !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}
.fbc-email-modal .fbc-email-input:focus {
    border-color: #00b5bd !important;
    outline: none !important;
}
.fbc-email-modal .fbc-email-input::placeholder {
    color: #9aa19c !important;
    font-weight: 400 !important;
}
.fbc-email-modal .fbc-email-send {
    width: 100%;
    background: #000000;
    color: #ffffff;
    border: 0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s;
}
.fbc-email-modal .fbc-email-send:hover  { background: #1a1a1a; }
.fbc-email-modal .fbc-email-send:disabled { opacity: 0.55; cursor: not-allowed; }

.fbc-email-modal .fbc-email-status {
    margin: 4px 0 0;
    font-size: 13px;
    color: #5f5e5b;
    min-height: 18px;
}
.fbc-email-modal .fbc-email-status[data-state="error"]   { color: #ba1a1a; }
.fbc-email-modal .fbc-email-status[data-state="success"] { color: #10b981; }
.fbc-email-modal .fbc-email-status[data-state="sending"] { color: #5f5e5b; }

/* Success state — animated checkmark + "Email sent" */
.fbc-email-modal__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 18px 0 10px;
}
.fbc-email-modal__success[hidden] { display: none; }
.fbc-email-modal__check {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #10b981;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px -6px rgba(16, 185, 129, 0.55);
    animation: fbc-check-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
@keyframes fbc-check-pop {
    0%   { transform: scale(0);   opacity: 0; }
    60%  { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
}
.fbc-email-modal__success-text {
    font-size: 19px;
    font-weight: 700;
    color: #191c1d;
    letter-spacing: -0.005em;
}

body.fbc-email-modal-open { overflow: hidden; }

/* Mobile tweaks — keep the calculator usable on narrow screens */
@media only screen and (max-width: 600px) {
    .fbc-panel--inline { padding: 16px !important; gap: 14px !important; }
    .fbc-instance.fbc-inline .fbc-sqft-input {
        padding: 16px 44px 16px 18px !important;
        font-size: 26px !important;
    }
    .fbc-instance.fbc-inline .fbc-sqft-input::placeholder { font-size: 18px !important; }
    .fbc-inline .fbc-stepper--inline,
    .fbc-inline .fbc-stepper { height: 56px; }
    .fbc-inline .fbc-stepper--inline .fbc-step,
    .fbc-inline .fbc-stepper .fbc-step { width: 72px; flex: 0 0 72px; height: 56px; }
    .fbc-inline .fbc-stepper--inline .fbc-step svg,
    .fbc-inline .fbc-stepper .fbc-step svg { width: 22px; height: 22px; }
    .fbc-instance.fbc-inline .fbc-stepper-value {
        height: 56px !important;
        line-height: 56px !important;
        font-size: 26px !important;
    }
    .fbc-inline .fbc-summary { padding: 18px !important; gap: 14px; }
    .fbc-inline .fbc-summary-row { flex-direction: column; align-items: flex-start; }
    .fbc-inline .fbc-summary-pill { align-self: flex-start; }
    .fbc-inline .fbc-summary-shipping { font-size: 17px !important; }
}