/* =========================================================
   Rahnama98 — Iran Business Contact Directory (Persian + English)
   Minimal, calm, trustworthy, Arabic-first RTL.
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Surfaces */
  --color-bg: #FAFAF7;
  --color-bg-alt: #F4F4EE;
  --color-surface: #FFFFFF;

  /* Text */
  --color-text: #0F172A;
  --color-text-muted: #475569;
  --color-text-soft: #64748B;
  --color-text-faint: #94A3B8;

  /* Brand */
  --color-primary: #0F766E;
  --color-primary-hover: #0B5C55;
  --color-primary-soft: #E6F2F0;

  /* Verification */
  --color-verified: #2563EB;
  --color-verified-soft: #EFF6FF;

  /* WhatsApp */
  --color-whatsapp: #25D366;
  --color-whatsapp-hover: #1FB855;

  /* Borders */
  --color-border: #E5E7EB;
  --color-border-strong: #D1D5DB;
  --color-divider: #EDEDE8;

  /* Focus */
  --color-focus: #0F766E;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 22px;
  --radius-pill: 999px;

  /* Spacing scale (8px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Typography */
  --font-sans: 'Vazirmatn', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 17px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;
  --text-4xl: 34px;
  --leading-tight: 1.35;
  --leading-snug: 1.5;
  --leading-normal: 1.7;
  --leading-loose: 1.85;

  /* Elevation (very minimal) */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 1px 3px rgba(15, 23, 42, .05), 0 1px 2px rgba(15, 23, 42, .03);
  --shadow-focus: 0 0 0 3px rgba(15, 118, 110, .22);

  /* Layout */
  --container-max: 1120px;
  --container-narrow: 720px;
  --header-height: 64px;
}

/* English pages (en/) use a Latin face. */
:root:lang(en) {
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* ---------- Base reset ---------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern', 'liga';
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-text);
  letter-spacing: -0.005em;
}

p {
  margin: 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 180ms ease;
}

a:hover {
  color: var(--color-primary-hover);
}

button {
  font-family: inherit;
}

img, svg {
  display: block;
  max-width: 100%;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

/* ---------- Accessibility ---------- */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
.chip:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: top 180ms ease;
}

.skip-link:focus {
  top: var(--space-4);
  color: #fff;
}

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container--narrow {
  max-width: var(--container-narrow);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-6);
  }
}

/* ---------- Brand ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
}

.brand:hover {
  color: var(--color-text);
}

.brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.brand__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand__name {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

/* Keep "rahnama98.ir" rendered LTR even inside RTL flow */
.domain,
.brand__name {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

.brand__tagline {
  font-size: var(--text-xs);
  color: var(--color-text-soft);
  font-weight: 400;
}

@media (max-width: 480px) {
  .brand__tagline {
    display: none;
  }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 250, 247, .92);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height);
  padding-block: var(--space-3);
}

.site-header__nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Narrow phones: tighten the header so brand, language switch and CTA
   fit on one line (the English CTA also drops "your"). */
@media (max-width: 420px) {
  .site-header__inner,
  .brand {
    gap: var(--space-2);
  }
  .hide-narrow {
    display: none;
  }
}

/* Persian ⇄ English switch: a compact pill beside the header CTA. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.lang-switch:lang(fa) {
  /* English pages load no Persian webfont; use a system face that has the glyphs. */
  font-family: 'Vazirmatn', Tahoma, 'Geeza Pro', sans-serif;
  font-size: var(--text-base);
}

.lang-switch:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.lang-switch:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: transparent;
  --btn-color: var(--color-text);
  --btn-border: transparent;
  --btn-hover-bg: var(--color-bg-alt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  background: var(--btn-bg);
  color: var(--btn-color);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.btn:hover {
  background: var(--btn-hover-bg);
  color: var(--btn-color);
}

.btn:active {
  transform: translateY(1px);
}

.btn svg {
  width: 18px;
  height: 18px;
}

.btn--sm {
  min-height: 38px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.btn--lg {
  min-height: 52px;
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-md);
}

.btn--primary {
  --btn-bg: var(--color-primary);
  --btn-color: #fff;
  --btn-border: var(--color-primary);
  --btn-hover-bg: var(--color-primary-hover);
}
.btn--primary:hover {
  border-color: var(--color-primary-hover);
  color: #fff;
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-color: var(--color-text);
  --btn-border: var(--color-border);
  --btn-hover-bg: var(--color-surface);
}
.btn--ghost:hover {
  border-color: var(--color-border-strong);
}

.btn--whatsapp {
  --btn-bg: var(--color-whatsapp);
  --btn-color: #fff;
  --btn-border: var(--color-whatsapp);
  --btn-hover-bg: var(--color-whatsapp-hover);
}
.btn--whatsapp:hover {
  border-color: var(--color-whatsapp-hover);
  color: #fff;
}

/* ---------- Hero ---------- */
.hero {
  padding-block: var(--space-12) var(--space-10);
  background:
    radial-gradient(ellipse at 50% -20%, rgba(15, 118, 110, .06), transparent 60%),
    var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
}

.hero__inner {
  text-align: center;
}

.hero__title {
  font-size: clamp(1.6rem, 3.6vw + .8rem, 2.5rem);
  line-height: 1.35;
  max-width: 22ch;
  margin: 0 auto var(--space-4);
  letter-spacing: -0.01em;
}

.hero__subtitle {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  max-width: 56ch;
  margin: 0 auto var(--space-8);
  line-height: var(--leading-normal);
}

.hero__hint {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}

/* ---------- Search ---------- */
.search {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  max-width: 640px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2);
  box-shadow: var(--shadow-md);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.search:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.search__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline-start: var(--space-3);
  color: var(--color-text-faint);
  flex-shrink: 0;
}

.search__icon svg {
  width: 20px;
  height: 20px;
}

.search__input {
  flex: 1;
  min-width: 0;
  padding: var(--space-3) var(--space-3);
  border: 0;
  background: transparent;
  font-size: var(--text-base);
  color: var(--color-text);
  outline: none;
}

/* The parent .search container already shows a focus ring via :focus-within,
   so the inner input must NOT show its own outline — otherwise the page
   ends up with a "box inside a box" look. */
