/* ═══════════════════════════════════════════════════════════
   Alpen Glow — Tour Planner  ·  Refined UI
   Key changes vs original:
   ─ Warm dark surfaces (#12100e base) aligned with dashboard
   ─ Unified glass recipe (one backdrop-filter formula everywhere)
   ─ Spring easing on all interactive transforms
   ─ Background crossfade includes subtle scale (feels alive)
   ─ Progress bar has edge glow
   ─ Stagger classes for card entrance animations
   ─ Display text set in italic Playfair (brand voice, not generic)
   ─ Sharper radius hierarchy: sm=10, base=14, lg=20
   ─ Confirmation overlay scales in, circle pops with spring
   ─ Back button slides left on hover
   ─ City rows slide right on hover
   ─ Stepper value bump animation (add .tp-val-bump via JS)
   ─ Reduced-motion block at end
═══════════════════════════════════════════════════════════ */

#tp-root {
  --orange:       #ef7e19;
  --amber:        #f5a623;
  --ember:        #c4601a;
  --red:          #9d2420;

  --bg:           #12100e;
  --glass:        rgba(14, 11, 8, 0.52);
  --glass-hi:     rgba(22, 17, 12, 0.68);

  --rule:         rgba(239, 126, 25, 0.12);
  --rule-hi:      rgba(239, 126, 25, 0.32);
  --border:       rgba(255, 255, 255, 0.09);
  --border-hi:    rgba(255, 255, 255, 0.18);

  --sel-bg:       rgba(239, 126, 25, 0.10);
  --sel-ring:     rgba(239, 126, 25, 0.28);

  --text:         rgba(255, 255, 255, 0.90);
  --muted:        rgba(255, 255, 255, 0.42);
  --ghost:        rgba(255, 255, 255, 0.16);

  --r-sm:         10px;
  --r:            14px;
  --r-lg:         20px;

  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --smooth:       cubic-bezier(0.4, 0, 0.2, 1);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
}

/* ── Root ───────────────────────────────────────────────── */
#tp-root {
  position: fixed; inset: 0; z-index: 99999;
  font-family: var(--font-body);
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms var(--ease);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  background: var(--bg);
}
#tp-root.tp-open { opacity: 1; pointer-events: all; }

/* ── Background ─────────────────────────────────────────── */
.tp-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  will-change: opacity, transform;
  transition: opacity 1100ms var(--ease), transform 1100ms var(--ease);
  transform: scale(1.04);
}
.tp-bg-visible { opacity: 1; transform: scale(1); }
.tp-bg-hidden  { opacity: 0; transform: scale(1.04); }

#tp-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 20% 80%, rgba(157,36,32,0.18) 0%, transparent 60%),
    linear-gradient(160deg, rgba(18,16,14,0.88) 0%, rgba(157,36,32,0.14) 55%, rgba(18,16,14,0.84) 100%);
}

/* ── Progress bar ────────────────────────────────────────── */
#tp-progress {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  height: 2px; background: rgba(255,255,255,0.05);
}
#tp-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ember) 0%, var(--orange) 60%, var(--amber) 100%);
  box-shadow: 2px 0 10px rgba(239,126,25,0.55);
  transition: width 600ms var(--ease);
  will-change: width;
}

/* ── Header / step counter ───────────────────────────────── */
#tp-header {
  position: absolute; top: 22px; left: 26px; z-index: 10;
  display: flex; align-items: center; gap: 10px;
}
#tp-breadcrumb { display: none; }
.tp-step-ct {
  font-size: 10px; font-weight: 600;
  color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase;
}

/* ── Close button ────────────────────────────────────────── */
#tp-close {
  position: absolute; top: 18px; right: 24px; z-index: 20;
  width: 36px; height: 36px;
  background: var(--glass);
  border: 1px solid var(--border-hi);
  color: rgba(255,255,255,0.6); font-size: 13px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.25s var(--ease), border-color 0.25s, color 0.25s, transform 0.4s var(--spring);
  will-change: transform;
}
#tp-close:hover {
  background: var(--orange); border-color: var(--orange);
  color: var(--bg); transform: rotate(90deg) scale(1.08);
}

/* ── Main ────────────────────────────────────────────────── */
#tp-main {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding: 96px 24px 96px;
  overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth;
}
#tp-main::-webkit-scrollbar { width: 2px; }
#tp-main::-webkit-scrollbar-thumb { background: rgba(239,126,25,0.2); }
#tp-step-wrap { width: 100%; max-width: 880px; }

