/* ==========================================================================
   ELITE TRIP CONCIERGE, the request wizard skin.

   Loaded ONLY on Concierge surfaces (the Concierge request form, and the
   received page of a Concierge request), on top of quick_request.css.
   Every rule is scoped to .qr-premier, .qr-stage--premier or the dark local
   bar those pages carry, so the ordinary request forms keep their light
   wizard and nothing here can leak into them.

   Why a skin and not a second form: the questions, the state object, the
   validation and the submit path are the same wizard. Only the surface
   changes, so it reads as the black Concierge chapter on the homepage
   (static/css/premier.css): black ground, a warm gold glow, white type,
   gold as the mark of the tier, the crest. Colours are the tokens in
   elite.css; the few translucent whites are the chapter's own glass.

   Motion has one job: to say where you are and where you just came from.
   The Flight Path carries the steps, fields arrive with Sunrise, the
   received page closes with the Seal. Nothing loops or lifts, and
   prefers-reduced-motion shows the finished frame.
   ========================================================================== */

/* --- the black chapter ------------------------------------------------------ */
.qr-stage--premier {
    background:
        radial-gradient(60% 34% at 100% 0%, rgba(37, 99, 235, 0.16), rgba(37, 99, 235, 0) 70%),
        radial-gradient(50% 30% at 0% 100%, rgba(165, 122, 53, 0.18), rgba(165, 122, 53, 0) 70%),
        #000;
    color: var(--c-on-dark);
}
.qr-premier {
    --qrp-glass: rgba(255, 255, 255, 0.06);
    --qrp-glass-hi: rgba(255, 255, 255, 0.11);
    --qrp-line: rgba(255, 255, 255, 0.14);
    /* A control's own edge has to clear 3:1 against black (WCAG 1.4.11). */
    --qrp-line-ctl: rgba(255, 255, 255, 0.42);
    --qrp-gold-line: rgba(37, 99, 235, 0.55);
    --qrp-danger: #ffaaa1;
    max-width: calc(920px + var(--pad) * 2);
    color: var(--c-on-dark);
}
.qr-premier .qr-layout { display: block; }

/* --- the local bar, on black ------------------------------------------------- */
/* Nearly opaque: before the page scrolls the bar sits over the white main
   ground, and the shell's translucent dark would read as grey there. */
.qr-localnav.ap-localnav--dark { background: rgba(0, 0, 0, 0.9); }
.qr-localnav.ap-localnav--dark .qr-progress-bar { background: rgba(255, 255, 255, 0.18); }
.qr-localnav.ap-localnav--dark .qr-progress-fill { background: var(--c-gold); }
.qr-localnav.ap-localnav--dark .qr-progress-text { color: var(--c-on-dark-2); }
.qr-premier .qr-flight .et-flight__track { stroke: var(--c-gold-light); stroke-opacity: 0.3; }

/* ==========================================================================
   THE MASTHEAD
   One header carrying the tier, the promise and the three trust truths.
   ========================================================================== */
.qr-premier .qrp-mast { margin: 0 auto clamp(32px, 5vw, 56px); text-align: center; }
.qr-premier .qrp-mark { display: grid; margin: 0 auto 20px; }
.qr-premier .qrp-kicker {
    margin: 0 0 10px;
    font-size: var(--t-lead); font-weight: 600; letter-spacing: 0.011em; color: var(--c-gold-light);
}
.qr-premier .qrp-title {
    margin: 0 auto 16px; max-width: 16ch;
    font-size: var(--t-hero); font-weight: 600; line-height: 1.05; letter-spacing: -0.015em; color: #fff;
}
.qr-premier .qrp-lede {
    max-width: 44ch; margin: 0 auto;
    font-size: var(--t-lead); line-height: 1.42; color: var(--c-on-dark-2);
}
.qr-premier .qrp-trust {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    margin: 28px 0 0; padding: 0; list-style: none;
}
.qr-premier .qrp-trust li {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 15px; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.08); color: var(--c-on-dark);
    font-size: var(--t-small);
}
.qr-premier .qrp-trust i, .qr-premier .qrp-trust .et-i { color: var(--c-gold); font-size: 0.8rem; }

/* From step two the masthead condenses to the crest beside the tier: the
   headline, the lede and the trust list have been read, and on a phone they
   would push the first question off the screen. Condensed, never removed. */
.qr-premier .qrp-mast.is-compact {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin-bottom: clamp(20px, 3vw, 32px);
}
.qr-premier .qrp-mast.is-compact .qrp-mark { width: 36px; height: 36px; margin: 0; font-size: 0.85rem; }
.qr-premier .qrp-mast.is-compact .qrp-kicker { margin: 0; font-size: var(--t-body); }
.qr-premier .qrp-mast.is-compact .qrp-title,
.qr-premier .qrp-mast.is-compact .qrp-lede,
.qr-premier .qrp-mast.is-compact .qrp-trust { display: none; }