.search__input:focus,
.search__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.search__input::placeholder {
  color: var(--color-text-faint);
  opacity: 1;
}

.search__submit {
  border-radius: var(--radius-md);
  padding-inline: var(--space-6);
}

@media (max-width: 540px) {
  .search {
    flex-wrap: wrap;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
  }
  .search__input {
    flex: 1 1 100%;
    order: 1;
    padding-inline: var(--space-2);
  }
  .search__icon {
    order: 0;
    padding-inline: var(--space-1);
  }
  .search__submit {
    order: 2;
    flex: 1 1 100%;
    margin-top: var(--space-1);
  }
}

/* ---------- Interactive Iran map ----------
   Phones/tablets: map on top, province chips below.
   Desktop: map and a 3-column chip list side by side, stretched to one
   height so hovering a chip and seeing its region happen in one glance. */
.map-browse {
  padding-block: var(--space-8) var(--space-6);
}

.map-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .map-panel {
    padding: var(--space-8);
  }
}

@media (min-width: 1024px) {
  .map-panel {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: stretch;
  }
}

.map-panel__visual {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.ir-map {
  width: 100%;
  height: auto;
  display: block;
  max-width: 620px;
  /* Override RTL flip so the map renders in its geographic orientation. */
  direction: ltr;
  /* Drop the SimpleMaps default global stroke so our region rules win. */
  stroke: none;
}

/* Per-region label size comes from the inline --fs (viewBox units), sized
   to fit each province. On phones the SVG shrinks a lot (viewBox 1000 →
   ~340px), so labels are scaled up and the tiniest provinces drop their
   label — the list beside the map still names every one. */
.ir-label {
  font-size: calc(var(--fs, 16) * 1px);
}

@media (max-width: 540px) {
  .ir-label {
    font-size: calc(var(--fs, 16) * 1.45px);
    stroke-width: 5;
  }
  .ir-label--minor {
    display: none;
  }
}

.ir-region {
  fill: #F2F2EC;
  stroke: #FFFFFF;
  stroke-width: 1.6;
  transition: fill 180ms ease, stroke 180ms ease, stroke-width 180ms ease;
}

.ir-region--clickable {
  cursor: pointer;
}

/* Province name labels rendered directly on the map */
.ir-label {
  font-family: var(--font-sans);
  font-weight: 600;
  fill: var(--color-text);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  user-select: none;
  paint-order: stroke fill;
  stroke: rgba(255, 255, 255, .9);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill 180ms ease;
}

.ir-link {
  outline: none;
  cursor: pointer;
}

/* Unified active state: triggered by direct hover/focus on the region,
   or by JS-driven sync when the matching list item is hovered/focused. */
.ir-link:hover .ir-region--clickable,
.ir-link:focus-visible .ir-region--clickable,
.ir-link.is-active .ir-region--clickable {
  fill: var(--color-primary-soft);
  stroke: var(--color-primary);
  stroke-width: 1.8;
}

.ir-label.is-active {
  fill: var(--color-primary);
}

.ir-link:active .ir-region--clickable {
  fill: #D8EEEA;
  stroke: var(--color-primary);
  stroke-width: 2;
}

.ir-link:focus-visible .ir-region--clickable {
  filter: drop-shadow(0 0 4px rgba(15, 118, 110, .35));
}

/* Stroke-only overlay path appended by JS: always the last SVG child,
   so it paints above every neighbour and gives the active region a
   fully visible teal border without reparenting any element. */
.ir-active-overlay {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

.map-panel__list {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Stacked layout: a hairline separates the chips from the map above. */
@media (max-width: 1023px) {
  .map-panel__list {
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
  }
}

.map-panel__list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.map-panel__list-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.map-panel__count {
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.map-cities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 480px) {
  .map-cities {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .map-cities {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Desktop: the list fills the map column's height. Rows keep their own
   content height and only share out spare space (align-content: stretch),
   so a two-line name doesn't inflate every row. */
@media (min-width: 1024px) {
  .map-cities {
    flex: 1;
    grid-auto-rows: minmax(38px, auto);
    align-content: stretch;
    gap: 6px;
  }
}

.map-cities > li {
  display: flex;
  min-width: 0;
}

.map-cities__link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 6px var(--space-2);
  background: var(--color-bg-alt);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  text-align: center;
  text-wrap: balance;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

@media (min-width: 1024px) {
  .map-cities__link {
    min-height: 38px;
  }
}

.map-cities__link:hover,
.map-cities__link:focus-visible,
.map-cities__link.is-active {
  background: var(--color-primary-soft);
  border-color: rgba(15, 118, 110, .35);
  color: var(--color-primary);
}

.map-cities__link:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.map-panel__note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* ---------- Categories grid (icon tiles) ---------- */
.categories {
  padding-block: var(--space-6) var(--space-12);
}

.cats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (min-width: 540px) {
  .cats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .cats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
}

@media (min-width: 1100px) {
  .cats-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-3);
  min-height: 116px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  text-decoration: none;
  text-align: center;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

.cat-tile:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.cat-tile:focus-visible {
  border-color: var(--color-primary);
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.cat-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.cat-tile__icon svg {
  width: 22px;
  height: 22px;
}

.cat-tile:hover .cat-tile__icon {
  background: var(--color-primary);
  color: #fff;
  transform: scale(1.05);
}

.cat-tile__label {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
}

/* "Show all categories" link below the popular grid */
.cats-more {
  margin-top: var(--space-6);
  text-align: center;
}

.cats-more__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.cats-more__link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.cats-more__link:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.cats-more__chevron {
  width: 16px;
  height: 16px;
  transition: transform 180ms ease;
}

.cats-more__link:hover .cats-more__chevron {
  transform: translateX(-3px);  /* RTL: arrow moves toward the link direction */
}

[dir="ltr"] .cats-more__chevron {
  transform: scaleX(-1);
}

[dir="ltr"] .cats-more__link:hover .cats-more__chevron {
  transform: scaleX(-1) translateX(-3px);
}

.cats-more__hint {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}

/* =========================================================
   Categories page (categories.html)
   ========================================================= */
.cats-page {
  padding-block: var(--space-6) var(--space-16);
}

.cats-page__hero {
  margin-bottom: var(--space-5);
  padding: var(--space-8) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  text-align: center;
}

@media (min-width: 768px) {
  .cats-page__hero {
    padding: var(--space-10) var(--space-8);
  }
}

.cats-page__title {
  font-size: clamp(1.6rem, 3vw + .8rem, 2.25rem);
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}

.cats-page__subtitle {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  max-width: 56ch;
  margin: 0 auto var(--space-5);
}

.cats-page__stats {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cats-page__stats-label {
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Sticky toolbar — search + jump nav */
.cats-toolbar {
  position: sticky;
  top: calc(var(--header-height) + 1px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-3);
  margin-bottom: var(--space-5);
  background: rgba(250, 250, 247, .92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}

@media (min-width: 768px) {
  .cats-toolbar {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
  }
}

.cats-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  max-width: 480px;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  transition: border-color 180ms, box-shadow 180ms;
}

.cats-search:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.cats-search__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline-start: var(--space-3);
  color: var(--color-text-faint);
  flex-shrink: 0;
}

.cats-search__icon svg {
  width: 18px;
  height: 18px;
}

.cats-search__input {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-2);
  border: 0;
  background: transparent;
  font-size: var(--text-base);
  color: var(--color-text);
  outline: none;
}

/* Same fix as .search__input — the parent .cats-search container
   handles the focus ring via :focus-within. The input must stay flat. */
.cats-search__input:focus,
.cats-search__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.cats-search__input::placeholder {
  color: var(--color-text-faint);
}

.cats-search__input::-webkit-search-cancel-button {
  display: none;
}

.cats-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 180ms, color 180ms;
}

.cats-search__clear:hover {
  background: var(--color-border-strong);
  color: var(--color-text);
}

.cats-search__clear svg {
  width: 14px;
  height: 14px;
}

/* Horizontal scrollable group jump nav */
.cats-jump {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-inline: calc(var(--space-4) * -1);
  padding-inline: var(--space-4);
}

.cats-jump::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) {
  .cats-jump {
    flex-wrap: wrap;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    flex: 1;
    justify-content: flex-start;
  }
}

.cats-jump__link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 36px;
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  scroll-snap-align: start;
  white-space: nowrap;
  transition: border-color 180ms, background-color 180ms, color 180ms;
}

.cats-jump__link:hover,
.cats-jump__link:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

/* Group cards */
.cats-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cat-group {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  scroll-margin-top: calc(var(--header-height) + 100px);
}

@media (min-width: 768px) {
  .cat-group {
    padding: var(--space-6) var(--space-8);
  }
}

.cat-group__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}

.cat-group__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  flex-shrink: 0;
}

.cat-group__icon svg {
  width: 22px;
  height: 22px;
}

.cat-group__title {
  flex: 1;
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0;
}

@media (min-width: 768px) {
  .cat-group__title {
    font-size: var(--text-xl);
  }
}

.cat-group__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 26px;
  padding: 0 var(--space-2);
  background: var(--color-bg-alt);
  color: var(--color-text-soft);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cat-group__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cat-pill {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--space-4);
  background: var(--color-bg-alt);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 180ms, color 180ms, border-color 180ms, transform 120ms;
}

.cat-pill:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-color: rgba(15, 118, 110, .25);
}

