/* Self-hosted fonts: the Google Fonts CDN (@import) is not reachable from
   inside this preview sandbox, so the page silently fell back to a default
   system font and looked broken. Serving the .woff2 files locally removes
   that dependency entirely, in this environment and in production. */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/cairo-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/cairo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/tajawal-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/tajawal-500-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/tajawal-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}

:root {
  --kadia-navy: #2d1b4e;
  --kadia-teal: #00b39c;
  --kadia-teal-dark: #00897a;
  --kadia-teal-light: #1dd9c1;
  --kadia-teal-tint: #e5faf7;
  --kadia-gold: #d4537e;
  --kadia-gold-light: #e98aa8;
  --kadia-bg: #f7f5fb;
  --kadia-card: #ffffff;
  --kadia-text: #241a33;
  --kadia-text-muted: #6b6178;
  --kadia-border: #e8e3f0;
  --kadia-success: #1e8a5f;
  --kadia-danger: #c0392b;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(14, 42, 61, 0.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  direction: rtl;
  text-align: right;
  background: var(--kadia-bg);
  color: var(--kadia-text);
  font-family: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
  scroll-behavior: smooth;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Scroll progress rail ---------- */
.scroll-rail {
  position: fixed;
  top: 0;
  left: 0;
  width: 4px;
  height: 100vh;
  background: var(--kadia-border);
  z-index: 200;
}
.scroll-rail .thumb {
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, var(--kadia-teal), var(--kadia-gold));
  border-radius: 0 0 6px 6px;
}

/* ---------- Header ---------- */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 250, 247, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--kadia-border);
  transition: box-shadow .25s ease, background .25s ease;
}
header.site-header.scrolled {
  background: rgba(251, 250, 247, 0.98);
  box-shadow: 0 4px 18px rgba(45, 27, 78, .08);
}

.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* groups the logo with the language switch so the switch reads as part of
   the brand corner of the header, at the opposite end from the CTA/login
   buttons in .nav-actions rather than crowded in among them */
.brand-row { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--kadia-navy);
  flex-shrink: 0;
  line-height: 1;
}

.brand .dot { color: var(--kadia-teal); }
.brand-text {
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: 1.5rem;
}
.brand-icon { width: 50px; height: 50px; flex-shrink: 0; }

.nav-links {
  display: flex;
  gap: 28px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--kadia-text-muted);
  white-space: nowrap;
}
.nav-links a:hover { color: var(--kadia-navy); }

.nav-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }

.nav-hamburger {
  display: none;
  background: none; border: 1.5px solid var(--kadia-border); border-radius: 8px;
  font-size: 1.3rem; line-height: 1; padding: 6px 12px; cursor: pointer;
  color: var(--kadia-navy); flex-shrink: 0;
}

@media (max-width: 920px) {
  .nav-links {
    display: none;
    position: absolute; top: 100%; inset-inline: 0;
    flex-direction: column; gap: 0;
    background: var(--kadia-card); border-bottom: 1px solid var(--kadia-border);
    padding: 6px 20px 14px;
  }
  .nav-links a { padding: 12px 0; border-top: 1px solid var(--kadia-border); }
  .nav-links.mobile-open { display: flex; }
  .nav-hamburger { display: inline-block; }
  .site-header .bar { position: relative; }
  /* .nav-actions had flex-shrink:0, so it never actually shrank to the
     point where its own flex-wrap could kick in - the two header buttons
     (login + primary CTA) just overflowed the viewport on any phone
     narrower than ~513px instead of wrapping to a second line. */
  .nav-actions { flex-shrink: 1; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
  /* the header's own "check now" CTA is redundant on mobile - the hero
     section repeats the same action just below the fold (with its own
     pulsing-ring treatment), so dropping the header copy here declutters
     an already-tight mobile header instead of fighting for space with it */
  .nav-actions .nav-check-cta { display: none; }
}

/* on the narrowest phones, the header keeps only the logo, the primary CTA
   and the hamburger on one clean row - the secondary login link moves into
   the hamburger dropdown instead of forcing the header onto two rows */
.nav-link-mobile-auth { display: none; }
@media (max-width: 480px) {
  .brand-text { font-size: 1.15rem; }
  .brand-icon { width: 38px; height: 38px; }
  .btn { padding: 10px 16px; font-size: 0.9rem; }
  .nav-actions { gap: 8px; }
  .nav-actions .nav-auth-link { display: none; }
  .nav-link-mobile-auth { display: block; }

  /* pages without a hamburger (dashboard/app/admin/etc.) can have two
     nav-actions buttons with nowhere to shrink into - give the actions
     group its own full-width row below the logo instead of squeezing it
     into a lopsided two-line stack beside the brand mark. */
  .site-header .bar:not(:has(.nav-hamburger)) { flex-wrap: wrap; row-gap: 10px; }
  .site-header .bar:not(:has(.nav-hamburger)) .nav-actions { width: 100%; justify-content: flex-start; }
}

/* ---------- Scroll reveal + hero entrance ---------- */
/* Sections fade/rise into place as they cross into view, staggered per card,
   instead of the whole page just being "there" on load. Disabled entirely
   under prefers-reduced-motion: reveal.js still adds .revealed immediately
   in that case, but the base .reveal rule below never hides anything to
   begin with, so there's no dependency on JS for the reduced-motion path. */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .reveal.revealed { opacity: 1; transform: none; }
  .reveal-1 { transition-delay: .06s; }
  .reveal-2 { transition-delay: .14s; }
  .reveal-3 { transition-delay: .22s; }

  .hero-enter {
    opacity: 0;
    transform: translateY(14px);
    animation: heroEnter .7s ease forwards;
  }
  .hero-enter-1 { animation-delay: .05s; }
  .hero-enter-2 { animation-delay: .16s; }
  .hero-enter-3 { animation-delay: .27s; }
  .hero-enter-4 { animation-delay: .38s; }
  @keyframes heroEnter { to { opacity: 1; transform: none; } }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
}

.btn-primary {
  background: var(--kadia-teal);
  color: #fff;
}
.btn-primary:hover { background: var(--kadia-teal-dark); transform: translateY(-1px); }

/* the hero's main conversion CTA - a soft radar-ping ring plus a gentle
   nudge on the arrow, so the button visibly invites a click instead of
   sitting static among the page's other primary buttons (which stay quiet
   by design; this is the one deliberately "alive" element on the page) */
.btn-hero-cta { position: relative; overflow: visible; }
.btn-hero-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(0, 179, 156, .45);
  animation: kadia-hero-cta-ring 2.6s ease-out infinite;
  pointer-events: none;
}
.btn-hero-cta:hover::after { animation-play-state: paused; box-shadow: 0 0 0 0 rgba(0, 179, 156, 0); }
.hero-cta-arrow { display: inline-block; animation: kadia-hero-cta-arrow 1.8s ease-in-out infinite; }
@keyframes kadia-hero-cta-ring {
  0% { box-shadow: 0 0 0 0 rgba(0, 179, 156, .45); }
  65% { box-shadow: 0 0 0 16px rgba(0, 179, 156, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 179, 156, 0); }
}
@keyframes kadia-hero-cta-arrow {
  0%, 20%, 100% { transform: translateX(0); }
  10% { transform: translateX(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-hero-cta::after, .hero-cta-arrow { animation: none; }
}

.btn-outline {
  background: #fff;
  color: var(--kadia-navy);
  border: 1.5px solid var(--kadia-border);
}
.btn-outline:hover { border-color: var(--kadia-teal); color: var(--kadia-teal); }

.btn-secondary {
  background: var(--kadia-navy);
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--kadia-teal);
  padding: 10px 14px;
}

/* lives beside the logo (.brand-row), not among the CTA buttons - a globe
   icon makes it read unambiguously as a language switch at a glance, rather
   than as just another quiet ghost button in the nav-actions cluster */
.lang-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--kadia-card);
  border: 1.5px solid var(--kadia-border);
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  color: var(--kadia-navy);
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(45, 27, 78, .06);
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}
.lang-toggle-btn:hover { border-color: var(--kadia-teal); background: var(--kadia-teal-tint); color: var(--kadia-teal-dark); transform: translateY(-1px); }
.lang-toggle-btn:hover .lang-toggle-icon { color: var(--kadia-teal); }
.lang-toggle-icon { flex-shrink: 0; color: var(--kadia-text-muted); transition: color .15s ease; }

