/* =========================================================================
   PETICA COMPONENT LIBRARY
   ========================================================================= */

/* ---------------------------------------------------------------------- */
/* BUTTONS — pill-shaped, echoing the tag/card silhouette                 */
/* ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.85em 1.6em;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--step--1);
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
  border: 1.5px solid transparent;
}
.btn-lg { padding: 1.05em 2em; font-size: var(--step-0); }
.btn-sm { padding: 0.6em 1.2em; font-size: var(--step--1); }
/* A handful of buttons carry deliberately long, emphatic copy (e.g. the
   PETICA World closing CTA). nowrap is the right default for the many
   short buttons sitewide, but forces a long one to its full unwrapped
   width — on a narrow phone that's wider than the viewport itself and
   drags the whole page into horizontal scroll. Letting text wrap only
   below 480px only ever affects buttons that don't already fit on one
   line at that width. */
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; line-height: 1.3; }
}

.btn-primary {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: var(--shadow-violet);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-primary:active { transform: translateY(0); }

.btn-gold {
  background: var(--gradient-gold);
  color: var(--violet-900);
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.btn-outline {
  background: transparent;
  border-color: var(--stone-300);
  color: var(--stone-900);
}
.btn-outline:hover { border-color: var(--violet-500); color: var(--violet-600); background: var(--violet-050); }

.btn-ghost { background: transparent; color: var(--stone-900); padding-inline: 0.9em; }
.btn-ghost:hover { color: var(--violet-600); }

.btn-white { background: #fff; color: var(--violet-700); box-shadow: var(--shadow-md); }
.btn-white:hover { transform: translateY(-2px); }

.btn-danger-outline { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger-outline:hover { background: var(--danger-bg); }

.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: 0.45; pointer-events: none; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--r-pill);
  border: 1.5px solid var(--stone-200); background: #fff;
  transition: border-color var(--dur-base), transform var(--dur-base);
}
.icon-btn:hover { border-color: var(--violet-400); transform: translateY(-1px); }

/* ---------------------------------------------------------------------- */
/* SITE HEADER                                                            */
/* ---------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 500;
  background: rgba(250, 247, 242, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6);
}

.brand { display: inline-flex; align-items: center; gap: var(--sp-2); flex: none; }
/* Official PETICA logo lockup (mark + wordmark baked into one asset —
   used exactly as supplied, never redrawn/recolored/stretched).

   ROOT CAUSE of the oversized-logo bug this replaces: the source SVGs
   declare an explicit width="800" height="800" on their root <svg>
   element (a large literal size, not just a viewBox), and base.css's
   global `img { height: auto }` reset silently overrides any HTML
   height="" attribute on every <img> including these. With both axes
   left unconstrained by CSS, replaced-element sizing rules render the
   image at its full intrinsic 800×800 — which is why it dwarfed the
   76px header instead of respecting the small size the markup intended.

   SECOND bug, found auditing the "too small" follow-up report: the fix
   above locked the box to aspect-ratio 2.22/1, but that number was never
   verified against the actual asset. Rendering logo-full-*.svg and
   measuring its real painted pixels (not the padded 800×800 canvas)
   gives a bounding box of 697×697 — the true lockup is ~1:1, not
   2.22:1. Forcing a square asset into a 2.22:1 box with the default
   object-fit ('fill') stretches it non-uniformly: ~2.2x more on the
   horizontal axis than the vertical, flattening the wordmark and making
   its stroke weight/x-height read as thin and small even though the
   bounding box itself was sized correctly. Confirmed by rendering both
   versions at identical target height and comparing pixel output.

   Fix: use the real measured ratio (1/1) and add object-fit: contain so
   any future mismatch between the declared ratio and the asset's actual
   proportions degrades to letterboxing (safe) instead of silently
   stretching the mark (not safe) — this makes the failure mode visible
   instead of quietly wrong. Height still drives sizing from one custom
   property per context, unchanged from the original fix. */
.brand-lockup { line-height: 0; }
.brand-logo {
  display: block; flex: none;
  width: auto;
  aspect-ratio: 1 / 1;
  height: var(--logo-h, 34px);
  object-fit: contain;
}
/* Icon-only mark (e.g. a future tight-space placement) — separate ratio,
   measured from mark-white.svg's actual artwork (≈671×781). */
.brand-logo[data-logo="icon"] { aspect-ratio: 0.86 / 1; }

/* ---- Header: desktop → laptop → tablet → mobile → very small ----
   76px header (--header-h). Now that the box is correctly square
   (previously effectively narrower for the same visual weight — see the
   fix above), sizes are nudged up from the previous pass so the mark
   reads at roughly 60% of header height rather than ~53%: still
   restrained, not a hero graphic, but no longer reading as undersized.
   Breakpoints reuse the site's existing tiers (1180 / 900 / 640 / 360)
   rather than introducing new ones. mm figures assume a 96dpi CSS-px
   reference (1px ≈ 0.264mm) — real rendered size varies with device
   pixel ratio and zoom, so these are a sizing intent, not a promise. */
.site-header .brand-logo { --logo-h: 46px; }               /* desktop, >1180px  — ≈12.1mm */
@media (max-width: 1180px) { .site-header .brand-logo { --logo-h: 42px; } }  /* laptop   — ≈11.1mm */
@media (max-width: 900px)  { .site-header .brand-logo { --logo-h: 40px; } }  /* tablet (hamburger active) — ≈10.6mm */
@media (max-width: 640px)  { .site-header .brand-logo { --logo-h: 36px; } }  /* mobile   — ≈9.5mm */
@media (max-width: 360px)  { .site-header .brand-logo { --logo-h: 32px; } }  /* very small — ≈8.5mm */

/* ---- Footer: standalone brand moment, dark background ---- */
.site-footer .brand-logo { --logo-h: 44px; }                /* ≈11.6mm */
@media (max-width: 640px) { .site-footer .brand-logo { --logo-h: 36px; } }  /* ≈9.5mm */

/* ---- Dashboard sidebar (customer/pro/admin/CRM): fixed column,
   becomes a static full-width block on mobile rather than competing
   for horizontal nav space, so one modest trim is enough ---- */
.app-sidebar .brand-logo { --logo-h: 42px; }                /* ≈11.1mm */
@media (max-width: 640px) { .app-sidebar .brand-logo { --logo-h: 38px; } }  /* ≈10.1mm */

/* ---- Mobile drawer: only ever shown on small screens ---- */
.mobile-drawer .brand-logo { --logo-h: 38px; }               /* ≈10.1mm */

/* ---- Auth pages (login, password recovery): the one place the brand
   stands alone as the page's focal moment, so it's allowed to be the
   single largest instance on the site — still restrained, not a hero
   graphic ---- */
.brand-logo--auth { --logo-h: 52px; }                        /* ≈13.8mm */
@media (max-width: 640px) { .brand-logo--auth { --logo-h: 42px; } }        /* ≈11.1mm */

/* ---- QR scan-landing pages: small utility corner branding ---- */
.qr-logo .brand-logo { --logo-h: 40px; }                     /* ≈10.6mm */
.main-nav { display: flex; align-items: center; gap: var(--sp-5); }
.main-nav ul { display: flex; align-items: center; gap: var(--sp-5); }
.main-nav a {
  position: relative; font-weight: 500; font-size: var(--step--1); color: var(--stone-700);
  padding-block: var(--sp-2);
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--gold-500); transition: right var(--dur-base) var(--ease);
}
.main-nav a:hover { color: var(--stone-900); }
.main-nav a:hover::after, .main-nav a.is-active::after { right: 0; }
.main-nav a.is-active { color: var(--violet-600); }

/* Narrower desktop/laptop widths (nav visible, but tight before the
   1180px+ breakpoint where the bar has full breathing room): shrink
   gaps and type a notch rather than dropping sections. */
@media (min-width: 900px) and (max-width: 1180px) {
  .main-nav, .main-nav ul { gap: var(--sp-3); }
  .main-nav a, .main-nav .dropdown-toggle { font-size: 0.78rem; }
  .header-actions { gap: var(--sp-2); }
}

/* ---- Nav dropdown groups (e.g. "Produits", "Informations" / "المنتجات", "معلومات") ----
   Same markup renders in .main-nav (desktop flyout) and .mobile-drawer
   (accordion) — see nav_html() in build.py. */
.has-dropdown { position: relative; }
.dropdown-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; padding-block: var(--sp-2); margin: 0;
  font-family: inherit; font-weight: 500; font-size: var(--step--1); color: var(--stone-700);
  cursor: pointer;
}
.dropdown-toggle:hover, .has-dropdown.is-open .dropdown-toggle { color: var(--stone-900); }
.dropdown-toggle.is-active-group { color: var(--violet-600); }
.dropdown-toggle .chev { transition: transform var(--dur-base) var(--ease); flex: none; }
.has-dropdown:hover .dropdown-toggle .chev,
.has-dropdown.is-open .dropdown-toggle .chev { transform: rotate(180deg); }

