/* ============================================================
   rqbtl.ir design system — Persian-first fintech
   Light + dark color modes (Bootstrap 5.3 `data-bs-theme`).
   Palette: petrol green (trust/money) + saffron gold (CTA).
   ============================================================ */

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

/* ------------------------------------------------ light tokens */
:root,
[data-bs-theme="light"] {
  --ob-primary: #0e5a4a;        /* button/badge fill — white text 8.5:1 */
  --ob-primary-hover: #0a4237;
  --ob-primary-soft: #e3efec;   /* tinted chips/avatars */
  --ob-link: #0d5445;           /* links & accent text — 8:1 on surface */
  --ob-accent: #f2a33c;         /* saffron CTA — dark text 7:1 */
  --ob-accent-hover: #e08f24;
  --ob-accent-ink: #3a2604;
  --ob-ink: #12211d;
  --ob-muted: #5b6d66;          /* 5.1:1 on card */
  --ob-surface: #f4f7f6;        /* page background */
  --ob-surface-2: #ebf0ee;      /* soft panels (bg-light) */
  --ob-card: #ffffff;
  --ob-border: #e0e7e4;
  --ob-danger: #c0392b;
  --ob-success: #1d7a4f;
  --ob-radius: 1rem;
  --ob-shadow: 0 6px 24px rgba(14, 90, 74, 0.08);

  --ob-hero-glow: rgba(242, 163, 60, 0.14);
  --ob-hero-top: #ffffff;

  --ob-badge-excellent-bg: #d9f2e5; --ob-badge-excellent-fg: #0c6b3d;
  --ob-badge-good-bg: #e3efec;      --ob-badge-good-fg: #0d5445;
  --ob-badge-fair-bg: #eef1f0;      --ob-badge-fair-fg: #5b6d66;
  --ob-badge-expensive-bg: #fdeaea; --ob-badge-expensive-fg: #c0392b;

  --ob-disclaimer-bg: #fff8ec; --ob-disclaimer-border: #f4d9a8; --ob-disclaimer-fg: #7a5410;

  --bs-body-font-family: "Vazirmatn", Tahoma, sans-serif;
}

/* ------------------------------------------------ dark tokens */
[data-bs-theme="dark"] {
  --ob-primary: #1b8a6f;        /* white text 4.7:1 */
  --ob-primary-hover: #23a183;
  --ob-primary-soft: #14352d;
  --ob-link: #5cc9a9;           /* 8:1 on surface */
  --ob-accent: #f2a33c;
  --ob-accent-hover: #ffb64f;
  --ob-accent-ink: #2b1c02;
  --ob-ink: #e6edea;
  --ob-muted: #9cb0a8;          /* 6.8:1 on card */
  --ob-surface: #0e1513;
  --ob-surface-2: #1c2724;
  --ob-card: #172120;
  --ob-border: #2b3834;
  --ob-danger: #e57368;
  --ob-success: #5cc793;
  --ob-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);

  --ob-hero-glow: rgba(242, 163, 60, 0.07);
  --ob-hero-top: #121b18;

  --ob-badge-excellent-bg: #143c2b; --ob-badge-excellent-fg: #6fdfa8;
  --ob-badge-good-bg: #14352d;      --ob-badge-good-fg: #5cc9a9;
  --ob-badge-fair-bg: #232e2a;      --ob-badge-fair-fg: #9cb0a8;
  --ob-badge-expensive-bg: #3c1f1c; --ob-badge-expensive-fg: #ef9a91;

  --ob-disclaimer-bg: #2b2314; --ob-disclaimer-border: #5a4a22; --ob-disclaimer-fg: #e6c684;
}

/* bridge our tokens into Bootstrap's runtime variables (both themes) */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
  --bs-body-bg: var(--ob-surface);
  --bs-body-color: var(--ob-ink);
  --bs-secondary-color: var(--ob-muted);
  --bs-border-color: var(--ob-border);
  --bs-link-color: var(--ob-link);
  --bs-link-hover-color: var(--ob-primary-hover);
  --bs-tertiary-bg: var(--ob-surface-2);
}

/* ------------------------------------------------ base & rhythm */
body {
  font-family: "Vazirmatn", Tahoma, sans-serif;
  background: var(--ob-surface);
  color: var(--ob-ink);
  line-height: 1.8;               /* comfortable rhythm for Persian text */
}

main { min-height: 62vh; }

h1, h2, h3, h4, h5 { font-weight: 700; line-height: 1.45; }

