/* ==========================================================================
   DV Packages Ecosystem — styles for:
   - templates/template-packages-home.php   (/packages/)
   - templates/taxonomy-location-packages.php  (/packages/{country}/)
   - single-package.php additions (.package-additional-content)

   v2 — design pass: real typography, tiered depth, varied country tiles
   instead of flat repeated blue boxes, tighter spacing rhythm.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');
/* NOTE: for production, move this @import to a wp_enqueue_style() preconnect
   + <link> in functions.php instead of a CSS @import — @import blocks
   render slightly. Left inline here so the file is drop-in and self-contained. */

:root{
  /* Real brand colors, confirmed from the live theme's own dentavacation.min.css
     (not approximations): #005BAA is the actual .packagebtn / .card-package
     .price background; #F31C1C is the actual .recommended_badge / .quote a
     color; #FAA61A is the actual star-rating gold. */
  --dv-blue:#005BAA;
  --dv-blue-dark:#003D73;
  --dv-blue-tint:#EAF1FC;
  --dv-red:#F31C1C;
  --dv-red-dark:#C91616;
  --dv-ink:#151C29;
  --dv-gray:#5C6B7A;
  --dv-gray-light:#8A97A6;
  --dv-line:#E4E9F1;
  --dv-yellow:#FAA61A;
  --dv-yellow-dark:#e0900f;
  --dv-green:#1C8A4B;
  --dv-amber:#B4720A;

  --dv-radius-lg:22px;
  --dv-radius-md:16px;
  --dv-radius-sm:10px;

  --dv-shadow-sm:0 2px 8px rgba(21,28,41,0.06);
  --dv-shadow-card:0 10px 28px rgba(30,79,160,0.10);
  --dv-shadow-lift:0 18px 40px rgba(30,79,160,0.16);

  --dv-space-1:8px;
  --dv-space-2:16px;
  --dv-space-3:24px;
  --dv-space-4:40px;
  --dv-space-5:64px;

  --font-display:var(--bs-body-font-family, 'arial', 'arial', sans-serif);
  --font-body:var(--bs-body-font-family, 'arial', 'arial', sans-serif);
  --font-body:'arial';
  --font-display:'arial';
  
  
  /* rotating country-tile palette — deep, distinct, still on-brand */
  --tile-1:#1E4FA0; --tile-1b:#123368;
  --tile-2:#0F6E5C; --tile-2b:#0A4A3E;
  --tile-3:#9C4A2E; --tile-3b:#6B3120;
  --tile-4:#4B3F8C; --tile-4b:#332A61;
  --tile-5:#1C7A93; --tile-5b:#125163;
  --tile-6:#8C3F63; --tile-6b:#602943;
}

/* ---------- page container — now matches the theme's own real
   sitewide pattern (grid-template-columns: 5vw 90vw 5vw, used by
   every .grid-* section across the site — .grid-home, .grid-aboutus,
   .grid-destinations, etc.) instead of an invented fixed max-width.
   Content sits in the middle 90vw track via grid-column:2 on every
   direct child, so no template markup changes were needed. ---------- */
.grid-packages-home,
.grid-packages-country{
  font-family:var(--font-body);
  display:grid;
  grid-template-columns:5vw 90vw 5vw; /* default, below 992px */
}
.grid-packages-home > *,
.grid-packages-country > *{
  grid-column:2;
}
@media only screen and (min-width:992px){
  .grid-packages-home,
  .grid-packages-country{grid-template-columns:1fr 960px 1fr;}
}
@media only screen and (min-width:1200px){
  .grid-packages-home,
  .grid-packages-country{grid-template-columns:1fr 1140px 1fr;}
}
@media only screen and (min-width:1600px){
  .grid-packages-home,
  .grid-packages-country{grid-template-columns:1fr 1320px 1fr;}
}
 
.grid-packages-home h1, .grid-packages-home h2, .grid-packages-home h3,
.grid-packages-country h1, .grid-packages-country h2, .grid-packages-country h3{
  font-family:var(--font-display);
  letter-spacing:-0.01em;
  margin-top: 0px;
    margin-bottom: 20px;
}
.grid-packages-country h3{
    margin-bottom:0;
}
/* Card titles are h3 on city + procedure pages (h4 elsewhere) - keep them identical */
.grid-packages-country h3.pkg-card-title{
    letter-spacing:normal;
    margin-bottom:10px;
}

 
/* ---------- .section-heading — now matches the theme's real,
   already-established convention exactly (font-weight, size, color,
   margins, and the underline accent), instead of an invented style ---------- */
.section-heading{
  display:block;font-weight:700;color:#222;
  font-size:1.5rem;line-height:1.5;
  margin-top:3.125rem;margin-bottom:2.8125rem;
  position:relative;
}
.section-heading::after{
  content:'';display:block;position:relative;
  border-bottom:0.1875rem solid #222;width:2.8125rem;bottom:-0.75rem;
}
.section-eyebrow-line{width:40px;height:4px;background:var(--dv-red);margin-bottom:var(--dv-space-3);border-radius:3px;}

/* ==========================================================================
   PACKAGES HOME — /packages/
   ========================================================================== */

.grid-packages-home{padding:0 0 var(--dv-space-4);}

.pkg-hero{
  grid-column:1 / -1; /* full width — breaks out of the 5vw/90vw/5vw container */
  position: relative;
    /* NOTE: overflow:hidden removed from here deliberately — it was
       clipping the search combobox's dropdown panel, which needs to
       extend below the hero when open. The decorative blur circles
       that used to need this clipping now live on .pkg-hero-decoration
       below instead, which has its own overflow:hidden and sits behind
       the content (z-index:0), so nothing visually changes except the
       dropdown now works correctly. */
    background: linear-gradient(180deg, #F0F5FE 0%, #FBFCFF 100%);
    padding: 48px;
    text-align: center;
    border-radius: 0; /* was 32px — full-width edge-to-edge shouldn't have rounded outer corners */
    margin-bottom: var(--dv-space-3);
    
}
.pkg-hero-inner{max-width:900px;margin:0 auto;position:relative;z-index:1;}
.pkg-hero-decoration{
  position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;
}
.pkg-hero-decoration::before,
.pkg-hero-decoration::after{
  content:'';position:absolute;border-radius:50%;filter:blur(60px);opacity:0.35;
}
.pkg-hero-decoration::before{width:340px;height:340px;background:var(--dv-blue);top:-160px;left:-120px;}
.pkg-hero-decoration::after{width:280px;height:280px;background:var(--dv-red);bottom:-140px;right:-90px;opacity:0.18;}

.pkg-hero > *{position:relative;z-index:1;}

.pkg-hero .eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;border:1px solid var(--dv-line);color:var(--dv-blue-dark);
  font-family:var(--font-body);font-size:12.5px;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;
  padding:8px 16px;border-radius:999px;margin-bottom:22px;box-shadow:var(--dv-shadow-sm);
}
.pkg-hero h1.page-heading{
  font-size:50px;font-weight:700;color:var(--dv-blue-dark);line-height:1.15;margin:0 auto 35px;
}
.pkg-hero-intro{font-family:var(--font-body);color:var(--dv-gray);font-size:16.5px;line-height:1.6;margin:0 auto 34px;}

.pkg-search{
  background:#fff;border-radius:999px;box-shadow:var(--dv-shadow-lift);
  display:flex;align-items:center;gap:0;max-width:660px;margin:0 auto;padding:8px;
  border:1px solid rgba(30,79,160,0.06);
}

/* Hero search — houses two .pkgq-combo instances + a submit button.
   The comboboxes' own field/panel styling comes from the existing
   .pkgq-combo-* rules (shared with the quiz) — this just fixes the
   surrounding container, since the comboboxes are taller and shaped
   differently than the flat <select> this row was originally built for. */
.pkg-hero-search-form{
  flex-wrap:wrap;border-radius:20px;padding:6px;gap:8px;align-items:stretch;
  border:1px solid rgba(30,79,160,0.08);
}
.pkg-hero-search-form .pkgq-combo{flex:1;min-width:220px;max-width:none;}
.pkg-hero-search-form .pkgq-combo-field{
  border-radius:50px;padding:0px 16px;min-height:48px;border-color:transparent;
  transition:background-color 0.15s ease;
}
.pkg-hero-search-form .pkgq-combo-field:hover{background-color:var(--dv-blue-tint);}
.pkg-hero-search-form .pkgq-combo.is-open .pkgq-combo-field{background-color:var(--dv-blue-tint);}
.pkg-hero-search-form .pkg-search-btn{
  flex:none;border-radius:14px;min-height:48px;padding:0 28px;
}
@media(min-width:641px){
  .pkg-hero-search-form{border-radius:999px;flex-wrap:nowrap;padding:8px;}
  .pkg-hero-search-form .pkgq-combo:first-child .pkgq-combo-field{padding-left:20px;}
  .pkg-hero-search-form .pkg-search-btn{border-radius:999px;}
}
@media(max-width:640px){
  .pkg-hero-search-form .pkg-search-btn{width:100%;justify-content:center;}
}

