/*
 * eSIM by City (templates/default/esim_by_city.php).
 * Loaded in <head> by index::esim_by_city() after destination_v2.css;
 * every rule is scoped to .city-v2. Same look as the data calculator and
 * the cost comparison: white cards, neutral grey fills and borders, navy
 * accents (active tab, icons, prices, links). Brand pink is used for the
 * main CTA buttons only (.dv2-btn-primary).
 */

.city-v2 {
   --city-accent: #E8236E;
   --city-navy: #14183A;
   --city-soft: #F4F5F7;
   --city-border: #E6E8EC;
   --city-text2: #5B6178;
   --city-text3: #8A8FA3;
   --city-shadow: 0 8px 24px rgba(20, 24, 58, 0.06);
}

.city-v2 [hidden] {
   display: none !important;
}

.city-v2 .city-sr {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
}

.city-v2 a:focus-visible,
.city-v2 button:focus-visible {
   outline: 2px solid var(--city-navy);
   outline-offset: 2px;
}

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

.city-v2 .city-icon-lg {
   width: 48px;
   height: 48px;
   font-size: 20px;
}

.city-v2 .city-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 16px;
}

@media (max-width: 479px) {
   .city-v2 .city-actions .dv2-btn {
      width: 100%;
   }
}

/* ---------------------------------------------------------------- */
/* Hero                                                             */
/* ---------------------------------------------------------------- */
.city-v2 .city-hero {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 20px;
   margin-top: 16px;
}

@media (min-width: 960px) {
   .city-v2 .city-hero {
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 40px;
      align-items: center;
   }
}

.city-v2 .city-hero-copy {
   min-width: 0;
   max-width: 720px;
}

.city-v2 .dv2-hero-sub strong {
   color: var(--city-navy);
}

/* Search */
.city-v2 .city-search {
   position: relative;
   margin: 20px 0 0;
}

.city-v2 .city-search > i {
   position: absolute;
   top: 50%;
   left: 20px;
   transform: translateY(-50%);
   font-size: 16px;
   color: var(--city-text2);
   pointer-events: none;
}

.city-v2 .city-search input {
   box-sizing: border-box;
   width: 100%;
   height: 56px;
   padding: 0 52px 0 50px;
   border: 1.5px solid var(--city-border);
   border-radius: 999px;
   background: #fff;
   box-shadow: var(--city-shadow);
   font-family: inherit;
   font-size: 16px;
   color: var(--city-navy);
   -webkit-appearance: none;
   appearance: none;
   transition: border-color .15s ease;
}

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

.city-v2 .city-search input:focus {
   border-color: var(--city-navy);
   outline: none;
}

.city-v2 .city-search input::-webkit-search-cancel-button {
   -webkit-appearance: none;
   display: none;
}

.city-v2 .city-search-clear {
   position: absolute;
   top: 50%;
   right: 10px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   margin-top: -18px;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background: var(--city-soft);
   color: var(--city-navy);
   font-size: 14px;
   cursor: pointer;
}

.city-v2 .city-search-clear:hover {
   background: var(--city-border);
}

.city-v2 .dv2-facts {
   margin-top: 16px;
}

/* "Why city searches" card */
.city-v2 .city-why {
   box-sizing: border-box;
   padding: 20px;
   border: 1px solid var(--city-border);
   border-radius: 20px;
   background: #fff;
   box-shadow: var(--city-shadow);
}

.city-v2 .city-why h2 {
   margin: 0;
   font-size: 17px;
   font-weight: 700;
   line-height: 1.3;
}

.city-v2 .city-why ul {
   margin: 14px 0 0;
   padding: 0;
   list-style: none;
}

.city-v2 .city-why li {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   margin: 0;
   padding: 10px 0;
   border-top: 1px solid var(--city-border);
   font-size: 13.5px;
   line-height: 1.5;
}

.city-v2 .city-why li:first-child {
   border-top: 0;
   padding-top: 0;
}

.city-v2 .city-why strong {
   color: var(--city-navy);
}

/* ---------------------------------------------------------------- */
/* Region tabs: one scrollable row on phones, wrapped on wide screens */
/* ---------------------------------------------------------------- */
.city-v2 .city-tabs {
   display: none;
}

/* Sticks under the site header like .dv2-filters (--city-sticky set by
   esim_by_city.js). The 8px padding keeps the pills off the header when
   stuck; the margins shrink by the same amount so the unstuck layout is
   unchanged. On phones the row is already full-bleed and scrolls sideways
   (a ::before strip would be clipped), so it carries the page colour and
   the stuck shadow itself. */
.city-v2.city-js .city-tabs {
   display: flex;
   gap: 8px;
   position: -webkit-sticky;
   position: sticky;
   top: var(--city-sticky, 60px);
   z-index: 5;
   margin: 18px calc(var(--dv2-gutter) * -1) -2px;
   padding: 8px var(--dv2-gutter);
   background: #FAFAFA;
   overflow-x: auto;
   scroll-snap-type: x proximity;
   scrollbar-width: none;
   -webkit-overflow-scrolling: touch;
   transition: box-shadow 0.2s;
}

