/* Nearly New – Trade In & Save
   Restyled against the verified NNGC theme tokens (see the nngc-ui skill's
   references/design-tokens.md — last verified 2026-07-17): brand green
   #96c11f, Lato throughout, square corners (0 radius) on every interactive
   element, flat surfaces (no drop shadows), no uppercase/letter-spacing,
   #3a3a3a body text. CSS variables reference the theme's own custom
   properties by name with a hex fallback, so this tracks the live theme if
   its palette ever shifts.

   Two things below are NOT in the verified token file and are flagged
   inline as unverified rather than presented as confirmed brand values:
   button hover colour, and the "muted"/secondary text grey. */

:root {
    --wti-green:       var(--color-lgtgreen, #96c11f);
    /* UNVERIFIED: hover state isn't in the extracted tokens (marked TODO
       there too) — this is a manually darkened shade of the brand green,
       not a confirmed theme value. Replace once you can inspect a live
       hover state. */
    --wti-green-hover: #82a81a;
    --wti-text:        var(--color-drkgrey, #3a3a3a);
    /* UNVERIFIED: no secondary/muted text colour is defined in the token
       file — this is a reasonable mid-grey, not an extracted value. */
    --wti-muted:       #6b6b6b;
    --wti-border:      var(--color-midgrey, #e3e3e3);
    --wti-border-lgt:  var(--color-lgtgrey, #E5E5E5);
    --wti-white:       var(--color-white, #ffffff);
    --wti-error:       #b3261e;
    --wti-font:        "Lato", Tahoma, Arial, Helvetica, sans-serif;
    --wti-radius:      0; /* square corners everywhere — brand rule, not a preference */
}

.wti-trigger,
.wti-overlay {
    font-family: var(--wti-font);
}

/* Without this, any element that combines width:100% with padding/border
   (e.g. .wti-input, .wti-select, .wti-btn) renders wider than its
   container under the browser's default content-box model — which is
   exactly why the "Your details" inputs were overflowing their box. */
.wti-trigger, .wti-trigger *,
.wti-overlay, .wti-overlay * {
    box-sizing: border-box;
}

/* ── Trigger button ─────────────────────────────────────────────────── */

.wti-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 14px 0;
    padding: 12px 24px;
    background: var(--wti-white);
    border: 1px solid var(--wti-green);
    border-radius: var(--wti-radius);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.wti-trigger:hover {
    background: var(--wti-border-lgt);
}

.wti-trigger-icon {
    flex: none;
    color: var(--wti-green);
}

.wti-trigger-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wti-trigger-main {
    font-weight: 700;
    font-size: 16px;
    color: var(--wti-text);
}

.wti-trigger-sub {
    font-size: 13px;
    color: var(--wti-muted);
}

/* ── Overlay + modal ────────────────────────────────────────────────── */

.wti-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(58, 58, 58, 0.55);
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.wti-overlay.wti-open {
    display: flex;
}

.wti-modal {
    width: 100%;
    max-width: 480px;
    max-height: 88vh;
    background: var(--wti-white);
    border-radius: var(--wti-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wti-modal-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--wti-border);
    background: var(--wti-white);
    flex: none;
}

.wti-modal-hd-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wti-modal-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--wti-radius);
    background: var(--wti-white);
    border: 1px solid var(--wti-border);
    flex: none;
}

.wti-modal-title {
    font-weight: 700;
    font-size: 18px;
    color: var(--wti-text);
}

.wti-modal-sub {
    font-size: 13px;
    color: var(--wti-muted);
    margin-top: 1px;
}

.wti-close {
    border: none;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    color: var(--wti-muted);
    cursor: pointer;
    padding: 6px;
}

.wti-close:hover { color: var(--wti-text); }

.wti-modal-body {
    padding: 20px 18px;
    overflow-y: auto;
    font-size: 15px;
    color: var(--wti-text);
}

/* ── Mobile: bottom sheet instead of centred modal ─────────────────── */

@media (max-width: 640px) {
    .wti-overlay {
        padding: 0;
        align-items: flex-end;
    }
    .wti-modal {
        max-width: 100%;
        max-height: 92vh;
    }
}

/* ── Step progress indicator ────────────────────────────────────────── */

.wti-progress {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
}

.wti-progress-dot {
    flex: 1;
    height: 3px;
    background: var(--wti-border);
}

.wti-progress-dot.wti-done,
.wti-progress-dot.wti-active {
    background: var(--wti-green);
}

.wti-step-heading {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: var(--wti-text);
}

.wti-step-sub {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--wti-muted);
}

.wti-back {
    background: none;
    border: none;
    color: var(--wti-text);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 0 0 12px;
}

/* ── Form fields ─────────────────────────────────────────────────────── */

.wti-field { margin-bottom: 14px; }

.wti-field label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--wti-text);
    margin-bottom: 5px;
}

