/* ============================================================
   DezSMS — Design System (base, direction-agnostic)
   Shared by every page, EN and AR alike. Written mostly with
   logical properties (inline-start/end, block-start/end) so it
   already reads correctly in both directions. Arabic pages load
   this file, then additionally load rtl.css for the handful of
   spots (icon mirroring, chat-bubble tail, sidebar edge, phone
   card gradients) that logical properties can't express — see
   rtl.css. HTML structure/classes are identical between en/ and
   ar/ pages; only text content, dir/lang attributes, and the
   extra stylesheet link differ.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Almarai:wght@400;500;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

/* ---------- Tokens ---------- */
:root{
  /* brand blue family (mandated: #5984b0 core) */
  --ink:#16232e;
  --blue-900:#213847;
  --blue-700:#35576f;
  --blue-500:#5984b0;
  --blue-400:#7ca0c3;
  --blue-300:#9dbad2;
  --blue-100:#eaf1f6;
  --paper:#f7fafc;
  --white:#ffffff;

  /* green accent, from logo */
  --green-700:#3a8a46;
  --green-500:#4fae5c;
  --green-100:#e7f5ea;

  /* status utility colors, used by the delivery ticker + badges */
  --amber-500:#e0a83e;
  --amber-100:#fbf0dc;
  --red-500:#d1533d;
  --red-100:#fbe7e2;

  --border:#dce6ed;
  --border-strong:#c3d3e0;
  --muted:#5b7186;

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --radius-pill:999px;

  --shadow-sm:0 1px 2px rgba(22,35,46,.06), 0 1px 1px rgba(22,35,46,.04);
  --shadow-md:0 8px 24px rgba(22,35,46,.09);
  --shadow-lg:0 20px 48px rgba(22,35,46,.14);

  --container:1200px;
  --nav-h:64px;
  --util-h:40px;
  --ease:cubic-bezier(.4,0,.2,1);
}

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

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; }
h1,h2,h3,h4,p,figure{ margin:0; }

:focus-visible{ outline:3px solid var(--green-500); outline-offset:2px; border-radius:4px; }

/* ---------- Typography ---------- */
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--blue-900); font-weight:700; line-height:1.15; }
h1{ font-size:clamp(2rem, 1.4rem + 2.6vw, 3.4rem); letter-spacing:-.01em; }
h2{ font-size:clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); letter-spacing:-.005em; }
h3{ font-size:1.3rem; }
h4{ font-size:1.05rem; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green-700); font-weight:600;
  margin-block-end:14px;
}
.eyebrow::before{ content:""; width:18px; height:2px; background:var(--green-500); border-radius:2px; }
.lede{ color:var(--muted); font-size:1.08rem; max-width:56ch; }
.mono{ font-family:var(--font-mono); }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:20px; }
section{ padding-block:48px; }
.section-head{ max-width:640px; margin-block-end:36px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.stack{ display:flex; flex-direction:column; }
.grid{ display:grid; gap:24px; }
@media (min-width:720px){
  .grid.cols-2{ grid-template-columns:repeat(2,1fr); }
  .grid.cols-3{ grid-template-columns:repeat(3,1fr); }
  .grid.cols-4{ grid-template-columns:repeat(4,1fr); }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:13px 24px; border-radius:var(--radius-pill);
  font-weight:600; font-size:.96rem; white-space:nowrap;
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
  border:1.5px solid transparent;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--green-500); color:var(--white); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--green-700); box-shadow:var(--shadow-md); }
.btn-secondary{ background:var(--blue-700); color:var(--white); }
.btn-secondary:hover{ background:var(--blue-900); }
.btn-outline{ background:transparent; border-color:var(--border-strong); color:var(--blue-900); }
.btn-outline:hover{ border-color:var(--blue-500); background:var(--blue-100); }
.btn-ghost-white{ background:rgba(255,255,255,.12); color:var(--white); border-color:rgba(255,255,255,.4); }
.btn-ghost-white:hover{ background:rgba(255,255,255,.22); }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 16px; font-size:.85rem; }