.main-nav .dropdown-menu {
  position: absolute; top: 100%; inset-inline-start: -14px; margin-top: var(--sp-3);
  min-width: 200px; background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: var(--sp-2);
  list-style: none; z-index: 600;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility var(--dur-base);
}
.main-nav .has-dropdown:hover .dropdown-menu,
.main-nav .has-dropdown.is-open .dropdown-menu,
.main-nav .dropdown-menu:hover,
.main-nav .dropdown-menu:focus-within {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.main-nav .dropdown-menu li { display: block; }
.main-nav .dropdown-menu a {
  display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  font-size: var(--step--1); font-weight: 500; color: var(--stone-700); white-space: nowrap;
}
.main-nav .dropdown-menu a::after { display: none; }
.main-nav .dropdown-menu a:hover, .main-nav .dropdown-menu a.is-active { background: var(--violet-050); color: var(--violet-600); }

/* Dark header context (PETICA World page) */
.world-body .dropdown-toggle { color: var(--stone-300); }
.world-body .dropdown-toggle:hover, .world-body .has-dropdown.is-open .dropdown-toggle { color: #fff; }
.world-body .main-nav .dropdown-menu { background: #1A1228; border-color: rgba(255,255,255,0.12); }
.world-body .main-nav .dropdown-menu a { color: var(--stone-300); }
.world-body .main-nav .dropdown-menu a:hover, .world-body .main-nav .dropdown-menu a.is-active { background: rgba(255,255,255,0.08); color: #fff; }

.header-actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }

.lang-switch { display: inline-flex; border: 1.5px solid var(--stone-200); border-radius: var(--r-pill); overflow: hidden; }
.lang-switch a {
  padding: 0.4em 0.85em; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.03em;
}
.lang-switch a.is-active { background: var(--violet-600); color: #fff; }

.nav-toggle { display: none; }
@media (max-width: 900px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-grid; }
}
/* The header's own "Se connecter" / "Créer mon compte" buttons have no
   room next to brand + lang-switch + hamburger below ~640px and were
   overflowing the viewport. Both actions are already duplicated inside
   the mobile drawer (see site_header() in build.py), so hiding them
   here loses no functionality — it's reachable one tap away either way. */
@media (max-width: 640px) {
  .header-actions .btn-ghost, .header-actions .btn-primary { display: none; }
}

/* Mobile drawer */
.mobile-drawer {
  position: fixed; inset: 0; z-index: 900; display: none;
}
.mobile-drawer:target,
.mobile-drawer.is-open { display: block; }
.mobile-drawer .scrim { position: absolute; inset: 0; background: rgba(30,19,51,0.5); }
.mobile-drawer .panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 360px);
  background: var(--paper-raised); padding: var(--sp-6) var(--sp-5);
  box-shadow: var(--shadow-lg); overflow-y: auto;
  animation: slideInRight var(--dur-slow) var(--ease);
}
html[lang="ar"] .mobile-drawer .panel, .rtl .mobile-drawer .panel { right: auto; left: 0; animation-name: slideInLeft; }
.mobile-drawer .panel > .cluster { justify-content: space-between; margin-bottom: var(--sp-6); }
.mobile-drawer nav ul { display: flex; flex-direction: column; gap: var(--sp-1); }
.mobile-drawer nav a { display: block; padding: var(--sp-3) var(--sp-2); font-size: var(--step-1); font-weight: 500; border-radius: var(--r-sm); }
.mobile-drawer nav a:hover { background: var(--violet-050); }

/* Dropdown groups become an inline accordion in the drawer, not a flyout */
.mobile-drawer .has-dropdown { width: 100%; }
.mobile-drawer .dropdown-toggle {
  width: 100%; justify-content: space-between; padding: var(--sp-3) var(--sp-2);
  font-size: var(--step-1); border-radius: var(--r-sm);
}
.mobile-drawer .dropdown-toggle:hover { background: var(--violet-050); }
.mobile-drawer .dropdown-menu {
  list-style: none; padding-inline-start: var(--sp-4); margin: 0;
  display: none; flex-direction: column; gap: var(--sp-1);
}
.mobile-drawer .has-dropdown.is-open .dropdown-menu { display: flex; }
.mobile-drawer .dropdown-menu a { padding: var(--sp-2) var(--sp-2); font-size: var(--step-0); font-weight: 500; }
.mobile-drawer .dropdown-menu a.is-active { color: var(--violet-600); }

/* ---------------------------------------------------------------------- */
/* FOOTER                                                                  */
/* ---------------------------------------------------------------------- */
.site-footer { background: var(--violet-900); color: var(--stone-300); padding-block: var(--sp-8) var(--sp-6); }
.site-footer a { color: var(--stone-300); }
.site-footer a:hover { color: #fff; }
.site-footer h4 { color: #fff; font-family: var(--font-body); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-4); }
html[lang="ar"] .site-footer h4, .rtl .site-footer h4 { font-family: var(--font-body-ar); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-7); padding-bottom: var(--sp-7); border-bottom: 1px solid rgba(255,255,255,0.12); }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }
.footer-grid nav ul { display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--step--1); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--sp-5); font-size: var(--step--1); flex-wrap: wrap; gap: var(--sp-3); }
.footer-brand p { color: var(--stone-300); max-width: 36ch; margin-top: var(--sp-3); }
.footer-social { display: flex; gap: var(--sp-3); }
.footer-social a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.2); border-radius: var(--r-pill); }
.footer-social a:hover { border-color: var(--gold-400); }

