/*
 * SimplySIM vs Holafly vs Airalo page (templates/default/simplysim_vs_holafly_vs_airalo.php)
 * in the v2 homepage style (css/home_v2.css): same tokens, Poppins, white
 * rounded cards, pink pill CTAs, sideways swipe rows on phones.
 * Loaded only by index::simplysim_vs_holafly_vs_airalo() and every rule is
 * scoped under .cmp-v2, so nothing leaks into other pages.
 */

/* Poppins 500/600/700, same self-hosted files as home_v2.css. */
@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;
}

.cmp-v2 {
   --hv2-navy: #14183A;
   --hv2-pink: #E8236E;
   --hv2-pink-dark: #C2145A;
   --hv2-pill-border: #E4E8F0;
   --hv2-slate: #5B6178;
   --hv2-body: #4A4F63;
   --hv2-neutral: #F3F5F9;
   --hv2-grey600: #6B6B6B;
   --hv2-grey100: #F0F0F0;
   --hv2-bg: #FAFAFA;
   --hv2-card-shadow: 0 6px 24px rgba(20, 24, 58, 0.07);
   --hv2-gutter: 16px;
   background: var(--hv2-bg);
   color: var(--hv2-body);
   overflow-x: hidden;
   overflow-x: clip;
   font-family: 'Poppins', 'proxima-nova', Arial, Helvetica, sans-serif;
   font-size: 15px;
   line-height: 1.6;
}

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

.cmp-v2 h1,
.cmp-v2 h2,
.cmp-v2 h3,
.cmp-v2 h4 {
   font-family: 'Poppins', sans-serif;
   color: var(--hv2-navy);
   font-weight: 700;
   letter-spacing: -0.01em;
}

.cmp-v2 b,
.cmp-v2 strong {
   color: var(--hv2-navy);
}

.cmp-v2 a:not(.cmp-pill-btn) {
   color: var(--hv2-pink);
}

.cmp-v2 a:not(.cmp-pill-btn):hover {
   color: var(--hv2-pink-dark);
}

/* Content column: 16px gutter on phones, centred 1200px on desktop. */
.cmp-v2 .cmp-wrap {
   box-sizing: content-box;
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
   padding-left: var(--hv2-gutter);
   padding-right: var(--hv2-gutter);
}

/* ------------------------------------------------------------------ */
/* Hero: beach photo under a white wash, like the v2 homepage.         */
/* ------------------------------------------------------------------ */
.cmp-v2 .cmp-hero {
   position: relative;
   padding: 28px 0 32px;
}

.cmp-v2 .cmp-hero-media {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   overflow: hidden;
   z-index: 0;
}

.cmp-v2 .cmp-hero-bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top center;
}

.cmp-v2 .cmp-hero-wash {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background: linear-gradient(to bottom,
         rgba(255, 255, 255, 0.88) 0%,
         rgba(255, 255, 255, 0.94) 40%,
         rgba(250, 250, 250, 1) 100%);
}

.cmp-v2 .cmp-hero-inner {
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   gap: 24px;
}

.cmp-v2 .cmp-hero-copy,
.cmp-v2 .cmp-hero-aside {
   min-width: 0;
}

.cmp-v2 .cmp-kicker {
   font-size: 14px;
   font-weight: 600;
   color: var(--hv2-slate);
}

.cmp-v2 .cmp-title {
   margin: 8px 0 0;
   font-size: 28px;
   line-height: 1.15;
}

.cmp-v2 .cmp-lead {
   margin: 14px 0 0;
   font-size: 16px;
   line-height: 1.6;
   color: var(--hv2-body);
}

.cmp-v2 .cmp-btn-row {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 22px;
}

.cmp-v2 .cmp-btn-row-center {
   justify-content: center;
}

@media (min-width: 960px) {
   .cmp-v2 .cmp-hero {
      padding: 56px 0 48px;
   }

   .cmp-v2 .cmp-hero-inner {
      flex-direction: row;
      align-items: center;
      gap: 48px;
   }

   .cmp-v2 .cmp-hero-copy {
      flex: 1 1 58%;
   }

   .cmp-v2 .cmp-hero-aside {
      flex: 0 0 38%;
   }

   .cmp-v2 .cmp-title {
      font-size: 40px;
   }

   .cmp-v2 .cmp-lead {
      font-size: 18px;
   }
}

/* Check-tick lists (same look as .hv2-checks) */
.cmp-v2 .cmp-checks {
   list-style: none;
   margin: 18px 0 0;
   padding: 0;
}

.cmp-v2 .cmp-checks-row {
   display: flex;
   flex-wrap: wrap;
   gap: 10px 20px;
}

