/* ==========================================================================
   jp-hubs-experience.css — visual primitives for the hubs experience layer
   --------------------------------------------------------------------------
   Loaded by every page that uses jp-hubs-experience.js. Scoped under the
   .jph- prefix to avoid colliding with existing page styles.

   Palette mirrors the rest of the JetPatient surface:
     --jph-navy   #0A2D6E    primary text + dark accents
     --jph-teal   #00C9C0    primary brand teal
     --jph-tealD  #00A89F    teal dark / hover state
     --jph-muted  #5A6B8C    secondary text
     --jph-bord   #E4E9F2    subtle borders
     --jph-soft   #F7F9FD    page background
   ========================================================================== */
:root{
  --jph-navy:#0A2D6E;
  --jph-navy-2:#0e3b90;
  --jph-teal:#00C9C0;
  --jph-tealD:#00A89F;
  --jph-muted:#5A6B8C;
  --jph-bord:#E4E9F2;
  --jph-soft:#F7F9FD;
  --jph-soft-teal:rgba(0,201,192,.06);
  --jph-soft-navy:rgba(10,45,110,.05);
  --jph-r:14px;
  --jph-r-lg:22px;
  --jph-shadow-1:0 4px 14px rgba(10,45,110,.08);
  --jph-shadow-2:0 14px 36px rgba(10,45,110,.14);
  --jph-shadow-3:0 24px 56px rgba(10,45,110,.18);
}

/* Defensive resets within the experience layer only */
[class^="jph-"], [class*=" jph-"]{ box-sizing:border-box; }

/* Icons */
.jph-ico{ width:18px; height:18px; display:inline-block; vertical-align:middle; flex-shrink:0; }
.jph-ico-arrow{ width:14px; height:14px; vertical-align:middle; }

/* Buttons */
.jph-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:100px; font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:13.5px; font-weight:800; letter-spacing:.01em; text-decoration:none; cursor:pointer;
  border:1.5px solid transparent; transition:transform .15s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.jph-btn-primary{ background:var(--jph-teal); color:#fff; box-shadow:0 4px 14px rgba(0,201,192,.25); }
.jph-btn-primary:hover{ background:var(--jph-tealD); transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,201,192,.30); color:#fff; }
.jph-btn-ghost{ background:transparent; color:var(--jph-navy); border-color:var(--jph-bord); }
.jph-btn-ghost:hover{ border-color:var(--jph-teal); color:var(--jph-teal); }

/* Shared eyebrow */
.jph-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--jph-tealD);
  background:rgba(0,201,192,.08); border:1px solid rgba(0,201,192,.2);
  border-radius:100px; padding:5px 12px; margin-bottom:10px;
}

.jph-flag{ font-size:1.1em; line-height:1; }

/* ──────────────────────────────────────────────────────────────────
   PROCEDURE FILTER STRIP (Initiative #1)
   ────────────────────────────────────────────────────────────────── */