/* ---------------------------------------------------------------------- */
/* CARDS                                                                   */
/* ---------------------------------------------------------------------- */
.card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base);
}
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--violet-200); }
.card.is-active { border-color: var(--violet-500); background: var(--violet-050); box-shadow: 0 0 0 3px var(--violet-100); }
.card-flat { border: 1px solid var(--line); border-radius: var(--r-lg); }

.card-glass {
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.img-frame { position: relative; border-radius: var(--r-xl); overflow: hidden; }
.img-frame img { width: 100%; height: 100%; object-fit: cover; }
/* QR-finder corner motif on hero image frames — the visual signature */
.img-frame.with-corners::before,
.img-frame.with-corners::after {
  content: ""; position: absolute; width: 26px; height: 26px; z-index: 2;
  border: 3px solid var(--gold-400); pointer-events: none;
}
.img-frame.with-corners::before { top: 14px; left: 14px; border-right: none; border-bottom: none; }
.img-frame.with-corners::after { bottom: 14px; right: 14px; border-left: none; border-top: none; }

.stat-card {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-5); text-align: start;
}
.stat-card .num { font-family: var(--font-display); font-size: var(--step-3); color: var(--violet-700); line-height: 1; }
.stat-card .label { font-size: var(--step--1); color: var(--stone-500); margin-top: var(--sp-2); }

/* ---------------------------------------------------------------------- */
/* BADGES / STATUS PILLS                                                   */
/* ---------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.35em 0.85em; border-radius: var(--r-pill);
  font-size: var(--step--1); font-weight: 600; line-height: 1.2;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-info { background: var(--info-bg); color: var(--violet-600); }
.badge-neutral { background: var(--stone-100); color: var(--stone-500); }
.badge-gold { background: var(--gold-100); color: var(--gold-700); }

/* ---------------------------------------------------------------------- */
/* FORMS                                                                   */
/* ---------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.field label { font-size: var(--step--1); font-weight: 600; color: var(--stone-900); }
.field .hint { font-size: var(--step--1); color: var(--stone-500); }
.field .error-msg { font-size: var(--step--1); color: var(--danger); display: none; }
.field.has-error .error-msg { display: block; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); background: var(--danger-bg); }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="date"], input[type="search"], select, textarea {
  width: 100%; padding: 0.85em 1.1em; border-radius: var(--r-md);
  border: 1.5px solid var(--stone-200); background: #fff; color: var(--stone-900);
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--violet-400); box-shadow: 0 0 0 4px var(--violet-100);
}
textarea { resize: vertical; min-height: 120px; }
::placeholder { color: var(--stone-300); }

.checkbox-row, .radio-row { display: flex; align-items: flex-start; gap: var(--sp-3); }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--violet-500); margin-top: 2px; flex: none; }

.select-card-group { display: grid; gap: var(--sp-4); }
.select-card {
  display: block; border: 1.5px solid var(--stone-200); border-radius: var(--r-lg);
  padding: var(--sp-5); cursor: pointer; transition: border-color var(--dur-base), background var(--dur-base);
  position: relative;
}
.select-card input { position: absolute; opacity: 0; }
.select-card:has(input:checked) { border-color: var(--violet-500); background: var(--violet-050); box-shadow: 0 0 0 4px var(--violet-100); }
.select-card:has(input:focus-visible) { outline: 2.5px solid var(--violet-500); outline-offset: 2px; }

/* ---------------------------------------------------------------------- */
/* PRICING CARDS                                                          */
/* ---------------------------------------------------------------------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); align-items: stretch; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
.price-card {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-xl);
  padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.price-card.is-featured {
  background: var(--violet-900); color: #fff; border-color: var(--violet-900);
  box-shadow: var(--shadow-lg); position: relative; transform: scale(1.03);
}
.price-card.is-featured p, .price-card.is-featured .price-card-list li { color: var(--stone-200); }
.price-card.is-featured h3 { color: #fff; }
.price-card.is-featured .price-amount { color: #fff; }
@media (max-width: 900px) { .price-card.is-featured { transform: none; } }
.price-card-flag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--gradient-gold); color: var(--violet-900); font-weight: 700;
  font-size: var(--step--1); padding: 0.4em 1.1em; border-radius: var(--r-pill);
  box-shadow: var(--shadow-gold);
}
.price-amount { font-family: var(--font-display); font-size: var(--step-4); color: var(--violet-700); line-height: 1; }
.price-amount span { font-family: var(--font-body); font-size: var(--step-0); font-weight: 500; color: var(--stone-500); }
.price-card.is-featured .price-amount span { color: var(--stone-300); }
.price-card-list { display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.price-card-list li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--step--1); }
.price-card-list li svg { flex: none; margin-top: 3px; color: var(--gold-500); }

/* ---------------------------------------------------------------------- */
/* TESTIMONIALS                                                           */
/* ---------------------------------------------------------------------- */
.testi-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); }
.testi-stars { color: var(--gold-500); font-size: var(--step-0); letter-spacing: 2px; }
.testi-who { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.testi-who img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.testi-who .name { font-weight: 700; font-size: var(--step--1); }
.testi-who .meta { font-size: var(--step--1); color: var(--stone-500); }

/* ---------------------------------------------------------------------- */
/* TIMELINE (Veterinary records)                                         */
/* ---------------------------------------------------------------------- */
.timeline { position: relative; padding-inline-start: var(--sp-6); }
.timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
html[lang="ar"] .timeline, .rtl .timeline { padding-inline-start: 0; padding-inline-end: var(--sp-6); }
html[lang="ar"] .timeline::before, .rtl .timeline::before { left: auto; right: 8px; }
.timeline-item { position: relative; padding-bottom: var(--sp-7); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: -30px; top: 4px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--paper-raised); border: 3px solid var(--violet-500);
}
html[lang="ar"] .timeline-item::before, .rtl .timeline-item::before { left: auto; right: -30px; }
.timeline-item.is-vaccine::before { border-color: var(--gold-500); }
.timeline-date { font-family: var(--font-mono); font-size: var(--step--1); color: var(--stone-500); }
.timeline-card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); margin-top: var(--sp-2); }
.timeline-card h4 { font-size: var(--step-0); margin-bottom: var(--sp-1); }
.timeline-card .vet { font-size: var(--step--1); color: var(--violet-600); font-weight: 600; }
.timeline-card p { font-size: var(--step--1); margin-top: var(--sp-2); }