.cat-pill:focus-visible {
  border-color: var(--color-primary);
}

.cat-pill:active {
  transform: scale(.98);
}

/* Hide elements that don't match the current filter */
.is-hidden {
  display: none !important;
}

/* Highlight matched substring in search results */
.cat-pill mark {
  background: rgba(15, 118, 110, .18);
  color: var(--color-primary);
  border-radius: 3px;
  padding: 0 2px;
}

/* Empty state shown when search yields zero results */
.cats-empty {
  padding: var(--space-12) var(--space-6);
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  margin-bottom: var(--space-4);
}

.cats-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
}

.cats-empty__icon svg {
  width: 28px;
  height: 28px;
}

.cats-empty__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.cats-empty__desc {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.cats-empty__desc strong {
  color: var(--color-text);
}

/* Bottom CTA — suggest a missing category */
.cats-suggest {
  margin-top: var(--space-6);
  padding: var(--space-8) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  text-align: center;
}

@media (min-width: 768px) {
  .cats-suggest {
    padding: var(--space-10) var(--space-8);
  }
}

.cats-suggest__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}

.cats-suggest__desc {
  color: var(--color-text-muted);
  max-width: 52ch;
  margin: 0 auto var(--space-5);
  line-height: var(--leading-normal);
}

.cats-suggest__actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

/* ---------- Section heads ---------- */
.section-head {
  margin-bottom: var(--space-8);
}

.section-head__title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}

.section-head__desc {
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

.section-head__link {
  display: inline-block;
  margin-inline-start: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(15, 118, 110, .25);
}

.section-head__link:hover {
  text-decoration-color: currentColor;
}

.section-head--center {
  text-align: center;
}

.section-head--center .section-head__desc {
  max-width: 60ch;
  margin-inline: auto;
}

.section-title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-4);
  color: var(--color-text);
}

.section-subtle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: calc(var(--space-3) * -1);
  margin-bottom: var(--space-4);
  line-height: var(--leading-normal);
}

/* ---------- Featured businesses ---------- */
.featured {
  padding-block: var(--space-6) var(--space-16);
}