.jph-proc-strip{
  max-width:1200px; margin:14px auto 0; padding:0 28px;
}
.jph-proc-strip-inner{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  padding:14px; background:#fff;
  border:1.5px solid var(--jph-bord); border-radius:18px;
  box-shadow:var(--jph-shadow-1);
}
.jph-proc-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:100px;
  background:#fff; border:1.5px solid var(--jph-bord);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:13px; font-weight:700; color:var(--jph-navy);
  cursor:pointer; transition:all .15s ease;
}
.jph-proc-pill:hover{ border-color:var(--jph-teal); color:var(--jph-tealD); transform:translateY(-1px); }
.jph-proc-pill.on{
  background:linear-gradient(135deg, var(--jph-navy), var(--jph-teal));
  border-color:transparent; color:#fff;
  box-shadow:0 4px 16px rgba(10,45,110,.20);
}
.jph-proc-pill.on .jph-proc-ico{ color:#fff; }
.jph-proc-ico{ color:var(--jph-tealD); display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; }
.jph-proc-all{ font-weight:800; }

.jph-proc-meta{
  text-align:center; padding:12px 16px 0;
  font-size:13px; color:var(--jph-muted); line-height:1.5;
}
.jph-proc-meta-lbl{ font-weight:700; color:var(--jph-navy); }
.jph-proc-meta-top{ font-weight:800; color:var(--jph-navy); text-decoration:none; }
.jph-proc-meta-top:hover{ color:var(--jph-tealD); }
.jph-proc-meta-cta{ font-weight:800; color:var(--jph-tealD); text-decoration:none; margin-left:12px; }
.jph-proc-meta-cta:hover{ text-decoration:underline; }
.jph-proc-meta-hint{ font-style:normal; color:var(--jph-muted); }

@media (max-width:720px){
  .jph-proc-strip{ padding:0 18px; }
  .jph-proc-strip-inner{ overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .jph-proc-strip-inner::-webkit-scrollbar{ display:none; }
  .jph-proc-pill{ flex-shrink:0; }
}

/* Procedure-aware hub-card decoration */
.hub-card.jph-no-match{ opacity:.55; filter:saturate(.7); }
.hub-card.jph-top-match{ position:relative; }
/* TOP MATCH badge uses ::before (not ::after) so the page's existing
   ::after bottom-accent strip is preserved. Positioned just below the
   band's bottom edge as a banner so it never competes with the Compare
   button at top-left or the flag at top-right. */
.hub-card.jph-top-match::before{
  content:"Top match"; position:absolute;
  top:116px; left:14px; z-index:6;       /* sits 24px above the 140px band/body boundary */
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:linear-gradient(135deg, var(--jph-navy), var(--jph-teal));
  padding:5px 11px; border-radius:100px;
  box-shadow:0 4px 14px rgba(10,45,110,.30);
  pointer-events:none;
}
.jph-price-chip{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 12px; margin:0 0 14px;
  background:linear-gradient(135deg, rgba(0,201,192,.08), rgba(10,45,110,.05));
  border:1px solid rgba(0,201,192,.22); border-radius:10px;
  font-size:12.5px;
}
.jph-price-chip-lbl{ color:var(--jph-muted); font-weight:700; }
.jph-price-chip-val{ color:var(--jph-navy); font-weight:800; }

/* ──────────────────────────────────────────────────────────────────
   CARD "COMPARE" CHIP + TRAY (Initiative #2)
   ────────────────────────────────────────────────────────────────── */
.jph-card-compare{
  position:absolute; top:14px; left:14px; z-index:5;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px 6px 8px; border-radius:100px;
  background:rgba(255,255,255,.94); color:var(--jph-navy);
  border:1px solid rgba(10,45,110,.18); font-family:inherit;
  font-size:11.5px; font-weight:800; cursor:pointer;
  box-shadow:0 4px 12px rgba(10,45,110,.10);
  transition:all .15s ease; backdrop-filter:blur(6px);
}
.jph-card-compare:hover{ background:#fff; transform:translateY(-1px); }
.jph-card-compare.on{ background:var(--jph-navy); color:#fff; border-color:var(--jph-navy); }
.jph-card-compare .jph-ico{ width:14px; height:14px; }

/* Compare button stays at consistent top-left on every card. The TOP MATCH
   badge lives at the bottom of the band as a banner (see ::before above)
   so there's no positional conflict and the flag remains untouched. */

/* ──────────────────────────────────────────────────────────────────
   HUB CARD BAND POLISH
   ----------------------------------------------------------------------
   Adds visual character to the country card bands echoing the country
   subpage heroes. Without painting 17 unique illustrations we get:
     · a subtle dot-grid pattern overlay (matches hero `.hh-grid`)
     · a soft horizon arc silhouette at the band's bottom edge
     · larger, more prominent flag with a refined drop shadow
     · inner-top highlight stripe for depth
   The page's per-country gradient `.hub-card-<slug> .hub-card-band` and
   `.hub-card-<slug> .hub-card-glow` rules are preserved — these
   enhancements only layer on top.
   ────────────────────────────────────────────────────────────────── */
.hub-card-band{
  height:140px !important;            /* +10px breathing room for the polish */
  isolation:isolate;                  /* contain stacking */
}
/* Dot-grid pattern overlay — matches the country subpage hero's grid */
.hub-card-band::after{
  content:""; position:absolute; inset:0; z-index:2;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 0);
  background-size:14px 14px;
  pointer-events:none;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.25) 70%, transparent);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.25) 70%, transparent);
}
/* Inner-top highlight for depth + a soft horizon arc at the bottom of
   the band, evoking the country hero's silhouette element. */
