/*
Theme Name: CrossCare India
Theme URI: https://crosscareindia.com
Description: CrossCare India Medical Tourism Website
Author: CrossCare India
Version: 5.6.0
*/

/* =========================================
   GLOBAL RESET & BASE
========================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cc-green:       #0F6E56;  /* original brand green — restored */
  --cc-green-dark:  #085041;
  --cc-green-light: #E1F5EE;
  --cc-teal:        #5DCAA5;
  --cc-teal-light:  #9FE1CB;
  --cc-teal-deep:   #3F9C7E;  /* deep teal, for accent text on light backgrounds */
  --cc-stamp:       #854F0B;  /* accreditation-badge amber, original tone */
  --cc-text:        #1a1a1a;
  --cc-muted:       #6b7280;
  --cc-border:      #e5e7eb;
  --cc-bg:          #ffffff;
  --cc-bg-soft:     #f9fafb;
  --cc-radius:      4px;
  --cc-radius-lg:   6px;
  --cc-font:        'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cc-font-display:'Roboto Slab', Georgia, serif;
  --cc-font-mono:   'IBM Plex Mono', 'SF Mono', monospace;
}

body {
  font-family: var(--cc-font);
  color: var(--cc-text);
  background: var(--cc-bg);
  line-height: 1.7;
  font-size: 16px;
}

a { color: var(--cc-green); text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--cc-font-display); font-weight: 600; }

/* Keyboard focus states — visible only for keyboard navigation
   (:focus-visible), not mouse clicks, so it doesn't add a ring around
   every button after a click while still making the site properly
   navigable and inspectable by keyboard. This was previously only
   handled ad hoc on a few form inputs; now covers links, buttons, and
   form fields site-wide. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cc-teal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip-to-content link: invisible until keyboard-focused, then jumps
   above the nav so keyboard/screen-reader users don't have to tab
   through the whole navigation (incl. the Specialities dropdown) on
   every single page just to reach the content. */
.cc-skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  background: var(--cc-green-dark);
  color: #fff !important;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  z-index: 2000;
  transition: top 0.15s ease;
}
.cc-skip-link:focus { top: 12px; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

/* =========================================
   ONBOARDING PICKER — "Where are you
   travelling from?" globe + language gate.
   Shown once per device; the nav flag chip
   (see .cc-nav-country-chip) reopens it.
========================================= */
body.cc-modal-lock { overflow: hidden; }

.cc-onboard-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(11, 21, 38, 0.7);
  z-index: 3000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cc-onboard-overlay.cc-onboard-open { display: flex; }

.cc-onboard-step { display: none; width: 100%; align-items: center; justify-content: center; animation: cc-onboard-pop 0.18s ease-out; }
.cc-onboard-step.cc-onboard-active { display: flex; }
@keyframes cc-onboard-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Step 1: a solid, always-legible panel (the actual controls)
   alongside the globe (a fun, optional way to get to the same place).
   Nothing you need to read ever sits on top of the moving globe. --- */
.cc-onboard-shell {
  width: 100%;
  max-width: 880px;
  max-height: 88vh;
  background: var(--cc-bg);
  border-radius: var(--cc-radius-lg);
  overflow: hidden;
  display: flex;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}

.cc-onboard-panel {
  flex: 1 1 380px;
  min-width: 320px;
  padding: 30px 28px;
  overflow-y: auto;
}

.cc-onboard-globe-side {
  flex: 1 1 420px;
  position: relative;
  background: var(--cc-green-dark);
  min-height: 320px;
}
.cc-onboard-globe-canvas { position: absolute; inset: 0; }
.cc-onboard-globe-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 18px;
  background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, transparent 100%);
  color: #fff;
  font-family: var(--cc-font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-align: center;
}

.cc-onboard-eyebrow { font-family: var(--cc-font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cc-teal-deep); margin-bottom: 8px; }
.cc-onboard-h1 { font-family: var(--cc-font-display); font-weight: 600; font-size: 22px; color: var(--cc-text); margin-bottom: 6px; }
.cc-onboard-sub { font-size: 14px; color: var(--cc-muted); margin-bottom: 18px; }

.cc-onboard-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cc-onboard-tab {
  font-family: var(--cc-font-mono); font-size: 11px; letter-spacing: 0.02em;
  background: var(--cc-bg-soft); border: 1px solid var(--cc-border);
  color: var(--cc-text); padding: 6px 12px; border-radius: 20px; cursor: pointer; transition: all 0.15s ease;
}
.cc-onboard-tab:hover, .cc-onboard-tab.cc-onboard-tab-active { background: var(--cc-green); border-color: var(--cc-green); color: #fff; font-weight: 600; }

.cc-onboard-search {
  width: 100%; padding: 11px 14px; border-radius: var(--cc-radius); margin-bottom: 14px;
  border: 1px solid var(--cc-border); background: var(--cc-bg-soft); color: var(--cc-text);
  font-family: var(--cc-font); font-size: 14px;
}
.cc-onboard-search::placeholder { color: var(--cc-muted); }

/* The flag grid IS the interface — always visible, always legible,
   filtered (never hidden/replaced) by the tabs and search above it. */
.cc-onboard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-height: 260px; overflow-y: auto; margin-bottom: 6px; }
.cc-onboard-flag-btn {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1.5px solid var(--cc-border); border-radius: var(--cc-radius);
  background: #fff; cursor: pointer; text-align: left; transition: all 0.12s ease;
  font-family: var(--cc-font); font-size: 13.5px; font-weight: 600; color: var(--cc-text);
}
.cc-onboard-flag-btn:hover, .cc-onboard-flag-btn:focus-visible { border-color: var(--cc-green); background: var(--cc-green-light); outline: none; }
.cc-onboard-flag-btn .flag { font-size: 20px; line-height: 1; flex-shrink: 0; }
.cc-onboard-empty { grid-column: 1 / -1; font-size: 13px; color: var(--cc-muted); padding: 14px 4px; text-align: center; }

.cc-onboard-skip { margin-top: 14px; font-size: 12.5px; color: var(--cc-muted); text-decoration: underline; cursor: pointer; display: inline-block; }

/* --- Step 2: language card --- */
.cc-onboard-card {
  background: var(--cc-bg); border-radius: var(--cc-radius-lg); padding: 34px 30px; max-width: 380px; width: 100%;

  text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.cc-onboard-card-flag { font-size: 42px; margin-bottom: 8px; }
.cc-onboard-card-kicker { font-family: var(--cc-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cc-teal-deep); margin-bottom: 6px; }
.cc-onboard-card h2 { font-size: 20px; margin-bottom: 8px; color: var(--cc-green-dark); }
.cc-onboard-card p { font-size: 13.5px; color: var(--cc-muted); margin-bottom: 20px; }

.cc-onboard-lang-options { display: flex; flex-direction: column; gap: 10px; }
.cc-onboard-lang-btn {
  padding: 13px; border-radius: var(--cc-radius); border: 1.5px solid var(--cc-border); background: #fff;
  font-family: var(--cc-font); font-size: 14.5px; font-weight: 600; color: var(--cc-green-dark); cursor: pointer; transition: all 0.15s ease;
}
.cc-onboard-lang-btn:hover { border-color: var(--cc-teal); background: #FFF8EC; }
.cc-onboard-lang-btn.cc-onboard-primary { background: var(--cc-teal); border-color: var(--cc-teal); }
.cc-onboard-lang-btn.cc-onboard-primary:hover { background: var(--cc-teal-deep); border-color: var(--cc-teal-deep); }

.cc-onboard-back { display: inline-block; margin-top: 16px; font-size: 12.5px; color: var(--cc-muted); cursor: pointer; text-decoration: underline; }

/* --- Nav flag chip (reopens the picker) --- */
.cc-nav-country-chip {
  font-family: var(--cc-font-mono); font-size: 12px; background: var(--cc-bg-soft); border: 1px solid var(--cc-border);
  color: var(--cc-green-dark); padding: 7px 12px; border-radius: 20px; cursor: pointer; transition: border-color 0.15s ease;
}
.cc-nav-country-chip:hover { border-color: var(--cc-teal); }

@media (max-width: 780px) {
  .cc-onboard-overlay { padding: 0; align-items: flex-end; }

  /* Once the globe is gone, this is a single-panel modal — treat it
     like one: full-bleed width, sheet-style from the bottom (easier
     one-handed reach than a centered floating box), not a shrunken
     copy of the two-column desktop layout. */
  .cc-onboard-shell {
    max-width: 100%;
    max-height: 86vh;
    border-radius: var(--cc-radius-lg) var(--cc-radius-lg) 0 0;
  }
  .cc-onboard-panel {
    max-height: 86vh;
    padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  }

  /* The globe is decorative-only on mobile — dragging a 3D sphere with
     a fingertip in a small box was never going to be the real way in.
     Skipping it here (see crosscare-onboarding.js, which also skips
     loading three.js/globe.gl in the first place) saves real data and
     battery for visitors who need it most. */
  .cc-onboard-globe-side { display: none; }

  /* One column, not two — "United Arab Emirates" next to a flag has
     no comfortable room in a ~150px column on a phone. Full-width
     rows read as a normal, scannable list instead. */
  .cc-onboard-grid { grid-template-columns: 1fr; max-height: 48vh; gap: 6px; }
  .cc-onboard-flag-btn { padding: 13px 14px; font-size: 15px; }
  .cc-onboard-flag-btn .flag { font-size: 22px; }

  .cc-onboard-tabs { gap: 8px; }
  .cc-onboard-tab { padding: 7px 13px; font-size: 12px; }
  .cc-onboard-search { padding: 13px 14px; font-size: 16px; } /* 16px avoids iOS auto-zoom on focus */
}

/* Hide the Google-injected translate banner/toolbar so only our own
   picker UI is ever visible to the visitor. */
.goog-te-banner-frame, .skiptranslate { display: none !important; }
body { top: 0 !important; }


/* =========================================
   NAVIGATION
========================================= */
.cc-navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid var(--cc-border);
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.cc-logo {
  font-family: var(--cc-font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--cc-green);
  letter-spacing: -0.3px;
}
.cc-logo span { color: var(--cc-text); }

.cc-nav-links {
  display: flex;
  gap: 6px;
  list-style: none;
  align-items: center;
}

.cc-nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--cc-muted);
  padding: 6px 14px;
  border-radius: 8px;
  transition: all 0.15s;
  white-space: nowrap;
}
.cc-nav-links a:hover,
.cc-nav-links a.active {
  background: var(--cc-green-light);
  color: var(--cc-green);
  text-decoration: none;
}

