/* components/cg-filters.css — scoped hook for .rp-cg-filters (Country Guides home /country/, Figma 617:15633).
   Loaded via inc/kadence-cg-filters.php (presence-gated, EN + AR). Structural conversion only —
   markup unchanged. Figma 617:15930 country cards: ~16px radius + subtle shadow, photo
   top-corners rounded to match. (Base renders 8px radius, no shadow.) */

.rp-cg-filters .country_collection_item {
  border-radius: 16px !important;
  box-shadow: 0 2px 12px rgba(16, 30, 74, .05);
}

.rp-cg-filters .country_collection_item .country_img {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* 2026-06-23: the Products dropdown was removed from the rp-cg-filters pattern, so the
   search wrapper (shares .country-guide-product-filter-wrapper, flex:1) grabbed the freed
   row space and the region-tab swiper (capped at max-width:60%) clipped "South America"+.
   Desktop-only (>=992px, above the 991px mobile-stack breakpoint so the responsive
   flex:1 0 100% stacking stays intact): cap the search ~300px, let the tabs take the rest.
   Direction-agnostic, so it covers EN + AR from the base file. Scoped to .rp-cg-filters. */
@media (min-width: 992px) {
  /* !important: ties the specificity of `.country_guide_v2 .country-guide-product-filter-wrapper { flex:1 }` (migration.css), which otherwise wins on source order. */
  .rp-cg-filters .country-guide-product-filter-wrapper { flex: 0 1 300px !important; }
  /* Go-live: max-width:none let the region-tab wrapper grow to its full ~1268px content,
     pushing the search form ~183px OFF the right edge of the window. Make it take only the
     REMAINING row space (min-width:0 so it can shrink; overflow:hidden so the inner Swiper
     scrolls its pills instead of forcing the row wider). Keeps the search in view. */
  .rp-cg-filters .filter-links-wrapper-v3 { flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important; overflow: hidden !important; }
}

/* Go-live: remove the ~56px empty navy strip below the rounded hero image — the hero band
   `.dark-blue-bg-2` carried padding-bottom:56px, leaving a gap before the next section. */
.rp-cg-hero .rp-section.dark-blue-bg-2 { padding-bottom: 0 !important; }