.businesses {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.businesses > li {
  display: flex;
}

@media (min-width: 640px) {
  .businesses {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}

.business {
  flex: 1;
  width: 100%;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "avatar  body"
    ".       spacer"
    "actions actions";
  column-gap: var(--space-4);
  row-gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.business:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.business__avatar {
  grid-area: avatar;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-weight: 600;
  font-size: var(--text-xl);
  flex-shrink: 0;
}

.business__body {
  grid-area: body;
  min-width: 0;
}

.business__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-1);
  /* Reserve room on the visual-left so the absolutely positioned trust
     badge never overlaps the business name (RTL: end = visual left). */
  padding-inline-end: 96px;
}

/* Pin the trust badge to the visual top-left corner of the card.
   `left` is a physical property — it remains the visual left in RTL. */
.business .badge {
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  z-index: 2;
}

[dir="ltr"] .business .badge {
  left: auto;
  right: var(--space-5);
}

/* Mobile fallback: on very narrow screens the reserved space squeezes
   the name too much, so let the badge return to flex flow below the name. */
@media (max-width: 420px) {
  .business__head {
    padding-inline-end: 0;
  }
  .business .badge {
    position: static;
    align-self: flex-start;
    margin-top: var(--space-2);
  }
}

.business__name {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.business__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.business__actions {
  grid-area: actions;
  align-self: end;
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}

/* Primary, neutral CTA — outlined teal */
.business__cta {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  background: var(--color-surface);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  padding-inline: var(--space-3);
  transition: background-color 180ms ease, color 180ms ease;
}

.business__cta:hover {
  background: var(--color-primary);
  color: #fff;
}

.business__cta svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Secondary icon-only quick actions */
.business__quick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  text-decoration: none;
  flex-shrink: 0;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.business__quick svg {
  width: 18px;
  height: 18px;
}

.business__quick--call:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.business__quick--whatsapp {
  color: var(--color-whatsapp);
}

.business__quick--whatsapp:hover {
  border-color: var(--color-whatsapp);
  background: rgba(37, 211, 102, .08);
}

/* ---------- Badges (4-tier trust ladder) ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px var(--space-2) 3px 9px;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-pill);
  line-height: 1.4;
  white-space: nowrap;
}

.badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Level 0 — not verified */
.badge--unverified {
  background: #F3F4F6;
  color: #64748B;
}

/* Level 1 — phone number verified only */
.badge--phone,
.badge--verified {
  background: var(--color-verified-soft);
  color: var(--color-verified);
}

/* Level 2 — page managed by the owner / representative */
.badge--managed {
  background: #FEF3E2;
  color: #B45309;
}

/* Level 3 — business ownership verified */
.badge--business {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

/* ---------- Trust levels (homepage legend) ---------- */
.trust-levels {
  padding-block: var(--space-12) var(--space-16);
  background: var(--color-bg-alt);
  border-block: 1px solid var(--color-divider);
}

.trust-levels__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

@media (min-width: 640px) {
  .trust-levels__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .trust-levels__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
}

.trust-level {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.trust-level .badge {
  align-self: flex-start;
}

.trust-level__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin: 0;
}

.trust-levels__note {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  max-width: 60ch;
  margin-inline: auto;
  line-height: var(--leading-normal);
}

/* ---------- Owner CTA ---------- */
.owner-cta {
  padding-block: var(--space-6) var(--space-16);
}

.owner-cta__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .owner-cta__card {
    padding: var(--space-12) var(--space-10);
  }
}

.owner-cta__title {
  font-size: clamp(1.4rem, 2vw + .8rem, 1.85rem);
  margin-bottom: var(--space-3);
  letter-spacing: -0.005em;
}

.owner-cta__desc {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  margin: 0 auto var(--space-6);
  max-width: 50ch;
  line-height: var(--leading-normal);
}

.owner-cta__note {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}

/* ---------- Site footer ---------- */
.site-footer {
  margin-top: auto;
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-8);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  text-align: center;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
}

.site-footer__disclaimer {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  max-width: 56ch;
  line-height: var(--leading-normal);
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
}

.site-footer__nav a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
  padding: var(--space-1) var(--space-2);
}

.site-footer__nav a:hover {
  color: var(--color-primary);
}

.site-footer__nav a[aria-current="page"] {
  color: var(--color-primary);
  font-weight: 600;
}

.site-footer__copy {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .site-footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: start;
  }
  .site-footer__brand {
    align-items: flex-start;
  }
}

/* =========================================================
   Business Profile page
   ========================================================= */

.profile-main {
  padding-block: var(--space-6) var(--space-16);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  margin-bottom: var(--space-6);
}

.breadcrumb a {
  color: var(--color-text-muted);
  font-weight: 500;
}

.breadcrumb a:hover {
  color: var(--color-primary);
}

.breadcrumb span {
  color: var(--color-text-faint);
}

.profile {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ---- Profile head ---- */
.profile__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
}

.profile__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: var(--radius-xl);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-1);
}

.profile__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-size: clamp(1.4rem, 2vw + .6rem, 1.75rem);
  line-height: 1.35;
  letter-spacing: -0.005em;
}

.profile__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

.profile__meta span[aria-hidden="true"] {
  color: var(--color-text-faint);
}

.profile__desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-loose);
  max-width: 52ch;
  margin-top: var(--space-2);
}

/* ---- Warning alert ---- */
.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  align-items: flex-start;
}

.alert--warning {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #78350F;
}

.alert__icon {
  flex-shrink: 0;
  color: #B45309;
  display: inline-flex;
  align-items: center;
  padding-top: 1px;
}

.alert__icon svg {
  width: 20px;
  height: 20px;
}

.alert__body {
  flex: 1;
  min-width: 0;
}

.alert__title {
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
  font-size: var(--text-sm);
}

.alert__text {
  margin: 0;
  color: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* ---- Page status (verification breakdown) ---- */
.status {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
}

.status__list {
  display: flex;
  flex-direction: column;
}

.status__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-divider);
}

.status__item:first-child {
  border-top: 0;
  padding-top: var(--space-1);
}

.status__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.status__icon svg {
  width: 16px;
  height: 16px;
}

.status__icon--pos {
  background: var(--color-verified-soft);
  color: var(--color-verified);
}

.status__icon--neg {
  background: #F3F4F6;
  color: #94A3B8;
}

.status__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-top: 5px;
}

.status__text {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
}

.status__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.status__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary);
}

.status__link svg {
  width: 14px;
  height: 14px;
}

/* ---- Primary actions ---- */
.actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-3);
  min-height: 104px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  text-align: center;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, transform 120ms ease;
}

.action:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-surface);
}

.action:active {
  transform: translateY(1px);
}

.action__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  color: var(--color-text);
  transition: background-color 180ms ease, color 180ms ease;
}

.action__icon svg {
  width: 22px;
  height: 22px;
}

.action__label {
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
}