/* ── Step animations ─────────────────────────────────────── */
@keyframes tp-in  { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes tp-out { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }
.tp-anim-in-fwd  { animation: tp-in  420ms var(--ease) both; }
.tp-anim-in-back { animation: tp-out 420ms var(--ease) both; }

/* Card stagger — add .tp-stagger to grid wrapper */
.tp-stagger > *:nth-child(1)   { animation-delay:  30ms; }
.tp-stagger > *:nth-child(2)   { animation-delay:  70ms; }
.tp-stagger > *:nth-child(3)   { animation-delay: 110ms; }
.tp-stagger > *:nth-child(4)   { animation-delay: 150ms; }
.tp-stagger > *:nth-child(5)   { animation-delay: 190ms; }
.tp-stagger > *:nth-child(n+6) { animation-delay: 220ms; }

/* ── Question typography ─────────────────────────────────── */
.tp-step-eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--amber); margin-bottom: 10px; opacity: 0.85;
}
.tp-q-rule {
  width: 32px; height: 1.5px;
  background: linear-gradient(90deg, var(--orange), transparent);
  margin-bottom: 28px;
}
.tp-step-q {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.8vw, 46px);
  font-weight: 400; font-style: italic; line-height: 1.18;
  margin-bottom: 36px;
  text-shadow: 0 2px 32px rgba(0,0,0,0.5);
  position: sticky; top: -20px;
}
.tp-step-q em { font-style: normal; color: var(--orange); }

/* ── Image cards ─────────────────────────────────────────── */
.tp-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
}
.tp-grid-dest {
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 10px; max-height: 56vh; overflow-y: auto; padding-right: 6px;
  scrollbar-width: thin; scrollbar-color: rgba(239,126,25,0.2) transparent;
}
.tp-grid-dest::-webkit-scrollbar { width: 3px; }
.tp-grid-dest::-webkit-scrollbar-thumb { background: rgba(239,126,25,0.22); }

.tp-card {
  position: relative; overflow: hidden; cursor: pointer;
  aspect-ratio: 3 / 4;
  background: rgba(14,11,8,0.5);
  border: 1.5px solid var(--border);
  transition: border-color 0.28s var(--ease), transform 0.38s var(--spring), box-shadow 0.38s var(--ease);
  will-change: transform;
}
.tp-grid-dest .tp-card { aspect-ratio: 4 / 3; }
.tp-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 52px rgba(0,0,0,0.55);
  border-color: var(--border-hi);
}
.tp-card.tp-sel {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px var(--sel-ring), 0 20px 52px rgba(0,0,0,0.55);
  transform: translateY(-5px);
}
.tp-card img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform 0.7s var(--ease), filter 0.3s;
  will-change: transform;
}
.tp-card:hover img { transform: scale(1.06); }
.tp-card.tp-sel img { filter: brightness(0.86); }
.tp-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,11,8,0.88) 0%, rgba(14,11,8,0.08) 50%, transparent 75%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 14px 12px;
}
.tp-card-name { font-family: var(--font-display); font-size: 1rem; font-weight: 400; line-height: 1.2; }
.tp-card-sub  { font-size: 10px; color: rgba(255,255,255,0.55); margin-top: 3px; }

.tp-proof {
  position: absolute; top: 10px; left: 10px;
  background: var(--glass); backdrop-filter: blur(8px);
  font-size: 9px; font-weight: 700;
  padding: 3px 9px; letter-spacing: 0.07em; text-transform: uppercase;
  border: 1px solid var(--border);
}
.tp-proof-pop { background: var(--orange); color: var(--bg); border-color: transparent; }

.tp-check {
  position: absolute; top: 10px; right: 10px;
  width: 22px; height: 22px; background: var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--bg);
  opacity: 0; transform: scale(0.3) rotate(-30deg);
  transition: opacity 0.22s, transform 0.38s var(--spring);
}
.tp-sel .tp-check { opacity: 1; transform: scale(1) rotate(0deg); }