/* ---------- Utility bar ---------- */
.util-bar{ background:var(--blue-900); color:var(--blue-100); font-size:.82rem; }
.util-bar .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:var(--util-h); }
.util-contacts{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.util-contacts a{ display:inline-flex; align-items:center; gap:.45em; color:var(--blue-100); opacity:.92; }
.util-contacts a:hover{ opacity:1; color:var(--white); }
.util-contacts svg{ width:14px; height:14px; flex:none; }
.util-right{ display:flex; align-items:center; gap:14px; }
.util-social{ display:flex; align-items:center; gap:10px; }
.util-social a{ width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.1); }
.util-social a:hover{ background:var(--green-500); }
.util-social svg{ width:13px; height:13px; }
.lang-switch{ display:inline-flex; align-items:center; gap:.4em; font-family:var(--font-mono); letter-spacing:.04em; color:var(--white); border-inline-start:1px solid rgba(255,255,255,.25); padding-inline-start:14px; }
.lang-switch:hover{ color:var(--green-500); }
.dash-topbar .lang-switch{ color:var(--blue-700); font-weight:600; }
.dash-topbar .lang-switch:hover{ color:var(--blue-900); }

/* ---------- Header / main nav ---------- */
.site-header{ position:sticky; top:0; z-index:40; background:rgba(247,250,252,.92); backdrop-filter:blur(10px); border-block-end:1px solid var(--border); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:var(--nav-h); }
.brand{ display:flex; align-items:center; }
.brand img{ height:34px; width:auto; }
.main-nav{ display:none; }
.main-nav ul{ display:flex; align-items:center; gap:6px; }
.main-nav a{
  display:inline-block; padding:10px 14px; border-radius:var(--radius-pill);
  font-weight:500; font-size:.95rem; color:var(--blue-900);
  transition:background-color .15s var(--ease), color .15s var(--ease);
}
.main-nav a:hover{ background:var(--blue-100); }
.main-nav a.is-active{ background:var(--blue-500); color:var(--white); }
.header-actions{ display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:var(--radius-sm); border:1.5px solid var(--border-strong); }
.nav-toggle svg{ width:20px; height:20px; }
@media (min-width:960px){
  .main-nav{ display:block; }
  .nav-toggle{ display:none; }
}

/* mobile drawer */
.mobile-drawer{
  position:fixed; inset:0; z-index:60; visibility:hidden; pointer-events:none;
}
.mobile-drawer[data-open="true"]{ visibility:visible; pointer-events:auto; }
.mobile-drawer .backdrop{ position:absolute; inset:0; background:rgba(22,35,46,.5); opacity:0; transition:opacity .2s var(--ease); }
.mobile-drawer[data-open="true"] .backdrop{ opacity:1; }
.mobile-drawer .panel{
  position:absolute; inset-block:0; inset-inline-start:0; width:min(84vw,340px);
  background:var(--white); box-shadow:var(--shadow-lg); padding:22px;
  transform:translateX(-105%); transition:transform .25s var(--ease);
  display:flex; flex-direction:column; gap:22px; overflow-y:auto;
}
.mobile-drawer[data-open="true"] .panel{ transform:translateX(0); }
.mobile-drawer .panel-head{ display:flex; align-items:center; justify-content:space-between; }
.mobile-drawer nav ul{ display:flex; flex-direction:column; gap:2px; }
.mobile-drawer nav a{ display:block; padding:12px 10px; border-radius:var(--radius-sm); font-weight:600; color:var(--blue-900); }
.mobile-drawer nav a:hover{ background:var(--blue-100); }
.mobile-drawer .drawer-contacts{ border-block-start:1px solid var(--border); padding-block-start:18px; display:flex; flex-direction:column; gap:10px; font-size:.9rem; color:var(--muted); }
.mobile-drawer .drawer-contacts a{ color:var(--blue-700); font-weight:600; }

/* ---------- Hero ---------- */
.hero{ padding-block:56px 40px; overflow:hidden; }
.hero .container{ display:grid; gap:44px; align-items:center; }
@media (min-width:960px){ .hero .container{ grid-template-columns:1.05fr .95fr; } }
.kw-badge{ display:inline-flex; align-items:center; gap:8px; background:var(--blue-100); color:var(--blue-900); padding-block:7px; padding-inline:10px 14px; border-radius:var(--radius-pill); font-size:.82rem; font-weight:600; margin-block-end:16px; }
.kw-badge .flag{ font-size:1.05rem; line-height:1; }
.hero-stats{ display:flex; gap:28px; margin-block-start:28px; flex-wrap:wrap; }
.hero-stats .stat b{ display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--blue-900); }
.hero-stats .stat span{ font-size:.82rem; color:var(--muted); }
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-block-start:30px; }