/* ---------------------------------------------------------------------- */
/* DASHBOARD SIDEBAR                                                      */
/* ---------------------------------------------------------------------- */
.app-sidebar {
  background: var(--violet-900); color: #fff; padding: var(--sp-6) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-7);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
@media (max-width: 900px) { .app-sidebar { position: static; height: auto; } }
.app-sidebar nav ul { display: flex; flex-direction: column; gap: var(--sp-1); }
.app-sidebar nav a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0.75em 1em; border-radius: var(--r-md); font-size: var(--step--1); font-weight: 500;
  color: var(--stone-300);
}
.app-sidebar nav a svg { flex: none; opacity: 0.85; }
.app-sidebar nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.app-sidebar nav a.is-active { background: rgba(255,255,255,0.1); color: #fff; box-shadow: inset 3px 0 0 var(--gold-500); }
html[lang="ar"] .app-sidebar nav a.is-active, .rtl .app-sidebar nav a.is-active { box-shadow: inset -3px 0 0 var(--gold-500); }
.sidebar-section-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone-500); padding-inline: 1em; margin-top: var(--sp-3); margin-bottom: var(--sp-1); }
.sidebar-footer { margin-top: auto; padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,0.1); }
.sidebar-user { display: flex; align-items: center; gap: var(--sp-3); }
.sidebar-user img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.sidebar-user .name { font-size: var(--step--1); font-weight: 600; }
.sidebar-user .role { font-size: 0.78rem; color: var(--stone-300); }

.app-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-7); flex-wrap: wrap; }
.app-topbar h1 { font-size: var(--step-3); }

/* ---------------------------------------------------------------------- */
/* DATA TABLE                                                             */
/* ---------------------------------------------------------------------- */
.data-table-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; max-width: 100%; }
.data-table { width: 100%; font-size: var(--step--1); }
.data-table th {
  text-align: start; padding: var(--sp-4) var(--sp-5); background: var(--stone-050);
  font-weight: 600; color: var(--stone-500); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line);
}
.data-table td { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--violet-050); }
.data-table-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.data-table-toolbar .search-box { position: relative; flex: 1; min-width: 220px; max-width: 340px; }
.data-table-toolbar .search-box input { padding-inline-start: 2.6em; }
.data-table-toolbar .search-box svg { position: absolute; inset-inline-start: 0.9em; top: 50%; transform: translateY(-50%); color: var(--stone-300); }
.filter-chip { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.5em 1em; border-radius: var(--r-pill); border: 1.5px solid var(--stone-200); font-size: var(--step--1); font-weight: 500; }
.filter-chip.is-active { border-color: var(--violet-500); background: var(--violet-050); color: var(--violet-700); }

/* expandable row via native <details> — zero JS order detail */
tr.order-row { cursor: default; }
.order-detail-row td { padding: 0; border-bottom: 1px solid var(--line); }
details.order-details { padding: 0; }
details.order-details > summary { list-style: none; cursor: pointer; padding: var(--sp-3) var(--sp-5); font-size: var(--step--1); font-weight: 600; color: var(--violet-600); }
details.order-details > summary::-webkit-details-marker { display: none; }
details.order-details > summary::before { content: "+ "; }
details.order-details[open] > summary::before { content: "– "; }
.order-details-body { padding: 0 var(--sp-5) var(--sp-5); font-size: var(--step--1); color: var(--stone-700); }
/* The order-list summary row packs 5 data points (order#, date, product,
   amount, status) into one grid line — fine on desktop, illegible and
   overflow-prone as 5 columns on a phone. Two columns lets it wrap into
   a short, readable 3-row block instead. */
@media (max-width: 640px) {
  .order-summary-row {
    grid-template-columns: 1fr 1fr !important;
    row-gap: var(--sp-2);
  }
}

/* ---------------------------------------------------------------------- */
/* EMPTY STATES                                                            */
/* ---------------------------------------------------------------------- */
.empty-state { text-align: center; padding: var(--sp-9) var(--sp-5); }
.empty-state .icon-wrap { width: 72px; height: 72px; border-radius: 50%; background: var(--violet-050); display: grid; place-items: center; margin-inline: auto; margin-bottom: var(--sp-5); color: var(--violet-400); }
.empty-state h3 { margin-bottom: var(--sp-2); }
.empty-state p { max-width: 40ch; margin-inline: auto; margin-bottom: var(--sp-5); }