.btn-danger {
  background: #fff;
  color: var(--kadia-danger);
  border: 1.5px solid #f1c3bb;
}
.btn-danger:hover { background: #fdecea; }

.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-block { width: 100%; }
.small-btn { padding: 6px 12px; font-size: .82rem; }

/* ---------- Hero ---------- */
.hero {
  background: radial-gradient(1000px 500px at 15% -10%, var(--kadia-teal-tint), transparent),
              var(--kadia-bg);
  color: var(--kadia-text);
  padding: 72px 0 64px;
}

.hero .container { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }

.hero h1 {
  font-size: 3rem;
  line-height: 1.28;
  font-weight: 800;
  color: var(--kadia-navy);
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}

.hero p.lead {
  font-size: 1.15rem;
  color: var(--kadia-text-muted);
  margin-bottom: 30px;
  line-height: 1.75;
}

.hero-badges { display: flex; gap: 22px; margin-top: 28px; flex-wrap: wrap; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--kadia-navy);
}
.badge .g { color: var(--kadia-teal); }

/* hero scan animation: an actual traffic ticket gets scanned field-by-field,
   then a rubber-stamp reveal seals the verdict - dramatizes the real product
   mechanic (read ticket -> verify fields -> match against the legal-grounds
   library -> tell you what was found) as a document a visitor recognizes at
   a glance, not an abstract loading card. 7s cycle, infinite. */
/* width:100% is required here, not just max-width - a grid item with an
   auto inline margin (the `margin: 0 auto` centering trick) shrink-to-fits
   to its content's intrinsic width instead of stretching to the column,
   so without an explicit width the ticket card's rendered size silently
   depended on whatever text happened to be the widest line inside it. */
.scan-mockup { width: 100%; max-width: 320px; margin: 0 auto; }
.scan-mockup .muted { color: var(--kadia-text-muted); font-size: 0.92rem; }

.scan-card {
  background: var(--kadia-teal-tint);
  border-radius: 28px;
  padding: 30px 22px 22px;
  box-shadow: var(--shadow);
}

.ticket {
  position: relative;
  background: #fff;
  border-radius: 6px 6px 18px 18px;
  padding: 14px 16px 16px;
  box-shadow: 0 4px 14px rgba(45, 27, 78, 0.08);
}

/* torn-perforation edge, as if this card were pulled from a ticket book -
   the "holes" are just the card's own tint color showing through */
.ticket-perf {
  position: absolute;
  top: -7px; left: 10px; right: 10px; height: 14px;
  background-image: radial-gradient(circle 7px, var(--kadia-teal-tint) 7px, transparent 7.4px);
  background-size: 20px 14px;
  background-repeat: repeat-x;
  pointer-events: none;
}

.ticket-inner { position: relative; overflow: hidden; border-radius: 4px; }

.ticket-header {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px; margin-bottom: 4px;
  border-bottom: 1.5px dashed var(--kadia-border);
}
.ticket-emblem {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--kadia-navy); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .8rem;
}
.ticket-header-text { font-weight: 800; color: var(--kadia-navy); font-size: .88rem; }

.ticket-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; font-size: .82rem; }
.ticket-label { color: var(--kadia-text-muted); }
.ticket-row-right { display: flex; align-items: center; gap: 5px; }
.ticket-value { font-weight: 700; color: var(--kadia-text); font-variant-numeric: tabular-nums; }
.ticket-row-amount .ticket-value { color: var(--kadia-danger); font-size: 1rem; font-weight: 800; }
.ticket-check { color: var(--kadia-teal-dark); font-weight: 800; opacity: 0; transform: scale(.5); display: inline-block; }
.ticket-row-1 .ticket-check { animation: ticketCheck1In 7s ease-out infinite; }
.ticket-row-2 .ticket-check { animation: ticketCheck2In 7s ease-out infinite; }
.ticket-row-3 .ticket-check { animation: ticketCheck3In 7s ease-out infinite; }
.ticket-row-4 .ticket-check { animation: ticketCheck4In 7s ease-out infinite; }

.ticket-barcode {
  height: 20px; margin-top: 10px; border-radius: 2px; opacity: .35;
  background: repeating-linear-gradient(90deg,
    var(--kadia-navy) 0 2px, transparent 2px 5px,
    var(--kadia-navy) 5px 6px, transparent 6px 10px,
    var(--kadia-navy) 10px 13px, transparent 13px 15px,
    var(--kadia-navy) 15px 16px, transparent 16px 20px);
}

.scan-beam {
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--kadia-teal-light), var(--kadia-teal), var(--kadia-teal-light), transparent);
  box-shadow: 0 0 12px 2px rgba(0, 179, 156, .55);
  opacity: 0;
  animation: scanSweep 7s ease-in-out infinite;
}

/* the signature moment: a round rubber stamp slams onto the ticket at an
   angle once every field has been verified - the visual verdict, in the
   same bureaucratic-document language as the ticket itself */
.ticket-stamp {
  position: absolute; top: 54%; left: 50%; width: 136px; height: 136px;
  border-radius: 50%; border: 3px solid var(--kadia-teal-dark);
  color: var(--kadia-teal-dark); background: rgba(255,255,255,.94);
  display: flex; align-items: center; justify-content: center;
  text-align: center; font-weight: 800; font-size: .82rem; line-height: 1.4;
  box-shadow: 0 3px 10px rgba(0, 137, 122, .25);
  opacity: 0; transform: translate(-50%, -50%) rotate(-16deg) scale(1.4);
  animation: stampSlam 7s cubic-bezier(.34,1.56,.64,1) infinite;
  pointer-events: none;
}
.ticket-stamp .stamp-num {
  color: var(--kadia-danger);
  font-size: 1.35em;
  font-weight: 900;
}

@keyframes scanSweep {
  0%   { top: 0%;  opacity: 0; }
  3%   { opacity: 1; }
  30%  { top: 96%; opacity: 1; }
  34%  { top: 96%; opacity: 0; }
  100% { top: 0%;  opacity: 0; }
}
@keyframes ticketCheck1In {
  0%, 9%    { opacity: 0; transform: scale(.5); }
  14%, 90%  { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(.5); }
}
@keyframes ticketCheck2In {
  0%, 15%   { opacity: 0; transform: scale(.5); }
  20%, 90%  { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(.5); }
}
@keyframes ticketCheck3In {
  0%, 21%   { opacity: 0; transform: scale(.5); }
  26%, 90%  { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(.5); }
}
@keyframes ticketCheck4In {
  0%, 27%   { opacity: 0; transform: scale(.5); }
  32%, 90%  { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(.5); }
}
@keyframes stampSlam {
  0%, 54%  { opacity: 0; transform: translate(-50%,-50%) rotate(-16deg) scale(1.5); }
  60%      { opacity: 1; transform: translate(-50%,-50%) rotate(-9deg) scale(.92); }
  65%      { transform: translate(-50%,-50%) rotate(-13deg) scale(1.04); }
  70%, 90% { opacity: 1; transform: translate(-50%,-50%) rotate(-11deg) scale(1); }
  96%, 100% { opacity: 0; transform: translate(-50%,-50%) rotate(-11deg) scale(1.08); }
}

/* reduced motion: freeze on the "grounds found" end state instead of looping */
@media (prefers-reduced-motion: reduce) {
  .scan-beam { display: none; }
  .ticket-check, .ticket-stamp { animation: none; }
  .ticket-check { opacity: 1; transform: scale(1); }
  .ticket-stamp { opacity: 1; transform: translate(-50%,-50%) rotate(-11deg) scale(1); }
}

/* ---------- Sections ---------- */
section { padding: 64px 0; scroll-margin-top: 90px; }
.section-title { text-align: center; margin-bottom: 42px; }
.section-title h2 { font-size: 2rem; font-weight: 800; color: var(--kadia-navy); margin-bottom: 10px; }
.section-title p { color: var(--kadia-text-muted); font-size: 1.05rem; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.card {
  background: var(--kadia-card);
  border: 1px solid var(--kadia-border);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
}

.icon-circle {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--kadia-teal-light), var(--kadia-teal));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 14px;
}