.action__sub {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.action--whatsapp {
  background: var(--color-whatsapp);
  color: #fff;
  border-color: var(--color-whatsapp);
}

.action--whatsapp:hover {
  background: var(--color-whatsapp-hover);
  border-color: var(--color-whatsapp-hover);
  color: #fff;
}

.action--whatsapp .action__icon {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.action--whatsapp .action__sub {
  color: rgba(255, 255, 255, .85);
}

@media (max-width: 480px) {
  .action {
    min-height: 96px;
    padding: var(--space-4) var(--space-2);
  }
  .action__sub {
    display: none;
  }
}

/* ---- Channels ---- */
.channels {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
}

.channels__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
}

.channel {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  min-height: 56px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

.channel:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.channel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: color 180ms ease;
}

.channel__icon svg {
  width: 20px;
  height: 20px;
}

.channel:hover .channel__icon {
  color: var(--color-primary);
}

.channel__label {
  font-size: var(--text-sm);
  font-weight: 500;
}

/* ---- Info ---- */
.info {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
}

.info__list {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.info__row {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-5);
  row-gap: var(--space-1);
  align-items: start;
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-divider);
}

.info__row:first-child {
  border-top: 0;
  padding-top: var(--space-2);
}

.info__row:last-child {
  padding-bottom: var(--space-2);
}

.info__key {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-soft);
  min-width: 110px;
  margin: 0;
}

.info__key svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-faint);
  flex-shrink: 0;
}

.info__value {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-normal);
}

@media (max-width: 540px) {
  .info__row {
    grid-template-columns: 1fr;
  }
  .info__key {
    min-width: 0;
  }
}

/* ---- Trust / report / claim actions ---- */
.trust {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
}

.trust__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.trust__link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color 180ms ease, background-color 180ms ease;
}

.trust__link:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-text);
}

.trust__link--primary {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.trust__link--primary:hover {
  background: #DCEEEB;
}

.trust__link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: background-color 180ms ease, color 180ms ease;
}

.trust__link-icon svg {
  width: 18px;
  height: 18px;
}

.trust__link--primary .trust__link-icon {
  background: rgba(15, 118, 110, .12);
  color: var(--color-primary);
}

.trust__link:hover .trust__link-icon {
  color: var(--color-primary);
}

.trust__link-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-top: 4px;
}

.trust__link-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
}

.trust__link-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* =========================================================
   Legal pages (terms.html / privacy.html / disclaimer.html)
   ========================================================= */
.legal-page {
  padding-block: var(--space-6) var(--space-16);
}

.container--legal {
  max-width: 820px;
}

.legal-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-6) var(--space-5);
}

@media (min-width: 768px) {
  .legal-card {
    padding: var(--space-10) var(--space-8);
  }
}

/* Header (title + last-updated date) */
.legal-header {
  text-align: center;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}

.legal-header h1 {
  font-size: clamp(1.6rem, 3vw + .8rem, 2.25rem);
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}

.legal-header__date {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-alt);
  color: var(--color-text-soft);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Intro / welcome callout */
.legal-intro {
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  background: var(--color-bg-alt);
  border-inline-start: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
}

.legal-intro p {
  color: var(--color-text);
  line-height: var(--leading-loose);
  margin: 0;
}

.legal-intro p + p {
  margin-top: var(--space-3);
}

/* Table of contents */
.legal-toc {
  margin-bottom: var(--space-10);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.legal-toc__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-soft);
  margin: 0 0 var(--space-3);
  text-transform: none;
  letter-spacing: 0;
}

.legal-toc__list {
  list-style: decimal;
  padding-inline-start: var(--space-6);
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px var(--space-4);
}

@media (min-width: 640px) {
  .legal-toc__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.legal-toc__list li {
  padding-block: 4px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.legal-toc__list li::marker {
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.legal-toc__list a {
  color: var(--color-text);
  text-decoration: none;
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: color 180ms, border-color 180ms;
}

.legal-toc__list a:hover {
  color: var(--color-primary);
  border-bottom-color: rgba(15, 118, 110, .35);
}

/* Individual section */
.legal-section {
  margin-bottom: var(--space-10);
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.legal-section:last-of-type {
  margin-bottom: var(--space-6);
}

.legal-section h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
  letter-spacing: -0.005em;
}

.legal-section h3 {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-primary);
  margin: var(--space-5) 0 var(--space-2);
}

.legal-section p {
  color: var(--color-text);
  line-height: var(--leading-loose);
  margin: 0 0 var(--space-3);
}

.legal-section p:last-child {
  margin-bottom: 0;
}

.legal-section ul {
  list-style: none;
  margin: var(--space-2) 0 var(--space-4);
  padding: 0;
}

.legal-section ul li {
  position: relative;
  padding-inline-start: var(--space-5);
  padding-block: 5px;
  color: var(--color-text);
  line-height: 1.75;
}

.legal-section ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 14px;
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Contact info list at the bottom of the terms */
.legal-contact {
  margin: var(--space-3) 0;
}

.legal-contact li::before {
  display: none;
}

.legal-contact li {
  padding-inline-start: 0;
  padding-block: var(--space-2);
  border-top: 1px solid var(--color-divider);
}

.legal-contact li:first-child {
  border-top: 0;
}

.legal-contact strong {
  color: var(--color-text);
  margin-inline-end: var(--space-2);
  font-weight: 600;
}

.legal-placeholder {
  color: var(--color-text-faint);
  font-style: italic;
  font-size: var(--text-sm);
}

/* Back-to-top link at the very bottom */
/* Closing summary callout on the About page */
.about-summary {
  margin-top: var(--space-8);
  padding: var(--space-5) var(--space-5);
  background: var(--color-primary-soft);
  border: 1px solid rgba(15, 118, 110, .18);
  border-radius: var(--radius-lg);
  text-align: center;
}

.about-summary p {
  color: var(--color-text);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  margin: 0;
  font-weight: 500;
}

.legal-back {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
  text-align: center;
}

.legal-back__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: color 180ms, background-color 180ms;
}

.legal-back__link:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

/* =========================================================
   Listings page (listings.html)
   Mobile-first, sidebar on desktop, dialog sheet on mobile.
   ========================================================= */
.listings-page {
  padding-block: var(--space-6) var(--space-16);
}

/* --- Header --- */
.listings-header {
  margin-bottom: var(--space-5);
}

.listings-header h1 {
  font-size: clamp(1.4rem, 2vw + .8rem, 1.9rem);
  margin-bottom: var(--space-2);
}

.listings-header__subtitle {
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-3);
  max-width: 60ch;
}