.pkg-select{
  flex:1;border:none;background-color:transparent;font-family:var(--font-body);font-size:14.5px;font-weight:500;
  color:var(--dv-ink);padding:14px 40px 14px 18px;border-right:1px solid var(--dv-line);cursor:pointer;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C6B7A' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  border-radius:999px;
  transition:background-color 0.15s ease;
}
.pkg-select:hover{background-color:var(--dv-blue-tint);}
.pkg-select:focus{outline:none;background-color:var(--dv-blue-tint);}
.pkg-select:last-of-type{border-right:none;}
/* style the dropdown's own option list where the browser allows it */
.pkg-select option{color:var(--dv-ink);font-family:var(--font-body);padding:8px;}
.pkg-search-btn{
  background:var(--dv-blue);color:#fff;border:none;font-family:var(--font-body);font-weight:700;font-size:14.5px;
  padding:14px 30px;border-radius:999px;display:flex;align-items:center;gap:8px;cursor:pointer;
  white-space:nowrap;transition:background 0.15s ease, transform 0.15s ease;
}
.pkg-search-btn:hover{background:var(--dv-blue-dark);transform:translateY(-1px);}

.pkg-countries,.pkg-featured{margin-bottom:var(--dv-space-5);padding:0 4px;}

/* ---------- country tiles: varied, textured, no more identical boxes ---------- */
.pkg-country-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}

.pkg-country-card{
  display:flex;align-items:center;gap:10px;
  background:#fff;border:1px solid var(--dv-line);border-radius:var(--dv-radius-sm);
  padding:10px 14px;text-decoration:none;
  transition:border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.pkg-country-card:hover{border-color:var(--dv-blue);box-shadow:var(--dv-shadow-sm);transform:translateY(-2px);}

.pkg-country-flag-badge{
  width:26px;height:26px;border-radius:50%;overflow:hidden;flex:none;
  border:1px solid var(--dv-line);
}
.pkg-country-flag-badge .flag{width:100%;height:100%;object-fit:cover;display:block;}
.pkg-country-name{
  font-family:var(--font-body);font-weight:600;font-size:13.5px;color:var(--dv-ink);
  flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pkg-country-count{
  flex:none;font-family:var(--font-body);font-size:11px;font-weight:700;color:var(--dv-blue);
  background:var(--dv-blue-tint);padding:3px 9px;border-radius:20px;
}

/* ---------- benefits strip ---------- */
.pkg-benefits{
  background:var(--dv-blue-tint);padding:52px 28px;border-radius:28px;margin-bottom:var(--dv-space-5);
  position:relative;overflow:hidden;
}
.pkg-benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px;position:relative;z-index:1;}
.pkg-benefit{
  background:#fff;border-radius:var(--dv-radius-md);padding:28px 24px;box-shadow:var(--dv-shadow-card);
  transition:transform 0.2s ease;
}
.pkg-benefit:hover{transform:translateY(-3px);}
.pkg-step-number{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  background:linear-gradient(135deg,var(--dv-blue),var(--dv-blue-dark));color:#fff;border-radius:50%;
  font-family:var(--font-display);font-weight:700;margin-bottom:16px;font-size:16px;
  box-shadow:0 6px 14px rgba(30,79,160,0.28);
}
.pkg-benefit h3{font-family:var(--font-display);font-size:17.5px;font-weight:700;margin-bottom:8px;color:var(--dv-ink);}
.pkg-benefit p{font-family:var(--font-body);color:var(--dv-gray);font-size:14px;line-height:1.55;margin:0;}

.pkg-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:26px;margin-bottom: 50px;}
@media(min-width:1600px){
  /* Container widens to 1320px at this tier — 4 fixed columns would
     leave cards oversized and waste the extra width, so scale up. */
  .pkg-card-grid{grid-template-columns:repeat(5,1fr);}
}

/* .pkg-card-carousel: the [packages]/[packages2..19] shortcode's blog-
   post embed. A horizontal scroll-snap carousel, not a wrapping grid -
   blog content sits in a narrow reading column, so a grid either
   crams columns too tight or wraps to only 1-2 per row; a carousel
   sidesteps container-width guessing entirely and lets each card keep
   its natural width regardless of how narrow the column is. Native
   CSS scroll-snap, no JS required for touch/trackpad/scrollbar-drag. */
.pkg-card-carousel{
  display:flex;gap:18px;margin-top:26px;margin-bottom:50px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:4px;
  padding-bottom:14px; /* room for the visible scrollbar below */
  -webkit-overflow-scrolling:touch;
}
.pkg-card-carousel .card-package{
  flex:0 0 260px;scroll-snap-align:start;
}
.pkg-card-carousel::-webkit-scrollbar{height:6px;}
.pkg-card-carousel::-webkit-scrollbar-track{background:var(--dv-line);border-radius:999px;}
.pkg-card-carousel::-webkit-scrollbar-thumb{background:var(--dv-blue);border-radius:999px;}
.post-content .pkg-card-title{margin-top:0;}

/* ==========================================================================
   COUNTRY ARCHIVE — /packages/{country}/
   ========================================================================== */

.grid-packages-country{padding:26px 0 0px;}

.pkg-breadcrumb{font-family:var(--font-body);font-size:13px;color:var(--dv-gray);padding:0 0 18px;}
.pkg-breadcrumb a{color:var(--dv-blue);text-decoration:none;font-weight:500;}
.pkg-breadcrumb span{color:var(--dv-ink);font-weight:600;}

.pkg-country-header{padding:8px 0 30px;}
.pkg-country-h1{
  font-family:var(--font-display);font-size:44px;font-weight:700;color:var(--dv-ink);
  line-height:1.1;letter-spacing:-0.01em;margin-bottom:18px;
}
.pkg-country-intro{font-family:var(--font-body);font-size:16px;line-height:1.7;color:var(--dv-gray);margin-bottom:16px;}
.pkg-country-intro p{margin:0;}
.pkg-country-intro h2 {color: #222;font-size: 1rem;font-weight: 400;line-height: 1.5;}
.pkg-country-meta{
  display:flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:13px;color:var(--dv-gray);
}
.pkg-country-meta-dot{width:7px;height:7px;border-radius:50%;background:var(--dv-green);display:inline-block;flex:none;}

/* ---------- procedure filter chip bar ---------- */
.pkg-procedure-filter-wrap{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--dv-line);}
.pkg-procedure-filter-label{
  display:block;font-family:var(--font-body);font-weight:700;font-size:12.5px;letter-spacing:0.03em;
  text-transform:uppercase;color:var(--dv-gray);margin-bottom:12px;
}
.pkg-procedure-filter{display:flex;gap:10px;flex-wrap:wrap;}
.pkg-procedure-chip{
  background:#fff;border:1.5px solid var(--dv-line);color:var(--dv-gray);
  font-family:var(--font-body);font-weight:600;font-size:13.5px;
  padding:9px 18px;border-radius:999px;cursor:pointer;transition:all 0.15s ease;
  min-height:40px;white-space:nowrap;
}
.pkg-procedure-chip:hover{border-color:var(--dv-blue);color:var(--dv-blue);}
.pkg-procedure-chip.is-active{
  background:var(--dv-blue);border-color:var(--dv-blue);color:#fff;
  box-shadow:0 6px 16px rgba(30,79,160,0.25);
}

/* ---------- accordion (by city) ---------- */
.pkg-accordion{display:flex;flex-direction:column;gap:14px;margin-bottom:var(--dv-space-4);}

.pkg-accordion-item{
  border:1px solid var(--dv-line);border-radius:16px;overflow:hidden;background:#fff;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.pkg-accordion-item.is-open{border-color:var(--dv-blue);box-shadow:var(--dv-shadow-card);}

.pkg-accordion-trigger{
  width:100%;display:flex;align-items:center;gap:14px;
  background:none;border:none;cursor:pointer;text-align:left;
  padding:20px 24px;font-family:var(--font-body);
  min-height:56px; /* comfortable touch target */
}
.pkg-accordion-title{
  font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--dv-ink);
}
.pkg-accordion-count{
  font-size:12.5px;font-weight:600;color:var(--dv-gray);background:var(--dv-blue-tint);
  padding:4px 12px;border-radius:999px;
}
.pkg-accordion-icon{
  margin-left:auto;color:var(--dv-blue);font-size:13px;transition:transform 0.25s ease;
}
.pkg-accordion-item.is-open .pkg-accordion-icon{transform:rotate(180deg);}

/* smooth height animation without JS measuring — grid-rows 0fr -> 1fr */
.pkg-accordion-panel{
  display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.3s ease;
}
.pkg-accordion-item.is-open .pkg-accordion-panel{grid-template-rows:1fr;}
.pkg-accordion-panel-inner{overflow:hidden;}
.pkg-accordion-panel .pkg-card-grid{padding:4px 24px 24px;}
.pkg-accordion-city-link{
  display:inline-block;margin:2px 24px 16px;font-family:var(--font-body);font-weight:600;font-size:13px;
  color:var(--dv-blue);text-decoration:none;
}
.pkg-accordion-city-link:hover{text-decoration:underline;}

/* ---------- carousel (used instead of the grid when a city has more
   than 4 packages) — pure CSS scroll-snap, no JS width measurement,
   so it works correctly even though it starts inside a collapsed
   accordion panel ---------- */