.hub-card-band::before{
  content:""; position:absolute; left:-10%; right:-10%; bottom:-18px;
  height:48px; z-index:2; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,201,192,.22) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(10,45,110,.45) 0%, transparent 70%);
  filter:blur(2px);
}
/* Flag: bigger + softer halo so the country identity reads instantly. */
.hub-card-flag{
  font-size:54px !important;
  top:16px !important; right:20px !important;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.32)) drop-shadow(0 0 24px rgba(255,255,255,.12)) !important;
  z-index:4 !important;
}

/* ──────────────────────────────────────────────────────────────────
   COMPARE TRAY — Marketplace-parity styling
   ----------------------------------------------------------------------
   This tray uses the same visual model as marketplace.html's
   #compare-bar so the destination-compare interaction reads as the
   exact same UX pattern users already know from the clinic compare.
   Mirrors: full-width fixed-bottom dock, navy gradient, slot-based
   selections (3 slots), dashed empty / solid teal filled,
   white-on-navy typography, gradient-teal primary CTA disabled until
   ≥2 selected, slide-up motion from translateY(110%) → 0.
   ────────────────────────────────────────────────────────────────── */
.jph-compare-tray{
  position:fixed; bottom:0; left:0; right:0; z-index:1500;
  background:linear-gradient(180deg,#0A2D6E 0%,#04193a 100%);
  color:#fff;
  padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  transform:translateY(110%);
  transition:transform .32s cubic-bezier(.22,1,.36,1);
  box-shadow:0 -10px 36px rgba(10,45,110,.35);
  border-top:1px solid rgba(255,255,255,.08);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
}
.jph-compare-tray.visible{ transform:none; }
.jph-cbar-left{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.jph-cbar-title{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:700; color:#fff; white-space:nowrap;
}
.jph-cbar-slots{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.jph-cbar-slot{
  background:rgba(255,255,255,.12);
  border:1.5px dashed rgba(255,255,255,.28);
  border-radius:12px; padding:8px 14px;
  font-size:12.5px; font-weight:700; color:#fff;
  display:flex; align-items:center; gap:10px; min-width:180px;
  position:relative;
  transition:background .2s, border-color .2s, transform .2s;
}
.jph-cbar-slot.filled{
  background:rgba(0,201,192,.18);
  border-style:solid; border-color:rgba(0,201,192,.55);
  animation:jphCbarSlotIn .32s cubic-bezier(.22,1,.36,1);
}
@keyframes jphCbarSlotIn{
  from{ transform:translateY(6px) scale(.96); opacity:0; }
  to{ transform:none; opacity:1; }
}
.jph-cbar-slot.empty{ opacity:.5; color:rgba(255,255,255,.7); }
.jph-cbar-slot-plus{ color:var(--jph-teal); font-weight:800; }
.jph-cbar-slot-flag{ font-size:14px; line-height:1; }
.jph-cbar-slot-name{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px;
}
.jph-cbar-slot-x{
  background:rgba(255,255,255,.14); border:none; color:#fff;
  cursor:pointer; font-size:11px; padding:0; margin-left:auto;
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
  transition:background .15s;
  font-family:inherit;
}
.jph-cbar-slot-x:hover{ background:rgba(255,80,80,.6); }
.jph-cbar-count{
  font-size:13px; color:rgba(255,255,255,.72); white-space:nowrap;
}
.jph-cbar-actions{ display:flex; gap:10px; align-items:center; }
.jph-cbar-clear{
  background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.25);
  color:#fff;
  border-radius:10px; padding:9px 16px;
  font-family:inherit; font-size:13px; font-weight:700;
  cursor:pointer; transition:.15s;
}
.jph-cbar-clear:hover{ background:rgba(255,255,255,.2); }
.jph-cbar-btn{
  background:linear-gradient(135deg, var(--jph-teal) 0%, var(--jph-tealD) 100%);
  color:#fff; border:none; border-radius:10px;
  padding:10px 22px;
  font-family:inherit; font-size:13px; font-weight:800;
  cursor:pointer; transition:.15s;
  box-shadow:0 6px 22px rgba(0,201,192,.35);
}
.jph-cbar-btn:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(0,201,192,.5);
}
.jph-cbar-btn.is-waiting,
.jph-cbar-btn:disabled{
  background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.72);
  box-shadow:none; cursor:not-allowed;
  border:1.5px dashed rgba(255,255,255,.25);
}

