/* ============================================================
   HTG, Countries marquee (D3b)
   Sits inside the services section, directly below Travel Insurance.
   Single horizontal line, continuous scroll, 3D tilt on hover,
   emoji flag + country name + optional tagline.
   Performance: animations pause while scrolling and offscreen
   (hooks into D2's html[data-scrolling="1"] attribute).
   ============================================================ */

.htg-countries {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.25rem, 3vw, 2rem) 0;
  position: relative;
  overflow: hidden;
  contain: layout paint;
}

.htg-countries__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(1rem, 2vw, 1.5rem);
  padding: 0 1rem;
}
.htg-countries__eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 0.6rem;
}
:root[data-theme="light"] .htg-countries__eyebrow,
:root:not([data-theme]) .htg-countries__eyebrow {
  border-color: rgba(34, 85, 41, 0.18);
}
.htg-countries__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #FFD302;
  box-shadow: 0 0 10px #FFD302;
}
.htg-countries__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.35rem, 3.2vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
.htg-countries__title em {
  font-style: italic;
  background: linear-gradient(92deg, #00C2CB 0%, #FFD302 60%, #EF9623 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.htg-countries__sub {
  margin-top: 0.55rem;
  font-size: 0.95rem;
  opacity: 0.78;
  line-height: 1.5;
}

/* Edge fades */
.htg-countries__track-wrap {
  position: relative;
  overflow: hidden;
}
.htg-countries__track-wrap::before,
.htg-countries__track-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.htg-countries__track-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-primary, #0B1C11), transparent);
}
.htg-countries__track-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-primary, #0B1C11), transparent);
}
:root[data-theme="light"] .htg-countries__track-wrap::before,
:root:not([data-theme]) .htg-countries__track-wrap::before {
  background: linear-gradient(to right, var(--bg-primary, #F4FBF6), transparent);
}
:root[data-theme="light"] .htg-countries__track-wrap::after,
:root:not([data-theme]) .htg-countries__track-wrap::after {
  background: linear-gradient(to left, var(--bg-primary, #F4FBF6), transparent);
}

/* The scrolling track */
.htg-countries__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: clamp(0.75rem, 2vw, 1.2rem);
  width: max-content;
  padding: 0.5rem 0;
  /* MD1: infinite animation removed */ animation: none;
  /* MC1: will-change removed */
}
.htg-countries.is-paused .htg-countries__track,
.htg-countries:hover .htg-countries__track { animation-play-state: paused; }

/* MD1: @keyframes htgCountriesMarquee removed */

/* Card */
.htg-country {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-radius: 16px;
  min-width: 190px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  text-decoration: none;
  color: inherit;
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 280ms ease,
    box-shadow 320ms ease;
  position: relative;
  overflow: hidden;
}
:root[data-theme="light"] .htg-country,
:root:not([data-theme]) .htg-country {
  border-color: rgba(34, 85, 41, 0.16);
}

@media (hover: hover) and (min-width: 768px) {
  .htg-country {
    /* MC1: backdrop-filter removed */
    /* MC1: backdrop-filter removed */
  }
  .htg-country:hover {
    transform: translateY(-3px) rotateX(4deg) rotateY(-2deg);
    box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.45);
    border-color: rgba(0, 194, 203, 0.45);
  }
}

/* Inner hue glow on hover */
.htg-country::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(circle at 20% 0%, rgba(0,194,203,0.18), transparent 55%),
              radial-gradient(circle at 100% 100%, rgba(239,150,35,0.14), transparent 55%);
  transition: opacity 320ms ease;
  pointer-events: none;
}
.htg-country:hover::before { opacity: 1; }

.htg-country__flag {
  flex-shrink: 0;
  font-size: 1.8rem;
  line-height: 1;
  display: inline-block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
  position: relative; z-index: 1;
}
.htg-country__body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  position: relative; z-index: 1;
}
.htg-country__name {
  font-weight: 700;
  font-size: 0.96rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.htg-country__tag {
  font-size: 0.74rem;
  opacity: 0.7;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Scroll-pause (hooks D2) + reduced motion */
html[data-scrolling="1"] .htg-countries__track {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  .htg-countries__track {
/* ME1: animation removed */ animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding: 0 1rem;
  }
  .htg-country:hover { transform: none; }
}

@media (max-width: 560px) {
  .htg-country { min-width: 170px; padding: 0.6rem 0.85rem; gap: 0.6rem; }
  .htg-country__flag { font-size: 1.55rem; }
  .htg-country__name { font-size: 0.9rem; }
  .htg-country__tag  { font-size: 0.7rem; }
}

/* ============================================================
   HTG_COUNTRIES_PERF — final perf cleanup
   ============================================================ */

/* Kill the hover 3D rotation on each card (forces 3D context during marquee) */
.htg-country:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  border-color: rgba(0,194,203,0.45) !important;
}

/* Kill the ::before gradient overlay on every card */
.htg-country::before {
  display: none !important;
}

/* Kill drop-shadow filter on flags (filter is GPU-expensive on Android) */
.htg-country__flag {
  filter: none !important;
}

/* Containment: pause when off-screen */
.htg-countries {
  /* HTG_FIX: was content-visibility:auto — caused iOS blink on scroll-back */
  /* HTG_FIX: contain-intrinsic-size removed */
}

/* Simpler edge fade — single linear gradient mask instead of ::before/::after layers */
.htg-countries__track-wrap::before,
.htg-countries__track-wrap::after {
  width: 40px !important;
}

/* Reduce will-change to once */
.htg-countries .htg-countries__track {
  will-change: auto !important;
  transform: translateZ(0);
}

/* ============================================================
   HTG_COUNTRIES_PERF — final perf cleanup
   ============================================================ */

/* Kill the hover 3D rotation on each card (forces 3D context during marquee) */
.htg-country:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  border-color: rgba(0,194,203,0.45) !important;
}

/* Kill the ::before gradient overlay on every card */
.htg-country::before {
  display: none !important;
}

/* Kill drop-shadow filter on flags (filter is GPU-expensive on Android) */
.htg-country__flag {
  filter: none !important;
}

/* Containment: pause when off-screen */
.htg-countries {
  /* HTG_FIX: was content-visibility:auto — caused iOS blink on scroll-back */
  /* HTG_FIX: contain-intrinsic-size removed */
}

/* Simpler edge fade — single linear gradient mask instead of ::before/::after layers */
.htg-countries__track-wrap::before,
.htg-countries__track-wrap::after {
  width: 40px !important;
}

/* Reduce will-change to once */
.htg-countries .htg-countries__track {
  will-change: auto !important;
  transform: translateZ(0);
}