.pkg-carousel-wrap{position:relative;padding:4px 24px 24px;}
.pkg-carousel{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px;
}
.pkg-carousel::-webkit-scrollbar{display:none;}
.pkg-carousel .card-package{
  flex:0 0 280px;scroll-snap-align:start;
}
.pkg-carousel-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--dv-line);
  box-shadow:var(--dv-shadow-sm);font-size:18px;color:var(--dv-blue);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all 0.15s ease;
}
.pkg-carousel-arrow:hover{background:var(--dv-blue);color:#fff;border-color:var(--dv-blue);}
.pkg-carousel-prev{left:0;}
.pkg-carousel-next{right:0;}

.pkg-accordion-empty{
  display:none;font-family:var(--font-body);font-size:13.5px;color:var(--dv-gray);
  padding:0 24px 24px;
}

/* ==========================================================================
   Country page city sections — replaces the old accordion-by-city
   pattern with a simpler "show 4, view all" layout. NOTE: the
   .pkg-accordion-*/.pkg-carousel-* CSS above is left in place
   deliberately — the CITY page (taxonomy-location-city-packages.php,
   grouped by procedure) still uses that pattern and isn't affected
   by this change.
   ========================================================================== */
.pkg-city-sections{display:flex;flex-direction:column;gap:var(--dv-space-5);margin-bottom:var(--dv-space-4);}
.pkg-city-section{border-top:1px solid var(--dv-line);padding-top:28px;margin-bottom: 50px;}
.pkg-city-section:first-child{border-top:none;padding-top:0;}

.pkg-city-section .pkg-city-section-title{
    margin: 0;}

.pkg-city-section-header{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.pkg-city-section-title{
  font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--dv-ink);margin:0;
}
.pkg-city-section-count{
  font-family:var(--font-body);font-size:11.5px;font-weight:700;color:var(--dv-blue);
  background:var(--dv-blue-tint);padding:3px 11px;border-radius:20px;
}

/* Desktop/tablet: real grid, 4 across so the default 4-card sample
   lines up cleanly in one row */
.pkg-city-card-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px;
}
.pkg-city-card-slot{min-width:0;display:flex;} /* prevents grid blowout from card content; flex so the card inside fills the stretched row height */
.pkg-card-hidden-default{display:none;} /* hides beyond-4 cards immediately, no JS-load flash */

.pkg-city-section-empty{
  font-family:var(--font-body);font-size:13.5px;color:var(--dv-gray);margin-bottom:16px;
}