/* ---------------------------------------------------------------------- */
/* PROGRESS / STEPPER (registration wizard)                               */
/* ---------------------------------------------------------------------- */
.stepper { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-8); }
.stepper .step {
  flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); position: relative;
}
.stepper .step .dot {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2px solid var(--stone-200); font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; color: var(--stone-300);
  transition: all var(--dur-base) var(--ease);
}
.stepper .step .dot:hover { border-color: var(--violet-400); color: var(--violet-500); transform: scale(1.08); }
.stepper .step .bar { height: 3px; background: var(--stone-200); border-radius: 2px; margin-top: -20px; margin-inline-start: 32px; }
.stepper .step:last-child .bar { display: none; }
.stepper .step .label { font-size: 0.75rem; color: var(--stone-500); font-weight: 600; }
.stepper .step.is-done .dot { background: var(--violet-500); border-color: var(--violet-500); color: #fff; }
.stepper .step.is-done .bar { background: var(--violet-500); }
.stepper .step.is-current .dot { border-color: var(--violet-500); color: var(--violet-600); box-shadow: 0 0 0 4px var(--violet-100); }
.stepper .step.is-current .label { color: var(--violet-600); }
@media (max-width: 720px) {
  .stepper .step .label { display: none; }
}

.wizard-panel { display: none; animation: fadeUp var(--dur-slow) var(--ease); }
.wizard-panel.is-active { display: block; }
.wizard-actions { display: flex; justify-content: space-between; margin-top: var(--sp-7); gap: var(--sp-3); }

/* Step 4 — two distinct photo uploads (companion portrait vs. paw print).
   Different preview shape (circle vs. rounded square), different accent
   color (violet vs. gold), and separate card framing so the two are
   never mistaken for a single generic upload. */
.photo-upload-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6);
}
@media (max-width: 640px) {
  .photo-upload-grid { grid-template-columns: 1fr; }
}
.photo-upload-block {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5);
  background: var(--paper);
}
.photo-upload-block-paw { background: var(--gold-050); border-color: var(--gold-200); }
.photo-upload-title { font-size: var(--step-0); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.photo-drop {
  width: 140px; height: 140px; background: #fff;
  display: grid; place-items: center; overflow: hidden; flex: none;
}
.photo-drop-portrait { border-radius: 50%; border: 2px dashed var(--stone-300); }
.photo-drop-paw { border-radius: var(--r-lg); border: 2px dashed var(--gold-400); }
.photo-drop.has-image { border-style: solid; }
.photo-drop img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------- */
/* QR / PHONE MOCK FRAME                                                  */
/* ---------------------------------------------------------------------- */
.phone-frame {
  width: min(320px, 82vw); border-radius: 42px; padding: 14px;
  background: var(--violet-900); box-shadow: var(--shadow-lg);
  margin-inline: auto;
}
.phone-screen { background: #fff; border-radius: 30px; overflow: hidden; }
.phone-notch { height: 22px; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 4px; }
.phone-notch::before { content: ""; width: 60px; height: 6px; border-radius: 4px; background: var(--stone-200); }

/* ---------------------------------------------------------------------- */
/* NERO FLOATING ASSISTANT + REGISTRATION CTA                            */
/* ---------------------------------------------------------------------- */
/* Two independent fixed-position elements (not one flex group) so each
   can be placed, sized, and animated on its own — this is what lets the
   CTA get its own real position on mobile instead of being display:none. */
.nero-launcher {
  position: fixed; inset-block-end: var(--sp-6); inset-inline-end: var(--sp-6); z-index: 800;
  display: flex; align-items: center;
}
.nero-btn {
  position: relative;
  width: 66px; height: 66px; border-radius: 50%; background: var(--gradient-brand);
  box-shadow: var(--shadow-violet); display: grid; place-items: center; flex: none;
  border: 3px solid #fff;
  animation: neroFloat 4s ease-in-out infinite;
}
.nero-btn img { width: 40px; height: 40px; }
/* One-time "I'm here" pulse, a few seconds after the page settles —
   never repeats, and stops for good the moment NERO is opened once
   (see nero.js). A single soft ring, not a recurring nudge: NERO reads
   as an ambient companion that's always available, not a conversion
   prompt competing with the registration CTA's own attention cycle. */
.nero-btn.nero-pulse-once::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--gold-400); opacity: 0;
  animation: neroPulseRing 1.8s var(--ease) 2.4s 1;
}
@keyframes neroPulseRing {
  0% { transform: scale(0.88); opacity: 0.85; }
  100% { transform: scale(1.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nero-btn.nero-pulse-once::before { animation: none; display: none; }
}

.cta-float {
  position: fixed; inset-block-end: var(--sp-6); z-index: 799;
  inset-inline-end: calc(var(--sp-6) + 66px + var(--sp-3)); /* sits beside the NERO button */
  background: #fff; color: var(--stone-900); border: 1px solid var(--line); box-shadow: var(--shadow-md);
  padding: 0.7em 1.1em; border-radius: var(--r-pill); font-size: var(--step--1); font-weight: 600;
  white-space: nowrap;
  --cta-dir: -1;      /* which way is "toward center" — flipped below per context */
  --cta-move-x: 78px;
  --cta-move-y: -42px;
  animation: fadeUp var(--dur-slow) var(--ease) 1.2s both, ctaAttention 10s var(--ease) 3s infinite;
}
html[dir="rtl"] .cta-float { --cta-dir: 1; }
html[lang="ar"] .cta-float, .rtl .cta-float { font-family: var(--font-body-ar); }

@keyframes ctaAttention {
  0%   { transform: translate(0,0) scale(1); box-shadow: var(--shadow-md); }
  70%  { transform: translate(0,0) scale(1); box-shadow: var(--shadow-md); }
  80%  { transform: translate(calc(var(--cta-dir) * var(--cta-move-x)), var(--cta-move-y)) scale(1.05); box-shadow: var(--shadow-gold); }
  88%  { transform: translate(calc(var(--cta-dir) * var(--cta-move-x)), var(--cta-move-y)) scale(1.05); box-shadow: var(--shadow-gold); }
  100% { transform: translate(0,0) scale(1); box-shadow: var(--shadow-md); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-float, .nero-btn { animation: none; }
}

/* Mobile: NERO keeps its corner; the CTA moves to the OPPOSITE corner
   (logical start side, so this flips correctly under RTL) instead of
   disappearing. Both get safe-area padding and a width cap so the CTA
   can never physically reach into NERO's space or spill off-screen. */
@media (max-width: 640px) {
  .nero-launcher {
    inset-block-end: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
    inset-inline-end: calc(var(--sp-4) + env(safe-area-inset-right, 0px));
  }
  .nero-btn { width: 58px; height: 58px; }

  .cta-float {
    inset-block-end: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
    inset-inline-end: auto;
    inset-inline-start: calc(var(--sp-4) + env(safe-area-inset-left, 0px));
    max-width: calc(100vw - 58px - var(--sp-4) * 3);
    overflow: hidden; text-overflow: ellipsis;
    font-size: 0.8rem; padding: 0.65em 1em;
    --cta-dir: 1;
    --cta-move-x: 40px;
    --cta-move-y: -34px;
  }
  html[dir="rtl"] .cta-float { --cta-dir: -1; }

  /* env(safe-area-inset-*) is physical (tied to the actual screen edge),
     not logical — inset-inline-end/-start already flip which physical
     side they resolve to under RTL, so the paired env() value must flip
     with them or a notch/home-indicator offset would land on the wrong
     edge in Arabic. */
  html[dir="rtl"] .nero-launcher {
    inset-inline-end: calc(var(--sp-4) + env(safe-area-inset-left, 0px));
  }
  html[dir="rtl"] .cta-float {
    inset-inline-start: calc(var(--sp-4) + env(safe-area-inset-right, 0px));
  }
}

.nero-panel {
  position: fixed; inset-block-end: calc(var(--sp-6) + 82px); inset-inline-end: var(--sp-6);
  width: min(380px, 92vw); max-height: min(560px, 70vh);
  background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  z-index: 850; display: none; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line);
}
.nero-panel.is-open { display: flex; animation: fadeUp var(--dur-base) var(--ease); }
@media (max-width: 640px) {
  .nero-panel { inset-inline-end: var(--sp-4); inset-block-end: calc(var(--sp-4) + 74px); width: min(340px, 90vw); }
}
.nero-panel-head { background: var(--gradient-brand); color: #fff; padding: var(--sp-4) var(--sp-5); display: flex; align-items: center; gap: var(--sp-3); }
.nero-panel-head img { width: 38px; height: 38px; border-radius: 50%; background: #fff; padding: 4px; }
.nero-panel-head .who { flex: 1; }
.nero-panel-head .who strong { display: block; font-size: var(--step-0); }
.nero-panel-head .who span { font-size: 0.78rem; color: var(--violet-100); }
.nero-panel-head button { color: #fff; opacity: 0.8; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; }
.nero-panel-head button:hover { opacity: 1; background: rgba(255,255,255,0.15); }

.nero-body { flex: 1 1 auto; min-height: 90px; overflow-y: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.nero-msg { max-width: 84%; padding: 0.8em 1.1em; border-radius: var(--r-lg); font-size: var(--step--1); line-height: 1.5; animation: neroMsgIn 0.28s var(--ease) both; }
.nero-msg.from-nero { background: var(--violet-050); border-bottom-left-radius: 4px; align-self: flex-start; }
html[lang="ar"] .nero-msg.from-nero, .rtl .nero-msg.from-nero { border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: 4px; align-self: flex-end; }
.nero-msg.from-user { background: var(--violet-600); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
html[lang="ar"] .nero-msg.from-user, .rtl .nero-msg.from-user { border-bottom-right-radius: var(--r-lg); border-bottom-left-radius: 4px; align-self: flex-start; }
@keyframes neroMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Typing indicator: three softly bouncing dots inside a bubble shaped
   exactly like NERO's own messages, so the reply feels like it's being
   composed rather than just appearing after a dead pause. */
.nero-msg.is-typing { display: flex; align-items: center; gap: 4px; padding: 1em 1.15em; }
.nero-msg.is-typing .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--violet-400); animation: neroTypingDot 1.3s ease-in-out infinite; }
.nero-msg.is-typing .dot:nth-child(2) { animation-delay: 0.15s; }
.nero-msg.is-typing .dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes neroTypingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .nero-msg { animation: none; }
  .nero-msg.is-typing .dot { animation: none; opacity: 0.7; }
}

.nero-suggestions {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5) var(--sp-4);
  max-height: 200px; overflow-y: auto; flex-shrink: 0;
}
.nero-suggestions p:first-child { margin-top: 0 !important; }
.nero-suggestions button {
  text-align: start; padding: 0.7em 1em; border: 1.5px solid var(--line); border-radius: var(--r-md);
  font-size: var(--step--1); color: var(--violet-600); font-weight: 500;
}
.nero-suggestions button:hover { border-color: var(--violet-400); background: var(--violet-050); }
.nero-input-row { display: flex; gap: var(--sp-2); padding: var(--sp-4); border-top: 1px solid var(--line); }
.nero-input-row input { flex: 1; }
.nero-input-row button { width: 44px; height: 44px; border-radius: 50%; background: var(--violet-600); color: #fff; display: grid; place-items: center; flex: none; }

/* ---------------------------------------------------------------------- */
/* PUBLIC QR LANDING PAGE (minimal layout)                                */
/* ---------------------------------------------------------------------- */
.minimal-body {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  padding: var(--sp-7) var(--sp-4); background: linear-gradient(180deg, var(--violet-050) 0%, var(--paper) 40%);
}
.qr-wrap { width: 100%; max-width: 420px; margin-inline: auto; }
.qr-logo { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.qr-alert {
  background: var(--gradient-gold); color: var(--violet-900); border-radius: var(--r-lg);
  padding: var(--sp-5); text-align: center; font-weight: 700; margin-bottom: -18px; padding-bottom: calc(var(--sp-5) + 18px);
  box-shadow: var(--shadow-gold); position: relative; z-index: 1;
}
.qr-alert.is-lost { background: linear-gradient(160deg, #E2685C 0%, #C2453A 100%); box-shadow: 0 10px 28px -8px rgba(194,69,58,0.45); color: #fff; }
.qr-card { background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; position: relative; z-index: 0; }
.qr-photo { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.qr-card-body { padding: var(--sp-6); text-align: center; }
.qr-id-pill { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--stone-050); border-radius: var(--r-pill); padding: 0.4em 1em; font-size: var(--step--1); margin-top: var(--sp-4); }
.qr-footer-note { text-align: center; margin-top: var(--sp-6); font-size: var(--step--1); color: var(--stone-500); }

/* ---------------------------------------------------------------------- */
/* PUBLIC ID CARD PAGE — distinct from the QR/"found companion" page:     */
/* a wider dossier layout instead of one narrow contact card, a premium   */
/* gold-framed card visual, and organized identity sections below rather  */
/* than a single urgent action. Same brand language, different purpose:   */
/* this is the full identity record, not an emergency contact screen.     */
/* ---------------------------------------------------------------------- */
.id-wrap { width: 100%; max-width: 640px; margin-inline: auto; }
.id-hero {
  background: linear-gradient(155deg, var(--violet-900) 0%, #1E1333 60%, #140B24 100%);
  border-radius: var(--r-xl); padding: var(--sp-7) var(--sp-6); text-align: center;
  position: relative; overflow: hidden;
}
.id-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 50% 0%, rgba(221,161,59,0.22), transparent 70%);
  pointer-events: none;
}
.id-hero > * { position: relative; z-index: 1; }
.id-card-visual {
  max-width: 340px; margin-inline: auto; border-radius: var(--r-lg);
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.55); overflow: hidden;
  border: 1px solid rgba(221,161,59,0.35);
}
.id-card-visual img { width: 100%; display: block; }
.id-verified-pill {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-5);
  background: rgba(221,161,59,0.15); border: 1px solid rgba(221,161,59,0.4); color: var(--gold-400);
  border-radius: var(--r-pill); padding: 0.4em 1em; font-size: var(--step--1); font-weight: 600;
}
.id-body { padding: var(--sp-7) 0; }
.id-name-row { text-align: center; margin-bottom: var(--sp-7); }
.id-name-row h1 { font-size: var(--step-4); }
.id-name-row p { margin-top: var(--sp-2); }
.id-section { margin-bottom: var(--sp-7); }
.id-section h2 { font-size: var(--step-0); text-transform: uppercase; letter-spacing: 0.05em; color: var(--stone-500); margin-bottom: var(--sp-4); }
.id-row { display: flex; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-3); border-bottom: 1px solid var(--line); font-size: var(--step--1); }
.id-row:last-child { border-bottom: none; }
.id-row .id-row-label { color: var(--stone-500); }
.id-row .id-row-value { font-weight: 600; text-align: end; }
@media (max-width: 480px) {
  .id-hero { padding: var(--sp-6) var(--sp-4); }
  .id-name-row h1 { font-size: var(--step-3); }
  .id-row { flex-direction: column; gap: var(--sp-1); }
  .id-row .id-row-value { text-align: start; }
}

/* ---------------------------------------------------------------------- */
/* MULTI-COMPANION CALCULATOR ("PETICA Family Pack")                     */
/* ---------------------------------------------------------------------- */
.calc-panel {
  background: var(--violet-900); border-radius: var(--r-xl); padding: var(--sp-7);
  color: #fff; position: relative; overflow: hidden;
}
.calc-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 85% 0%, rgba(221,161,59,0.22), transparent 60%),
              radial-gradient(50% 60% at 0% 100%, rgba(124,87,188,0.35), transparent 60%);
}
.calc-panel > * { position: relative; z-index: 1; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: var(--sp-4); align-items: end; }
@media (max-width: 860px) { .calc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .calc-grid { grid-template-columns: 1fr; } }
.calc-field label { display: block; font-size: var(--step--1); color: var(--stone-300); margin-bottom: var(--sp-2); font-weight: 600; }
.calc-field select, .calc-field input[type="number"] {
  background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.18); color: #fff;
}
.calc-field select option { color: var(--stone-900); }
.calc-field input::placeholder { color: rgba(255,255,255,0.4); }
.calc-panel .btn-gold { width: 100%; }