/* ── Icon cards ──────────────────────────────────────────── */
.tp-icon-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
.tp-icon-card {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--border);
  padding: 28px 14px 22px; text-align: center; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: background 0.28s var(--ease), border-color 0.28s, transform 0.38s var(--spring), box-shadow 0.38s var(--ease);
  will-change: transform;
}
.tp-icon-card:hover {
  background: var(--glass-hi); border-color: var(--border-hi);
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.07);
}
.tp-icon-card.tp-sel {
  border-color: var(--orange); background: var(--glass-hi); transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(239,126,25,0.3), 0 14px 40px rgba(0,0,0,0.4);
}
.tp-icon-glyph {
  font-size: 34px; line-height: 1; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.4s var(--spring);
}
.tp-icon-glyph svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--amber); }
.tp-icon-card:hover .tp-icon-glyph,
.tp-icon-card.tp-sel .tp-icon-glyph { transform: scale(1.15); }
.tp-icon-label { font-family: var(--font-display); font-size: .95rem; font-weight: 400; font-style: italic; }
.tp-icon-sub   { font-size: 10px; color: var(--muted); margin-top: 5px; }
.tp-icon-desc  { display: none; }

/* ── Steppers ───────────────────────────────────────────── */
.tp-stepper-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.tp-stepper-card {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--border);
  padding: 28px 20px;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: background 0.28s, border-color 0.28s;
}
.tp-stepper-label { font-family: var(--font-display); font-size: .95rem; font-weight: 400; font-style: italic; }
.tp-stepper-desc  { font-size: 10px; color: var(--muted); margin-top: 1px; }
.tp-stepper-ctrl  { display: flex; align-items: center; gap: 14px; }
.tp-spin-btn {
  width: 36px; height: 36px;
  background: var(--glass); border: 1px solid var(--border-hi);
  color: var(--text); font-size: 17px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.22s, border-color 0.22s, transform 0.3s var(--spring);
  will-change: transform;
}
.tp-spin-btn:hover:not(:disabled) {
  background: var(--orange); border-color: var(--orange); color: var(--bg); transform: scale(1.1);
}
.tp-spin-btn:disabled { opacity: 0.18; cursor: not-allowed; }
.tp-spin-val {
  font-family: var(--font-display); font-style: italic;
  font-size: 34px; font-weight: 400;
  min-width: 50px; text-align: center;
  transition: transform 0.2s var(--spring), color 0.2s;
}
@keyframes tp-val-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.22); color: var(--orange); }
  100% { transform: scale(1); }
}
.tp-val-bump { animation: tp-val-bump 0.32s var(--spring) both; }

/* ── Month picker ───────────────────────────────────────── */
.tp-month-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; }
.tp-month-card {
  background: var(--glass); backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  padding: 18px 6px; text-align: center; cursor: pointer;
  position: relative; overflow: hidden;
  transition: background 0.22s var(--ease), border-color 0.22s, transform 0.32s var(--spring);
  will-change: transform;
}
.tp-month-card::before {
  content: ''; position: absolute; inset: 0;
  background: var(--orange); opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.tp-month-card.tp-sel::before { opacity: 0.12; }
.tp-month-abbr, .tp-month-full { position: relative; z-index: 1; }
.tp-month-card:hover { background: var(--glass-hi); border-color: var(--border-hi); transform: translateY(-2px); }
.tp-month-card.tp-sel { border-color: var(--orange); transform: translateY(-2px); }
.tp-month-abbr { font-size: 13px; font-weight: 600; display: block; }
.tp-month-full { font-size: 9px; color: var(--muted); margin-top: 3px; display: block; text-transform: uppercase; letter-spacing: 0.08em; }

/* ── Duration cards ──────────────────────────────────────── */
.tp-dur-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.tp-dur-card {
  background: var(--glass); backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--border); padding: 24px 18px; cursor: pointer;
  display: flex; flex-direction: column;
  transition: background 0.28s var(--ease), border-color 0.28s, transform 0.35s var(--spring), box-shadow 0.35s var(--ease);
  will-change: transform;
}
.tp-dur-card:hover {
  background: var(--glass-hi); border-color: var(--border-hi);
  transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,0.4);
}
.tp-dur-card.tp-sel {
  border-color: var(--orange); background: var(--glass-hi);
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(239,126,25,0.28), 0 14px 40px rgba(0,0,0,0.4);
}
.tp-dur-days {
  font-family: var(--font-display); font-size: 28px; font-weight: 400;
  font-style: italic; line-height: 1;
  transition: color 0.22s;
}
.tp-dur-card.tp-sel .tp-dur-days { color: var(--amber); }
.tp-dur-label { font-size: 11px; color: var(--muted); margin-top: 7px; }
.tp-dur-pop {
  display: inline-block; margin-top: 14px; align-self: flex-start;
  background: var(--orange); color: var(--bg);
  font-size: 8px; font-weight: 700; letter-spacing: 0.09em;
  padding: 2px 8px; text-transform: uppercase;
}

