body {
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
}

body.homepage {
  background: #ffffff;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

body.homepage .tl-nav {
  justify-content: center;
}

body.homepage .homepage-nav {
  justify-content: center;
  flex-wrap: wrap;
}

body.homepage .homepage-nav a {
  font-size: 16px;
}

.tl-nav {
  background:#c62828;
  color:white;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 20px;
  flex-wrap:wrap;
}

.nav-left, .nav-right {
  display:flex;
  align-items:center;
  gap:18px;
}

.nav-left a,
.nav-right a {
  color:white;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
}

.nav-blue {
  background:#1976d2;
  padding:6px 14px;
  border-radius:16px;
}

.nav-emergency {
  background:#b71c1c;
  padding:6px 14px;
  border-radius:16px;
}





@media (max-width:768px){
  
  .nav-left {
    overflow-x:auto;
    flex-wrap:nowrap;
  }
}

main {  padding: 20px 20px;
  text-align: center;
}

body.homepage .home-main {
  padding: 18px 20px 28px;
}

body.homepage .affiliate-footer {
  margin-top: auto;
}

.cta-button {
  display:inline-block;
  margin-top: 12px;
  background:#1976d2;
  color:white;
  padding:14px 28px;
  border-radius:28px;
  font-size:16px;
  font-weight:600;
  text-decoration:none;
  transition:0.2s ease;
}

.cta-button:hover {
  background:#155fa0;
}

.affiliate-footer {
  text-align:center;
  padding:30px 0;
  background:#f5f5f5;
}

.affiliate-logos {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.affiliate-logos a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.affiliate-logos img {
  height:28px;
  width:auto;
  object-fit:contain;
  display:block;
}

.anonamed-brand {
  font-size:14px;
}

/* CINEMATIC 75VH HERO – FULL GLOBE + PLANE + MOUNTAINS + SEA */




/* Compact homepage adjustment */
.welcome.compact {
  padding: 10px 20px 5px 20px;
}

.welcome.compact .cta {
  margin-top: 5px;
}


.hero h1 { margin-bottom: 20px; }
.hero .cta-button { margin-top: 20px; }

/* === DEVICE AGNOSTIC HERO FIX === */





/* === CLEAN HOMEPAGE HERO RESET === */
.homepage-banner {
    width: 100%;
    margin: 0;
    padding: 0;
}

.homepage-banner img {
    width: 100%;
    height: auto;
    display: block;
}

main {
    padding: 20px 20px;
}

.cta-button {
    margin-top: 15px;
}


/* === Restored Country Section Boxes === */
.country-box {
    display: inline-block;
    width: 45%;
    margin: 12px 2%;
    padding: 18px 0;
    background-color: #5bb3f3;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px;
    transition: background-color 0.25s ease, transform 0.1s ease;
}

.country-box:hover {
    background-color: #1e6fbf;
    transform: translateY(-2px);
}

.risks-box {
    background-color: #f26c6c;
}

.risks-box:hover {
    background-color: #c0392b;
}


/* Country section boxes */
.country-box {
    display: inline-block;
    width: 46%;
    margin: 20px 2%;
    padding: 26px 0;
    background-color: #5bb3f3;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    border-radius: 10px;
    transition: background-color 0.25s ease, transform 0.15s ease;
}

.country-box:hover {
    background-color: #1e6fbf;
    transform: translateY(-2px);
}

.risks-box {
    background-color: #f26c6c;
}

.risks-box:hover {
    background-color: #c0392b;
}

/* Countries listing layout */
.countries-wrapper { max-width: 1200px; margin: 0 auto 20px; padding: 0 12px; }
.countries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.countries-grid a {
  display: block;
  text-decoration: none;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid #d6deea;
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.countries-grid a:hover { background: #eff6ff; border-color: #93c5fd; }

@media (max-width:768px){
  body.homepage .tl-nav {
    padding: 10px 12px;
    gap: 10px;
    justify-content: center;
  }

  body.homepage .homepage-nav {
    gap: 14px;
    width: 100%;
    justify-content: center;
  }

  body.homepage .homepage-nav a {
    font-size: 17px;
    padding-left: 18px;
    padding-right: 18px;
  }

  body.homepage .home-main {
    padding: 14px 16px 20px;
  }

  body.homepage .homepage-banner {
    width: 100%;
    height: 40svh;
    min-height: 320px;
    overflow: hidden;
  }

  body.homepage .homepage-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 48% center;
  }

  body.homepage .cta-button {
    margin-top: 0;
    padding: 15px 28px;
    font-size: 18px;
  }

  body.homepage .affiliate-footer {
    padding: 16px 12px 18px;
  }

  body.homepage .affiliate-logos {
    gap: 18px;
    margin-bottom: 10px;
  }

  body.homepage .affiliate-logos img {
    height: 24px;
  }
}
/* CODEx mobile standardization overrides */
.country-grid {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
body.countries-page .countries-wrapper {
  max-width: 1200px;
}
.countries-alpha {
  display:none;
}
@media (max-width:768px){
  .tl-nav {
    padding: 10px 12px;
    gap: 10px;
    justify-content: center;
  }
  .nav-left,
  .nav-right {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 10px;
  }
  .nav-left {
    overflow: visible;
  }
  .nav-left a,
  .nav-right a {
    font-size: 14px;
    line-height: 1.1;
  }
  .nav-blue,
  .nav-emergency {
    padding: 8px 14px;
    border-radius: 16px;
  }
  .country-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 560px;
    margin: 0 auto;
  }
  .country-box {
    display: block;
    width: 100%;
    margin: 0;
    padding: 14px 10px;
    font-size: 16px;
    border-radius: 12px;
  }
  body.countries-page main {
    padding: 14px 0 28px;
  }
  body.countries-page .countries-hero {
    margin: 16px 0 8px 0 !important;
  }
  body.countries-page .countries-wrapper {
    max-width: 640px;
    padding: 0 16px 28px;
  }
  body.countries-page .countries-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  body.countries-page .countries-grid a {
    padding: 14px 16px;
    font-size: 17px;
    border-radius: 12px;
  }
  body.countries-page .countries-alpha {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    padding:0 16px 14px;
  }
  body.countries-page .countries-alpha a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:36px;
    height:36px;
    border:1px solid #d6deea;
    border-radius:999px;
    background:#fff;
    color:#0f172a;
    font-weight:700;
    text-decoration:none;
  }
}