/* ---------------------------------------------------------------- */
/* eSIM plan card (templates/default/dest_v2_plan_card.php, the     */
/* app's ProductCardV2). The site's only plan card: v2 pages use it */
/* directly, every classic slot through product_block.php, so the  */
/* rules are scoped by .dv2-plan alone and carry their own palette, */
/* font and button styles. Share button: css/share_menu_v2.css.     */
/* ---------------------------------------------------------------- */

/* Poppins 500/600/700 (same files as destination_v2.css and the v2
   homepage; only downloaded on pages that show a card). */
@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;
}

.dv2-plan {
   --dv2-navy: #14183A;
   --dv2-pink: #E8236E;
   --dv2-pink-dark: #C2145A;
   --dv2-slate: #5B6178;
   --dv2-body: #4A4F63;
   --dv2-muted: #8A8FA3;
   --dv2-neutral: #F3F5F9;
   --dv2-border: #E4E8F0;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   min-width: 0;
   background: #fff;
   border: 1px solid var(--dv2-border);
   border-radius: 20px;
   box-shadow: 0 4px 12px rgba(20, 24, 58, 0.04);
   overflow: hidden;
   font-family: 'Poppins', 'proxima-nova', Arial, Helvetica, sans-serif;
   color: var(--dv2-body);
   text-align: left;
}

.dv2-plan[hidden] {
   display: none;
}

.dv2-plan > * + * {
   border-top: 1px solid var(--dv2-border);
}

.dv2-plan a {
   color: var(--dv2-navy);
}

.dv2-plan a:hover {
   color: var(--dv2-navy);
}

/* Classic grid cell around the card (product_block.php): the card fills
   it, so cards in a uk-grid-match row or slider share one height. */
.esim-product-v2 {
   display: flex;
}

.esim-product-v2 > .dv2-plan {
   flex: 1 1 auto;
   width: 100%;
}

/* Header: flag, title, one badge, share. A grid so narrow cards (the
   phone slider) can move the badge under the title (container query).
   The title block always reserves two title lines plus the scope line and
   the badge slot (.dv2-plan-badge, always rendered) reserves its row on
   narrow cards, so every header in a row has the same height and the
   dividers below line up. */
.dv2-plan .dv2-plan-head {
   position: relative;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto auto;
   align-items: center;
   padding: 14px 16px 12px;
   container-type: inline-size;
}

.dv2-plan .dv2-plan-flag {
   grid-column: 1;
   grid-row: 1;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   object-fit: cover;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.dv2-plan .dv2-plan-flag-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--dv2-neutral);
   color: var(--dv2-slate);
   box-shadow: none;
}

/* 2 x 20px title lines + 2px gap + 16px scope line. */
.dv2-plan .dv2-plan-title {
   grid-column: 2;
   grid-row: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   box-sizing: border-box;
   min-width: 0;
   min-height: 58px;
   margin-left: 12px;
}

.dv2-plan .dv2-plan-title h3 {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   margin: 0;
   font-family: 'Poppins', sans-serif;
   font-size: 15.5px;
   font-weight: 600;
   line-height: 20px;
   letter-spacing: -0.01em;
   overflow-wrap: anywhere;
   color: var(--dv2-navy);
}

.dv2-plan .dv2-plan-title h3 a {
   color: var(--dv2-navy);
   text-decoration: none;
}

.dv2-plan .dv2-plan-title h3 a:hover {
   text-decoration: underline;
}

.dv2-plan .dv2-plan-scope {
   margin-top: 2px;
   font-size: 12px;
   line-height: 16px;
   color: var(--dv2-muted);
}

.dv2-plan .dv2-plan-badge {
   grid-column: 3;
   grid-row: 1;
   display: flex;
   min-width: 0;
}

/* Badge pill: Best value (navy), sale (seasonal gradient), Black Friday,
   Free trial. One shape for all. */
.dv2-plan .dv2-tag {
   display: inline-block;
   margin-left: 10px;
   padding: 3px 9px;
   border-radius: 999px;
   background: var(--dv2-navy);
   font-size: 11px;
   font-weight: 600;
   line-height: 16px;
   white-space: nowrap;
   color: #fff;
}

/* The same pill outside a card (product page buy card): add .dv2-badge-pill
   next to .dv2-tag. Colours are literal here as the --dv2-* variables are
   only set inside .dv2-plan / .dest-v2. */