.about-card {
  background: var(--kadia-card);
  border: 1px solid var(--kadia-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  max-width: 760px;
  margin: 0 auto;
}
.about-card .icon-circle { margin-bottom: 0; flex-shrink: 0; width: 64px; height: 64px; font-size: 1.9rem; }
.about-card h3 { color: var(--kadia-navy); font-size: 1.15rem; margin: 0; }
.about-card p { color: var(--kadia-text-muted); line-height: 1.8; }

@media (max-width: 600px) {
  .about-card { flex-direction: column; text-align: center; padding: 22px; }
  .about-card .icon-circle { margin: 0 auto; }
}

.step-num {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--kadia-navy);
  color: var(--kadia-gold-light);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  margin-bottom: 12px;
}

/* "how it works" + "integrity" cards: short, punchy copy deserves a card
   that feels alive on hover instead of a static block of text */
.step-card { transition: box-shadow .2s ease, transform .2s ease; }
.step-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(45, 27, 78, .12); }
.step-card p { color: var(--kadia-text-muted); line-height: 1.75; }
.step-card .step-num { box-shadow: 0 0 0 4px var(--kadia-teal-tint); }
.step-card .icon-circle { box-shadow: 0 6px 16px rgba(0, 179, 156, .25); }
.step-card .fine-print { color: var(--kadia-text-muted); font-size: .86em; }

/* violations chip grid */
.chip-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.chip {
  background: var(--kadia-card);
  border: 1px solid var(--kadia-border);
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  color: var(--kadia-navy);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(45, 27, 78, .08);
  border-color: var(--kadia-teal-light);
}

/* pricing */
.price-card {
  text-align: center; position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.price-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(45, 27, 78, .10); }
.price-card.highlight { border: 2px solid var(--kadia-teal); }
@media (min-width: 769px) {
  .price-card.highlight {
    transform: scale(1.06);
    box-shadow: 0 16px 34px rgba(0, 137, 122, .16);
    z-index: 1;
  }
  .price-card.highlight:hover { transform: scale(1.06) translateY(-4px); }
}
.price-tag { font-size: 2.4rem; font-weight: 800; color: var(--kadia-navy); }
.price-tag small { font-size: 1rem; color: var(--kadia-text-muted); font-weight: 600; }
.price-card ul { text-align: right; margin: 20px 0; }
.price-card li { padding: 8px 0; color: var(--kadia-text-muted); }
.price-card li::before { content: "✓ "; color: var(--kadia-success); font-weight: 800; }
.ribbon {
  position: absolute; top: -14px; right: 50%; transform: translateX(50%);
  background: var(--kadia-teal); color: #fff;
  padding: 4px 16px; border-radius: 999px; font-weight: 800; font-size: 0.85rem;
}

/* ---------- launch "first draft free" promo strip ---------- */
/* Full-bleed announcement bar directly under the header (not inside a
   <section>, so it's exempt from the site-wide `section { padding }` rule
   and always visible on load with no scrolling) - a slow-shifting gradient
   plus a light sweep and a pulsing "live" dot are what make this read as an
   active, running promotion rather than a static card. */
.promo-strip {
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg, var(--kadia-navy) 0%, #2a1a46 30%, var(--kadia-teal-dark) 65%, var(--kadia-navy) 100%);
  background-size: 250% 250%;
}
.promo-strip-inner {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px;
  padding: 22px 20px 26px;
}
.promo-strip-shimmer {
  position: absolute; top: 0; bottom: 0; width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.promo-strip-live {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.12); color: var(--kadia-teal-light);
  border: 1px solid rgba(255,255,255,.2);
  padding: 3px 13px; border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .02em;
  text-transform: uppercase;
}
.promo-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--kadia-teal-light);
  box-shadow: 0 0 0 0 rgba(29, 217, 193, .6);
}
.promo-strip-title {
  color: #fff; font-size: 1.28rem; font-weight: 800; margin: 4px 0 0;
}
.promo-strip-subtitle {
  color: #fff; font-size: 1.08rem; font-weight: 600; line-height: 1.55;
  margin: 2px 0 0; max-width: 620px;
}
.promo-countdown {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 0 2px;
}
.promo-countdown-unit {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  min-width: 56px;
  padding: 6px 4px 5px;
}
.promo-countdown-unit .num {
  color: #fff; font-size: 1.3rem; font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.promo-countdown-unit .lbl {
  color: rgba(255,255,255,.68); font-size: .64rem; font-weight: 700;
  margin-top: 3px; text-transform: uppercase; letter-spacing: .03em;
}
.promo-countdown-sep {
  color: rgba(255,255,255,.55); font-size: 1.15rem; font-weight: 800;
  transform: translateY(-6px);
}
.promo-strip-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--kadia-gold); color: #fff;
  font-weight: 800; font-size: .95rem;
  padding: 11px 28px; border-radius: 999px;
  margin-top: 10px;
  box-shadow: 0 6px 18px rgba(212, 83, 126, .4);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.promo-strip-cta:hover { background: var(--kadia-gold-light); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(212, 83, 126, .5); }
.promo-strip-cta-gift { display: inline-block; font-size: 1.05em; }

@media (prefers-reduced-motion: no-preference) {
  .promo-strip { animation: promoStripGradient 9s ease-in-out infinite alternate; }
  .promo-strip-shimmer { animation: promoStripShimmer 4.5s ease-in-out infinite; }
  .promo-live-dot { animation: promoLiveDotPulse 2s ease-out infinite; }
  .promo-strip-cta-gift { animation: promoGiftWiggle 3.2s ease-in-out infinite; }
  .promo-countdown-sep { animation: promoCountdownBlink 1s step-start infinite; }
}
@keyframes promoCountdownBlink {
  50% { opacity: .25; }
}
@keyframes promoStripGradient {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@keyframes promoStripShimmer {
  0%   { transform: translateX(-160%) skewX(-20deg); opacity: 0; }
  15%  { opacity: 1; }
  55%  { opacity: 1; }
  70%  { transform: translateX(340%) skewX(-20deg); opacity: 0; }
  100% { transform: translateX(340%) skewX(-20deg); opacity: 0; }
}
@keyframes promoLiveDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(29, 217, 193, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(29, 217, 193, 0); }
  100% { box-shadow: 0 0 0 0 rgba(29, 217, 193, 0); }
}
@keyframes promoGiftWiggle {
  0%, 82%, 100% { transform: rotate(0deg); }
  86%  { transform: rotate(-12deg); }
  90%  { transform: rotate(10deg); }
  94%  { transform: rotate(-6deg); }
  97%  { transform: rotate(0deg); }
}

@media (max-width: 640px) {
  .promo-strip-inner { padding: 18px 16px 22px; }
  .promo-strip-title { font-size: 1.08rem; }
  .promo-strip-subtitle { font-size: .96rem; }
  .promo-countdown-unit { min-width: 46px; padding: 5px 3px 4px; }
  .promo-countdown-unit .num { font-size: 1.1rem; }
  .promo-countdown { gap: 7px; }
}

/* FAQ */
.faq-item {
  border-bottom: 1px solid var(--kadia-border);
  padding: 18px 14px; margin: 0 -14px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s ease;
}
.faq-item:hover { background: var(--kadia-bg); }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 700; color: var(--kadia-navy); }
.faq-a { max-height: 0; overflow: hidden; color: var(--kadia-text-muted); transition: max-height .25s ease; line-height: 1.7; }
.faq-item.open .faq-a { max-height: 300px; padding-top: 12px; }
.faq-item.open .faq-q .arrow { transform: rotate(180deg); background: var(--kadia-teal-tint); color: var(--kadia-teal-dark); }
.arrow {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--kadia-bg); color: var(--kadia-navy);
  font-size: .8rem; transition: transform .2s ease, background .15s ease, color .15s ease;
}

/* disclaimer */
.disclaimer {
  background: #fbf6e6;
  border: 1px solid #e6d896;
  border-radius: var(--radius);
  padding: 18px 22px;
  color: #5b4b16;
  font-size: 0.92rem;
  line-height: 1.7;
}