.pkg-city-view-all-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-body);font-weight:700;font-size:13.5px;color:var(--dv-blue);
  text-decoration:none;border:1.5px solid var(--dv-blue);border-radius:999px;
  padding:9px 20px;transition:all 0.15s ease;
}
.pkg-city-view-all-btn:hover{background:var(--dv-blue);color:#fff;}

@media(max-width:1199px){
  .pkg-city-card-row{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:1023px){
  .pkg-city-card-row{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:767px){
  .pkg-city-card-row{grid-template-columns:repeat(2,1fr);}
}

/* Mobile: horizontal swipe within a city instead of wrapping to a
   tall stack — scroll left/right through that city's 4 cards, then
   scroll down (normal page scroll) to reach the next city. Pure CSS
   scroll-snap, same technique used elsewhere in this build — no JS,
   so it's immune to the accordion-hidden-at-init problem that ruled
   out reusing a JS carousel library earlier. */
@media(max-width:640px){
  .pkg-city-card-row{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none;
    margin:0 -20px 16px;padding:0 20px 4px;
  }
  .pkg-city-card-row::-webkit-scrollbar{display:none;}
  .pkg-city-card-slot{flex:0 0 max-content;max-width:290px;scroll-snap-align:start;}
  .pkg-city-section-title{font-size:17px;}
  /* view-all renders as its own standalone button below the row on
     mobile instead of as a 4th card inside the horizontal scroll —
     see .pkg-view-all-mobile-btn below */
  .pkg-city-view-all-card{display:none;}
}

/* Standalone tertiary button — mobile only, sits below the row of 3
   cards. Desktop keeps the decorative 4th-card version instead. */
.pkg-view-all-mobile-btn{
  display:none;
}
@media(max-width:640px){
  .pkg-view-all-mobile-btn{
    display:block;text-align:center;
    background:transparent;border:1.5px solid var(--dv-blue);color:var(--dv-blue);
    font-family:var(--pf-font-b, var(--font-body));font-weight:700;font-size:13.5px;
    padding:12px;border-radius:999px;text-decoration:none;
    margin:-4px 0 16px;transition:all 0.15s ease;
  }
  .pkg-view-all-mobile-btn:hover{background:var(--dv-blue);color:#fff;}
}

.pkg-filter-empty{
  display:none;font-family:var(--font-body);font-size:14px;color:var(--dv-gray);
  text-align:center;padding:30px 0;
}
.pkg-filter-empty a{color:var(--dv-blue);font-weight:600;}

.pkg-empty{font-family:var(--font-body);color:var(--dv-gray);font-size:15px;padding:36px 0;}
.pkg-empty a{color:var(--dv-blue);font-weight:600;}

.pkg-faq{margin:60px 0;}
.pkg-faq-item{border:1px solid var(--dv-line);border-radius:14px;padding:18px 20px;margin-bottom:12px;transition:border-color 0.15s ease;}
.pkg-faq-item:hover{border-color:var(--dv-blue);}
.pkg-faq-item summary{font-family:var(--font-body);font-weight:600;font-size:14.5px;cursor:pointer;color:var(--dv-ink);}
.pkg-faq-item div{margin-top:12px;font-size:13.5px;color:var(--dv-gray);line-height:1.65;}

.pkg-related-links{margin-bottom:var(--dv-space-4);}
.grid-packages-country .pkg-related-links{margin-top:30px;}
.pkg-related-links a{color:var(--dv-blue);font-weight:600;font-size:14px;text-decoration:none;}
.pkg-related-links a:hover{text-decoration:underline;}

/* ---------- city page CTA: heading+subtext on one side, the real
   booking form on the other (reuses .pkg-form-panel styling from
   single-package.php for visual consistency) ---------- */
.pkg-city-cta-card{
  background:#fff;border:1px solid var(--dv-line);border-radius:26px;overflow:hidden;
  box-shadow:var(--dv-shadow-card);margin-bottom:var(--dv-space-5);
  position:relative;display: flex;justify-content: space-between;
}

.mtc-form-wrapper .form-group label{
color:#0000006e;}

.pkg-city-cta-text{padding:48px 44px;display:flex;flex-direction:column;justify-content:center;}
.pkg-city-cta-heading{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--dv-ink);margin-bottom:14px;line-height:1.25;}
.pkg-city-cta-subtext{font-family:var(--font-body);font-size:15px;color:var(--dv-gray);line-height:1.6;}
.pkg-city-cta-card #form-overlay.form-overlay{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(0,61,115,0.85);z-index:5;
}
.pkg-city-cta-card #form-overlay.form-overlay.active,
.pkg-city-cta-card #form-overlay.form-overlay.show,
.pkg-city-cta-card #form-overlay.form-overlay.is-active{display:flex;}
.pkg-city-cta-card .pkg-form-panel{padding:40px 36px;}

@media(max-width:900px){
  .pkg-city-cta-card{grid-template-columns:1fr;}
  .pkg-city-cta-text{padding:32px 28px;text-align:center;}
}


/* ==========================================================================
   PACKAGE CARDS — moved to dv-package-card.css, loaded globally
   (sitewide, not just on packages-ecosystem pages) so card-package.php
   renders correctly wherever it's used. See enqueue-packages-css-patch.php
   for the enqueue change — dv-package-card.css is now a dependency of
   this stylesheet, not duplicated inside it.
   ========================================================================== */

/* ==========================================================================
   Interactive Package Finder — shared by hub and country pages
   (templates/partials/package-finder.php)
   ========================================================================== */

.pkg-finder{
  background:linear-gradient(135deg,var(--dv-blue),var(--dv-blue-dark));
  color:#fff;text-align:center;padding:52px 32px;border-radius:26px;margin-bottom:20px;
  position:relative;overflow:hidden;
}
.pkg-finder::before{
  content:'';position:absolute;width:280px;height:280px;border-radius:50%;
  background:rgba(255,255,255,0.06);top:-140px;right:-80px;
}
.pkg-finder-text{position:relative;z-index:1;margin-bottom:26px;}
.pkg-finder-heading{font-family:var(--font-display);font-size:23px;font-weight:700;color:#fff;margin-bottom:8px;}
.pkg-finder-subtext{font-family:var(--font-body);font-size:14.5px;color:rgba(255,255,255,0.85);max-width:480px;margin:0 auto;}

.pkg-finder-form{
  position:relative;z-index:1;background:#fff;border-radius:999px;box-shadow:0 12px 30px rgba(0,0,0,0.18);
  display:flex;align-items:center;gap:0;max-width:680px;margin:0 auto;padding:8px;flex-wrap:wrap;
}
.pkg-finder-select{
  flex:1;min-width:160px;border:none;background-color:transparent;font-family:var(--font-body);font-size:14.5px;font-weight:500;
  color:var(--dv-ink);padding:14px 40px 14px 18px;border-right:1px solid var(--dv-line);cursor:pointer;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C6B7A' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;border-radius:999px;
}
.pkg-finder-select:last-of-type{border-right:none;}
.pkg-finder-btn{
  background:var(--dv-red);color:#fff;border:none;font-family:var(--font-body);font-weight:700;font-size:14.5px;
  padding:14px 30px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:transform 0.15s ease;
}
.pkg-finder-btn:hover{transform:translateY(-2px);}

.pkg-finder-empty{
  display:none;position:relative;z-index:1;margin-top:18px;font-family:var(--font-body);font-size:13.5px;
  color:rgba(255,255,255,0.85);
}
.pkg-finder-empty a{color:var(--dv-yellow);font-weight:600;}

@media(max-width:640px){
  .pkg-finder-form{flex-direction:column;border-radius:20px;}
  .pkg-finder-select{width:100%;border-right:none;border-bottom:1px solid var(--dv-line);}
  .pkg-finder-btn{width:100%;}
}

/* ==========================================================================
   Package Finder Quiz — hub page only (templates/partials/package-quiz.php)
   ========================================================================== */

.pkg-quiz-cta{
  background:linear-gradient(135deg,var(--dv-blue),var(--dv-blue-dark));
  color:#fff;text-align:center;padding:52px 32px;border-radius:26px;margin-bottom:20px;
  position:relative;overflow:hidden;
}
.pkg-quiz-cta::before{
  content:'';position:absolute;width:280px;height:280px;border-radius:50%;
  background:rgba(255,255,255,0.06);top:-140px;right:-80px;
}
.pkg-quiz-cta-heading{
  position:relative;z-index:1;font-family:var(--font-display);font-size:25px;font-weight:700;
  color:#fff;margin-bottom:24px;
}
.pkg-quiz-open-btn{
  position:relative;z-index:1;background:var(--dv-red);color:#fff;border:none;
  font-family:var(--font-body);font-weight:700;font-size:15px;padding:16px 38px;
  border-radius:999px;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,0.25);
  transition:transform 0.15s ease;
}
.pkg-quiz-open-btn:hover{transform:translateY(-2px);}

.pkg-quiz-modal{
  position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px;
}
.pkg-quiz-modal.is-open{display:flex;}
.pkg-quiz-backdrop{position:absolute;inset:0;background:rgba(21,28,41,0.65);}
.pkg-quiz-panel{
  position:relative;background:#fff;border-radius:24px;max-width:560px;width:100%;
  padding:44px 40px;box-shadow:0 30px 80px rgba(0,0,0,0.35);max-height:85vh;overflow-y:auto;
}
.pkg-quiz-close{
  position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:50%;
  background:var(--dv-blue-tint);border:none;font-size:20px;line-height:1;color:var(--dv-gray);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.pkg-quiz-close:hover{background:var(--dv-line);}

.pkg-quiz-progress{height:5px;background:var(--dv-line);border-radius:999px;margin-bottom:32px;overflow:hidden;}
.pkg-quiz-progress-bar{display:block;height:100%;background:var(--dv-blue);border-radius:999px;transition:width 0.3s ease;width:33%;}
.pkg-quiz-progress-bar[data-step="2"]{width:66%;}
.pkg-quiz-progress-bar[data-step="3"]{width:100%;}

.pkg-quiz-question{
  font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--dv-ink);
  margin-bottom:24px;line-height:1.3;
}
.pkg-quiz-options{display:flex;flex-direction:column;gap:10px;}
.pkg-quiz-option{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#fff;border:1.5px solid var(--dv-line);border-radius:14px;
  padding:15px 18px;font-family:var(--font-body);font-weight:600;font-size:14.5px;color:var(--dv-ink);
  cursor:pointer;text-align:left;transition:all 0.15s ease;
}
.pkg-quiz-option:hover{border-color:var(--dv-blue);background:var(--dv-blue-tint);}
.pkg-quiz-option-count{
  flex:none;font-size:11.5px;font-weight:700;color:var(--dv-blue);
  background:var(--dv-blue-tint);padding:3px 10px;border-radius:20px;
}

.pkg-quiz-loading{text-align:center;padding:30px 0;}
.pkg-quiz-spinner{
  width:36px;height:36px;border-radius:50%;margin:0 auto 18px;
  border:4px solid var(--dv-line);border-top-color:var(--dv-blue);
  animation:pkg-quiz-spin 0.8s linear infinite;
}
@keyframes pkg-quiz-spin{to{transform:rotate(360deg);}}
.pkg-quiz-loading p{font-family:var(--font-body);color:var(--dv-gray);font-size:14px;}

@media(max-width:640px){
  .pkg-quiz-panel{padding:32px 24px;border-radius:20px;}
  .pkg-quiz-question{font-size:19px;}
  .pkg-quiz-cta{padding:40px 22px;}
}

/* ==========================================================================
   SINGLE PACKAGE — single-package.php
   v4: no image. Price + savings + urgency + inclusions unified in one
   column, form sticks alongside on desktop as the visitor scrolls.
   Fully namespaced under pkg-*. #form-overlay left unrenamed — the
   site's own JS targets it by name.
   ========================================================================== */

.pkg-wrap{max-width:1240px;margin:0 auto;padding:22px 28px 0;}

/* Scoped constraint for the shared featured-on partial — doesn't touch
   .featured-wrapper itself or anything inside featuredon.php, since
   both are reused elsewhere on the site. */
.pkg-featured-constrain{max-width:1240px;margin:0 auto;padding:0 28px;}

.pkg-hero-card{
  background:#fff;border:1px solid var(--dv-line);border-radius:26px;overflow:hidden;
  box-shadow:var(--dv-shadow-card);
}
.pkg-hero-grid{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  grid-template-areas:
    "top form"
    "bottom form";
  align-items:stretch; /* form panel now fills the full row height instead of
                           stopping short and leaving mismatched white space
                           beside the left column (was align-items:start) */
  position:relative;
}

/* --- left column, split into two grid areas so mobile can reorder
   independently: top (before form) and bottom (after form) --- */
.pkg-details-top{grid-area:top;padding:32px 36px 0;}
.pkg-details-bottom{grid-area:bottom;padding:0 36px 28px;}

.pkg-highlight-chip{
  display:none;background:var(--dv-blue-tint);color:var(--dv-blue-dark);
  font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:0.02em;text-transform:uppercase;
  padding:6px 14px;border-radius:999px;margin-bottom:12px;
}
.pkg-highlight-chip-standalone{
  display:inline-flex;align-items:center;margin-bottom:14px;
}
.pkg-title{
  font-family:var(--font-display);font-size:25px;font-weight:700;color:var(--dv-ink);line-height:1.22;margin-bottom:14px;
}
.pkg-title-standalone{
  font-size:clamp(28px,3.4vw,42px);font-weight:600;line-height:1.15;letter-spacing:-0.01em;
  margin-bottom:26px;
}

/* Price block - mirrors the package card (.pkg-card-price-*): grey "was"
   price with US + (i) tooltip, dark current price, green savings pill,
   then a quiet expiry line in place of the old red urgency banner. */
.pkg-price-block{margin-bottom:16px;}
.pkg-price-block .pkg-price-main{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin-bottom:0;}
.pkg-price-block .pkg-price-main > span.pkg-price-was{
  display:inline-flex;align-items:center;gap:6px;margin:0 0 6px;
  font-family:var(--font-body);font-size:15px;font-weight:500;color:#9AA2AE;
}
.pkg-price-block .pkg-price-was del{color:#9AA2AE;}
.pkg-price-block .pkg-price-was del::after{content:' US';}
.pkg-price-block .pkg-price-main > span.pkg-price-current{
  font-family:var(--font-display);font-weight:700;line-height:1.1;color:#1B2430;margin:0 0 12px;
}
.pkg-price-block .pkg-price-main > span.pkg-savings-chip{
  display:inline-block;margin:0;padding:6px 12px;border-radius:999px;
  background:#E8F6EE;color:#0B7A4B;font-family:var(--font-body);font-size:14px;font-weight:700;
}
.pkg-price-expiry{
  margin:16px 0 0;font-family:var(--font-body);font-size:14px;line-height:1.4;color:#6E7785;
}
.pkg-price-expiry span{color:var(--dv-red);font-weight:700;}

.pkg-trust-strip{
  display:flex;flex-wrap:wrap;gap:9px 18px;margin:16px 0 22px;padding:14px 16px;
  background:var(--dv-blue-tint);border-radius:12px;
}
.pkg-trust-strip-standalone{
  justify-content:center;margin:20px 0 var(--dv-space-4);
}
.pkg-trust-item{display:flex;align-items:center;gap:6px;font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--dv-blue-dark);}
.pkg-trust-item i.dvi{
  color:#fff;background:var(--dv-blue);width:15px;height:15px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:8px;font-style:normal;flex:none;
}

.pkg-included-block{margin-bottom:16px;}
.pkg-included-heading{font-family:var(--font-display);font-size:16.5px;font-weight:700;color:var(--dv-ink);margin-bottom:16px;margin-top:2.5rem;}

.pkg-included-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.pkg-included-card{
  display:flex;align-items:center;gap:12px;background:#F8FAFD;border:1px solid var(--dv-line);
  border-radius:14px;padding:14px 16px;transition:border-color 0.15s ease, background 0.15s ease;
}
.pkg-included-card:hover{border-color:var(--dv-blue);background:var(--dv-blue-tint);}
.pkg-included-card-icon{
  flex:none;width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--dv-line);
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
.pkg-included-card-text{font-family:var(--font-body);font-size:13.5px;font-weight:600;color:var(--dv-ink);line-height:1.4;}
@media(max-width:640px){
  .pkg-included-cards{grid-template-columns:1fr;}
}
/* 2-column grid instead of a single tall stacked list — this is what was
   making the left column run far past the bottom of the blue form panel.
   Cuts the list's height roughly in half. */
.pkg-mobile-inline-cta{
  display:none;text-align:center;background:var(--dv-blue);color:#fff;font-family:var(--font-body);font-weight:700;
  font-size:14.5px;padding:14px;border-radius:999px;text-decoration:none;cursor:pointer;
}

/* --- right column: booking form, sticks on scroll on desktop --- */
.pkg-form-panel{
  grid-area:form;
  background:linear-gradient(135deg,var(--dv-blue),var(--dv-blue-dark));
  padding:28px 30px;display:flex;flex-direction:column;gap:10px;color:#fff;
  position:sticky;top:20px;align-self:stretch;
  /* stretches to fill its grid area (both rows) so the blue panel's
     bottom edge lines up with the bottom of the left column instead of
     ending early — the panel's own content stays top-aligned via the
     wrapper below, the extra space just pads out under the privacy line */
  justify-content:flex-start;
}
.pkg-clinic-name{font-family:var(--font-display);font-size:18px;font-weight:700;text-align:center;color:var(--dv-yellow);margin-bottom:2px;}
.pkg-form-heading{font-family:var(--font-display);font-size:18px;font-weight:700;text-align:center;color:#fff;margin-bottom:2px;}
.pkg-clinic-location{font-family:var(--font-body);font-size:12.5px;text-align:center;color:rgba(255,255,255,0.85);display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:4px;}
.pkg-form-divider{display:block;height:1px;background:rgba(255,255,255,0.2);margin:6px 0 14px;}
.pkg-form-privacy{font-family:var(--font-body);font-size:11.5px;text-align:center;color:rgba(255,255,255,0.75);margin-top:10px;}

.pkg-form-panel input[type="text"],
.pkg-form-panel input[type="email"],
.pkg-form-panel input[type="tel"],
.pkg-form-panel select{
  width:100%;border:none;border-radius:11px;padding:12px 14px;font-family:var(--font-body);
  font-size:13.5px;color:var(--dv-ink);background:#fff;box-sizing:border-box;
}
.pkg-form-panel input[type="submit"],
.pkg-form-panel button[type="submit"]{
  background:var(--dv-red);color:#fff;border:none;border-radius:999px;padding:13px;
  font-family:var(--font-body);font-weight:700;font-size:14px;cursor:pointer;
  box-shadow:0 10px 24px rgba(225,54,43,0.35);transition:transform 0.15s ease;
}
.pkg-form-panel input[type="submit"]:hover,
.pkg-form-panel button[type="submit"]:hover{transform:translateY(-2px);}

/* The booking form itself (mtc-form-wrapper) ships its own <style> block
   inline in the template with 12px field spacing and a 25px bottom margin
   on the submit button — that's what was making the panel taller than it
   needs to be. These overrides win because they're more specific than the
   inline block's plain-class selectors. */
.pkg-form-panel .mtc-form-wrapper .title{font-size:19px;margin-bottom:10px;}
.pkg-mtcform-wrapper-custom-copy .mtc-form-wrapper .title{display:none;}
.pkg-form-panel .mtc-form-wrapper .form-group{margin-bottom:8px;}
.pkg-form-panel .mtc-form-wrapper input[type="submit"]{margin:4px auto 6px auto;}

.pkg-hero-grid #form-overlay.form-overlay{
  grid-column:1 / -1;grid-row:1 / -1;
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(21,58,122,0.85);z-index:5;
}
.pkg-hero-grid #form-overlay.form-overlay.active,
.pkg-hero-grid #form-overlay.form-overlay.show,
.pkg-hero-grid #form-overlay.form-overlay.is-active{display:flex;}

/* --- additional content, testimonials, related --- */
.pkg-additional-content{max-width:760px;margin:32px auto;font-family:var(--font-body);font-size:15px;line-height:1.75;color:var(--dv-ink);padding:0 28px;}
.pkg-additional-content p{margin-bottom:15px;}

.pkg-testimonials-wrapper,
.pkg-related-wrapper{max-width:1240px;margin:52px auto;padding:0 28px;}
.pkg-testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

/* --- sticky mobile CTA (separate from the desktop sticky form panel) --- */
.pkg-sticky-cta{
  position:fixed;bottom:0;left:0;right:0;z-index:999;
  background:#fff;border-top:1px solid var(--dv-line);box-shadow:0 -8px 24px rgba(0,0,0,0.08);
  padding:14px 20px;display:none;align-items:center;justify-content:space-between;gap:16px;
}
.pkg-sticky-cta-price{display:flex;align-items:baseline;gap:8px;font-family:var(--font-body);}
.pkg-sticky-current{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--dv-red);}
.pkg-sticky-was{font-size:13px;color:var(--dv-gray-light);}
.pkg-sticky-btn{
  background:var(--dv-blue);color:#fff;font-family:var(--font-body);font-weight:700;font-size:14px;
  padding:12px 26px;border-radius:999px;text-decoration:none;white-space:nowrap;cursor:pointer;
}

@media(max-width:900px){

.pkg-search-btn {
    
    width: 100%;
    justify-content: center;
    margin-top: 20px;
}

  .pkg-hero-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "top"
	  "bottom"
      "form";
  }
  .pkg-form-panel{position:static;align-self:auto;}
  .pkg-details-top{padding:22px 22px 0;}
  .pkg-details-bottom{padding:0 22px 22px;}
  .pkg-mobile-inline-cta{display:none;margin-top:6px;}
  .pkg-sticky-cta{display:flex;}
}
@media(max-width:768px){
  .pkg-testimonials-grid{grid-template-columns:1fr;}
  .pkg-title{font-size:21px;}
  .pkg-price-current{font-size:26px;}
}

@media(min-width:768px){
.pkg-hero-card .pkg-price-current{
font-size: 44px;
}}
/* ==========================================================================
   Single package additions
   ========================================================================== */

.package-additional-content{
  max-width:760px;margin:32px auto;font-family:var(--font-body);font-size:15px;line-height:1.75;color:var(--dv-ink);
}
.package-additional-content p{margin-bottom:15px;}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media(max-width:1024px){
  .pkg-country-grid{grid-template-columns:repeat(3,1fr);}
  .pkg-card-grid{grid-template-columns:repeat(3,1fr);}
}

@media(max-width:768px){
  /* Rows are compact now (not tall gradient tiles), so a simple 2-column
     grid works fine on mobile — no need for horizontal scroll-snap here
     anymore, that was only necessary when each tile was ~170px tall. */
  .pkg-country-grid{grid-template-columns:repeat(2,1fr);}

  .pkg-card-grid{grid-template-columns:repeat(2,1fr);}
  .pkg-benefits-grid{grid-template-columns:1fr;}
  .pkg-hero h1.page-heading{font-size:28px;}
  .pkg-country-h1{font-size:28px;}
  .pkg-search{flex-direction:column;border-radius:20px;}
  .pkg-select{width:100%;border-right:none;border-bottom:1px solid var(--dv-line);}
  .pkg-hero{padding:48px 20px 36px;}
  .pkg-benefits{padding:36px 20px;}
  .pkg-accordion-trigger{padding:16px 18px;gap:10px;}
  .pkg-accordion-title{font-size:15.5px;}
  .pkg-accordion-count{font-size:11.5px;padding:3px 10px;}
  .pkg-accordion-panel .pkg-card-grid{padding:4px 18px 18px;grid-template-columns:1fr;}

  /* No accordion on mobile — tapping to expand/collapse each city adds
     friction on a small screen where you're mostly scrolling anyway.
     Every panel stays open regardless of the JS is-open state; the
     trigger row is now just a section header, not a toggle. */
  .pkg-accordion-panel{grid-template-rows:1fr !important;}
  .pkg-accordion-trigger{cursor:default;}
  .pkg-accordion-icon{display:none;}
  .pkg-procedure-filter-wrap{margin-bottom:20px;padding-bottom:18px;}
  .pkg-procedure-filter{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    margin:0 -20px;padding:0 20px 4px;
  }
  .pkg-procedure-filter::-webkit-scrollbar{display:none;}
  .pkg-procedure-chip{padding:10px 16px;font-size:13px;}
  /* arrows are fiddly to tap accurately on mobile — native swipe/scroll
     on the carousel track works better there, so hide the buttons and
     let touch scrolling do the job */
  .pkg-carousel-wrap{padding:4px 18px 18px;}
  .pkg-carousel-arrow{display:none;}
  .pkg-carousel .card-package{flex-basis:78vw;max-width:300px;}
  .pkg-country-header{padding:4px 0 28px;}
}

@media(max-width:480px){
  .pkg-country-grid{grid-template-columns:1fr;}
  .pkg-card-grid{grid-template-columns:1fr;}
}


/* ==========================================================================
   DV Package Finder — Full Screen Quiz
   File: dv-package-finder-fullscreen.css
   Namespace: .pkgq-*

   Enqueue AFTER dv-packages-ecosystem.css (same handle dependency
   pattern already used for dv-package-card.css). Reuses the site's
   existing --dv-* brand tokens — no new palette introduced, only the
   two local font vars below (Poppins/Inter are already pulled in by
   dv-packages-ecosystem.css's @import, so this file doesn't repeat it).

   Replaces: templates/partials/package-quiz.php's old small modal.
   The new markup is a genuine full-viewport takeover (Typeform-style):
   a 4-question flow with a persistent progress bar, a live "trip
   summary" rail on the right (the boarding-pass motif — the one
   deliberate signature element, tying the UI back to "vacation"),
   and a fully custom searchable combobox for country selection
   (flags + live count + keyboard nav) replacing the old plain
   <select>. See dv-package-finder-fullscreen.php for the markup/logic
   this file styles, and preview.html for a standalone clickable demo.
   ========================================================================== */

/* ============================================================
   PACKAGE FINDER — FULL SCREEN QUIZ
   Namespace: .pkgq-*
   Drop-in companion to dv-packages-ecosystem.css — reuses the
   same --dv-* brand tokens already defined site-wide.
   ============================================================ */

.pkgq-launch{
  --pf-font-d:'Poppins',var(--font-display,sans-serif);
  --pf-font-b:'Inter',var(--font-body,sans-serif);
  background:linear-gradient(115deg,#003D73 0%,var(--dv-blue) 55%,#0A5FC4 100%);
  color:#fff;text-align:left;padding:0;border-radius:28px;
  position:relative;overflow:hidden;font-family:var(--pf-font-b);
  display:grid;grid-template-columns:1.3fr 1fr;align-items:stretch;
  box-shadow:0 24px 60px rgba(0,61,115,0.28);
}
.pkgq-launch::before{
  content:'';position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 70%);
  top:-160px;right:-60px;
}
.pkgq-launch::after{
  content:'';position:absolute;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle, rgba(243,28,28,0.35) 0%, rgba(243,28,28,0) 70%);
  bottom:-100px;left:15%;
}
.pkgq-launch-text{position:relative;z-index:1;padding:44px 40px;}
.pkgq-launch-eyebrow{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.3);
  font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;margin-bottom:18px;
}
.pkgq-launch h2{
  position:relative;z-index:1;font-family:var(--pf-font-d);font-size:clamp(24px,2.6vw,32px);
  font-weight:600;line-height:1.18;margin:0 0 12px;letter-spacing:-0.01em;
}
.pkgq-launch p{position:relative;z-index:1;font-size:15px;color:rgba(255,255,255,.85);max-width:420px;margin:0 0 26px;line-height:1.55;}
.pkgq-launch-btn{
  position:relative;z-index:1;background:var(--dv-red);color:#fff;border:none;
  font-family:var(--pf-font-b);font-weight:700;font-size:15.5px;padding:17px 34px;
  border-radius:999px;cursor:pointer;box-shadow:0 12px 28px rgba(243,28,28,.4);
  transition:transform .15s ease, box-shadow .15s ease;display:inline-flex;align-items:center;gap:10px;
  animation:pkgq-launch-pulse 2.6s ease-in-out infinite;
}
.pkgq-launch-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 34px rgba(243,28,28,.5);}
.pkgq-launch-btn svg{width:16px;height:16px;}
@keyframes pkgq-launch-pulse{
  0%,100%{box-shadow:0 12px 28px rgba(243,28,28,.4);}
  50%{box-shadow:0 12px 32px rgba(243,28,28,.65);}
}
.pkgq-launch-reassure{
  position:relative;z-index:1;display:flex;align-items:center;gap:8px;margin-top:16px;
  font-size:12.5px;color:rgba(255,255,255,.7);
}
.pkgq-launch-reassure svg{width:14px;height:14px;flex:none;}

