/* ==========================================================================
   .bd-escalate-* — page layer for /brands/escalate
   Updated 2026-10-05: brand-search combobox (Step 1), .hidden utility (the page
   script toggles it), QR box class (was inline style). Everything else below
   is unchanged from the prior round. Colour, type, spacing and radius all
   come from the shared tokens (var(--...)); every class is prefixed
   .bd-escalate- so nothing collides with the WordPress chrome or any other
   /brands page, per brands.css's own house rule.

   Everything bundle.css already provides is used directly in the markup and
   NOT duplicated here: sc-h1, sc-card, sc-field, sc-label, sc-input, sc-select,
   sc-help, sc-small, sc-counter, sc-btn/sc-btn--block/sc-btn--secondary,
   sc-notice, sc-eyebrow, sc-heading, sc-features, sc-link, sc-text, sc-badge,
   sc-dot, bd-divider, bd-field-error.

   Load order: tokens.css -> bundle.css -> brands.css -> bd-escalate.css.

   Sections: 0 Utility · 1 Row/columns · 2 Hero · 3 Form card & fields ·
             3b Brand-search combobox (new) · 4 Buttons (local) · 5 Stepper ·
             6 Feedback & status · 7 WhatsApp QR · 8 Legal notice · 9 Responsive
   ========================================================================== */


/* 0. Utility ------------------------------------------------------------------
   The page's JS (setHidden()) toggles this class on/off throughout; the old
   escalate.css supplied it, bundle.css/brands.css do not, so it lives here. */

.hidden {
    display: none !important;
}


/* 1. Row / columns -----------------------------------------------------------
   .sc-container already caps width at var(--container) and centres itself.
   The split below follows the same 1.1fr/0.9fr proportion as the site's
   other two-column hero layouts (.sc-hero__grid--split). This sits inside
   brands.css's default .bd-page shell, so the page scrolls with the rest of
   the document like every other /brands view — there is no viewport lock. */

.bd-escalate-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--gutter, 20px);
}

    .bd-escalate-row > .bd-escalate-hero {
        flex: 1.1 1 420px;
    }

    .bd-escalate-row > .bd-escalate-formcol {
        flex: 0.9 1 360px;
    }


/* 2. Hero column -------------------------------------------------------------
   Top-aligned, fixed gaps; fills any remaining room with a real content card
   instead of leaving blank space next to the taller form column. */

.bd-escalate-hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(20px, 3vh, 32px);
    padding: clamp(20px, 3vw, 40px) clamp(20px, 3vw, 40px) clamp(20px, 3vw, 40px) 0;
}

.bd-escalate-intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: 520px;
}

.bd-escalate-trust {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 520px;
}

.bd-escalate-trust-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
    font: 400 13.5px/1.45 var(--font-sans);
    color: var(--text-info);
}

    .bd-escalate-trust-list li {
        padding-left: var(--space-4);
        position: relative;
    }

        .bd-escalate-trust-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 7px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--orange);
        }


/* 3. Form card & fields (page-specific only) -------------------------------- */

.bd-escalate-formcol {
    display: flex;
    justify-content: center;
}

.bd-escalate-formwrap {
    width: 100%;
    max-width: var(--form-width, 480px);
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.2vh, 20px);
}

.bd-escalate-stephead {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
}

/* #heading is focused programmatically on each step change (tabindex="-1")
   for a11y announcement; it is not a real interactive target, so it opts out
   of the default focus ring the same way a skip-link target would. */
.bd-escalate-stepheading:focus {
    outline: none;
}

/* .sc-card's own padding/gap (space-5/space-4 = 20px/16px) is tuned for a
   content card, not a tall multi-field form. This fluid override is the one
   deliberate deviation from the shared card component, kept as its own
   class so it's obvious. */
.bd-escalate-card-box {
    gap: clamp(5px, 0.85vh, 14px);
    padding: clamp(9px, 1.5vh, 20px);
}

.bd-escalate-step-panel {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1vh, 10px);
}

.bd-escalate-center-row {
    display: flex;
    justify-content: center;
}

/* Fluid height variant of sc-input/sc-select, for the same no-scroll reason
   as .bd-escalate-card-box above. */
.bd-escalate-formwrap .sc-input,
.bd-escalate-formwrap .sc-select {
    height: clamp(40px, 5vh, 48px);
}

.bd-escalate-formwrap textarea.sc-input.bd-escalate-textarea {
    height: auto;
    min-height: clamp(56px, 9vh, 120px);
    padding-block: 10px;
    line-height: 1.4;
    resize: vertical;
    font-family: var(--font-sans); /* prose, not a code-like value -- sc-input defaults to mono */
}

.sc-select:disabled {
    background: var(--surface-sunken);
    color: var(--text-muted);
    cursor: not-allowed;
}

.sc-input.is-locked {
    background: var(--surface-sunken);
}

.bd-escalate-grid-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 1.2vw, 12px);
}

.bd-escalate-stack {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1vh, 16px);
}

.bd-escalate-summary-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
}

    .bd-escalate-summary-list > div {
        display: flex;
        justify-content: space-between;
        gap: var(--space-4);
    }

    .bd-escalate-summary-list dt {
        font: 400 13px/18px var(--font-sans);
        color: var(--text-muted);
    }

    .bd-escalate-summary-list dd {
        font-family: var(--font-mono);
        font-size: 13px;
        font-weight: 500;
        text-align: right;
        overflow-wrap: anywhere;
        color: var(--ink);
    }