footer.site-footer {
  background: var(--kadia-navy);
  color: #cfe0e8;
  padding: 40px 0;
  margin-top: 40px;
  font-size: 0.92rem;
}
footer.site-footer a { opacity: 0.85; transition: opacity .15s ease; }
footer.site-footer a:hover { opacity: 1; text-decoration: underline; }
footer.site-footer .cols { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
footer.site-footer .brand { align-items: flex-start; }

/* ---------- Wizard (app.html) ---------- */
/* soft ambient wash behind the wizard, echoing the landing hero's own
   background treatment - kept subtle (a wide, low-opacity radial glow) so
   the wizard doesn't read as a flat gray box floating on white the way it
   did before. Scoped to app.html only via body.wizard-page, AND to screen
   only - a class selector on body beats the print reset's plain "body"
   selector on specificity alone regardless of which media block either is
   in, so without this @media screen guard the gradient wash was bleeding
   straight through into the printed/PDF letter (confirmed via a real
   generated PDF during the 2026-08-19 review - the empty-looking tinted
   block at the top of the printed letter was exactly this). */
@media screen {
  body.wizard-page {
    background: radial-gradient(1000px 480px at 85% -8%, var(--kadia-teal-tint), transparent),
                radial-gradient(700px 420px at -5% 40%, rgba(212, 83, 126, .07), transparent),
                var(--kadia-bg);
  }
}

.wizard-shell {
  max-width: 800px;
  margin: 36px auto 90px;
  padding: 0 20px;
}

/* slim overall-progress rail - the primary, always-visible progress signal
   now; the per-step segmented track below still exists in the DOM (wizard.js
   keeps building it) but is visually retired in favor of this cleaner bar,
   see .progress-track below. */
.wizard-progress-rail {
  height: 6px; border-radius: 999px; background: var(--kadia-border);
  overflow: hidden; margin-bottom: 24px;
}
.wizard-progress-rail-fill {
  height: 100%; border-radius: 999px; width: 16.66%;
  background: linear-gradient(90deg, var(--kadia-teal), var(--kadia-teal-light));
  transition: width .5s cubic-bezier(.65, 0, .35, 1);
}

.progress-header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
}
.progress-badge {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--kadia-teal-light), var(--kadia-teal));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 900;
  box-shadow: 0 6px 16px rgba(0, 179, 156, 0.3);
  animation: kadia-pop-in .45s cubic-bezier(.34,1.56,.64,1) both;
}
.progress-header-text { min-width: 0; display: flex; flex-direction: column; }
.progress-header-text .step-name {
  order: 2;
  font-weight: 800; color: var(--kadia-navy); font-size: 1.4rem; line-height: 1.25;
  animation: kadia-fade-up .35s ease-out both;
}
.progress-header-text .step-count {
  order: 1;
  font-size: .74rem; color: var(--kadia-teal-dark); font-weight: 800; margin-bottom: 2px;
  text-transform: uppercase; letter-spacing: .06em;
}

/* per-step segmented track: superseded visually by .wizard-progress-rail
   above (same information, cleaner single bar) - kept present but hidden
   rather than removed from the DOM, since wizard.js still populates it. */
.progress-track { display: none; }

@media (max-width: 480px) {
  .progress-badge { width: 36px; height: 36px; font-size: 1.02rem; border-radius: 10px; }
  .progress-header-text .step-name { font-size: 1.15rem; }
  .progress-header-text .step-count { font-size: .68rem; }
}

.step2-progress-wrap { margin-bottom: 24px; }
.step2-progress-track { height: 6px; border-radius: 999px; background: var(--kadia-border); overflow: hidden; margin-bottom: 6px; }
.step2-progress-fill { height: 100%; background: var(--kadia-teal); border-radius: 999px; transition: width .3s ease; }
.step2-progress-text { font-size: .82rem; color: var(--kadia-text-muted); font-weight: 700; }

/* ---------- Chat-style questionnaire (step 2) — AI-assistant look ---------- */
.chat-log {
  display: flex; flex-direction: column; gap: 26px;
  margin-bottom: 26px; max-height: 480px; overflow-y: auto;
  padding: 12px 2px 18px;
  scroll-behavior: smooth;
}
.chat-log::-webkit-scrollbar { width: 6px; }
.chat-log::-webkit-scrollbar-thumb { background: var(--kadia-border); border-radius: 999px; }
.chat-log::-webkit-scrollbar-thumb:hover { background: var(--kadia-teal-light); }

/* composed entrance: small rise, soft easing, no bounce */
@keyframes kadia-chat-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-bubble { max-width: 88%; animation: kadia-chat-in .38s cubic-bezier(.22, .61, .36, 1) both; }

/* --- assistant: avatar + open text, no bubble fill --- */
.chat-bot {
  align-self: flex-start;
  display: flex; align-items: flex-start; gap: 10px;
}
.chat-avatar {
  flex: none; width: 38px; height: 38px; margin-top: 1px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--kadia-teal), var(--kadia-teal-light));
  color: #fff; font-size: 1rem; line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 179, 156, .28);
  user-select: none;
}
.chat-bot .chat-bubble-inner {
  padding: 7px 0 0;
  color: var(--kadia-text);
  line-height: 1.85; font-size: 1.05rem; font-weight: 600;
}

/* --- user: quiet tinted bubble, focus stays on the assistant --- */
.chat-user { align-self: flex-end; cursor: pointer; }
.chat-user .chat-bubble-inner {
  background: var(--kadia-teal-tint);
  border: 1px solid rgba(0, 179, 156, .18);
  color: var(--kadia-navy);
  padding: 12px 18px; border-radius: 18px;
  line-height: 1.7; font-size: .96rem; font-weight: 600;
  white-space: pre-wrap;
  transition: background .18s ease, border-color .18s ease;
}
.chat-user:hover .chat-bubble-inner {
  background: #d9f6f0;
  border-color: rgba(0, 179, 156, .45);
}
/* edit affordance: inline pencil revealed on hover */
.chat-user .chat-bubble-inner::after {
  content: "✎";
  margin-inline-start: 8px;
  font-size: .82em; color: var(--kadia-teal-dark);
  opacity: 0; transition: opacity .18s ease;
}
.chat-user:hover .chat-bubble-inner::after { opacity: .9; }

/* --- quick-reply suggestion chips --- */
.chat-options {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-self: flex-start; max-width: 100%;
  padding-inline-start: 50px; /* aligns under bot text (38px avatar + 12px gap) */
  animation: kadia-chat-in .38s cubic-bezier(.22, .61, .36, 1) .08s both;
}
.chat-option-btn {
  padding: 12px 22px; border-radius: 14px;
  border: 1.5px solid var(--kadia-border);
  background: var(--kadia-card); color: var(--kadia-text);
  font-weight: 700; font-size: .96rem; font-family: inherit; cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.chat-option-btn:hover {
  border-color: var(--kadia-teal); color: var(--kadia-teal-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 179, 156, .16);
}
.chat-option-btn:active { transform: translateY(0); box-shadow: none; }
.chat-option-btn.selected {
  background: var(--kadia-teal-tint);
  border-color: var(--kadia-teal);
  color: var(--kadia-teal-dark);
}
.chat-multi-btn.selected::before { content: "✓ "; font-weight: 800; }

.chat-multiselect, .chat-elaboration {
  align-self: flex-start; width: 100%; max-width: 100%;
  padding-inline-start: 50px; box-sizing: border-box;
  animation: kadia-chat-in .38s cubic-bezier(.22, .61, .36, 1) .08s both;
}
.chat-multiselect .chat-options { padding-inline-start: 0; animation: none; }

.chat-multi-confirm {
  margin-top: 12px;
  padding: 8px 22px; border: none; border-radius: 999px;
  background: var(--kadia-teal); color: #fff;
  font-family: inherit; font-weight: 700; font-size: .88rem; cursor: pointer;
  transition: background .18s ease, transform .15s ease;
}
.chat-multi-confirm:hover { background: var(--kadia-teal-dark); transform: translateY(-1px); }

/* --- free-text composer --- */
.chat-composer {
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--kadia-card);
  border: 1.5px solid var(--kadia-border);
  border-radius: 22px;
  padding: 6px; padding-inline-start: 16px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.chat-composer:focus-within {
  border-color: var(--kadia-teal);
  box-shadow: 0 0 0 3px rgba(0, 179, 156, .12);
}
.chat-textarea {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  resize: none; font-family: inherit; font-size: .95rem; line-height: 1.7;
  color: var(--kadia-text);
  padding: 8px 0; min-height: 24px; max-height: 140px;
  field-sizing: content; /* auto-grow in modern browsers; harmless fallback elsewhere */
}
.chat-textarea::placeholder { color: var(--kadia-text-muted); opacity: .75; }
.chat-elaboration-submit {
  flex: none; width: 38px; height: 38px;
  border: none; border-radius: 50%;
  background: var(--kadia-teal); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .18s ease, transform .15s ease;
}
.chat-elaboration-submit:hover { background: var(--kadia-teal-dark); transform: scale(1.06); }
.chat-elaboration-submit svg { width: 18px; height: 18px; }
.chat-elaboration-skip {
  margin-top: 8px; padding: 4px 2px;
  background: none; border: none;
  color: var(--kadia-text-muted);
  font-family: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.chat-elaboration-skip:hover { color: var(--kadia-teal-dark); }

/* --- typing indicator: avatar + soft pulsing dots, no bubble --- */
.chat-typing .chat-bubble-inner {
  display: inline-flex; align-items: center; padding: 9px 0 0;
}
.chat-typing-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--kadia-teal); margin: 0 2.5px; opacity: .3;
  animation: kadia-typing-pulse 1.2s infinite ease-in-out;
}
.chat-typing-dot:nth-child(2) { animation-delay: .18s; }
.chat-typing-dot:nth-child(3) { animation-delay: .36s; }
@keyframes kadia-typing-pulse {
  0%, 100% { opacity: .25; transform: scale(.9); }
  40%      { opacity: 1;   transform: scale(1); }
}