/* signature: live composer phone mockup */
.composer{
  position:relative; margin-inline:auto; width:min(100%,300px);
  background:linear-gradient(160deg,var(--blue-900),var(--blue-700));
  border-radius:36px; padding:14px; box-shadow:var(--shadow-lg);
}
.composer::before{ content:""; position:absolute; inset-inline:0; top:26px; height:5px; }
.composer-screen{ background:var(--white); border-radius:24px; padding:18px 16px 16px; min-height:400px; display:flex; flex-direction:column; }
.composer-top{ display:flex; align-items:center; gap:10px; padding-block-end:14px; border-block-end:1px solid var(--border); margin-block-end:14px; }
.composer-top .avatar{ width:34px; height:34px; border-radius:50%; background:var(--blue-100); display:flex; align-items:center; justify-content:center; color:var(--blue-700); font-family:var(--font-mono); font-size:.7rem; font-weight:700; }
.composer-top b{ display:block; font-size:.88rem; color:var(--blue-900); }
.composer-top span{ font-size:.72rem; color:var(--green-700); font-family:var(--font-mono); }
.composer-bubble{ background:var(--blue-100); color:var(--blue-900); padding:12px 14px; border-radius:16px 16px 16px 4px; font-size:.86rem; max-width:88%; margin-block-end:14px; }
.composer-counter{ font-family:var(--font-mono); font-size:.72rem; color:var(--muted); display:flex; justify-content:space-between; margin-block-end:10px; }
.composer-counter b{ color:var(--blue-700); }
.ticker{ margin-block-start:auto; display:flex; align-items:center; justify-content:space-between; gap:4px; }
.ticker .tick{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; position:relative; }
.ticker .tick::after{ content:""; position:absolute; top:7px; inset-inline-start:50%; width:100%; height:2px; background:var(--border); z-index:0; }
.ticker .tick:last-child::after{ display:none; }
.ticker .dot{ width:16px; height:16px; border-radius:50%; background:var(--border); border:3px solid var(--white); box-shadow:0 0 0 1px var(--border); position:relative; z-index:1; transition:background-color .3s var(--ease); }
.ticker .tick span{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.03em; color:var(--muted); text-transform:uppercase; }
.ticker .tick.is-active .dot{ background:var(--green-500); box-shadow:0 0 0 1px var(--green-500); }
.ticker .tick.is-active span{ color:var(--green-700); font-weight:600; }
.composer-note{ position:absolute; bottom:-16px; inset-inline-end:-10px; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-pill); padding:8px 14px; box-shadow:var(--shadow-md); font-family:var(--font-mono); font-size:.72rem; color:var(--blue-900); display:flex; align-items:center; gap:8px; }
.composer-note .pulse{ width:8px; height:8px; border-radius:50%; background:var(--green-500); box-shadow:0 0 0 0 rgba(79,174,92,.6); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(79,174,92,.55);} 70%{ box-shadow:0 0 0 8px rgba(79,174,92,0);} 100%{ box-shadow:0 0 0 0 rgba(79,174,92,0);} }

/* ---------- Feature grid ---------- */
.feature-card{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md); padding:26px; transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.feature-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--blue-300); }
.feature-card .icon{ width:44px; height:44px; border-radius:var(--radius-sm); background:var(--blue-100); color:var(--blue-700); display:flex; align-items:center; justify-content:center; margin-block-end:16px; }
.feature-card .icon svg{ width:22px; height:22px; }
.feature-card h3{ margin-block-end:8px; }
.feature-card p{ color:var(--muted); font-size:.92rem; }

/* ---------- Pricing: prepaid card strip ---------- */
.price-scroller{ display:flex; gap:20px; overflow-x:auto; padding-block:6px 22px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.price-scroller::-webkit-scrollbar{ height:8px; }
.price-scroller::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:var(--radius-pill); }
.price-controls{ display:flex; justify-content:flex-end; gap:8px; margin-block-end:14px; }
.price-controls button{ width:38px; height:38px; border-radius:50%; border:1.5px solid var(--border-strong); display:flex; align-items:center; justify-content:center; }
.price-controls button:hover{ background:var(--blue-100); }
.price-controls svg{ width:16px; height:16px; }