.cc-nav-cta {
  background: var(--cc-green) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
}
.cc-nav-cta:hover { background: var(--cc-green-dark) !important; }

.cc-nav-account {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--cc-green) !important;
  color: var(--cc-green) !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  padding: 6px 16px 6px 12px !important;
}
.cc-nav-account:hover { background: var(--cc-green) !important; color: #fff !important; }
.cc-nav-account-icon { font-size: 14px; }

.cc-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  padding: 0;
}
.cc-hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--cc-text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.cc-hamburger.open .cc-hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cc-hamburger.open .cc-hamburger-line:nth-child(2) { opacity: 0; }
.cc-hamburger.open .cc-hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.cc-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,30,24,0.35);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cc-nav-backdrop.open { display: block; opacity: 1; }

/* Specialities dropdown — desktop hover panel showing all 12
   specialities at a glance, instead of a single flat nav link hiding
   the site's full scope behind one click. */
.cc-nav-item-dropdown { position: relative; }
.cc-nav-item-dropdown > a { display: flex; align-items: center; gap: 4px; }
.cc-nav-caret { font-size: 10px; transition: transform 0.2s ease; }
.cc-nav-item-dropdown:hover .cc-nav-caret { transform: rotate(180deg); }

.cc-nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 420px;
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  box-shadow: 0 20px 44px rgba(20,33,61,0.16);
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 999;
}
.cc-nav-item-dropdown:hover .cc-nav-dropdown,
.cc-nav-item-dropdown:focus-within .cc-nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.cc-nav-dropdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.cc-nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cc-text);
  text-decoration: none !important;
}
.cc-nav-dropdown-item:hover { background: var(--cc-green-light); color: var(--cc-green-dark); }
.cc-nav-dropdown-icon { font-size: 15px; flex-shrink: 0; }
.cc-nav-dropdown-viewall {
  display: block;
  text-align: center;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--cc-border);
  font-size: 12px;
  font-weight: 700;
  color: var(--cc-green-dark);
  text-decoration: none !important;
}
.cc-nav-dropdown-viewall:hover { text-decoration: underline !important; }

/* =========================================
   BUTTONS
========================================= */
.cc-btn-primary {
  display: inline-block;
  background: linear-gradient(135deg, var(--cc-green) 0%, var(--cc-green-dark) 100%);
  color: #ffffff !important;
  padding: 14px 30px;
  border-radius: var(--cc-radius);
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(15,110,86,0.28);
  letter-spacing: -0.1px;
}
.cc-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15,110,86,0.36); }
.cc-btn-primary:active { transform: translateY(0); }

.cc-btn-outline {
  display: inline-block;
  background: #fff;
  color: var(--cc-green) !important;
  padding: 14px 30px;
  border-radius: var(--cc-radius);
  font-size: 15px;
  font-weight: 700;
  border: 2px solid var(--cc-teal);
  cursor: pointer;
  transition: all 0.18s ease;
  text-decoration: none !important;
}
.cc-btn-outline:hover { background: var(--cc-green-light); border-color: var(--cc-green); transform: translateY(-2px); }

/* =========================================
   QUICK COUNTRY JUMP BAR (sits above the hero)
========================================= */
.cc-quick-country-bar {
  background: #fff;
  border-bottom: 1px solid var(--cc-border);
}
.cc-quick-country-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 10px 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.cc-quick-country-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cc-muted);
  margin-right: auto;
}
.cc-quick-country-picker { display: flex; gap: 8px; align-items: center; }
.cc-quick-country-picker select {
  font-size: 12.5px;
  padding: 7px 10px;
  border: 1px solid var(--cc-border);
  border-radius: 7px;
  color: var(--cc-text);
  background: #fafafa;
  max-width: 200px;
}
.cc-quick-country-btn {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--cc-green);
  border: none;
  border-radius: 7px;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.cc-quick-country-btn:hover { background: var(--cc-green-dark); }

@media (max-width: 700px) {
  .cc-quick-country-inner { justify-content: center; padding: 10px 16px; }
  .cc-quick-country-label { margin-right: 0; width: 100%; text-align: center; }
  .cc-quick-country-picker { width: 100%; justify-content: center; }
  .cc-quick-country-picker select { flex: 1; max-width: none; }
}

/* =========================================
   HERO
========================================= */
.cc-hero {
  background: linear-gradient(135deg, #FBF1DA 0%, #FBFAF5 100%);
  padding: 56px 32px 44px;
  border-bottom: 1px solid var(--cc-teal-light);
}

.cc-hero-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 36px;
}
.cc-hero-text { flex: 0.95; min-width: 0; }
.cc-hero-visual { flex: 1.3; display: flex; flex-direction: column; align-items: center; position: relative; }

.cc-hero-visual-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--cc-green-dark);
  background: #fff;
  border: 1.5px solid var(--cc-green-light);
  padding: 9px 20px;
  border-radius: 30px;
  box-shadow: 0 8px 20px rgba(20,33,61,0.12);
  margin-bottom: 18px;
  text-align: center;
  letter-spacing: -0.1px;
}
.cc-hero-visual-label-icon { font-size: 16px; }

/* Hero search card — replaces the old dashboard mockup. Deliberately
   plain white/rounded rather than styled like a live product screen,
   so it reads as "a search box" and never risks looking like a real
   (fake) patient account. */
.cc-hero-search-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(20,33,61,0.16), 0 4px 14px rgba(20,33,61,0.08);
  padding: 24px;
  border: 1px solid rgba(20,33,61,0.08);
}
.cc-hero-search-card-wide { max-width: 540px; padding: 28px; }
.cc-hero-search-card .cc-search-bar { height: 52px; box-shadow: none; border-color: var(--cc-border); }
.cc-hero-search-card .cc-search-chips { justify-content: flex-start; }
.cc-hero-search-card .cc-search-results { box-shadow: none; }

.cc-hero-search-card-head { margin-bottom: 16px; }
.cc-hero-search-card-title { font-size: 19px; font-weight: 800; color: var(--cc-text); margin-bottom: 5px; letter-spacing: -0.2px; }
.cc-hero-search-card-sub { font-size: 12.5px; color: var(--cc-muted); line-height: 1.5; }

.cc-hero-search-popular { margin-top: 18px; }
.cc-hero-search-popular-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.cc-hero-search-popular-group { display: flex; flex-direction: column; }
.cc-hero-search-popular-label {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--cc-muted);
  margin-bottom: 8px;
}
.cc-hero-search-popular-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: var(--cc-bg-soft);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 10px;
  margin-bottom: 6px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cc-hero-search-popular-row:hover { background: var(--cc-green-light); border-color: var(--cc-teal); }
.cc-hero-search-popular-row:last-child { margin-bottom: 0; }

.cc-hero-search-popular-viewall {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--cc-green-dark);
  text-decoration: none !important;
  padding: 6px 10px 2px;
  margin-top: 2px;
}
.cc-hero-search-popular-viewall:hover { text-decoration: underline !important; }
.cc-hero-search-popular-icon { font-size: 16px; flex-shrink: 0; }
.cc-hero-search-popular-text { font-size: 12px; font-weight: 600; color: var(--cc-text); flex: 1; line-height: 1.3; }
.cc-hero-search-popular-arrow { font-size: 12px; color: var(--cc-muted); flex-shrink: 0; }

.cc-hero-search-card-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--cc-border);
  font-size: 11px;
  color: var(--cc-muted);
  text-align: center;
  line-height: 1.6;
}

.cc-hero-path-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.cc-hero-path-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cc-bg-soft);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 11px 12px;
  text-decoration: none !important;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cc-hero-path-card:hover { background: var(--cc-green-light); border-color: var(--cc-teal); }