/* ---------- decorative visual side — desktop only ---------- */
.pkgq-launch-visual{
  position:relative;display:none;align-items:center;justify-content:center;padding:32px;
  background:rgba(255,255,255,0.05);border-left:1px solid rgba(255,255,255,0.12);
}
.pkgq-launch-visual-stack{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;width:100%;max-width:220px;}
.pkgq-launch-visual-card{
  background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.18);border-radius:14px;
  padding:12px 14px;display:flex;align-items:center;gap:10px;backdrop-filter:blur(6px);
}
.pkgq-launch-visual-card:nth-child(2){margin-left2:22px;background:rgba(255,255,255,0.16);}
.pkgq-launch-visual-icon{
  width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.2);
  display:flex;align-items:center;justify-content:center;flex:none;font-size:14px;
}
.pkgq-launch-visual-label{font-size:12.5px;font-weight:600;color:#fff;}

@media(min-width:820px){
  .pkgq-launch-visual{display:flex;}
}
@media(max-width:819px){
  .pkgq-launch{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .pkgq-launch-text{padding:32px 24px;}
}

/* ---------- full screen root ---------- */
.pkgq{
  --pf-font-d:'Poppins',var(--font-display,sans-serif);
  --pf-font-b:'Inter',var(--font-body,sans-serif);
  position:fixed;inset:0;z-index:10000;
  background:#F6F8FC;
  opacity:0;visibility:hidden;
  transition:opacity .32s ease;
  font-family:var(--pf-font-b);
  display:flex;flex-direction:column;
}
.pkgq.is-open{opacity:1;visibility:visible;}
.pkgq-veil-in{animation:pkgq-fade .32s ease both;}
@keyframes pkgq-fade{from{opacity:0;}to{opacity:1;}}

/* top bar: close + progress */
.pkgq-topbar{
  flex:none;display:flex;align-items:center;gap:20px;
  padding:20px 28px;background:#fff;border-bottom:1px solid var(--dv-line);
}
.pkgq-close{
  flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--dv-line);
  background:#fff;color:var(--dv-gray);font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .15s ease;
}
.pkgq-close:hover{background:var(--dv-blue-tint);color:var(--dv-blue);border-color:var(--dv-blue);}

.pkgq-progress{flex:1;display:flex;align-items:center;gap:8px;max-width:640px;}
.pkgq-progress-node{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;
}
.pkgq-progress-track{width:100%;height:4px;border-radius:4px;background:var(--dv-line);position:relative;overflow:hidden;}
.pkgq-progress-track::after{
  content:'';position:absolute;inset:0;background:var(--dv-blue);border-radius:4px;
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.pkgq-progress-node.is-done .pkgq-progress-track::after,
.pkgq-progress-node.is-active .pkgq-progress-track::after{transform:scaleX(1);}
.pkgq-progress-node.is-active .pkgq-progress-track::after{background:var(--dv-blue);}
.pkgq-progress-label{
  font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--dv-gray-light);
  text-transform:uppercase;display:none;
}
@media(min-width:760px){.pkgq-progress-label{display:block;}}
.pkgq-progress-node.is-active .pkgq-progress-label{color:var(--dv-blue-dark);}
.pkgq-progress-node.is-done .pkgq-progress-label{color:var(--dv-gray);}
.pkgq-progress-count{flex:none;font-size:12.5px;font-weight:700;color:var(--dv-gray);}

/* body: split — question column + boarding-pass summary column.
   NOTE: flex:1 removed on desktop — that was forcing this box to
   fill the ENTIRE remaining viewport height even when the question
   content was short, which pushed the nav bar (right after this)
   far below the actual options. Capped to a sane max-height instead
   and the whole topbar+body+nav stack is centered vertically, so
   the Continue button sits close to the questions regardless of
   how tall the screen is. */
.pkgq-body{min-height:0;display:grid;grid-template-columns:1fr 380px;overflow:hidden;}
@media(min-width:901px){
  .pkgq{justify-content:center;}
  .pkgq-body{flex:0 1 auto;max-height:min(600px, calc(100vh - 220px));}
}
@media(max-width:900px){
  .pkgq-body{flex:1;grid-template-columns:1fr;}
}

.pkgq-main{overflow-y:auto;padding:0;display:flex;flex-direction:column;}
.pkgq-scroller{flex:0 1 auto;display:flex;flex-direction:column;justify-content:flex-start;padding:48px 56px;max-width:680px;width:100%;margin:0 auto;}
@media(max-width:640px){.pkgq-scroller{padding:32px 22px 24px;flex:1;}}

.pkgq-kicker{font-size:12.5px;font-weight:700;color:var(--dv-blue);letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px;}
.pkgq-question{font-family:var(--pf-font-d);font-size:clamp(24px,3.4vw,34px);font-weight:700;color:var(--dv-ink);line-height:1.2;margin:0 0 8px;}
.pkgq-subtext{font-size:15px;color:var(--dv-gray);margin:0 0 30px;line-height:1.55;}

/* panels / step transition */
.pkgq-panel{display:none;animation:pkgq-slide-up .38s cubic-bezier(.16,1,.3,1) both;}
.pkgq-panel.is-active{display:block;}
@keyframes pkgq-slide-up{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){.pkgq-panel{animation:none;}}

/* choice cards (procedure grid + yes/no) */
.pkgq-choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.pkgq-choice-grid.pkgq-choice-grid--single{grid-template-columns:1fr;}
@media(max-width:520px){.pkgq-choice-grid{grid-template-columns:1fr;}}

.pkgq-choice{
  display:flex;align-items:center;gap:14px;text-align:left;
  background:#fff;border:1.5px solid var(--dv-line);border-radius:16px;
  padding:16px 18px;cursor:pointer;transition:all .15s ease;font-family:var(--pf-font-b);
}
.pkgq-choice:hover{border-color:var(--dv-blue);box-shadow:0 6px 18px rgba(0,91,170,.10);transform:translateY(-1px);}
.pkgq-choice.is-selected{border-color:var(--dv-blue);background:var(--dv-blue-tint);box-shadow:0 6px 18px rgba(0,91,170,.14);}
.pkgq-choice-icon{
  flex:none;width:42px;height:42px;border-radius:12px;background:var(--dv-blue-tint);color:var(--dv-blue);
  display:flex;align-items:center;justify-content:center;font-size:19px;transition:all .15s ease;
}
.pkgq-choice.is-selected .pkgq-choice-icon{background:var(--dv-blue);color:#fff;}
.pkgq-choice-text{flex:1;min-width:0;}
.pkgq-choice-name{font-weight:700;font-size:14.5px;color:var(--dv-ink);display:block;}
.pkgq-choice-meta{font-size:12px;color:var(--dv-gray);display:block;margin-top:2px;}
.pkgq-choice-check{
  flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--dv-line);
  display:flex;align-items:center;justify-content:center;transition:all .15s ease;
}
.pkgq-choice.is-selected .pkgq-choice-check{background:var(--dv-blue);border-color:var(--dv-blue);}
.pkgq-choice-check svg{width:12px;height:12px;opacity:0;transform:scale(.5);transition:all .15s ease;}
.pkgq-choice.is-selected .pkgq-choice-check svg{opacity:1;transform:scale(1);}

/* ---------- top-3 match results (replaces the old single
   auto-redirect) — same visual language as .pkgq-choice above,
   with a package-count badge instead of the icon/checkmark ---------- */
.pkgq-results-list{display:flex;flex-direction:column;gap:10px;margin-top:20px;}
.pkgq-result-card{
  display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:left;
  background:#fff;border:1.5px solid var(--dv-line);border-radius:16px;
  padding:16px 18px;cursor:pointer;transition:all .15s ease;font-family:var(--pf-font-b);
}
.pkgq-result-card:hover{border-color:var(--dv-blue);box-shadow:0 6px 18px rgba(0,91,170,.10);transform:translateY(-1px);}
.pkgq-result-card.is-selected{border-color:var(--dv-blue);background:var(--dv-blue-tint);box-shadow:0 6px 18px rgba(0,91,170,.14);}
.pkgq-result-card img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none;}
.pkgq-result-name{flex:1;font-weight:700;font-size:14.5px;color:var(--dv-ink);}
.pkgq-result-count{
  flex:none;font-weight:700;font-size:12px;color:var(--dv-blue);
  background:var(--dv-blue-tint);padding:5px 13px;border-radius:20px;
}
.pkgq-result-card.is-selected .pkgq-result-count{background:var(--dv-blue);color:#fff;}
.pkgq-results-empty{font-family:var(--pf-font-b);font-size:13.5px;color:var(--dv-gray);text-align:center;margin-top:16px;}
.pkgq-results-empty a{color:var(--dv-blue);font-weight:600;}


/* ---------- searchable location combobox — the star component ---------- */
.pkgq-combo{position:relative;max-width:480px;}
.pkgq-combo-field{
  display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--dv-line);
  border-radius:16px;padding:14px 16px;cursor:text;transition:all .15s ease;
}
.pkgq-combo-field:hover{border-color:var(--dv-gray-light);}
.pkgq-combo.is-open .pkgq-combo-field{border-color:var(--dv-blue);box-shadow:0 0 0 4px rgba(0,91,170,.10);}
.pkgq-combo-flag{
  flex:none;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--dv-blue);background:var(--dv-blue-tint);overflow:hidden;
}
.pkgq-combo-flag img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;}
.pkgq-combo-input{
  flex:1;border:none;outline:none;font-family:var(--pf-font-b);font-size:15px;font-weight:600;
  color:var(--dv-ink);background:transparent;min-width:0;
}
.pkgq-combo-input::placeholder{color:var(--dv-gray-light);font-weight:500;}
.pkgq-combo-clear{
  flex:none;width:22px;height:22px;border:none;background:var(--dv-line);border-radius:50%;color:var(--dv-gray);
  font-size:13px;cursor:pointer;display:none;align-items:center;justify-content:center;
}
.pkgq-combo.has-value .pkgq-combo-clear{display:flex;}
.pkgq-combo-caret{flex:none;color:var(--dv-gray-light);transition:transform .2s ease;}
.pkgq-combo.is-open .pkgq-combo-caret{transform:rotate(180deg);}