.city-v2.city-js .city-tabs.is-stuck {
   box-shadow: 0 6px 12px -6px rgba(20, 24, 58, 0.14);
}

.city-v2.city-js .city-tabs::-webkit-scrollbar {
   display: none;
}

@media (min-width: 960px) {
   .city-v2.city-js .city-tabs {
      flex-wrap: wrap;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
      background: transparent;
      overflow: visible;
   }

   .city-v2.city-js .city-tabs.is-stuck {
      box-shadow: none;
   }

   /* Full-bleed page-coloured strip behind the stuck row; shadow only while stuck. */
   .city-v2.city-js .city-tabs::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 100vw;
      margin-left: -50vw;
      z-index: -1;
      background: #FAFAFA;
      transition: box-shadow 0.2s;
   }

   .city-v2.city-js .city-tabs.is-stuck::before {
      box-shadow: 0 6px 12px -6px rgba(20, 24, 58, 0.14);
   }
}

/* Mobile: the site header slides away while scrolling down, so the stuck
   row moves up by its height (--ss-hdr-shift, set by mobile_bottom_nav.php). */
@media (max-width: 959px) {
   .city-v2.city-js .city-tabs {
      top: calc(var(--city-sticky, 60px) - var(--ss-hdr-shift, 0px));
   }
}

@media (max-width: 959px) and (prefers-reduced-motion: no-preference) {
   .city-v2.city-js .city-tabs {
      transition: top 260ms cubic-bezier(.215, .61, .355, 1), box-shadow 0.2s;
   }
}

.city-v2 .city-tab {
   display: inline-flex;
   flex: 0 0 auto;
   align-items: center;
   gap: 8px;
   height: 40px;
   padding: 0 16px;
   border: 1px solid var(--city-border);
   border-radius: 999px;
   background: #fff;
   font-family: inherit;
   font-size: 13.5px;
   font-weight: 600;
   color: var(--city-navy);
   white-space: nowrap;
   cursor: pointer;
   scroll-snap-align: start;
   transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.city-v2 .city-tab i {
   font-size: 13px;
   color: var(--city-text2);
}

.city-v2 .city-tab:hover {
   border-color: var(--city-navy);
}

.city-v2 .city-tab.is-active,
.city-v2 .city-tab[aria-pressed="true"] {
   border-color: var(--city-navy);
   background: var(--city-navy);
   color: #fff;
}

.city-v2 .city-tab.is-active i,
.city-v2 .city-tab[aria-pressed="true"] i {
   color: #fff;
}

.city-v2 .city-status {
   min-height: 1.4em;
   margin: 10px 0 0;
   font-size: 13px;
   color: var(--city-text2);
}

.city-v2:not(.city-js) .city-status {
   display: none;
}

.city-v2.city-js .city-region {
   margin-top: 16px;
}

/* Hash jumps (#asia on load or a typed hash) land below the header and
   the stuck tab row (--city-offset = header + tabs, set by the script). */
.city-v2 .city-region {
   scroll-margin-top: var(--city-offset, 140px);
}

/* ---------------------------------------------------------------- */
/* City cards                                                       */
/* ---------------------------------------------------------------- */
.city-v2 .city-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 12px;
   margin: 18px 0 0;
   padding: 0;
   list-style: none;
}

@media (min-width: 640px) {
   .city-v2 .city-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (min-width: 960px) {
   .city-v2 .city-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
   }
}

.city-v2 .city-grid > li {
   display: flex;
   margin: 0;
}

