/* Poppins is loaded by a <link> in each page head (faster than @import). */
/* Badals components. Every value comes from tokens.css. Prefix: bd- */
.bd-root, .bd-root * { box-sizing: border-box; }
[class*="bd-"], [class*="bd-"]::before, [class*="bd-"]::after { box-sizing: border-box; }
body { font-family: var(--font-sans); color: var(--ink); background: var(--canvas); margin: 0; }
[dir="rtl"], .bd-ar { font-family: var(--font-arabic); }

/* ---------- Responsive spacing: the section rhythm steps down on smaller screens ---------- */
@media (max-width: 768px) { :root { --space-section: 48px; --space-hero: 56px; --space-chapter-x: 24px; } }
@media (max-width: 480px) { :root { --space-section: 32px; --space-hero: 40px; --space-chapter-x: 16px; } }

/* ---------- Twin dots (the corner motif, from the logo's two dots) ---------- */
.bd-dots { display: inline-flex; gap: var(--space-xs); line-height: 0; }
.bd-dots i { width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-full); background: var(--badals-flame); display: block; }
.bd-dots-lg i { width: 12px; height: 12px; }
.bd-dots-corner { position: absolute; top: 12px; left: 12px; }
[dir="rtl"] .bd-dots-corner { left: auto; right: 12px; }

/* ---------- Buttons ---------- */
.bd-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  height: var(--size-control); padding: 11px var(--space-xl); border-radius: var(--radius-sm);
  font: 600 16px/1.25 var(--font-sans); border: 2px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap; transition: background-color .12s, border-color .12s, color .12s; }
.bd-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bd-btn-lg { height: 52px; font-size: 18px; padding: 13px 28px; }
.bd-btn-sm { height: 36px; font-size: 14.4px; padding: 8px var(--space-lg); position: relative; }
.bd-btn-sm::after { content: ""; position: absolute; inset: -4px; }
.bd-btn-primary { background: var(--primary); color: var(--on-primary); }
.bd-btn-primary:hover, .bd-btn-primary:active, .bd-btn-primary.is-active { background: var(--primary-active); }
.bd-btn-outline { background: transparent; color: var(--ink); border-color: var(--primary); padding-inline: 13px; }
.bd-btn-outline:hover, .bd-btn-outline:active { background: var(--primary-tint); }
.bd-btn-outline-dark { background: transparent; color: var(--on-dark); border: 1px solid var(--on-dark); padding-inline: 14px; }
.bd-btn-outline-dark:hover, .bd-btn-outline-dark:active { border-color: var(--primary); color: var(--primary); }
.bd-btn-outline-dark:focus-visible { outline-color: var(--primary); }
.bd-btn[disabled], .bd-btn-disabled { background: var(--surface-soft); color: var(--stone); border-color: transparent; cursor: not-allowed; }

