/*
 * الطازج — the site's own look, on top of Bootstrap 5.3.
 *
 * Bootstrap does the layout, grid, navbar, cards, buttons and dark mode
 * (data-bs-theme); this file only sets the brand: the colours and type the
 * apps ship (tazaj_core: AppColors, IBM Plex Sans Arabic) and a few pieces
 * Bootstrap has no component for.
 */

@font-face { font-family: "Plex Arabic"; src: url("../fonts/plex-arabic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("../fonts/plex-arabic-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("../fonts/plex-arabic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Plex Latin"; src: url("../fonts/plex-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Latin"; src: url("../fonts/plex-latin-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Latin"; src: url("../fonts/plex-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ── Brand tokens (AppColors) ─────────────────────────────────────────── */
:root,
[data-bs-theme="light"] {
  --tz-red: #BF2A1F;
  --tz-red-strong: #A3221A;
  --tz-red-soft: #FBEAE8;
  --tz-gold: #C8962E;
  --tz-gold-soft: #F8F0DE;
  --tz-ink: #1F1A17;
  --tz-surface: #FAF9F7;
  --tz-line: #ECE8E4;
  --tz-muted: #6B625C;
  --tz-shadow: 0 1px 2px rgba(31, 26, 23, .05), 0 10px 28px rgba(31, 26, 23, .08);

  --bs-primary: var(--tz-red);
  --bs-primary-rgb: 191, 42, 31;
  --bs-secondary: var(--tz-gold);
  --bs-secondary-rgb: 200, 150, 46;
  --bs-body-color: var(--tz-ink);
  --bs-body-bg: #FFFFFF;
  --bs-secondary-color: var(--tz-muted);
  --bs-tertiary-bg: var(--tz-surface);
  --bs-border-color: var(--tz-line);
  --bs-link-color: var(--tz-red);
  --bs-link-color-rgb: 191, 42, 31;
  --bs-link-hover-color: var(--tz-red-strong);
  --bs-link-hover-color-rgb: 163, 34, 26;
  --bs-border-radius: .75rem;
  --bs-border-radius-lg: 1.25rem;
  --bs-border-radius-xl: 1.5rem;
}

[data-bs-theme="dark"] {
  --tz-red: #E5604F;
  --tz-red-strong: #F07A6A;
  --tz-red-soft: #3A1E1A;
  --tz-gold: #D9A845;
  --tz-gold-soft: #33291A;
  --tz-ink: #F4F1EE;
  --tz-surface: #1F1A17;
  --tz-line: #352E29;
  --tz-muted: #B5ACA5;
  --tz-shadow: none;

  --bs-primary: var(--tz-red);
  --bs-primary-rgb: 229, 96, 79;
  --bs-body-color: var(--tz-ink);
  --bs-body-bg: #151210;
  --bs-secondary-color: var(--tz-muted);
  --bs-tertiary-bg: var(--tz-surface);
  --bs-border-color: var(--tz-line);
  --bs-link-color: var(--tz-red);
  --bs-link-color-rgb: 229, 96, 79;
  --bs-link-hover-color: var(--tz-red-strong);
}

html[lang="ar"] { --bs-body-font-family: "Plex Arabic", "Plex Latin", system-ui, sans-serif; }
html[lang="en"] { --bs-body-font-family: "Plex Latin", "Plex Arabic", system-ui, sans-serif; }
body { line-height: 1.75; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .navbar-brand { font-weight: 700; letter-spacing: -.01em; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { letter-spacing: 0; }

/* ── Buttons: Bootstrap's, in the brand red ───────────────────────────── */
.btn { --bs-btn-font-weight: 600; --bs-btn-padding-x: 1.4rem; --bs-btn-padding-y: .7rem; border-radius: 999px; }
.btn-primary {
  --bs-btn-bg: var(--tz-red); --bs-btn-border-color: var(--tz-red);
  --bs-btn-hover-bg: var(--tz-red-strong); --bs-btn-hover-border-color: var(--tz-red-strong);
  --bs-btn-active-bg: var(--tz-red-strong); --bs-btn-active-border-color: var(--tz-red-strong);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #1F1A17; --bs-btn-hover-color: #1F1A17; --bs-btn-active-color: #1F1A17; }
.btn-outline-primary {
  --bs-btn-color: var(--tz-red); --bs-btn-border-color: var(--tz-line);
  --bs-btn-hover-bg: var(--tz-red-soft); --bs-btn-hover-color: var(--tz-red); --bs-btn-hover-border-color: var(--tz-red);
  --bs-btn-active-bg: var(--tz-red-soft); --bs-btn-active-color: var(--tz-red); --bs-btn-active-border-color: var(--tz-red);
}

/* ── Navbar ───────────────────────────────────────────────────────────── */
.site-nav { background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--tz-line); }
.brand-mark { width: 38px; height: 38px; border-radius: 11px; background: var(--tz-red); display: inline-grid; place-items: center; }
/* mark.svg is the red ط; on the red tile it is drawn white (dark ink in dark mode). */
.brand-mark img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
[data-bs-theme="dark"] .brand-mark img { filter: brightness(0); }
.site-nav .nav-link { font-weight: 600; color: var(--bs-secondary-color); border-radius: 999px; padding-inline: .9rem !important; }
.site-nav .nav-link:hover, .site-nav .nav-link.active { color: var(--tz-red); background: var(--tz-red-soft); }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--tz-line); display: inline-grid; place-items: center; color: var(--bs-body-color); background: transparent; text-decoration: none; font-weight: 700; }
.icon-btn:hover { border-color: var(--tz-red); color: var(--tz-red); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { background: radial-gradient(1200px 500px at 85% -10%, var(--tz-red-soft), transparent 60%), radial-gradient(900px 400px at 0% 110%, var(--tz-gold-soft), transparent 60%); }
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.25; }
.hero h1 em { font-style: normal; color: var(--tz-red); }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .9rem; border-radius: 999px; background: var(--tz-gold-soft); color: color-mix(in srgb, var(--tz-gold) 70%, var(--bs-body-color)); font-weight: 600; font-size: .9rem; }
.hero-art { position: relative; }
.hero-art img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--bs-border-radius-xl); box-shadow: var(--tz-shadow); }
.hero-chip { position: absolute; inset-inline-start: -12px; bottom: 22px; background: var(--bs-body-bg); border: 1px solid var(--tz-line); border-radius: 16px; padding: .75rem 1rem; box-shadow: var(--tz-shadow); font-weight: 700; }
.hero-chip small { display: block; font-weight: 400; color: var(--bs-secondary-color); }
@media (max-width: 575.98px) { .hero-chip { inset-inline-start: 12px; bottom: 12px; } }

/* ── Sections and cards ───────────────────────────────────────────────── */
.section { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.section-alt { background: var(--tz-surface); }
.section-head { max-width: 640px; margin-bottom: 2rem; }
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.tz-card { border: 1px solid var(--tz-line); border-radius: var(--bs-border-radius-lg); background: var(--bs-body-bg); box-shadow: var(--tz-shadow); height: 100%; }
.menu-card { overflow: hidden; transition: transform .2s ease; }
.menu-card:hover { transform: translateY(-4px); }
.menu-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.step-num { width: 44px; height: 44px; border-radius: 14px; background: var(--tz-red-soft); color: var(--tz-red); display: inline-grid; place-items: center; font-weight: 700; font-size: 1.15rem; }
.app-icon { width: 72px; height: 72px; border-radius: 18px; flex: none; }
.store-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 10px; border: 1px solid var(--tz-line); font-size: .85rem; font-weight: 600; color: var(--bs-secondary-color); text-decoration: none; }
a.store-badge { background: var(--tz-ink); color: var(--bs-body-bg); border-color: var(--tz-ink); }
.contact-card { display: block; padding: 1.1rem 1.25rem; text-decoration: none; color: inherit; }
.contact-card small { display: block; color: var(--bs-secondary-color); }
.contact-card strong { word-break: break-word; }
a.contact-card:hover { border-color: var(--tz-red); }

/* ── Policy pages ─────────────────────────────────────────────────────── */
.doc-hero { background: var(--tz-surface); border-bottom: 1px solid var(--tz-line); padding-block: 3rem 2.5rem; }
.doc-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.doc { max-width: 820px; padding-block: 2.5rem 4rem; }
.doc h2 { font-size: 1.35rem; margin-top: 2.25rem; padding-top: .5rem; scroll-margin-top: 90px; }
.doc h3 { font-size: 1.1rem; margin-top: 1.5rem; }
.doc li { margin-bottom: .4rem; }
.doc .table { margin-block: 1rem; }
.doc .table th { background: var(--tz-surface); white-space: nowrap; }
.toc { padding: 1.1rem 1.25rem; margin-block: 1.5rem; }
.toc ol { columns: 2; column-gap: 2rem; margin: 0; }
@media (max-width: 575.98px) { .toc ol { columns: 1; } }
.steps-list li::marker { color: var(--tz-red); font-weight: 700; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--tz-line); background: var(--tz-surface); color: var(--bs-secondary-color); }
.site-footer a { color: var(--bs-secondary-color); text-decoration: none; }
.site-footer a:hover { color: var(--tz-red); }

/* Arabic reads right to left; numbers, emails and codes stay left to right. */
[dir="ltr"] { unicode-bidi: isolate; }