/*
 * Global network coverage checker (templates/default/world_coverage_container.php
 * and world_coverage.php). Loaded in <head> by
 * index::global_network_coverage_checker() after destination_v2.css.
 *
 * Map styles (.cov-mapwrap: map box, legend, tooltip) are scoped so they
 * also work for the map-only embed on the destinations index, which is not
 * inside .cov-v2 and links this sheet itself. Everything else is scoped to
 * .cov-v2. White cards, neutral grey fills and borders, navy for accents
 * and the map scale (5G darkest, 4G mid, 3G light).
 */

.cov-v2,
.cov-mapwrap {
   --cov-navy: #14183A;
   --cov-soft: #F4F5F7;
   --cov-border: #E6E8EC;
   --cov-text2: #5B6178;
   --cov-text3: #8A8FA3;
   --cov-shadow: 0 8px 24px rgba(20, 24, 58, 0.06);
   /* Map scale; keep in step with FILLS in js/default/coverage_checker.js. */
   --cov-5g: #14183A;
   --cov-4g: #46508F;
   --cov-3g: #9AA3D1;
   --cov-covered: #8A8FA3;
   --cov-none: #E9EBEF;
   --cov-hl: #F5A623;
}

/* ---------------------------------------------------------------- */
/* Map (checker and destinations index embed)                       */
/* ---------------------------------------------------------------- */
.cov-mapwrap {
   font-family: 'Poppins', 'proxima-nova', Arial, Helvetica, sans-serif;
}

.cov-mapwrap .cov-map {
   position: relative;
   width: 100%;
   height: 220px;
   height: clamp(200px, 60vw, 420px);
}

.cov-mapwrap .cov-map svg {
   display: block;
}

.cov-mapwrap .datamaps-subunit {
   transition: fill .15s ease;
}

.cov-mapwrap .datamaps-subunit.cov-clickable {
   cursor: pointer;
}

.cov-mapwrap .datamaps-subunit.cov-hl {
   fill: var(--cov-hl) !important;
}

.cov-mapwrap .cov-legend {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 6px 16px;
   margin: 12px 0 0;
   padding: 0;
   list-style: none;
   font-size: 13px;
   color: var(--cov-text2);
}

.cov-mapwrap .cov-legend li {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin: 0;
}

.cov-mapwrap .cov-swatch {
   display: inline-block;
   width: 14px;
   height: 14px;
   border-radius: 4px;
}

.cov-mapwrap .cov-swatch.cov-net-none {
   box-shadow: inset 0 0 0 1px #D5D8DE;
}

.cov-v2 .cov-net-5g, .cov-mapwrap .cov-net-5g { background: var(--cov-5g); }
.cov-v2 .cov-net-4g, .cov-mapwrap .cov-net-4g { background: var(--cov-4g); }
.cov-v2 .cov-net-3g, .cov-mapwrap .cov-net-3g { background: var(--cov-3g); }
.cov-v2 .cov-net-covered, .cov-mapwrap .cov-net-covered { background: var(--cov-covered); }
.cov-v2 .cov-net-none, .cov-mapwrap .cov-net-none { background: var(--cov-none); }

/* Datamaps tooltip (it adds its own .hoverinfo defaults; these win). */
.cov-mapwrap .hoverinfo {
   padding: 8px 12px;
   border: 1px solid var(--cov-border);
   border-radius: 12px;
   background: #fff;
   box-shadow: var(--cov-shadow);
   font-family: inherit;
   font-size: 13px;
   line-height: 1.4;
   color: var(--cov-text2);
   white-space: nowrap;
}

.cov-mapwrap .hoverinfo strong {
   color: var(--cov-navy);
}

.cov-mapwrap .hoverinfo .cov-tip-hint {
   display: block;
   margin-top: 2px;
   font-size: 12px;
   color: var(--cov-text3);
}

/* ---------------------------------------------------------------- */
/* Hero                                                             */
/* ---------------------------------------------------------------- */
.cov-v2 .cov-hero-copy {
   margin-top: 16px;
   max-width: 760px;
}