.prepaid-card{
  scroll-snap-align:start; flex:0 0 260px; position:relative;
  background:linear-gradient(150deg,var(--blue-700),var(--blue-900));
  border-radius:var(--radius-lg); padding:24px; color:var(--white);
  overflow:hidden; isolation:isolate;
}
.prepaid-card.is-featured{ background:linear-gradient(150deg,var(--green-700),#245c2c); }
.prepaid-card:has(input:checked){ outline:3px solid var(--green-500); outline-offset:2px; }
.prepaid-card::before,.prepaid-card::after{
  content:""; position:absolute; top:50%; width:26px; height:26px; background:var(--paper); border-radius:50%; z-index:2; transform:translateY(-50%);
}
.prepaid-card::before{ inset-inline-start:-13px; }
.prepaid-card::after{ inset-inline-end:-13px; }
.prepaid-card .perf{ position:absolute; top:50%; inset-inline:20px; border-top:2px dashed rgba(255,255,255,.35); z-index:1; }
.prepaid-card .badge{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; background:rgba(255,255,255,.16); padding:4px 10px; border-radius:var(--radius-pill); display:inline-block; margin-block-end:16px; }
.prepaid-card .kd{ font-family:var(--font-display); font-size:2.1rem; font-weight:700; }
.prepaid-card .kd span{ font-size:1rem; font-weight:500; opacity:.8; }
.prepaid-card .sms-count{ font-family:var(--font-mono); font-size:1rem; opacity:.92; margin-block:4px 18px; }
.prepaid-card ul{ display:flex; flex-direction:column; gap:8px; font-size:.84rem; margin-block-end:22px; position:relative; z-index:2; }
.prepaid-card li{ display:flex; align-items:center; gap:8px; opacity:.92; }
.prepaid-card li svg{ width:14px; height:14px; flex:none; }
.prepaid-card .btn{ width:100%; }
.prepaid-card .btn-outline{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); color:var(--white); }
.prepaid-card .btn-outline:hover{ background:rgba(255,255,255,.26); border-color:rgba(255,255,255,.7); }
.prepaid-card.is-featured .btn-primary{ background:var(--white); color:var(--green-700); }
.prepaid-card.is-featured .btn-primary:hover{ background:var(--green-100); }

/* ---------- Trust strip ---------- */
.trust-strip{ background:var(--blue-100); border-radius:var(--radius-lg); padding:30px; display:grid; gap:22px; }
@media (min-width:720px){ .trust-strip{ grid-template-columns:repeat(4,1fr); } }
.trust-strip .stat b{ font-family:var(--font-display); font-size:1.8rem; color:var(--blue-900); display:block; }
.trust-strip .stat span{ font-size:.85rem; color:var(--muted); }

/* ---------- FAQ accordion ---------- */
.accordion{ border-block-start:1px solid var(--border); }
.accordion-item{ border-block-end:1px solid var(--border); }
.accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 4px; text-align:start; font-family:var(--font-display); font-weight:600; font-size:1.02rem; color:var(--blue-900);
}
.accordion-trigger .plus{ flex:none; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--border-strong); display:flex; align-items:center; justify-content:center; transition:transform .2s var(--ease), background-color .2s var(--ease); }
.accordion-trigger .plus svg{ width:12px; height:12px; }
.accordion-item[data-open="true"] .accordion-trigger .plus{ transform:rotate(45deg); background:var(--green-500); border-color:var(--green-500); color:var(--white); }
.accordion-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .25s var(--ease); }
.accordion-item[data-open="true"] .accordion-panel{ grid-template-rows:1fr; }
.accordion-panel-inner{ overflow:hidden; }
.accordion-panel p{ color:var(--muted); padding-block-end:20px; padding-inline-end:40px; font-size:.94rem; }

/* ---------- Forms ---------- */
.field{ display:flex; flex-direction:column; gap:5px; margin-block-end:13px; }
.field label{ font-size:.86rem; font-weight:600; color:var(--blue-900); }
.field label .req{ color:var(--red-500); margin-inline-start:2px; }
.field .hint{ font-size:.78rem; color:var(--muted); }
.field input,.field select,.field textarea{
  border:1.5px solid var(--border-strong); border-radius:var(--radius-sm); padding:12px 14px;
  background:var(--white); font-size:.95rem; transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--blue-500); box-shadow:0 0 0 3px var(--blue-100); outline:none; }