.bd-ghost { display: inline-flex; align-items: center; gap: 6px; font: 600 16px/1.25 var(--font-sans);
  color: var(--ink); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.bd-ghost .bd-arrow { color: var(--accent-strong); transition: transform .12s; }
.bd-ghost:hover { text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.bd-ghost:hover .bd-arrow { transform: translateX(3px); }
[dir="rtl"] .bd-ghost .bd-arrow { transform: scaleX(-1); }
.bd-on-dark .bd-ghost { color: var(--primary); }
.bd-on-dark .bd-ghost .bd-arrow { color: var(--primary); }
.bd-ghost:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.bd-link { color: var(--ink); font: inherit; text-decoration: underline; text-decoration-color: var(--link-underline);
  text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bd-link:hover { text-decoration-color: var(--primary-active); }
.bd-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bd-on-dark .bd-link { color: var(--on-dark); }

/* ---------- Pill tabs ---------- */
.bd-tabs { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.bd-tab { font: 600 14.4px/1 var(--font-sans); letter-spacing: 0.144px; padding: 10px 18px; min-height: 44px;
  border-radius: var(--radius-sm); border: 1px solid var(--hairline); background: transparent; color: var(--ink); cursor: pointer; }
.bd-tab:hover { border-color: var(--ink); }
.bd-tab[aria-selected="true"] { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.bd-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Badge ---------- */
.bd-badge { display: inline-flex; align-items: center; gap: 6px; padding: var(--space-xs) 10px; border-radius: var(--radius-sm);
  font: 600 12px/1.43 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; background: var(--surface-soft); color: var(--body); }
.bd-badge-sale { background: var(--badals-flame); color: var(--badals-ink); }
.bd-badge-new { background: var(--primary); color: var(--on-primary); }
.bd-badge-dark { background: var(--surface-dark); color: var(--on-dark); }
.bd-badge-success { background: var(--success-pale); color: var(--success); }
.bd-badge-warning { background: var(--warning-pale); color: var(--warning); }

/* ---------- Inputs ---------- */
.bd-field { display: flex; flex-direction: column; gap: 6px; }
.bd-label { font: 600 14px/1.43 var(--font-sans); color: var(--ink); }
.bd-help { font: 400 12px/1.25 var(--font-sans); color: var(--mute); }
.bd-help.is-error { color: var(--error); }
.bd-input { height: var(--size-control); padding: var(--space-md) var(--space-lg); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); background: var(--canvas); color: var(--ink); font: 400 16px/1.5 var(--font-sans); width: 100%; }
.bd-input::placeholder { color: var(--mute); }
.bd-input:focus, .bd-input.is-focused { outline: none; border: 2px solid var(--focus); padding: 11px 15px; }
.bd-input.is-invalid { border: 2px solid var(--error); padding: 11px 15px; }
.bd-search { position: relative; display: flex; align-items: center; }
.bd-search svg { position: absolute; inset-inline-start: 14px; color: var(--mute); pointer-events: none; }
.bd-search .bd-input { height: var(--size-search); padding-block: 8px; padding-inline: 42px 16px; }
.bd-search .bd-input:focus, .bd-search .bd-input.is-focused { padding-block: 7px; padding-inline: 41px 15px; }

/* ---------- Cards ---------- */
.bd-card { position: relative; background: var(--canvas); color: var(--ink); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); }
.bd-card-feature { padding: var(--space-xxl); gap: var(--space-lg); }
.bd-card .bd-media { aspect-ratio: 1 / 1; width: 100%; max-width: 100%; background: var(--surface-soft); border-radius: var(--radius-sm);
  display: grid; place-items: center; overflow: hidden; color: var(--mute); font: 400 12px/1.25 var(--font-sans); }
.bd-card .bd-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-media-wide { aspect-ratio: 3 / 2 !important; }
.bd-card-title { font: 600 17px/1.47 var(--font-sans); margin: 0; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bd-card-desc { font: 400 15px/1.67 var(--font-sans); color: var(--body); margin: 0; }
.bd-card-meta { font: 400 12px/1.25 var(--font-sans); color: var(--mute); }
.bd-price-row { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.bd-price { font: 600 20px/1.2 var(--font-sans); color: var(--ink); }
.bd-price-old { font: 400 14px/1.2 var(--font-sans); color: var(--mute); text-decoration: line-through; }
.bd-card-foot { margin-top: auto; padding-top: var(--space-sm); display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.bd-card-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.bd-card .bd-dots-corner + .bd-card-badges, .bd-card .bd-dots-corner ~ .bd-media { margin-top: 8px; }
.bd-feature-icon { width: 40px; height: 40px; color: var(--primary); }
.bd-feature-title { font: 600 20px/1.25 var(--font-sans); margin: 0; }
.bd-stat-figure { font: 600 36px/1.25 var(--font-sans); color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.bd-stat-caption { font: 400 16px/1.5 var(--font-sans); color: var(--body); margin: 0; }

/* ---------- Dark chapters ---------- */
.bd-on-dark { background: var(--surface-dark); color: var(--on-dark); }
.bd-hero { position: relative; overflow: hidden; background: var(--surface-dark); color: var(--on-dark);
  padding: var(--space-hero) var(--space-chapter-x); border-radius: var(--radius-none); }
.bd-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .35; }
.bd-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.85) 40%, rgba(0,0,0,.2) 100%); }
[dir="rtl"] .bd-hero-bg::after { background: linear-gradient(270deg, #000 0%, rgba(0,0,0,.85) 40%, rgba(0,0,0,.2) 100%); }
.bd-hero-copy { position: relative; max-width: 620px; display: flex; flex-direction: column; gap: var(--space-lg); }
.bd-eyebrow { font: 600 14px/1.43 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--primary); margin: 0; }
.bd-hero h1 { font: 600 48px/1.25 var(--font-sans); margin: 0; text-wrap: balance; }
[dir="rtl"] .bd-hero h1 { font: 300 48px/1.4 var(--font-arabic); }
.bd-hero-sub { font: 400 20px/1.6 var(--font-sans); color: var(--on-dark-mute); margin: 0; }
.bd-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-sm); }
@media (max-width: 768px) { .bd-hero h1 { font-size: 36px; } .bd-hero-sub { font-size: 18px; } [dir="rtl"] .bd-hero h1 { font-size: 36px; } }
@media (prefers-reduced-motion: reduce) { .bd-root *, .bd-btn, .bd-ghost .bd-arrow, .bd-footer-toggle svg { transition: none !important; } }
@media (max-width: 480px) { .bd-hero h1, [dir="rtl"] .bd-hero h1 { font-size: 32px; } .bd-hero-sub { font-size: 16px; }
  .bd-actions .bd-btn { flex: 1 1 100%; } .bd-hero-bg::after { background: rgba(0,0,0,.8); } }

.bd-cta-strip { background: var(--surface-dark); color: var(--on-dark); padding: var(--space-section) var(--space-chapter-x);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); flex-wrap: wrap; position: relative; }
.bd-cta-strip h2 { font: 600 24px/1.25 var(--font-sans); margin: 0; }
.bd-cta-strip p { font: 400 15px/1.67 var(--font-sans); color: var(--on-dark-mute); margin: 4px 0 0; }
@media (max-width: 480px) { .bd-cta-strip { flex-direction: column; align-items: stretch; gap: var(--space-lg); } .bd-cta-strip .bd-btn { width: 100%; } }

/* ---------- Navigation ---------- */
.bd-utility { height: var(--size-utility-bar); background: var(--surface-dark); color: var(--on-dark-mute);
  display: flex; align-items: center; justify-content: space-between; padding-inline: var(--space-xl); font: 400 12px/1.25 var(--font-sans); gap: var(--space-lg); }
.bd-utility-group { display: flex; gap: var(--space-lg); align-items: center; }
.bd-utility a { color: var(--on-dark); text-decoration: none; }
.bd-utility a:hover { color: var(--primary); }
.bd-utility .bd-accent { color: var(--primary); font-weight: 600; }
.bd-utility-group > * { white-space: nowrap; }
@media (max-width: 640px) {
  .bd-utility { padding-inline: var(--space-lg); }
  .bd-utility .bd-hide-sm { display: none; }
  .bd-utility-group:first-child { min-width: 0; }
  .bd-utility .bd-accent { overflow: hidden; text-overflow: ellipsis; }
}

.bd-nav-wrap { position: relative; background: var(--surface-dark); }
.bd-nav { height: var(--size-nav); background: var(--surface-dark); color: var(--on-dark); display: flex; align-items: center;
  gap: var(--space-xl); padding-inline: var(--space-xl); border-top: 1px solid var(--surface-elevated); }
.bd-nav-logo { height: 30px; width: auto; display: block; }
.bd-nav-links { display: flex; gap: var(--space-xl); list-style: none; margin: 0; padding: 0; }
.bd-nav-links a { color: var(--on-dark); text-decoration: none; font: 600 16px/1.5 var(--font-sans); padding-block: 20px; border-bottom: 2px solid transparent; }
.bd-nav-links a:hover, .bd-nav-links a[aria-current="page"] { border-bottom-color: var(--primary); }
.bd-nav-end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-md); }
.bd-icon-btn { position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center; color: var(--on-dark); background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.bd-icon-btn:hover { color: var(--primary); }
.bd-icon-btn:focus-visible { outline: 2px solid var(--primary); }
.bd-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full);
  background: var(--primary); color: var(--on-primary); font: 600 11px/18px var(--font-sans); text-align: center; }