.calc-result { margin-top: var(--sp-7); border-top: 1px solid rgba(255,255,255,0.14); padding-top: var(--sp-6); display: none; }
.calc-result.is-visible { display: block; animation: fadeUp var(--dur-slow) var(--ease); }
.calc-line { display: flex; justify-content: space-between; padding-block: var(--sp-2); font-size: var(--step--1); color: var(--stone-300); }
.calc-line strong { color: #fff; font-weight: 600; }
.calc-line.is-discount strong { color: var(--gold-400); }
.calc-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px dashed rgba(255,255,255,0.2); }
.calc-total .label { font-size: var(--step-0); font-weight: 600; }
.calc-total .amount { font-family: var(--font-display); font-size: var(--step-4); color: var(--gold-400); line-height: 1; }
.calc-saved {
  margin-top: var(--sp-5); background: rgba(221,161,59,0.14); border: 1px solid rgba(221,161,59,0.35);
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); text-align: center; font-weight: 600;
}
.calc-saved span { font-family: var(--font-display); color: var(--gold-400); font-size: var(--step-1); }

/* ---------------------------------------------------------------------- */
/* THE BILLION MOVEMENT — monumental counter treatment                   */
/* ---------------------------------------------------------------------- */
.movement-hero { background: radial-gradient(ellipse 90% 70% at 50% -10%, #3B2564 0%, var(--violet-900) 55%, #140B24 100%); position: relative; overflow: hidden; }
.movement-hero .motif-field { opacity: 0.5; }
/* Ambient starfield — a handful of small dots with a slow, staggered
   twinkle. CSS-only (no canvas/JS/images), so it costs almost nothing
   at runtime while giving the section real atmospheric depth. */
.motif-particle {
  border-radius: 50%; background: #fff;
  animation: motifTwinkle 5s ease-in-out infinite;
}
@keyframes motifTwinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.85); }
  50% { opacity: 0.75; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .motif-particle { animation: none; opacity: 0.35; }
}
.movement-orbit { position: relative; width: min(560px, 88vw); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.movement-orbit::before, .movement-orbit::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(221,161,59,0.22);
}
.movement-orbit::after { inset: 12%; border-color: rgba(255,255,255,0.1); }
.movement-ring-glow {
  position: absolute; inset: -20%; border-radius: 50%;
  background: radial-gradient(circle, rgba(221,161,59,0.25) 0%, transparent 65%);
  filter: blur(20px); animation: countGlow 4s ease-in-out infinite;
}
.movement-core { position: relative; z-index: 2; text-align: center; }
.movement-target { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.08em; color: var(--stone-300); text-transform: uppercase; }
.movement-count {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 7vw, 5.2rem); color: #fff; line-height: 1; margin-top: var(--sp-2);
  text-shadow: 0 0 28px rgba(221,161,59,0.55), 0 0 64px rgba(221,161,59,0.25);
}
.movement-remaining-label { margin-top: var(--sp-3); font-size: var(--step--1); color: var(--gold-400); font-weight: 600; }
.movement-satellite {
  position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-400);
  box-shadow: 0 0 12px 2px rgba(221,161,59,0.7);
  animation: orbitSpin 18s linear infinite;
}
/* Two extra satellites at different radii/speeds/directions — reusing
   the same orbitSpin keyframe via a custom property for radius instead
   of duplicating it, so the ring reads as a small system in motion
   rather than one lonely dot. */
