/* ══════════════════════════════════════════════════════════
   SERVICE PAGE STYLES — used by implants.html and future
   service pages (whitening.html, braces.html, etc.)
   ══════════════════════════════════════════════════════════ */

/* ── BREADCRUMB ── */
.breadcrumb { padding: calc(var(--header-h) + 24px) 0 20px; }
.breadcrumb__list { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .85rem; color: var(--c-text-3); }
.breadcrumb__list a { color: var(--c-text-2); transition: color .2s; }
.breadcrumb__list a:hover { color: var(--c-primary); }
.breadcrumb__list span[aria-current] { color: var(--c-text); font-weight: 600; }
.breadcrumb__sep { color: var(--c-border-2); }

/* ── SERVICE HERO / BANNER ── */
.service-hero { position: relative; border-radius: var(--radius-xl); overflow: hidden; min-height: 440px; display: flex; align-items: flex-end; margin-bottom: 8px; }
.service-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.service-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,17,32,.15) 0%, rgba(3,17,32,.55) 65%, rgba(3,17,32,.85) 100%); }
.service-hero__content { position: relative; z-index: 2; padding: 56px 48px; color: #fff; max-width: 640px; }
.service-hero__eyebrow { display: inline-block; background: rgba(255,255,255,.14); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.25); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 16px; border-radius: var(--radius-full); margin-bottom: 18px; }
.service-hero__title { font-family: var(--font-display); font-size: clamp(2.1rem, 4.5vw, 3.2rem); font-weight: 700; line-height: 1.12; margin-bottom: 14px; }
.service-hero__subtitle { font-size: 1.05rem; color: rgba(255,255,255,.88); margin-bottom: 28px; max-width: 520px; }
.service-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── DESCRIPTION ── */
.service-about { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.service-about--full { grid-template-columns: 1fr; }
.service-about--full .service-about__text { max-width: 760px; margin: 0 auto; }
.service-about__text h2 { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 700; margin-bottom: 18px; }
.service-about__text p { color: var(--c-text-2); margin-bottom: 16px; }
.service-about__points { display: grid; gap: 14px; margin-top: 24px; }
.service-about__point { display: flex; gap: 14px; align-items: flex-start; }
.service-about__point-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--grad-soft); border: 1px solid var(--c-border-2); display: flex; align-items: center; justify-content: center; color: var(--c-primary); }
.service-about__point strong { display: block; font-size: .95rem; margin-bottom: 2px; }
.service-about__point span { font-size: .85rem; color: var(--c-text-2); }
.service-about__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/5; }
.service-about__media img { width: 100%; height: 100%; object-fit: cover; }

/* ── DOCTORS (service page variant with booking CTA) ── */
.service-doctors__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.doctor-card__book { width: 100%; justify-content: center; }

/* ── TREATMENT STAGES ── */
.stages { position: relative; }
.stages__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; position: relative; }
.stages__list::before { content: ''; position: absolute; top: 28px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, var(--c-border-2), var(--c-primary-2), var(--c-border-2)); z-index: 0; }
.stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.stage__num { width: 56px; height: 56px; border-radius: 50%; background: var(--c-surface); border: 2px solid var(--c-border-2); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--c-primary); transition: all .3s var(--ease-spring); }
.stage:hover .stage__num { background: var(--grad-main); color: #fff; border-color: transparent; transform: scale(1.1); }
.stage h4 { font-size: .95rem; font-weight: 700; }
.stage p { font-size: .8rem; color: var(--c-text-2); }


/* ── INDICATIONS / CONTRAINDICATIONS ── */
.indications { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.indications__card { border-radius: var(--radius-lg); padding: 32px; border: 1px solid var(--c-border); background: var(--c-surface); }
.indications__card--yes { border-top: 3px solid #22c55e; }
.indications__card--no { border-top: 3px solid #ef4444; }
.indications__card h3 { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.indications__card ul { display: grid; gap: 12px; }
.indications__card li { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--c-text-2); }
.indications__card li::before { content: ''; flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; }
.indications__card--yes li::before { background: rgba(34,197,94,.15); border: 1.5px solid #22c55e; }
.indications__card--no li::before { background: rgba(239,68,68,.12); border: 1.5px solid #ef4444; }

/* ── FINAL BOOKING SECTION ── */
.final-booking { background: var(--grad-main); border-radius: var(--radius-xl); padding: 64px 48px; position: relative; overflow: hidden; }
.final-booking::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.18), transparent 55%); }
.final-booking__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.final-booking__text { color: #fff; }
.final-booking__text h2 { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700; margin-bottom: 14px; }
.final-booking__text p { color: rgba(255,255,255,.88); }
.final-booking__form { background: var(--c-surface); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-xl); }

/* ── CHECKBOX ── */
.form__checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: .82rem; color: var(--c-text-2); margin-bottom: 20px; cursor: pointer; line-height: 1.4; }
.form__checkbox input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--c-primary); flex-shrink: 0; }
.form__checkbox-link { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.form__checkbox-link:hover { color: var(--c-accent); }

/* ── BOOKING MODAL ── */
.modal-backdrop { position: fixed; inset: 0; z-index: 2000; background: rgba(4,14,26,.6); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease-out), visibility .35s; }
.modal-backdrop.open { opacity: 1; visibility: visible; }
.modal { position: relative; width: 100%; max-width: 440px; background: var(--c-surface); border-radius: var(--radius-lg); padding: 36px 32px; box-shadow: var(--shadow-xl); transform: translateY(24px) scale(.97); transition: transform .35s var(--ease-spring); max-height: 90vh; overflow-y: auto; }
.modal-backdrop.open .modal { transform: translateY(0) scale(1); }
.modal__close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--c-border-2); display: flex; align-items: center; justify-content: center; color: var(--c-text-2); transition: all .3s; }
.modal__close:hover { background: var(--grad-main); color: #fff; border-color: transparent; transform: rotate(90deg); }
.modal__title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; margin-bottom: 10px; padding-right: 30px; }
.modal__text { font-size: .875rem; color: var(--c-text-2); margin-bottom: 24px; }

/* ── RESPONSIVE ── */
@media (max-width: 980px) {
  .service-about { grid-template-columns: 1fr; }
  .service-about__media { order: -1; max-width: 420px; margin: 0 auto; }
  .service-doctors__grid { grid-template-columns: repeat(2, 1fr); }
  .stages__list { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
  .stages__list::before { display: none; }
  .indications { grid-template-columns: 1fr; }
  .final-booking__grid { grid-template-columns: 1fr; }
  .final-booking { padding: 44px 28px; }
}
@media (max-width: 700px) {
  .service-hero { min-height: 340px; border-radius: var(--radius-lg); }
  .service-hero__content { padding: 32px 24px; }
  .service-doctors__grid { grid-template-columns: 1fr; }
  .stages__list { grid-template-columns: repeat(2, 1fr); }
  .modal { padding: 28px 22px; }
}