/* Mobile: stack the left cluster and actions so nothing overflows */
@media (max-width:760px){
  .jph-compare-tray{
    flex-direction:column; align-items:stretch; gap:10px;
    padding:12px 16px;
  }
  .jph-cbar-left{ justify-content:center; }
  .jph-cbar-slot{ min-width:0; flex:1 1 140px; }
  .jph-cbar-actions{ justify-content:space-between; }
  .jph-cbar-clear, .jph-cbar-btn{ flex:1; text-align:center; }
}

/* ──────────────────────────────────────────────────────────────────
   PRICE-TABLE ROW LINKS (Initiative #2)
   ────────────────────────────────────────────────────────────────── */
.jph-row-clickable{ cursor:pointer; transition:background .15s ease; }
.jph-row-clickable:hover{ background:rgba(0,201,192,.06); }
.jph-row-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:100px;
  font-size:12px; font-weight:800; color:var(--jph-tealD);
  background:rgba(0,201,192,.10); border:1px solid rgba(0,201,192,.22);
  text-decoration:none; margin-top:4px; transition:all .15s ease;
}
.jph-row-link:hover{ background:var(--jph-teal); color:#fff; border-color:var(--jph-teal); }
.jph-row-link .jph-ico-arrow{ transition:transform .15s ease; }
.jph-row-link:hover .jph-ico-arrow{ transform:translateX(2px); }

/* Featured-facility links — surface them as marketplace deep-links */
.jph-facility-link{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--jph-navy); text-decoration:none; font-weight:600;
  transition:color .15s ease;
}
.jph-facility-link:hover{ color:var(--jph-tealD); }
.jph-facility-arrow{ opacity:.6; transition:transform .15s ease; }
.jph-facility-link:hover .jph-facility-arrow{ transform:translateX(2px); opacity:1; }

/* ──────────────────────────────────────────────────────────────────
   OUTCOMES & CREDENTIALING BAR (Initiative #4)
   ────────────────────────────────────────────────────────────────── */
.jph-outcomes{
  max-width:1180px; margin:0 auto; padding:24px 28px;
}
.jph-outcomes-head{ text-align:center; max-width:760px; margin:0 auto 18px; }
.jph-outcomes-h{
  font-size:clamp(24px, 3vw, 34px); font-weight:800; color:var(--jph-navy);
  letter-spacing:-.02em; margin:0 0 8px; line-height:1.2;
}
.jph-outcomes-sub{ font-size:15px; color:var(--jph-muted); line-height:1.6; margin:0; }
.jph-outcomes-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.jph-outcomes-stat{
  background:#fff; border:1.5px solid var(--jph-bord); border-radius:16px;
  padding:18px 16px; box-shadow:var(--jph-shadow-1);
  text-align:center;
}
.jph-outcomes-val{
  font-size:30px; font-weight:900; color:var(--jph-navy);
  letter-spacing:-.03em; line-height:1; margin-bottom:4px;
  background:linear-gradient(135deg, var(--jph-navy), var(--jph-teal));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.jph-outcomes-lbl{ font-size:12.5px; font-weight:800; color:var(--jph-navy); letter-spacing:.04em; text-transform:uppercase; margin-bottom:6px; }
.jph-outcomes-meta{ font-size:11.5px; color:var(--jph-muted); line-height:1.4; }

@media (max-width:760px){
  .jph-outcomes-grid{ grid-template-columns:repeat(2,1fr); }
}

.jph-credential{
  margin-top:16px; background:#fff; border:1.5px solid var(--jph-bord);
  border-radius:16px; overflow:hidden;
}
.jph-credential[open]{ box-shadow:var(--jph-shadow-1); }
.jph-credential-sum{
  display:flex; align-items:center; gap:12px; padding:14px 20px;
  cursor:pointer; list-style:none; font-family:inherit;
}
.jph-credential-sum::-webkit-details-marker{ display:none; }
.jph-credential-sum .jph-ico{ color:var(--jph-tealD); width:22px; height:22px; }
.jph-credential-title{ flex:1; font-size:15px; font-weight:800; color:var(--jph-navy); }
.jph-credential-chev{ color:var(--jph-muted); font-size:14px; transition:transform .2s ease; }
.jph-credential[open] .jph-credential-chev{ transform:rotate(180deg); }
.jph-credential-body{ padding:0 22px 22px; }
.jph-credential-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px 24px; margin-top:8px; }
.jph-credential-cat h4{ font-size:13px; font-weight:800; color:var(--jph-navy); margin:0 0 8px; }
.jph-credential-cat ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px; }
.jph-credential-cat li{ font-size:13.5px; color:var(--jph-muted); padding-left:16px; position:relative; line-height:1.45; }
.jph-credential-cat li::before{ content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--jph-teal); opacity:.6; }
.jph-credential-cta-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }

@media (max-width:640px){
  .jph-credential-grid{ grid-template-columns:1fr; }
}

/* ──────────────────────────────────────────────────────────────────
   SAVINGS EMBED (Initiative #2)
   ────────────────────────────────────────────────────────────────── */
.jph-savings-embed{ max-width:1180px; margin:0 auto; padding:24px 28px; }
.jph-savings-head{ text-align:center; max-width:760px; margin:0 auto 18px; }
.jph-savings-h{ font-size:clamp(24px,3vw,34px); font-weight:800; color:var(--jph-navy); letter-spacing:-.02em; margin:0 0 8px; line-height:1.2; }
.jph-savings-sub{ font-size:15px; color:var(--jph-muted); line-height:1.6; margin:0; }
.jph-svg-table{
  background:#fff; border:1.5px solid var(--jph-bord); border-radius:18px;
  overflow:hidden; box-shadow:var(--jph-shadow-1);
}
.jph-svg-thead, .jph-svg-row{
  display:grid; grid-template-columns:1.8fr .9fr .9fr 1.1fr 1fr;
  align-items:center; gap:0;
}
.jph-svg-thead{
  background:var(--jph-soft); padding:12px 22px;
  font-size:11px; font-weight:800; color:var(--jph-muted);
  letter-spacing:.06em; text-transform:uppercase;
  border-bottom:1px solid var(--jph-bord);
}
.jph-svg-row{
  padding:13px 22px; border-bottom:1px solid var(--jph-bord);
  font-size:14px; color:var(--jph-navy);
}
.jph-svg-row:last-child{ border-bottom:none; }
.jph-svg-row:nth-child(even){ background:rgba(247,249,253,.6); }
.jph-svg-name{ display:flex; align-items:center; gap:8px; font-weight:700; }
.jph-svg-ico{ color:var(--jph-tealD); display:inline-flex; }
.jph-svg-here{ font-weight:800; color:var(--jph-tealD); }
.jph-svg-us{ color:var(--jph-muted); text-decoration:line-through; }
.jph-svg-save{ font-weight:800; color:var(--jph-navy); }
.jph-svg-pct{ color:var(--jph-muted); font-weight:700; font-size:12px; }
.jph-mini-btn{
  display:inline-flex; align-items:center; gap:4px;
  padding:6px 10px; border-radius:100px;
  background:var(--jph-soft-teal); color:var(--jph-tealD); border:1px solid rgba(0,201,192,.22);
  font-size:12px; font-weight:800; text-decoration:none;
}
.jph-mini-btn:hover{ background:var(--jph-teal); color:#fff; border-color:var(--jph-teal); }
.jph-savings-foot{ display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap; }

@media (max-width:760px){
  .jph-svg-thead{ display:none; }
  .jph-svg-row{ grid-template-columns:1fr; gap:6px; padding:18px 22px; }
  .jph-svg-name{ font-size:14.5px; }
  .jph-svg-here, .jph-svg-us, .jph-svg-save{ font-size:13.5px; }
  .jph-svg-here::before{ content:"This destination: "; color:var(--jph-muted); font-weight:600; }
  .jph-svg-us::before{ content:"United States: "; color:var(--jph-muted); font-weight:600; }
  .jph-svg-save::before{ content:"You save: "; color:var(--jph-muted); font-weight:600; }
}

/* ──────────────────────────────────────────────────────────────────
   TRIP COST COMPOSER (Initiative #3)
   ----------------------------------------------------------------------
   The composer is a single, self-contained visual card so it never reads
   as orphaned controls. Head + grid + foot sit inside one bordered shell
   so the section has a clear visual anchor at every viewport width.
   ────────────────────────────────────────────────────────────────── */
.jph-trip{
  max-width:1180px; margin:0 auto; padding:24px 28px;
  background:#fff; border:1.5px solid var(--jph-bord); border-radius:22px;
  box-shadow:var(--jph-shadow-2);
}
.jph-trip-head{ text-align:center; max-width:760px; margin:0 auto 18px; }
.jph-trip-h{ font-size:clamp(24px,3vw,34px); font-weight:800; color:var(--jph-navy); letter-spacing:-.02em; margin:0 0 8px; line-height:1.2; }
.jph-trip-sub{ font-size:15px; color:var(--jph-muted); line-height:1.6; margin:0; }

.jph-trip-grid{
  display:grid; grid-template-columns:minmax(260px,340px) 1fr; gap:20px;
}
.jph-trip-controls{ display:flex; flex-direction:column; gap:14px; }
.jph-trip-field{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:800; color:var(--jph-navy); }
.jph-trip-field span{ letter-spacing:.04em; text-transform:uppercase; font-size:11px; color:var(--jph-muted); }
.jph-trip-field select, .jph-trip-field input{
  padding:11px 12px; border:1.5px solid var(--jph-bord); border-radius:10px;
  font-family:inherit; font-size:14px; font-weight:700; color:var(--jph-navy);
  background:#fff;
}
.jph-trip-field select:focus, .jph-trip-field input:focus{
  outline:none; border-color:var(--jph-teal); box-shadow:0 0 0 3px rgba(0,201,192,.18);
}
.jph-trip-check{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:var(--jph-soft); border:1.5px solid var(--jph-bord);
  border-radius:10px; cursor:pointer; font-size:13px; font-weight:600; color:var(--jph-navy);
}
.jph-trip-check input{ accent-color:var(--jph-teal); }

.jph-trip-summary{
  background:linear-gradient(135deg, rgba(10,45,110,.04), rgba(0,201,192,.06));
  border:1px solid rgba(0,201,192,.22); border-radius:16px; padding:22px 24px;
}
.jph-trip-roll{ display:flex; flex-direction:column; gap:10px; }
.jph-trip-row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:4px 0; font-size:14px; color:var(--jph-muted); }
.jph-trip-row strong{ color:var(--jph-navy); font-weight:800; font-size:15px; }
.jph-trip-total{ padding-top:10px; border-top:1px dashed rgba(10,45,110,.15); font-size:15px; }
.jph-trip-total strong{ font-size:22px; color:var(--jph-navy); }
.jph-trip-vs{ font-size:13px; }
.jph-trip-vs strong{ color:var(--jph-muted); text-decoration:line-through; font-size:14px; }
.jph-trip-savings{
  margin-top:12px; padding:12px 14px; border-radius:12px;
  background:rgba(0,201,192,.10); color:var(--jph-navy); font-size:14px; font-weight:600;
}
.jph-trip-savings strong{ color:var(--jph-tealD); font-weight:900; }
.jph-trip-meta{ margin-top:8px; font-size:12.5px; color:var(--jph-muted); }