.cov-v2 .dv2-hero h1 {
   margin: 0;
}

.cov-v2 .cov-stats {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin: 18px 0 0;
   padding: 0;
   list-style: none;
}

.cov-v2 .cov-stats li {
   display: flex;
   flex: 1 1 0;
   flex-direction: column;
   min-width: 0;
   max-width: 140px;
   margin: 0;
   padding: 10px 16px;
   border: 1px solid var(--cov-border);
   border-radius: 14px;
   background: #fff;
}

.cov-v2 .cov-stats strong {
   font-size: 22px;
   font-weight: 700;
   line-height: 1.2;
   color: var(--cov-navy);
}

.cov-v2 .cov-stats span {
   font-size: 12.5px;
   color: var(--cov-text2);
}

/* ---------------------------------------------------------------- */
/* Layout and cards                                                 */
/* ---------------------------------------------------------------- */
.cov-v2 .cov-layout {
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin-top: 16px;
}

/* Phones: search and list first, then the map. */
.cov-v2 .cov-panel {
   order: 1;
}

.cov-v2 .cov-side {
   display: flex;
   flex-direction: column;
   gap: 12px;
   order: 2;
   min-width: 0;
}

.cov-v2 .cov-card {
   box-sizing: border-box;
   min-width: 0;
   padding: 14px 16px;
   background: #fff;
   border: 1px solid var(--cov-border);
   border-radius: 20px;
   box-shadow: var(--cov-shadow);
}

.cov-v2 .cov-map-card {
   padding: 12px;
}

.cov-v2 .cov-icon {
   display: inline-flex;
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: var(--cov-soft);
   font-size: 15px;
   color: var(--cov-navy);
}

.cov-v2 .cov-explain {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   font-size: 14px;
   line-height: 1.5;
   color: var(--cov-text2);
}

.cov-v2 .cov-explain p {
   margin: 0;
}

.cov-v2 .cov-explain p + p {
   margin-top: 6px;
}

.cov-v2 .cov-explain a,
.cov-v2 .cov-empty a {
   font-weight: 600;
   color: var(--cov-navy);
   text-decoration: underline;
}

@media (min-width: 960px) {
   .cov-v2 .cov-layout {
      display: grid;
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      gap: 24px;
      align-items: start;
      margin-top: 24px;
   }

   .cov-v2 .cov-side {
      position: sticky;
      top: 96px;
      order: 0;
   }

   .cov-v2 .cov-panel {
      order: 0;
   }
}

/* ---------------------------------------------------------------- */
/* Search and chips                                                 */
/* ---------------------------------------------------------------- */
.cov-v2 .cov-label {
   display: block;
   margin: 0;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1.2px;
   line-height: 1.4;
   text-transform: uppercase;
   color: var(--cov-text3);
}

.cov-v2 .cov-search {
   position: relative;
   margin-top: 8px;
}

.cov-v2 .cov-search i {
   position: absolute;
   top: 50%;
   left: 14px;
   font-size: 15px;
   color: var(--cov-text3);
   transform: translateY(-50%);
   pointer-events: none;
}

.cov-v2 .cov-search input {
   box-sizing: border-box;
   width: 100%;
   height: 52px;
   padding: 0 14px 0 40px;
   border: 1px solid var(--cov-border);
   border-radius: 14px;
   background: #fff;
   font-family: inherit;
   font-size: 16px;
   color: var(--cov-navy);
}

.cov-v2 .cov-search input::placeholder {
   color: var(--cov-text3);
}

.cov-v2 .cov-search input:focus {
   border-color: var(--cov-navy);
   outline: none;
   box-shadow: 0 0 0 3px rgba(20, 24, 58, 0.12);
}

.cov-v2 .cov-chips {
   display: flex;
   gap: 6px;
   margin-top: 10px;
}

.cov-v2 .cov-chip {
   flex: 1 1 0;
   min-width: 0;
   min-height: 40px;
   padding: 6px 10px;
   border: 0;
   border-radius: 999px;
   background: var(--cov-soft);
   font-family: inherit;
   font-size: 13px;
   font-weight: 600;
   color: var(--cov-navy);
   cursor: pointer;
   transition: background-color .15s ease, color .15s ease;
}

