/* ============================================================
   Nearly New Golf Clubs — Trade In & Save v4.0
   Multi-club support, centred modal
   ============================================================ */

/* ── Trigger button ─────────────────────────────────────────── */
.wti-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: #fff;
    border: 1.5px solid #2c6e49;
    border-radius: 5px;
    color: #2c6e49;
    font-family: inherit;
    cursor: pointer;
    transition: background .14s;
    margin: 12px 0 16px;
    text-align: left;
}
.wti-trigger:hover { background: #f0faf4; }
.wti-trigger-icon  { flex-shrink: 0; }
.wti-trigger-text  { display: flex; flex-direction: column; }
.wti-trigger-main  { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.wti-trigger-sub   { font-size: 11.5px; font-weight: 400; color: #607868; margin-top: 2px; }

/* ── Overlay ────────────────────────────────────────────────── */
.wti-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 999999;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.wti-overlay.wti-open { display: flex; }

/* ── Modal ──────────────────────────────────────────────────── */
.wti-modal {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    max-width: 540px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    animation: wtiModalIn .22s cubic-bezier(.32,.72,0,1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
@keyframes wtiModalIn {
    from { opacity:0; transform:scale(.96) translateY(10px); }
    to   { opacity:1; transform:scale(1)   translateY(0); }
}
.wti-modal-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}
.wti-modal-hd-left { display: flex; align-items: center; gap: 10px; }
.wti-modal-ic {
    width: 34px;
    height: 34px;
    background: #d8f0e4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wti-modal-title { font-size: 15px; font-weight: 600; color: #1a1a1a; line-height: 1.2; }
.wti-modal-sub   { font-size: 12px; color: #888; margin-top: 2px; }
.wti-close {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #888;
    flex-shrink: 0;
    font-family: inherit;
    line-height: 1;
}
.wti-close:hover { background: #f5f5f5; color: #333; }
.wti-modal-body  { padding: 18px 20px 22px; overflow-y: auto; flex: 1; }

/* ── Club basket (running total at top) ─────────────────────── */
.wti-basket {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 7px;
    margin-bottom: 16px;
    overflow: hidden;
}
.wti-basket-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    background: #1a1a1a;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}
.wti-basket-total {
    font-size: 14px;
    font-weight: 700;
    color: #6ee7a0;
}
.wti-basket-items { padding: 0; }
.wti-basket-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 12.5px;
    gap: 10px;
}
.wti-basket-item:last-child { border-bottom: none; }
.wti-basket-item-info { flex: 1; min-width: 0; }
.wti-basket-item-name {
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wti-basket-item-meta { font-size: 11px; color: #888; margin-top: 1px; }
.wti-basket-item-credit { font-weight: 700; color: #2c6e49; white-space: nowrap; flex-shrink: 0; }
.wti-basket-item-remove {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    font-size: 14px;
    padding: 0 0 0 6px;
    line-height: 1;
    flex-shrink: 0;
}
.wti-basket-item-remove:hover { color: #c00; }

/* ── Step indicators ────────────────────────────────────────── */
.wti-steps { display: flex; align-items: center; margin-bottom: 16px; }
.wti-step-dot {
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 600;
    border: 1.5px solid #dde5e0;
    background: #eaf3e8; color: #607868;
    flex-shrink: 0;
}
.wti-step-dot.active { background: #2c6e49; color: #fff; border-color: #2c6e49; }
.wti-step-dot.done   { background: #4ca970; color: #fff; border-color: #4ca970; }
.wti-step-line       { flex: 1; height: 2px; background: #e8e8e8; }
.wti-step-line.done  { background: #4ca970; }

/* ── Form fields ────────────────────────────────────────────── */
.wti-field  { margin-bottom: 12px; }
.wti-label  {
    display: block;
    font-size: 11px; font-weight: 600;
    color: #888;
    text-transform: uppercase; letter-spacing: .05em;
    margin-bottom: 5px;
}
.wti-select,
.wti-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px; color: #1a1a1a;
    background: #fff;
    appearance: none; -webkit-appearance: none;
    font-family: inherit; outline: none;
    box-sizing: border-box;
}
.wti-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    padding-right: 34px;
}
.wti-select:focus, .wti-input:focus {
    border-color: #2c6e49;
    box-shadow: 0 0 0 2px rgba(44,110,73,.12);
}
.wti-select:disabled { background-color: #f5f5f5; color: #aaa; cursor: not-allowed; }

/* ── Shaft flex pills ───────────────────────────────────────── */
.wti-flex-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.wti-flex-btn {
    padding: 7px 14px;
    border: 1px solid #ddd; border-radius: 20px;
    font-size: 13px; font-weight: 500;
    cursor: pointer; background: #fff; color: #333;
    transition: all .12s; font-family: inherit;
}
.wti-flex-btn:hover  { border-color: #2c6e49; background: #f0faf4; }
.wti-flex-btn.active { background: #2c6e49; border-color: #2c6e49; color: #fff; }

/* ── Condition cards ────────────────────────────────────────── */
.wti-conditions {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 6px; margin-bottom: 14px;
}
.wti-cond-card {
    border: 1.5px solid #e0e0e0; border-radius: 5px;
    padding: 11px 5px 9px; cursor: pointer;
    text-align: center; transition: all .13s; background: #fff;
}
.wti-cond-card:hover       { border-color: #2c6e49; background: #f0faf4; }
.wti-cond-card.active      { border-color: #2c6e49; background: #f0faf4; }
.wti-cond-card.active .wti-cond-label { color: #2c6e49; }
.wti-cond-dot   { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-bottom: 5px; }
.wti-cond-label { display: block; font-size: 10.5px; font-weight: 600; color: #1a1a1a; margin-bottom: 2px; }
.wti-cond-desc  { display: block; font-size: 9.5px; color: #888; line-height: 1.3; }

/* ── Buttons ────────────────────────────────────────────────── */
.wti-btn {
    width: 100%; padding: 11px 16px;
    border-radius: 5px;
    font-size: 14px; font-weight: 600;
    cursor: pointer; border: none;
    font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: background .13s; box-sizing: border-box;
    text-decoration: none;
}
.wti-btn-primary          { background: #1a1a1a; color: #fff; }
.wti-btn-primary:hover    { background: #333; }
.wti-btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.wti-btn-outline          { background: #fff; color: #2c6e49; border: 1.5px solid #2c6e49; }
.wti-btn-outline:hover    { background: #f0faf4; }
.wti-btn-ghost {
    background: none; border: none;
    color: #888; font-size: 13px;
    cursor: pointer; padding: 8px 0;
    font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    width: 100%; text-decoration: underline;
}
.wti-btn-ghost:hover { color: #1a1a1a; }
.wti-back {
    background: none; border: none;
    color: #888; font-size: 12.5px; cursor: pointer; padding: 0;
    display: flex; align-items: center; gap: 3px;
    margin-bottom: 13px; font-family: inherit;
}
.wti-back:hover { color: #1a1a1a; }

/* ── Single club quote result ───────────────────────────────── */
.wti-club-quote {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 7px;
    overflow: hidden;
    margin-bottom: 14px;
}
.wti-club-quote-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #e8e8e8;
    background: #f0faf4;
}
.wti-club-quote-name { font-size: 13.5px; font-weight: 600; color: #1a1a1a; }
.wti-club-quote-credit { font-size: 20px; font-weight: 700; color: #2c6e49; }
.wti-club-quote-meta { padding: 9px 14px; font-size: 12px; color: #888; }

/* ── Full price summary (checkout screen) ───────────────────── */
.wti-price-panel { border: 1px solid #e0e0e0; border-radius: 5px; overflow: hidden; margin-bottom: 13px; }
.wti-panel-product { padding: 9px 14px; background: #f9f9f9; border-bottom: 1px solid #e8e8e8; font-size: 12px; color: #888; }
.wti-panel-product strong { display: block; font-size: 13px; color: #1a1a1a; font-weight: 600; }
.wti-panel-club-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 14px; border-bottom: 1px solid #f5f5f5; font-size: 12.5px;
}
.wti-panel-club-row:last-of-type { border-bottom: 1px solid #e8e8e8; }
.wti-panel-club-label { color: #555; }
.wti-panel-club-val   { color: #2c6e49; font-weight: 600; }
.wti-panel-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px; border-bottom: 1px solid #f0f0f0; font-size: 13.5px; color: #1a1a1a;
}
.wti-panel-row:last-child { border-bottom: none; }
.wti-panel-val         { font-weight: 600; }
.wti-panel-val.credit  { color: #2c6e49; }
.wti-panel-total {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 14px; background: #f9f9f9; border-top: 1.5px solid #e0e0e0;
}
.wti-panel-total-label { font-size: 13.5px; font-weight: 600; }
.wti-panel-total-value { font-size: 22px; font-weight: 700; color: #1a1a1a; }

/* ── Info box ───────────────────────────────────────────────── */
.wti-info-box {
    background: #f0faf4; border: 1px solid #b8dfc8;
    border-radius: 5px; padding: 11px 14px;
    margin-bottom: 13px; display: flex; gap: 9px; align-items: flex-start;
}
.wti-info-text { font-size: 12px; color: #1a4a30; line-height: 1.6; }
.wti-info-text strong { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 2px; }

/* ── Quote chip on contact step ─────────────────────────────── */
.wti-quote-chip {
    background: #f0faf4; border: 1px solid #b8dfc8;
    border-radius: 5px; padding: 9px 13px; margin-bottom: 13px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; color: #1a4a30;
}
.wti-quote-chip strong { font-size: 15px; font-weight: 700; color: #2c6e49; }

/* ── Terms ──────────────────────────────────────────────────── */
.wti-terms-row {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 12px; color: #888;
    margin: 10px 0 13px; line-height: 1.6;
}
.wti-terms-row input[type="checkbox"] {
    width: 13px; height: 13px;
    accent-color: #2c6e49; margin-top: 2px; flex-shrink: 0; cursor: pointer;
}
.wti-terms-row a { color: #2c6e49; }

/* ── Success screen ─────────────────────────────────────────── */
.wti-success { text-align: center; padding: 8px 0 4px; }
.wti-success-icon {
    width: 50px; height: 50px;
    background: #f0faf4; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 13px;
}
.wti-success h3 { font-size: 17px; font-weight: 700; color: #1a1a1a; margin-bottom: 7px; }
.wti-success p  { font-size: 13px; color: #888; line-height: 1.6; margin-bottom: 14px; }
.wti-success-summary {
    background: #f9f9f9; border: 1px solid #e8e8e8;
    border-radius: 5px; padding: 12px 14px; margin-bottom: 14px; text-align: left;
}
.wti-summary-row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; color: #1a1a1a; }
.wti-summary-row.credit { color: #2c6e49; font-size: 12px; }
.wti-summary-row.subtotal { border-top: 1px solid #f0f0f0; margin-top: 4px; padding-top: 8px; }
.wti-summary-row.total  { font-weight: 700; font-size: 14px; border-top: 1px solid #e8e8e8; margin-top: 8px; padding-top: 10px; }

/* ── Misc ───────────────────────────────────────────────────── */
.wti-spinner {
    display: inline-block; width: 14px; height: 14px;
    border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff;
    border-radius: 50%; animation: wtiSpin .7s linear infinite;
}
@keyframes wtiSpin { to { transform: rotate(360deg); } }

.wti-divider { border: none; border-top: 1px solid #f0f0f0; margin: 12px 0; }

.wti-error {
    background: #fef2f2; border: 1px solid #fca5a5;
    border-radius: 5px; padding: 10px 13px;
    font-size: 13px; color: #7f1d1d; margin-bottom: 12px; line-height: 1.5;
}

.wti-section-heading {
    font-size: 13px; font-weight: 600; color: #1a1a1a; margin: 0 0 10px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 480px) {
    .wti-overlay { padding: 0; align-items: flex-end; }
    .wti-modal {
        border-radius: 14px 14px 0 0; max-height: 92vh;
        animation: wtiSlideUp .25s cubic-bezier(.32,.72,0,1);
    }
    @keyframes wtiSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
    .wti-conditions { grid-template-columns: repeat(3,1fr); }
}