/* =============================================================================
   LaboraIQ Health — design system
   Shared by the landing site, the customer panel and the legal pages.
   Clinical + premium: deep teal, cool slate neutrals, restrained sand accent.
   Light/dark, LTR/RTL (logical properties), print-friendly.
   ========================================================================== */

:root {
  /* brand */
  --teal-900:#062f2e; --teal-800:#0a4a47; --teal-700:#0a6f6b; --teal-600:#0e8f8a;
  --teal-500:#12a7a0; --teal-400:#2bb3ac; --teal-100:#d9f0ee; --teal-50:#eef8f7;
  --sand:#c8a86b; --sand-soft:#f6efe1;

  /* surface + ink (neutrals biased slightly toward the brand hue) */
  --bg:#f5f8f9;
  --bg-alt:#eef3f5;
  --surface:#ffffff;
  --surface-2:#f2f6f8;
  --border:#dce6ea;
  --border-strong:#c3d3d9;
  --text:#0f1f26;
  --text-2:#3b515b;
  --muted:#647a85;

  --primary:var(--teal-600);
  --primary-strong:var(--teal-700);
  --primary-soft:var(--teal-50);
  --on-primary:#ffffff;

  /* semantic */
  --ok:#10805f; --ok-bg:#e2f5ee;
  --warn:#a86a08; --warn-bg:#fbf0d9;
  --bad:#c02b39; --bad-bg:#fbe7e9;
  --info:#2358c9; --info-bg:#e6eefc;

  --shadow-sm:0 1px 2px rgba(12,38,46,.05), 0 1px 3px rgba(12,38,46,.06);
  --shadow:0 2px 6px rgba(12,38,46,.05), 0 12px 32px rgba(12,38,46,.08);
  --shadow-lg:0 8px 24px rgba(12,38,46,.08), 0 30px 60px rgba(12,38,46,.12);

  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px;
  --maxw:1160px;

  --step--1:clamp(.82rem,.8rem + .1vw,.88rem);
  --step-0:clamp(.98rem,.95rem + .15vw,1.05rem);
  --step-1:clamp(1.15rem,1.08rem + .35vw,1.35rem);
  --step-2:clamp(1.4rem,1.25rem + .7vw,1.85rem);
  --step-3:clamp(1.8rem,1.5rem + 1.4vw,2.6rem);
  --step-4:clamp(2.2rem,1.7rem + 2.4vw,3.6rem);

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --arabic:"SF Arabic","Segoe UI",Tahoma,"Noto Naskh Arabic","Traditional Arabic",serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#080f12; --bg-alt:#0c161a; --surface:#111e23; --surface-2:#17272d;
    --border:#22373f; --border-strong:#2e4a54;
    --text:#e8f1f3; --text-2:#b3c7ce; --muted:#89a2ac;
    --primary:var(--teal-400); --primary-strong:var(--teal-500); --primary-soft:#0d2b2b;
    --on-primary:#04181a;
    --ok-bg:#0d3328; --warn-bg:#33280f; --bad-bg:#361a1e; --info-bg:#12203c;
    --sand-soft:#2a2418;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 2px 8px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.4);
    --shadow-lg:0 10px 30px rgba(0,0,0,.45), 0 40px 80px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --bg:#080f12; --bg-alt:#0c161a; --surface:#111e23; --surface-2:#17272d;
  --border:#22373f; --border-strong:#2e4a54;
  --text:#e8f1f3; --text-2:#b3c7ce; --muted:#89a2ac;
  --primary:var(--teal-400); --primary-strong:var(--teal-500); --primary-soft:#0d2b2b;
  --on-primary:#04181a;
  --ok-bg:#0d3328; --warn-bg:#33280f; --bad-bg:#361a1e; --info-bg:#12203c;
  --sand-soft:#2a2418;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 2px 8px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.4);
  --shadow-lg:0 10px 30px rgba(0,0,0,.45), 0 40px 80px rgba(0,0,0,.5);
}