.bd-escalate-file-row {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
}

.bd-escalate-file-picker {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    height: clamp(40px, 5vh, 48px);
    padding: 0 14px;
    background: var(--surface-card);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    font: 400 14px/20px var(--font-sans);
    cursor: pointer;
}

    .bd-escalate-file-picker:focus-within {
        outline: 2px solid var(--focus-ring, var(--ink));
        outline-offset: 2px;
    }

.bd-escalate-file-picker-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.bd-escalate-file-picker-action {
    flex-shrink: 0;
    font-weight: 500;
    color: var(--green-link);
}

.bd-escalate-file-picker-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-muted);
}


/* 3b. Brand-search combobox (new) --------------------------------------------
   #brand is a plain sc-input; this wraps it so the suggestion list can be
   absolutely positioned directly under it without disturbing the field grid
   around it. Only a click (really: mousedown, see the JS) on an option calls
   selectBrand() and sets brandSlug — typing alone never does, matching the
   "must pick a listed brand" rule the help/confirmation text below explains. */

.bd-escalate-combobox-anchor {
    position: relative; /* the list drops directly under the input, not under the help text */
}

.bd-escalate-combobox-list {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--surface-card);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-button, 0 4px 16px rgba(0,0,0,.12));
}

.bd-escalate-combobox-option {
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    font: 400 14px/20px var(--font-sans);
    color: var(--ink);
    cursor: pointer;
}

    .bd-escalate-combobox-option:hover,
    .bd-escalate-combobox-option.is-active {
        background: var(--orange-tint);
        color: var(--orange-text);
    }

.bd-escalate-combobox-empty {
    padding: 9px 10px;
    font: 400 13px/18px var(--font-sans);
    color: var(--text-muted);
}

    .bd-escalate-combobox-empty .sc-link {
        font-weight: 600;
    }

.bd-escalate-brand-confirmed {
    font: 500 13px/18px var(--font-sans);
    color: var(--green-ink);
    margin: 0;
}


/* 4. Buttons (local) ---------------------------------------------------------
   Link-styled buttons ("Edit complaint details", "Remove", "Start another
   escalation") need a button reset; sc-link supplies the colour. */

.bd-escalate-linkbtn {
    min-height: 44px;
    padding: 0 var(--space-2);
    background: none;
    border: 0;
    font: 600 13px/1 var(--font-sans);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}


/* 5. Stepper ------------------------------------------------------------------ */

.bd-escalate-steps {
    display: flex;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.bd-escalate-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font: 500 14px/20px var(--font-sans);
    color: var(--text-muted);
}

    .bd-escalate-step::before {
        content: "";
        height: 2px;
        background: var(--border);
        transition: background 0.2s ease;
    }

    .bd-escalate-step.is-reached::before {
        background: var(--orange);
    }

    .bd-escalate-step.is-current {
        color: var(--orange-text);
    }


/* 6. Feedback & status -------------------------------------------------------- */

.bd-escalate-status-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.bd-escalate-status-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--amber);
}

.bd-escalate-status-text {
    font: 400 13px/18px var(--font-sans);
    color: var(--text-info);
}

.bd-escalate-status-row.is-done .bd-escalate-status-dot {
    background: var(--green-ink);
}

.bd-escalate-status-row.is-muted .bd-escalate-status-dot {
    background: var(--text-muted);
}


/* 7. WhatsApp QR --------------------------------------------------------------- */

.bd-escalate-qr-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
}

.bd-escalate-qr-frame {
    padding: 6px;
    background: #fff;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
}

.bd-escalate-qr-box {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.bd-escalate-qr-frame svg {
    display: block;
    width: clamp(140px, 18vh, 190px);
    height: auto;
}

.bd-escalate-qr-path {
    fill: var(--ink-deep);
}

.bd-escalate-qr-text {
    max-width: 360px;
    font: 400 13px/18px var(--font-sans);
    text-align: center;
    color: var(--text-info);
    margin: 0;
}

.bd-escalate-wa-alt {
    text-align: center;
}

    .bd-escalate-wa-alt summary {
        font: 600 12px/16px var(--font-sans);
        color: var(--green-link);
        cursor: pointer;
        list-style: none;
    }

        .bd-escalate-wa-alt summary::-webkit-details-marker {
            display: none;
        }

        .bd-escalate-wa-alt summary:hover {
            color: var(--ink-deep);
        }

    .bd-escalate-wa-alt[open] summary {
        margin-bottom: 10px;
    }


/* 8. Legal notice --------------------------------------------------------------- */

.bd-escalate-legal {
    font: 400 11px/1.5 var(--font-sans);
    text-align: center;
    color: var(--text-muted);
    margin: 0;
}

    .bd-escalate-legal a {
        color: var(--text-muted);
        text-decoration: underline;
    }

        .bd-escalate-legal a:hover {
            color: var(--green-link);
        }

.bd-escalate-hint-center {
    text-align: center;
}


/* 9. Responsive ------------------------------------------------------------------ */

@media (max-width: 899px) {
    .bd-escalate-hero {
        display: none;
    }
}

@media (max-width: 480px) {
    .bd-escalate-grid-two-col {
        grid-template-columns: 1fr;
    }
}