/*
 * TCHAHIT public layer v96 — one header, one type voice, one footer for every
 * public/customer page except the home page. Loaded by <SiteHeader/> and
 * <PublicFooter/>. Values come from the canonical tokens
 * (app/design-tokens.css); spec: docs/design/TCHAHIT_DESIGN_LANGUAGE_AR.md.
 * Older route sheets use !important heavily, so shared rules that must win
 * over them do too, scoped to the public page roots.
 */

/* ---- Header (§8.10) ----------------------------------------------------- */
.tc-header.tc-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 40 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: env(safe-area-inset-top, 0px) var(--tc-gutter) 0 !important;
  display: block !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(31, 26, 23, .08) !important;
  border-radius: 0 !important;
  background: rgba(255, 248, 241, .86) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  color: var(--tc-text);
  font-family: var(--tc-font-ui);
}
.tc-header-inner {
  width: 100%;
  max-width: var(--tc-content);
  min-height: var(--tc-header-h);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tc-header .tc-brand {
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--tc-text);
  text-decoration: none;
}
.tc-brand .logo { width: 40px; height: 40px; flex: none; }
.tc-brand > span { display: grid; line-height: 1.1; }
.tc-brand b { font-family: var(--tc-font-latin); font-size: 17px; font-weight: 900; letter-spacing: .04em; }
.tc-brand small { color: var(--tc-brand-600); font-family: var(--tc-font-ar); font-size: 13px; font-weight: 700; letter-spacing: 0; }
.tc-header-end { min-width: 0; display: flex; align-items: center; gap: 8px; }
.tc-header.tc-header-dark { border-bottom-color: var(--tc-glass-line) !important; background: rgba(17, 24, 20, .9) !important; color: var(--tc-on-night); }
.tc-header-dark .tc-header-action { border-color: var(--tc-glass-line); background: var(--tc-glass); color: var(--tc-on-night) !important; }
.tc-header-dark .tc-header-action svg { width: 16px; }
.tc-header-dark .tc-brand { color: var(--tc-on-night); }
.tc-header-dark .tc-brand small { color: var(--tc-flame); }