/* ── Budget cards ───────────────────────────────────────── */
.tp-budget-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.tp-budget-card {
  background: var(--glass); backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--border); padding: 24px 18px; cursor: pointer;
  transition: background 0.28s var(--ease), border-color 0.28s, transform 0.35s var(--spring), box-shadow 0.35s var(--ease);
  will-change: transform;
}
.tp-budget-card:hover {
  background: var(--glass-hi); border-color: var(--border-hi);
  transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,0.4);
}
.tp-budget-card.tp-sel {
  border-color: var(--orange); background: var(--glass-hi);
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(239,126,25,0.28), 0 14px 40px rgba(0,0,0,0.4);
}
.tp-budget-icon { margin-bottom: 12px; display: flex; align-items: center; }
.tp-budget-icon svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--amber); }
.tp-budget-name { font-family: var(--font-display); font-size: 1rem; font-weight: 400; font-style: italic; }
.tp-budget-desc { font-size: 10px; color: var(--muted); margin-top: 6px; line-height: 1.55; }

/* ── City search ─────────────────────────────────────────── */
.tp-city-wrap { max-width: 500px; margin: 0 auto; }
.tp-city-input {
  width: 100%; box-sizing: border-box;
  background: var(--glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border-hi);
  padding: 13px 22px; color: var(--text); font-size: 15px; outline: none;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.tp-city-input::placeholder { color: rgba(255,255,255,0.25); }
.tp-city-input:focus {
  border-color: var(--orange); background: var(--glass-hi);
  box-shadow: 0 0 0 2px var(--sel-ring);
}
.tp-city-list {
  margin-top: 6px; display: flex; flex-direction: column; gap: 3px;
  max-height: 320px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(239,126,25,0.2) transparent;
}
.tp-city-row {
  background: var(--glass); border: 1px solid var(--border); border-left: 2px solid transparent;
  padding: 11px 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; font-weight: 500;
  transition: background 0.18s, border-color 0.18s, transform 0.25s var(--spring);
}
.tp-city-row:hover { background: var(--glass-hi); border-left-color: var(--border-hi); transform: translateX(2px); }
.tp-city-row.tp-sel { border-color: var(--orange); border-left-color: var(--orange); background: var(--sel-bg); }
.tp-city-country { font-size: 11px; color: var(--muted); font-weight: 400; }

/* ── Contact form ───────────────────────────────────────── */
.tp-contact-form { max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.tp-field-wrap { position: relative; }
.tp-field-label {
  font-size: 9px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 5px;
}
.tp-input {
  width: 100%; box-sizing: border-box;
  background: var(--glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border-hi);
  padding: 12px 15px; color: var(--text); font-size: 14px; outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color 0.22s, background 0.22s, box-shadow 0.22s;
}
.tp-input::placeholder { color: rgba(255,255,255,0.22); }
.tp-input:focus {
  border-color: var(--orange); background: var(--glass-hi);
  box-shadow: 0 0 0 2px var(--sel-ring);
}
.tp-input.tp-err { border-color: var(--red); }
.tp-field-float {
  position: absolute; left: 15px; top: 13px;
  font-size: 14px; color: var(--muted); pointer-events: none;
  transition: all 0.22s var(--ease);
}
.tp-input:focus ~ .tp-field-float,
.tp-input:not(:placeholder-shown) ~ .tp-field-float {
  top: -9px; left: 11px; font-size: 9px; font-weight: 600; color: var(--orange);
  letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(12,10,8,0.92); padding: 0 5px;
}

/* ── Inline verify row (CC + input + SEND OTP btn) ──────── */
.tp-verify-row { display: flex; gap: 4px; align-items: stretch; }
.tp-input-slot { position: relative; flex: 1; min-width: 0; }
.tp-input-slot .tp-input { width: 100%; height: 100%; }

/* CC select in the verify row */
.tp-cc-select {
  flex-shrink: 0; width: 88px;
  background: var(--glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border-hi);
  color: var(--text); font-size: 12px; outline: none;
  padding: 0 8px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color 0.22s, background 0.22s;
  font-family: var(--font-body);
}
.tp-cc-select:focus { border-color: var(--orange); background: var(--glass-hi); }
.tp-cc-select option { background: #1a1410; color: var(--text); }

/* SEND OTP / status button — dark glass tile */
.tp-send-otp-btn {
  flex-shrink: 0; padding: 0 14px;
  background: rgba(10,8,6,0.72);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-hi);
  color: var(--orange); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap; font-family: var(--font-body);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: background 0.22s, color 0.22s, border-color 0.22s, box-shadow 0.22s;
}
.tp-send-otp-btn:hover:not(:disabled):not(.tp-otp-sent):not(.tp-otp-ok) {
  background: var(--orange); color: #0a0806; border-color: var(--orange);
  box-shadow: 0 0 0 2px var(--sel-ring), inset 0 1px 0 rgba(255,255,255,0.1);
}
.tp-send-otp-btn.tp-otp-sent {
  color: var(--muted); cursor: default; font-size: 9px;
  background: rgba(10,8,6,0.5);
}
.tp-send-otp-btn.tp-otp-ok {
  color: #5cb85c; border-color: rgba(92,184,92,0.6);
  background: rgba(92,184,92,0.08); cursor: default;
}
.tp-send-otp-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Inline OTP reveal block */
.tp-otp-inline {
  overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height 0.42s var(--ease), opacity 0.35s var(--ease);
}
.tp-otp-inline.tp-open { max-height: 240px; opacity: 1; }

/* ── OTP digits for trip planner (dark theme) ─────────────── */
.tp-otp-row { display: flex; gap: 8px; margin: 10px 0 6px; }
.tp-otp-digit {
  flex: 1; height: 56px; max-width: 64px;
  background: var(--glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border-hi);
  color: var(--text); font-size: 1.5rem; font-weight: 700;
  text-align: center; outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color 0.22s, background 0.22s, box-shadow 0.22s;
  font-family: var(--font-body);
}
.tp-otp-digit:focus {
  border-color: var(--orange); background: var(--glass-hi);
  box-shadow: 0 0 0 2px var(--sel-ring);
}

/* ── Verification sub-step UI ────────────────────────────── */
.tp-verify-note {
  font-size: 13px; color: rgba(255,255,255,0.65);
  margin-bottom: 4px; line-height: 1.55;
}
.tp-resend-line { font-size: 11px; color: var(--muted); margin: 4px 0 16px; }
.tp-resend-link { color: var(--orange); cursor: pointer; font-weight: 600; }
.tp-resend-link:hover { color: var(--amber); }
/* tp-cs-block removed — now using inline OTP reveal (.tp-otp-inline) */

/* ── CTA buttons ─────────────────────────────────────────── */
.tp-submit,
.tp-next-btn {
  background: var(--orange); color: var(--bg); border: none;
  padding: 13px 42px; font-size: 13px; font-weight: 700;
  cursor: pointer; letter-spacing: 0.06em; text-transform: uppercase;
  transition: background 0.25s var(--ease), transform 0.35s var(--spring), box-shadow 0.35s var(--ease), letter-spacing 0.3s;
  will-change: transform;
  box-shadow: 0 4px 18px rgba(239,126,25,0.28);
}
.tp-submit:hover:not(:disabled),
.tp-next-btn:not(:disabled):hover {
  background: var(--amber); transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(239,126,25,0.42); letter-spacing: 0.08em;
}
.tp-submit:disabled,
.tp-next-btn:disabled { opacity: 0.22; cursor: not-allowed; box-shadow: none; }
.tp-next-wrap { display: flex; justify-content: center; margin-top: 32px; }

/* ── Footer / back button ────────────────────────────────── */
#tp-footer {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 10;
  padding: 20px 28px;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(to top, rgba(12,10,8,0.7) 0%, transparent 100%);
}
#tp-btn-back {
  background: transparent; border: 1px solid var(--border-hi);
  color: var(--muted); padding: 9px 22px;
  font-size: 12px; cursor: pointer;
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  transition: border-color 0.22s, color 0.22s, transform 0.32s var(--spring);
  display: flex; align-items: center; gap: 6px;
}
#tp-btn-back:hover { border-color: var(--border-hi); color: var(--text); transform: translateX(-2px); }
#tp-btn-back[hidden] { visibility: hidden; pointer-events: none; }