.cc-hero-path-icon { font-size: 16px; flex-shrink: 0; }
.cc-hero-path-text { font-size: 12px; font-weight: 700; color: var(--cc-text); line-height: 1.3; }
.cc-hero-path-card-whatsapp { border-color: rgba(37,211,102,0.3); }
.cc-hero-path-card-whatsapp:hover { border-color: #25D366; background: #EAFBF0; }

@media (max-width: 900px) {
  .cc-hero-search-card, .cc-hero-search-card-wide { max-width: 420px; margin: 0 auto; }
  .cc-hero-search-popular-groups { grid-template-columns: 1fr; }
}

.cc-hero-eyebrow {
  font-family: var(--cc-font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--cc-green);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.cc-hero h1 {
  font-family: var(--cc-font-display);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  line-height: 1.18;
  color: var(--cc-text);
  max-width: 620px;
  margin-bottom: 18px;
}
.cc-hero h1 em { font-style: normal; color: var(--cc-green); }

.cc-hero-sub {
  font-size: 16px;
  color: var(--cc-muted);
  max-width: 540px;
  margin-bottom: 32px;
  line-height: 1.75;
}

.cc-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* =========================================
   HERO — dashboard tracking mockup visual
========================================= */
.cc-hero-mockup {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 28px 70px rgba(20,33,61,0.18), 0 4px 14px rgba(20,33,61,0.08);
  padding: 26px 26px 46px;
  border: 1px solid rgba(20,33,61,0.08);
  position: relative;
}
.cc-hero-mockup::before {
  content: "";
  position: absolute;
  top: -18px; right: -18px;
  width: 92px; height: 92px;
  background: var(--cc-teal-light);
  border-radius: 50%;
  z-index: -1;
  opacity: 0.7;
}
.cc-hero-mockup-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.cc-hero-mockup-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--cc-green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; flex-shrink: 0;
}
.cc-hero-mockup-name { font-size: 15px; font-weight: 800; color: var(--cc-text); }
.cc-hero-mockup-sub { font-size: 12px; color: var(--cc-muted); }
.cc-hero-mockup-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  background: var(--cc-green-light);
  color: var(--cc-green-dark);
  padding: 5px 12px;
  border-radius: 20px;
  white-space: nowrap;
}
.cc-hero-mockup-ring {
  width: 100%;
  height: 7px;
  background: #eef2f0;
  border-radius: 7px;
  overflow: hidden;
  margin-bottom: 20px;
}
.cc-hero-mockup-ring-fill {
  width: 66%; height: 100%;
  background: linear-gradient(90deg, var(--cc-teal), var(--cc-green));
  border-radius: 7px;
}
.cc-hero-mockup-steps { display: flex; flex-direction: column; gap: 13px; margin-bottom: 6px; }
.cc-hero-mockup-step { display: flex; align-items: center; gap: 12px; font-size: 13.5px; }
.cc-hero-mockup-dot {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.cc-hero-mockup-dot.done { background: var(--cc-green); color: #fff; }
.cc-hero-mockup-dot.current { background: var(--cc-teal); color: var(--cc-green-dark); box-shadow: 0 0 0 4px rgba(93,202,165,0.25); }
.cc-hero-mockup-dot.pending { background: #eee; color: #aaa; }
.cc-hero-mockup-step.done span { color: var(--cc-muted); text-decoration: line-through; text-decoration-color: #ccc; }
.cc-hero-mockup-step.current span { color: var(--cc-text); font-weight: 700; }
.cc-hero-mockup-step.pending span { color: #b3b3b3; }
.cc-hero-mockup-caption {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--cc-border);
  font-size: 12px;
  color: var(--cc-muted);
  line-height: 1.6;
  text-align: center;
}
.cc-hero-mockup-caption strong { color: var(--cc-green-dark); }

/* Floating secondary card — an advisor chat bubble that visually
   layers over the tracker card to reinforce "a real person is
   following your case with you". IMPORTANT: this sits in NORMAL
   DOCUMENT FLOW (not absolutely positioned), with a negative margin
   pulling it up to overlap. That means the browser always reserves
   its real, actual rendered height in the layout — however many
   lines the message wraps to — so it can never silently overlap and
   hide unrelated content below it, only the mockup card's own blank
   bottom-padding buffer (46px, added above specifically for this). */
.cc-hero-mockup-wrap {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cc-hero-chat-card {
  width: 265px;
  max-width: calc(100% - 20px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(20,33,61,0.14);
  border: 1px solid rgba(20,33,61,0.08);
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  z-index: 2;
  margin: -34px 0 0 14px;
}
.cc-hero-chat-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.cc-hero-chat-name { font-size: 11.5px; font-weight: 800; color: var(--cc-text); margin-bottom: 2px; }
.cc-hero-chat-msg { font-size: 11.5px; color: var(--cc-muted); line-height: 1.5; }
.cc-hero-chat-time { font-size: 9.5px; color: #b3b3b3; margin-top: 4px; }

@media (max-width: 900px) {
  .cc-hero-inner { flex-direction: column; }
  .cc-hero-visual { margin-top: 32px; }
  .cc-hero-mockup { max-width: 380px; }
  .cc-hero-mockup-wrap { max-width: 380px; align-items: center; }
  .cc-hero-chat-card { margin: -30px 0 0 -8px; }
}

/* =========================================
   STATS STRIP
========================================= */
.cc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1160px;
  margin: -34px auto 0;
  padding: 0 32px;
  position: relative;
  z-index: 3;
}

.cc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 1160px;
  margin: -34px auto 0;
  padding: 0 32px;
  position: relative;
  z-index: 3;
}

.cc-stat {
  background: var(--cc-green);
  padding: 24px 22px;
  border-right: 1px solid rgba(255,255,255,0.14);
  transition: background 0.18s ease;
}
.cc-stat:first-child { border-top-left-radius: var(--cc-radius-lg); border-bottom-left-radius: var(--cc-radius-lg); }
.cc-stat:last-child { border-right: none; border-top-right-radius: var(--cc-radius-lg); border-bottom-right-radius: var(--cc-radius-lg); }
.cc-stat:hover { background: var(--cc-green-dark); }

.cc-stat-num {
  font-family: var(--cc-font-mono);
  font-size: 27px;
  font-weight: 600;
  color: var(--cc-teal);
  line-height: 1;
  margin-bottom: 8px;
}

.cc-stat-lbl {
  font-size: 12.5px;
  color: #B7BDD1;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .cc-stats { grid-template-columns: repeat(2, 1fr); margin-top: -22px; }
}
@media (max-width: 560px) {
  .cc-stats { grid-template-columns: 1fr; }
}

/* =========================================
   SECTIONS SHARED
========================================= */
.cc-section { padding: 48px 32px; max-width: 1160px; margin: 0 auto; }
.cc-section-full { padding: 48px 32px; }
.cc-section-soft { background: var(--cc-bg-soft); border-top: 1px solid var(--cc-border); border-bottom: 1px solid var(--cc-border); }

.cc-section-title {
  font-family: var(--cc-font-display);
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--cc-text);
  letter-spacing: -0.2px;
}
.cc-section-sub {
  font-size: 15.5px;
  color: var(--cc-muted);
  margin-bottom: 30px;
  max-width: 680px;
  line-height: 1.6;
}

/* =========================================
   INTERIOR PAGE HEADER BAND — a lighter,
   shorter echo of the homepage hero's gradient,
   giving Treatments/Hospitals/Doctors/About/
   Contact/Cost-Estimator the same premium
   visual anchor the homepage has, instead of
   starting flat white with a bare h1.
========================================= */
.cc-page-header {
  background: linear-gradient(135deg, #FBF1DA 0%, #FBFAF5 100%);
  border-bottom: 1px solid var(--cc-teal-light);
  padding: 40px 32px 34px;
}
.cc-page-header-inner { max-width: 1160px; margin: 0 auto; }
.cc-page-header .cc-section-title { margin-bottom: 8px; }
.cc-page-header .cc-section-sub { margin-bottom: 0; }

/* =========================================
   FIND YOUR PATH — homepage search hub +
   four quick-path cards
========================================= */
.cc-search-hub {
  max-width: 640px;
  margin: 0 auto 40px;
}
.cc-search-bar-wrap {
  position: relative;
}
.cc-search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  pointer-events: none;
}
.cc-search-bar {
  width: 100%;
  height: 58px;
  padding: 0 20px 0 52px;
  border-radius: 32px;
  border: 1.5px solid var(--cc-border);
  font-size: 15px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(20,33,61,0.08);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cc-search-bar:focus {
  outline: none;
  border-color: var(--cc-green);
  box-shadow: 0 8px 26px rgba(20,33,61,0.18);
}
.cc-search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 14px 0 0;
}
.cc-search-chip {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cc-green-dark);
  background: var(--cc-green-light);
  border: none;
  padding: 7px 16px;
  border-radius: 20px;
  cursor: pointer;
}
.cc-search-chip:hover { background: var(--cc-teal-light); }

.cc-search-results {
  display: none;
  margin-top: 18px;
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 8px;
  box-shadow: 0 12px 28px rgba(20,33,61,0.1);
}
.cc-search-results-open { display: block; }

.cc-search-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--cc-radius);
}
.cc-search-result-row:hover { background: var(--cc-bg-soft); }
.cc-search-result-name { font-size: 14px; font-weight: 700; color: var(--cc-text); }
.cc-search-result-meta { font-size: 12px; color: var(--cc-muted); margin-top: 2px; }
.cc-search-result-btn { flex-shrink: 0; padding: 8px 16px !important; font-size: 12.5px !important; }

.cc-search-noresult { padding: 16px; text-align: center; }
.cc-search-noresult p { font-size: 13.5px; color: var(--cc-muted); line-height: 1.6; margin-bottom: 14px; }
.cc-search-noresult-ctas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.cc-path-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
}
.cc-path-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 22px 14px;
  text-decoration: none !important;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.cc-path-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20,33,61,0.12); border-color: var(--cc-teal-light); }
.cc-path-icon { font-size: 26px; }
.cc-path-title { font-size: 13.5px; font-weight: 700; color: var(--cc-text); }
.cc-path-sub { font-size: 11.5px; color: var(--cc-muted); line-height: 1.4; }
.cc-path-card-whatsapp { border-color: rgba(37,211,102,0.35); }
.cc-path-card-whatsapp:hover { border-color: #25D366; box-shadow: 0 14px 30px rgba(37,211,102,0.18); }

@media (max-width: 700px) {
  .cc-path-grid { grid-template-columns: repeat(2, 1fr); }
  .cc-search-bar { height: 52px; font-size: 14px; }
}

/* =========================================
   THE CONCIERGE DIFFERENCE (3-column comparison —
   the single highest-leverage repositioning section:
   "searching alone" vs "an agency" vs "CrossCare")
========================================= */
.cc-concierge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}
.cc-concierge-card {
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 26px 24px;
}
.cc-concierge-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--cc-muted);
  margin-bottom: 12px;
}
.cc-concierge-card p { font-size: 14px; color: var(--cc-muted); line-height: 1.65; }
.cc-concierge-card-featured {
  background: linear-gradient(160deg, var(--cc-green-light) 0%, #fff 55%);
  border: 2px solid var(--cc-green);
  box-shadow: 0 16px 36px rgba(20,33,61,0.14);
  transform: scale(1.03);
}
.cc-concierge-card-featured .cc-concierge-label { color: var(--cc-green-dark); }
.cc-concierge-card-featured p { color: var(--cc-text); font-weight: 500; }

@media (max-width: 900px) {
  .cc-concierge-grid { grid-template-columns: 1fr; }
  .cc-concierge-card-featured { transform: none; order: -1; }
}

/* =========================================
   COMPARE, DON'T SEARCH (illustrative side-by-
   side hospital comparison mockup)
========================================= */
.cc-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 720px;
  margin: 0 auto;
}
.cc-compare-grid-4 { grid-template-columns: repeat(4, 1fr); max-width: 1160px; }
@media (max-width: 900px) {
  .cc-compare-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .cc-compare-grid-4 { grid-template-columns: 1fr; }
}
.cc-compare-card {
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 22px;
}
.cc-compare-hosp-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--cc-green-dark);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cc-border);
}
.cc-compare-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px solid #f2f2f2;
}
.cc-compare-row:last-child { border-bottom: none; }
.cc-compare-row span { color: var(--cc-muted); }
.cc-compare-row strong { color: var(--cc-text); text-align: right; }
.cc-compare-disclosure {
  text-align: center;
  font-size: 11.5px;
  color: var(--cc-muted);
  margin-top: 20px;
  line-height: 1.6;
}
@media (max-width: 640px) {
  .cc-compare-grid { grid-template-columns: 1fr; }
}

