/*
 * New-design ("v2") /destination index (templates/default/destinations_index_v2.php).
 * Loaded in <head> by destination::destinationIndexV2() only when the new
 * design is active; every rule is scoped to .destidx-v2. Navy and slate on
 * neutral cards; pink only on the primary button.
 */

/* Poppins 500/600/700 (same files as the v2 homepage). */
@font-face {
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 500;
   font-display: swap;
   src: url('../img/assets/fonts/poppins/poppins-500-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
   src: url('../img/assets/fonts/poppins/poppins-600-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url('../img/assets/fonts/poppins/poppins-700-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.destidx-v2 {
   --dx-navy: #14183A;
   --dx-pink: #E8236E;
   --dx-pink-dark: #C2145A;
   --dx-slate: #5B6178;
   --dx-body: #4A4F63;
   --dx-muted: #8A8FA3;
   --dx-neutral: #F3F5F9;
   --dx-border: #E4E8F0;
   --dx-shadow: 0 6px 24px rgba(20, 24, 58, 0.07);
   --dx-gutter: 16px;
   background: #FAFAFA;
   color: var(--dx-body);
   font-family: 'Poppins', 'proxima-nova', Arial, Helvetica, sans-serif;
   overflow-x: hidden;
   overflow-x: clip;
   padding-bottom: 48px;
}

@media (min-width: 960px) {
   .destidx-v2 {
      --dx-gutter: 32px;
   }
}

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

.destidx-v2 .dx-wrap {
   box-sizing: content-box;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 var(--dx-gutter);
}

.destidx-v2 h1,
.destidx-v2 h2,
.destidx-v2 h3 {
   font-family: 'Poppins', sans-serif;
   color: var(--dx-navy);
   letter-spacing: -0.01em;
}

/* Hero */
.destidx-v2 .dx-hero {
   padding: 28px 0 30px;
   background: linear-gradient(180deg, #EEF3F9 0%, #FAFAFA 100%);
   border-bottom: 1px solid var(--dx-border);
}

.destidx-v2 .dx-hero h1 {
   margin: 0;
   font-size: 28px;
   font-weight: 700;
   line-height: 1.2;
}

.destidx-v2 .dx-sub {
   margin: 8px 0 0;
   font-size: 15px;
   line-height: 1.5;
   color: var(--dx-body);
}

.destidx-v2 .dx-search {
   position: relative;
   max-width: 640px;
   margin-top: 20px;
}

.destidx-v2 .dx-search input {
   box-sizing: border-box;
   width: 100%;
   height: 56px;
   padding: 0 60px 0 48px;
   border: 0;
   border-radius: 28px;
   background: #fff;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
   font-family: inherit;
   font-size: 16px;
   color: var(--dx-navy);
   outline: none;
   -webkit-appearance: none;
   appearance: none;
}

.destidx-v2 .dx-search input::placeholder {
   color: var(--dx-muted);
   opacity: 1;
}

.destidx-v2 .dx-search input:focus {
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 0 0 2px rgba(20, 24, 58, 0.12);
}

.destidx-v2 .dx-search-pin {
   position: absolute;
   left: 18px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--dx-muted);
   font-size: 18px;
   pointer-events: none;
}

.destidx-v2 .dx-locate {
   position: absolute;
   top: 0;
   right: 0;
   width: 56px;
   height: 56px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 0;
   background: none;
   color: var(--dx-pink);
   font-size: 20px;
   cursor: pointer;
}

.destidx-v2 .dx-multi {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin-top: 14px;
   font-size: 14px;
   font-weight: 600;
   color: var(--dx-navy);
   text-decoration: none;
}

.destidx-v2 .dx-multi:hover {
   color: var(--dx-navy);
   text-decoration: underline;
   text-underline-offset: 3px;
}

.destidx-v2 .dx-multi .fa-chevron-right {
   font-size: 11px;
}

@media (min-width: 768px) {
   .destidx-v2 .dx-hero {
      padding: 40px 0 40px;
   }

   .destidx-v2 .dx-hero h1 {
      font-size: 40px;
   }

   .destidx-v2 .dx-sub {
      font-size: 17px;
   }
}

/* Sections */
.destidx-v2 .dx-section {
   margin-top: 36px;
}

@media (min-width: 960px) {
   .destidx-v2 .dx-section {
      margin-top: 52px;
   }
}

.destidx-v2 .dx-title {
   margin: 0 0 16px;
   font-size: 22px;
   font-weight: 700;
   line-height: 1.25;
}

@media (min-width: 960px) {
   .destidx-v2 .dx-title {
      font-size: 28px;
   }
}

.destidx-v2 .dx-card {
   box-sizing: border-box;
   padding: 22px 20px;
   background: #fff;
   border: 1px solid rgba(20, 24, 58, 0.08);
   border-radius: 24px;
   box-shadow: var(--dx-shadow);
}

@media (min-width: 960px) {
   .destidx-v2 .dx-card {
      padding: 32px;
   }
}

/* Popular: a grid that always fits its container (no fixed widths) */
.destidx-v2 .dx-popular {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
   gap: 18px 8px;
   list-style: none;
   margin: 0;
   padding: 4px 0 0;
}

/* From tablet up the 14 popular countries sit as two even rows of 7. */
@media (min-width: 768px) {
   .destidx-v2 .dx-popular {
      grid-template-columns: repeat(7, minmax(0, 1fr));
   }
}

.destidx-v2 .dx-popular li {
   margin: 0;
   min-width: 0;
}

.destidx-v2 .dx-popular a {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   color: var(--dx-navy);
   text-decoration: none;
}

.destidx-v2 .dx-pop-flag {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   overflow: hidden;
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.10);
   transition: transform .15s ease;
}

.destidx-v2 .dx-popular a:hover .dx-pop-flag {
   transform: translateY(-2px);
}

.destidx-v2 .dx-pop-flag img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.destidx-v2 .dx-pop-name {
   margin-top: 6px;
   font-size: 13px;
   font-weight: 500;
   line-height: 1.25;
   overflow-wrap: anywhere;
}

@media (min-width: 768px) {
   .destidx-v2 .dx-pop-flag {
      width: 56px;
      height: 56px;
   }

   .destidx-v2 .dx-pop-name {
      font-size: 13.5px;
   }
}

/* While searching, only the results show (set by the page script). */
.destidx-v2.is-searching .dx-hide-on-search {
   display: none !important;
}

/* Continent pills: the bar sticks under the site header (--dx-sticky set by the page script).
   Negative margins cancel the padding so the pills sit where they did before. */
.destidx-v2 .dx-pills-bar {
   position: sticky;
   top: var(--dx-sticky, 60px);
   z-index: 5;
   margin: -8px 0;
   padding: 8px 0;
}

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

@media (max-width: 959px) and (prefers-reduced-motion: no-preference) {
   .destidx-v2 .dx-pills-bar {
      transition: top 260ms cubic-bezier(.215, .61, .355, 1);
   }
}

/* Full-bleed page-coloured strip behind the stuck bar; shadow only while stuck. */
.destidx-v2 .dx-pills-bar::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;
}

.destidx-v2 .dx-pills-bar.is-stuck::before {
   box-shadow: 0 6px 12px -6px rgba(20, 24, 58, 0.14);
}

.destidx-v2 .dx-pills {
   display: flex;
   gap: 4px;
   width: max-content;
   max-width: 100%;
   box-sizing: border-box;
   padding: 4px;
   border-radius: 999px;
   background: var(--dx-neutral);
   border: 1px solid var(--dx-border);
   overflow-x: auto;
   scrollbar-width: none;
}

.destidx-v2 .dx-pills::-webkit-scrollbar {
   display: none;
}

.destidx-v2 .dx-pills button {
   flex: 0 0 auto;
   height: 36px;
   padding: 0 14px;
   border: 0;
   border-radius: 999px;
   background: transparent;
   font-family: inherit;
   font-size: 13.5px;
   font-weight: 500;
   color: var(--dx-slate);
   white-space: nowrap;
   cursor: pointer;
}

.destidx-v2 .dx-pills button:hover {
   color: var(--dx-navy);
}

.destidx-v2 .dx-pills button.is-on {
   background: #fff;
   color: var(--dx-navy);
   font-weight: 600;
   box-shadow: 0 2px 6px rgba(20, 24, 58, 0.10);
}

.destidx-v2 .dx-status {
   margin: 12px 0 0;
   min-height: 1.2em;
   font-size: 13px;
   color: var(--dx-muted);
}

/* Country tiles */
.destidx-v2 .dx-group {
   margin-top: 22px;
}

.destidx-v2 .dx-group h3 {
   display: flex;
   align-items: baseline;
   gap: 8px;
   margin: 0 0 12px;
   font-size: 18px;
   font-weight: 700;
}

.destidx-v2 .dx-group h3 span {
   font-size: 13px;
   font-weight: 500;
   color: var(--dx-muted);
}

.destidx-v2 .dx-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px;
   list-style: none;
   margin: 0;
   padding: 0;
}