/* ── Seasonal warning ───────────────────────────────────── */
#tp-warn {
  display: none; margin-top: 12px;
  background: rgba(239,126,25,0.07); border: 1px solid rgba(239,126,25,0.22);
  padding: 11px 40px 11px 14px;
  font-size: 11px; line-height: 1.6; color: rgba(255,255,255,0.82);
  position: relative; animation: tp-in 350ms var(--ease) both;
}
#tp-warn.tp-show { display: block; }
#tp-warn-dismiss {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none; color: var(--muted); font-size: 13px; cursor: pointer;
  transition: color 0.18s;
}
#tp-warn-dismiss:hover { color: var(--text); }

/* ── Confirmation overlay ────────────────────────────────── */
#tp-confirm {
  display: none; position: absolute; inset: 0; z-index: 20;
  background: rgba(10,8,6,0.94); backdrop-filter: blur(18px);
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 18px; padding: 40px;
}
#tp-confirm.tp-show {
  display: flex;
  animation: tp-confirm-in 500ms var(--ease) both;
}
@keyframes tp-confirm-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.tp-confirm-circle {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #0a0806; margin: 0 auto;
  box-shadow: 0 0 0 14px rgba(239,126,25,0.1), 0 0 0 28px rgba(239,126,25,0.05);
  animation: tp-confirm-pop 600ms var(--spring) 100ms both;
}
@keyframes tp-confirm-pop {
  from { transform: scale(0.2); opacity: 0; box-shadow: none; }
  to   { transform: scale(1);   opacity: 1; }
}
.tp-confirm-title {
  font-family: var(--font-display); font-size: 2rem;
  font-weight: 400; font-style: italic; margin-top: 6px;
  animation: tp-in 400ms var(--ease) 220ms both;
}
.tp-confirm-sub {
  font-size: 14px; color: rgba(255,255,255,0.5);
  max-width: 320px; line-height: 1.7; margin-top: -4px;
  animation: tp-in 400ms var(--ease) 320ms both;
}
.tp-confirm-divider {
  width: 40px; height: 1px; background: rgba(255,255,255,0.12); margin: 2px auto;
  animation: tp-in 400ms var(--ease) 360ms both;
}
.tp-confirm-summary {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  animation: tp-in 400ms var(--ease) 400ms both;
}
.tp-sum-pill {
  background: rgba(239,126,25,0.08); border: 1px solid rgba(239,126,25,0.2);
  padding: 5px 14px; font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.72); letter-spacing: 0.04em;
  text-transform: capitalize;
}
.tp-confirm-close {
  margin-top: 6px;
  background: transparent; border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.6);
  padding: 11px 36px; font-size: 11px; cursor: pointer;
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  font-family: var(--font-body);
  transition: border-color 0.22s, background 0.22s, color 0.22s, transform 0.3s var(--spring);
  animation: tp-in 400ms var(--ease) 480ms both;
}
.tp-confirm-close:hover {
  border-color: var(--orange); background: rgba(239,126,25,0.08);
  color: var(--orange); transform: translateY(-1px);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .tp-icon-grid { grid-template-columns: repeat(3,1fr); }
  .tp-dur-grid, .tp-budget-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .tp-month-grid { grid-template-columns: repeat(4,1fr); }
  .tp-grid       { grid-template-columns: repeat(auto-fill, minmax(128px,1fr)); }
  .tp-grid-dest  { grid-template-columns: repeat(auto-fill, minmax(155px,1fr)); }
  .tp-stepper-grid { grid-template-columns: 1fr; }
  #tp-main       { padding: 70px 16px 68px; }
  .tp-step-q     { font-size: 24px; margin-bottom: 24px; }
  .tp-icon-grid  { grid-template-columns: repeat(2,1fr); }
  .tp-submit, .tp-next-btn { padding: 13px 32px; }
}
@media (max-width: 480px) {
  .tp-month-grid { grid-template-columns: repeat(3,1fr); }
  .tp-dur-grid, .tp-budget-grid { grid-template-columns: 1fr 1fr; }
  .tp-icon-grid  { grid-template-columns: 1fr 1fr; }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.1ms !important;
  }
  .tp-bg { transform: none !important; }
}