.listings-header__count {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.listings-header__count-label {
  color: var(--color-text-muted);
  font-weight: 500;
}

/* --- Inline search --- */
.listings-search {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  box-shadow: var(--shadow-sm);
  transition: border-color 180ms, box-shadow 180ms;
}

.listings-search:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.listings-search__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline-start: var(--space-3);
  color: var(--color-text-faint);
  flex-shrink: 0;
}

.listings-search__icon svg {
  width: 18px;
  height: 18px;
}

.listings-search__input {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-2);
  border: 0;
  background: transparent;
  font-size: var(--text-base);
  color: var(--color-text);
  outline: none;
}

.listings-search__input::placeholder {
  color: var(--color-text-faint);
}

.listings-search__input:focus,
.listings-search__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.listings-search__submit {
  flex-shrink: 0;
  border-radius: var(--radius-md);
  min-height: 40px;
  padding-inline: var(--space-5);
}

/* --- Active filters row --- */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.active-filters__hint {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  margin: 0;
}

.active-filters__list {
  display: contents;
}

.active-filters__list[hidden] {
  display: none;
}

.active-filters__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px var(--space-2) 5px var(--space-3);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border: 1px solid rgba(15, 118, 110, .25);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.active-filters__chip:hover {
  border-color: var(--color-primary);
}

.active-filters__chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(15, 118, 110, .18);
  transition: background-color 180ms;
}

.active-filters__chip:hover .active-filters__chip-x {
  background: rgba(15, 118, 110, .35);
}

.active-filters__chip-x svg {
  width: 11px;
  height: 11px;
}

.active-filters__clear {
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.active-filters__clear:hover {
  color: var(--color-primary);
}

/* --- Toolbar (filter button + sort) --- */
.listings-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.listings-toolbar__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  min-height: 42px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 180ms, color 180ms;
  font-family: inherit;
}

.listings-toolbar__btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.listings-toolbar__btn svg {
  width: 18px;
  height: 18px;
}

.listings-toolbar__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.listings-toolbar__sort {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.listings-toolbar__sort-icon {
  position: absolute;
  inset-inline-start: var(--space-3);
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  pointer-events: none;
}

.listings-toolbar__sort select {
  appearance: none;
  -webkit-appearance: none;
  padding: var(--space-2) var(--space-4) var(--space-2) calc(var(--space-3) + 22px);
  min-height: 42px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}

.listings-toolbar__sort select:focus-visible {
  border-color: var(--color-primary);
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* --- Layout: 1 column on mobile, sidebar + results on desktop --- */
.listings-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}

@media (min-width: 1024px) {
  .listings-layout {
    grid-template-columns: 280px 1fr;
  }
  .listings-toolbar__btn { display: none; }
  .listings-toolbar { justify-content: flex-end; }
}

/* --- Filter dialog (mobile sheet / desktop sidebar) --- */
.filter-shell { min-width: 0; }

.filter-sheet {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--color-surface);
  color: var(--color-text);
}

/* Mobile (default): when JS opens the dialog as modal, it becomes a bottom sheet */
.filter-sheet[open] {
  position: fixed;
  inset: auto 0 0 0;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  animation: sheet-slide-up 220ms ease-out;
}

@keyframes sheet-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.filter-sheet::backdrop {
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.filter-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-divider);
  position: sticky;
  top: 0;
  background: var(--color-surface);
  z-index: 1;
}

.filter-sheet__head h2 {
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0;
}

.filter-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-bg-alt);
  border: 0;
  border-radius: 50%;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color 180ms, color 180ms;
}

.filter-sheet__close:hover {
  background: var(--color-border-strong);
  color: var(--color-text);
}

.filter-sheet__close svg {
  width: 18px;
  height: 18px;
}

.filter-sheet__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  -webkit-overflow-scrolling: touch;
}

.filter-sheet__foot {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-divider);
  background: var(--color-surface);
  position: sticky;
  bottom: 0;
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
}

.filter-sheet__foot .btn { flex: 1; }

/* Desktop: dialog renders as an always-visible inline sidebar panel */
@media (min-width: 1024px) {
  .filter-sheet,
  .filter-sheet[open],
  .filter-sheet:not([open]) {
    display: flex;
    flex-direction: column;
    position: static;
    inset: auto;
    max-height: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    animation: none;
    overflow: hidden;
  }
  .filter-sheet::backdrop { display: none; }
  .filter-sheet__close,
  .filter-sheet__foot { display: none; }
}

/* --- Filter groups --- */
.filter-group {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-5);
}

.filter-group:last-child { margin-bottom: 0; }

.filter-group__title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
  padding: 0;
}

.filter-group__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.filter-check,
.filter-radio {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: background-color 180ms;
  min-height: 36px;
}

.filter-check:hover,
.filter-radio:hover {
  background: var(--color-bg-alt);
}

.filter-check input,
.filter-radio input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
  margin: 0;
}

/* --- Results grid --- */
.results { min-width: 0; }

.results__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .results__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .results__grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1280px) {
  .results__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Empty / loading / error states --- */
.listings-state {
  padding: var(--space-12) var(--space-5);
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
}

.listings-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
}

.listings-state__icon--alert {
  background: rgba(220, 38, 38, .08);
  color: #b91c1c;
}

.listings-state__icon svg { width: 28px; height: 28px; }

.listings-state__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.listings-state__desc {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  line-height: var(--leading-normal);
}

.listings-state__actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

/* Skeleton loading rows */
.listings-loading__skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.listings-loading__row {
  height: 80px;
  background: linear-gradient(90deg, var(--color-bg-alt) 25%, rgba(15, 118, 110, .07) 50%, var(--color-bg-alt) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
  border-radius: var(--radius-md);
}

@keyframes skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .listings-loading__row { animation: none; }
}

/* --- Load more --- */
.load-more {
  margin-top: var(--space-6);
  text-align: center;
}

.load-more .btn { min-width: 180px; }

