/* ===== نقل عفش الكويت — نظام التصميم ===== */
/* Design tokens: Gulf navy + Kuwaiti flag-inspired accents + warm sand */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Almarai:wght@300;400;700;800&display=swap');

:root{
  --navy-950:#0a1f33;
  --navy-900:#0f2942;
  --navy-800:#173a5c;
  --navy-700:#22507c;
  --sand-50:#faf8f3;
  --sand-100:#f5f0e4;
  --sand-200:#ece2cc;
  --gold-500:#c89b3c;
  --gold-600:#ab8330;
  --red-600:#ce1126;
  --red-700:#a80e1f;
  --green-700:#00693e;
  --ink-900:#1c2b36;
  --ink-600:#4a5a66;
  --line:#dfd6bf;
}

html{scroll-behavior:smooth;}
body{
  font-family:'Almarai', system-ui, sans-serif;
  color:var(--ink-900);
  background:var(--sand-50);
}
h1,h2,h3,h4,.font-display{
  font-family:'Cairo', system-ui, sans-serif;
}

/* Route-line signature motif: a dashed delivery path used across hero / areas / process */
.route-line{
  background-image: repeating-linear-gradient(90deg, var(--gold-500) 0 14px, transparent 14px 26px);
  height:3px;
}
.route-line-v{
  background-image: repeating-linear-gradient(180deg, var(--gold-500) 0 14px, transparent 14px 26px);
  width:3px;
}
.route-dot{
  width:14px;height:14px;border-radius:999px;background:var(--gold-500);
  box-shadow:0 0 0 4px var(--sand-50), 0 0 0 5px var(--line);
}
.route-dot-active{
  background:var(--red-600);
  box-shadow:0 0 0 4px var(--sand-50), 0 0 0 5px var(--red-600);
}

/* Kuwait Towers watermark */
.kw-watermark{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
}

.card-hover{
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-hover:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -18px rgba(15,41,66,.35);
  border-color:var(--gold-500);
}

.btn-primary{
  background:var(--red-600);
  color:#fff;
  transition:background .2s ease, transform .15s ease;
}
.btn-primary:hover{background:var(--red-700); transform:translateY(-1px);}

.btn-gold{
  background:var(--gold-500);
  color:var(--navy-950);
  transition:background .2s ease, transform .15s ease;
}
.btn-gold:hover{background:var(--gold-600); transform:translateY(-1px);}

.chip{
  border:1px solid var(--line);
  background:#fff;
  transition:all .2s ease;
}
.chip:hover, .chip.active{
  border-color:var(--gold-500);
  background:var(--sand-100);
}

.whatsapp-float{
  position:fixed; z-index:50; bottom:22px; left:22px;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.4);
}
.call-float{
  position:fixed; z-index:50; bottom:22px; right:22px;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.4);
}

@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(206,17,38,.5);}
  100%{box-shadow:0 0 0 16px rgba(206,17,38,0);}
}
.pulse{animation:pulse-ring 2s infinite;}

.marquee-track{
  animation:marquee 32s linear infinite;
}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
[dir="rtl"] .marquee-track{
  animation:marquee-rtl 32s linear infinite;
}
@keyframes marquee-rtl{
  from{transform:translateX(0);}
  to{transform:translateX(50%);}
}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .marquee-track{animation:none;}
  .pulse{animation:none;}
}

.faq-arrow{transition:transform .25s ease;}
.faq-open .faq-arrow{transform:rotate(180deg);}
.faq-panel{max-height:0; overflow:hidden; transition:max-height .3s ease;}

::selection{background:var(--gold-500); color:var(--navy-950);}

.skip-link:focus{
  position:fixed; top:8px; right:8px; z-index:100;
  background:var(--navy-900); color:#fff; padding:10px 16px; border-radius:8px;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--gold-500); outline-offset:2px;
}