/* ==========================================================================
   1. VARIABLES & CORE SETTINGS
   ========================================================================== */
:root {
  --primary-bg: #061816;
  --surface: #0F3D38;
  --text-primary: #F5F0E8;
  --accent-gold: #D4B978;
  --accent-gold-light: #E8D5A8;
  --accent-gold-dark: #B8956A;
  --muted: #9AABA4;
}

cap-widget {
  --cap-background: rgba(10, 10, 10, 0.35);
  --cap-border-color: rgba(212, 185, 120, 0.25);
  --cap-border-radius: 14px;
  --cap-color: #e7d3a2;
  --cap-checkbox-size: 26px;
  --cap-checkbox-border: 1px solid rgba(212,185,120,0.4);
  --cap-checkbox-background: rgba(0,0,0,0.2);
  --cap-spinner-color: var(--accent-gold);
  --cap-spinner-background-color: rgba(212,185,120,0.15);
  --cap-font: "system-ui";
}

body {
  font-family: 'IRANSans-web', sans-serif;
  background-color: var(--primary-bg);
  color: var(--text-primary);
  overflow-x: hidden;
}

[x-cloak] { display: none !important; }

/* ==========================================================================
   2. FIXES & PERFORMANCE (Autofill & Motion)
   ========================================================================== */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus { 
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 0 0 1000px #0f0f0f inset !important;
  -webkit-box-shadow: 0 0 0 1000px #0f0f0f inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

@media (prefers-reduced-motion: reduce) {
  .logo-float, .orb, .islamic-pattern { animation: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   3. SCROLLBARS (Sleek & Unified)
   ========================================================================== */
::-webkit-scrollbar, .custom-scrollbar::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--primary-bg); }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.01); }
::-webkit-scrollbar-thumb, .custom-scrollbar::-webkit-scrollbar-thumb { 
  background: rgba(212, 185, 120, 0.2); 
  border-radius: 10px; 
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-gold); }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(212, 185, 120, 0.4); }

/* ==========================================================================
   4. BACKGROUNDS, ORBS & VISUAL PATTERNS (رنگ‌های فابریک تو)
   ========================================================================== */
.spiritual-glow {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(212,185,120,0.16) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(15,61,56,0.5) 0%, transparent 55%);
}