.text-primary, .link-primary { color: var(--ob-link) !important; }
.bg-primary { background-color: var(--ob-primary) !important; }
.text-success { color: var(--ob-success) !important; }
.text-danger { color: var(--ob-danger) !important; }

/* bg-white / bg-light are used as "panel" colors across templates —
   remap them per theme instead of hunting them down page by page */
.bg-white { background-color: var(--ob-card) !important; }
.bg-light { background-color: var(--ob-surface-2) !important; }

/* ------------------------------------------------ buttons */
.btn { --bs-btn-padding-y: 0.55rem; --bs-btn-padding-x: 1.15rem; }
.btn-sm { --bs-btn-padding-y: 0.35rem; --bs-btn-padding-x: 0.8rem; }
.btn-lg { --bs-btn-padding-y: 0.7rem; --bs-btn-padding-x: 1.5rem; }

.btn-primary {
  --bs-btn-bg: var(--ob-primary);
  --bs-btn-border-color: var(--ob-primary);
  --bs-btn-hover-bg: var(--ob-primary-hover);
  --bs-btn-hover-border-color: var(--ob-primary-hover);
  --bs-btn-active-bg: var(--ob-primary-hover);
  --bs-btn-active-border-color: var(--ob-primary-hover);
  --bs-btn-focus-shadow-rgb: 14, 90, 74;
  border-radius: 0.75rem;
  font-weight: 600;
}

.btn-accent {
  --bs-btn-bg: var(--ob-accent);
  --bs-btn-border-color: var(--ob-accent);
  --bs-btn-hover-bg: var(--ob-accent-hover);
  --bs-btn-hover-border-color: var(--ob-accent-hover);
  --bs-btn-color: var(--ob-accent-ink);
  --bs-btn-hover-color: var(--ob-accent-ink);
  --bs-btn-active-color: var(--ob-accent-ink);
  border-radius: 0.75rem;
  font-weight: 700;
}

.btn-outline-primary {
  --bs-btn-color: var(--ob-link);
  --bs-btn-border-color: var(--ob-primary);
  --bs-btn-hover-bg: var(--ob-primary);
  --bs-btn-hover-border-color: var(--ob-primary);
  --bs-btn-hover-color: #fff;
  border-radius: 0.75rem;
  font-weight: 600;
}

/* ------------------------------------------------ cards & panels */
.card {
  border: 1px solid var(--ob-border);
  border-radius: var(--ob-radius);
  box-shadow: var(--ob-shadow);
  background-color: var(--ob-card);
}