.field textarea{ resize:vertical; min-height:110px; }
.input-group{ display:flex; }
.input-group .prefix{ display:flex; align-items:center; padding-inline:14px; background:var(--blue-100); border:1.5px solid var(--border-strong); border-inline-end:none; border-radius:var(--radius-sm) 0 0 var(--radius-sm); font-family:var(--font-mono); font-size:.88rem; color:var(--blue-700); }
.input-group input{ border-radius:0 var(--radius-sm) var(--radius-sm) 0; flex:1 1 auto; min-width:0; }
.checkbox-row{ display:flex; align-items:flex-start; gap:10px; font-size:.86rem; color:var(--muted); }
.checkbox-row input{ margin-block-start:3px; }
.form-card{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:clamp(24px,4vw,44px); box-shadow:var(--shadow-sm); }
.form-foot{ text-align:center; font-size:.9rem; color:var(--muted); margin-block-start:18px; }
.form-foot a{ color:var(--blue-700); font-weight:600; }

/* ---------- Auth split layout ---------- */
.auth-shell{ min-height:100vh; display:grid; }
@media (min-width:900px){ .auth-shell{ grid-template-columns:.9fr 1.1fr; } }
.auth-aside{ display:none; background:linear-gradient(155deg,var(--blue-900),var(--blue-700)); color:var(--white); padding:48px; position:relative; overflow:hidden; }
@media (min-width:900px){ .auth-aside{ display:flex; flex-direction:column; justify-content:space-between; } }
.auth-aside h2{ color:var(--white); margin-block:26px 14px; }
.auth-aside p{ color:var(--blue-100); max-width:34ch; }
.auth-main{ display:flex; align-items:center; justify-content:center; padding:32px 20px; }
.auth-box{ width:100%; max-width:420px; }
.auth-box .top-link{ display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:.9rem; margin-block-end:22px; }
.auth-box .top-link svg{ width:16px; height:16px; transform:scaleX(-1); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--blue-900); color:var(--blue-100); margin-block-start:40px; }
.footer-top{ padding-block:56px; display:grid; gap:36px; }
@media (min-width:720px){ .footer-top{ grid-template-columns:1.3fr 1fr 1fr 1.2fr; } }
.footer-top .brand img{ height:32px; }
.footer-about p{ color:rgba(234,241,246,.75); font-size:.9rem; margin-block-start:14px; max-width:34ch; }
.footer-social{ display:flex; gap:10px; margin-block-start:18px; }
.footer-social a{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }
.footer-social a:hover{ background:var(--green-500); }
.footer-social svg{ width:15px; height:15px; }
.footer-col h4{ color:var(--white); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; font-family:var(--font-mono); margin-block-end:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ color:rgba(234,241,246,.8); font-size:.92rem; }
.footer-col a:hover{ color:var(--white); }
.footer-contact li{ display:flex; align-items:flex-start; gap:10px; color:rgba(234,241,246,.85); font-size:.9rem; }
.footer-contact svg{ width:16px; height:16px; flex:none; margin-block-start:2px; color:var(--green-500); }
.footer-bottom{ border-block-start:1px solid rgba(255,255,255,.12); padding-block:18px; }
.footer-bottom .container{ display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; justify-content:space-between; font-size:.8rem; color:rgba(234,241,246,.6); }
.footer-bottom a{ color:rgba(234,241,246,.75); }