.load-more__hint {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   Add-business page (add-business.html)
   Public "Add your business" submission flow.
   ========================================================= */
.add-page,
.claim-page,
.report-page,
.contact-page {
  padding-block: var(--space-6) var(--space-16);
}

/* --- Hero (shared across add / claim / report / contact) --- */
.add-hero,
.claim-hero,
.report-hero,
.contact-hero {
  text-align: center;
  margin-bottom: var(--space-8);
  padding: var(--space-8) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
}

@media (min-width: 768px) {
  .add-hero,
  .claim-hero,
  .report-hero,
  .contact-hero {
    padding: var(--space-10) var(--space-8);
  }
}

.add-hero__title,
.claim-hero__title,
.report-hero__title,
.contact-hero__title {
  font-size: clamp(1.5rem, 2.5vw + .8rem, 2.1rem);
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}

.add-hero__subtitle,
.claim-hero__subtitle,
.report-hero__subtitle,
.contact-hero__subtitle {
  color: var(--color-text-muted);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  max-width: 56ch;
  margin: 0 auto var(--space-4);
}

.add-hero__note,
.claim-hero__note,
.report-hero__note,
.contact-hero__note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  max-width: 100%;
}

.add-hero__note svg,
.claim-hero__note svg,
.report-hero__note svg,
.contact-hero__note svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* --- Steps (4-step process; shared with claim page) --- */
.steps,
.claim-steps {
  margin-bottom: var(--space-6);
}

.steps__list,
.claim-steps__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .steps__list,
  .claim-steps__list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .steps__list,
  .claim-steps__list { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
}

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.step__title {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0 0 var(--space-1);
  line-height: 1.3;
}

.step__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* --- Trust notice (calm but visible) --- */
.add-notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-verified-soft);
  border: 1px solid rgba(37, 99, 235, .2);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  align-items: start;
}

.add-notice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-verified);
  color: #fff;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.add-notice__icon svg {
  width: 22px;
  height: 22px;
}

.add-notice__title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-verified);
  margin: 0 0 var(--space-2);
}

.add-notice__body p {
  color: var(--color-text);
  line-height: var(--leading-normal);
  margin: 0;
  font-size: var(--text-sm);
}

/* --- Form + side layout (shared across add / claim / report / contact) --- */
.add-layout,
.claim-layout,
.report-layout,
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}

@media (min-width: 1024px) {
  .add-layout,
  .claim-layout,
  .report-layout,
  .contact-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-6);
  }
}

/* --- Form card (shared) --- */
.add-form-card,
.claim-form-card,
.report-form-card,
.contact-form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .add-form-card,
  .claim-form-card,
  .report-form-card,
  .contact-form-card {
    padding: var(--space-8);
  }
}

/* --- Form sections --- */
.form-section {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-section__title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
  padding: 0 0 var(--space-2);
  border-bottom: 1px solid var(--color-divider);
  width: 100%;
  display: block;
}

/* --- Form grid (1 or 2 columns) --- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .form-grid--2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Form field --- */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.form-field label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.form-field__required {
  color: var(--color-primary);
  margin-inline-start: 2px;
}

.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="email"],
.form-field input[type="url"],
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  transition: border-color 180ms, box-shadow 180ms;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-text-faint);
}

.form-field input:focus,
.form-field input:focus-visible,
.form-field select:focus,
.form-field select:focus-visible,
.form-field textarea:focus,
.form-field textarea:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.form-field input:invalid:not(:placeholder-shown),
.form-field select:invalid:not(:focus),
.form-field textarea:invalid:not(:placeholder-shown) {
  /* Subtle red border only when user has typed/touched the field */
}

.form-field textarea {
  resize: vertical;
  line-height: var(--leading-normal);
  min-height: 80px;
}

.form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: left var(--space-3) center;
  background-size: 16px;
  padding-inline-start: var(--space-10);
  cursor: pointer;
}

.form-field[hidden] { display: none; }

/* Helper text under inputs */
.form-help {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.5;
  margin: 0;
}

.form-field__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.form-counter {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* --- Consent checkboxes --- */
.consent-section .form-section__title {
  border-bottom-color: var(--color-divider);
}

.consent-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 180ms, background-color 180ms;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text);
}

.consent:hover {
  border-color: var(--color-primary-soft);
}

.consent:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.consent a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Security note --- */
.add-security-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  line-height: var(--leading-normal);
  margin: 0;
}

.add-security-note svg {
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  margin-top: 1px;
}

/* --- Submit panel --- */
.submit-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}

.submit-panel__btn {
  min-width: 240px;
}

.submit-panel__help {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 56ch;
  line-height: var(--leading-normal);
  margin: 0;
}

.submit-panel__claim {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  margin: 0;
}

.submit-panel__claim a {
  color: var(--color-primary);
  font-weight: 600;
}

/* --- Side cards (desktop sidebar / mobile below) --- */
.add-side,
.claim-side,
.report-side,
.contact-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 1024px) {
  .add-side,
  .claim-side,
  .report-side,
  .contact-side {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
  }
}

.side-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.side-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

.side-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.side-card__icon svg {
  width: 16px;
  height: 16px;
}

.side-card__icon--positive {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.side-card__icon--negative {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}

.side-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-card__list li {
  position: relative;
  padding-inline-start: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.55;
}

.side-card__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 8px;
  width: 5px;
  height: 5px;
  background: var(--color-primary);
  border-radius: 50%;
}

.add-side__hint,
.claim-side__hint,
.report-side__hint,
.contact-side__hint {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  text-align: center;
  margin: 0;
}

.add-side__hint a,
.claim-side__hint a,
.report-side__hint a,
.contact-side__hint a {
  color: var(--color-primary);
  font-weight: 600;
}

/* --- Routing cards (contact page) --- */
.route-section {
  margin-bottom: var(--space-6);
}

.route-section__title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

.route-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .route-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .route-cards { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
}

.route-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  height: 100%;
}

.route-card--current {
  background: var(--color-primary-soft);
  border-color: rgba(15, 118, 110, .3);
}

.route-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

.route-card--current .route-card__icon {
  background: var(--color-surface);
}

.route-card__icon svg {
  width: 20px;
  height: 20px;
}