@media (max-width: 480px) {
  .chat-log { max-height: 58vh; gap: 16px; }
  .chat-bubble { max-width: 96%; }
  .chat-bot { gap: 8px; }
  .chat-avatar { width: 26px; height: 26px; font-size: .72rem; }
  /* reclaim the indent on narrow screens */
  .chat-options, .chat-multiselect, .chat-elaboration { padding-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-bubble, .chat-options, .chat-multiselect, .chat-elaboration { animation: none; }
  .chat-typing-dot { animation: none; opacity: .6; }
}

/* an inline gloss of the Hebrew term as it appears on the original (Hebrew) ticket, so the reader can cross-reference it directly - styled as a distinct reference chip rather than blending into the Arabic sentence */
.he-gloss {
  display: inline-block;
  background: var(--kadia-teal-tint);
  color: var(--kadia-teal-dark);
  padding: 1px 8px;
  border-radius: 6px;
  font-size: .85em;
  font-weight: 700;
  margin: 0 2px;
}

.field-invalid { border: 2px solid var(--kadia-danger); border-radius: 14px; padding: 8px; animation: kadia-shake .4s ease; }
@keyframes kadia-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.link-btn {
  background: none; border: none; text-decoration: underline;
  color: inherit; cursor: pointer; font-weight: 700; padding: 0;
  margin-inline-start: 6px; font-size: inherit; font-family: inherit;
}

.kadia-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--kadia-navy); color: #fff;
  padding: 12px 22px; border-radius: 999px;
  font-weight: 700; font-size: .92rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  opacity: 0; transition: opacity .3s ease, transform .3s ease;
  z-index: 9999; pointer-events: none;
  max-width: calc(100vw - 40px); text-align: center;
}
.kadia-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.kadia-toast-error { background: var(--kadia-danger); }

.wizard-card {
  background: var(--kadia-card);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 32px;
}

/* the 6 wizard step cards specifically (every .step is also a .wizard-card,
   but not every .wizard-card is a step - this compound selector keeps the
   refresh scoped to the wizard without touching the shared card look used
   on auth/dashboard/admin) get a slightly larger, more elevated treatment
   plus a thin brand-gradient cap and a soft entrance each time goToStep()
   toggles display, so moving between steps feels like a real transition
   instead of a hard cut. */
.wizard-card.step {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 44px;
  box-shadow: 0 1px 2px rgba(45, 27, 78, .05), 0 20px 44px rgba(45, 27, 78, .1);
}
.wizard-card.step::before {
  content: "";
  position: absolute; top: 0; inset-inline: 0; height: 4px;
  background: linear-gradient(90deg, var(--kadia-teal), var(--kadia-gold-light));
}
@media (prefers-reduced-motion: no-preference) {
  .wizard-card.step { animation: wizardStepIn .45s cubic-bezier(.22, .61, .36, 1) both; }
}
@keyframes wizardStepIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 480px) {
  .wizard-card.step { padding: 28px 22px; border-radius: 20px; }
}

.wizard-card h2 { color: var(--kadia-navy); margin-top: 0; }
.wizard-card p.hint { color: var(--kadia-text-muted); margin-top: -8px; margin-bottom: 22px; }
.wizard-card.step h2 { font-size: 1.65rem; font-weight: 800; margin-bottom: 10px; }
.wizard-card.step p.hint { font-size: 1rem; line-height: 1.65; margin-bottom: 30px; }

/* a field the vision model came back null for - distinct from .field-invalid
   (red, user's own mistake) since this isn't something the user did wrong,
   just a gap the OCR left for them to fill in themselves */
.field-ocr-missed input, .field-ocr-missed select { border-color: #e3a24d; background: #fffaf3; }
.field p.field-hint-missed { margin: 6px 0 0; color: #8a4a12; font-weight: 600; font-size: .85rem; }

.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; margin-bottom: 8px; color: var(--kadia-navy); }
.field input[type=text],
.field input[type=number],
.field input[type=tel],
.field input[type=password],
.field input[type=date],
.field input[type=email],
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--kadia-border);
  font-family: inherit;
  font-size: 1rem;
  background: #fff;
  color: var(--kadia-text);
}
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--kadia-teal-light);
}

/* wizard-only field refinement (scoped via the .step ancestor - every
   wizard step card carries this class, auth/admin/dashboard forms don't -
   see .wizard-card.step above for why this scoping pattern is used
   throughout this file instead of touching the shared .field rules). */
.step .field input[type=text], .step .field input[type=number], .step .field input[type=tel],
.step .field input[type=password], .step .field input[type=date], .step .field input[type=email],
.step .field select, .step .field textarea {
  border-radius: 12px;
  padding: 13px 15px;
  border: 1.5px solid var(--kadia-border);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.step .field input:focus, .step .field select:focus, .step .field textarea:focus {
  border-color: var(--kadia-teal);
  box-shadow: 0 0 0 4px var(--kadia-teal-tint);
}

/* choice tiles (violation type, etc.) - a fixed min-height with centered
   content keeps every tile in a row the same height regardless of how many
   lines its own label wraps to (Arabic/Hebrew labels differ a lot in
   length), which is what made this grid look jagged and cramped before -
   the uneven row heights were doing a lot of the "this looks unpolished"
   work on their own, independent of padding/font size. */
.option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.option-pill {
  min-height: 92px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--kadia-border);
  border-radius: 16px;
  padding: 16px 16px;
  text-align: center;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.4;
  background: #fff;
  box-shadow: 0 1px 2px rgba(45, 27, 78, .03);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.option-pill:hover { border-color: var(--kadia-teal-light); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(45, 27, 78, .08); }
.option-pill.selected {
  position: relative;
  border-color: var(--kadia-teal);
  background: var(--kadia-teal-tint);
  color: var(--kadia-teal-dark);
  box-shadow: 0 6px 18px rgba(0, 179, 156, .2);
}
.option-pill.selected::after {
  content: "✓";
  position: absolute; top: 10px; inset-inline-end: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--kadia-teal); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .66rem; font-weight: 900;
}
@media (max-width: 480px) {
  .option-grid { grid-template-columns: repeat(2, 1fr); }
  .option-pill { min-height: 80px; font-size: .95rem; padding: 14px 10px; }
}

/* ---------- step 1: scan (sub-screen A) -> confirm details (sub-screen B) ---------- */
.step1-subnav { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }
.step1-subdot {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 800; background: var(--kadia-border);
  color: var(--kadia-text-muted); transition: background .25s ease, color .25s ease;
}
.step1-subdot.active { background: var(--kadia-teal); color: #fff; }
.step1-subdot.done { background: var(--kadia-teal-tint); color: var(--kadia-teal-dark); }
.step1-subdot-label { font-size: .82rem; font-weight: 700; color: var(--kadia-text-muted); transition: color .25s ease; }
.step1-subdot-label.active { color: var(--kadia-navy); }
.step1-subdot-line { flex: 1; height: 2px; background: var(--kadia-border); min-width: 16px; max-width: 40px; }
@media (max-width: 480px) { .step1-subdot-label { display: none; } }

/* the one legal warning that actually matters most in the whole wizard
   (paying the ticket forfeits the appeal right) - gets its own distinct,
   gently-glowing treatment instead of blending into a generic muted alert
   box, so it reads as "stop and notice this" without being alarmist. */
.legal-alert {
  display: flex; align-items: center; gap: 13px;
  background: linear-gradient(135deg, #fff8f0, #fdecdb);
  border: 1.5px solid #f3c896;
  border-radius: 14px;
  padding: 13px 16px;
  margin-bottom: 18px;
}
.legal-alert-icon {
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--kadia-gold-light), var(--kadia-danger));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  box-shadow: 0 0 0 0 rgba(192, 57, 43, .4);
}
.legal-alert-text {
  margin: 0; color: #6b3a0e; font-size: .88rem; line-height: 1.55; font-weight: 600;
}
.legal-alert-text strong { color: var(--kadia-danger); }