/* ---------- Dashboard shell ---------- */
.dash{ display:flex; min-height:100vh; }
.dash-sidebar{
  position:fixed; inset-block:0; inset-inline-start:0; width:264px; background:var(--blue-900); color:var(--blue-100);
  transform:translateX(-105%); transition:transform .25s var(--ease); z-index:70; display:flex; flex-direction:column; overflow-y:auto;
}
.dash-sidebar[data-open="true"]{ transform:translateX(0); }
@media (min-width:1080px){
  .dash-sidebar{ position:sticky; transform:none; }
  .dash-sidebar-backdrop{ display:none !important; }
}
.dash-sidebar-backdrop{ position:fixed; inset:0; background:rgba(22,35,46,.5); z-index:65; opacity:0; visibility:hidden; transition:opacity .2s var(--ease); }
.dash-sidebar-backdrop[data-open="true"]{ opacity:1; visibility:visible; }
.dash-sidebar .brand{ padding:20px; }
.sidebar-user{ margin:0 14px 14px; padding:10px 12px; border-radius:var(--radius-md); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); }
.sidebar-user .name{ font-weight:700; color:var(--white); font-size:.88rem; margin-block-end:2px; }
.sidebar-user .row{ display:flex; align-items:center; justify-content:space-between; font-size:.74rem; color:rgba(234,241,246,.6); padding-block:3px; }
.sidebar-user .row b{ color:var(--white); font-family:var(--font-mono); font-weight:600; font-size:.74rem; }
.sidebar-user .buy-credit-link{ display:flex; align-items:center; gap:6px; color:var(--green-500); font-size:.78rem; font-weight:600; margin-block-start:4px; }
.sidebar-user .buy-credit-link:hover{ color:var(--green-100); }
.sidebar-user .buy-credit-link svg{ width:14px; height:14px; }
.sidebar-user .logout-row{ margin-block-start:6px; padding-block-start:6px; border-block-start:1px solid rgba(255,255,255,.08); }
.sidebar-user .logout-row a{ display:flex; align-items:center; gap:8px; color:rgba(234,241,246,.7); font-size:.78rem; font-weight:600; }
.sidebar-user .logout-row a:hover{ color:var(--white); }
.sidebar-user .logout-row svg{ width:14px; height:14px; }
.dash-sidebar .brand img{ height:28px; }
.dash-nav{ padding:8px 14px 24px; flex:1; }
.dash-nav .group{ margin-block-end:6px; }
.dash-nav .group-trigger{
  width:100%; display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:var(--radius-sm);
  font-size:.86rem; font-weight:600; color:var(--blue-100);
}
.dash-nav .group-trigger:hover{ background:rgba(255,255,255,.06); }
.dash-nav .group-trigger svg.chev{ width:14px; height:14px; margin-inline-start:auto; transition:transform .2s var(--ease); }
.dash-nav .group[data-open="true"] .chev{ transform:rotate(180deg); }
.dash-nav .group-trigger .gicon{ width:18px; height:18px; flex:none; }
.dash-nav .subnav{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .2s var(--ease); }
.dash-nav .group[data-open="true"] .subnav{ grid-template-rows:1fr; }
.dash-nav .subnav-inner{ overflow:hidden; }
.dash-nav .subnav a{ display:block; padding:9px 12px 9px 42px; font-size:.83rem; color:rgba(234,241,246,.72); border-radius:var(--radius-sm); }
.dash-nav .subnav a:hover{ background:rgba(255,255,255,.06); color:var(--white); }
.dash-nav .subnav a.is-active{ background:var(--green-500); color:var(--white); font-weight:600; }
.dash-nav > a.top-link{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:var(--radius-sm); font-size:.86rem; font-weight:600; color:var(--blue-100); margin-block-end:6px; }
.dash-nav > a.top-link.is-active,.dash-nav > a.top-link:hover{ background:var(--green-500); color:var(--white); }
.dash-nav > a.top-link svg{ width:18px; height:18px; }

.dash-main{ flex:1; min-width:0; }
.dash-topbar{ position:sticky; top:0; z-index:30; background:rgba(247,250,252,.94); backdrop-filter:blur(8px); border-block-end:1px solid var(--border); }
.dash-topbar .inner{ display:flex; align-items:center; gap:14px; padding:12px 20px; }
.dash-toggle{ display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:var(--radius-sm); border:1.5px solid var(--border-strong); flex:none; }
@media (min-width:1080px){ .dash-toggle{ display:none; } }
.dash-toggle svg{ width:18px; height:18px; }
.credit-pill{ display:inline-flex; align-items:center; gap:8px; background:var(--green-100); color:var(--green-700); border-radius:var(--radius-pill); padding:8px 16px; font-family:var(--font-mono); font-size:.86rem; font-weight:600; }
.credit-pill svg{ width:15px; height:15px; }
.topbar-right{ margin-inline-start:auto; display:flex; align-items:center; gap:12px; }
.notif-badge{ position:absolute; top:-5px; inset-inline-end:-6px; min-width:15px; height:15px; padding:0 3px; border-radius:999px; background:var(--red-500); color:var(--white); font-family:var(--font-mono); font-size:.62rem; font-weight:700; line-height:15px; text-align:center; box-shadow:0 0 0 2px var(--white); }
.user-chip{ display:flex; align-items:center; gap:10px; padding-inline-start:12px; border-inline-start:1px solid var(--border); }
.user-chip .avatar{ width:34px; height:34px; border-radius:50%; background:var(--blue-500); color:var(--white); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:.78rem; font-weight:700; }
.user-chip b{ display:block; font-size:.84rem; }
.user-chip span{ display:block; font-size:.72rem; color:var(--muted); }