/* =========================================
   WHY CARDS
========================================= */
.cc-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cc-why-card {
  background: #ffffff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 28px 26px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.cc-why-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 36px rgba(20,33,61,0.12);
  border-color: var(--cc-teal-light);
}

.cc-why-icon {
  width: 46px; height: 46px;
  background: linear-gradient(135deg, var(--cc-green-light) 0%, var(--cc-teal-light) 100%);
  border-radius: var(--cc-radius);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  font-size: 21px;
}

.cc-why-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 9px; letter-spacing: -0.1px; }
.cc-why-card p { font-size: 14px; color: var(--cc-muted); line-height: 1.65; }

.cc-team-list { list-style: none; padding: 0; margin: 0 0 12px; }
.cc-team-list li {
  font-size: 13.5px;
  color: var(--cc-muted);
  line-height: 1.6;
  padding: 8px 0;
  border-bottom: 1px solid var(--cc-border);
}
.cc-team-list li:last-child { border-bottom: none; }
.cc-team-list li strong { color: var(--cc-text); }
.cc-team-title { color: var(--cc-green-dark); font-weight: 600; font-size: 12.5px; }
.cc-team-note { font-size: 12px; color: var(--cc-muted); line-height: 1.6; font-style: italic; }

/* =========================================
   HOW STEPS
========================================= */
.cc-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
  position: relative;
}
@media (min-width: 901px) {
  .cc-steps::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--cc-teal-light) 0, var(--cc-teal-light) 8px, transparent 8px, transparent 16px);
    z-index: 0;
  }
}

.cc-step {
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 22px 20px 24px;
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cc-step:hover { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(20,33,61,0.1); }

.cc-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 3px;
  font-family: var(--cc-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--cc-green);
  margin-bottom: 14px;
}
.cc-step h3 { font-size: 15px; font-weight: 700; margin-bottom: 7px; letter-spacing: -0.1px; }
.cc-step p { font-size: 13.5px; color: var(--cc-muted); line-height: 1.6; }

/* =========================================
   HOSPITAL CARDS
========================================= */
.cc-city-groups {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cc-city-group {
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  overflow: hidden;
  background: #fff;
}
.cc-city-header {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s ease;
}
.cc-city-header:hover { background: var(--cc-bg-soft); }
.cc-city-header-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.cc-city-header-text { flex: 1; min-width: 0; }
.cc-city-header h2 { font-size: 16.5px; font-weight: 700; color: var(--cc-text); margin: 0; }
.cc-city-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--cc-green-dark);
  background: var(--cc-green-light);
  padding: 5px 12px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.cc-city-chevron { font-size: 13px; color: var(--cc-muted); flex-shrink: 0; transition: transform 0.2s ease; }
.cc-city-group.cc-city-open .cc-city-chevron { transform: rotate(180deg); }

.cc-hosp-grid {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 4px 20px 22px;
}
.cc-city-group.cc-city-open .cc-hosp-grid { display: grid; }

.cc-hosp-card {
  background: #ffffff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cc-hosp-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(20,33,61,0.1); }

.cc-hosp-body { padding: 18px; }

.cc-hosp-name { font-size: 15.5px; font-weight: 700; line-height: 1.3; margin-bottom: 12px; }

.cc-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }

.cc-badge {
  font-family: var(--cc-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 3px;
  background: transparent;
  border: 1.5px solid currentColor;
}
.cc-badge-teal { color: var(--cc-green); }
.cc-badge-blue { color: #185FA5; }
.cc-badge-amber { color: var(--cc-stamp); }

/* Collapsed by default: specializations + doctor-confirmation
   disclaimer are secondary detail, tucked behind one toggle so the
   card's front only carries name, accreditation, and location. */
.cc-hosp-details-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--cc-border);
  padding: 12px 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cc-green-dark);
  cursor: pointer;
  font-family: inherit;
}
.cc-hosp-details-chevron { font-size: 11px; transition: transform 0.2s ease; }
.cc-hosp-card.cc-hosp-details-open .cc-hosp-details-chevron { transform: rotate(180deg); }

.cc-hosp-details { display: none; }
.cc-hosp-card.cc-hosp-details-open .cc-hosp-details { display: block; }

@media (max-width: 1100px) {
  .cc-hosp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cc-hosp-grid { grid-template-columns: 1fr; }
  .cc-city-header { padding: 14px 16px; }
}

/* Specializations offered at a hospital: shown as a compact set of
   tags rather than a repeated block-with-button per specialization
   (previously every specialization repeated its own "Request
   Consultation" button, which meant 3-5x buttons per card across 50
   hospital cards — a wall of near-identical buttons). One clear CTA
   per hospital card is enough; the tags just communicate breadth. */
.cc-hosp-specs-list {
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.cc-hosp-spec-chip {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cc-green-dark);
  background: var(--cc-green-light);
  padding: 5px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

.cc-hosp-doc-disclaimer {
  font-size: 11.5px;
  color: var(--cc-muted);
  line-height: 1.6;
  margin: 12px 0 16px;
}

/* =========================================
   SEARCH / FILTER BARS (Hospitals & Doctors)
========================================= */
.cc-filter-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.cc-filter-input,
.cc-filter-select {
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  background: var(--cc-bg-soft);
  color: var(--cc-text);
  font-family: var(--cc-font);
}
.cc-filter-input { flex: 1; min-width: 200px; }
.cc-filter-select { min-width: 180px; }
.cc-filter-input:focus,
.cc-filter-select:focus { outline: 2px solid var(--cc-teal); border-color: var(--cc-teal); }

.cc-filter-count {
  font-size: 12.5px;
  color: var(--cc-muted);
  margin-bottom: 18px;
}

.cc-no-results {
  text-align: center;
  color: var(--cc-muted);
  font-size: 14px;
  padding: 40px 0;
}

/* =========================================
   DOCTOR CARDS (grouped by specialization —
   reuses the .cc-treat-spec-* accordion classes
   from the Treatments page for a consistent
   pattern site-wide)
========================================= */
.cc-doc-spec-groups {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cc-doc-spec-group {
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  overflow: hidden;
  background: #fff;
}

.cc-doc-grid {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 4px 20px 22px;
}
.cc-doc-spec-group.cc-treat-spec-open .cc-doc-grid { display: grid; }

.cc-doc-card {
  background: #ffffff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 20px;
}

.cc-doc-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--cc-green-light);
  color: var(--cc-green);
  font-size: 16px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}

.cc-doc-name { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.cc-doc-spec { font-size: 13px; color: var(--cc-green); font-weight: 600; margin-bottom: 6px; }
.cc-doc-hospital { font-size: 12px; color: var(--cc-muted); margin-bottom: 8px; }
.cc-doc-creds { font-size: 12px; color: var(--cc-muted); line-height: 1.55; }
.cc-doc-exp { font-size: 12px; color: var(--cc-muted); font-weight: 600; margin-top: 6px; margin-bottom: 4px; }
.cc-doc-hosp {
  font-size: 12px;
  color: var(--cc-muted);
  border-top: 1px solid var(--cc-border);
  padding-top: 10px;
  margin-top: 10px;
}

.cc-doc-book-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 14px;
  font-size: 13px;
  padding: 10px 16px;
}

/* =========================================
   BOOKING / FREE-CONSULTATION POPUP
========================================= */
.cc-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13, 31, 26, 0.55);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.cc-modal-overlay.open { display: flex; }

.cc-modal {
  background: #ffffff;
  border-radius: var(--cc-radius-lg);
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.cc-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--cc-muted);
  cursor: pointer;
  padding: 4px;
}
.cc-modal-close:hover { color: var(--cc-text); }

.cc-modal h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; padding-right: 24px; }
.cc-modal-sub { font-size: 14px; color: var(--cc-muted); margin-bottom: 16px; line-height: 1.6; }

.cc-booking-context {
  background: var(--cc-green-light);
  color: var(--cc-green-dark);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: var(--cc-radius);
  margin-bottom: 18px;
}

.cc-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cc-booking-feedback {
  font-size: 13px;
  min-height: 18px;
  margin-top: 12px;
}
.cc-feedback-success { color: var(--cc-green); font-weight: 600; }
.cc-feedback-error { color: #B42318; font-weight: 600; }

.cc-modal-fineprint {
  font-size: 11px;
  color: var(--cc-muted);
  text-align: center;
  margin-top: 12px;
}

.cc-booking-submit-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 6px;
}

/* =========================================
   STICKY FREE-CONSULTATION BAR
========================================= */
body { padding-bottom: 76px; }

.cc-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--cc-green-dark);
  color: #ffffff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 900;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
}