@media (prefers-reduced-motion: no-preference) {
  .legal-alert-icon { animation: legalAlertPulse 2.6s ease-in-out infinite; }
  .legal-alert { animation: legalAlertGlow 2.6s ease-in-out infinite; }
}
@keyframes legalAlertPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, .4); }
  50%      { box-shadow: 0 0 0 7px rgba(192, 57, 43, 0); }
}
@keyframes legalAlertGlow {
  0%, 100% { border-color: #f3c896; box-shadow: 0 0 0 rgba(212, 83, 126, 0); }
  50%      { border-color: var(--kadia-gold); box-shadow: 0 0 14px rgba(212, 83, 126, .16); }
}

/* personal-area ("my tickets") promo banner - only ever shown to a
   logged-in user who actually still has an unused launch-promo credit (see
   dashboard.js's renderPromoBanner), so unlike the landing-page strip this
   one is personal ("you have one waiting") rather than a general
   announcement. Whole thing is a single <a> so the entire row is one big
   tap target into the wizard. */
.dash-promo-banner {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(120deg, var(--kadia-navy), #3a2461 60%, var(--kadia-teal-dark));
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 22px;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 18px rgba(45, 27, 78, .16);
}
.dash-promo-banner:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(45, 27, 78, .22); }
.dash-promo-icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(155deg, var(--kadia-gold-light), var(--kadia-gold));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
}
.dash-promo-text { flex: 1; min-width: 0; color: #fff; font-weight: 700; font-size: .95rem; line-height: 1.5; }
.dash-promo-cta {
  flex: none; color: var(--kadia-gold-light); font-weight: 800; font-size: .88rem;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .dash-promo-banner { flex-wrap: wrap; }
  .dash-promo-cta { width: 100%; padding-inline-start: 54px; }
}

.step1-scan-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 22px; }
.step1-scan-continue { width: 100%; max-width: 320px; }

.step1-back-link {
  background: none; border: none; cursor: pointer; padding: 0;
  font-weight: 700; font-size: .88rem; color: var(--kadia-text-muted);
  margin-bottom: 14px; display: inline-flex; align-items: center; gap: 4px;
}
.step1-back-link:hover { color: var(--kadia-teal-dark); }

.step1-photo-summary {
  display: flex; align-items: center; gap: 14px;
  background: var(--kadia-teal-tint); border-radius: 14px; padding: 12px 16px; margin-bottom: 26px;
}
.step1-photo-summary img {
  width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.step1-photo-summary p.hint { color: var(--kadia-teal-dark); font-weight: 700; }

.field-group { margin-bottom: 46px; }
.field-group:last-of-type { margin-bottom: 0; }
.field-group-title {
  display: flex; align-items: center; gap: 11px;
  font-size: 1.05rem; font-weight: 800; color: var(--kadia-navy);
  margin-bottom: 24px;
}
.field-group-title::before {
  content: ""; flex: none; width: 5px; height: 22px; border-radius: 3px;
  background: linear-gradient(180deg, var(--kadia-teal), var(--kadia-gold-light));
}

.scan-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; }
.scan-field-grid .field-span-2 { grid-column: 1 / -1; }
@media (max-width: 600px) { .scan-field-grid { grid-template-columns: 1fr; } }

/* wizard-only field rhythm (scoped via .step, same pattern as the input
   radius/focus rules above) - noticeably more breathing room between
   fields/labels than the shared default, which is tuned tighter for dense
   admin/auth forms. */