.dv2-badge-pill {
   display: inline-block;
   padding: 3px 9px;
   border-radius: 999px;
   background: var(--dv2-navy, #14183A);
   font-size: 11px;
   font-weight: 600;
   line-height: 16px;
   white-space: nowrap;
   color: #fff;
}

.dv2-plan .dv2-plan-head .ss-share {
   grid-column: 4;
   grid-row: 1;
   margin: -4px -8px -4px 4px;
}

.dv2-plan .dv2-sale-spring,
.dv2-badge-pill.dv2-sale-spring {
   background: linear-gradient(135deg, #ff5959 0%, #ffa751 60%, #ffd96e 100%);
}

.dv2-plan .dv2-sale-summer,
.dv2-badge-pill.dv2-sale-summer {
   background: linear-gradient(135deg, #ff8a00 0%, #ffb627 60%, #ffd96e 100%);
}

.dv2-plan .dv2-sale-autumn,
.dv2-badge-pill.dv2-sale-autumn {
   background: linear-gradient(135deg, #9aad00 0%, #c97d3d 60%, #f2c572 100%);
}

.dv2-plan .dv2-sale-winter,
.dv2-badge-pill.dv2-sale-winter {
   background: linear-gradient(135deg, #3a6ea5 0%, #5b8fd1 60%, #9cc3f0 100%);
}

.dv2-plan .dv2-sale-blackfriday,
.dv2-badge-pill.dv2-sale-blackfriday {
   background: linear-gradient(135deg, #000000, #1a1a1a, #ff6b00);
}

.dv2-plan .dv2-sale-free,
.dv2-badge-pill.dv2-sale-free {
   background: var(--dv2-pink, #E8236E);
}

/* Narrow cards: the badge slot drops under the title (and keeps its 22px
   row even when empty), flag and share centre on both rows. */
@container (max-width: 300px) {
   .dv2-plan .dv2-plan-badge {
      grid-column: 2;
      grid-row: 2;
      min-height: 22px;
      margin: 5px 0 0 12px;
   }

   .dv2-plan .dv2-tag {
      margin-left: 0;
   }

   .dv2-plan .dv2-plan-flag,
   .dv2-plan .dv2-plan-head .ss-share {
      grid-row: 1 / span 2;
   }
}

.dv2-plan .dv2-plan-main {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 14px 16px 12px;
   container-type: inline-size;
}

.dv2-plan .dv2-plan-data {
   flex-shrink: 0;
   white-space: nowrap;
}

.dv2-plan .dv2-plan-data strong {
   font-size: 24px;
   font-weight: 700;
   line-height: 1.1;
   color: var(--dv2-navy);
}

.dv2-plan .dv2-plan-data span {
   margin-left: 6px;
   font-size: 13px;
   color: var(--dv2-muted);
}

/* Was-price inline, left of the price on the same baseline, so sale and
   normal cards have the same row height. If the row is too tight it wraps
   above the price; narrow cards reserve that height. */
.dv2-plan .dv2-plan-price {
   display: flex;
   flex: 0 1 auto;
   flex-wrap: wrap;
   align-items: baseline;
   align-content: center;
   justify-content: flex-end;
   column-gap: 6px;
   min-width: 0;
   white-space: nowrap;
   text-align: right;
}

.dv2-plan .dv2-plan-price s {
   font-size: 12.5px;
   line-height: 16px;
   color: var(--dv2-pink);
}

.dv2-plan .dv2-plan-price strong {
   font-size: 21px;
   font-weight: 700;
   line-height: 1.15;
   color: var(--dv2-navy);
}

/* Narrow cards (phone sliders): slightly smaller figures, and the price
   block keeps the height of the stacked was-price layout in every card. */
@container (max-width: 290px) {
   .dv2-plan .dv2-plan-data strong {
      font-size: 22px;
   }

   .dv2-plan .dv2-plan-price {
      min-height: 42px;
   }

   .dv2-plan .dv2-plan-price strong {
      font-size: 20px;
   }
}

.dv2-plan .dv2-plan-info {
   flex: 1 1 auto;
   list-style: none;
   margin: 0;
   padding: 12px 16px;
}

.dv2-plan .dv2-plan-info li {
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 0 0 7px;
   font-size: 13px;
   color: var(--dv2-navy);
}

.dv2-plan .dv2-plan-info li:last-child {
   margin-bottom: 0;
}

.dv2-plan .dv2-plan-info i {
   width: 16px;
   color: var(--dv2-muted);
   text-align: center;
}

.dv2-plan .dv2-plan-info a {
   font-weight: 500;
   text-decoration: underline;
   text-underline-offset: 2px;
}

/* Daily cap note: no icon, so it starts at the feature text (16px icon
   + 8px gap). */
.dv2-plan .dv2-plan-info .dv2-plan-note {
   display: block;
   padding-left: 24px;
   font-size: 12px;
   line-height: 1.4;
   color: var(--dv2-muted);
}

.dv2-plan .dv2-plan-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   padding: 10px 16px;
   border-top: 0 !important;
}

.dv2-plan .dv2-chip {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 3px 10px;
   border-radius: 999px;
   background: var(--dv2-neutral);
   border: 1px solid var(--dv2-border);
   font-size: 11.5px;
   font-weight: 600;
   line-height: 1.5;
   color: var(--dv2-slate);
   text-decoration: none;
}

.dv2-plan a.dv2-chip:hover {
   color: var(--dv2-navy);
   text-decoration: none;
}

/* "What differs" chip on same-size twin plans */
.dv2-plan .dv2-chip-diff {
   background: #fff;
   color: var(--dv2-navy);
}

.dv2-plan .dv2-plan-actions {
   display: flex;
   gap: 10px;
   padding: 12px 12px 14px;
}

.dv2-plan .dv2-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   box-sizing: border-box;
   height: 44px;
   padding: 0 20px;
   border: 0;
   border-radius: 999px;
   font-family: inherit;
   font-size: 14px;
   font-weight: 600;
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
   transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.dv2-plan .dv2-btn-primary {
   background: var(--dv2-pink);
   color: #fff;
}

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

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

.dv2-plan .dv2-btn-ghost:hover {
   border-color: var(--dv2-navy);
   color: var(--dv2-navy);
   text-decoration: none;
}

.dv2-plan .dv2-plan-actions .dv2-btn {
   flex: 1 1 0;
   min-width: 0;
   padding: 0 10px;
   font-size: 14px;
}

/* Classic card containers (product_container.php and friends) paint every
   .add-to-basket green with !important; the card keeps its pink. */
.dv2-plan .dv2-plan-actions .add-to-basket {
   background: var(--dv2-pink) !important;
   color: #fff;
}

.dv2-plan .dv2-plan-actions .add-to-basket:hover {
   background: var(--dv2-pink-dark) !important;
   color: #fff;
}

@media (prefers-reduced-motion: reduce) {
   .dv2-plan .dv2-btn {
      transition: none;
   }
}

/* ---------------------------------------------------------------- */
/* Network information modal on the eSIM plan cards                */
/* (templates/default/_network_modal.php, #operator-modal-<id>.pbm, */
/* included by dest_v2_plan_card.php).                              */
/* UIkit moves the modal to <body>, so rules are scoped by .pbm.    */
/* ---------------------------------------------------------------- */
.pbm {
   --pbm-navy: #14183A;
   --pbm-text: #4A4F63;
   --pbm-muted: #6B7085;
   --pbm-tile: #f4f4f6;
   --pbm-line: #e7e7ec;
   --pbm-pink: #E8236E;
}

.pbm .pbm-dialog {
   display: flex;
   flex-direction: column;
   width: 520px;
   max-width: 100%;
   max-height: calc(100vh - 100px);
   padding: 0;
   border-radius: 20px;
   overflow: hidden;
   background: #fff;
   box-shadow: 0 20px 50px rgba(20, 24, 58, 0.22);
   font-family: 'Poppins', sans-serif;
   color: var(--pbm-text);
}

/* Header stays put while the body scrolls */
.pbm .pbm-head {
   display: flex;
   align-items: center;
   gap: 12px;
   flex: 0 0 auto;
   padding: 24px 28px 16px;
   border-bottom: 1px solid var(--pbm-line);
}

.pbm .pbm-head-flag {
   flex: 0 0 44px;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   overflow: hidden;
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.10);
}

.pbm .pbm-head-flag img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.pbm .pbm-head-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--pbm-tile);
   box-shadow: none;
   color: var(--pbm-navy);
   font-size: 20px;
}

.pbm .pbm-head-text {
   flex: 1 1 auto;
   min-width: 0;
}

.pbm .pbm-title {
   margin: 0;
   font-family: 'Poppins', sans-serif;
   font-size: 21px;
   line-height: 1.25;
   font-weight: 700;
   color: var(--pbm-navy);
   overflow-wrap: anywhere;
}

.pbm .pbm-subtitle {
   margin: 2px 0 0;
   font-size: 13px;
   color: var(--pbm-muted);
}

.pbm .pbm-close {
   flex: 0 0 40px;
   align-self: flex-start;
   width: 40px;
   height: 40px;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background: var(--pbm-tile);
   color: var(--pbm-navy);
   font-size: 17px;
   line-height: 40px;
   text-align: center;
   cursor: pointer;
   transition: background .15s ease;
}

.pbm .pbm-close:hover,
.pbm .pbm-close:focus-visible {
   background: #e8e8ec;
}

.pbm .pbm-close:focus-visible {
   outline: 2px solid var(--pbm-navy);
   outline-offset: 2px;
}

.pbm .pbm-body {
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   overscroll-behavior: contain;
   padding: 18px 28px 28px;
}

/* Stat chips: 2x2 */
.pbm .pbm-stats {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.pbm .pbm-stats li {
   display: flex;
   align-items: center;
   gap: 10px;
   min-width: 0;
   margin: 0;
   padding: 9px 12px;
   border-radius: 14px;
   background: var(--pbm-tile);
}

.pbm .pbm-stat-icon {
   display: flex;
   flex: 0 0 30px;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: #fff;
   color: var(--pbm-pink);
   font-size: 13px;
}

.pbm .pbm-stats strong {
   display: block;
   font-size: 14px;
   line-height: 1.2;
   font-weight: 700;
   color: var(--pbm-navy);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.pbm .pbm-stats small {
   display: block;
   font-size: 11.5px;
   line-height: 1.3;
   color: var(--pbm-muted);
}

.pbm .pbm-stats li > span:last-child {
   min-width: 0;
}

.pbm .pbm-section {
   margin: 22px 0 10px;
   font-family: 'Poppins', sans-serif;
   font-size: 15px;
   line-height: 1.3;
   font-weight: 600;
   color: var(--pbm-navy);
}

/* Covered countries: round flag + name chips */
.pbm .pbm-countries {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
   gap: 6px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.pbm .pbm-countries.is-many {
   max-height: 236px;
   overflow-y: auto;
   padding-right: 4px;
   overscroll-behavior: contain;
}

.pbm .pbm-countries li {
   margin: 0;
   min-width: 0;
}

.pbm .pbm-countries a,
.pbm .pbm-countries .pbm-chip {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 6px 10px 6px 6px;
   border-radius: 999px;
   background: var(--pbm-tile);
   color: var(--pbm-navy);
   font-size: 13.5px;
   line-height: 1.2;
   text-decoration: none;
   transition: background .15s ease;
}

.pbm .pbm-countries a:hover {
   background: #e8e8ec;
   color: var(--pbm-navy);
}

.pbm .pbm-flag {
   display: inline-block;
   flex: 0 0 auto;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   overflow: hidden;
   background: #e3e3e8;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.pbm .pbm-flag img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.pbm .pbm-name {
   min-width: 0;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

/* Network operators */
.pbm .pbm-ops {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
   gap: 6px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.pbm .pbm-ops li {
   display: flex;
   align-items: center;
   gap: 10px;
   margin: 0;
   padding: 8px 12px 8px 8px;
   border-radius: 14px;
   background: var(--pbm-tile);
   color: var(--pbm-navy);
   font-size: 14px;
   font-weight: 600;
   line-height: 1.25;
}

.pbm .pbm-op-icon {
   display: flex;
   flex: 0 0 26px;
   align-items: center;
   justify-content: center;
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: #fff;
   color: #1f8a4c;
   font-size: 11px;
}

.pbm .pbm-op-groups {
   border-radius: 14px;
   background: var(--pbm-tile);
}

.pbm .pbm-op-groups.is-many {
   max-height: 300px;
   overflow-y: auto;
   overscroll-behavior: contain;
}

.pbm .pbm-op-group {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 9px 12px;
   border-top: 1px solid var(--pbm-line);
   font-size: 13.5px;
   line-height: 1.35;
}

.pbm .pbm-op-group:first-child {
   border-top: 0;
}

.pbm .pbm-op-country {
   display: flex;
   flex: 0 0 42%;
   align-items: center;
   gap: 8px;
   min-width: 0;
   font-weight: 600;
   color: var(--pbm-navy);
}

.pbm .pbm-op-country .pbm-flag {
   width: 20px;
   height: 20px;
   align-self: center;
}

.pbm .pbm-op-names {
   flex: 1 1 auto;
   min-width: 0;
   color: var(--pbm-text);
}

.pbm .pbm-empty {
   margin: 0;
   padding: 10px 12px;
   border-radius: 14px;
   background: var(--pbm-tile);
   font-size: 13.5px;
}

/* Phones: bottom sheet that scrolls inside, close button always visible */
@media (max-width: 639px) {
   .pbm.uk-modal {
      padding: 0;
   }

   .pbm .pbm-dialog {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      max-height: 88vh;
      max-height: 88dvh;
      margin: 0;
      border-radius: 20px 20px 0 0;
      transform: translateY(40px);
   }

   .pbm.uk-open .pbm-dialog {
      transform: translateY(0);
   }

   .pbm .pbm-head {
      padding: 18px 20px 14px;
   }

   .pbm .pbm-head-flag {
      flex-basis: 40px;
      width: 40px;
      height: 40px;
   }

   .pbm .pbm-title {
      font-size: 19px;
   }

   .pbm .pbm-body {
      padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
   }

   .pbm .pbm-countries {
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
   }

   .pbm .pbm-op-group {
      flex-direction: column;
      align-items: stretch;
      gap: 2px;
   }

   .pbm .pbm-op-country {
      flex-basis: auto;
   }
}

@media (prefers-reduced-motion: reduce) {
   .pbm .pbm-close,
   .pbm .pbm-countries a {
      transition: none;
   }
}