/* ============================================================
   SERVICE-DETAIL.CSS — page-specific styles for service-detail.php:
   the hero banner image, the feature checklist, suitable-options
   cards, the 5-step process override (the shared .process component
   is built for 4 steps), and the prominent WhatsApp banner. Everything
   else on this page (.about-grid, .detail-block, .bento/.card,
   .faq-list, .final-cta, .form-grid) is reused as-is from components.css.
   ============================================================ */

/* Default/fallback hero banner (used by the "service not found" state).
   When a valid service is found, service-detail.php overrides this with
   an inline --hero-bg-image set to that service's own banner image, so
   the banner changes per service without touching the shared .hero CSS. */
:root{
  --hero-bg-image: url('../images/banners/services-banner.jpg');
}

/* ===== SERVICE FEATURES — checklist ===== */
.feature-checklist{display:grid; grid-template-columns:1fr 1fr; gap:16px 28px; max-width:880px; margin:0 auto;}
.feature-checklist li{display:flex; align-items:flex-start; gap:12px; font-size:15.5px; font-weight:600; color:var(--charcoal); line-height:1.5;}
.feature-checklist li svg{
  width:20px; height:20px; flex-shrink:0; margin-top:2px; padding:3px; box-sizing:border-box;
  border-radius:50%; background:var(--teal); stroke:#fff; stroke-width:3;
}
@media(max-width:700px){.feature-checklist{grid-template-columns:1fr;}}

/* ===== SUITABLE OPTIONS — Standard / Premium / Recommended Add-on ===== */
.options-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch;}
.option-card{
  position:relative; background:#fff; border:1.5px solid var(--line); border-radius:var(--radius);
  padding:32px 24px; display:flex; flex-direction:column; gap:14px; transition:all .35s var(--ease);
}
.option-card:hover{transform:translateY(-6px); box-shadow:0 20px 48px rgba(10,79,82,.12);}
.option-card.recommended{border-color:var(--gold); box-shadow:0 16px 40px rgba(184,147,63,.16);}
.option-badge{
  position:absolute; top:-13px; left:24px; background:var(--gold); color:#fff;
  font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:5px 14px; border-radius:999px;
}
.option-card h3{font-size:19px; font-family:var(--sans); font-weight:800; color:var(--charcoal);}
.option-card p{font-size:14px; margin:0;}
.option-card ul{display:flex; flex-direction:column; gap:8px; margin-top:4px;}
.option-card li{display:flex; align-items:flex-start; gap:8px; font-size:13.5px; color:var(--gray); line-height:1.4;}
.option-card li svg{width:14px; height:14px; flex-shrink:0; margin-top:3px; stroke:var(--teal-bright);}
@media(max-width:1100px){.options-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:700px){.options-grid{grid-template-columns:1fr;}}

/* ===== SERVICE PROCESS — 5 steps instead of the shared component's 4 ===== */
#service-process .process{grid-template-columns:repeat(5,1fr);}
@media(max-width:900px){#service-process .process{grid-template-columns:1fr 1fr; gap:36px 0;}}
@media(max-width:520px){#service-process .process{grid-template-columns:1fr;}}

/* ===== PROMINENT WHATSAPP BANNER ===== */
.whatsapp-banner{
  background:linear-gradient(165deg, var(--wa) 0%, #138a43 100%); border-radius:28px;
  padding:56px 40px; text-align:center; color:#fff;
}
.whatsapp-banner-icon{
  width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px;
}
.whatsapp-banner-icon svg{width:32px; height:32px; color:#fff;}
.whatsapp-banner h2{color:#fff; margin-bottom:10px;}
.whatsapp-banner p{color:rgba(255,255,255,.85); max-width:480px; margin:0 auto 26px;}
.whatsapp-banner .btn-primary{background:#fff; color:var(--wa);}
.whatsapp-banner .btn-primary:hover{background:rgba(255,255,255,.9);}
@media(max-width:600px){.whatsapp-banner{padding:40px 24px; border-radius:20px;}}

/* ===== ARABIC / RTL ===== */
html[dir="rtl"] .option-badge{left:auto; right:24px;}