/*
 * Data cost comparison (templates/default/data_cost_comparison.php).
 * Loaded in <head> by index::data_cost_comparison() after
 * destination_v2.css; every rule is scoped to .cmp-v2. Same look as the
 * data calculator: white cards, neutral grey fills and borders, navy text
 * and figures. Brand pink is used for the CTA buttons only.
 */

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

.cmp-v2 .cmp-hero-copy {
   margin-top: 16px;
   max-width: 760px;
}

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

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

/* Info banner */
.cmp-v2 .cmp-note {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-top: 20px;
   padding: 14px;
   border: 1px solid var(--cmp-border);
   border-radius: 16px;
   background: #fff;
}

.cmp-v2 .cmp-note p {
   margin: 0;
   font-size: 13px;
   line-height: 1.45;
   color: var(--cmp-navy);
}

.cmp-v2 small {
   display: block;
   margin-top: 2px;
   font-size: 11.5px;
   line-height: 1.3;
   color: var(--cmp-text2);
}

.cmp-v2 .cmp-price {
   display: block;
   font-size: 14px;
   font-weight: 600;
   line-height: 1.3;
   color: var(--cmp-navy);
}

.cmp-v2 .cmp-save {
   display: inline-block;
   margin-top: 6px;
   padding: 3px 9px;
   border-radius: 999px;
   background: var(--cmp-navy);
   font-size: 11px;
   font-weight: 600;
   line-height: 1.3;
   color: #fff;
   white-space: nowrap;
}

.cmp-v2 .cmp-muted-link {
   font-size: 12.5px;
   font-weight: 600;
   color: var(--cmp-navy);
}

/* ---------------------------------------------------------------- */
/* Table (960px and up)                                             */
/* ---------------------------------------------------------------- */
.cmp-v2 .cmp-table-wrap {
   display: none;
}

@media (min-width: 960px) {
   .cmp-v2 .cmp-table-wrap {
      display: block;
      margin-top: 16px;
      overflow-x: auto;
      border: 1px solid var(--cmp-border);
      border-radius: 20px;
      background: #fff;
      box-shadow: var(--cmp-shadow);
   }

   .cmp-v2 .cmp-cards {
      display: none;
   }
}

.cmp-v2 .cmp-table {
   width: 100%;
   min-width: 900px;
   border-collapse: collapse;
   font-size: 14px;
}

.cmp-v2 .cmp-table th,
.cmp-v2 .cmp-table td {
   padding: 14px 12px;
   border-bottom: 1px solid var(--cmp-border);
   text-align: center;
   vertical-align: middle;
}

.cmp-v2 .cmp-table tbody tr:last-child th,
.cmp-v2 .cmp-table tbody tr:last-child td {
   border-bottom: 0;
}

.cmp-v2 .cmp-table thead th {
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .3px;
   color: var(--cmp-navy);
   white-space: nowrap;
}

.cmp-v2 .cmp-table thead th img {
   display: block;
   width: 28px;
   height: 28px;
   margin: 0 auto 6px;
   object-fit: contain;
}

.cmp-v2 .cmp-table thead .cmp-th-country {
   text-align: left;
}

.cmp-v2 .cmp-table thead th span {
   display: block;
   margin-top: 2px;
   font-size: 11px;
   font-weight: 500;
   letter-spacing: 0;
   color: var(--cmp-text2);
}

.cmp-v2 .cmp-table .cmp-country {
   text-align: left;
   white-space: nowrap;
}