/* One language switch: AR · FR · EN segmented, 36px keys inside 44px. */
.tc-header .language-switch,
.tc-langs {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 44px;
  padding: 3px !important;
  display: inline-grid !important;
  grid-auto-flow: column;
  grid-template-columns: none !important;
  gap: 2px !important;
  border: 1px solid var(--tc-line) !important;
  border-radius: var(--tc-r-md) !important;
  background: var(--tc-paper) !important;
  box-shadow: none !important;
}
.tc-header .language-switch button,
.tc-langs a {
  min-width: 40px !important;
  width: auto !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 8px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: var(--tc-r-sm) !important;
  background: transparent !important;
  color: var(--tc-text-2) !important;
  font-family: var(--tc-font-latin);
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
.tc-header .language-switch button.active,
.tc-langs a[aria-current="page"] { background: var(--tc-night-900) !important; color: #fff !important; }
.tc-header-dark .language-switch { border-color: var(--tc-glass-line) !important; background: var(--tc-glass) !important; }
.tc-header-dark .language-switch button { color: var(--tc-on-night-2) !important; }
.tc-header-dark .language-switch button.active { background: var(--tc-flame) !important; color: var(--tc-night-900) !important; }

/* Header actions (one secondary link at most, e.g. partner sign-in). */
.tc-header-action {
  min-height: 44px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--tc-line-strong);
  border-radius: var(--tc-r-md);
  background: var(--tc-paper);
  color: var(--tc-text);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.tc-header-action:hover { border-color: var(--tc-ink-400); }

@media (max-width: 420px) {
  .tc-brand > span small { display: none; }
  .tc-header-action { padding: 0 12px; }
}

/* ---- Page roots: one canvas, one type voice (§3, §0.4) ------------------ */
:is(.legal-page, .content-page, .tracking-page, .rating-page, .city-page, .app-download, .account-delete-page, .partner-application, .help-article, .c93-not-found) {
  background: var(--tc-bg) !important;
  color: var(--tc-text);
  font-family: var(--tc-font-ui);
}
:is(.legal-page, .content-page, .tracking-page, .rating-page, .city-page, .app-download, .account-delete-page, .partner-application, .help-article, .c93-not-found) :is(h1, h2, h3) {
  font-weight: var(--tc-fw-heading) !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere;
  scroll-margin-top: 80px;
}
:is(.legal-page, .content-page, .tracking-page, .rating-page, .city-page, .app-download, .account-delete-page, .help-article, .c93-not-found) h1 {
  color: var(--tc-text);
  line-height: var(--tc-lh-heading) !important;
}
:is(.legal-page, .content-page, .tracking-page, .rating-page, .city-page, .app-download, .account-delete-page, .help-article) :is(p, li) {
  line-height: var(--tc-lh-body);
}

/* ---- Brand accents instead of the legacy green (§0.1) ------------------- */
:is(.content-page-icon, .legal-page > article > span) {
  border: 1px solid var(--tc-brand-100);
  background: var(--tc-brand-50) !important;
  color: var(--tc-brand-600) !important;
}
.help-tabs button { border-radius: var(--tc-r-md) !important; }
.help-tabs button.active {
  border: 2px solid var(--tc-brand-600) !important;
  background: var(--tc-brand-50) !important;
  color: var(--tc-brand-700) !important;
}
.faq-group h2 { color: var(--tc-text) !important; }
.legal-operator-details { border: 1px solid var(--tc-line); background: var(--tc-surface-2) !important; color: var(--tc-text-2) !important; }
.legal-operator-details > b { color: var(--tc-text) !important; }
:is(.legal-page article > a, .service-policy-list a, .legal-operator-details a, .faq-item a, .help-panel > a, .help-article a) { color: var(--tc-link) !important; }
.assistant-launcher { background: var(--tc-ink-900) !important; box-shadow: var(--tc-shadow-3) !important; }
.assistant-launcher:hover { background: var(--tc-ink-700) !important; }

/* ---- Interaction: one focus ring, honest disabled state ----------------- */
:is(.tc-header, .tc-footer, .legal-page, .content-page, .tracking-page, .rating-page, .city-page, .app-download, .account-delete-page, .partner-application, .help-article, .c93-not-found) :is(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
  outline: 3px solid var(--tc-focus) !important;
  outline-offset: 2px !important;
}
:is(.tracking-page, .rating-page, .account-delete-page, .partner-application) :is(button[type="submit"], .errand-primary):disabled {
  opacity: .5 !important;
  filter: none !important;
  cursor: not-allowed;
}

/* ---- Shared building blocks for new markup ------------------------------ */
.tc-btn {
  min-height: var(--tc-btn-md);
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--tc-r-md);
  background: var(--tc-action);
  color: var(--tc-on-action);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.tc-btn:hover { background: var(--tc-action-hover); }
.tc-btn-secondary { border-color: var(--tc-line-strong); background: var(--tc-paper); color: var(--tc-text); }
.tc-btn-secondary:hover { background: var(--tc-surface-2); }
.tc-btn-lg { min-height: var(--tc-btn-lg); padding: 0 20px; font-size: 16px; }
.tc-empty { display: grid; justify-items: center; gap: 8px; padding: 24px 16px; text-align: center; }
.tc-empty img { width: 160px; height: 160px; object-fit: contain; }
.tc-empty h2 { margin: 0; font-size: 20px; font-weight: 700; }
.tc-empty p { max-width: 42ch; margin: 0; color: var(--tc-text-2); font-size: 16px; }

/* ---- Footer (§8.12): the night bookend ---------------------------------- */
.tc-footer {
  margin: 0;
  padding: 48px var(--tc-gutter) calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--tc-night-900);
  color: var(--tc-on-night-2);
  font-family: var(--tc-font-ui);
}
.tc-footer-inner {
  max-width: var(--tc-content);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
}
.tc-footer-logo { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.tc-footer-logo .logo { width: 40px; height: 40px; }
.tc-footer-logo span { display: grid; line-height: 1.1; }
.tc-footer-logo b { font-family: var(--tc-font-latin); font-size: 18px; font-weight: 900; letter-spacing: .04em; }
.tc-footer-logo small { color: var(--tc-flame); font-family: var(--tc-font-ar); font-size: 14px; font-weight: 700; }
.tc-footer-brand p { max-width: 34ch; margin: 12px 0 0; color: var(--tc-on-night-2); font-size: 14px; line-height: 1.7; }
.tc-footer-badge {
  margin-top: 16px;
  min-height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--tc-glass-line);
  border-radius: var(--tc-r-pill);
  background: var(--tc-glass);
  color: var(--tc-flame-soft);
  font-size: 13px;
  font-weight: 600;
}
.tc-footer-col h2 { margin: 0 0 14px; color: rgba(255, 255, 255, .6); font-size: 13px; font-weight: 600; letter-spacing: .02em; line-height: 1.4; }
/* Desktop: a plain heading per group; the phone fold (button) and quick row are not rendered. */
.tc-footer-col .tc-footer-fold,
.tc-footer-quick { display: none; }
.tc-footer-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tc-footer-toggle svg { width: 20px; height: 20px; flex: none; color: var(--tc-on-night-2); transition: transform var(--tc-dur-2) var(--tc-ease-out); }
.tc-footer-toggle:focus-visible { outline: 3px solid var(--tc-flame-soft); outline-offset: 2px; border-radius: var(--tc-r-sm, 8px); }
.tc-footer-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.tc-footer-col a,
.tc-footer-legal a {
  color: var(--tc-on-night-2);
  font-size: 14px;
  line-height: 1.6;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--tc-dur-2) var(--tc-ease-out);
}
.tc-footer-col a:hover,
.tc-footer-legal a:hover { color: #fff; }
.tc-footer-legal {
  max-width: var(--tc-content);
  margin: 40px auto 0;
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: var(--tc-on-night-3);
  font-size: 14px;
}
.tc-footer-legal nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.tc-footer-operator { flex-basis: 100%; order: 3; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--tc-on-night-3); font-size: 13px; line-height: 1.6; }
.tc-footer-operator span { overflow-wrap: anywhere; }
.tc-footer :focus-visible { outline-color: var(--tc-flame-soft) !important; }
@media (max-width: 900px) {
  .tc-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .tc-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  /* Phones: brand line, four quick links, then the groups folded into accordions. */
  .tc-footer { padding-top: 32px; }
  .tc-footer-inner { grid-template-columns: 1fr; gap: 0; }
  .tc-footer-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding-bottom: 16px; }
  .tc-footer-brand p { flex: 1 1 100%; order: 3; margin: 8px 0 0; max-width: none; }
  .tc-footer-badge { margin-top: 0; order: 2; }
  .tc-footer-logo { order: 1; }
  .tc-footer-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; padding: 4px 0 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
  .tc-footer-quick a { min-height: 44px; display: inline-flex; align-items: center; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
  .tc-footer-col { border-top: 1px solid rgba(255, 255, 255, .08); }
  .tc-footer-col .tc-footer-heading { display: none; }
  .tc-footer-col .tc-footer-fold { display: block; margin: 0; color: var(--tc-on-night); font-size: 15px; font-weight: 600; letter-spacing: 0; }
  .tc-footer-col.is-open .tc-footer-toggle svg { transform: rotate(180deg); }
  .tc-footer-col ul { display: none; gap: 0; padding: 0 0 8px; }
  .tc-footer-col.is-open ul { display: flex; }
  .tc-footer-col a,
  .tc-footer-legal a { min-height: 44px; display: inline-flex; align-items: center; }
  .tc-footer-col a { padding-inline-start: 12px; }
  .tc-footer-legal { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-footer-col a, .tc-footer-legal a, .tc-footer-toggle svg { transition: none; }
}
@media print {
  .tc-footer, .tc-header, .assistant-launcher { display: none !important; }
}

/* ---- Page-level fixes ---------------------------------------------------- */
body:has(> #main-content .tc-header) { background: var(--tc-bg); }
.c93-not-found { min-height: calc(100dvh - var(--tc-header-h)) !important; }
.city-page { padding-top: 24px !important; }
.tc-footer-col { display: flex; flex-direction: column; }
@media (max-width: 767px) {
  .tc-header .language-switch, .tc-langs { height: auto; padding: 2px !important; }
  .tc-header .language-switch button, .tc-langs a { min-width: 44px !important; height: 44px !important; min-height: 44px !important; }
  .tc-footer-legal a { min-width: 44px; justify-content: center; }
}
@media (max-width: 480px) {
  /* only the wordmark goes; the brand mark (span.logo) stays on every page */
  .tc-header:has(.tc-header-action) .tc-brand > span:not(.logo) { display: none; }
  .tc-header .tc-brand { min-width: 44px; justify-content: center; }
}
.tc-brand { overflow: hidden; }
/* The footer is the last thing on the page: no cream strip under it. */
body:has(.tc-footer) { padding-bottom: 0 !important; }
body:has(.app-download-sticky) .tc-footer { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
.tc-empty :is(h1, h2) { margin: 0; font-size: var(--tc-fs-title) !important; font-weight: 700; }
.storefront-empty { min-height: 60vh !important; display: grid; align-content: center; }
@media (max-width: 767px) {
  /* Phones: the three legal links on one row in every language, aligned to the start like the © line. */
  .tc-footer-legal nav { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0 20px; }
}
@media (max-width: 380px) {
  .tc-footer-legal nav { gap: 0 16px; }
  .tc-footer-legal a { font-size: 13px; }
}
@media (max-width: 420px) {
  .tc-header-dark .tc-header-action { display: none; }
}
/* Compact header with an action (partner pages): brand, action and language
   switch only, in every language; Tchahit Kitchen stays one tap away in the
   footer. The dark header drops its action on small phones instead. */
@media (max-width: 767px) {
  .tc-header:has(.tc-header-action) .tc-nav { display: none; }
}
@media (max-width: 420px) {
  .tc-header-dark:has(.tc-header-action) .tc-nav { display: flex; }
}
.service-policy-list a { min-height: 44px; min-width: 44px; display: inline-flex !important; align-items: center; }

/* ---- Main links next to the brand: Home + Tchahit Kitchen (site-nav-links.tsx) ---- */
.tc-header .tc-brand { flex: none; }
.tc-nav { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px; margin-inline-start: 8px; }
.tc-nav a { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: var(--tc-r-md); color: var(--tc-text-2) !important; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color var(--tc-dur-2) var(--tc-ease-out), color var(--tc-dur-2) var(--tc-ease-out); }
.tc-nav a svg { width: 18px; height: 18px; flex: none; }
.tc-nav a:hover { background: var(--tc-cream-100); color: var(--tc-text) !important; }
.tc-nav a[aria-current="page"] { color: var(--tc-brand-700) !important; background: var(--tc-brand-50); }
.tc-nav .tc-nav-kitchen svg { color: var(--tc-brand-600); }
.tc-header-dark .tc-nav a { color: var(--tc-on-night-2) !important; }
.tc-header-dark .tc-nav a:hover, .tc-header-dark .tc-nav a[aria-current="page"] { background: var(--tc-glass); color: #fff !important; }
@media (max-width: 767px) {
  .tc-nav { margin-inline-start: 0; justify-content: flex-end; }
  .tc-nav .tc-nav-home { display: none; }
  .tc-nav a { padding: 0 10px; font-size: 14px; }
}
@media (max-width: 420px) {
  .tc-header .tc-brand > span:not(.logo) { display: none; }
}
/* Below 390px the kitchen link keeps its icon (44px target) and its name for assistive technology:
   brand, kitchen and the language switch then fit in every language. */
@media (max-width: 389px) {
  .tc-nav .tc-nav-kitchen { min-width: 44px; justify-content: center; padding: 0; }
  .tc-nav .tc-nav-kitchen span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Tablets: with an action in the header, Home is the logo (as on phones). */
@media (min-width: 768px) and (max-width: 1023px) {
  .tc-header:has(.tc-header-action) .tc-nav .tc-nav-home { display: none; }
}
@media print { .tc-nav { display: none !important; } }

/* ==== v99 design audit (docs/qa/DESIGN_AUDIT_PUBLIC_V99_AR.md) ==================== */

/* Line breaks: balanced headings (no single word alone on the last line) and
   paragraphs without an orphan, in the three languages. */
:is(.tc-header, .tc-footer, main) :is(h1, h2, h3) { text-wrap: balance; }
:is(main, .tc-footer) :is(p, li, dd, small) { text-wrap: pretty; }

/* Kickers above titles: the brand ink, never the status green; one case in every language. */
.tracking-kicker {
  color: var(--tc-brand-700) !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.tracking-kicker svg { color: var(--tc-brand-600) !important; }

/* Secondary buttons are solid, never dashed (§8.1). */
:is(.errand-page, .tracking-page) .errand-secondary {
  border-style: solid !important;
  border-color: var(--tc-line-strong) !important;
  border-radius: var(--tc-r-md) !important;
  background: var(--tc-paper) !important;
  color: var(--tc-text) !important;
}
:is(.errand-page, .tracking-page) .errand-secondary:hover { border-color: var(--tc-ink-400) !important; background: var(--tc-cream-50) !important; }

/* Disabled = the same button at half strength, never grey (§8.1). */
.tracking-lookup-form button:disabled {
  background: var(--tc-action) !important;
  color: #fff !important;
  opacity: .5 !important;
  cursor: not-allowed;
}

/* Footer: every legal link is a 44px target on every width, the © line wraps cleanly. */
.tc-footer-legal a { min-height: 44px; display: inline-flex; align-items: center; }
.tc-footer-legal nav { align-items: center; }
.tc-footer-legal > span { line-height: 1.6; }

/* Empty states with the v1 illustrations: one size, one rhythm. */
.tc-empty-art { width: 160px; height: 160px; object-fit: contain; }
@media (max-width: 767px) { .tc-empty-art { width: 136px; height: 136px; } }

/* v99: the shared language switch (components/language-provider.tsx) on the design scale
   wherever it appears: 13px keys, radius 8 inside a 12 container, 44px on phones, no overlap. */
.language-switch { gap: 2px !important; border-radius: var(--tc-r-md, 12px) !important; }
.language-switch button { min-width: 40px !important; border-radius: var(--tc-r-sm, 8px) !important; font-size: 13px !important; flex: none; }
@media (max-width: 767px) { .language-switch button { min-width: 44px !important; min-height: 44px !important; } }

/* v99: the 404 actions on the canonical button radius; help article meta on the 13px floor and
   its related links as 44px targets; partner trust labels at 13px. */
.c93-not-found :is(.c93-primary, .c93-secondary) { border-radius: var(--tc-r-md) !important; }
.help-article :is(small, bdi) { font-size: max(13px, 1em); }
.help-article header small, .help-article small bdi { font-size: 13px !important; }
.help-article :is(.help-related a, nav a, footer a) { min-height: 44px; display: inline-flex; align-items: center; }
.partner-application :is(.application-hero span, .application-trust small, .application-status small) { font-size: 13px !important; }