.avatar-lg{ width:56px; height:56px; border-radius:50%; background:var(--blue-500); color:var(--white); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:1.1rem; font-weight:700; flex-shrink:0; }
.avatar-upload{ display:flex; align-items:center; gap:14px; margin-block-end:18px; }

.dash-content{ padding:18px 20px 44px; max-width:1240px; margin-inline:auto; }
.dash-head{ display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; justify-content:space-between; margin-block-end:18px; }
.stat-card{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px; }
.stat-card .top{ display:flex; align-items:center; justify-content:space-between; margin-block-end:14px; }
.stat-card .icon{ width:36px; height:36px; border-radius:var(--radius-sm); background:var(--blue-100); color:var(--blue-700); display:flex; align-items:center; justify-content:center; }
.stat-card .icon svg{ width:18px; height:18px; }
.stat-card b{ font-family:var(--font-display); font-size:1.5rem; color:var(--blue-900); display:block; }
.stat-card .trend{ font-family:var(--font-mono); font-size:.74rem; color:var(--green-700); }
.stat-card span.label{ font-size:.82rem; color:var(--muted); }

.panel{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px; margin-block-end:18px; }
.panel-title{ display:flex; align-items:center; justify-content:space-between; margin-block-end:14px; }
.panel-title h3{ margin:0; }
.panel-title a{ font-size:.84rem; font-weight:600; color:var(--blue-700); }

.row-line{ display:flex; align-items:center; justify-content:space-between; padding-block:8px; border-block-end:1px solid var(--border); font-size:.86rem; color:var(--muted); }
.row-line:last-child{ border-block-end:none; padding-block-end:0; }
.row-line b{ color:var(--ink); font-weight:600; }

/* tables */
.table-wrap{ overflow-x:auto; }
table.data{ width:100%; border-collapse:collapse; font-size:.88rem; min-width:560px; }
table.data th{ text-align:start; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:10px 12px; border-block-end:1.5px solid var(--border); }
table.data td{ padding:9px 12px; border-block-end:1px solid var(--border); vertical-align:middle; }
table.data tr:last-child td{ border-block-end:none; }
table.data td.num,table.data th.num{ font-family:var(--font-mono); }

.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:var(--radius-pill); font-size:.74rem; font-weight:600; font-family:var(--font-mono); }
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge.status-delivered{ background:var(--green-100); color:var(--green-700); }
.badge.status-sent{ background:var(--blue-100); color:var(--blue-700); }
.badge.status-queued{ background:var(--amber-100); color:#8a6110; }
.badge.status-failed{ background:var(--red-100); color:var(--red-500); }

/* compose box on dashboard */
.compose-box{ display:grid; gap:14px; }
@media (min-width:640px){ .compose-box{ grid-template-columns:1fr 1fr; } }
.compose-box textarea{ min-height:120px; }

/* ---------- Misc ---------- */
.divider{ height:1px; background:var(--border); border:none; margin-block:0; }
.pill-tabs{ display:inline-flex; background:var(--blue-100); border-radius:var(--radius-pill); padding:4px; gap:4px; }
.pill-tabs button{ padding:8px 18px; border-radius:var(--radius-pill); font-size:.85rem; font-weight:600; color:var(--blue-700); }
.pill-tabs button[aria-selected="true"]{ background:var(--white); color:var(--blue-900); box-shadow:var(--shadow-sm); }
.map-placeholder{ border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border); aspect-ratio:16/10; }