.cc-whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 86px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  z-index: 950;
  transition: transform 0.15s ease;
}
.cc-whatsapp-float:hover { transform: scale(1.07); }
@media (max-width: 700px) {
  .cc-whatsapp-float { right: 16px; bottom: 96px; width: 50px; height: 50px; }
  .cc-whatsapp-float svg { width: 24px; height: 24px; }
}

.cc-sticky-text {
  font-size: 13px;
  color: #d7ece5;
  flex: 1;
  min-width: 0;
}

.cc-sticky-btn {
  flex-shrink: 0;
  padding: 10px 20px;
  font-size: 13px;
  background: #ffffff !important;
  color: var(--cc-green-dark) !important;
}
.cc-sticky-btn:hover { background: var(--cc-teal-light) !important; }

/* =========================================
   COST ESTIMATOR
========================================= */
.cc-est-form {
  background: #ffffff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 28px;
  margin-bottom: 24px;
}

.cc-est-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.cc-est-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--cc-muted);
  margin-bottom: 6px;
  display: block;
}

.cc-est-form select,
.cc-est-form input {
  width: 100%;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  background: var(--cc-bg-soft);
  color: var(--cc-text);
  appearance: auto;
}

.cc-result-box {
  background: var(--cc-green-light);
  border: 1px solid var(--cc-teal);
  border-radius: var(--cc-radius-lg);
  padding: 24px 28px;
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 16px;
}
.cc-result-box.show { display: flex; }

.cc-result-label { font-size: 12px; color: var(--cc-green); font-weight: 600; margin-bottom: 4px; }
.cc-result-amount { font-size: 32px; font-weight: 700; color: var(--cc-green-dark); }
.cc-result-note { font-size: 12px; color: var(--cc-green); text-align: right; line-height: 1.7; }

.cc-doc-result {
  background: #ffffff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 18px 22px;
  display: none;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.cc-doc-result.show { display: flex; }

.cc-treatments-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 14px;
}
.cc-treatments-table th {
  text-align: left;
  padding: 10px 12px;
  color: var(--cc-muted);
  font-weight: 600;
  font-size: 12px;
  border-bottom: 1px solid var(--cc-border);
}
.cc-treatments-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--cc-border);
}
.cc-treatments-table td:last-child {
  font-weight: 600;
  color: var(--cc-green);
  text-align: right;
}

/* =========================================
   CONTACT PAGE
========================================= */
.cc-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 24px;
}

.cc-contact-form {
  background: #ffffff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 28px;
}
.cc-contact-form h3 { font-size: 17px; font-weight: 700; margin-bottom: 20px; }

.cc-field { margin-bottom: 16px; }
.cc-field label { font-size: 12px; font-weight: 600; color: var(--cc-muted); display: block; margin-bottom: 6px; }
.cc-field input,
.cc-field select,
.cc-field textarea {
  width: 100%;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  background: var(--cc-bg-soft);
  color: var(--cc-text);
  font-family: var(--cc-font);
}
.cc-field textarea { resize: vertical; }
.cc-field input:focus,
.cc-field textarea:focus,
.cc-field select:focus {
  outline: 2px solid var(--cc-teal);
  border-color: var(--cc-teal);
}

.cc-success {
  background: var(--cc-green-light);
  border: 1px solid var(--cc-teal);
  border-radius: var(--cc-radius);
  padding: 14px 18px;
  color: var(--cc-green);
  font-size: 14px;
  margin-top: 14px;
  display: none;
}
.cc-success.show { display: block; }

.cc-info-stack { display: flex; flex-direction: column; gap: 16px; }

.cc-info-card {
  background: #ffffff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 22px;
  box-shadow: 0 4px 14px rgba(20,33,61,0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cc-info-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(20,33,61,0.1); }
.cc-info-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 12px; }

.cc-info-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--cc-muted);
  margin-bottom: 9px;
}
.cc-info-row .cc-info-icon {
  color: var(--cc-green);
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.cc-highlight-card {
  background: linear-gradient(160deg, var(--cc-green-light) 0%, #fff 65%);
  border: 1.5px solid var(--cc-teal);
  border-radius: var(--cc-radius-lg);
  padding: 24px;
  box-shadow: 0 10px 24px rgba(20,33,61,0.08);
}
.cc-highlight-card h4 { color: var(--cc-green-dark); font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.cc-highlight-card p { font-size: 13.5px; color: var(--cc-text); line-height: 1.65; }

/* =========================================
   FOOTER
========================================= */
.cc-footer {
  background: var(--cc-green-dark);
  color: #a3bfb8;
  padding: 48px 32px 28px;
}

.cc-footer-inner {
  max-width: 1160px;
  margin: 0 auto;
}

.cc-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.cc-footer-brand .cc-logo { color: #5DCAA5; font-size: 18px; }
.cc-footer-brand .cc-logo span { color: #ffffff; }
.cc-footer-tagline { font-size: 13px; color: #7a9e96; margin-top: 10px; line-height: 1.6; }

.cc-footer-col h5 {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.cc-footer-col ul { list-style: none; }
.cc-footer-col ul li { margin-bottom: 8px; }
.cc-footer-col ul li a { font-size: 13px; color: #7a9e96; transition: color 0.15s; }
.cc-footer-col ul li a:hover { color: #5DCAA5; text-decoration: none; }

.cc-footer-bottom {
  border-top: 1px solid #1e3530;
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #557068;
}

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 900px) {
  .cc-stats { grid-template-columns: repeat(2, 1fr); }
  .cc-why-grid { grid-template-columns: 1fr 1fr; }
  .cc-steps { grid-template-columns: 1fr 1fr; }
  .cc-hosp-grid { grid-template-columns: 1fr; }
  .cc-doc-grid { grid-template-columns: 1fr 1fr; }
  .cc-est-row { grid-template-columns: 1fr; }
  .cc-contact-grid { grid-template-columns: 1fr; }
  .cc-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .cc-navbar { padding: 0 16px; }
  .cc-nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--cc-border);
    padding: 8px 16px 16px;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    box-shadow: 0 16px 32px rgba(20,33,61,0.12);
  }
  .cc-nav-links.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .cc-nav-links li { width: 100%; }
  .cc-nav-links a { display: block; padding: 12px 8px; }
  .cc-hamburger { display: flex; }

  /* On mobile the dropdown becomes a simple inline expand rather than
     a hover panel (touch devices have no hover) — reuses the same
     grid, just laid out in the document flow under the trigger. */
  .cc-nav-dropdown {
    position: static;
    width: 100%;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: none;
    padding: 4px 0 8px 12px;
    display: none;
  }
  .cc-nav-item-dropdown.cc-nav-mobile-open .cc-nav-dropdown { display: block; }
  .cc-nav-dropdown-grid { grid-template-columns: 1fr; }
  .cc-hero { padding: 48px 16px; }
  .cc-section, .cc-section-full { padding: 40px 16px; }
  .cc-stats { grid-template-columns: 1fr 1fr; }
  .cc-why-grid { grid-template-columns: 1fr; }
  .cc-steps { grid-template-columns: 1fr; }
  .cc-doc-grid { grid-template-columns: 1fr; }
  .cc-footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .cc-footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .cc-filter-bar { flex-direction: column; }
  .cc-filter-input, .cc-filter-select { width: 100%; }
  .cc-field-row { grid-template-columns: 1fr; }
  .cc-modal { padding: 22px; max-height: 100vh; border-radius: 0; }
  .cc-sticky-bar { padding: 12px 16px; }
  .cc-sticky-text { display: none; }
  body { padding-bottom: 64px; }
}

/* =========================================
   PATIENTS FROM ABROAD — country hub + guide
========================================= */

/* --- Country picker (used on hub hero + sticky-within-page switcher) --- */
.cc-hub-suggestion {
  background: rgba(93, 202, 165, 0.14);
  border: 1px solid rgba(93, 202, 165, 0.4);
  border-radius: var(--cc-radius);
  padding: 12px 18px;
  font-size: 13.5px;
  color: var(--cc-text);
  margin-bottom: 18px;
}
.cc-hub-suggestion a { color: var(--cc-teal-deep); font-weight: 700; }
.cc-hub-suggestion a:hover { text-decoration: underline; }

.cc-country-picker {
  background: #ffffff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 22px 24px;
  box-shadow: 0 8px 28px rgba(20,33,61,0.08);
}
.cc-country-picker-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--cc-muted);
  margin-bottom: 10px;
  display: block;
}
.cc-country-picker-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cc-country-select {
  flex: 1;
  min-width: 220px;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 14px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  background: var(--cc-bg-soft);
  color: var(--cc-text);
  font-family: var(--cc-font);
}
.cc-country-select:focus { outline: 2px solid var(--cc-teal); border-color: var(--cc-teal); }
.cc-country-picker-go {
  flex-shrink: 0;
}

/* --- Country chip grid on the hub page --- */
.cc-country-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.cc-country-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 16px 18px;
  text-decoration: none !important;
  transition: all 0.15s;
}
.cc-country-chip:hover {
  border-color: var(--cc-teal);
  background: var(--cc-green-light);
  transform: translateY(-1px);
}
.cc-country-chip-flag { font-size: 26px; line-height: 1; flex-shrink: 0; }
.cc-country-chip-name { font-size: 14px; font-weight: 700; color: var(--cc-text); }
.cc-country-chip-region { font-size: 11.5px; color: var(--cc-muted); margin-top: 1px; }

/* --- Country guide page: header strip --- */
.cc-country-hero {
  background: linear-gradient(135deg, #FBF1DA 0%, #FBFAF5 100%);
  border-bottom: 1px solid var(--cc-teal-light);
  padding: 44px 32px 36px;
}
.cc-country-hero-inner { max-width: 1160px; margin: 0 auto; }
.cc-country-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.cc-country-title-row { display: flex; align-items: center; gap: 14px; }
.cc-country-flag-lg { font-size: 44px; line-height: 1; }
.cc-country-hero h1 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; color: var(--cc-text); margin-bottom: 4px; }
.cc-country-hero-sub { font-size: 14px; color: var(--cc-muted); }

/* --- Quick-fact strip (visa / flight / currency / arrival cities) --- */
.cc-country-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.cc-country-fact {
  background: #ffffff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  padding: 14px 16px;
}
.cc-country-fact-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--cc-green);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 5px;
}
.cc-country-fact-val { font-size: 13.5px; font-weight: 600; color: var(--cc-text); line-height: 1.4; }

/* --- Visa process timeline --- */
.cc-visa-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 22px;
  align-items: start;
  margin-top: 24px;
}
.cc-visa-card {
  background: #ffffff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 26px;
}
.cc-visa-type-badge {
  display: inline-block;
  background: var(--cc-green-light);
  color: var(--cc-green-dark);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.cc-visa-summary { font-size: 14.5px; color: var(--cc-text); line-height: 1.7; margin-bottom: 20px; }

.cc-visa-detail-list { display: flex; flex-direction: column; gap: 14px; }
.cc-visa-detail-row {
  display: flex;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--cc-border);
}
.cc-visa-detail-row:first-child { padding-top: 0; border-top: none; }
.cc-visa-detail-icon { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; }
.cc-visa-detail-lbl { font-size: 12px; font-weight: 700; color: var(--cc-muted); margin-bottom: 2px; }
.cc-visa-detail-val { font-size: 13.5px; color: var(--cc-text); line-height: 1.55; }