.cmp-v2 .cmp-country img {
   width: 28px;
   height: 28px;
   margin-right: 10px;
   border-radius: 50%;
   object-fit: cover;
   vertical-align: middle;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.cmp-v2 .cmp-country a,
.cmp-v2 .cmp-country span {
   font-size: 14.5px;
   font-weight: 600;
   color: var(--cmp-navy);
   text-decoration: none;
   vertical-align: middle;
}

.cmp-v2 .cmp-country a:hover {
   text-decoration: underline;
}

.cmp-v2 .cmp-table tbody tr:hover td,
.cmp-v2 .cmp-table tbody tr:hover th {
   background: #FAFBFC;
}

/* Our column: neutral grey band, navy figures. */
.cmp-v2 .cmp-table .cmp-ours-col {
   min-width: 150px;
   background: var(--cmp-soft);
}

.cmp-v2 .cmp-table tbody tr:hover .cmp-ours-col {
   background: #EEF0F3;
}

.cmp-v2 .cmp-table td.cmp-ours-col strong {
   display: block;
   font-size: 16px;
   font-weight: 700;
   color: var(--cmp-navy);
   white-space: nowrap;
}

/* ---------------------------------------------------------------- */
/* Cards (below 960px)                                              */
/* ---------------------------------------------------------------- */
.cmp-v2 .cmp-cards {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 12px;
   margin: 16px 0 0;
   padding: 0;
   list-style: none;
}

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

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

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

.cmp-v2 .cmp-card-head img {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   object-fit: cover;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.cmp-v2 .cmp-card-head h2 {
   margin: 0;
   font-size: 17px;
   font-weight: 600;
   letter-spacing: 0;
}

.cmp-v2 .cmp-card-ours {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   margin-top: 12px;
   padding: 12px;
   border-radius: 14px;
   background: var(--cmp-soft);
}

.cmp-v2 .cmp-card-ours .cmp-save {
   margin-top: 0;
}

.cmp-v2 .cmp-label {
   display: block;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1.2px;
   text-transform: uppercase;
   color: var(--cmp-text3);
}

.cmp-v2 .cmp-card-ours strong {
   display: block;
   margin-top: 2px;
   font-size: 20px;
   font-weight: 700;
   line-height: 1.2;
   color: var(--cmp-navy);
}

.cmp-v2 .cmp-card-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px;
   margin: 10px 0 0;
}

.cmp-v2 .cmp-card-grid > div {
   min-width: 0;
   padding: 10px 12px;
   border: 1px solid var(--cmp-border);
   border-radius: 12px;
}

.cmp-v2 .cmp-card-grid dt {
   font-size: 11.5px;
   font-weight: 600;
   color: var(--cmp-text2);
}

.cmp-v2 .cmp-card-grid dd {
   margin: 2px 0 0;
}

.cmp-v2 .cmp-card .cmp-btn {
   width: 100%;
   margin-top: 12px;
}

/* ---------------------------------------------------------------- */
/* Buttons                                                          */
/* ---------------------------------------------------------------- */
.cmp-v2 .cmp-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   height: 44px;
   padding: 0 22px;
   border: 0;
   border-radius: 999px;
   background: var(--cmp-accent);
   font-size: 14px;
   font-weight: 600;
   color: #fff;
   text-decoration: none;
   white-space: nowrap;
   transition: background-color .15s ease;
}

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

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

.cmp-v2 .cmp-btn-ghost:hover {
   background: var(--cmp-soft);
   color: var(--cmp-navy);
}

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

/* ---------------------------------------------------------------- */
/* Features, CTA, disclaimer                                        */
/* ---------------------------------------------------------------- */
.cmp-v2 .cmp-features {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 12px;
   margin-top: 16px;
}

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

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

.cmp-v2 .cmp-feature {
   box-sizing: border-box;
   padding: 18px 20px;
   border: 1px solid var(--cmp-border);
   border-radius: 20px;
   background: #fff;
   box-shadow: var(--cmp-shadow);
}

.cmp-v2 .cmp-feature h3 {
   margin: 12px 0 6px;
   font-size: 16px;
   font-weight: 600;
}

.cmp-v2 .cmp-feature p {
   margin: 0;
   font-size: 14px;
   line-height: 1.6;
}

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

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

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

.cmp-v2 .cmp-cta-actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px;
   margin-top: 18px;
}

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

.cmp-v2 .cmp-disclaimer {
   margin: 24px 0 0;
   font-size: 12px;
   line-height: 1.5;
   color: var(--cmp-text3);
}