.pkgq-combo-panel{
  position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--dv-line);
  border-radius:16px;box-shadow:0 20px 48px rgba(21,28,41,.16);z-index:20;
  max-height:340px;overflow-y:auto;padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .16s ease;
}
.pkgq-combo.is-open .pkgq-combo-panel{opacity:1;visibility:visible;transform:translateY(0);}

.pkgq-combo-group-label{
  font-size:11px;font-weight:700;color:var(--dv-gray-light);text-transform:uppercase;letter-spacing:.04em;
  padding:10px 12px 6px;
}
.pkgq-combo-option{
  display:flex;align-items:center;gap:12px;width:100%;border:none;background:none;text-align:left;
  padding:10px 12px;border-radius:11px;cursor:pointer;font-family:var(--pf-font-b);
}
.pkgq-combo-option:hover,
.pkgq-combo-option.is-highlighted{background:var(--dv-blue-tint);}
.pkgq-combo-option.is-selected{background:var(--dv-blue);}
.pkgq-combo-option.is-selected .pkgq-combo-opt-name,
.pkgq-combo-option.is-selected .pkgq-combo-opt-count{color:#fff;}
.pkgq-combo-opt-flag{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;background:var(--dv-blue-tint);overflow:hidden;}
.pkgq-combo-opt-flag img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;}
.pkgq-combo-opt-name{flex:1;font-size:14px;font-weight:600;color:var(--dv-ink);}
.pkgq-combo-opt-name mark{background:none;color:var(--dv-blue);font-weight:700;}
.pkgq-combo-opt-sub{display:block;font-size:11.5px;font-weight:500;color:var(--dv-gray);margin-top:1px;}
.pkgq-combo-option.is-selected .pkgq-combo-opt-sub{color:rgba(255,255,255,.8);}
.pkgq-combo-option.is-selected .pkgq-combo-opt-name mark{color:#fff;}
.pkgq-combo-opt-count{flex:none;font-size:11.5px;font-weight:700;color:var(--dv-gray);background:var(--dv-blue-tint);padding:3px 10px;border-radius:20px;}
.pkgq-combo-option.is-selected .pkgq-combo-opt-count{background:rgba(255,255,255,.22);}
.pkgq-combo-empty{padding:22px 14px;text-align:center;font-size:13.5px;color:var(--dv-gray);}

/* loading step */
.pkgq-loading{text-align:center;padding:40px 0;}
.pkgq-spinner{width:42px;height:42px;border-radius:50%;margin:0 auto 20px;border:4px solid var(--dv-line);border-top-color:var(--dv-blue);animation:pkgq-spin .8s linear infinite;}
@keyframes pkgq-spin{to{transform:rotate(360deg);}}

/* review step */
.pkgq-review-list{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;}
.pkgq-review-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:#fff;border:1px solid var(--dv-line);border-radius:14px;}
.pkgq-review-label{font-size:12px;font-weight:700;color:var(--dv-gray-light);text-transform:uppercase;letter-spacing:.03em;}
.pkgq-review-value{font-size:14.5px;font-weight:700;color:var(--dv-ink);}
.pkgq-review-edit{font-size:12.5px;font-weight:700;color:var(--dv-blue);background:none;border:none;cursor:pointer;}
.pkgq-review-edit:hover{text-decoration:underline;}
.pkgq-cta-btn{
  background:var(--dv-red);color:#fff;border:none;font-family:var(--pf-font-b);font-weight:700;font-size:15.5px;
  padding:16px 32px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  gap:10px;white-space:nowrap;line-height:1.2;box-shadow:0 10px 24px rgba(225,54,43,.28);transition:transform .15s ease,box-shadow .15s ease;
}
.pkgq-cta-btn svg{flex:none;width: 20px;}
.pkgq-cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(225,54,43,.34);}
.pkgq-cta-btn:active{transform:translateY(0);}
@media(max-width:480px){
  .pkgq-cta-btn{width:100%;padding:16px 24px;font-size:15px;}
}