.cc-embassy-card {
  background: var(--cc-bg-soft);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 22px;
  box-shadow: 0 4px 14px rgba(20,33,61,0.04);
}
.cc-embassy-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.cc-embassy-card .cc-embassy-city { font-size: 12.5px; color: var(--cc-green); font-weight: 600; margin-bottom: 12px; }
.cc-embassy-card p { font-size: 13px; color: var(--cc-muted); line-height: 1.65; margin-bottom: 14px; }
.cc-embassy-disclaimer {
  font-size: 11px;
  color: var(--cc-muted);
  background: #fff;
  border: 1px dashed var(--cc-border);
  border-radius: var(--cc-radius);
  padding: 10px 12px;
  line-height: 1.6;
}

/* --- Step-by-step journey timeline --- */
.cc-journey {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}
.cc-journey-step {
  display: flex;
  gap: 18px;
  padding-bottom: 26px;
  position: relative;
}
.cc-journey-step:last-child { padding-bottom: 0; }
.cc-journey-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.cc-journey-dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--cc-green);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cc-journey-line {
  width: 2px;
  flex: 1;
  background: var(--cc-border);
  margin-top: 4px;
}
.cc-journey-step:last-child .cc-journey-line { display: none; }
.cc-journey-body { padding-top: 3px; }
.cc-journey-body h4 { font-size: 14.5px; font-weight: 700; margin-bottom: 4px; }
.cc-journey-body p { font-size: 13.5px; color: var(--cc-muted); line-height: 1.65; }

/* --- Success story card --- */
.cc-story-card {
  background: #ffffff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 28px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
  margin-top: 24px;
}
.cc-story-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--cc-teal-light);
  color: var(--cc-green-dark);
  font-size: 20px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cc-story-header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.cc-story-name { font-size: 15.5px; font-weight: 700; }
.cc-story-meta { font-size: 12.5px; color: var(--cc-muted); }
.cc-story-treatment { font-size: 13px; color: var(--cc-green); font-weight: 600; margin-bottom: 14px; }
.cc-story-quote {
  font-size: 15px;
  font-style: italic;
  color: var(--cc-text);
  line-height: 1.75;
  border-left: 3px solid var(--cc-teal);
  padding-left: 16px;
  margin-bottom: 14px;
}
.cc-story-outcome {
  font-size: 12.5px;
  color: var(--cc-muted);
  background: var(--cc-bg-soft);
  border-radius: var(--cc-radius);
  padding: 10px 14px;
  line-height: 1.6;
}
.cc-story-disclaimer {
  font-size: 11px;
  color: var(--cc-muted);
  margin-top: 14px;
  font-style: italic;
}

/* --- FAQ accordion --- */
.cc-faq-list { margin-top: 20px; }
.cc-faq-item {
  border-bottom: 1px solid var(--cc-border);
}
.cc-faq-item:first-child { border-top: 1px solid var(--cc-border); }
.cc-faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--cc-font);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--cc-text);
  padding: 16px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cc-faq-q:hover { color: var(--cc-green); }
.cc-faq-icon { font-size: 18px; color: var(--cc-green); flex-shrink: 0; transition: transform 0.2s; }
.cc-faq-item.open .cc-faq-icon { transform: rotate(45deg); }
.cc-faq-a {
  display: none;
  font-size: 13.5px;
  color: var(--cc-muted);
  line-height: 1.7;
  padding: 0 4px 18px;
  max-width: 760px;
}
.cc-faq-item.open .cc-faq-a { display: block; }

/* --- Other countries strip (footer of guide page) --- */
.cc-other-countries {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.cc-other-country-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--cc-bg-soft);
  border: 1px solid var(--cc-border);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cc-text) !important;
  text-decoration: none !important;
}
.cc-other-country-link:hover { background: var(--cc-green-light); border-color: var(--cc-teal); }

/* --- "What we compare for you" explainer row (Treatments page) --- */
.cc-compare-explainer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.cc-compare-explainer-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cc-green-dark);
  background: var(--cc-green-light);
  padding: 8px 16px;
  border-radius: 20px;
}
.cc-compare-explainer-item span { font-size: 14px; }

/* --- Disclaimer banner (sample data note) --- */
.cc-sample-banner {
  background: #FAEEDA;
  border: 1px solid #E7C788;
  color: #854F0B;
  font-size: 12.5px;
  line-height: 1.6;
  padding: 12px 18px;
  border-radius: var(--cc-radius);
  margin-bottom: 28px;
}

@media (max-width: 900px) {
  .cc-country-grid { grid-template-columns: 1fr 1fr; }
  .cc-country-facts { grid-template-columns: 1fr 1fr; }
  .cc-visa-grid { grid-template-columns: 1fr; }
  .cc-story-card { grid-template-columns: 1fr; }
  .cc-story-avatar { display: none; }
}

@media (max-width: 600px) {
  .cc-country-hero { padding: 32px 16px 28px; }
  .cc-country-hero-top { flex-direction: column; }
  .cc-country-grid { grid-template-columns: 1fr; }
  .cc-country-facts { grid-template-columns: 1fr; }
  .cc-country-picker-row { flex-direction: column; }
  .cc-country-select { min-width: 0; }
  .cc-country-picker-go { width: 100%; }
}

/* =========================================
   TREATMENT EXPLORER — Specialization/Treatment dropdowns + single
   recommended Delhi/NCR hospital result
========================================= */

.cc-treatment-explorer {
  background: #ffffff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 22px;
}

/* --- Quick-jump chips (derived from each country's popular_treatments) --- */
.cc-quick-spec-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cc-quick-spec-chip {
  background: var(--cc-green-light);
  color: var(--cc-green-dark);
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--cc-font);
  border: 1px solid transparent;
  padding: 7px 14px;
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.15s;
}
.cc-quick-spec-chip:hover { background: #ffffff; border-color: var(--cc-teal); }

.cc-explorer-selects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cc-explorer-selects select {
  width: 100%;
  font-size: 14px;
  font-family: var(--cc-font);
  padding: 12px 14px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  background: var(--cc-bg-soft);
  color: var(--cc-text);
}
.cc-explorer-selects select:disabled { opacity: 0.55; cursor: not-allowed; }
.cc-explorer-selects select:focus { outline: 2px solid var(--cc-teal); border-color: var(--cc-teal); }
.cc-explorer-selects label { font-size: 12px; font-weight: 700; color: var(--cc-muted); margin-bottom: 6px; display: block; }

.cc-explorer-result { margin-top: 22px; }
.cc-recommended-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cc-recommended-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cc-green-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  letter-spacing: 0.2px;
}
.cc-recommended-treatment-name { font-size: 14px; font-weight: 700; color: var(--cc-text); }

/* --- Individual hospital card (brand-variable driven) --- */
.cc-hospital-card {
  --cc-hcard-primary: #0F6E56;
  --cc-hcard-primary-dark: #0A4A3A;
  --cc-hcard-accent: #5DCAA5;
  --cc-hcard-on-primary: #FFFFFF;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.cc-hcard-band {
  background: linear-gradient(135deg, var(--cc-hcard-primary) 0%, var(--cc-hcard-primary-dark) 100%);
  color: var(--cc-hcard-on-primary);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cc-hcard-logo {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 17px;
  flex-shrink: 0;
}
.cc-hcard-name { font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.cc-hcard-location { font-size: 11.5px; opacity: 0.9; margin-top: 2px; }

.cc-hcard-body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.cc-hcard-tagline {
  font-size: 13px;
  font-style: italic;
  color: var(--cc-hcard-primary-dark);
  margin-bottom: 10px;
  line-height: 1.5;
}
.cc-hcard-certs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cc-hcard-cert {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--cc-hcard-primary-dark);
  background: #f3f4f6;
  background: color-mix(in srgb, var(--cc-hcard-accent) 18%, white);
  border: 1px solid var(--cc-border);
  border: 1px solid color-mix(in srgb, var(--cc-hcard-accent) 45%, white);
  padding: 4px 9px;
  border-radius: 12px;
  line-height: 1.4;
}
.cc-hcard-fact-row {
  display: flex;
  gap: 14px;
  font-size: 11.5px;
  color: var(--cc-muted);
  font-weight: 600;
  margin-bottom: 12px;
}
.cc-hcard-credentials {
  font-size: 12px;
  color: var(--cc-muted);
  line-height: 1.6;
  margin-bottom: 14px;
}
.cc-hcard-treatment-block {
  background: var(--cc-bg-soft);
  border-left: 3px solid var(--cc-hcard-accent);
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.cc-hcard-treatment-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--cc-hcard-primary-dark);
  margin-bottom: 6px;
}
.cc-hcard-treatment-history {
  font-size: 12px;
  color: var(--cc-text);
  line-height: 1.6;
  margin-bottom: 8px;
}
.cc-hcard-stat { font-size: 11.5px; color: var(--cc-text); line-height: 1.55; margin-bottom: 4px; }
.cc-hcard-stat-muted { color: var(--cc-muted); }
.cc-hcard-stat strong { color: var(--cc-hcard-primary-dark); }

