/* IlajBilHind — small layer on top of Tailwind (CDN).
   Brand colours live in tailwind.config in index.html; repeated here as CSS vars. */
:root {
  --navy: #0B2350;
  --blue: #1B4FA3;
  --teal: #0E8C8C;
  --orange: #F26A1B;
  --green: #1E9B4B;
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
html[lang="ar"] body { font-family: 'Cairo', system-ui, sans-serif; }
html[lang="en"] body { font-family: 'Poppins', system-ui, sans-serif; }
html.i18n-pending body { visibility: hidden; }          /* avoids an Arabic flash when English is saved */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Lucide <i> placeholders shouldn't jump before icons load */
i[data-lucide] { display: inline-block; }

/* ---------- Header ---------- */
#site-header.is-scrolled { box-shadow: 0 8px 30px -12px rgba(11, 35, 80, .18); }
.nav-link { display: block; border-radius: .75rem; padding: .5rem .8rem; transition: color .2s, background-color .2s; }
.nav-link:hover { color: var(--blue); background: #F1F5FB; }

/* ---------- Hero ---------- */
.hero-title { line-height: 1.2; }
html[lang="ar"] .hero-title { line-height: 1.45; }
.hero-bg {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(242, 106, 27, .28), transparent 60%),
    radial-gradient(900px 500px at 0% 110%, rgba(14, 140, 140, .35), transparent 60%),
    linear-gradient(115deg, rgba(11, 35, 80, .97) 0%, rgba(17, 54, 120, .90) 55%, rgba(14, 90, 120, .82) 100%),
    url('../img/hospitals/medanta-the-medicity-gurgaon.jpg') center / cover no-repeat;
}
.hero-bg::after { /* subtle tricolour swoosh echoing the logo */
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 6px;
  background: linear-gradient(90deg, #F26A1B 0 33%, #ffffff 33% 66%, #1E9B4B 66% 100%); opacity: .9;
}

/* ---------- Sections ---------- */
.section { padding-block: 4.5rem; }
@media (min-width: 1024px) { .section { padding-block: 6rem; } }
.section-head { max-width: 46rem; margin-inline: auto; text-align: center; }
.section-head--start { margin-inline: 0; text-align: start; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--orange);
}
.eyebrow::before { content: ""; width: 1.5rem; height: 2px; border-radius: 2px; background: currentColor; }
.eyebrow--light { color: #FDBA74; }
.section-title { margin-top: .6rem; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.25; font-weight: 800; color: var(--navy); }
.section-sub { margin-top: .9rem; font-size: 1.05rem; line-height: 1.75; color: #475569; }
.section-sub:empty { display: none; }

.steps-line { background: repeating-linear-gradient(90deg, #CBD5E1 0 8px, transparent 8px 16px); }

/* ---------- Forms ---------- */
.form-label { display: block; margin-bottom: .35rem; font-size: .85rem; font-weight: 700; color: #334155; }
.form-input {
  width: 100%; border-radius: .8rem; border: 1.5px solid #E2E8F0; background: #F8FAFC;
  padding: .7rem .9rem; font-size: .95rem; color: #0F172A; transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.form-input:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(27, 79, 163, .12); }
.form-input[aria-invalid="true"] { border-color: #E11D48; background: #FFF1F2; }
select.form-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 18px; background-position: right .75rem center; padding-inline-end: 2.4rem; }
[dir="rtl"] select.form-input { background-position: left .75rem center; }
textarea.form-input { resize: vertical; min-height: 5.5rem; }

.phone-group { display: flex; align-items: stretch; }
.phone-prefix {
  display: grid; place-items: center; min-width: 4.2rem; padding-inline: .6rem;
  border: 1.5px solid #E2E8F0; border-right: 0; border-radius: .8rem 0 0 .8rem;
  background: #EEF2F7; font-weight: 700; font-size: .9rem; color: var(--navy);
}
.phone-input { border-radius: 0 .8rem .8rem 0 !important; }
.phone-group + .field-error { direction: inherit; }

.dropzone {
  display: flex; align-items: center; gap: .8rem; cursor: pointer;
  border: 1.5px dashed #CBD5E1; border-radius: .9rem; background: #F8FAFC; padding: .7rem .8rem;
  transition: border-color .15s, background-color .15s;
}
.dropzone:hover, .dropzone:focus-within { border-color: var(--blue); background: #F1F6FF; }
.dropzone--lg { padding: 1.1rem; }
.dropzone:has(input[aria-invalid="true"]) { border-color: #E11D48; background: #FFF1F2; }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: .9rem; padding: .9rem 1.2rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--orange), #E8550A);
  box-shadow: 0 10px 24px -10px rgba(242, 106, 27, .7); transition: transform .15s, box-shadow .15s, opacity .15s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(242, 106, 27, .8); }
.btn-primary:disabled { opacity: .7; cursor: progress; transform: none; }

/* Honeypot */
.hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; }

/* ---------- Trust badges ---------- */
.trust-badge {
  display: inline-grid; place-items: center; flex-shrink: 0; min-width: 2.6rem; height: 1.8rem; padding-inline: .45rem;
  border-radius: .5rem; background: var(--navy); color: #fff; font: 800 .72rem/1 'Poppins', sans-serif; letter-spacing: .04em;
}
.trust-badge--green { background: var(--green); }

/* ---------- Cost lists ---------- */
.tick, .dash { position: relative; padding-inline-start: 1.5rem; }
.tick::before, .dash::before { position: absolute; inset-inline-start: 0; top: .1rem; font-weight: 800; }
.tick::before { content: "✓"; color: var(--green); }
.dash::before { content: "–"; color: var(--orange); }

/* ---------- Carousels ---------- */
.carousel {
  display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: .75rem; margin-inline: -1rem; padding-inline: 1rem; scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 1rem; }
.carousel-item { flex: 0 0 84%; scroll-snap-align: start; }
@media (min-width: 640px) { .carousel-item { flex-basis: calc((100% - 1.25rem) / 2); } }
@media (min-width: 1024px) { .carousel-item { flex-basis: calc((100% - 2.5rem) / 3); } .carousel-item--doc { flex-basis: calc((100% - 3.75rem) / 4); } }
@media (min-width: 640px) { .carousel { margin-inline: 0; padding-inline: 0; } }
.carousel-btn {
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 9999px;
  background: #fff; color: var(--navy); box-shadow: 0 4px 14px -6px rgba(11, 35, 80, .25); border: 1px solid #E2E8F0; transition: all .15s;
}
.carousel-btn:hover { background: var(--navy); color: #fff; }

/* ---------- Services ---------- */
.services-glow {
  background:
    radial-gradient(700px 400px at 100% 0%, rgba(242, 106, 27, .18), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(14, 140, 140, .25), transparent 60%);
}

/* ---------- FAQ ---------- */
.faq summary::-webkit-details-marker { display: none; }

/* ---------- Contact ---------- */
.contact-card {
  display: flex; align-items: flex-start; gap: 1rem; border-radius: 1.25rem; background: #fff; padding: 1.25rem;
  box-shadow: 0 6px 28px -10px rgba(11, 35, 80, .16); border: 1px solid #F1F5F9; transition: transform .15s;
}
a.contact-card:hover { transform: translateY(-2px); }
.contact-icon { display: grid; place-items: center; flex-shrink: 0; width: 3rem; height: 3rem; border-radius: .9rem; }

/* ---------- Footer ---------- */
.footer-title { font-size: 1rem; font-weight: 800; color: #fff; }
.footer-link { transition: color .15s; }
.footer-link:hover { color: #FDBA74; }
.social { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 9999px; background: rgba(255,255,255,.08); color: #fff; transition: background .15s; }
.social:hover { background: var(--orange); }

/* ---------- Floating ---------- */
.wa-float { position: relative; }
.wa-float::before {
  content: ""; position: absolute; inset: 0; border-radius: 9999px; background: #25D366; z-index: -1;
  animation: wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.7); opacity: 0; } }
@media (max-width: 639px) {
  body { padding-bottom: 4.5rem; }                 /* room for the sticky mobile CTA bar */
  .fixed.bottom-4.end-4 { bottom: 5.25rem; }       /* lift floating buttons above it */
}

/* ---------- Modal ---------- */
.step-dot { display: flex; align-items: center; gap: .4rem; opacity: .55; transition: opacity .2s; }
.step-dot > span:first-child {
  display: grid; place-items: center; flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 9999px;
  background: rgba(255,255,255,.2); font-size: .75rem;
}
.step-dot.is-active { opacity: 1; }
.step-dot.is-active > span:first-child { background: #FB923C; color: #fff; }
fieldset { min-width: 0; }