.islamic-pattern {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.010; /* غلظت رنگ اصلی خودت */
  background-color: #1c2833;
  background-image:
    linear-gradient(67.5deg, #16a085 10%, transparent 10%),
    linear-gradient(157.5deg, #16a085 10%, transparent 10%),
    linear-gradient(67.5deg, transparent 90%, #16a085 90%),
    linear-gradient(157.5deg, transparent 90%, #16a085 90%),
    linear-gradient(22.5deg, #16a085 10%, transparent 10%),
    linear-gradient(112.5deg, #16a085 10%, transparent 10%),
    linear-gradient(22.5deg, transparent 90%, #16a085 90%),
    linear-gradient(112.5deg, transparent 90%, #16a085 90%),
    linear-gradient(22.5deg, transparent 33%, rgba(213,216,220,0.9) 33%, rgba(213,216,220,0.9) 36%, transparent 36%, transparent 64%, rgba(213,216,220,0.9) 64%, rgba(213,216,220,0.9) 67%, transparent 67%),
    linear-gradient(-22.5deg, transparent 33%, rgba(213,216,220,0.9) 33%, rgba(213,216,220,0.9) 36%, transparent 36%, transparent 64%, rgba(213,216,220,0.9) 64%, rgba(213,216,220,0.9) 67%, transparent 67%),
    linear-gradient(112.5deg, transparent 33%, rgba(213,216,220,0.9) 33%, rgba(213,216,220,0.9) 36%, transparent 36%, transparent 64%, rgba(213,216,220,0.9) 64%, rgba(213,216,220,0.9) 67%, transparent 67%),
    linear-gradient(-112.5deg, transparent 33%, rgba(213,216,220,0.9) 33%, rgba(213,216,220,0.9) 36%, transparent 36%, transparent 64%, rgba(213,216,220,0.9) 64%, rgba(213,216,220,0.9) 67%, transparent 67%);
  background-size: 250px 250px;
  background-position: -100px 150px, -150px 150px, -150px 100px, -100px 100px, -150px 100px, -100px 100px, -100px 150px, -150px 150px, 0 0, 0 0, 0 0, 0 0;
}

.orb { position: fixed; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; transform: translateZ(0); }
.orb-1 { width: 400px; height: 400px; top: -10%; right: -5%; background: rgba(212,185,120,0.05); }
.orb-2 { width: 300px; height: 300px; bottom: 5%; left: -10%; background: rgba(15,61,56,0.45); }

/* ==========================================================================
   5. UI COMPONENTS & CARDS
   ========================================================================== */
.text-gold-gradient {
  background: linear-gradient(135deg, var(--accent-gold-light), var(--accent-gold), var(--accent-gold-dark));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.station-badge {
  display: inline-flex; align-items: center; padding: 0.35rem 1rem; border-radius: 9999px;
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em;
  color: var(--accent-gold); background: rgba(212,185,120,0.07); border: 1px solid rgba(212,185,120,0.16);
}

.glass-card {
  background: linear-gradient(145deg, rgba(15,61,56,0.85) 0%, rgba(6,24,22,0.7) 100%);
  backdrop-filter: blur(20px) saturate(1.35); -webkit-backdrop-filter: blur(20px) saturate(1.35);
  border: 1px solid rgba(245,240,232,0.07);
  box-shadow: 0 24px 48px -14px rgba(0,0,0,0.65);
  position: relative;
}
.glass-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 45%); pointer-events: none;
}

.rule-card { position: relative; overflow: hidden; }
.rule-card--highlight { border-color: rgba(212,185,120,0.28) !important; }
.rule-card--mandatory { border-color: rgba(220,140,100,0.22) !important; }
.rule-card--info { border-color: rgba(212,185,120,0.12) !important; }

.ticket-card {
  background: linear-gradient(155deg, rgba(15,61,56,0.9), rgba(6,24,22,0.95));
  border: 1px solid rgba(212,185,120,0.22); border-radius: 1.25rem; padding: 1.5rem; position: relative; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
}
.ticket-card::before {
  content: ''; position: absolute; top: 0; right: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, #a88b4a, #d4b978, #e8d5a8, #d4b978, #a88b4a);
}
.ticket-notch {
  position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%;
  background: var(--primary-bg); border: 1px solid rgba(212,185,120,0.15); transform: translateY(-50%);
}
.ticket-notch-left { left: -8px; }
.ticket-notch-right { right: -8px; }

/* ==========================================================================
   6. FORMS, INPUTS & BUTTONS
   ========================================================================== */
input:focus, select:focus {
  outline: none !important;
  border-bottom-color: var(--accent-gold) !important;
  box-shadow: 0 4px 18px -6px rgba(212,185,120,0.25) !important;
}

.btn-primary, .btn-outline, .btn-ghost { min-height: 3.25rem; }
.btn-primary {
  background: linear-gradient(135deg, var(--accent-gold-light), var(--accent-gold), var(--accent-gold-dark));
  position: relative; overflow: hidden;
  box-shadow: 0 4px 22px -6px rgba(212,185,120,0.38);
}
.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
.btn-outline { transition: all 0.3s ease; }
.btn-ghost { min-height: 3rem; transition: all 0.25s ease; }

.otp-input { letter-spacing: 0.55em; font-variant-numeric: tabular-nums; }
.field-hint { font-size: 0.68rem; color: rgba(154,171,164,0.65); margin-top: 0.35rem; }

/* ==========================================================================
   7. NAVIGATION, HEADERS & MODALS
   ========================================================================== */
.header-glass {
  background: rgba(6,24,22,0.88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(212,185,120,0.08);
}
.nav-link::after {
  content: ''; position: absolute; bottom: -3px; right: 0; left: 0; height: 1px;
  background: var(--accent-gold); transform: scaleX(0); transition: transform 0.3s;
}
.nav-link.active::after, .nav-link:hover::after { transform: scaleX(1); }

.mobile-sticky-cta {
  background: rgba(6,24,22,0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(212,185,120,0.1); padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
@media (min-width: 768px) { .mobile-sticky-cta { display: none !important; } }

.mobile-nav-panel { background: #061816; }

.modal-backdrop { background: rgba(2,12,11,0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal-panel {
  background: linear-gradient(160deg, rgba(15,61,56,0.95), rgba(6,24,22,0.98));
  border: 1px solid rgba(212,185,120,0.15); box-shadow: 0 32px 64px rgba(0,0,0,0.5);
}
.toast-panel {
  background: rgba(15,61,56,0.95); border: 1px solid rgba(212,185,120,0.2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.toast-panel.error { border-color: rgba(220,120,100,0.35); }
.toast-panel.success { border-color: rgba(212,185,120,0.35); }

/* ==========================================================================
   8. JOURNEY RAIL & STEPS
   ========================================================================== */
.progress-line {
  background: linear-gradient(90deg, var(--accent-gold), rgba(212,185,120,0.2));
  box-shadow: 0 0 10px rgba(212,185,120,0.3);
}
.step-active { box-shadow: 0 0 0 3px rgba(212,185,120,0.12), 0 0 18px rgba(212,185,120,0.22); }

.journey-rail {
  display: flex; align-items: center; justify-content: center; gap: 0;
  padding: 0.5rem 0 1.25rem; max-width: 36rem; margin: 0 auto 1.5rem;
}
.journey-node { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
.journey-node:not(:last-child)::after {
  content: ''; position: absolute; top: 0.85rem; left: -50%; width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,185,120,0.15), transparent); z-index: 0;
}
.journey-dot {
  width: 1.75rem; height: 1.75rem; border-radius: 9999px; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 700; border: 1px solid rgba(212,185,120,0.2);
  background: rgba(15,61,56,0.6); color: rgba(212,185,120,0.35); transition: all 0.4s ease;
}
.journey-dot.is-done { background: linear-gradient(135deg, #d4b978, #a88b4a); color: #061816; border-color: transparent; }
.journey-dot.is-current { box-shadow: 0 0 18px rgba(212,185,120,0.35); border-color: rgba(212,185,120,0.5); color: #d4b978; }
.journey-label { margin-top: 0.4rem; font-size: 0.62rem; letter-spacing: 0.08em; color: rgba(154,171,164,0.55); }
.journey-label.is-current { color: #d4b978; font-weight: 600; }

.time-badge { background: linear-gradient(135deg, rgba(212,185,120,0.06), rgba(15,61,56,0.3)); border: 1px solid rgba(212,185,120,0.16); }
.tracking-box { background: linear-gradient(135deg, rgba(15,61,56,0.55), rgba(6,24,22,0.85)); border: 1px solid rgba(212,185,120,0.18); }
.status-pill { background: rgba(212,185,120,0.08); border: 1px solid rgba(212,185,120,0.22); color: var(--accent-gold-light); }
.review-box { background: rgba(0,0,0,0.22); border: 1px solid rgba(212,185,120,0.08); }
.footer-glass { background: linear-gradient(180deg, transparent, rgba(0,0,0,0.28)); border-top: 1px solid rgba(212,185,120,0.06); }

.conditions-flow-bar { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.68rem; color: var(--muted); margin-bottom: 1.25rem; }
.conditions-flow-dot { width: 0.55rem; height: 0.55rem; border-radius: 9999px; border: 1px solid rgba(212,185,120,0.35); }
.conditions-flow-dot.is-active { background: linear-gradient(135deg, #d4b978, #a88b4a); border-color: transparent; box-shadow: 0 0 10px rgba(212,185,120,0.35); }
.conditions-flow-line { width: 2rem; height: 1px; background: rgba(212,185,120,0.2); }

/* ==========================================================================
   9. ANIMATIONS & ACCESSIBILITY
   ========================================================================== */
.loader-spin {
  width: 1.1rem; height: 1.1rem; border: 2px solid rgba(6,24,22,0.3);
  border-top-color: var(--on-primary, #061816); border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes lf { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.logo-float { 
  animation: lf 6s ease-in-out infinite; 
  will-change: transform; transform: translateZ(0);
}

.skip-link {
  position: absolute; top: -100px; right: 1rem; z-index: 99999; padding: 0.65rem 1.25rem; border-radius: 0.75rem;
  background: var(--accent-gold); color: var(--primary-bg); font-weight: 700; font-size: 0.85rem; text-decoration: none; transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; outline: 2px solid #fff; outline-offset: 2px; }