.step .field { margin-bottom: 24px; }
.step .field label { font-size: .95rem; margin-bottom: 9px; }
.step .field p.hint { font-size: .85rem; color: #948dab; }

/* the fields the AI already read for you get a small green check (the exact
   "just finished" pop already used when the scan itself completes, see
   .scan-spinner.done) - closing the loop between the landing page's promise
   and this screen actually delivering it. the ones it missed get an amber
   pencil instead of the same green, not just a re-tinted checkmark, so "we
   found this" and "please write this" read as different at a glance. */
.field-status-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; font-size: .66rem; font-weight: 900;
  vertical-align: middle; margin-inline-start: 3px;
}
.field-status-badge:empty { display: none; }
.field-status-badge.ok {
  background: var(--kadia-teal-tint); color: var(--kadia-teal-dark);
  animation: kadia-check-pop .45s cubic-bezier(.34,1.56,.64,1);
}
.field-status-badge.missed { background: #fdf0dc; color: #b26a12; }
@media (prefers-reduced-motion: reduce) {
  .field-status-badge.ok { animation: none; }
}

.wizard-actions { display: flex; justify-content: space-between; margin-top: 26px; }

.upload-box {
  position: relative;
  border: 2px dashed #c9c0d8;
  border-radius: 18px;
  padding: 0;
  text-align: center;
  cursor: pointer;
  color: var(--kadia-text-muted);
  display: block;
  overflow: hidden;
  background: var(--kadia-bg);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.upload-box:hover { border-color: var(--kadia-teal-light); background: var(--kadia-teal-tint); transform: translateY(-1px); }

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 34px 22px;
  min-height: 140px;
}
.upload-icon { font-size: 2.4rem; margin-bottom: 4px; animation: kadia-upload-float 2.6s ease-in-out infinite; }
.upload-title { font-weight: 800; color: var(--kadia-navy); font-size: 1.05rem; }
.upload-sub { font-size: 0.85rem; color: var(--kadia-text-muted); }
@keyframes kadia-upload-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* upload scanning state: keeps the customer's actual photo clearly visible
   (no full-image tint wash) and dramatizes real OCR work with a scanner-bar
   sweep + soft trailing glow, viewfinder corners, and a proper checkmark
   pop on completion - the same "scan then confirm" motion language as the
   landing-page hero, so the product feels like one system throughout. */
.upload-preview { position: relative; line-height: 0; min-height: 220px; background: var(--kadia-bg); border-radius: 14px; overflow: hidden; }
.upload-preview img {
  width: 100%; height: 220px; max-height: 320px; object-fit: cover; display: block; border-radius: 14px;
  filter: brightness(1) saturate(1); transition: filter .4s ease;
}
.upload-preview.scanning img { filter: brightness(.95) saturate(1.05); }

.scan-corner {
  position: absolute; width: 28px; height: 28px;
  border: 3px solid var(--kadia-teal-light);
  opacity: 0; transition: opacity .25s ease, border-color .25s ease, filter .25s ease;
  z-index: 3; border-radius: 5px;
}
.upload-preview.scanning .scan-corner, .upload-preview.done .scan-corner { opacity: 1; }
.upload-preview.scanning .scan-corner { filter: drop-shadow(0 0 5px rgba(29, 217, 193, .55)); }
.scan-corner.tl { top: 12px; inset-inline-start: 12px; border-inline-end: none; border-bottom: none; }
.scan-corner.tr { top: 12px; inset-inline-end: 12px; border-inline-start: none; border-bottom: none; }
.scan-corner.bl { bottom: 12px; inset-inline-start: 12px; border-inline-end: none; border-top: none; }
.scan-corner.br { bottom: 12px; inset-inline-end: 12px; border-inline-start: none; border-top: none; }
.upload-preview.done .scan-corner { border-color: var(--kadia-success); filter: none; }

.scan-line {
  position: absolute; inset-inline: 5%; height: 3px; top: 4%;
  background: linear-gradient(90deg, transparent, var(--kadia-teal-light), var(--kadia-teal), var(--kadia-teal-light), transparent);
  box-shadow: 0 0 14px 3px rgba(29, 217, 193, .7), 0 0 34px 8px rgba(0, 179, 156, .25);
  opacity: 0; z-index: 2; border-radius: 2px;
}
.scan-line::after {
  content: ""; position: absolute; inset-inline: 0; top: 3px; height: 46px;
  background: linear-gradient(180deg, rgba(0, 179, 156, .16), transparent);
}
.upload-preview.scanning .scan-line { opacity: 1; animation: kadia-scan-sweep 2.1s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes kadia-scan-sweep { 0% { top: 4%; } 50% { top: 92%; } 100% { top: 4%; } }

.upload-status {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; max-width: 90%;
  background: rgba(36, 26, 51, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; padding: 8px 16px; border-radius: 999px; font-size: 0.85rem; font-weight: 700;
  z-index: 4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: kadia-fade-up 0.3s ease-out;
  transition: background .3s ease;
}
.upload-preview.done .upload-status {
  background: rgba(30, 138, 95, .92);
  animation: kadia-status-pop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes kadia-status-pop {
  0% { transform: translateX(-50%) scale(.9); }
  55% { transform: translateX(-50%) scale(1.05); }
  100% { transform: translateX(-50%) scale(1); }
}

.scan-spinner {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
.scan-spinner.done {
  border: none; animation: kadia-check-pop .45s cubic-bezier(.34,1.56,.64,1);
}
.scan-spinner.done::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 900; line-height: 1; }
@keyframes kadia-check-pop {
  0% { transform: scale(.2); opacity: 0; }
  65% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); }
}

.ground-result {
  border: 1px solid var(--kadia-border);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 14px;
  background: #fbfbf7;
}
.ground-result h4 { margin: 0 0 6px; color: var(--kadia-navy); }
.ground-result .legal { color: var(--kadia-text-muted); font-size: 0.9rem; line-height: 1.6; margin-top: 8px; border-top: 1px dashed var(--kadia-border); padding-top: 8px; }
.tag { display: inline-block; background: var(--kadia-teal); color: #fff; font-size: 0.75rem; padding: 2px 10px; border-radius: 999px; margin-bottom: 6px; }

.letter-preview {
  direction: rtl;
  text-align: right;
  white-space: pre-wrap;
  font-family: 'Tajawal', 'Segoe UI', sans-serif;
  background: #fefdfb;
  border: 1px solid var(--kadia-border);
  border-radius: 14px;
  padding: 26px 24px;
  line-height: 1.9;
  min-height: 300px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 3px rgba(45, 27, 78, .04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.letter-preview:focus {
  outline: none; border-color: var(--kadia-teal);
  box-shadow: 0 0 0 4px var(--kadia-teal-tint);
}

/* letter-document: a print-ready rendering of the same letter text, hidden
   on screen and revealed only for window.print() via the @media print rule
   below - so printing/saving-as-PDF produces a proper letterhead document
   (logo, firm name, brand rule, footer contact) instead of a plain
   textarea dump. Kept deliberately restrained - this is a formal letter
   submitted to a government office, not a marketing page, so the brand
   shows up as a letterhead mark and a thin accent rule, not color everywhere.
   Pagination is guarded (orphans/widows + page-break-inside) so a stray
   line or the footer never strands alone on an otherwise-blank page. */
.letter-document { display: none; }

.letter-document-header {
  margin-bottom: 26px;
  page-break-inside: avoid;
  page-break-after: avoid;
}
.letter-document-brandrow { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.letter-document-logo { width: 40px; height: 40px; flex: none; }
.letter-document-firm { line-height: 1.4; }
.letter-document-header .firm-name {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--kadia-navy);
  letter-spacing: 0.01em;
}
.letter-document-header .firm-meta {
  font-size: 0.8rem;
  color: #6b6178;
  margin-top: 3px;
  letter-spacing: 0.02em;
}
/* hairline + a short two-tone accent tick, aligned to the RTL start -
   a letterhead mark, not a webpage banner */
.letter-document-rule {
  position: relative;
  height: 1px;
  background: #ddd6ea;
}
.letter-document-rule::after {
  content: "";
  position: absolute;
  top: -1.5px;
  right: 0;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--kadia-navy), var(--kadia-teal));
}

.letter-document-body {
  direction: rtl;
  text-align: right;
  white-space: pre-wrap;
  font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
  line-height: 1.9;
  font-size: 0.99rem;
  color: #1c1c1c;
  orphans: 3;
  widows: 3;
}

.letter-document-footer {
  position: relative;
  margin-top: 34px;
  padding-top: 16px;
  text-align: center;
  font-size: 0.78rem;
  color: #8a8296;
  letter-spacing: 0.01em;
  page-break-inside: avoid;
}
.letter-document-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--kadia-navy), var(--kadia-teal));
  opacity: 0.55;
}