/* bottom nav */
.pkgq-nav{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 56px;border-top:1px solid var(--dv-line);background:#fff;
}
@media(max-width:640px){.pkgq-nav{padding:14px 22px;}}
.pkgq-nav-back{
  font-family:var(--pf-font-b);font-weight:700;font-size:14px;color:var(--dv-gray);background:none;
  border:none;cursor:pointer;display:flex;align-items:center;gap:6px;padding:10px 6px;
}
.pkgq-nav-back:hover{color:var(--dv-ink);}
.pkgq-nav-back[hidden]{visibility:hidden;}
.pkgq-nav-next{
  font-family:var(--pf-font-b);font-weight:700;font-size:14.5px;color:#fff;background:var(--dv-blue);
  border:none;border-radius:999px;padding:13px 30px;cursor:pointer;display:flex;align-items:center;gap:8px;
  transition:all .15s ease;
}
.pkgq-nav-next:hover:not(:disabled){background:var(--dv-blue-dark);}
.pkgq-nav-next:disabled{background:var(--dv-line);color:var(--dv-gray-light);cursor:not-allowed;}
.pkgq-nav-hint{font-size:12px;color:var(--dv-gray-light);display:none;}
@media(min-width:760px){.pkgq-nav-hint{display:block;}}

/* Anchor point inside each panel where the Continue button gets
   physically relocated to (via JS in render()) — keeps it right
   after that panel's own content instead of stuck in a footer bar
   that can end up far away on tall screens with short content. */
.pkgq-inline-next-anchor{margin-top:28px;}
.pkgq-inline-next-anchor .pkgq-nav-next{width:auto;min-width:180px;}

/* ---------- boarding-pass summary rail ---------- */
.pkgq-rail{
  background:linear-gradient(165deg,var(--dv-blue),var(--dv-blue-dark));
  color:#fff;padding:36px 32px;display:flex;flex-direction:column;overflow-y:auto;position:relative;
}
@media(max-width:900px){.pkgq-rail{display:none;}}
.pkgq-rail::before{content:'';position:absolute;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.05);top:-100px;right:-80px;}
.pkgq-pass-eyebrow{position:relative;z-index:1;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-bottom:6px;}
.pkgq-pass-title{position:relative;z-index:1;font-family:var(--pf-font-d);font-size:20px;font-weight:700;margin:0 0 26px;}

.pkgq-pass-field{position:relative;z-index:1;padding:16px 0;}
.pkgq-pass-field + .pkgq-pass-field{border-top:1px dashed rgba(255,255,255,.22);}
.pkgq-pass-field-label{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:6px;}
.pkgq-pass-field-value{font-family:var(--pf-font-d);font-size:16.5px;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px;}
.pkgq-pass-field-value.is-placeholder{color:rgba(255,255,255,.4);font-family:var(--pf-font-b);font-weight:600;font-size:14.5px;}

