/* ═══════════════════════════════════════════════════════════
   DUBAI SPORTS SURGERY — v2 BRIDGE FOR INNER PAGES
   Loaded after each page's own <style>, so it restyles the existing
   markup to the v2 look without changing any content:
   new tokens, typography, dark heroes, pill buttons, rounded cards.
═══════════════════════════════════════════════════════════ */

/* ── 1. Token remap (every inner page reads these variables) ── */
:root {
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --gray-90: #0A1624;
  --gray-70: #4B5B6B;
  --gray-50: #8795A3;
  --gray-30: #D5DEE7;
  --gray-20: #E6ECF2;
  --gray-10: #F5F8FB;
  --text-primary: #0E1A26;
  --text-secondary: #4B5B6B;
  --text-muted: #7A8998;
  --border: #DCE4EC;
  --border-light: #E6ECF2;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --nav-h: 68px;
  --dark: #0A1624;
}
html { scroll-padding-top: 140px; }
body { font-family: var(--font); color: var(--text-primary); -webkit-font-smoothing: antialiased; }
::selection { background: rgba(27,168,160,.22); }

/* ── 2. Typography ── */
h1, h2 { font-family: var(--font); letter-spacing: -.035em; }
.hero-title, .page-title, .section-title, .section-title-new, .sec-title, .cta-title, .form-title, .ty-title { font-weight: 800 !important; line-height: 1.06 !important; }
.hero-title strong, .hero-title em, .page-title strong, .page-title em,
.section-title strong, .section-title em, .section-title-new strong, .section-title-new em,
.sec-title strong, .sec-title em, .cta-title strong, .cta-title em, .form-title strong, .form-title em, .ty-title strong, .ty-title em {
  font-family: var(--serif) !important; font-style: italic !important; font-weight: 400 !important; letter-spacing: -.01em; font-size: 1.1em;
}
.hero-title strong, .hero-title em, .page-title strong, .page-title em {
  background: linear-gradient(120deg, #7FE3DC, #5FB4F0); -webkit-background-clip: text; background-clip: text; color: transparent !important; padding: 0 .16em .12em 0; margin-right: -.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
h3 { letter-spacing: -.015em; }
.drop-cap::first-letter { font-family: var(--serif); font-weight: 400; color: var(--ms-blue); }

/* Eyebrow labels */
.eyebrow span, .eyebrow-text, .sec-eyebrow span { letter-spacing: .14em !important; font-weight: 700 !important; }
.eyebrow-row .eyebrow-line, .sec-eyebrow-line { width: 22px !important; height: 2px !important; border-radius: 2px; background: var(--brand-teal) !important; }
.eyebrow-text { color: var(--brand-teal) !important; }

/* ── 3. Page hero: deep-ink v2 look, clear of the fixed header ── */
.page-hero {
  background:
    radial-gradient(60% 60% at 85% 15%, rgba(27,168,160,.30), transparent 60%),
    radial-gradient(50% 55% at 5% 95%, rgba(46,124,191,.32), transparent 60%),
    #0A1624 !important;
  padding-top: 150px !important;
}
.pp-hero {
  background:
    radial-gradient(60% 80% at 85% 10%, rgba(27,168,160,.28), transparent 60%),
    radial-gradient(50% 70% at 5% 100%, rgba(46,124,191,.3), transparent 60%),
    #0A1624 !important;
  padding-top: 150px !important;
}
.pp-hero h1 { font-weight: 800 !important; letter-spacing: -.035em; }
.pp-hero h1 strong { font-family: var(--serif); font-style: italic; font-weight: 400 !important; font-size: 1.1em; background: linear-gradient(120deg, #7FE3DC, #5FB4F0); -webkit-background-clip: text; background-clip: text; color: transparent !important; padding: 0 .16em .12em 0; margin-right: -.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.page-hero::before, .page-hero::after { border-color: rgba(255,255,255,.04) !important; }
.hero-img::after { background: linear-gradient(to right, rgba(10,22,36,.96) 0%, rgba(10,22,36,.82) 40%, rgba(10,22,36,.4) 72%, rgba(10,22,36,.15) 100%) !important; }
.hero-tag, .hero-chip { border-radius: 999px !important; text-transform: none !important; letter-spacing: 0 !important; font-size: .78rem !important; padding: 6px 14px !important; background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.16) !important; color: rgba(255,255,255,.88) !important; backdrop-filter: blur(6px); }
.hero-subtitle { color: rgba(255,255,255,.74) !important; }
.breadcrumb a { color: #7FE3DC !important; }
.hero-number { opacity: .5; }

/* Stats strip under the hero */
.overview-stats { background: #0A1624 !important; border-top: 1px solid rgba(255,255,255,.08); }
.ov-num, .hero-number-val, .stat-num { font-weight: 800 !important; letter-spacing: -.03em; }
.ov-num { color: #fff !important; }
.ov-lbl { color: rgba(255,255,255,.6) !important; }

/* ── 4. Sticky bars sit under the 68px v2 header ── */
.main-tab-nav, .mtab-bar, .subnav, .filter-bar { top: 68px !important; }
.ov-facts { top: 150px !important; }
.main-tab-nav, .mtab-bar { background: rgba(255,255,255,.92) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 8px 24px -18px rgba(10,22,36,.35); }
.mtab-btn { font-weight: 600 !important; border-radius: 0; }
.mtab-btn.active { color: var(--brand-teal) !important; border-bottom-color: var(--brand-teal) !important; }

/* ── 5. Buttons → v2 pills ── */
.btn-hero-primary, .btn-white, .btn-primary, .btn-teal, .form-submit, .subnav-cta, .proc-sum-cta a, .action-btn-primary, .ty-btn-whatsapp, .ty-btn {
  border-radius: 999px !important; font-weight: 700 !important; letter-spacing: -.005em;
}
.btn-hero-primary, .btn-white, .btn-primary, .btn-teal, .form-submit, .subnav-cta, .action-btn-primary {
  background: linear-gradient(135deg, #2E7CBF 0%, #1BA8A0 100%) !important; color: #fff !important; border: 0 !important;
  box-shadow: 0 10px 24px -8px rgba(27,168,160,.55); transition: transform .25s, box-shadow .25s !important;
}
.btn-hero-primary:hover, .btn-white:hover, .btn-primary:hover, .btn-teal:hover, .form-submit:hover, .subnav-cta:hover, .action-btn-primary:hover {
  transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(27,168,160,.7) !important;
}
.btn-white-outline, .btn-outline, .btn-ghost, .action-btn-secondary, .ty-btn-outline { border-radius: 999px !important; }
.filter-btn, .graft-tab-btn, .cond-tab-btn { border-radius: 999px !important; }

/* ── 6. Cards, panels, accordions: softer, rounder ── */
.ov-card, .ov-fact, .ov-facts, .rel-card-new, .step-card, .sport-card-new, .cond-panel, .cond-aside, .acc-item, .benefit-acc-item,
.faq-item-new, .faq-item, .why-card, .srv-card, .contact-form-wrap, .map-card, .info-card, .news-card, .role-card, .qual-card, .exp-card,
.rev-card, .rc-step, .proc-step, .proc-summary, .rec-badge, .about-dr-panel, .wd-card, .cred-card, .service-card, .svc-card {
  border-radius: var(--radius) !important;
}
.rel-card-new, .step-card, .sport-card-new, .why-card, .srv-card, .news-card, .service-card, .svc-card { transition: transform .3s, box-shadow .3s !important; }
.rel-card-new:hover, .sport-card-new:hover, .why-card:hover, .srv-card:hover, .news-card:hover, .service-card:hover, .svc-card:hover {
  transform: translateY(-3px); box-shadow: 0 18px 36px -18px rgba(10,22,36,.28) !important;
}
.ov-img-wrap, .ov-sidebar-img, .ov-img-wrap img, .ov-sidebar-img img { border-radius: var(--radius-lg) !important; overflow: hidden; }

/* Section backgrounds: soft brand tint instead of flat grey */
.section-alt, .section-wrap.alt, .bg-alt { background: linear-gradient(135deg, #EEF5FC 0%, #EDF8F7 100%) !important; }

/* ── 7. Closing CTA band: ink + brand glow like the homepage ── */
.cta-section {
  background:
    radial-gradient(60% 90% at 0% 0%, rgba(46,124,191,.45), transparent 60%),
    radial-gradient(50% 80% at 100% 100%, rgba(27,168,160,.38), transparent 60%),
    #0A1624 !important;
}
.cta-section::before { background: rgba(255,255,255,.03) !important; }

/* ── 8. Forms ── */
.form-input, .form-select, .form-textarea, input.form-control, select.form-control, textarea.form-control {
  border-radius: 12px !important; border: 1.5px solid var(--border) !important; background: #F5F8FB !important; font-family: var(--font) !important;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--brand-teal) !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(27,168,160,.15) !important; outline: none; }

/* ── 9. Responsive: keep hero text clear of the header on phones ── */
@media (max-width: 1100px) { .page-hero, .pp-hero { padding-top: 130px !important; } }
@media (max-width: 640px)  { .page-hero, .pp-hero { padding-top: 112px !important; } }