:root{
  --bg-deep:#0b1310;
  --bg-deep-2:#0f1d17;
  --green-deep:#0b3d2e;
  --green-mid:#155c41;
  --gold:#c9a227;
  --gold-soft:#e6c866;
  --gold-dim:#8a7328;
  --maroon:#6f1d24;
  --ivory:#f7f2e7;
  --ink:#1b211d;
  --muted:#6b6459;
  --line:#d9cfae;
  --shadow: 0 30px 60px -20px rgba(0,0,0,.45);
  --radius: 18px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Vazirmatn', sans-serif;
  background:var(--bg-deep);
  color:var(--ivory);
  line-height:1.8;
}
::selection{ background:var(--gold-soft); color:#1b211d; }
a{color:inherit;}
button{ font-family:inherit; }

/* ---------- Decorative background pattern ---------- */
.star-field{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(201,162,39,.08) 0, transparent 40%),
    radial-gradient(circle at 80% 0%, rgba(201,162,39,.06) 0, transparent 45%);
  pointer-events:none;
}
.lattice{
  position:absolute; inset:0; opacity:.14; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><g fill='none' stroke='%23c9a227' stroke-width='1'><path d='M60 0 L120 60 L60 120 L0 60 Z'/><path d='M60 0 L60 120 M0 60 L120 60'/></g></svg>");
  background-size:120px 120px;
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:radial-gradient(ellipse at 50% -10%, var(--green-mid) 0%, var(--green-deep) 45%, var(--bg-deep-2) 78%, var(--bg-deep) 100%);
  padding: 64px 20px 150px; text-align:center;
}
.eyebrow-ar{
  font-family:'Amiri', serif; font-style:italic; color:var(--gold-soft);
  font-size:clamp(20px,3vw,28px); letter-spacing:.5px; display:block; margin-bottom:10px;
  animation: fadeUp .9s ease both;
}
.hero h1{
  font-weight:900; font-size:clamp(30px,5.2vw,54px); margin:6px 0 14px; color:var(--ivory);
  text-shadow:0 4px 30px rgba(0,0,0,.35); animation: fadeUp 1s .1s ease both;
}
.hero p.sub{
  max-width:640px; margin:0 auto; color:#d7d0bd; font-size:clamp(15px,2vw,18px);
  animation: fadeUp 1.1s .2s ease both;
}
.hero .divider-line{
  width:120px; height:2px; margin:26px auto;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: fadeUp 1.2s .3s ease both;
}
@keyframes fadeUp{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }

/* ---------- Layout ---------- */
.wrap{ max-width:920px; margin:0 auto; padding:0 20px; position:relative; }
.card{
  background:var(--ivory); color:var(--ink); border-radius: var(--radius); box-shadow:var(--shadow);
  margin-top:-110px; position:relative; z-index:3; border-top:5px solid var(--gold);
}
.card-inner{ padding:clamp(22px,4vw,50px); }