.pkgq-pass-stub{position:relative;z-index:1;margin-top:auto;padding-top:26px;}
.pkgq-pass-perf{
  position:relative;height:0;border-top:2px dashed rgba(255,255,255,.28);margin:8px 0 24px;
}
.pkgq-pass-perf::before,.pkgq-pass-perf::after{
  content:'';position:absolute;top:-11px;width:22px;height:22px;border-radius:50%;background:#F6F8FC;
}
.pkgq-pass-perf::before{left:-32px;}
.pkgq-pass-perf::after{right:-32px;}
.pkgq-pass-note{position:relative;z-index:1;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.7);}
.pkgq-pass-badge{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:999px;
  padding:7px 14px;font-size:12px;font-weight:700;
}

/* focus visibility */
.pkgq :is(button,input,[tabindex]):focus-visible{outline:2.5px solid var(--dv-blue);outline-offset:2px;}


.pkgq-rail {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pkgq-rail::-webkit-scrollbar {
  display: none;
}

.grid-packages-country .pkgq-launch{
display:none;
}

.pkg-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 26px;
    margin-bottom: 50px;
}

.pkg-testimonials-wrapper .section-heading{
grid-template-columns: 1fr;}
/* ==========================================================================
   Merged in from the earlier build round — these support markup that
   templates still reference (procedure tabs, country page's view-all
   card, single-package bullet list)
   ========================================================================== */

.pkg-procedure-tabs{margin-bottom:28px;padding-bottom:22px;border-bottom:1px solid var(--dv-line);}
.pkg-procedure-tabs-label{
  display:block;font-family:var(--pf-font-b);font-weight:700;font-size:12.5px;letter-spacing:0.03em;
  text-transform:uppercase;color:var(--dv-gray);margin-bottom:12px;
}
.pkg-procedure-tabs-row{display:flex;gap:10px;flex-wrap:wrap;}
.pkg-procedure-tab{
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;border:1.5px solid var(--dv-line);border-radius:999px;
  padding:9px 16px;font-family:var(--pf-font-b);font-weight:600;font-size:13px;color:var(--dv-ink);
  text-decoration:none;transition:all 0.15s ease;
}
.pkg-procedure-tab:hover{border-color:var(--dv-blue);background:var(--dv-blue-tint);color:var(--dv-blue-dark);}
.pkg-procedure-tab-top{background:var(--dv-blue-tint);border-color:var(--dv-blue);color:var(--dv-blue-dark);}

.pkg-procedure-tab-count{
  font-size:11px;font-weight:700;color:var(--dv-blue);background:var(--dv-blue-tint);
  padding:2px 9px;border-radius:20px;
}
@media(max-width:640px){
  .pkg-procedure-tabs-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 20px 4px;}
  .pkg-procedure-tabs-row::-webkit-scrollbar{display:none;}
  .pkg-procedure-tab{white-space:nowrap;}
}

.pkg-city-view-all-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;
  border:1px solid var(--dv-line);border-radius:var(--dv-radius-md);text-decoration:none;padding:22px 18px;
  background:#fff;transition:border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.pkg-city-view-all-card:hover{border-color:var(--dv-blue);box-shadow:var(--dv-shadow-sm);transform:translateY(-2px);}
.pkg-city-view-all-icon{
  width:38px;height:38px;border-radius:50%;background:var(--dv-blue-tint);color:var(--dv-blue);
  display:flex;align-items:center;justify-content:center;transition:transform 0.15s ease;
}
.pkg-city-view-all-icon svg{width:15px;height:15px;}
.pkg-city-view-all-card:hover .pkg-city-view-all-icon{transform:translateX(3px);}
.pkg-city-view-all-text{font-family:var(--pf-font-h,var(--pf-font-b));font-weight:700;font-size:13.5px;color:var(--dv-ink);line-height:1.4;}
.pkg-city-view-all-count{
  font-family:var(--pf-font-b);font-size:11px;font-weight:600;color:var(--dv-blue);
  background:var(--dv-blue-tint);padding:3px 11px;border-radius:20px;
}
/* No mobile overrides needed — this card is hidden entirely on
   mobile (see max-width:640px rule above), replaced by the separate
   .pkg-view-all-mobile-btn outline button instead. */

/* ==========================================================================
   Country+procedure page — H2-per-city sections (replaces the old
   tab-row navigation, which is now redundant with the country page's
   own "Browse by Procedure" links).
   ========================================================================== */
.pkg-procedure-city-section{border-top:1px solid var(--dv-line);padding-top:28px;margin-bottom:50px;}
.pkg-procedure-city-section:first-child{border-top:none;padding-top:0;}
.pkg-procedure-city-h2{
  font-family:var(--pf-font-b, var(--font-display));font-weight:700;font-size:19px;color:var(--dv-ink);
  margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--dv-line);
}

/* ==========================================================================
   Single Package Spotlight — shown instead of a sparse 1-card grid
   whenever a city/country/procedure grouping has exactly one match.
   Deliberately more prominent than a standard grid card, since it's
   the only content in that section.
   ========================================================================== */
.pkg-spotlight{
  position:relative;background:linear-gradient(135deg,var(--dv-blue-tint) 0%,#fff 60%);
  border:1.5px solid var(--dv-blue);border-radius:16px;
  padding:20px;max-width:400px;box-shadow:0 10px 26px rgba(0,91,170,0.12);
}
.pkg-spotlight-badge{
  display:inline-flex;align-items:center;gap:5px;background:var(--dv-blue);color:#fff;
  font-family:var(--pf-font-b, var(--font-body));font-weight:700;font-size:10.5px;letter-spacing:0.02em;
  padding:4px 12px;border-radius:20px;margin-bottom:10px;
}
.pkg-spotlight-signals{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.pkg-spotlight-signal{
  font-family:var(--pf-font-b, var(--font-body));font-size:10px;font-weight:700;
  background:var(--dv-ink);color:#fff;padding:3px 10px;border-radius:20px;
}
.pkg-spotlight-signal-amber{background:rgba(250,166,26,0.16);color:var(--dv-amber);}

.pkg-spotlight-title{
  font-family:var(--pf-font-h, var(--font-display));font-weight:700;font-size:17px;color:var(--dv-ink);
  margin:0 0 4px;line-height:1.25;
}
.pkg-spotlight-location{
  display:flex;align-items:center;gap:5px;font-family:var(--pf-font-b, var(--font-body));
  font-size:12px;color:var(--dv-gray);margin:0 0 12px;
}

.pkg-spotlight-price-block{background:#fff;border-radius:12px;padding:12px 14px;margin-bottom:12px;box-shadow:0 3px 10px rgba(0,0,0,0.06);}
.pkg-spotlight-price-row{display:flex;align-items:baseline;gap:9px;margin-bottom:6px;flex-wrap:wrap;}
.pkg-spotlight-price-current{font-family:var(--pf-font-h, var(--font-display));font-size:22px;font-weight:700;color:var(--dv-red);}
.pkg-spotlight-price-was{font-family:var(--pf-font-b, var(--font-body));font-size:13px;color:var(--dv-gray-light);}
.pkg-spotlight-savings{
  display:inline-block;background:var(--dv-red);color:#fff;font-family:var(--pf-font-b, var(--font-body));
  font-weight:700;font-size:11px;padding:4px 12px;border-radius:20px;
}

.pkg-spotlight-list{list-style:none;margin:0 0 14px;padding:0;}
.pkg-spotlight-list li{
  display:flex;align-items:flex-start;gap:6px;font-family:var(--pf-font-b, var(--font-body));
  font-size:12.5px;color:var(--dv-ink);margin-bottom:5px;line-height:1.4;
}
.pkg-spotlight-list li::before{content:'✓';flex:none;color:var(--dv-blue);font-weight:700;font-size:11px;}

.pkg-spotlight-cta{
  display:block;text-align:center;background:var(--dv-blue);color:#fff;text-decoration:none;
  font-family:var(--pf-font-b, var(--font-body));font-weight:700;font-size:13.5px;
  padding:12px;border-radius:999px;box-shadow:0 6px 14px rgba(0,91,170,0.28);
  transition:transform 0.15s ease, background 0.15s ease;
}
.pkg-spotlight-cta:hover{background:var(--dv-blue-dark);transform:translateY(-2px);color: white;}

@media(max-width:640px){
  .pkg-spotlight{padding:16px;max-width:100%;}
  .pkg-spotlight-title{font-size:16px;}
  .pkg-spotlight-price-current{font-size:20px;}
}


.pkg-card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0px;
}

.pkg-card-grid > * {
    flex: 0 0 280px;
    width: 280px;
}

.pkg-card-grid .card-discount {
    margin: 5px;
  }
/* "View All" button below each package card row (same .view-all button
   as the home page) — tighter spacing to suit the listing sections. */
.pkg-city-section .view-all,
.pkg-procedure-city-section .view-all{
  margin:8px auto 32px;padding:0.625rem 3rem;
}
@media(max-width:640px){
  .pkg-city-section .view-all,
  .pkg-procedure-city-section .view-all{margin:4px auto 24px;padding:0.625rem 2.5rem;}
}

/* Mobile: stack cards in a centered column instead of a swipe row */
@media only screen and (max-width: 767px) {
  body .pkg-city-card-row {
    display:flex;flex-flow:column;align-items:center;
    overflow:visible;scroll-snap-type:none;margin:0 0 16px;padding:0;
  }
  body .pkg-city-card-slot {
    flex:0 0 auto;width:100%;max-width:290px;
  }
}

/* Desktop-only part of the "View All ..." button text */
.is_desktop{display:none;}
@media(min-width:768px){
  .is_desktop{display:inline;}
}
.pkgq-combo-opt-name small{color:var(--dv-gray-light);font-size:.85em;margin-left:4px;}