/* ---------- base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:var(--step-0); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
html[lang="ar"] body { font-family:var(--arabic); line-height:1.85; }
[hidden] { display:none !important; }

h1,h2,h3,h4 { margin:0 0 .5em; line-height:1.15; letter-spacing:-.02em; text-wrap:balance; font-weight:750; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { letter-spacing:0; line-height:1.35; }
h1 { font-size:var(--step-4); }
h2 { font-size:var(--step-3); }
h3 { font-size:var(--step-1); }
p { margin:0 0 1em; color:var(--text-2); }
a { color:var(--primary-strong); text-decoration:none; }
a:hover { text-decoration:underline; }
img,svg { max-width:100%; }
:focus-visible { outline:2px solid var(--primary); outline-offset:3px; border-radius:4px; }
.muted { color:var(--muted); }
.small { font-size:var(--step--1); }
.center { text-align:center; }
.nowrap { white-space:nowrap; }

.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); }
.section { padding-block:clamp(3.5rem,8vw,7rem); }
.section--alt { background:var(--bg-alt); }
.section--tight { padding-block:clamp(2.5rem,5vw,4rem); }

.kicker {
  display:inline-block; font-size:.74rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--primary-strong);
  background:var(--primary-soft); border:1px solid color-mix(in srgb,var(--primary) 25%,transparent);
  padding:.35rem .8rem; border-radius:100px; margin-bottom:1rem;
}
html[lang="ar"] .kicker { letter-spacing:0; }
.section-head { max-width:60ch; margin-bottom:clamp(2rem,4vw,3rem); }
.section-head.center { margin-inline:auto; }
.section-head p { font-size:var(--step-1); color:var(--muted); margin:0; }

/* ---------- buttons ---------- */
.btn {
  --btn-bg:var(--primary); --btn-fg:var(--on-primary); --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font:inherit; font-weight:650; line-height:1; cursor:pointer;
  padding:.85rem 1.4rem; border-radius:100px; border:1px solid var(--btn-bd);
  background:var(--btn-bg); color:var(--btn-fg);
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.06); text-decoration:none; white-space:nowrap;
}
.btn:hover { text-decoration:none; transform:translateY(-1px); box-shadow:var(--shadow); }
.btn:active { transform:translateY(0); }
.btn:disabled { opacity:.55; cursor:default; transform:none; box-shadow:none; }
.btn--lg { padding:1rem 1.9rem; font-size:var(--step-1); }
.btn--ghost { --btn-bg:var(--surface); --btn-fg:var(--text); --btn-bd:var(--border-strong); }
.btn--quiet { --btn-bg:transparent; --btn-fg:var(--text); --btn-bd:transparent; box-shadow:none; }
.btn--quiet:hover { --btn-bg:var(--surface-2); box-shadow:none; }
.btn--block { width:100%; }
.btn--danger { --btn-bg:var(--bad); --btn-fg:#fff; }

.icon-btn {
  display:inline-grid; place-items:center; width:38px; height:38px; flex:0 0 auto;
  border-radius:10px; border:1px solid var(--border); background:var(--surface);
  color:var(--text); cursor:pointer; font:inherit; font-size:1rem;
}
.icon-btn:hover { background:var(--surface-2); }

/* ---------- cards ---------- */
.card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:clamp(1.2rem,2.5vw,1.8rem); box-shadow:var(--shadow-sm);
}
.card--pad-lg { padding:clamp(1.6rem,3vw,2.4rem); }
.grid { display:grid; gap:clamp(.9rem,2vw,1.4rem); }
.grid--2 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid--3 { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.grid--4 { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }

.feat-icon {
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--primary-soft); color:var(--primary-strong); font-size:1.35rem;
  margin-bottom:.9rem; border:1px solid color-mix(in srgb,var(--primary) 18%,transparent);
}

/* ---------- forms ---------- */
label { display:block; font-weight:600; font-size:var(--step--1); margin-bottom:.35rem; }
input,select,textarea {
  width:100%; font:inherit; color:var(--text); background:var(--surface);
  border:1px solid var(--border-strong); border-radius:var(--r-sm);
  padding:.7rem .85rem; transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus {
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent);
}
textarea { resize:vertical; }
::placeholder { color:var(--muted); opacity:.75; }
.field { margin-bottom:1rem; }
.form-error {
  color:var(--bad); background:var(--bad-bg); border:1px solid color-mix(in srgb,var(--bad) 25%,transparent);
  border-radius:var(--r-sm); padding:.6rem .8rem; font-size:var(--step--1); margin:.6rem 0 0;
}
.form-ok {
  color:var(--ok); background:var(--ok-bg); border:1px solid color-mix(in srgb,var(--ok) 25%,transparent);
  border-radius:var(--r-sm); padding:.6rem .8rem; font-size:var(--step--1); margin:.6rem 0 0;
}