@media (min-width: 768px) {
   .destidx-v2 .dx-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
   }
}

@media (min-width: 1100px) {
   .destidx-v2 .dx-grid {
      grid-template-columns: repeat(5, minmax(0, 1fr));
   }
}

@media (min-width: 1300px) {
   .destidx-v2 .dx-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
   }
}

.destidx-v2 .dx-grid li {
   margin: 0;
   min-width: 0;
}

.destidx-v2 .dx-tile {
   display: flex;
   align-items: center;
   gap: 10px;
   box-sizing: border-box;
   height: 100%;
   padding: 9px 12px 9px 9px;
   border-radius: 16px;
   background: #fff;
   border: 1px solid var(--dx-border);
   font-size: 14px;
   font-weight: 500;
   line-height: 1.25;
   color: var(--dx-navy);
   text-decoration: none;
   overflow-wrap: anywhere;
   transition: border-color .15s ease, box-shadow .15s ease;
}

.destidx-v2 .dx-tile:hover,
.destidx-v2 .dx-tile:focus-visible {
   border-color: #C9CFDB;
   box-shadow: 0 4px 14px rgba(20, 24, 58, 0.08);
   color: var(--dx-navy);
   text-decoration: none;
   outline: none;
}

.destidx-v2 .dx-tile.is-only {
   border-color: var(--dx-navy);
   box-shadow: 0 0 0 2px rgba(20, 24, 58, 0.12);
}