.cmp-v2 .cmp-checks li {
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 0;
   font-size: 14px;
   font-weight: 600;
   color: var(--hv2-navy);
}

.cmp-v2 .cmp-checks i {
   flex: 0 0 20px;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: var(--hv2-neutral);
   color: var(--hv2-slate);
   font-size: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Pill buttons (same as .hv2-pill-btn) */
.cmp-v2 .cmp-pill-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   box-sizing: border-box;
   min-height: 48px;
   margin: 0;
   padding: 0 22px;
   border: 0;
   border-radius: 999px;
   background: var(--hv2-pink);
   font-family: inherit;
   font-size: 15px;
   font-weight: 600;
   line-height: 1.2;
   color: #fff;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
   transition: background-color .15s ease, color .15s ease;
}

.cmp-v2 .cmp-pill-btn:hover {
   background: var(--hv2-pink-dark);
   color: #fff;
   text-decoration: none;
}

.cmp-v2 .cmp-pill-ghost {
   background: #fff;
   border: 1.5px solid var(--hv2-navy);
   color: var(--hv2-navy);
}

.cmp-v2 .cmp-pill-ghost:hover {
   background: var(--hv2-navy);
   color: #fff;
}

.cmp-v2 .cmp-pill-white {
   background: #fff;
   color: var(--hv2-navy);
}

.cmp-v2 .cmp-pill-white:hover {
   background: var(--hv2-neutral);
   color: var(--hv2-navy);
}

.cmp-v2 .cmp-pill-block {
   display: flex;
   width: 100%;
}

.cmp-v2 .cmp-pill-sm {
   min-height: 36px;
   padding: 0 18px;
   font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
   .cmp-v2 .cmp-pill-btn,
   .cmp-v2 .cmp-faq .uk-accordion-title::after {
      transition: none;
   }
}

/* ------------------------------------------------------------------ */
/* Cards and sections                                                  */
/* ------------------------------------------------------------------ */
.cmp-v2 .cmp-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(--hv2-card-shadow);
   min-width: 0;
}

.cmp-v2 .cmp-verdict-title {
   margin: 0;
   font-size: 20px;
}

.cmp-v2 .cmp-verdict-list {
   list-style: none;
   margin: 12px 0 18px;
   padding: 0;
   font-size: 14px;
   line-height: 1.55;
}

.cmp-v2 .cmp-verdict-list li {
   padding: 12px 0;
   border-top: 1px solid var(--hv2-grey100);
}

.cmp-v2 .cmp-verdict-list li:first-child {
   border-top: 0;
   padding-top: 4px;
}

.cmp-v2 .cmp-section {
   padding: 20px 0;
}

.cmp-v2 .cmp-section-last {
   padding-bottom: 48px;
}

@media (min-width: 960px) {
   .cmp-v2 .cmp-section {
      padding: 32px 0;
   }

   .cmp-v2 .cmp-section-last {
      padding-bottom: 72px;
   }
}

.cmp-v2 .cmp-section-title {
   margin: 0 0 8px;
   font-size: 22px;
   line-height: 1.25;
}

.cmp-v2 .cmp-section-sub {
   margin: 0 0 20px;
   max-width: 860px;
   font-size: 14px;
   color: var(--hv2-grey600);
}

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

.cmp-v2 .cmp-note {
   margin: 14px 0 0;
   font-size: 13px;
   line-height: 1.55;
   color: var(--hv2-grey600);
}

.cmp-v2 .cmp-note-center {
   max-width: 760px;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
}

/* Card grids: stacked, then 2 or 3 across. */
.cmp-v2 .cmp-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 16px;
}

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

   .cmp-v2 .cmp-grid-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
   }
}

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

/* Phone: three-card rows scroll sideways like the homepage (.hv2-swipe). */
@media (max-width: 639px) {
   .cmp-v2 .cmp-swipe {
      display: flex;
      flex-wrap: nowrap;
      align-items: stretch;
      gap: 14px;
      padding: 10px var(--hv2-gutter) 26px;
      margin: -10px calc(var(--hv2-gutter) * -1) -16px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-left: var(--hv2-gutter);
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
   }

   .cmp-v2 .cmp-swipe::-webkit-scrollbar {
      display: none;
   }

   .cmp-v2 .cmp-swipe > * {
      flex: 0 0 85%;
      width: 85%;
      max-width: 340px;
      margin: 0;
      scroll-snap-align: start;
   }
}

.cmp-v2 .cmp-card-title {
   margin: 0;
   font-size: 18px;
   line-height: 1.3;
}

.cmp-v2 .cmp-card-text {
   margin: 10px 0 0;
   font-size: 14px;
   line-height: 1.6;
   color: var(--hv2-body);
}

/* Worked example price cards; SimplySIM's is the navy one. */
.cmp-v2 .cmp-price-card {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}