.wti-select,
.wti-input {
    width: 100%;
    padding: 6px 15px;
    border: 0.8px solid #d8d8d8;
    border-radius: var(--wti-radius);
    font-size: 16px;
    font-family: var(--wti-font);
    background: var(--wti-white);
    color: var(--wti-text);
    min-height: 40px;
}

.wti-select:disabled { background: var(--wti-border-lgt); color: #9a9a9a; }

/* UNVERIFIED: focus border/outline colour isn't in the extracted tokens —
   using the brand green as the most defensible default. */
.wti-select:focus,
.wti-input:focus {
    outline: none;
    border-color: var(--wti-green);
}

.wti-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wti-pill {
    padding: 8px 16px;
    border: 0.8px solid #d8d8d8;
    border-radius: var(--wti-radius);
    font-size: 14px;
    font-family: var(--wti-font);
    color: var(--wti-text);
    background: var(--wti-white);
    cursor: pointer;
    transition: all 0.12s ease;
}

.wti-pill.wti-selected {
    background: var(--wti-green);
    border-color: var(--wti-green);
    color: var(--wti-white);
}

/* ── Reduction note (left-handed / ladies flex) ─────────────────────── */
/* Uses the brand green + grey system rather than a warning colour — the
   token file specifies one brand accent only, so this stays on-palette
   instead of introducing amber. */

.wti-reduction-note {
    margin-top: 4px;
    margin-bottom: 14px;
    padding: 9px 12px;
    background: var(--wti-border-lgt);
    border-left: 3px solid var(--wti-green);
    font-size: 13px;
    color: var(--wti-text);
}

/* ── Condition cards ─────────────────────────────────────────────────── */

.wti-conditions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wti-condition-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 68px;
    padding: 16px 16px;
    border: 0.8px solid #d8d8d8;
    border-radius: var(--wti-radius);
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.wti-condition-card:hover { border-color: var(--wti-green); }

.wti-condition-card.wti-selected {
    border-color: var(--wti-green);
    background: var(--wti-border-lgt);
}

.wti-condition-label {
    font-weight: 700;
    font-size: 18px;
    color: var(--wti-text);
    line-height: 1.3;
}

.wti-condition-desc {
    font-size: 13px;
    color: var(--wti-text);
    opacity: 0.55;
    line-height: 1.5;
    margin-top: 6px;
}

/* ── Multi-club basket bar ───────────────────────────────────────────── */

.wti-basket {
    background: var(--wti-text);
    color: var(--wti-white);
    border-radius: var(--wti-radius);
    padding: 12px 14px;
    margin-bottom: 16px;
}

.wti-basket-hd {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    color: var(--wti-white);
    margin-bottom: 8px;
}

.wti-basket-total { color: var(--wti-green); font-weight: 700; }

.wti-basket-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    padding: 5px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.wti-basket-item:first-child { border-top: none; }

.wti-basket-item-remove {
    background: none;
    border: none;
    color: var(--wti-white);
    cursor: pointer;
    font-size: 13px;
    margin-left: 8px;
    opacity: 0.75;
}

.wti-basket-item-remove:hover { opacity: 1; }

/* ── Quote / price breakdown ─────────────────────────────────────────── */

.wti-quote-card {
    text-align: center;
    padding: 20px 16px;
    background: var(--wti-white);
    border: 1px solid var(--wti-border);
    border-radius: var(--wti-radius);
    margin-bottom: 16px;
}

.wti-quote-club { font-size: 14px; color: var(--wti-muted); margin-bottom: 6px; }

.wti-quote-value {
    font-size: 32px;
    font-weight: 900;
    color: var(--wti-text);
}

.wti-quote-note {
    font-size: 13px;
    color: var(--wti-muted);
    margin-top: 6px;
}

.wti-breakdown {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.wti-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--wti-text);
    padding: 6px 0;
    border-bottom: 1px solid var(--wti-border);
}