.jph-trip-foot{ display:flex; gap:10px; justify-content:center; margin-top:14px; flex-wrap:wrap; }

@media (max-width:820px){
  .jph-trip-grid{ grid-template-columns:1fr; }
}

/* ──────────────────────────────────────────────────────────────────
   AI NAVIGATOR ANCHOR + CANDIDACY (Initiative #5)
   ────────────────────────────────────────────────────────────────── */
.jph-ai-anchor{
  max-width:1180px; margin:0 auto; padding:24px 28px;
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.jph-ai-left, .jph-ai-right{
  background:#fff; border:1.5px solid var(--jph-bord); border-radius:20px;
  padding:22px; box-shadow:var(--jph-shadow-1);
}
.jph-ai-left{
  background:linear-gradient(180deg, rgba(10,45,110,.03), rgba(0,201,192,.05));
}
.jph-ai-h{ font-size:clamp(22px,2.6vw,28px); font-weight:800; color:var(--jph-navy); letter-spacing:-.02em; margin:0 0 8px; line-height:1.2; }
.jph-ai-sub{ font-size:14px; color:var(--jph-muted); line-height:1.6; margin:0 0 18px; }
.jph-ai-prompts{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.jph-ai-prompt{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; background:#fff;
  border:1.5px solid var(--jph-bord); border-radius:12px;
  text-decoration:none; color:var(--jph-navy);
  font-size:13.5px; font-weight:700; transition:all .15s ease;
}
.jph-ai-prompt .jph-ico{ color:var(--jph-tealD); flex-shrink:0; }
.jph-ai-prompt:hover{ border-color:var(--jph-teal); transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,201,192,.12); }
.jph-ai-cta{ width:100%; }

/* Candidacy widget */
.jph-cand{ display:flex; flex-direction:column; gap:14px; }
.jph-cand-eyebrow{ display:inline-flex; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--jph-tealD); }
.jph-cand-head h3{ font-size:20px; font-weight:800; color:var(--jph-navy); margin:6px 0; line-height:1.25; }
.jph-cand-head p{ font-size:13.5px; color:var(--jph-muted); margin:0; line-height:1.5; }
.jph-cand-opts{ display:flex; flex-direction:column; gap:8px; }
.jph-cand-opt{
  text-align:left; padding:12px 14px;
  background:#fff; border:1.5px solid var(--jph-bord); border-radius:12px;
  font-family:inherit; font-size:14px; font-weight:700; color:var(--jph-navy);
  cursor:pointer; transition:all .15s ease;
}
.jph-cand-opt:hover{ border-color:var(--jph-teal); background:var(--jph-soft-teal); transform:translateX(2px); }
.jph-cand-foot{ display:flex; align-items:center; justify-content:space-between; }
.jph-cand-progress{ font-size:12px; font-weight:700; color:var(--jph-muted); }
.jph-cand-summary{
  background:var(--jph-soft); border:1px solid var(--jph-bord); border-radius:12px;
  padding:14px 16px; display:flex; flex-direction:column; gap:6px;
}
.jph-cand-sum-row{ display:flex; justify-content:space-between; gap:14px; font-size:13px; color:var(--jph-muted); }
.jph-cand-sum-row strong{ color:var(--jph-navy); font-weight:800; }
.jph-cand-actions{ display:flex; gap:10px; flex-wrap:wrap; }