/* ==========================================================================
   THE NAMED RAIL: what the steps are, and which one you are on.
   ========================================================================== */
.qr-premier .qrp-rail {
    display: flex; gap: 8px;
    margin: 0 0 clamp(28px, 4vw, 44px); padding: 0 0 20px;
    list-style: none; counter-reset: qrp-step;
    border-bottom: 1px solid var(--qrp-line);
}
.qr-premier .qrp-rail-item {
    flex: 1 1 0; display: flex; align-items: center; gap: 10px; min-width: 0;
    counter-increment: qrp-step;
    font-size: var(--t-small); color: var(--c-on-dark-2);
    transition: color 300ms var(--ease);
}
/* The disc carries the step number until the step is done, then the tick,
   in the same box, so the rail never reflows. */
.qr-premier .qrp-rail-dot {
    position: relative; flex: 0 0 auto;
    display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    border: 1.5px solid var(--qrp-line-ctl);
    font-size: var(--t-micro); font-weight: 600; color: var(--c-on-dark-2);
    transition: background-color 300ms var(--ease), border-color 300ms var(--ease), color 300ms var(--ease);
}
.qr-premier .qrp-rail-dot::before { content: counter(qrp-step); transition: opacity 200ms var(--ease); }
.qr-premier .qrp-rail-dot i, .qr-premier .qrp-rail-dot .et-i { position: absolute; font-size: 0.75rem; opacity: 0; transition: opacity 200ms var(--ease); }
.qr-premier .qrp-rail-item.is-now { color: #fff; font-weight: 600; }
.qr-premier .qrp-rail-item.is-now .qrp-rail-dot { border-color: var(--c-gold); background: var(--c-gold); color: #fff; }
.qr-premier .qrp-rail-item.is-done { color: var(--c-on-dark); }
.qr-premier .qrp-rail-item.is-done .qrp-rail-dot { border-color: var(--qrp-gold-line); color: var(--c-gold-light); }
.qr-premier .qrp-rail-item.is-done .qrp-rail-dot::before { opacity: 0; }
.qr-premier .qrp-rail-item.is-done .qrp-rail-dot i, .qr-premier .qrp-rail-item.is-done .qrp-rail-dot .et-i { opacity: 1; }
.qr-premier .qrp-rail-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   STEPS AND FIELDS
   ========================================================================== */
.qr-premier .qr-step-title { color: #fff; }
.qr-premier .qr-step-title:focus-visible { outline-color: var(--c-gold-light); }
.qr-premier .qr-label { color: #fff; }
.qr-premier .qr-label i, .qr-premier .qr-label .et-i { color: var(--c-gold); }
.qr-premier .qr-label .qr-req { color: var(--c-gold-light); }
.qr-premier .qr-help { color: var(--c-on-dark-2); }
.qr-premier .qr-error { color: var(--qrp-danger); }

/* Fields arrive with Sunrise-soft a beat after the step, top to bottom, in
   reading order, 40ms apart. */
.qr-premier .qr-step.qr-in-fwd .qr-field,
.qr-premier .qr-step.qr-in-back .qr-field { animation: et-sunrise-soft 560ms var(--et-ease-rise, ease) both; }
.qr-premier .qr-step .qr-field:nth-child(2) { animation-delay: 40ms; }
.qr-premier .qr-step .qr-field:nth-child(3) { animation-delay: 80ms; }
.qr-premier .qr-step .qr-field:nth-child(n+4) { animation-delay: 120ms; }

/* ==========================================================================
   CONTROLS on black. Same shapes and 44px targets as the light wizard.
   Selected is never colour alone: chips keep their tick, cards and
   packages their check mark.
   ========================================================================== */
.qr-premier .qr-chip,
.qr-premier .qr-toggle {
    border-color: var(--qrp-line-ctl); background: var(--qrp-glass); color: #fff;
}
.qr-premier .qr-chip:hover,
.qr-premier .qr-toggle:hover { border-color: var(--c-gold-light); background: var(--qrp-glass-hi); }
.qr-premier .qr-chip i, .qr-premier .qr-toggle i, .qr-premier .qr-chip .et-i, .qr-premier .qr-toggle .et-i { color: var(--c-gold); }
.qr-premier .qr-chip[aria-pressed="true"],
.qr-premier .qr-toggle[aria-pressed="true"] { border-color: var(--c-gold); background: var(--c-gold); color: #fff; }
.qr-premier .qr-chip[aria-pressed="true"]::before { background: var(--c-ink); }
.qr-premier .qr-chip[aria-pressed="true"] i,
.qr-premier .qr-toggle[aria-pressed="true"] i,
.qr-premier .qr-chip[aria-pressed="true"] .et-i,
.qr-premier .qr-toggle[aria-pressed="true"] .et-i { color: var(--c-ink); }

.qr-premier .qr-card {
    border-color: var(--qrp-line-ctl); background: var(--qrp-glass); color: #fff;
}
.qr-premier .qr-card > i:first-child, .qr-premier .qr-card > .et-i:first-child { color: var(--c-gold); }
.qr-premier .qr-card:hover { border-color: var(--c-gold-light); background: var(--qrp-glass-hi); }
.qr-premier .qr-card[aria-pressed="true"] {
    border-color: var(--c-gold); background: var(--qrp-glass-hi);
    box-shadow: inset 0 0 0 1px var(--c-gold);
}
.qr-premier .qr-card-tick { color: var(--c-gold); }

.qr-premier .qr-segmented { background: rgba(255, 255, 255, 0.1); }
.qr-premier .qr-segmented button { color: #fff; }
.qr-premier .qr-segmented button[aria-pressed="true"] { background: var(--c-gold); color: #fff; box-shadow: none; }

.qr-premier .qr-stepper { border-color: var(--qrp-line-ctl); }
.qr-premier .qr-stepper button { background: rgba(255, 255, 255, 0.1); color: #fff; }
.qr-premier .qr-stepper button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.18); }
.qr-premier .qr-stepper output { color: #fff; }

.qr-premier .qr-input,
.qr-premier .qr-textarea { border-color: var(--qrp-line-ctl); background: var(--qrp-glass); color: #fff; }
.qr-premier .qr-input::placeholder,
.qr-premier .qr-textarea::placeholder { color: var(--c-on-dark-2); }
.qr-premier .qr-input:hover,
.qr-premier .qr-textarea:hover { border-color: var(--c-gold-light); }
.qr-premier .qr-input:focus,
.qr-premier .qr-textarea:focus { border-color: var(--c-gold); }
/* The native pickers draw their glyphs in the system colour; on black the
   dark ones vanish, so they are inverted back to legible. */
.qr-premier .qr-native-date::-webkit-calendar-picker-indicator,
.qr-premier .qr-native-time::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }
.qr-premier .qr-input { color-scheme: dark; }

.qr-premier .qr-details { border-top-color: var(--qrp-line); }
.qr-premier .qr-details > summary { color: var(--c-gold-light); }

/* ==========================================================================
   SERVICE LEVELS, the one "how much" question: three columns compared at
   a glance, the price on a shared line. A hovered card takes a gold edge;
   nothing lifts.
   ========================================================================== */
.qr-premier .qr-pkg {
    border-color: var(--qrp-line-ctl); background: var(--qrp-glass); color: #fff;
}
.qr-premier .qr-pkg:hover { border-color: var(--c-gold-light); background: var(--qrp-glass-hi); }
.qr-premier .qr-pkg-hot { border-color: var(--qrp-gold-line); }
.qr-premier .qr-pkg[aria-pressed="true"] {
    border-color: var(--c-gold); background: var(--qrp-glass-hi);
    box-shadow: inset 0 0 0 1px var(--c-gold), 0 18px 40px rgba(0, 0, 0, 0.35);
}
.qr-premier .qr-pkg-head b { color: #fff; }
.qr-premier .qr-pkg-badge { background: var(--c-gold); color: #fff; }
.qr-premier .qr-pkg-line { color: var(--c-on-dark-2); }
.qr-premier .qr-pkg-price { border-bottom-color: var(--qrp-line); color: var(--c-gold-light); }
.qr-premier .qr-pkg-incl { color: var(--c-on-dark-2); }
.qr-premier .qr-pkg-incl i, .qr-premier .qr-pkg-incl .et-i,
.qr-premier .qr-pkg .qr-card-tick,
.qr-premier .qr-pkg-note i, .qr-premier .qr-pkg-note .et-i { color: var(--c-gold); }
.qr-premier .qr-pkg-note { color: var(--c-on-dark-2); }

/* ==========================================================================
   NOTICES, THE RECAP, ERRORS
   ========================================================================== */
.qr-premier .qr-notice { background: rgba(255, 255, 255, 0.08); color: var(--c-on-dark); }
.qr-premier .qr-notice i, .qr-premier .qr-notice .et-i { color: var(--c-gold); }
.qr-premier .qr-notice b { color: #fff; }

.qr-premier .qr-form-error {
    background: rgba(196, 40, 28, 0.22); color: #ffd9d4;
    box-shadow: inset 0 0 0 1px rgba(255, 170, 161, 0.45);
}

/* What is about to be sent, in the customer's own words, with the gold edge. */
.qr-premier .qr-recap {
    background: rgba(37, 99, 235, 0.08);
    box-shadow: inset 0 0 0 1px var(--qrp-gold-line);
}
.qr-premier .qr-recap-title { color: #fff; }
.qr-premier .qr-recap-row { background: rgba(255, 255, 255, 0.1); color: #fff; }
.qr-premier .qr-recap-note { color: var(--c-on-dark-2); }
.qr-premier .qr-recap-strong { color: #fff; }

/* ==========================================================================
   ACTIONS: gold is forward; Back stays quiet.
   ========================================================================== */
.qr-premier .qr-actions { border-top-color: var(--qrp-line); }
.qr-premier .qr-back { border-color: var(--qrp-line-ctl); background: transparent; color: #fff; }
.qr-premier .qr-back:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); color: #fff; }

/* One visible focus ring on black: pale gold. */
.qr-premier button:focus-visible,
.qr-premier input:focus-visible,
.qr-premier textarea:focus-visible,
.qr-premier summary:focus-visible,
.qr-premier a:focus-visible { outline: 3px solid var(--c-gold-light); outline-offset: 3px; box-shadow: none; }

/* ==========================================================================
   THE RECEIVED PAGE: the journey closes in the world it was spent in.
   .qr-premier and .qr-done sit on the SAME element, so those rules are
   compound selectors.
   ========================================================================== */
.qr-premier.qr-done { max-width: calc(680px + var(--pad) * 2); }
.qr-premier.qr-done h1 { color: #fff; }
.qr-premier .qr-done-sub { color: var(--c-on-dark-2); }
/* The Seal closes the journey in gold; the crest names the tier in the
   line above the headline. */
.qr-premier .qr-done-icon .et-seal { color: var(--c-gold); }
.qr-premier .qr-done-icon .et-seal__sun { fill: var(--c-gold-light); }
.qr-premier .qr-done-tier {
    display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px;
    font-size: var(--t-body); font-weight: 600; color: var(--c-gold-light);
}
.qr-premier .qr-done-tier .et-premier-mark { width: 32px; height: 32px; font-size: 0.8rem; }
.qr-premier .qr-done-ref { background: rgba(37, 99, 235, 0.14); color: var(--c-gold-light); }
.qr-premier .qr-done-list { background: var(--qrp-glass); }
.qr-premier .qr-done-list li + li { border-top-color: var(--qrp-line); }
.qr-premier .qr-done-list i, .qr-premier .qr-done-list .et-i { color: var(--c-gold); }
.qr-premier .qr-done-list span { color: #fff; }
.qr-premier .qr-done-list b { color: var(--c-on-dark-2); }
.qr-premier .qr-done-premier { background: rgba(37, 99, 235, 0.08); box-shadow: inset 0 0 0 1px var(--qrp-gold-line); }
.qr-premier .qr-done-premier h2 { color: #fff; }
.qr-premier .qr-done-premier ol { color: var(--c-on-dark); }
.qr-premier .qr-done-trust, .qr-premier .qr-done-mail { color: var(--c-on-dark-2); }
.qr-premier .qr-done-trust b { color: #fff; }
.qr-premier .qr-done-trust i, .qr-premier .qr-done-mail i,
.qr-premier .qr-done-trust .et-i, .qr-premier .qr-done-mail .et-i { color: var(--c-gold); }
.qr-premier .qr-done-actions .pg-btn-ghost,
.qr-premier .qr-done-actions .pg-btn-ghost:hover { color: var(--c-gold-light); }

/* ==========================================================================
   PHONE
   ========================================================================== */
@media (max-width: 720px) {
    .qr-premier .qr-actions {
        background: rgba(17, 12, 9, 0.88);
        border-top-color: rgba(255, 255, 255, 0.14);
    }
}
@media (max-width: 734px) {
    .qr-premier .qrp-mark { width: 56px; height: 56px; font-size: 1.3rem; margin-bottom: 14px; }
    .qr-premier .qrp-title { font-size: 2.4rem; }
    .qr-premier .qrp-lede { font-size: var(--t-body); }
    .qr-premier .qrp-trust { gap: 8px; margin-top: 20px; }
    .qr-premier .qrp-trust li { font-size: var(--t-micro); padding: 6px 12px; }
    /* Only the current step keeps its name; the others stay numbered discs. */
    .qr-premier .qrp-rail-item { flex: 0 0 auto; }
    .qr-premier .qrp-rail-item.is-now { flex: 1 1 auto; }
    .qr-premier .qrp-rail-item .qrp-rail-label { display: none; }
    .qr-premier .qrp-rail-item.is-now .qrp-rail-label { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    .qr-premier .qr-step.qr-in-fwd .qr-field,
    .qr-premier .qr-step.qr-in-back .qr-field { animation: none; }
    .qr-premier .qr-pkg, .qr-premier .qr-pkg:hover { transition: none; }
}