.route-card__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.3;
}

.route-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin: 0;
  flex: 1;
}

.route-card__action {
  margin-top: var(--space-3);
  align-self: flex-start;
}

/* --- Honeypot field (visually hidden, kept in DOM for bots) --- */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* --- Side card link block (used in contact "متى لا تستخدمها") --- */
.side-card__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}

.side-card__links a {
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  padding: var(--space-1) 0;
}

.side-card__links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Report types informational grid (report page only) --- */
.report-types-section {
  margin-bottom: var(--space-6);
}

.report-types-section__title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

.report-types {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 540px) {
  .report-types { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .report-types { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .report-types { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1280px) {
  .report-types { grid-template-columns: repeat(5, 1fr); }
}

.report-type-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  min-height: 56px;
}

.report-type-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.report-type-card__icon svg {
  width: 16px;
  height: 16px;
}

.report-type-card__label {
  font-weight: 500;
  line-height: 1.4;
}

/* --- Trust notice (claim-page stronger amber warning) --- */
.trust-notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  padding: var(--space-5);
  background: rgba(217, 119, 6, .06);
  border: 1px solid rgba(217, 119, 6, .25);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  align-items: start;
}

.trust-notice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #d97706;
  color: #fff;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.trust-notice__icon svg {
  width: 22px;
  height: 22px;
}

.trust-notice__title {
  font-size: var(--text-md);
  font-weight: 700;
  color: #92400e;
  margin: 0 0 var(--space-2);
}

.trust-notice__body p {
  color: var(--color-text);
  line-height: var(--leading-normal);
  margin: 0;
  font-size: var(--text-sm);
}

.trust-notice__sub {
  margin-top: var(--space-2) !important;
  font-weight: 600;
  color: #92400e !important;
}

/* --- Alert variant of form helper text (used under role select) --- */
.form-help--alert {
  color: #92400e;
  background: rgba(217, 119, 6, .08);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border-inline-start: 3px solid #d97706;
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* --- Warning icon variant for side cards (used in claim "متى نرفض" card) --- */
.side-card__icon--warning {
  background: rgba(217, 119, 6, .12);
  color: #b45309;
}

/* --- Multi-link alternative actions under submit (claim page) --- */
.submit-panel__alt {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: center;
  margin-top: var(--space-2);
}

.submit-panel__alt .submit-panel__claim {
  margin: 0;
}

/* --- Success state (hidden by default; shown after JS submit) --- */
.success-state {
  padding: var(--space-12) var(--space-5);
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
}

.success-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  margin-bottom: var(--space-5);
}

.success-state__icon svg {
  width: 36px;
  height: 36px;
}

.success-state__title {
  font-size: clamp(1.4rem, 2vw + .6rem, 1.75rem);
  margin-bottom: var(--space-3);
}

.success-state__desc {
  color: var(--color-text-muted);
  max-width: 52ch;
  margin: 0 auto var(--space-6);
  line-height: var(--leading-normal);
}

.success-state__actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Print ---------- */
@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .business__actions,
  .actions,
  .channels,
  .trust,
  .pwa-install,
  .pwa-toast {
    display: none;
  }
  body {
    background: #fff;
  }
}

/* ============================================================================
   PWA — offline page, install banner, update toast
   Progressive layer: injected/used only when running as an installable app.
   ============================================================================ */

/* ---------- Offline fallback page ---------- */
.offline {
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100dvh - var(--header-height));
  display: grid;
  place-items: center;
  padding: var(--space-10) var(--space-4);
}
.offline__inner {
  max-width: 480px;
  text-align: center;
}
.offline__icon {
  display: inline-grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin-bottom: var(--space-6);
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-pill);
}
.offline__icon svg { width: 40px; height: 40px; }
.offline__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--color-text);
}
.offline__desc {
  margin: 0 auto var(--space-8);
  max-width: 38ch;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}
.offline__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}
.offline__hint {
  margin: var(--space-6) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  min-height: 1.2em;
}

/* ---------- Install banner ---------- */
.pwa-install {
  position: fixed;
  z-index: 1000;
  inset-inline: var(--space-4);
  inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  margin-inline: auto;
  max-width: 460px;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 14px 40px rgba(15, 23, 42, .18), 0 3px 10px rgba(15, 23, 42, .06);
  animation: pwa-rise .42s cubic-bezier(.16, 1, .3, 1) both;
}
.pwa-install[hidden] { display: none; }
@media (min-width: 768px) {
  .pwa-install {
    inset-inline-start: var(--space-6);
    inset-inline-end: auto;
    margin-inline: 0;
  }
}
.pwa-install__icon {
  flex: 0 0 auto;
}
.pwa-install__icon img {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.pwa-install__text {
  flex: 1 1 auto;
  min-width: 0;
}
.pwa-install__title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text);
}
.pwa-install__desc {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
}
.pwa-install__steps {
  margin: var(--space-2) 0 0;
  padding-inline-start: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
}
.pwa-install__steps li + li { margin-top: 2px; }
.pwa-install__steps svg {
  width: 1em;
  height: 1em;
  vertical-align: -2px;
  margin-inline: 2px;
}
.pwa-install__actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.pwa-install--ios { align-items: center; }

/* ---------- Update toast ---------- */
.pwa-toast {
  position: fixed;
  z-index: 1001;
  inset-inline: 0;
  inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  margin-inline: auto;
  width: max-content;
  max-width: calc(100% - var(--space-8));
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  background: var(--color-text);
  color: #fff;
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .26);
  animation: pwa-rise .42s cubic-bezier(.16, 1, .3, 1) both;
}
.pwa-toast[hidden] { display: none; }
.pwa-toast__msg {
  font-size: var(--text-sm);
  font-weight: 500;
}
.pwa-toast__action {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-primary);
  background: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  transition: background .15s ease;
}
.pwa-toast__action:hover { background: #EAEAEA; }
.pwa-toast__close {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  appearance: none;
  border: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, .72);
  background: transparent;
  border-radius: var(--radius-pill);
}
.pwa-toast__close:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.pwa-toast__close svg { width: 16px; height: 16px; }

@keyframes pwa-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pwa-install,
  .pwa-toast { animation: none; }
}