.bd-nav-menu { display: none; }
.bd-nav-drawer { background: var(--surface-dark); border-top: 1px solid var(--hairline-strong); padding: var(--space-sm) var(--space-lg) var(--space-lg); }
.bd-nav-drawer ul { list-style: none; margin: 0; padding: 0; }
.bd-nav-drawer a { display: flex; align-items: center; min-height: 48px; color: var(--on-dark); text-decoration: none; font: 600 18px/1.4 var(--font-sans);
  border-bottom: 1px solid var(--surface-elevated); padding-inline-start: var(--space-md); border-inline-start: 3px solid transparent; }
.bd-nav-drawer a[aria-current="page"] { border-inline-start-color: var(--primary); }
.bd-nav-drawer a:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
@media (max-width: 900px) {
  .bd-nav-links { display: none; }
  .bd-nav-menu { display: grid; }
  .bd-nav { gap: var(--space-sm); padding-inline: var(--space-sm) var(--space-lg); }
  .bd-nav-end { gap: var(--space-xxs); }
}
@media (min-width: 901px) { .bd-nav-drawer { display: none; } }
@media (max-width: 480px) { .bd-nav-logo { height: 26px; } .bd-nav .bd-nav-cta { display: none; } .bd-nav-end { margin-inline-end: calc(var(--space-sm) * -1); } }