.cov-v2 .cov-chip span {
   font-weight: 500;
   opacity: .75;
}

.cov-v2 .cov-chip[aria-pressed="true"] {
   background: var(--cov-navy);
   color: #fff;
}

.cov-v2 .cov-chip:focus-visible {
   outline: 2px solid var(--cov-navy);
   outline-offset: 2px;
}

.cov-v2 .cov-result {
   margin: 12px 0 4px;
   font-size: 12.5px;
   color: var(--cov-text2);
}

/* ---------------------------------------------------------------- */
/* Country list                                                     */
/* ---------------------------------------------------------------- */
.cov-v2 .cov-list {
   max-height: 60vh;
   margin: 0 -8px;
   padding: 0;
   list-style: none;
   overflow-y: auto;
   overscroll-behavior: contain;
   -webkit-overflow-scrolling: touch;
}

@media (min-width: 960px) {
   .cov-v2 .cov-list {
      max-height: 560px;
   }
}

.cov-v2 .cov-item {
   margin: 0;
}

.cov-v2 .cov-item[hidden] {
   display: none;
}

.cov-v2 .cov-row {
   display: flex;
   align-items: center;
   gap: 12px;
   min-height: 56px;
   padding: 8px;
   border-radius: 12px;
   color: var(--cov-navy);
   text-decoration: none;
   transition: background-color .15s ease;
}

.cov-v2 a.cov-row:hover,
.cov-v2 .cov-row:hover,
.cov-v2 .cov-item.is-active .cov-row {
   background: var(--cov-soft);
   color: var(--cov-navy);
   text-decoration: none;
}

.cov-v2 a.cov-row:focus-visible {
   outline: 2px solid var(--cov-navy);
   outline-offset: -2px;
}

.cov-v2 .cov-item.is-flash .cov-row {
   box-shadow: inset 0 0 0 2px var(--cov-hl);
}

.cov-v2 .cov-flag {
   flex: 0 0 32px;
   width: 32px;
   height: 22px;
   border-radius: 4px;
   object-fit: cover;
   box-shadow: 0 0 0 1px rgba(20, 24, 58, 0.08);
}

.cov-v2 .cov-main {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
   min-width: 0;
}

.cov-v2 .cov-name {
   overflow: hidden;
   font-size: 15px;
   font-weight: 600;
   line-height: 1.3;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.cov-v2 .cov-ops {
   overflow: hidden;
   font-size: 12.5px;
   line-height: 1.4;
   color: var(--cov-text2);
   text-overflow: ellipsis;
   white-space: nowrap;
}

.cov-v2 .cov-badge {
   flex: 0 0 auto;
   min-width: 30px;
   padding: 3px 9px;
   border-radius: 999px;
   font-size: 12px;
   font-weight: 700;
   line-height: 1.4;
   text-align: center;
   color: #fff;
}

.cov-v2 .cov-badge.cov-net-3g {
   color: var(--cov-navy);
}

.cov-v2 .cov-badge.cov-net-covered {
   background: var(--cov-soft);
   box-shadow: inset 0 0 0 1px var(--cov-border);
   color: var(--cov-navy);
}

.cov-v2 .cov-chev {
   flex: 0 0 12px;
   width: 12px;
   font-size: 12px;
   color: var(--cov-text3);
}

/* ---------------------------------------------------------------- */
/* Empty state                                                      */
/* ---------------------------------------------------------------- */
.cov-v2 .cov-empty {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   padding: 24px 8px 12px;
   font-size: 14px;
   line-height: 1.5;
   text-align: center;
   color: var(--cov-text2);
}

.cov-v2 .cov-empty[hidden] {
   display: none;
}

.cov-v2 .cov-empty strong {
   color: var(--cov-navy);
}

@media (prefers-reduced-motion: reduce) {
   .cov-mapwrap .datamaps-subunit,
   .cov-v2 .cov-row,
   .cov-v2 .cov-chip {
      transition: none;
   }
}