@page {
  margin: 20mm 18mm;
}
@media print {
  html, body { background: #fff; }
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body * { visibility: hidden; }
  .letter-document, .letter-document * { visibility: visible; }
  .letter-document {
    display: block;
    position: absolute;
    top: 0; right: 0; left: 0;
    padding: 0;
  }
}

.method-choice { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.method-card {
  position: relative;
  border: 1.5px solid var(--kadia-border);
  border-radius: 16px;
  padding: 18px;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.method-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(45, 27, 78, .08); }
.promo-free-ribbon {
  position: absolute; top: -12px; right: 14px;
  background: var(--kadia-gold); color: #fff;
  padding: 3px 12px; border-radius: 999px;
  font-weight: 800; font-size: .74rem;
  box-shadow: 0 3px 8px rgba(212, 83, 126, .35);
}
.method-card.selected { border-color: var(--kadia-teal); background: var(--kadia-teal-tint); box-shadow: 0 6px 18px rgba(0, 179, 156, .16); }
.method-card.selected::after {
  content: "✓";
  position: absolute; top: 12px; inset-inline-end: 12px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--kadia-teal); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 900;
}
.method-card .amt { font-size: 1.4rem; font-weight: 800; color: var(--kadia-navy); }
.method-card.locked { opacity: 0.65; cursor: pointer; transition: box-shadow .15s ease, opacity .15s ease; }
.method-card.locked:hover { opacity: 0.85; box-shadow: 0 4px 14px rgba(45, 27, 78, .08); }
.method-card .lock-note { color: var(--kadia-gold); font-size: 0.78rem; font-weight: 700; margin-top: 8px; }
.method-card.locked.unlock-nudge { animation: kadia-unlock-nudge .5s ease; }
@keyframes kadia-unlock-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* guest -> account unlock panel (step 4): a positive "unlock" invitation,
   not a dead-end error - appears in place when a guest reaches for a
   locked option, pre-fills what they already typed, and never navigates
   away from the wizard so nothing already entered is lost. */
.unlock-panel {
  background: linear-gradient(180deg, var(--kadia-teal-tint), #fff 65%);
  border: 1.5px solid var(--kadia-teal-light);
  border-radius: 16px;
  padding: 22px 20px;
  margin-bottom: 20px;
  animation: kadia-fade-up .35s ease-out;
}
.unlock-panel-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.unlock-icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; box-shadow: 0 4px 12px rgba(0, 137, 122, .18);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.unlock-panel-header h3 { margin: 0 0 4px; color: var(--kadia-navy); font-size: 1.05rem; }
.unlock-panel-header p { margin: 0; color: var(--kadia-text-muted); font-size: .88rem; line-height: 1.6; }
.unlock-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 600px) { .unlock-field-row { grid-template-columns: 1fr; } }
.unlock-switch-link { text-align: center; margin: 12px 0 0; font-size: .88rem; color: var(--kadia-text-muted); }

.alert {
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-weight: 600;
}
.alert-error { background: #fdecea; color: var(--kadia-danger); }
.alert-success { background: #eaf7f0; color: var(--kadia-success); }
.alert-info { background: #eaf4f7; color: var(--kadia-teal); }
.alert-warning { background: #fdf2e9; color: #8a4a12; border: 1.5px solid #f0c896; line-height: 1.7; }
.alert-warning strong { color: #6b3a0e; }

.spinner {
  display: inline-block; width: 18px; height: 18px;
  border: 3px solid rgba(255,255,255,0.4); border-top-color: #fff;
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.track-box {
  background: var(--kadia-navy);
  color: #fff;
  border-radius: 16px;
  padding: 22px;
  text-align: center;
}
.track-box .num { font-size: 1.6rem; font-weight: 800; color: var(--kadia-gold-light); letter-spacing: 1px; margin: 10px 0; }

/* ---------- analyzing / result reveal (step 3) ---------- */
@keyframes kadia-ring-spin { to { transform: rotate(360deg); } }
@keyframes kadia-icon-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes kadia-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes kadia-check-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes kadia-pop-in { 0% { opacity: 0; transform: scale(0.4); } 55% { opacity: 1; transform: scale(1.18); } 80% { transform: scale(0.94); } 100% { transform: scale(1); } }
@keyframes kadia-badge-in { from { opacity: 0; transform: translateY(-8px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }

.analyzing-wrap { text-align: center; padding: 20px 0 8px; }

.analyzing-visual { position: relative; width: 110px; height: 110px; margin: 0 auto 28px; }
.analyzing-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 4px solid var(--kadia-teal-tint);
  border-top-color: var(--kadia-teal);
  border-inline-start-color: var(--kadia-gold);
  animation: kadia-ring-spin 1.3s linear infinite;
}
.analyzing-icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; animation: kadia-icon-pulse 1.6s ease-in-out infinite;
}

.analyzing-title { color: var(--kadia-navy); margin-bottom: 26px; }

.analyzing-checklist { list-style: none; padding: 0; margin: 0 auto; max-width: 380px; text-align: right; }
.analyzing-checklist li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px;
  color: var(--kadia-text-muted); font-weight: 600; font-size: 0.95rem;
  opacity: 0; visibility: hidden;
}
.analyzing-checklist li .dot {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--kadia-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; color: transparent;
}
.analyzing-checklist li.active {
  opacity: 1; visibility: visible;
  animation: kadia-check-in 0.4s ease-out;
  color: var(--kadia-navy);
  background: var(--kadia-teal-tint);
}
.analyzing-checklist li.active .dot {
  border-color: var(--kadia-teal); background: var(--kadia-teal); color: #fff;
}

.result-badge {
  display: inline-block; padding: 8px 20px; border-radius: 999px;
  background: var(--kadia-teal-tint); color: var(--kadia-teal);
  font-weight: 800; font-size: 1rem; margin-bottom: 18px;
  animation: kadia-badge-in 0.5s ease-out;
}
.result-title { text-align: center; color: var(--kadia-navy); margin-bottom: 6px; animation: kadia-fade-up 0.5s ease-out; }
.result-subtitle { text-align: center; color: var(--kadia-text-muted); margin-bottom: 28px; animation: kadia-fade-up 0.5s ease-out 0.1s both; }

.result-number-wrap { text-align: center; margin-bottom: 30px; }
.result-number {
  font-size: 6rem; font-weight: 900; line-height: 1; color: var(--kadia-danger);
  animation: kadia-pop-in 0.6s cubic-bezier(.34,1.56,.64,1) 0.2s both;
  text-shadow: 0 4px 18px rgba(192, 57, 43, 0.25);
}
.result-number-caption { color: var(--kadia-text-muted); font-weight: 700; margin-top: 4px; animation: kadia-fade-up 0.5s ease-out 0.4s both; }

/* dashboard: "اعتراضاتي" ticket list - a card-row per ticket instead of a
   flat table, same visual grammar as the office's own admin panel (colored
   status pills, soft shadow on hover) so a customer's own list reads with
   the same polish the office sees internally. */
.dt-list { display: flex; flex-direction: column; gap: 10px; }
.dt-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 6px 16px; background: var(--kadia-card); border: 1px solid var(--kadia-border);
  border-radius: 14px; padding: 16px 18px;
  transition: box-shadow .15s ease, transform .15s ease;
}
.dt-row:hover { box-shadow: 0 8px 22px rgba(45, 27, 78, .08); transform: translateY(-2px); }
.dt-row-main { grid-column: 1; grid-row: 1; min-width: 0; }
.dt-row-id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; }
.dt-ticket-no { font-weight: 800; color: var(--kadia-navy); font-size: 1rem; font-variant-numeric: tabular-nums; }
.dt-row-meta {
  grid-column: 1; grid-row: 2;
  display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: .84rem; color: var(--kadia-text-muted);
  font-variant-numeric: tabular-nums;
}
.dt-meta-item { display: flex; align-items: center; gap: 5px; }
.dt-meta-label { color: #a89fb5; font-size: .74rem; }
.dt-row-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }

@media (max-width: 640px) {
  .dt-row { grid-template-columns: 1fr; }
  .dt-row-actions { grid-column: 1; grid-row: 3; flex-direction: row; margin-top: 6px; }
}

.dt-detail-card {
  background: #fff; border: 1px solid var(--kadia-border); border-radius: 16px;
  padding: 24px 22px; margin-top: 14px;
  box-shadow: 0 1px 2px rgba(45, 27, 78, .04), 0 8px 24px rgba(45, 27, 78, .05);
}
.dt-detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.dt-detail-header h3 { margin: 0; color: var(--kadia-navy); font-size: 1.2rem; }
.dt-detail-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.dt-detail-meta { color: var(--kadia-text-muted); font-size: .9rem; line-height: 2; margin-bottom: 6px; }
.dt-detail-meta strong { color: var(--kadia-text); }

/* legacy alias kept for the ticket-detail box markup used elsewhere */
.ticket-detail-box { background: #fbfbf7; border: 1px solid var(--kadia-border); border-radius: 12px; padding: 16px; margin-top: 12px; }
.ticket-detail-box h3 { margin: 0 0 10px; color: var(--kadia-navy); }
.ticket-detail-box p { margin: 6px 0; line-height: 1.8; }

/* ---------- Personal area (dashboard.html) ---------- */
.account-layout { max-width: 1080px; margin: 36px auto 80px; padding: 0 20px; display: flex; align-items: flex-start; gap: 24px; }

.account-sidebar {
  flex: none; width: 250px;
  background: var(--kadia-navy); border-radius: 18px;
  padding: 22px 14px 14px; position: sticky; top: 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.account-sidebar-profile { text-align: center; padding: 0 8px 18px; border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: 12px; }
.account-avatar {
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, var(--kadia-teal-light), var(--kadia-teal));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 800; margin: 0 auto 12px;
}
.account-sidebar-name { color: #fff; font-weight: 800; font-size: .96rem; word-break: break-word; }
.account-sidebar-meta { color: rgba(255,255,255,0.55); font-size: .76rem; margin-top: 6px; line-height: 1.6; }

.account-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px;
  color: rgba(255,255,255,0.72); font-weight: 700; font-size: .92rem;
  background: none; border: none; cursor: pointer; text-align: right;
  font-family: inherit; width: 100%;
  transition: background .15s ease, color .15s ease;
}
.account-nav-item:hover { background: rgba(255,255,255,0.1); color: #fff; }
.account-nav-item.active { background: var(--kadia-teal); color: #fff; }
.account-nav-item.danger { color: #ff9e90; }
.account-nav-item.danger:hover { background: rgba(192,57,43,0.28); color: #fff; }
.account-nav-item.danger.active { background: var(--kadia-danger); color: #fff; }
.account-nav-item .icon { font-size: 1.05rem; flex: none; line-height: 1; }

.account-main { flex: 1; min-width: 0; }
.account-panel { display: none; }
.account-panel.active { display: block; animation: kadia-fade-up .3s ease-out both; }

.danger-zone { border-color: #f1c3bb; background: #fffaf9; }
.danger-zone h2 { color: var(--kadia-danger); }
.checkbox-field { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0; }
.checkbox-field input { width: auto; margin-top: 3px; }
.checkbox-field label { font-size: .88rem; color: var(--kadia-text); cursor: pointer; }

@media (max-width: 860px) {
  .account-layout { flex-direction: column; gap: 16px; }
  .account-sidebar { width: 100%; position: static; flex-direction: row; flex-wrap: wrap; padding: 16px 12px; }
  .account-sidebar-profile { flex: 1 0 100%; padding-bottom: 14px; }
  .account-nav-item { width: auto; }
}
.status-pill { padding: 4px 12px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; }
.status-draft, .status-awaiting_payment { background: #eee; color: #666; }
.status-matched, .status-letter_generated, .status-document_sent { background: #eaf4f7; color: var(--kadia-teal); }
.status-pending_payment, .status-in_review { background: #fff4dc; color: #9a7000; }
.status-submitted, .status-accepted { background: #eaf7f0; color: var(--kadia-success); }
.status-rejected { background: #fdecea; color: var(--kadia-danger); }

@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; }
  .grid-3, .grid-2, .method-choice { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2rem; }
}