.cc-hcard-cost-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cc-bg-soft);
  border-radius: var(--cc-radius);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.cc-hcard-cost-label { font-size: 12px; font-weight: 600; color: var(--cc-muted); }
.cc-hcard-cost-value { font-size: 17px; font-weight: 800; color: var(--cc-hcard-primary-dark); }
.cc-hcard-cost-disclaimer { font-size: 10.5px; color: var(--cc-muted); line-height: 1.5; margin: 6px 0 14px; }

.cc-hcard-cta {
  margin-top: auto;
  width: 100%;
  background: var(--cc-hcard-primary);
  color: var(--cc-hcard-on-primary);
  border: none;
  border-radius: var(--cc-radius);
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--cc-font);
  cursor: pointer;
  transition: background 0.15s;
}
.cc-hcard-cta:hover { background: var(--cc-hcard-primary-dark); }

/* --- Hospital-branded lead popup (deliberately distinct from the
   site-wide teal booking modal — each hospital gets its own band,
   accent and CTA color, layered visually "above" the treatment
   popup it was opened from) --- */
.cc-hospital-lead-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 30, 25, 0.65);
  z-index: 1100;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.cc-hospital-lead-overlay.open { display: flex; }

.cc-hospital-lead-modal {
  --cc-hlead-primary: #0F6E56;
  --cc-hlead-primary-dark: #0A4A3A;
  --cc-hlead-accent: #5DCAA5;
  --cc-hlead-on-primary: #FFFFFF;
  background: #ffffff;
  border-radius: var(--cc-radius-lg);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  border-top: 5px solid var(--cc-hlead-accent);
}
.cc-hospital-lead-band {
  background: linear-gradient(135deg, var(--cc-hlead-primary) 0%, var(--cc-hlead-primary-dark) 100%);
  color: var(--cc-hlead-on-primary);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}
.cc-hospital-lead-logo {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 20px;
  flex-shrink: 0;
}
.cc-hospital-lead-band h3 { font-size: 16.5px; font-weight: 700; line-height: 1.3; }
.cc-hospital-lead-band p { font-size: 12px; opacity: 0.92; margin-top: 2px; }
.cc-hospital-lead-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.18);
  color: var(--cc-hlead-on-primary);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}
.cc-hospital-lead-close:hover { background: rgba(255,255,255,0.32); }

.cc-hospital-lead-form { padding: 22px 26px 26px; }
.cc-hospital-lead-sub { font-size: 13px; color: var(--cc-muted); line-height: 1.6; margin-bottom: 18px; }
.cc-hospital-lead-submit {
  width: 100%;
  background: var(--cc-hlead-primary);
  color: var(--cc-hlead-on-primary);
  border: none;
  border-radius: var(--cc-radius);
  padding: 13px 16px;
  font-size: 14.5px;
  font-weight: 700;
  font-family: var(--cc-font);
  cursor: pointer;
  margin-top: 6px;
  transition: background 0.15s;
}
.cc-hospital-lead-submit:hover { background: var(--cc-hlead-primary-dark); }
.cc-hospital-lead-submit:disabled { opacity: 0.7; cursor: default; }
.cc-hospital-lead-feedback { font-size: 12.5px; margin-top: 10px; min-height: 1em; }
.cc-hospital-lead-feedback.cc-feedback-success { color: var(--cc-green-dark); font-weight: 600; }
.cc-hospital-lead-feedback.cc-feedback-error { color: #B91C3C; font-weight: 600; }
.cc-hospital-lead-fineprint { font-size: 11px; color: var(--cc-muted); margin-top: 12px; line-height: 1.6; }

@media (max-width: 760px) {
  .cc-explorer-selects { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .cc-hospital-lead-band { padding: 18px 20px; }
  .cc-hospital-lead-form { padding: 18px 20px 22px; }
  .cc-hospital-lead-modal { max-height: 100vh; border-radius: 0; }
}

/* =========================================
   HOMEPAGE TRUST REDESIGN — hero microtrust line, stats source,
   trust strip
========================================= */

.cc-hero-microtrust {
  font-size: 12.5px;
  color: var(--cc-muted);
  margin-top: 4px;
  line-height: 1.6;
}
.cc-hero-microtrust a { color: var(--cc-green-dark); font-weight: 600; }

.cc-hero-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 10px;
}
.cc-hero-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cc-green-dark);
  background: var(--cc-green-light);
  border: 1px solid rgba(20,33,61,0.14);
  padding: 6px 13px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Gentle pulsing glow on the hero's primary CTA to draw the eye
   without being obnoxious — subtle enough to stop after a few
   seconds' worth of cycles would be ideal, but a slow, soft loop
   reads as "alive" rather than "flashing ad", so it runs continuously. */
.cc-hero-ctas .cc-btn-primary {
  animation: cc-cta-glow 2.8s ease-in-out infinite;
}
@keyframes cc-cta-glow {
  0%, 100% { box-shadow: 0 8px 22px rgba(20,33,61,0.28); }
  50% { box-shadow: 0 8px 30px rgba(20,33,61,0.48); }
}

.cc-flag-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 900px;
  margin: 18px auto 0;
  padding: 0 20px;
}
.cc-flag-strip-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--cc-muted);
  margin-right: 6px;
}
.cc-flag-pill {
  font-size: 18px;
  line-height: 1;
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}
.cc-flag-pill-more {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--cc-green-dark);
  background: var(--cc-green-light);
  border-radius: 20px;
  padding: 0 12px;
  height: 34px;
  display: flex;
  align-items: center;
}

.cc-stats-source {
  text-align: center;
  font-size: 11.5px;
  color: var(--cc-muted);
  padding: 10px 24px 0;
}
.cc-stats-source a { color: var(--cc-green-dark); font-weight: 600; }

.cc-trust-strip-wrap { padding-top: 32px; padding-bottom: 32px; }
.cc-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.cc-trust-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 18px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cc-trust-item:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(20,33,61,0.1); }
.cc-trust-icon {
  font-size: 19px;
  line-height: 1;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--cc-green-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-trust-item-title { font-size: 13px; font-weight: 700; color: var(--cc-text); margin-bottom: 4px; }
.cc-trust-item-sub { font-size: 12px; color: var(--cc-muted); line-height: 1.6; }
.cc-trust-item-sub a { color: var(--cc-green-dark); font-weight: 600; }

@media (max-width: 900px) {
  .cc-trust-strip { grid-template-columns: 1fr 1fr; }
}

/* =========================================
   HOMEPAGE TESTIMONIALS
========================================= */
.cc-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cc-testimonial-card {
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 26px 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}
.cc-testimonial-card.cc-testimonial-featured {
  border-color: var(--cc-teal);
  box-shadow: 0 10px 26px rgba(93, 202, 165, 0.16);
}
.cc-testimonial-featured-tag {
  position: absolute;
  top: -11px;
  left: 20px;
  background: var(--cc-teal);
  color: var(--cc-green-dark);
  font-family: var(--cc-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
}
.cc-testimonial-card:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(20,33,61,0.12); }
.cc-testimonial-stars { color: #F4B942; font-size: 14px; margin-bottom: 12px; letter-spacing: 2px; }
.cc-testimonial-quote { font-size: 14px; color: var(--cc-text); line-height: 1.7; flex: 1; margin-bottom: 18px; }
.cc-testimonial-quote::before { content: "\201C"; }
.cc-testimonial-quote::after { content: "\201D"; }
.cc-testimonial-person { display: flex; align-items: center; gap: 12px; }
.cc-testimonial-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cc-green) 0%, var(--cc-teal) 100%);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; flex-shrink: 0;
}
.cc-testimonial-name { font-size: 13px; font-weight: 700; color: var(--cc-text); }
.cc-testimonial-meta { font-size: 11.5px; color: var(--cc-muted); }
.cc-testimonial-disclaimer { font-size: 11px; color: var(--cc-muted); text-align: center; margin-top: 28px; line-height: 1.6; }

@media (max-width: 900px) {
  .cc-testimonial-grid { grid-template-columns: 1fr; }
}

/* =========================================
   CLOSING CTA BAND
========================================= */
.cc-closing-cta {
  background: linear-gradient(135deg, var(--cc-green-dark) 0%, var(--cc-green) 55%, #0c5a47 100%);
  border-radius: var(--cc-radius-lg);
  padding: 52px 40px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cc-closing-cta::before {
  content: "";
  position: absolute;
  top: -30%; left: -8%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 70%);
}
.cc-closing-cta::after {
  content: "";
  position: absolute;
  bottom: -35%; right: -6%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(93,202,165,0.25) 0%, rgba(93,202,165,0) 70%);
}
.cc-closing-cta-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.cc-closing-cta h2 { font-size: 27px; font-weight: 800; margin-bottom: 12px; letter-spacing: -0.3px; }
.cc-closing-cta p { font-size: 15px; opacity: 0.92; line-height: 1.6; margin-bottom: 26px; }
.cc-closing-cta .cc-btn-primary {
  background: #fff;
  color: var(--cc-green-dark) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}
.cc-closing-cta .cc-btn-primary:hover { background: #f4faf8; }
.cc-closing-cta-micro { margin-top: 16px; font-size: 12px; opacity: 0.8; }

@media (max-width: 600px) {
  .cc-closing-cta { padding: 40px 24px; }
  .cc-closing-cta h2 { font-size: 22px; }
}

/* =========================================
   SCROLL REVEAL (progressive enhancement —
   content is fully visible with no JS/no-js
   fallback; JS only adds the fade/slide-in)
========================================= */
.cc-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.cc-reveal.cc-reveal-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 600px) {
  .cc-trust-strip { grid-template-columns: 1fr; }
}