/* ---------- Stepper (overview) ---------- */
.stepper{ display:flex; justify-content:space-between; position:relative; margin-bottom:34px; }
.stepper::before{
  content:''; position:absolute; top:18px; right:8%; left:8%; height:2px; background:var(--line); z-index:0;
}
.step{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:7px; cursor:pointer; flex:1; background:var(--ivory); }
.step .circle{
  width:36px; height:36px; border-radius:50%; background:#fff; border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--muted); font-size:14px;
  transition:.3s all;
}
.step .lbl{ font-size:11.5px; color:var(--muted); text-align:center; transition:.3s color; }
.step.active .circle{ border-color:var(--green-deep); background:var(--green-deep); color:var(--gold-soft); box-shadow:0 0 0 5px rgba(11,61,46,.12); }
.step.active .lbl{ color:var(--green-deep); font-weight:700; }
.step.done .circle{ border-color:var(--green-mid); background:var(--green-mid); color:#fff; }
.step.done .lbl{ color:var(--green-mid); }
@media(max-width:640px){ .step .lbl{ display:none; } .stepper{ margin-bottom:24px; } }

/* ---------- Accordion ---------- */
.acc-item{ border:1.5px solid var(--line); border-radius:16px; margin-bottom:14px; background:#fffdf8; transition:.25s border-color, .25s box-shadow; }
.acc-item.open{ border-color:var(--green-mid); box-shadow:0 8px 22px -10px rgba(11,61,46,.25); }
.acc-header{ display:flex; align-items:center; gap:14px; padding:18px 20px; cursor:pointer; user-select:none; }
.acc-header .num-circle{
  width:34px; height:34px; border-radius:50%; background:var(--green-deep); color:var(--gold-soft);
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; flex:none; transition:.25s all;
}
.acc-item.done .acc-header .num-circle{ background:var(--green-mid); }
.acc-header .titles{ flex:1; min-width:0; }
.acc-header .t-main{ font-weight:800; font-size:16.5px; color:var(--green-deep); }
.acc-header .t-sum{ font-size:13px; color:var(--muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acc-header .chevron{ transition:.3s transform; color:var(--gold-dim); flex:none; }
.acc-item.open .chevron{ transform:rotate(180deg); }
.acc-body{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.acc-body-inner{ padding:2px 20px 26px; }
.acc-next{
  margin-top:8px; padding:11px 24px; border:none; border-radius:10px; background:var(--green-deep);
  color:var(--ivory); font-weight:700; cursor:pointer; font-size:14px; transition:.2s background;
}
.acc-next:hover{ background:var(--green-mid); }

.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:640px){ .field-row{ grid-template-columns:1fr; } }
label.field-label{ display:block; font-size:14px; font-weight:600; color:var(--muted); margin-bottom:8px; }
input[type=text], input[type=tel], input[type=number]{
  width:100%; padding:13px 14px; border-radius:12px; border:1.5px solid #ded4b8; background:#fffdf8;
  font-family:inherit; font-size:15px; color:var(--ink); transition:.2s border-color, .2s box-shadow;
}
input:focus{ outline:none; border-color:var(--green-mid); box-shadow:0 0 0 4px rgba(21,92,65,.14); }
input:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.field{ margin-bottom:18px; }

/* ---------- OTP mobile verification ---------- */
.otp-row{ display:flex; gap:8px; }
.otp-row input{ flex:1; }
.otp-row button{ white-space:nowrap; margin-top:0; }
.otp-row button:disabled{ opacity:.55; cursor:not-allowed; }
.otp-status{ font-size:13px; margin-top:8px; min-height:18px; }
.otp-status.ok{ color:var(--green-mid); font-weight:700; }
.otp-status.err{ color:var(--maroon); font-weight:600; }
.otp-status.muted{ color:var(--muted); }

/* ---------- Border cards ---------- */
.border-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media(max-width:640px){ .border-grid{ grid-template-columns:repeat(2,1fr);} }
.border-card{ position:relative; }
.border-card input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.border-card label{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:16px 8px;
  border-radius:14px; border:1.5px solid #ded4b8; background:#fffdf8; cursor:pointer; transition:.2s all;
  font-weight:700; font-size:14px; color:var(--ink);
}
.border-card svg{ width:26px; height:26px; stroke:var(--green-deep); }
.border-card input:checked + label{ border-color:var(--green-deep); background:var(--green-deep); color:var(--ivory); }
.border-card input:checked + label svg{ stroke:var(--gold-soft); }
.border-card input:focus-visible + label{ outline:2px solid var(--gold); outline-offset:2px; }

/* ---------- Route options ---------- */
.route-option{ position:relative; margin-bottom:12px; }
.route-option input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.route-option label{ display:block; padding:16px 18px; border-radius:14px; border:1.5px solid #ded4b8; background:#fffdf8; cursor:pointer; transition:.2s all; }
.route-option .r-title{ font-weight:700; font-size:15px; margin-bottom:4px; }
.route-option .r-path{ font-size:13px; color:var(--muted); }
.route-option input:checked + label{ border-color:var(--green-mid); background:#eef6f0; box-shadow:0 0 0 3px rgba(21,92,65,.10); }
.route-option input:focus-visible + label{ outline:2px solid var(--gold); outline-offset:2px; }
#otherRouteWrap{ display:none; margin-top:12px; }

/* ---------- Journey visual ---------- */
.journey{ margin:22px 0 6px; background:linear-gradient(180deg,#0f1d17,#0b1310); border-radius:16px; padding:26px 18px 20px; position:relative; overflow:hidden; }
.journey::before{
  content:''; position:absolute; inset:0; opacity:.12;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><g fill='none' stroke='%23c9a227' stroke-width='1'><path d='M60 0 L120 60 L60 120 L0 60 Z'/></g></svg>");
  background-size:90px 90px;
}
.journey-track{ position:relative; display:flex; align-items:flex-start; justify-content:space-between; max-width:620px; margin:0 auto 18px; }
.journey-line{ position:absolute; right:5%; left:5%; top:9px; height:2px; background:repeating-linear-gradient(90deg, var(--gold-dim) 0 6px, transparent 6px 12px); }
.stop{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; }
.stop .dot{ width:20px; height:20px; border-radius:50%; background:var(--bg-deep-2); border:2px solid var(--gold-dim); transition:.4s all; }
.stop.active .dot{ background:var(--gold-soft); border-color:var(--gold-soft); box-shadow:0 0 0 5px rgba(230,200,102,.18), 0 0 16px rgba(230,200,102,.55); }
.stop span.lbl{ font-size:12px; color:#cfc7ac; text-align:center; }
.stop.active span.lbl{ color:var(--gold-soft); font-weight:700; }
.journey-contact{ text-align:center; color:#cfc7ac; font-size:14px; padding:6px 0 14px; }

.price-bubble{ text-align:center; position:relative; z-index:2; }
.price-bubble .amount{ font-size:clamp(24px,4vw,32px); font-weight:900; color:var(--gold-soft); transition:.35s transform, .35s opacity; }
.price-bubble .amount.pulse{ animation:pulse .5s ease; }
@keyframes pulse{ 0%{transform:scale(.9); opacity:.4;} 60%{transform:scale(1.04);} 100%{transform:scale(1); opacity:1;} }
.price-bubble .cap{ font-size:13px; color:#b9b096; margin-top:4px; }
.price-bubble .lantern{ font-size:20px; display:inline-block; margin-inline-end:6px; filter:drop-shadow(0 0 6px rgba(230,200,102,.7)); animation:flicker 2.4s infinite ease-in-out; }
@keyframes flicker{ 0%,100%{opacity:1;} 50%{opacity:.72;} }

/* ---------- Jalali date picker ---------- */
.picker-wrap{ position:relative; }
.picker-btn{
  width:100%; text-align:right; padding:13px 14px; border-radius:12px; border:1.5px solid #ded4b8;
  background:#fffdf8 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b3d2e' stroke-width='2'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 10h18M8 3v4M16 3v4'/></svg>") left 14px center / 18px no-repeat;
  font-family:inherit; font-size:15px; color:var(--ink); cursor:pointer; transition:.2s all;
}
.picker-btn.placeholder{ color:#9a927c; }
.picker-btn:focus, .picker-btn.open{ outline:none; border-color:var(--green-mid); box-shadow:0 0 0 4px rgba(21,92,65,.14); }
/* ---------- Shared picker modal (fully visible, never clipped) ---------- */
.picker-overlay{
  display:none; position:fixed; inset:0; z-index:9999; padding:20px;
  background:rgba(11,19,16,.6); backdrop-filter:blur(3px);
  align-items:center; justify-content:center;
}
.picker-overlay.show{ display:flex; animation:fadeUp .2s ease both; }
.picker-modal{
  width:100%; max-width:340px; max-height:88vh; overflow-y:auto;
  background:#fffdf8; border-radius:20px; box-shadow:var(--shadow);
  border-top:4px solid var(--gold); padding:22px 20px 24px;
}
.picker-modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.picker-modal-head h3{ margin:0; font-size:16.5px; font-weight:800; color:var(--green-deep); }
.picker-close{
  width:30px; height:30px; border-radius:9px; border:1px solid var(--line); background:#fff; color:var(--muted);
  font-size:18px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s all;
}
.picker-close:hover{ background:var(--maroon); color:#fff; border-color:var(--maroon); }

/* --- Jalali calendar (inside modal) --- */
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cal-head .nav-btn{
  width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--green-deep); font-size:16px; transition:.2s all;
}
.cal-head .nav-btn:hover{ background:var(--green-deep); color:var(--gold-soft); border-color:var(--green-deep); }
.cal-head .my{ font-weight:800; color:var(--green-deep); font-size:15.5px; }
.cal-week{ display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:6px; }
.cal-week span{ text-align:center; font-size:12px; color:var(--muted); font-weight:700; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-grid button{
  aspect-ratio:1; min-height:38px; border:none; background:transparent; border-radius:10px; cursor:pointer; font-size:14px;
  color:var(--ink); font-family:inherit; font-weight:600; transition:.15s all;
}
.cal-grid button:hover{ background:var(--green-soft); }
.cal-grid button.today{ box-shadow:inset 0 0 0 1.5px var(--gold-dim); }
.cal-grid button.sel{ background:var(--green-deep); color:var(--gold-soft); font-weight:800; }
.cal-grid button:empty{ pointer-events:none; }
.cal-foot{ text-align:center; margin-top:12px; }
.cal-foot button{
  border:none; background:none; color:var(--green-mid); font-size:13.5px; font-weight:700; cursor:pointer; padding:8px 14px;
}
.cal-foot button:hover{ text-decoration:underline; }

/* --- Analog time picker (inside dark modal) --- */
#timeModal{ background:linear-gradient(180deg,#132119,#0b1310); border-top-color:var(--gold); }
#timeModal .picker-modal-head h3{ color:var(--gold-soft); }
#timeModal .picker-close{ background:transparent; border-color:rgba(230,200,102,.3); color:var(--gold-soft); }
#timeModal .picker-close:hover{ background:rgba(230,200,102,.18); border-color:var(--gold-soft); }

.time-digital{
  font-family:'Orbitron', monospace; font-size:40px; font-weight:700; letter-spacing:2px; text-align:center;
  color:var(--gold-soft); margin-bottom:14px; text-shadow:0 0 14px rgba(230,200,102,.55), 0 0 2px rgba(230,200,102,.8);
}
.ampm-toggle{ display:flex; gap:8px; justify-content:center; margin-bottom:16px; }
.ampm-btn{
  padding:8px 20px; border-radius:20px; border:1.5px solid rgba(230,200,102,.3); background:transparent;
  color:#cfc7ac; font-size:13px; font-weight:700; cursor:pointer; transition:.2s all; font-family:inherit;
}
.ampm-btn:hover{ border-color:var(--gold-soft); }
.ampm-btn.active{ background:var(--gold-soft); color:#1b1508; border-color:var(--gold-soft); }

.clock-step-label{ text-align:center; color:#cfc7ac; font-size:13px; margin-bottom:16px; }

.clock-face{
  position:relative; width:240px; height:240px; max-width:80vw; max-height:80vw; margin:0 auto 20px; border-radius:50%;
  background:radial-gradient(circle at 50% 42%, #17281f, #0b1310 75%); border:1.5px solid rgba(230,200,102,.25);
}
.clock-num{
  position:absolute; top:0; left:0; width:38px; height:38px; margin:-19px; border-radius:50%; border:none;
  background:transparent; color:#e7e2d3; font-size:14.5px; font-weight:700; cursor:pointer; font-family:inherit;
  display:flex; align-items:center; justify-content:center; transition:.15s all; z-index:2;
}
.clock-num:hover{ background:rgba(230,200,102,.18); }
.clock-num.selected{ background:var(--gold-soft); color:#1b1508; box-shadow:0 0 0 4px rgba(230,200,102,.22); }
.clock-center{
  position:absolute; top:50%; left:50%; width:10px; height:10px; margin:-5px; border-radius:50%;
  background:var(--gold-soft); z-index:3;
}
.clock-hand{
  position:absolute; top:50%; left:50%; background:var(--gold-soft); border-radius:4px; z-index:1;
  transform-origin:50% 100%; transition:.25s transform;
}
.hour-hand{ width:5px; height:30%; margin-top:-30%; margin-left:-2.5px; }
.minute-hand{ width:4px; height:42%; margin-top:-42%; margin-left:-2px; background:var(--gold); }

.picker-modal-actions{ display:flex; gap:10px; justify-content:center; margin-top:4px; }
.picker-modal-actions button{
  padding:10px 24px; border-radius:10px; border:1.5px solid rgba(230,200,102,.35); background:transparent;
  color:var(--gold-soft); font-size:14px; font-weight:700; cursor:pointer; transition:.2s all; font-family:inherit;
}
.picker-modal-actions button.primary{ background:var(--gold-soft); color:#1b1508; border-color:var(--gold-soft); }
.picker-modal-actions button:hover{ filter:brightness(1.1); }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* ---------- Submit ---------- */
.submit-btn{
  width:100%; padding:17px; border:none; border-radius:14px; background:linear-gradient(135deg, var(--gold-soft), var(--gold));
  color:#1b1508; font-weight:800; font-size:17px; cursor:pointer; transition:.25s transform, .25s box-shadow;
  box-shadow:0 12px 26px -8px rgba(201,162,39,.55); margin-top:6px;
}
.submit-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -8px rgba(201,162,39,.65); }
.submit-btn:disabled{ opacity:.6; cursor:progress; transform:none; }
.note{ font-size:13px; color:var(--muted); text-align:center; margin-top:12px; }
.error-msg{ color:var(--maroon); font-size:13.5px; text-align:center; margin-top:10px; display:none; }

.foot{ text-align:center; padding:40px 20px 60px; color:#a79f86; font-size:13.5px; }
.foot .ar{ font-family:'Amiri', serif; font-style:italic; color:var(--gold-dim); font-size:17px; display:block; margin-bottom:10px; }

.success-panel{ text-align:center; padding:30px 10px 10px; animation:fadeUp .5s ease both; }
.success-panel .check{
  width:74px; height:74px; border-radius:50%; background:var(--green-deep); color:var(--gold-soft);
  font-size:36px; display:flex; align-items:center; justify-content:center; margin:0 auto 20px;
}
.success-panel h3{ margin:0 0 12px; font-size:22px; color:var(--green-deep); }
.success-panel p{ color:var(--muted); font-size:15px; max-width:440px; margin:0 auto; }
.success-panel .lantern{ font-size:20px; margin-inline-end:6px; }

/* ---------- کد پیگیری در پیام موفقیت ---------- */
.track-code{
  display:inline-block; background:#eef6f0; border:1.5px dashed var(--green-mid);
  border-radius:12px; padding:10px 22px; margin:6px auto 14px !important;
  font-size:15px; color:var(--green-deep) !important;
}
.track-code b{ font-size:19px; letter-spacing:1px; }