.bd-crumbs { height: var(--size-breadcrumb); background: var(--surface-soft); display: flex; align-items: center; padding-inline: var(--space-xl);
  font: 600 13px/1.43 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--body); gap: 10px; overflow-x: auto; white-space: nowrap; }
.bd-crumbs a { color: var(--body); text-decoration: none; }
.bd-crumbs a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 2px; }
.bd-crumbs .bd-sep { color: var(--mute); }
.bd-crumbs [aria-current] { color: var(--ink); }
[dir="rtl"] .bd-crumbs .bd-sep { transform: scaleX(-1); }

.bd-subnav { height: var(--size-subnav); background: var(--surface-soft); display: flex; align-items: stretch; gap: var(--space-xl);
  padding-inline: var(--space-xl); overflow-x: auto; white-space: nowrap; border-bottom: 1px solid var(--hairline); }
.bd-subnav a { display: flex; align-items: center; font: 600 16px/1.25 var(--font-sans); color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.bd-subnav a[aria-current="true"] { border-bottom-color: var(--primary); }
.bd-subnav a:hover { border-bottom-color: var(--hairline); }

/* ---------- Footer ---------- */
.bd-footer { background: var(--surface-dark); color: var(--on-dark-mute); padding: var(--space-section) var(--space-chapter-x) 0; font: 400 15px/1.67 var(--font-sans); }
.bd-footer-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-xxl); padding-bottom: var(--space-xxl); }
.bd-footer-brand { display: flex; flex-direction: column; gap: var(--space-md); }
.bd-footer-brand img { height: 34px; width: auto; align-self: flex-start; }
.bd-footer h4 { font: 600 16px/1.5 var(--font-sans); color: var(--on-dark); margin: 0 0 var(--space-sm); }
.bd-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bd-footer a { color: var(--on-dark-mute); text-decoration: none; }
.bd-footer a:hover { color: var(--primary); }
.bd-footer-toggle { all: unset; display: flex; width: 100%; align-items: center; justify-content: space-between; box-sizing: border-box; }
.bd-footer-toggle h4 { margin: 0 0 var(--space-sm); }
.bd-footer-toggle svg { display: none; }
@media (max-width: 600px) {
  .bd-footer-top { grid-template-columns: 1fr; gap: 0; padding-bottom: var(--space-lg); }
  .bd-footer-brand { padding-bottom: var(--space-xl); }
  .bd-footer-col { border-top: 1px solid var(--hairline-strong); }
  .bd-footer-toggle { min-height: 52px; cursor: pointer; }
  .bd-footer-toggle h4 { margin: 0; }
  .bd-footer-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
  .bd-footer-toggle svg { display: block; color: var(--on-dark-mute); transform: rotate(90deg); transition: transform .15s; }
  .bd-footer-toggle[aria-expanded="true"] svg { transform: rotate(-90deg); }
  .bd-footer-col ul { gap: 0; padding-bottom: var(--space-md); }
  .bd-footer-col ul[hidden] { display: none; }
  .bd-footer-col a { display: block; padding-block: 10px; }
  .bd-footer-legal { flex-direction: column; gap: var(--space-sm); }
}
.bd-footer-legal { border-top: 1px solid var(--hairline-strong); padding-block: var(--space-lg); display: flex; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap;
  font: 600 10px/1.5 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-mute); }