/* =========================================
   TREATMENTS PAGE
========================================= */

.cc-treat-spec-groups {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cc-treat-spec-group {
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  overflow: hidden;
  background: #fff;
}
.cc-treat-spec-header {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s ease;
}
.cc-treat-spec-header:hover { background: var(--cc-bg-soft); }
.cc-treat-spec-icon { font-size: 24px; line-height: 1; flex-shrink: 0; }
.cc-treat-spec-header-text { flex: 1; min-width: 0; }
.cc-treat-spec-header h2 { font-size: 16.5px; font-weight: 700; color: var(--cc-text); margin: 0; }
.cc-treat-spec-degree { font-size: 12px; color: var(--cc-muted); display: block; margin-top: 2px; }

.cc-treat-synopsis {
  background: var(--cc-bg-soft);
  border-top: 1px solid var(--cc-border);
  border-bottom: 1px solid var(--cc-border);
  padding: 16px 20px;
  margin: 0;
}
.cc-treat-synopsis p { font-size: 13px; line-height: 1.7; color: var(--cc-text); margin: 0 0 10px; }
.cc-treat-synopsis-disclaimer {
  font-size: 11px !important;
  color: var(--cc-muted) !important;
  font-style: italic;
  margin-bottom: 0 !important;
}
.cc-treat-spec-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--cc-green-dark);
  background: var(--cc-green-light);
  padding: 5px 12px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.cc-treat-spec-chevron {
  font-size: 13px;
  color: var(--cc-muted);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.cc-treat-spec-group.cc-treat-spec-open .cc-treat-spec-chevron { transform: rotate(180deg); }

.cc-treat-grid {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 4px 20px 22px;
}
.cc-treat-spec-group.cc-treat-spec-open .cc-treat-grid { display: grid; }

.cc-treat-card {
  background: #ffffff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.cc-treat-card-name { font-size: 14.5px; font-weight: 700; color: var(--cc-text); margin-bottom: 12px; min-height: 38px; }
.cc-treat-card-cost-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  background: var(--cc-bg-soft);
  border-radius: var(--cc-radius);
  padding: 10px 12px;
  margin-bottom: 14px;
}
.cc-treat-card-cost-lbl { font-size: 11.5px; color: var(--cc-muted); font-weight: 600; }
.cc-treat-card-cost-val { font-size: 16px; font-weight: 800; color: var(--cc-green-dark); }
.cc-treat-card-btn { margin-top: auto; width: 100%; text-align: center; }

@media (max-width: 900px) {
  .cc-treat-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .cc-treat-grid { grid-template-columns: 1fr; }
}

/* =========================================
   HOSPITALS PAGE TRUST REDESIGN
========================================= */

.cc-hosp-verify-note { font-size: 12.5px; color: var(--cc-muted); margin-top: -8px; margin-bottom: 8px; }

.cc-badge-link {
  text-decoration: none !important;
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color 0.15s;
}
.cc-badge-link:hover { border-color: currentColor; }

.cc-hosp-choose-btn { width: 100%; margin-top: 16px; text-align: center; }

/* =========================================
   MOTION SYSTEM — sitewide animated visuals
   Signature motif: a continuous "route" line
   (the patient's care journey) drawn through
   the hero and reused as the steps connector.
   Everything here is progressive enhancement:
   elements are only pre-hidden once JS has
   marked them (see footer.php), and every
   looping/ambient animation is switched off
   under prefers-reduced-motion.
========================================= */

.cc-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.cc-reveal.cc-reveal-visible { opacity: 1; transform: translateY(0); }

/* Stagger: direct children of a revealed grid/list cascade in one
   after another instead of popping together. Capped at 10 items —
   anything past that reveals with the 10th's delay. */
.cc-reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.cc-reveal-stagger.cc-reveal-visible > * { opacity: 1; transform: translateY(0); }
.cc-reveal-stagger.cc-reveal-visible > *:nth-child(1)  { transition-delay: 0.03s; }
.cc-reveal-stagger.cc-reveal-visible > *:nth-child(2)  { transition-delay: 0.09s; }
.cc-reveal-stagger.cc-reveal-visible > *:nth-child(3)  { transition-delay: 0.15s; }
.cc-reveal-stagger.cc-reveal-visible > *:nth-child(4)  { transition-delay: 0.21s; }
.cc-reveal-stagger.cc-reveal-visible > *:nth-child(5)  { transition-delay: 0.27s; }
.cc-reveal-stagger.cc-reveal-visible > *:nth-child(6)  { transition-delay: 0.33s; }
.cc-reveal-stagger.cc-reveal-visible > *:nth-child(7)  { transition-delay: 0.39s; }
.cc-reveal-stagger.cc-reveal-visible > *:nth-child(8)  { transition-delay: 0.45s; }
.cc-reveal-stagger.cc-reveal-visible > *:nth-child(9)  { transition-delay: 0.51s; }
.cc-reveal-stagger.cc-reveal-visible > *:nth-child(n+10) { transition-delay: 0.57s; }

/* ---------- Hero: on-load stagger + boarding-pass seam ---------- */
.cc-hero { position: relative; overflow: hidden; }

.cc-hero-inner, .cc-hero-text, .cc-hero-visual { position: relative; z-index: 1; }

.cc-welcome-strip {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto 20px;
  padding: 12px 22px;
  background: rgba(93, 202, 165, 0.12);
  border: 1px solid rgba(93, 202, 165, 0.4);
  border-radius: var(--cc-radius);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
}
.cc-welcome-strip span { color: var(--cc-text); font-weight: 500; }
.cc-welcome-strip a { color: var(--cc-teal-deep); font-weight: 700; white-space: nowrap; }
.cc-welcome-strip a:hover { text-decoration: underline; }

/* The hero reads as one document: a main panel (the pitch) and a
   stub (the live search), joined by a perforated seam — same idea
   as a boarding pass, just laid out left-to-right on desktop. */
@media (min-width: 901px) {
  .cc-hero-pass { align-items: stretch; }
  .cc-hero-stub {
    position: relative;
    padding-left: 36px;
    border-left: 2px dashed var(--cc-border);
  }
  .cc-hero-stub::before, .cc-hero-stub::after {
    content: "";
    position: absolute;
    left: -11px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--cc-bg-soft);
    border: 1px solid var(--cc-teal-light);
  }
  .cc-hero-stub::before { top: -10px; }
  .cc-hero-stub::after  { bottom: -10px; }
}

.cc-hero-stub-label {
  font-family: var(--cc-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cc-muted);
  margin-bottom: 10px;
}
.cc-hero-stub-label span { color: var(--cc-teal-deep); font-weight: 600; }

.cc-hero-anim { opacity: 0; transform: translateY(14px); }
@media (prefers-reduced-motion: no-preference) {
  .cc-hero-anim {
    animation: cc-rise 0.7s ease-out forwards;
    animation-delay: var(--cc-anim-delay, 0.1s);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cc-hero-anim { opacity: 1; transform: translateY(0); }
}
@keyframes cc-rise { to { opacity: 1; transform: translateY(0); } }

/* ---------- Steps: connector line draws in as the section reveals ---------- */
@media (min-width: 901px) {
  .cc-steps::after {
    content: "";
    position: absolute;
    top: 22px;
    left: 12%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--cc-green) 0%, var(--cc-teal) 100%);
    z-index: 0;
    transition: width 1.1s ease;
  }
  .cc-reveal-visible .cc-steps::after { width: 76%; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-steps::after { transition: none; }
}

/* ---------- Numbers that count up ---------- */
.cc-count-el { font-variant-numeric: tabular-nums; }

/* ---------- Cards without an existing hover lift get a light one ---------- */
.cc-treat-card,
.cc-compare-card,
.cc-doc-card,
.cc-country-index-grid a {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.cc-treat-card:hover,
.cc-compare-card:hover,
.cc-doc-card:hover,
.cc-country-index-grid a:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(20, 33, 61, 0.1);
  border-color: var(--cc-teal-light);
}

/* ---------- Nav: quiet elevation change once the page has scrolled ---------- */
.cc-navbar { transition: box-shadow 0.25s ease, height 0.25s ease; }
.cc-navbar.cc-navbar-scrolled { box-shadow: 0 4px 14px rgba(20, 33, 61, 0.1); }

.cc-nav-links a { position: relative; }
.cc-nav-links a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  background: var(--cc-teal);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.cc-nav-links a:hover::after,
.cc-nav-links a.active::after { transform: scaleX(1); }

/* ---------- WhatsApp float: a slow breathing pulse to draw the eye ---------- */
.cc-whatsapp-float { position: fixed; }
.cc-whatsapp-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  z-index: -1;
}
@media (prefers-reduced-motion: no-preference) {
  .cc-whatsapp-float::before { animation: cc-fab-ping 2.6s cubic-bezier(0,0,0.2,1) infinite; }
}
@keyframes cc-fab-ping {
  0%   { transform: scale(1);   opacity: 0.55; }
  75%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ---------- Page header accent: a short route-line draws under the title ---------- */
.cc-page-header-inner h1.cc-section-title { position: relative; display: inline-block; }
.cc-page-header-inner h1.cc-section-title::after {
  content: "";
  display: block;
  height: 3px;
  width: 0;
  margin-top: 10px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cc-green) 0%, var(--cc-teal) 100%);
  transition: width 0.8s ease 0.15s;
}
.cc-reveal-visible.cc-page-header-inner h1.cc-section-title::after,
.cc-page-header-inner.cc-reveal-visible h1.cc-section-title::after { width: 72px; }

/* ---------- Global: switch off ambient/looping motion when requested ---------- */
@media (prefers-reduced-motion: reduce) {
  .cc-whatsapp-float::before {
    animation: none !important;
  }
}