.movement-satellite-2 {
  position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.85);
  box-shadow: 0 0 8px 1px rgba(255,255,255,0.5);
  animation: orbitSpin 11s linear infinite reverse;
  --orbit-radius: 168px;
}
.movement-satellite-3 {
  position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-300, #E8C97A);
  box-shadow: 0 0 6px 1px rgba(221,161,59,0.6);
  animation: orbitSpin 26s linear infinite;
  --orbit-radius: 250px;
}
@keyframes orbitSpin { from { transform: rotate(0deg) translateX(var(--orbit-radius, 230px)) rotate(0deg); } to { transform: rotate(360deg) translateX(var(--orbit-radius, 230px)) rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  .movement-satellite, .movement-satellite-2, .movement-satellite-3, .movement-ring-glow { animation: none; }
}
@media (max-width: 640px) { .movement-satellite { animation-name: orbitSpinSmall; } }
@keyframes orbitSpinSmall { from { transform: rotate(0deg) translateX(140px) rotate(0deg); } to { transform: rotate(360deg) translateX(140px) rotate(-360deg); } }

/* ---------------------------------------------------------------------- */
/* PARTNERS MARQUEE                                                        */
/* ---------------------------------------------------------------------- */
.partners-track { display: flex; gap: var(--sp-9); align-items: center; animation: marquee 28s linear infinite; width: max-content; }
.partners-strip { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.partners-track img, .partners-track span { filter: grayscale(1); transition: opacity var(--dur-base); font-family: var(--font-display); font-size: 1.4rem; color: var(--stone-500); white-space: nowrap; }
.partners-track span:hover { color: var(--violet-600); filter: none; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .partners-track { animation: none; } }

/* ---------------------------------------------------------------------- */
/* PETICA WORLD — dark, atmospheric future-projects page                  */
/* ---------------------------------------------------------------------- */
.world-body { background: #0B0714; color: var(--stone-200); }
.world-hero { padding-block: var(--sp-10) var(--sp-8); text-align: center; position: relative; overflow: hidden; }
.world-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 0%, rgba(124,87,188,0.35), transparent 70%);
  pointer-events: none;
  animation: worldGlowDrift 9s ease-in-out infinite;
}
@keyframes worldGlowDrift {
  0%, 100% { opacity: 0.85; transform: translateY(0) scale(1); }
  50% { opacity: 1; transform: translateY(-2%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .world-hero::before { animation: none; } }
.world-hero h1 { color: #fff; position: relative; z-index: 1; }
.world-hero p { color: var(--stone-300); position: relative; z-index: 1; }
.world-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 980px) { .world-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .world-grid { grid-template-columns: 1fr; } }
.world-card {
  position: relative; border-radius: var(--r-xl); padding: var(--sp-6); min-height: 280px;
  display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08); background-color: #0B0714;
  background-size: cover; background-position: center;
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-base);
}
/* Permanent scrim: always present so card copy stays legible over the
   photo underneath, regardless of hover state. */
.world-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(195deg, rgba(11,7,20,0.35) 0%, rgba(11,7,20,0.55) 45%, rgba(11,7,20,0.93) 100%);
}
/* Decorative color wash: brand-tinted, brightens on hover, sits above the
   scrim so it reads as warmth on the photo rather than washing it out. */