.destidx-v2 .dx-tile img {
   flex: 0 0 40px;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   object-fit: cover;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Empty state */
.destidx-v2 .dx-empty {
   margin-top: 16px;
   text-align: center;
}

.destidx-v2 .dx-empty h3 {
   margin: 0;
   font-size: 18px;
   font-weight: 700;
}

.destidx-v2 .dx-empty p {
   margin: 8px auto 16px;
   max-width: 460px;
}

.destidx-v2 .dx-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 46px;
   padding: 0 22px;
   border-radius: 999px;
   font-size: 14.5px;
   font-weight: 600;
   text-decoration: none;
}

.destidx-v2 .dx-btn-primary {
   background: var(--dx-pink);
   color: #fff;
}

.destidx-v2 .dx-btn-primary:hover {
   background: var(--dx-pink-dark);
   color: #fff;
   text-decoration: none;
}

/* Regional and global cards */
.destidx-v2 .dx-two {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 16px;
}

@media (min-width: 768px) {
   .destidx-v2 .dx-two {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
   }
}

.destidx-v2 .dx-plan-link {
   display: flex;
   align-items: center;
   gap: 16px;
   color: var(--dx-navy);
   text-decoration: none;
   transition: box-shadow .15s ease, border-color .15s ease;
}

.destidx-v2 .dx-plan-link:hover {
   border-color: #C9CFDB;
   box-shadow: 0 10px 28px rgba(20, 24, 58, 0.10);
   color: var(--dx-navy);
   text-decoration: none;
}

.destidx-v2 .dx-plan-icon {
   flex: 0 0 52px;
   width: 52px;
   height: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 16px;
   background: var(--dx-neutral);
   border: 1px solid var(--dx-border);
   color: var(--dx-slate);
   font-size: 20px;
}

.destidx-v2 .dx-plan-text {
   flex: 1 1 auto;
   min-width: 0;
}

.destidx-v2 .dx-plan-text strong {
   display: block;
   font-size: 18px;
   font-weight: 700;
}

.destidx-v2 .dx-plan-text span {
   display: block;
   margin-top: 4px;
   font-size: 14px;
   line-height: 1.5;
   color: var(--dx-body);
}

.destidx-v2 .dx-plan-arrow {
   color: var(--dx-slate);
}

/* SEO copy */
.destidx-v2 .dx-prose {
   font-size: 15px;
   line-height: 1.7;
}

.destidx-v2 .dx-prose h2 {
   margin: 0 0 12px;
   font-size: 22px;
   font-weight: 700;
}

.destidx-v2 .dx-prose h3 {
   margin: 24px 0 8px;
   font-size: 17px;
   font-weight: 600;
}

.destidx-v2 .dx-prose p {
   margin: 0 0 12px;
}

.destidx-v2 .dx-ticks {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 8px 24px;
   list-style: none;
   margin: 0;
   padding: 0;
}

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

.destidx-v2 .dx-ticks li {
   display: flex;
   gap: 10px;
   margin: 0;
   font-size: 14.5px;
   line-height: 1.55;
}

.destidx-v2 .dx-ticks i {
   flex: 0 0 20px;
   width: 20px;
   height: 20px;
   margin-top: 2px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: var(--dx-neutral);
   color: var(--dx-slate);
   font-size: 10px;
}

.destidx-v2 .dx-ticks strong {
   color: var(--dx-navy);
}

@media (prefers-reduced-motion: reduce) {
   .destidx-v2 .dx-pop-flag,
   .destidx-v2 .dx-tile,
   .destidx-v2 .dx-plan-link {
      transition: none;
   }
}