/* ============================================================
   VEESHRAD — Component styles
   RULE: consumes design tokens ONLY (see tokens.css).
   No raw colors, sizes, or brand values in this file.
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--color-bg-page);
  color:var(--color-text-primary);
  font-family:var(--font-family-base);
  line-height:var(--line-height-base);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--layout-max-width);margin:0 auto;padding:0 var(--layout-gutter)}
.eyebrow{
  color:var(--color-accent);
  letter-spacing:var(--letter-spacing-wide);
  text-transform:uppercase;
  font-size:var(--font-size-xs);
  font-weight:var(--font-weight-bold);
}
h1,h2,h3{font-weight:var(--font-weight-heavy);line-height:var(--line-height-tight)}
html[dir="ltr"] h1,html[dir="ltr"] h2{font-family:var(--font-family-display);font-weight:var(--font-weight-regular)}
h2{font-size:var(--font-size-display-sm);margin-bottom:var(--space-2)}
.sub{color:var(--color-text-muted);max-width:640px}
section{padding:var(--space-section) 0}

/* ---------- NAV ---------- */
nav{
  position:sticky;top:0;z-index:var(--z-nav);
  background:var(--color-overlay-nav);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--color-border-subtle);
}
.menu-btn{
  display:none;align-items:center;justify-content:center;
  width:var(--size-touch-target);height:var(--size-touch-target);
  background:none;border:1px solid var(--color-border-medium);border-radius:var(--radius-md);
  color:var(--color-accent);cursor:pointer;font-size:var(--font-size-xl);line-height:1;
}
.mobile-nav{
  display:none;position:absolute;top:100%;inset-inline:0;
  background:var(--color-overlay-nav);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--color-border-subtle);
  flex-direction:column;padding:var(--space-3) var(--layout-gutter) var(--space-5);
}
.mobile-nav.open{display:flex}
.mobile-nav a{
  padding:var(--space-3) 0;color:var(--color-text-muted);
  border-bottom:1px dashed var(--color-border-subtle);
  min-height:var(--size-touch-target);display:flex;align-items:center;
}
.mobile-nav a:hover{color:var(--color-accent-soft)}
@media(max-width:900px){.menu-btn{display:flex}}
.navin{display:flex;align-items:center;justify-content:space-between;height:var(--layout-nav-height)}
.logo{display:flex;align-items:baseline;gap:var(--space-2)}
.logo .latin{font-family:var(--font-family-display);font-size:var(--font-size-xl);letter-spacing:var(--letter-spacing-logo);color:var(--color-text-primary)}
.logo .arab{color:var(--color-accent);font-size:var(--font-size-md);font-weight:var(--font-weight-bold)}
.navlinks{display:flex;gap:var(--space-6);font-size:var(--font-size-sm);color:var(--color-text-muted)}
.navlinks a:hover{color:var(--color-accent-soft)}
.navright{display:flex;align-items:center;gap:var(--space-3)}
.lang{display:flex;border:1px solid var(--color-border-medium);border-radius:var(--radius-pill);overflow:hidden}
.lang button{
  background:none;border:0;color:var(--color-text-muted);
  padding:var(--space-1) var(--space-3);cursor:pointer;
  font-family:inherit;font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);
}
.lang button.active{background:var(--color-accent);color:var(--color-text-on-accent)}
@media(max-width:900px){.navlinks{display:none}}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:var(--space-2);
  border-radius:var(--radius-pill);
  padding:var(--space-3) var(--space-7);
  font-weight:var(--font-weight-heavy);font-size:var(--font-size-md);
  transition:var(--motion-fast);cursor:pointer;border:0;font-family:inherit;
}
.btn-gold{background:var(--color-accent-gradient);color:var(--color-text-on-accent)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:var(--shadow-cta)}
.btn-ghost{border:1px solid var(--color-border-strong);color:var(--color-accent-soft)}
.btn-ghost:hover{background:var(--color-border-subtle)}
.btn-sm{padding:var(--space-2) var(--space-5);font-size:var(--font-size-sm)}
.wa-ic{width:var(--size-icon-sm);height:var(--size-icon-sm);flex:none}

/* ---------- HERO ---------- */
.hero{
  padding:var(--space-hero-top) 0 var(--space-16);
  background:
    radial-gradient(900px 500px at 85% -10%,var(--color-border-subtle),transparent 60%),
    radial-gradient(700px 420px at 0% 110%,var(--color-border-subtle),transparent 60%);
}
.hero h1{font-size:var(--font-size-display-lg);margin:var(--space-4) 0 var(--space-5)}
.hero h1 em{font-style:normal;color:var(--color-accent)}
.hero .sub{font-size:var(--font-size-lg);margin-bottom:var(--space-8)}
.hero-ctas{display:flex;gap:var(--space-4);flex-wrap:wrap}
.hero-stats{display:flex;gap:var(--space-10);margin-top:var(--space-11);flex-wrap:wrap}
.stat b{display:block;font-size:var(--font-size-2xl);color:var(--color-accent)}
.stat span{color:var(--color-text-muted);font-size:var(--font-size-sm)}

/* ---------- TRUST STRIP ---------- */
.trust{
  border-block:1px solid var(--color-border-subtle);
  background:var(--color-bg-surface);
  padding:var(--space-6) 0;text-align:center;
  color:var(--color-text-muted);font-size:var(--font-size-sm);
}
.trust b{color:var(--color-accent-soft)}