.world-card::after {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.55; transition: opacity var(--dur-slow);
  background: radial-gradient(120% 90% at var(--glow-x, 50%) var(--glow-y, 0%), var(--glow-color, rgba(124,87,188,0.5)), transparent 60%);
}
.world-card:hover { transform: translateY(-6px); border-color: rgba(221,161,59,0.4); }
.world-card:hover::after { opacity: 0.9; }
/* A soft diagonal light sweep on hover — reads as "there's more here than
   the static card shows," without literally inventing new product detail
   for something that doesn't exist yet. */
.world-card-shimmer {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
  background-size: 250% 250%; background-position: 130% 130%;
  opacity: 0; transition: opacity var(--dur-base) var(--ease);
}
.world-card:hover .world-card-shimmer { opacity: 1; background-position: -30% -30%; transition: background-position 1.1s var(--ease), opacity var(--dur-base) var(--ease); }
.world-card-status {
  position: absolute; top: var(--sp-5); left: var(--sp-5); z-index: 1;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 0.3em 0.75em; border-radius: var(--r-pill);
  background: rgba(11,7,20,0.55); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.18); color: var(--stone-200);
}
html[dir="rtl"] .world-card-status, .rtl .world-card-status { left: auto; right: var(--sp-5); }
.world-card .tag { position: relative; z-index: 1; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-400); margin-bottom: var(--sp-3); }
.world-card h3 { position: relative; z-index: 1; color: #fff; font-size: var(--step-1); text-shadow: 0 2px 12px rgba(0,0,0,0.4); }
.world-card p { position: relative; z-index: 1; color: var(--stone-200); margin-top: var(--sp-2); font-size: var(--step--1); }
.world-card .glyph { position: absolute; top: var(--sp-5); right: var(--sp-5); opacity: 0.55; z-index: 1; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5)); transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.world-card:hover .glyph { opacity: 0.9; transform: scale(1.08); }
html[dir="rtl"] .world-card .glyph { right: auto; left: var(--sp-5); }
@media (prefers-reduced-motion: reduce) {
  .world-card, .world-card .glyph, .world-card-shimmer { transition: none; }
  .world-card:hover { transform: none; }
}

/* Header/footer go dark on PETICA World for full atmospheric immersion.
   The brand logo itself switches to the official white-variant asset at
   build time (see site_header() in build.py) rather than filtering the
   purple asset — filtering would count as "altering" the official mark. */
.world-body .site-header { background: rgba(11,7,20,0.82); border-bottom-color: rgba(255,255,255,0.08); }
.world-body .main-nav a { color: var(--stone-300); }
.world-body .main-nav a:hover, .world-body .main-nav a.is-active { color: #fff; }
.world-body .lang-switch { border-color: rgba(255,255,255,0.2); }
.world-body .lang-switch a { color: var(--stone-300); }
.world-body .btn-ghost { color: var(--stone-200); }
.world-body .icon-btn { border-color: rgba(255,255,255,0.2); color: #fff; }
/* ---------------------------------------------------------------------- */
/* MISC UTILITIES                                                         */
/* ---------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-gold { color: var(--gold-600); }
.text-violet { color: var(--violet-600); }
.text-muted { color: var(--stone-500); }
.mono { font-family: var(--font-mono); }
.mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); } .mb-6 { margin-bottom: var(--sp-6); } .mb-8 { margin-bottom: var(--sp-8); }
.divider { height: 1px; background: var(--line); border: none; margin-block: var(--sp-6); }

.avatar { border-radius: 50%; object-fit: cover; flex: none; }
.demo-banner {
  background: var(--gold-100); color: var(--gold-700); border: 1px dashed var(--gold-500);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-5); font-size: var(--step--1); font-weight: 600;
  display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-6);
}
.operation-order-row{display:grid;grid-template-columns:2fr 1.4fr 2.4fr 1fr 1.4fr;align-items:center;padding:var(--sp-4) var(--sp-5)}
@media(max-width:760px){.operation-order-row{grid-template-columns:1fr auto;gap:var(--sp-2)}.operation-order-row>span:nth-child(2),.operation-order-row>span:nth-child(3){grid-column:1/-1}.data-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}}
.wizard-progress{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;overflow-x:auto;padding-bottom:4px}
.wizard-progress button{border:0;border-bottom:3px solid var(--line);background:transparent;color:var(--stone-500);padding:8px 4px;font:inherit;font-size:.72rem;white-space:nowrap;cursor:pointer}
.wizard-progress button.is-active{border-color:var(--violet-600);color:var(--violet-700);font-weight:700}.wizard-progress button.is-complete{border-color:var(--success);color:var(--stone-800)}
.wizard-preview{width:100%;max-height:260px;object-fit:cover;border-radius:var(--radius-md);margin-top:var(--sp-3);border:1px solid var(--line)}
.production-qr{width:132px;height:132px;background:#fff;border:1px solid var(--line);padding:4px}.production-qr+figcaption{text-align:center;font-size:.72rem;color:var(--stone-500)}
@media(max-width:760px){.companion-wizard{padding:var(--sp-4)!important}.wizard-progress{grid-template-columns:repeat(7,110px)}}

/* Final mobile/a11y guardrails: interactive targets remain comfortably
   tappable and recovery/assistant controls never escape a narrow viewport. */
@media (pointer: coarse) {
  button, .btn, .icon-btn, input[type="radio"], input[type="checkbox"] { min-height: 44px; }
}
.recovery-location { max-width: 100%; }
.recovery-location .btn { white-space: normal; text-align: center; }
[dir="rtl"] .nero-msg, [dir="rtl"] .recovery-location { text-align: right; }
@media (max-width: 480px) {
  .nero-panel { width: calc(100vw - 24px); max-width: none; inset-inline: 12px; }
  .app-topbar { align-items: flex-start; }
  .data-table { min-width: 680px; }
}