/* ---------- official rate board (signature element) ---------- */
.rate-board {
  background: linear-gradient(135deg, #0a4237, #0e5a4a);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--ob-radius);
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.rate-board .rate-label { font-size: 0.9rem; opacity: 0.85; }
.rate-board .rate-value {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #f2a33c;
  letter-spacing: 0.02em;
}
.rate-strip {
  background: #0a4237;
  color: #e9f3f0;
  font-size: 0.875rem;
  padding: 0.45rem 0;
}
.rate-strip .rate-strip-value { color: #f2a33c; font-weight: 700; }

/* ------------------------------------------------ hero */
.hero {
  background:
    radial-gradient(1100px 500px at 85% -10%, var(--ob-hero-glow), transparent 60%),
    linear-gradient(180deg, var(--ob-hero-top) 0%, var(--ob-surface) 100%);
  padding: clamp(2.75rem, 6vw, 4.25rem) 0 clamp(2.25rem, 5vw, 3.25rem);
}
.hero h1 {
  font-weight: 800;
  font-size: clamp(1.7rem, 4.5vw, 2.7rem);
  line-height: 1.55;
}
.hero .lead { color: var(--ob-muted); }

/* ------------------------------------------------ stat counters */
.stat-tile { text-align: center; padding: 1.4rem 0.75rem; }
.stat-tile .stat-value {
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight: 800;
  color: var(--ob-link);
  font-variant-numeric: tabular-nums;
}
.stat-tile .stat-label { color: var(--ob-muted); font-size: 0.9rem; margin-top: 0.25rem; }

/* ------------------------------------------------ process timeline */
.process-timeline { position: relative; }
.process-timeline .step { position: relative; padding-inline-start: 3.25rem; padding-bottom: 1.9rem; }
.process-timeline .step:last-child { padding-bottom: 0; }
.process-timeline .step::before {
  content: "";
  position: absolute;
  inset-inline-start: 1.19rem;
  top: 2.6rem;
  bottom: 0;
  width: 2px;
  background: var(--ob-primary-soft);
}
.process-timeline .step:last-child::before { display: none; }
.process-timeline .step-icon {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--ob-primary-soft);
  color: var(--ob-link);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

/* ------------------------------------------------ listing / deal cards */
.deal-badge { font-size: 0.78rem; font-weight: 700; border-radius: 0.6rem; padding: 0.3rem 0.7rem; }
.deal-badge.excellent { background: var(--ob-badge-excellent-bg); color: var(--ob-badge-excellent-fg); }
.deal-badge.good { background: var(--ob-badge-good-bg); color: var(--ob-badge-good-fg); }
.deal-badge.fair { background: var(--ob-badge-fair-bg); color: var(--ob-badge-fair-fg); }
.deal-badge.expensive { background: var(--ob-badge-expensive-bg); color: var(--ob-badge-expensive-fg); }

.trust-score {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-weight: 700; color: var(--ob-link);
}

/* ------------------------------------------------ opportunity meter */
.opportunity-meter .meter-track {
  height: 0.65rem; border-radius: 1rem; background: var(--ob-surface-2); overflow: hidden;
}
.opportunity-meter .meter-fill {
  height: 100%;
  border-radius: 1rem;
  background: linear-gradient(90deg, var(--ob-primary), var(--ob-accent));
}

/* ------------------------------------------------ navbar */
.navbar-ob {
  background: var(--ob-card);
  box-shadow: 0 1px 0 var(--ob-border);
  padding-block: 0.7rem;
}
.navbar-ob .navbar-nav .nav-link {
  font-weight: 500;
  color: var(--ob-ink);
  padding-inline: 0.85rem;
}
.navbar-ob .nav-link.active, .navbar-ob .nav-link:hover { color: var(--ob-link); }
.navbar-ob .navbar-brand { color: var(--ob-link); }

.theme-toggle {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ob-border);
  border-radius: 0.75rem;
  background: transparent;
  color: var(--ob-ink);
  font-size: 1.05rem;
  transition: background-color 0.15s ease;
}
.theme-toggle:hover { background: var(--ob-surface-2); color: var(--ob-link); }
/* show the icon of the mode the button switches TO */
[data-bs-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-bs-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ------------------------------------------------ footer */
.footer-ob {
  background: #101a17;
  color: #b9c4c0;
  padding: 3.5rem 0 2rem;
  margin-top: 4.5rem;
  border-top: 1px solid var(--ob-border);
}
.footer-ob a { color: #dfe7e4; text-decoration: none; }
.footer-ob a:hover { color: var(--ob-accent); }
.footer-ob .footer-title { color: #fff; font-weight: 700; margin-bottom: 1rem; }
.footer-ob hr { border-color: #33403c; opacity: 1; }

/* ------------------------------------------------ dashboard */
.dash-sidebar .list-group-item {
  border: none; border-radius: 0.75rem !important; margin-bottom: 0.3rem;
  padding: 0.6rem 0.9rem;
  color: var(--ob-ink); font-weight: 500;
  background: transparent;
}
.dash-sidebar .list-group-item.active {
  background: var(--ob-primary-soft); color: var(--ob-link);
}
.dash-sidebar .list-group-item:hover { background: var(--ob-surface-2); }

/* ------------------------------------------------ tables & forms */
.table > :not(caption) > * > * {
  padding: 0.65rem 0.75rem;      /* default .5rem is cramped for Persian text */
  background-color: transparent;
}
.form-label { margin-bottom: 0.4rem; font-weight: 500; }
.form-control, .form-select {
  border-radius: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-color: var(--ob-border);
}
.form-control:focus, .form-select:focus {
  border-color: var(--ob-primary);
  box-shadow: 0 0 0 0.2rem rgba(27, 138, 111, 0.15);
}
.form-text { color: var(--ob-muted); }

/* ------------------------------------------------ misc */
.section-title { font-weight: 800; margin-bottom: 0.5rem; }
.section-sub { color: var(--ob-muted); margin-bottom: 2.25rem; }
.disclaimer-box {
  background: var(--ob-disclaimer-bg);
  border: 1px solid var(--ob-disclaimer-border);
  border-radius: 0.75rem;
  color: var(--ob-disclaimer-fg);
  font-size: 0.875rem;
  padding: 0.9rem 1.1rem;
  line-height: 1.9;
}
.avatar-circle {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--ob-primary-soft); color: var(--ob-link);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
  flex: 0 0 auto;
}
.accordion-button { font-weight: 700; }
.accordion-button:not(.collapsed) {
  background: var(--ob-primary-soft);
  color: var(--ob-link);
  box-shadow: none;
}

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