/* ---------- CARDS / GRID ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-grid-gap);margin-top:var(--space-9)}
@media(max-width:820px){.grid3{grid-template-columns:1fr}}
.card{
  background:var(--color-bg-card);
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-md);
  padding:var(--space-card-y) var(--space-card-x);
  transition:var(--motion-medium);
}
.card:hover{border-color:var(--color-border-medium);transform:translateY(-4px)}
.card .ic{font-size:var(--font-size-price);margin-bottom:var(--space-4)}
.card h3{font-size:var(--font-size-lg);margin-bottom:var(--space-2);color:var(--color-accent-soft)}
.card p{color:var(--color-text-muted);font-size:var(--font-size-sm)}

/* ---------- LADIES ---------- */
.ladies{background:var(--color-bg-feature-gradient);border-block:1px solid var(--color-border-medium)}
.ladies-in{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-10);align-items:center}
@media(max-width:820px){.ladies-in{grid-template-columns:1fr}}
.ladies ul{list-style:none;margin-top:var(--space-5)}
.ladies li{padding:var(--space-2) 0;color:var(--color-text-muted)}
.ladies li::before{content:"◆ ";color:var(--color-accent);font-size:var(--font-size-xs)}
.veil{
  background:var(--color-bg-card);
  border:1px solid var(--color-border-medium);
  border-radius:var(--radius-md);
  padding:var(--space-9);text-align:center;
}
.veil .big{font-size:var(--font-size-price)}
.veil p{color:var(--color-accent-soft);font-weight:var(--font-weight-bold);margin-top:var(--space-2)}

/* ---------- STEPS ---------- */
.steps{counter-reset:step}
.step{position:relative;padding-top:var(--space-3)}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;top:calc(-1 * var(--space-4));inset-inline-start:var(--space-7);
  font-family:var(--font-family-display);
  font-size:var(--font-size-step-number);
  color:var(--color-border-medium);
}

/* ---------- PACKAGES ---------- */
.pkg-section{padding-top:var(--space-9)}
.pkg{position:relative;display:flex;flex-direction:column}
.pkg .price{font-family:var(--font-family-display);font-size:var(--font-size-price);color:var(--color-text-primary);margin:var(--space-3) 0 var(--space-1)}
.pkg .price .cur{font-size:var(--font-size-md)}
.pkg .per{color:var(--color-text-muted);font-size:var(--font-size-sm);margin-bottom:var(--space-4)}
.pkg ul{list-style:none;margin-bottom:var(--space-6);flex:1}
.pkg li{padding:var(--space-2) 0;color:var(--color-text-muted);font-size:var(--font-size-sm);border-bottom:1px dashed var(--color-border-subtle)}
.badge{
  position:absolute;top:calc(-1 * var(--space-3));inset-inline-end:var(--space-5);
  background:var(--color-accent);color:var(--color-text-on-accent);
  font-size:var(--font-size-xs);font-weight:var(--font-weight-heavy);
  padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);
}
.pkg.feat{border-color:var(--color-accent);box-shadow:var(--shadow-feature-glow)}
.pkg-note{margin-top:var(--space-6);color:var(--color-text-muted);font-size:var(--font-size-sm);text-align:center}
.discover{
  margin-top:var(--space-8);
  background:var(--color-bg-card);
  border:1px solid var(--color-border-medium);
  border-radius:var(--radius-md);
  padding:var(--space-6) var(--space-7);
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);flex-wrap:wrap;
}
.discover b{color:var(--color-accent-soft);font-size:var(--font-size-lg)}
.discover span{color:var(--color-text-muted)}

/* ---------- B2B ---------- */
.b2b{background:var(--color-bg-surface);border-block:1px solid var(--color-border-subtle);text-align:center}
.b2b .sub{margin:0 auto var(--space-7)}

/* ---------- FAQ ---------- */
.faq-title{margin-bottom:var(--space-7)}
.faq-wrap{max-width:820px}
details{
  background:var(--color-bg-card);
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-md);
  margin-bottom:var(--space-3);
  padding:var(--space-5) var(--space-6);
}
summary{cursor:pointer;font-weight:var(--font-weight-bold);color:var(--color-text-primary);list-style:none;display:flex;justify-content:space-between;align-items:center}
summary::after{content:"+";color:var(--color-accent);font-size:var(--font-size-xl);font-weight:var(--font-weight-regular)}
details[open] summary::after{content:"−"}
details p{color:var(--color-text-muted);margin-top:var(--space-3)}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--color-border-subtle);padding:var(--space-10) 0;color:var(--color-text-muted);font-size:var(--font-size-sm)}
.footin{display:flex;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;align-items:center}
.foot-latin{font-family:var(--font-family-display);letter-spacing:var(--letter-spacing-logo);color:var(--color-text-primary)}
.foot-arab{color:var(--color-accent)}

/* ---------- FLOATING WHATSAPP ---------- */
.wafloat{
  position:fixed;bottom:var(--space-6);inset-inline-end:var(--space-6);z-index:var(--z-float);
  background:var(--color-cta-whatsapp);
  width:var(--size-fab);height:var(--size-fab);border-radius:var(--radius-round);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-float);transition:var(--motion-fast);
}
.wafloat:hover{transform:scale(1.08)}
.wafloat svg{width:var(--size-icon-md);height:var(--size-icon-md);fill:var(--vsh-white)}