/* ---------- header / footer ---------- */
.site-header {
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb,var(--surface) 85%,transparent);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--border);
}
.site-header .wrap { display:flex; align-items:center; gap:1rem; min-height:66px; }
.brand { display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; }
.brand:hover { text-decoration:none; }
.brand img { width:36px; height:36px; border-radius:10px; }
.brand b { font-size:1.02rem; font-weight:800; letter-spacing:-.02em; display:block; line-height:1.1; }
.brand span { font-size:.7rem; color:var(--muted); letter-spacing:.02em; }
.nav { display:flex; align-items:center; gap:.3rem; margin-inline-start:auto; }
.nav a.navlink {
  padding:.5rem .75rem; border-radius:8px; color:var(--text-2); font-size:var(--step--1); font-weight:600;
}
.nav a.navlink:hover { background:var(--surface-2); color:var(--text); text-decoration:none; }
.lang-select { width:auto; min-width:62px; padding:.45rem .5rem; font-weight:700; font-size:var(--step--1); }

/* Language switcher: real links, so both language versions are reachable by a
   crawler — and by anyone without JavaScript. */
.lang-links {
  display:inline-flex; align-items:center; gap:2px; padding:2px;
  border:1px solid var(--border); border-radius:100px; background:var(--surface-2);
}
.lang-link {
  display:inline-grid; place-items:center; min-width:32px; padding:.3rem .55rem;
  border-radius:100px; font-size:var(--step--1); font-weight:800; line-height:1.15;
  color:var(--text-2); text-decoration:none;
}
a.lang-link:hover { background:var(--surface); color:var(--text); text-decoration:none; }
.lang-link.is-active { background:var(--primary); color:var(--on-primary); }

.nav-toggle { display:none; }
@media (max-width:900px) {
  .nav .navlink, .nav .desktop-only { display:none; }
  .nav-toggle { display:inline-grid; }
  .nav.open { position:absolute; inset-inline:0; top:66px; background:var(--surface);
    border-bottom:1px solid var(--border); flex-direction:column; align-items:stretch;
    padding:1rem clamp(1rem,4vw,2rem) 1.4rem; gap:.4rem; box-shadow:var(--shadow); }
  .nav.open .navlink, .nav.open .desktop-only { display:block; }
  .nav.open .navlink { padding:.7rem .5rem; font-size:var(--step-0); }
}

.site-footer { background:var(--surface); border-top:1px solid var(--border); padding-block:3rem 2rem; }
.foot-grid { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.foot-col h4 { font-size:var(--step--1); text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:.8rem; font-weight:800; }
html[lang="ar"] .foot-col h4 { letter-spacing:0; }
.foot-col a { display:block; padding:.28rem 0; color:var(--text-2); font-size:var(--step--1); }
.foot-bottom {
  margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:.8rem 1.5rem; justify-content:space-between;
  font-size:var(--step--1); color:var(--muted);
}

/* ---------- misc ---------- */
.badge {
  display:inline-flex; align-items:center; gap:.4rem; font-size:.75rem; font-weight:700;
  padding:.3rem .7rem; border-radius:100px;
  background:var(--primary-soft); color:var(--primary-strong);
  border:1px solid color-mix(in srgb,var(--primary) 22%,transparent);
}
.spinner {
  width:16px; height:16px; flex:0 0 auto; border-radius:50%;
  border:2px solid color-mix(in srgb,currentColor 25%,transparent); border-top-color:currentColor;
  animation:spin .7s linear infinite;
}
.spinner--lg { width:34px; height:34px; border-width:3px; color:var(--primary); }
@keyframes spin { to { transform:rotate(360deg); } }

.overlay {
  position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  background:color-mix(in srgb,var(--bg) 80%,transparent); backdrop-filter:blur(4px);
}
.overlay-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); padding:2.2rem 2.4rem; max-width:360px; text-align:center;
  display:grid; gap:.6rem; justify-items:center;
}
.overlay-card p { margin:0; }

.skip-link {
  position:absolute; inset-inline-start:-9999px; top:0; z-index:200;
  background:var(--primary); color:var(--on-primary); padding:.7rem 1.1rem; border-radius:0 0 8px 0;
}
.skip-link:focus { inset-inline-start:0; }

.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }

@media print {
  .no-print, .site-header, .site-footer { display:none !important; }
  body { background:#fff; }
}