.wti-breakdown-row-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wti-breakdown-remove {
    background: none;
    border: none;
    color: var(--wti-error);
    cursor: pointer;
    font-size: 13px;
    padding: 2px 4px;
    line-height: 1;
}

.wti-breakdown-remove:hover { opacity: 0.75; }

.wti-price-summary {
    background: var(--wti-white);
    border: 1px solid var(--wti-border);
    border-radius: var(--wti-radius);
    padding: 12px 14px;
    margin-bottom: 14px;
}

.wti-price-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--wti-text);
    padding: 5px 0;
}

.wti-price-row-credit span:last-child { color: var(--wti-green); font-weight: 700; }

.wti-price-row-effective {
    color: var(--wti-muted);
    border-top: 1px dashed var(--wti-border);
    margin-top: 4px;
    padding-top: 8px;
}

.wti-price-row-paynow {
    font-weight: 700;
    font-size: 16px;
    color: var(--wti-text);
    border-top: 1px solid var(--wti-border);
    margin-top: 4px;
    padding-top: 8px;
}

.wti-how-it-works {
    font-size: 13px;
    color: var(--wti-muted);
    line-height: 1.65;
    margin-bottom: 14px;
}

.wti-terms {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--wti-text);
    margin-bottom: 16px;
    cursor: pointer;
}

.wti-terms a { color: var(--wti-text); text-decoration: underline; }
.wti-terms a:hover { color: var(--wti-green); }

/* ── Buttons ─────────────────────────────────────────────────────────── */

.wti-btn {
    display: block;
    width: 100%;
    padding: 12px 24px;
    border-radius: var(--wti-radius);
    font-family: var(--wti-font);
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    text-transform: none;
    cursor: pointer;
    border: none;
    text-decoration: none;
    margin-bottom: 10px;
    box-shadow: none;
    transition: background 0.12s ease;
}

.wti-btn:last-child { margin-bottom: 0; }

.wti-btn-primary {
    background: var(--wti-green);
    color: var(--wti-white);
}

.wti-btn-primary:hover { background: var(--wti-green-hover); }

.wti-btn-primary:disabled {
    background: var(--wti-border);
    color: var(--wti-muted);
    cursor: not-allowed;
}

/* Secondary button isn't in the extracted tokens (the token file notes the
   theme has no distinct outline/ghost variant) — this is a new pattern:
   a flat grey-filled button (per your instruction: proceed = green,
   add-club = grey) that still respects square corners and the Lato/weight
   system, used where two actions need visual hierarchy. */
.wti-btn-secondary {
    background: var(--wti-border-lgt);
    border: none;
    color: var(--wti-text);
}

/* UNVERIFIED hover shade — plain darkened grey, not an extracted value. */
.wti-btn-secondary:hover { background: #d6d6d6; }

/* ── Success screen ──────────────────────────────────────────────────── */

.wti-success-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--wti-radius);
    background: var(--wti-green);
    color: var(--wti-white);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.wti-step[data-step] { display: none; }
.wti-step.wti-active { display: block; }

.wti-error {
    color: var(--wti-error);
    font-size: 13px;
    margin-top: -6px;
    margin-bottom: 12px;
}

.wti-loading {
    text-align: center;
    padding: 30px 0;
    color: var(--wti-muted);
    font-size: 14px;
}