@media (max-width:820px){
  .jph-ai-anchor{ grid-template-columns:1fr; }
}

/* ──────────────────────────────────────────────────────────────────
   Reduced-motion fallbacks
   ────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) and (min-width: 99999px){
  .jph-proc-pill, .jph-btn, .jph-card-compare, .jph-compare-tray, .jph-cand-opt, .hub-card.jph-no-match, .jph-row-link, .jph-ico-arrow,
  .jph-cbar-slot, .jph-cbar-btn, .jph-cbar-clear{
    transition:none !important; transform:none !important;
    animation:none !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   JP-HUBS-DENSITY v1 · 2026-06-03
   ----------------------------------------------------------------------
   Country subpages set `section{padding:96px 0}` and `.container{max-width:1120px}`
   in their inline <style> blocks. Those defaults produce ~192px of empty
   space between every section and waste ~15% of the desktop viewport.

   Because this stylesheet loads AFTER the country page's inline <style>
   (see the <head> order in jetpatient-mexico.html etc.), same-specificity
   rules here win. We tighten every contributor in one place so the change
   propagates across all 17 country subpages without per-file edits.

   Targets:
     - section vertical padding (96 → 48)
     - section.alt vertical padding (same)
     - .container max-width (1120 → 1280) and side padding (32 → 28)
     - .recovery-cards 2→4 columns on wider viewports
     - .trust-cards / .myth-grid / .city-grid / .stats-cards gap + margin-top tightening
     - Final-CTA section padding (80 → 48)
     - section H2 + eyebrow margin tightening
   ────────────────────────────────────────────────────────────────── */

/* Container: widen + slightly narrower side padding */
body .container{
  max-width:1280px !important;
  padding-left:28px !important;
  padding-right:28px !important;
}

/* Legacy section: cut vertical padding in half */
body > section,
body section.alt,
section.mex-final-cta,
section.tur-final-cta,
section.col-final-cta,
section.cr-final-cta,
section.pa-final-cta,
section.sg-final-cta,
section.es-final-cta,
section.tw-final-cta,
section.kr-final-cta,
section.jp-final-cta,
section.id-final-cta,
section.cz-final-cta,
section.hu-final-cta,
section.ae-final-cta,
section.ar-final-cta,
section.br-final-cta{
  padding-top:48px !important;
  padding-bottom:48px !important;
}