.pagination{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block-start:16px; flex-wrap:wrap; }
.pagination .pages{ display:flex; align-items:center; gap:4px; }
.pagination .pages button{ width:32px; height:32px; border-radius:var(--radius-sm); font-size:.85rem; font-weight:600; color:var(--blue-700); }
.pagination .pages button:hover{ background:var(--blue-100); }
.pagination .pages button[aria-current="true"]{ background:var(--blue-500); color:var(--white); }
.pagination .info{ font-size:.82rem; color:var(--muted); }

.date-filter{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--muted); flex-wrap:wrap; }
.date-filter input{ padding:8px 10px; border:1.5px solid var(--border-strong); border-radius:var(--radius-sm); font-size:.84rem; color:var(--blue-900); }

.pay-option{ display:flex; align-items:center; gap:12px; border:1.5px solid var(--border-strong); border-radius:var(--radius-md); padding:14px 16px; cursor:pointer; transition:border-color .15s var(--ease), background-color .15s var(--ease); }
.pay-option:hover{ background:var(--blue-100); }
.pay-option input{ accent-color:var(--blue-500); width:18px; height:18px; flex:none; }
.pay-option .icon{ width:36px; height:36px; border-radius:var(--radius-sm); background:var(--blue-100); color:var(--blue-700); display:flex; align-items:center; justify-content:center; flex:none; }
.pay-option .icon svg{ width:18px; height:18px; }
.pay-option b{ display:block; font-size:.92rem; }
.pay-option span{ display:block; font-size:.8rem; color:var(--muted); }
.pay-option:has(input:checked){ border-color:var(--blue-500); background:var(--blue-100); }

.amount-pills{ display:flex; gap:8px; flex-wrap:wrap; }
.amount-pills label{ position:relative; }
.amount-pills input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.amount-pills span{ display:inline-flex; padding:10px 20px; border-radius:var(--radius-pill); border:1.5px solid var(--border-strong); font-weight:600; font-size:.9rem; color:var(--blue-900); }
.amount-pills input:checked + span{ background:var(--blue-500); border-color:var(--blue-500); color:var(--white); }

.success-banner{ display:flex; align-items:center; gap:14px; background:var(--green-100); border:1px solid var(--green-500); border-radius:var(--radius-md); padding:18px; margin-block-end:20px; }
.success-banner .icon{ width:44px; height:44px; border-radius:50%; background:var(--green-500); color:var(--white); display:flex; align-items:center; justify-content:center; flex:none; }
.success-banner .icon svg{ width:22px; height:22px; }
.success-banner h3{ margin:0 0 2px; }
.success-banner p{ margin:0; color:var(--muted); font-size:.9rem; }

.section-band{ background:var(--white); border-block:1px solid var(--border); }
.section-band.tint{ background:var(--blue-100); border-block:none; }

/* ---------- Modal (Terms / Privacy popups) ---------- */
dialog.modal{ border:none; border-radius:var(--radius-lg); padding:0; width:min(640px,92vw); max-height:85vh; box-shadow:var(--shadow-lg); overflow:hidden; }
dialog.modal::backdrop{ background:rgba(22,35,46,.55); }
dialog.modal .modal-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-block-end:1px solid var(--border); }
dialog.modal .modal-head h3{ margin:0; }
dialog.modal .modal-close{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; }
dialog.modal .modal-close:hover{ background:var(--blue-100); }
dialog.modal .modal-close svg{ width:16px; height:16px; }
dialog.modal iframe{ width:100%; height:65vh; border:0; display:block; }
dialog.modal .modal-body{ padding:20px 22px 26px; overflow-y:auto; max-height:65vh; }
dialog.modal .modal-body h4{ font-family:var(--font-display); color:var(--blue-900); margin-block:18px 6px; }
dialog.modal .modal-body h4:first-child{ margin-block-start:0; }
dialog.modal .modal-body p{ color:var(--muted); font-size:.92rem; line-height:1.7; }

/* ---------- Print ---------- */
@media print{
  .dash-sidebar, .dash-sidebar-backdrop, .dash-topbar, [data-print], .pill-tabs, .date-filter, .pagination, .btn{ display:none !important; }
  .dash-main{ margin:0; }
  .dash-content{ padding:0; max-width:none; }
  body{ background:var(--white); }
  .panel{ border:none; box-shadow:none; padding:0; }
}

@media (max-width:719px){
  section{ padding-block:44px; }
  .footer-top{ padding-block:44px; }
}