.cmp-v2 .cmp-price {
   margin: 6px 0 0;
   font-size: 34px;
   font-weight: 700;
   line-height: 1.1;
   color: var(--hv2-navy);
}

.cmp-v2 .cmp-price-us {
   background: var(--hv2-navy);
   border-color: var(--hv2-navy);
   box-shadow: 0 10px 30px rgba(20, 24, 58, 0.25);
}

.cmp-v2 .cmp-price-us .cmp-card-title,
.cmp-v2 .cmp-price-us .cmp-price,
.cmp-v2 .cmp-price-us .cmp-card-text,
.cmp-v2 .cmp-price-us b {
   color: #fff;
}

.cmp-v2 .cmp-price-us .cmp-card-text {
   opacity: 0.9;
}

.cmp-v2 .cmp-price-us .cmp-pill-btn {
   margin-top: auto;
}

.cmp-v2 .cmp-price-us .cmp-card-text + .cmp-pill-btn {
   margin-top: 16px;
}

/* Why cards */
.cmp-v2 .cmp-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   margin-bottom: 14px;
   border-radius: 14px;
   background: var(--hv2-neutral);
   color: var(--hv2-navy);
   font-size: 18px;
}

/* Long-form strengths cards */
.cmp-v2 .cmp-prose-title {
   margin: 0 0 12px;
   font-size: 22px;
   line-height: 1.25;
}

.cmp-v2 .cmp-prose p {
   margin: 0 0 12px;
   font-size: 15px;
   line-height: 1.65;
}

.cmp-v2 .cmp-prose p:last-child {
   margin-bottom: 0;
}

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

   .cmp-v2 .cmp-prose-title {
      font-size: 26px;
   }
}

/* ------------------------------------------------------------------ */
/* Tables: a clean table in a white card from 640px, stacked per-row   */
/* cards on phones (labels from data-label).                           */
/* ------------------------------------------------------------------ */
.cmp-v2 .cmp-table-card {
   background: #fff;
   border: 1px solid rgba(20, 24, 58, 0.08);
   border-radius: 24px;
   box-shadow: var(--hv2-card-shadow);
   overflow: hidden;
}

.cmp-v2 .cmp-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 14px;
   line-height: 1.5;
}

.cmp-v2 .cmp-table th,
.cmp-v2 .cmp-table td {
   padding: 16px 18px;
   text-align: center;
   vertical-align: middle;
   border-top: 1px solid var(--hv2-grey100);
}

.cmp-v2 .cmp-table thead th {
   border-top: 0;
   background: var(--hv2-neutral);
   font-size: 14px;
   font-weight: 700;
   color: var(--hv2-navy);
   text-transform: none;
}

.cmp-v2 .cmp-table .cmp-feature,
.cmp-v2 .cmp-table thead th:first-child {
   text-align: left;
}

.cmp-v2 .cmp-vs .cmp-feature {
   width: 20%;
}

.cmp-v2 .cmp-vs td.cmp-us {
   background: #F7F8FB;
   color: var(--hv2-navy);
}

.cmp-v2 .cmp-vs th.cmp-us {
   background: var(--hv2-navy);
   color: #fff;
   font-size: 15px;
}

.cmp-v2 .cmp-tick {
   margin-right: 8px;
   color: var(--hv2-pink);
}

.cmp-v2 .cmp-prices td {
   font-weight: 500;
   color: var(--hv2-navy);
}

@media (min-width: 640px) {
   .cmp-v2 .cmp-table-card {
      overflow-x: auto;
   }

   .cmp-v2 .cmp-table tbody tr:hover td {
      background: #FBFBFD;
   }

   .cmp-v2 .cmp-vs tbody tr:hover td.cmp-us {
      background: #F1F3F8;
   }
}