.city-v2 .city-card {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
   box-sizing: border-box;
   min-width: 0;
   padding: 16px 18px;
   border: 1px solid var(--city-border);
   border-radius: 20px;
   background: #fff;
   box-shadow: var(--city-shadow);
   color: inherit;
   text-decoration: none;
   transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.city-v2 .city-card:hover {
   border-color: #C9CDD6;
   box-shadow: 0 12px 28px rgba(20, 24, 58, 0.10);
   color: inherit;
   text-decoration: none;
   transform: translateY(-1px);
}

.city-v2 .city-card-head {
   display: flex;
   align-items: center;
   gap: 12px;
}

.city-v2 .city-flag {
   flex: 0 0 auto;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   object-fit: cover;
   background: var(--city-soft);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.city-v2 .city-card-title {
   min-width: 0;
}

.city-v2 .city-card h3 {
   margin: 0;
   font-size: 16.5px;
   font-weight: 700;
   line-height: 1.3;
}

.city-v2 .city-card-country {
   display: block;
   margin-top: 1px;
   font-size: 12.5px;
   font-weight: 500;
   color: var(--city-text2);
}

.city-v2 .city-card-blurb {
   flex: 1 1 auto;
   margin: 12px 0 0;
   font-size: 13.5px;
   line-height: 1.55;
   color: var(--dv2-body);
}

.city-v2 .city-card-foot {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 6px 12px;
   margin-top: 14px;
   padding-top: 12px;
   border-top: 1px solid var(--city-border);
}

.city-v2 .city-card-price {
   font-size: 15px;
   font-weight: 700;
   color: var(--city-navy);
   white-space: nowrap;
}

.city-v2 .city-card-price small {
   font-size: 12px;
   font-weight: 500;
   color: var(--city-text2);
}

.city-v2 .city-card-cta {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin-left: auto;
   font-size: 13.5px;
   font-weight: 600;
   color: var(--city-navy);
}

.city-v2 .city-card-cta i {
   font-size: 12px;
   transition: transform .15s ease;
}

.city-v2 .city-card:hover .city-card-cta {
   text-decoration: underline;
   text-underline-offset: 2px;
}

.city-v2 .city-card:hover .city-card-cta i {
   transform: translateX(3px);
}

/* ---------------------------------------------------------------- */
/* "Also popular" chips                                             */
/* ---------------------------------------------------------------- */
.city-v2 .city-also {
   margin-top: 18px;
}

.city-v2 .city-also-label {
   margin: 0;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1.2px;
   text-transform: uppercase;
   color: var(--city-text3);
}

.city-v2 .city-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin: 10px 0 0;
   padding: 0;
   list-style: none;
}

.city-v2 .city-chips > li {
   margin: 0;
}

.city-v2 .city-chip {
   display: inline-flex;
   align-items: center;
   height: 34px;
   padding: 0 14px;
   border: 1px solid var(--city-border);
   border-radius: 999px;
   background: var(--city-soft);
   font-size: 13px;
   font-weight: 500;
   color: var(--city-navy);
   text-decoration: none;
   white-space: nowrap;
   transition: background-color .15s ease, border-color .15s ease;
}

.city-v2 .city-chip:hover {
   border-color: var(--city-navy);
   background: #fff;
   color: var(--city-navy);
   text-decoration: none;
}

/* ---------------------------------------------------------------- */
/* Empty search state                                               */
/* ---------------------------------------------------------------- */
.city-v2 .city-empty {
   margin-top: 24px;
   padding: 28px 20px;
   border: 1px solid var(--city-border);
   border-radius: 24px;
   background: #fff;
   box-shadow: var(--city-shadow);
   text-align: center;
}

.city-v2 .city-empty h2 {
   margin: 12px 0 0;
   font-size: 20px;
   font-weight: 700;
}

.city-v2 .city-empty p {
   max-width: 560px;
   margin: 8px auto 0;
   font-size: 14.5px;
   line-height: 1.6;
}

.city-v2 .city-empty .city-actions {
   justify-content: center;
}

/* ---------------------------------------------------------------- */
/* Layover strip and multi-country pointer                          */
/* ---------------------------------------------------------------- */
.city-v2 .city-panel {
   display: flex;
   flex-direction: column;
   gap: 14px;
   padding: 22px 20px;
   border: 1px solid var(--city-border);
   border-radius: 24px;
   background: #fff;
   box-shadow: var(--city-shadow);
}

@media (min-width: 768px) {
   .city-v2 .city-panel {
      flex-direction: row;
      align-items: flex-start;
      gap: 20px;
      padding: 28px 32px;
   }
}

.city-v2 .city-layover {
   background: var(--city-soft);
   box-shadow: none;
}

.city-v2 .city-layover .city-icon {
   background: #fff;
}

.city-v2 .city-panel-copy {
   min-width: 0;
}

.city-v2 .city-panel h2 {
   margin: 0;
   font-size: 20px;
   font-weight: 700;
   line-height: 1.3;
}

.city-v2 .city-panel p {
   max-width: 760px;
   margin: 8px 0 0;
   font-size: 14.5px;
   line-height: 1.6;
}

.city-v2 .city-panel p a {
   font-weight: 600;
   text-decoration: underline;
   text-underline-offset: 2px;
}

.city-v2 .city-panel .city-panel-note {
   font-size: 13px;
   color: var(--city-text2);
}

.city-v2 .city-panel .dv2-btn .city-flag {
   width: 20px;
   height: 20px;
   box-shadow: none;
}

/* ---------------------------------------------------------------- */
/* FAQ and final CTA                                                */
/* ---------------------------------------------------------------- */
.city-v2 .dv2-faq .uk-accordion {
   max-width: 860px;
}

.city-v2 .dv2-faq .uk-accordion > li {
   border-color: var(--city-border);
   box-shadow: none;
}

.city-v2 .dv2-faq .uk-accordion-content a {
   font-weight: 600;
   text-decoration: underline;
   text-underline-offset: 2px;
}

.city-v2 .city-cta {
   padding: 28px 20px;
   border: 1px solid var(--city-border);
   border-radius: 24px;
   background: #fff;
   box-shadow: var(--city-shadow);
   text-align: center;
}

.city-v2 .city-cta h2 {
   margin: 0;
   font-size: 22px;
   font-weight: 700;
}

.city-v2 .city-cta p {
   max-width: 560px;
   margin: 8px auto 0;
   font-size: 14.5px;
   line-height: 1.6;
}

.city-v2 .city-cta .city-actions {
   justify-content: center;
   margin-top: 18px;
}

@media (min-width: 960px) {
   .city-v2 .city-cta {
      padding: 40px 32px;
   }

   .city-v2 .city-cta h2 {
      font-size: 28px;
   }
}