/* Section H2: tighten margin below */
body section h2{ margin-bottom:14px !important; }
body section .eyebrow{ margin-bottom:10px !important; }
body section .lead{ margin-bottom:18px !important; }

/* Stats cards strip: tighten top margin so it sits closer to the data table */
body .stats-cards{
  margin-top:18px !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
body .stats-cards .stat-card{ padding:18px 14px !important; }
body .stats-cards .stat-card-value{ font-size:26px !important; }
body .stats-cards .stat-card-label{ font-size:12px !important; margin-top:6px !important; }

/* Recovery cards: 2x2 → 4x1 on desktop (the cards are short enough) */
@media (min-width:980px){
  body .recovery-cards{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:14px !important;
    margin-top:20px !important;
  }
  body .recovery-card{ padding:18px !important; }
  body .recovery-card h3{ font-size:15px !important; margin-bottom:6px !important; }
  body .recovery-card p{ font-size:13px !important; line-height:1.55 !important; }
}

/* Trust cards: tighten internal padding + margin */
body .trust-cards{
  margin-top:20px !important;
  gap:14px !important;
}
body .trust-card{ padding:18px !important; }

/* Myth grid: shrink margin-top + gap */
body .myth-grid{ margin-top:20px !important; gap:14px !important; }

/* City grid: keep 3 columns but tighten gap */
body .city-grid{ margin-top:20px !important; gap:16px !important; }
body .city-card{ padding:20px !important; }

/* JP-HUBS-BULLET-FIX v1 · 2026-06-03
   ----------------------------------------------------------------------
   16 of 17 country subpages have inline `<style>` like:
     .city-highlights li::before { content:'&#8594;'; ... }
   CSS doesn't decode HTML entities in `content`, so this renders the
   literal string "&#8594;" before every list item. Override with the
   proper CSS unicode escape (\2192 = U+2192 RIGHTWARDS ARROW) so every
   city-highlights bullet renders as a clean teal arrow. Single rule,
   propagates to all subpages because this stylesheet loads after the
   page's inline <style> block. */
body .city-highlights li::before{
  content:"\2192" !important;
  position:absolute !important; left:0 !important;
  color:var(--jph-teal, #00C9C0) !important; font-weight:700 !important;
  line-height:1.5 !important;
}
/* Make sure parent <li> has room for the absolute-positioned arrow. */
body .city-highlights li{
  position:relative; padding-left:20px;
}

/* Comparison table: trim the top margin */
body .comparison-table{ margin:24px 0 16px !important; }
body .table-note{ margin-bottom:18px !important; }

/* Legacy .logistics-grid still ships on some country subpages — keep its
   card padding intact so columns don't look squished. We only trim its
   outer rhythm (gap + margin-top). */
body .logistics-grid{ gap:18px !important; margin-top:14px !important; }
body .logistics-column h3{ font-size:15px !important; margin-bottom:8px !important; }

/* Final-CTA H2 + p: tighten */
body .mex-final-cta h2,
body .tur-final-cta h2,
body .col-final-cta h2{ margin-bottom:10px !important; }
body .mex-final-cta p,
body .tur-final-cta p,
body .col-final-cta p{ margin-bottom:22px !important; }

/* Trip composer + savings table on wide desktop should use the new wider container */
@media (min-width:1200px){
  .jph-trip,
  .jph-savings-embed,
  .jph-outcomes,
  .jph-ai-anchor{ padding-left:28px; padding-right:28px; }
}

/* Slim down the compare tray's vertical footprint a touch */
.jph-compare-tray{ padding:10px 16px; }

/* Mobile: respect the natural single-column stack but still trim */
@media (max-width:720px){
  body > section,
  body section.alt{
    padding-top:36px !important;
    padding-bottom:36px !important;
  }
  body .stats-cards,
  body .recovery-cards,
  body .trust-cards{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* CL-0c · credentialing status disclosure — see jp-hubs-experience.js */
.jph-credential-status{margin:0 0 16px;padding:13px 15px;border-radius:10px;
  background:rgba(180,83,9,.07);border:1px solid rgba(180,83,9,.26);
  font-size:13.5px;line-height:1.62;color:#3A2A12}
.jph-credential-status strong{color:#B45309}
.jph-outcomes-basis{grid-column:1/-1;margin-top:10px;font-size:12px;line-height:1.55;
  opacity:.72;font-style:normal}