@media (max-width: 639px) {
   .cmp-v2 .cmp-table-card {
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      overflow: visible;
   }

   .cmp-v2 .cmp-table,
   .cmp-v2 .cmp-table tbody {
      display: block;
   }

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

   .cmp-v2 .cmp-table tr {
      box-sizing: border-box;
      margin: 0 0 12px;
      padding: 18px 18px 14px;
      background: #fff;
      border: 1px solid rgba(20, 24, 58, 0.08);
      border-radius: 20px;
      box-shadow: var(--hv2-card-shadow);
   }

   .cmp-v2 .cmp-table td {
      display: block;
      padding: 10px 0;
      text-align: left;
      border-top: 1px solid var(--hv2-grey100);
   }

   .cmp-v2 .cmp-table td[data-label]::before {
      content: attr(data-label);
      display: block;
      margin-bottom: 2px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--hv2-slate);
   }

   .cmp-v2 .cmp-table .cmp-feature {
      padding: 0 0 10px;
      border-top: 0;
      font-size: 17px;
      color: var(--hv2-navy);
   }

   /* Feature comparison: feature name, then SimplySIM (highlighted),
      Holafly, Airalo. */
   .cmp-v2 .cmp-vs tr {
      display: flex;
      flex-direction: column;
   }

   .cmp-v2 .cmp-vs td {
      order: 2;
   }

   .cmp-v2 .cmp-vs td.cmp-feature {
      order: 0;
      width: auto;
   }

   .cmp-v2 .cmp-vs td.cmp-us {
      order: 1;
      margin: 0 0 4px;
      padding: 12px 14px;
      border: 1.5px solid var(--hv2-navy);
      border-radius: 14px;
      background: #fff;
   }

   .cmp-v2 .cmp-vs td.cmp-us::before {
      color: var(--hv2-pink);
   }

   .cmp-v2 .cmp-vs td:not(.cmp-us):not(.cmp-feature) {
      font-size: 14px;
      color: var(--hv2-body);
   }

   /* The first competitor row after the highlighted box needs no rule. */
   .cmp-v2 .cmp-vs td:nth-child(2) {
      border-top: 0;
   }

   /* Price table: destination, a 2x2 grid of prices, then the button. */
   .cmp-v2 .cmp-prices tr {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 14px;
   }

   .cmp-v2 .cmp-prices .cmp-feature,
   .cmp-v2 .cmp-prices .cmp-wide,
   .cmp-v2 .cmp-prices .cmp-action {
      grid-column: 1 / -1;
   }

   .cmp-v2 .cmp-prices td {
      font-size: 16px;
      font-weight: 600;
   }

   .cmp-v2 .cmp-prices .cmp-action {
      padding: 12px 0 0;
   }

   .cmp-v2 .cmp-prices .cmp-action .cmp-pill-btn {
      display: flex;
      width: 100%;
      min-height: 44px;
   }

   .cmp-v2 .cmp-table tbody tr:last-child {
      margin-bottom: 0;
   }
}

/* ------------------------------------------------------------------ */
/* FAQ: each question its own white card                               */
/* ------------------------------------------------------------------ */
.cmp-v2 .cmp-faq {
   list-style: none;
   margin: 16px 0 0;
   padding: 0;
}

.cmp-v2 .cmp-faq > li {
   margin: 0 0 10px;
   padding: 0;
   background: #fff;
   border: 1px solid rgba(20, 24, 58, 0.08);
   border-radius: 18px;
   box-shadow: var(--hv2-card-shadow);
   overflow: hidden;
}

.cmp-v2 .cmp-faq > li + li {
   margin-top: 0;
}

/* Same chevron treatment as the v2 support FAQ (css/support_v2.css). */
.cmp-v2 .cmp-faq .uk-accordion-title {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 14px;
   padding: 16px 18px;
   font-family: 'Poppins', sans-serif;
   font-size: 15px;
   font-weight: 600;
   line-height: 1.4;
   color: var(--hv2-navy) !important;
   text-decoration: none;
}

.cmp-v2 .cmp-faq .uk-accordion-title::before {
   content: none;
}

.cmp-v2 .cmp-faq .uk-accordion-title::after {
   content: "\f078";
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: var(--hv2-neutral);
   color: var(--hv2-slate);
   font-family: 'Font Awesome 6 Free';
   font-weight: 900;
   font-size: 11px;
   transition: transform .2s ease;
}

.cmp-v2 .cmp-faq .uk-open > .uk-accordion-title::after {
   transform: rotate(180deg);
   color: var(--hv2-navy);
}

.cmp-v2 .cmp-faq .uk-accordion-content {
   margin: 0;
   padding: 0 18px 16px;
}

.cmp-v2 .cmp-faq .uk-accordion-content p {
   margin: 0;
   font-size: 14px;
   line-height: 1.65;
   color: var(--hv2-body);
}

@media (min-width: 960px) {
   .cmp-v2 .cmp-faq .uk-accordion-title {
      padding: 20px 24px;
      font-size: 16px;
   }

   .cmp-v2 .cmp-faq .uk-accordion-content {
      padding: 0 24px 20px;
   }
}

/* Final CTA */
.cmp-v2 .cmp-cta {
   text-align: center;
}

.cmp-v2 .cmp-cta-title {
   margin: 0;
   font-size: 24px;
}

.cmp-v2 .cmp-cta-text {
   margin: 10px auto 0;
   max-width: 620px;
   font-size: 16px;
}

@media (min-width: 960px) {
   .cmp-v2 .cmp-cta-title {
      font-size: 32px;
   }

   .cmp-v2 .cmp-cta-text {
      font-size: 18px;
   }
}