/* PaygeSIM — one stylesheet for the whole site.
   Built from the design export. Shared rules first, then the per-page
   hover classes (.x0-.x8), which the exporter numbers PER PAGE and which
   therefore MUST stay scoped to a page or they overwrite each other. */

/* ---- base ---- */
:root{--bs-primary:#d1476b;--bs-primary-rgb:209,71,107;
  --bs-body-font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bs-body-color:#05052c;--bs-body-bg:#dfe1e3;--bs-secondary-color:#6f7480;
  --bs-border-color:#ececee;--bs-border-radius:1rem;--bs-link-decoration:none;}
html,body{background:#dfe1e3}
body{font-family:var(--bs-body-font-family);color:#05052c;-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:#d1476b;text-decoration:none}
a:hover{color:#ae3557}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em}
input::placeholder{color:#a3a7b0}

/* ---- components ---- */
.btn:focus-visible,.nav-link:focus-visible,.form-control:focus-visible,a:focus-visible{outline:2px solid #d1476b;outline-offset:2px}
.btn:focus-visible,.nav-link:focus-visible,a:focus-visible{outline:2px solid #d1476b;outline-offset:2px}
.navbar-toggler:focus{box-shadow:none}
.pm-dest .lbl{transition:opacity .18s ease}
.pm-dest .px{opacity:0;transition:opacity .18s ease}
.pm-dest:hover .lbl,.pm-dest:focus-visible .lbl{opacity:0}
.pm-dest:hover .px,.pm-dest:focus-visible .px{opacity:1}
.pm-marquee{mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.pm-marquee:hover .pm-track{animation-play-state:paused}
.pm-qty:disabled{opacity:.35;cursor:not-allowed}
.pm-scroll{scrollbar-width:none}
.pm-scroll::-webkit-scrollbar{display:none}
.pm-see .bi-chevron-down{transform:rotate(180deg);transition:transform .2s ease}
.pm-see .lbl-less,.pm-see.collapsed .lbl-more{display:inline}
.pm-see .lbl-more,.pm-see.collapsed .lbl-less{display:none}
.pm-see.collapsed .bi-chevron-down{transform:rotate(0)}
.pm-track{animation:pm-marquee 42s linear infinite;width:max-content}
.x9:hover{color:#d1476b !important}

/* ---- keyframes and media ---- */
/* Touch devices: the .px price span carries position:absolute as an INLINE style,
   so the design's position:static here never applied and the price rendered on top
   of the country name. Inline beats a stylesheet rule, hence !important. */
@media (hover:none){
  .pm-dest{flex-wrap:nowrap}
  .pm-dest .px{position:static!important;inset:auto!important;opacity:1;font-size:13px;font-weight:500;color:#6f7480;display:block!important;white-space:nowrap}
  .pm-dest .lbl{opacity:1}
}
@media (min-width:992px){.pm-sticky{position:sticky;top:24px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}}
@keyframes pm-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}.pm-track{animation:none !important;transform:none !important}.pm-marquee{overflow-x:auto !important}}

/* ---- per-page hover classes, scoped by the body class ---- */
/* affiliate-program */
body.p-affiliate-program .x0:hover{border-color:#dfe1e6 !important;color:#d1476b !important}
body.p-affiliate-program .x1:hover{border-color:#dfe1e6 !important}
body.p-affiliate-program .x2:hover{background:#1b1b4d !important}
body.p-affiliate-program .x3:hover{border-color:#d1476b !important;color:#d1476b !important}
body.p-affiliate-program .x4:hover{background:#b93a5b !important}
body.p-affiliate-program .x5:hover{border-color:#6f7096 !important}
body.p-affiliate-program .x6:hover{color:#d1476b !important}
/* belgium-esim */
body.p-belgium-esim .x0:hover{border-color:#f4cdd8 !important;color:#d1476b !important}
body.p-belgium-esim .x1:hover{border-color:#f4cdd8 !important}
body.p-belgium-esim .x2:hover{background:#1b1b4d !important}
body.p-belgium-esim .x3:hover{border-color:#d1476b !important}
body.p-belgium-esim .x4:hover{background:#ae3557 !important}
body.p-belgium-esim .x5:hover{border-color:#d1476b !important;color:#d1476b !important}
body.p-belgium-esim .x6:hover{color:#d1476b !important}
/* cart */
body.p-cart .x0:hover{border-color:#dfe1e6 !important}
body.p-cart .x1:hover{background:#1b1b4d !important}
body.p-cart .x2:hover{color:#05052c !important}
body.p-cart .x3:hover{background:#f5f6f8 !important}
body.p-cart .x4:hover{background:#f5f6f8 !important;color:#d1476b !important}
body.p-cart .x5:hover{background:#b83a5b !important}
body.p-cart .x6:hover{border-color:#d1476b !important;color:#d1476b !important}
body.p-cart .x7:hover{color:#d1476b !important}
/* checkout */
body.p-checkout .x0:hover{border-color:#dfe1e6 !important}
body.p-checkout .x1:hover{background:#1b1b4d !important}
body.p-checkout .x2:hover{color:#05052c !important}
body.p-checkout .x3:hover{border-color:#05052c !important}
body.p-checkout .x4:hover{background:#b83a5b !important}
body.p-checkout .x5:hover{border-color:#d1476b !important;color:#d1476b !important}
body.p-checkout .x6:hover{color:#d1476b !important}
/* compatible-devices */
body.p-compatible-devices .x0:hover{border-color:#dfe1e6 !important;color:#d1476b !important}
body.p-compatible-devices .x1:hover{border-color:#dfe1e6 !important}
body.p-compatible-devices .x2:hover{background:#1b1b4d !important}
body.p-compatible-devices .x3:hover{border-color:#d1476b !important;color:#d1476b !important}
body.p-compatible-devices .x4:hover{background:#b93a5b !important}
body.p-compatible-devices .x5:hover{border-color:#6f7096 !important}
body.p-compatible-devices .x6:hover{color:#d1476b !important}
/* contact-us */
body.p-contact-us .x0:hover{border-color:#dfe1e6 !important;color:#d1476b !important}
body.p-contact-us .x1:hover{border-color:#dfe1e6 !important}
body.p-contact-us .x2:hover{background:#1b1b4d !important}
body.p-contact-us .x3:hover{background:#b93a5b !important}
body.p-contact-us .x4:hover{border-color:#6f7096 !important}
body.p-contact-us .x5:hover{border-color:#d1476b !important;color:#d1476b !important}
body.p-contact-us .x6:hover{color:#d1476b !important}
/* dashboard */
body.p-dashboard .x0:hover{border-color:#dfe1e6 !important;color:#d1476b !important}
body.p-dashboard .x1:hover{border-color:#dfe1e6 !important}
body.p-dashboard .x2:hover{border-color:#d1476b !important}
body.p-dashboard .x3:hover{background:#b93a5b !important}
body.p-dashboard .x4:hover{border-color:#d1476b !important;color:#d1476b !important}
body.p-dashboard .x5:hover{background:#05052c !important;color:#fff !important}
body.p-dashboard .x6:hover{background:#1b1b4d !important}
body.p-dashboard .x7:hover{color:#d1476b !important}
/* destinations */
body.p-destinations .x0:hover{border-color:#dfe1e6 !important;color:#d1476b !important}
body.p-destinations .x1:hover{border-color:#dfe1e6 !important}
body.p-destinations .x2:hover{background:#1b1b4d !important}
body.p-destinations .x3:hover{background:#b83a5b !important}
body.p-destinations .x4:hover{border-color:#dfe1e6 !important;box-shadow:0 10px 24px rgba(5,5,44,.07) !important}
body.p-destinations .x5:hover{border-color:#dfe1e6 !important;box-shadow:0 14px 30px rgba(5,5,44,.09) !important}
body.p-destinations .x6:hover{border-color:#d1476b !important;color:#d1476b !important}
body.p-destinations .x7:hover{color:#d1476b !important}
/* esim-details */
body.p-esim-details .x0:hover{border-color:#dfe1e6 !important;color:#d1476b !important}
body.p-esim-details .x1:hover{border-color:#dfe1e6 !important}
body.p-esim-details .x2:hover{background:#1b1b4d !important}
body.p-esim-details .x3:hover{color:#05052c !important}
body.p-esim-details .x4:hover{background:#b83a5b !important}
body.p-esim-details .x5:hover{border-color:#05052c !important}
body.p-esim-details .x6:hover{border-color:#dfe1e6 !important;box-shadow:0 10px 24px rgba(5,5,44,.07) !important}
body.p-esim-details .x7:hover{border-color:#d1476b !important;color:#d1476b !important}
body.p-esim-details .x8:hover{color:#d1476b !important}
/* global-esim */
body.p-global-esim .x0:hover{border-color:#dfe1e6 !important;color:#d1476b !important}
body.p-global-esim .x1:hover{border-color:#dfe1e6 !important}
body.p-global-esim .x2:hover{background:#1b1b4d !important}
body.p-global-esim .x3:hover{background:#d1476b !important;color:#fff !important}
body.p-global-esim .x4:hover{background:#b93a5b !important}
body.p-global-esim .x5:hover{border-color:#d1476b !important;color:#d1476b !important}
body.p-global-esim .x6:hover{color:#d1476b !important}
/* how-it-works */
body.p-how-it-works .x0:hover{border-color:#dfe1e6 !important;color:#d1476b !important}
body.p-how-it-works .x1:hover{border-color:#dfe1e6 !important}
body.p-how-it-works .x2:hover{background:#1b1b4d !important}
body.p-how-it-works .x3:hover{background:#b93a5b !important}
body.p-how-it-works .x4:hover{border-color:#6f7096 !important}
body.p-how-it-works .x5:hover{border-color:#d1476b !important;color:#d1476b !important}
body.p-how-it-works .x6:hover{color:#d1476b !important}
/* index */
body.p-index .x0:hover{border-color:#dfe1e6 !important;color:#d1476b !important}
body.p-index .x1:hover{border-color:#dfe1e6 !important}
body.p-index .x2:hover{background:#1b1b4d !important}
body.p-index .x3:hover{border-color:#dfe1e6 !important;box-shadow:0 10px 24px rgba(5,5,44,.07) !important}
body.p-index .x4:hover{border-color:#dfe1e6 !important;box-shadow:0 12px 28px rgba(5,5,44,.08) !important}
body.p-index .x5:hover{opacity:.94 !important}
body.p-index .x6:hover{box-shadow:0 24px 54px rgba(5,5,44,.2) !important}
body.p-index .x7:hover{background:#186139 !important}
body.p-index .x8:hover{border-color:#d1476b !important;color:#d1476b !important}
/* installation-guide */
body.p-installation-guide .x0:hover{border-color:#dfe1e6 !important;color:#d1476b !important}
body.p-installation-guide .x1:hover{border-color:#dfe1e6 !important}
body.p-installation-guide .x2:hover{background:#1b1b4d !important}
body.p-installation-guide .x3:hover{background:#b93a5b !important}
body.p-installation-guide .x4:hover{border-color:#6f7096 !important}
body.p-installation-guide .x5:hover{border-color:#d1476b !important;color:#d1476b !important}
body.p-installation-guide .x6:hover{color:#d1476b !important}
/* login */
body.p-login .x0:hover{border-color:#dfe1e6 !important;color:#d1476b !important}
body.p-login .x1:hover{border-color:#dfe1e6 !important}
body.p-login .x2:hover{border-color:#d1476b !important;color:#d1476b !important}
body.p-login .x3:hover{background:#b93a5b !important}
body.p-login .x4:hover{border-color:#c9ccd4 !important}
body.p-login .x5:hover{color:#d1476b !important}
/* my-esims */
body.p-my-esims .x0:hover{border-color:#dfe1e6 !important;color:#d1476b !important}
body.p-my-esims .x1:hover{border-color:#dfe1e6 !important}
body.p-my-esims .x2:hover{background:#1b1b4d !important}
body.p-my-esims .x3:hover{background:#b83a5b !important}
body.p-my-esims .x4:hover{border-color:#05052c !important}
body.p-my-esims .x5:hover{border-color:#d1476b !important;color:#d1476b !important}
body.p-my-esims .x6:hover{color:#d1476b !important}
/* order-success */
body.p-order-success .x0:hover{border-color:#dfe1e6 !important;color:#d1476b !important}
body.p-order-success .x1:hover{border-color:#dfe1e6 !important}
body.p-order-success .x2:hover{background:#1b1b4d !important}
body.p-order-success .x3:hover{border-color:#05052c !important}
body.p-order-success .x4:hover{border-color:#d1476b !important;color:#d1476b !important}
body.p-order-success .x5:hover{color:#d1476b !important}
/* privacy-policy */
body.p-privacy-policy .x0:hover{border-color:#dfe1e6 !important;color:#d1476b !important}
body.p-privacy-policy .x1:hover{border-color:#dfe1e6 !important}
body.p-privacy-policy .x2:hover{background:#1b1b4d !important}
body.p-privacy-policy .x3:hover{color:#d1476b !important}
body.p-privacy-policy .x4:hover{border-color:#d1476b !important;color:#d1476b !important}
/* refund-policy */
body.p-refund-policy .x0:hover{border-color:#dfe1e6 !important;color:#d1476b !important}
body.p-refund-policy .x1:hover{border-color:#dfe1e6 !important}
body.p-refund-policy .x2:hover{background:#1b1b4d !important}
body.p-refund-policy .x3:hover{color:#d1476b !important}
body.p-refund-policy .x4:hover{border-color:#d1476b !important;color:#d1476b !important}
/* reviews */
body.p-reviews .x0:hover{border-color:#dfe1e6 !important;color:#d1476b !important}
body.p-reviews .x1:hover{border-color:#dfe1e6 !important}
body.p-reviews .x2:hover{background:#1b1b4d !important}
body.p-reviews .x3:hover{border-color:#d1476b !important;color:#d1476b !important}
body.p-reviews .x4:hover{background:#b93a5b !important}
body.p-reviews .x5:hover{border-color:#6f7096 !important}
body.p-reviews .x6:hover{color:#d1476b !important}
/* terms-and-conditions */
body.p-terms-and-conditions .x0:hover{border-color:#dfe1e6 !important;color:#d1476b !important}
body.p-terms-and-conditions .x1:hover{border-color:#dfe1e6 !important}
body.p-terms-and-conditions .x2:hover{background:#1b1b4d !important}
body.p-terms-and-conditions .x3:hover{color:#d1476b !important}
body.p-terms-and-conditions .x4:hover{border-color:#d1476b !important;color:#d1476b !important}

/* ============================================================
   RESPONSIVE FIXES
   The design has no mobile handling for three things. Measured at
   375px: nothing scrolls sideways, so this content was being CLIPPED
   and hidden rather than reachable. Fixed in CSS only, the markup is
   untouched.
   ============================================================ */

/* 1. Hero search: the input carries an inline min-width:172px, so the
      Search button was pushed to 404px on a 375px screen and cut off. */
@media (max-width:575.98px){
  form .form-control[type="search"]{min-width:0!important}
  form .btn.flex-shrink-0{padding-left:16px!important;padding-right:16px!important}
  form .btn.flex-shrink-0 span{display:none}      /* keep the magnifier, drop the word */
}

/* 2. Pill tab rows, ONE LINE, FULL WIDTH.
      Measured at 375px: Countries 116 + Regional Plans 148 +
      International eSIM 174 = 438px of buttons in a 275px space, so the last
      tab was cut off mid-word. Scrolling hid the problem, wrapping looked
      worse, so the row stays on one line with type and padding that scale
      with the viewport. The row is also stretched to the full section width
      and the tabs spread across it, because as an inline-flex pill it left
      dead space either side while the cards below it filled the row.
      Width recovered: page frame 16px -> 10px, section 34px -> 12px. */
@media (max-width:767.98px){
  #top{padding-left:10px!important;padding-right:10px!important}
  #destinations{padding-left:12px!important;padding-right:12px!important}
  #specs > .text-center{padding-left:8px;padding-right:8px}

  .nav-pills.flex-nowrap{
    display:flex!important;
    width:100%;
    flex-wrap:nowrap!important;
    padding:4px!important;
    gap:2px!important;
  }
  /* grow from content width, so two tabs split the row evenly and three keep
     their natural proportions. space-between left a dead gap with two tabs
     and made the active pill look stranded. */
  .nav-pills.flex-nowrap .nav-item{flex:1 1 auto;min-width:0}
  .nav-pills.flex-nowrap .nav-link{
    width:100%;
    text-align:center;
    font-size:clamp(10px,3.3vw,15px)!important;
    padding:10px clamp(6px,2vw,18px)!important;
    white-space:nowrap;
  }
}

/* 3. The comparison table needs nothing: the design already wraps it in a
      parent with overflow-x:auto, so it scrolls. An earlier rule here forced
      display:block and pinned it to 720px, which was worse. Left alone. */

/* 4. Long country names must not push a destination card out of shape. */
@media (max-width:575.98px){
  .pm-dest{min-width:0}
  .pm-dest .lbl{min-width:0}
}

/* 5. Plan rows on country and region pages.
      Measured at 375px: the row needs 423px inside a 275px column
      (96 size + 163 description + 48 price + 32 arrow + 48 gaps + 36 padding).
      Put the description on its own line rather than clipping the price.
      Targeted by inline style, not child index, because the Popular badge
      is an extra child on some rows and would shift nth-child. */
@media (max-width:575.98px){
  #plans li > a{flex-wrap:wrap!important;gap:6px 10px!important;padding:12px 14px!important}
  /* Data size holds the left edge and pushes the price, badge and arrow to the
     right, instead of everything bunching left with dead space after it. */
  #plans li > a > [style*="min-width:96px"]{
    min-width:0!important;font-size:16px!important;margin-right:auto!important;
  }
  /* Description drops to its own line under both. */
  #plans li > a > [style*="flex:1 1 auto"]{flex:1 0 100%!important;order:9;font-size:13px!important}
}

/* 6. Destination cards go full width on a phone.
      At col-6 the card is 130px wide and leaves 40px for the country name,
      so "Afghanistan" rendered as "Afg...". */
@media (max-width:575.98px){
  #destinations .col-6, .row .col-6.col-lg-3{flex:0 0 100%;max-width:100%}
  .pm-dest .lbl{overflow:visible;text-overflow:clip;white-space:normal}
}

/* 7. The three steps row.
      On desktop it is a horizontal row with dashed dividers and "Total time"
      on the right, and it works. On mobile the dividers are hidden
      (d-none d-lg-block) and it collapses to a plain stacked list.
      Below 768px it becomes a CENTRED numbered timeline. Markup untouched. */
@media (max-width:767.98px){
  #steps{
    padding:26px 22px!important;
    gap:0!important;
    flex-direction:column;
    align-items:center!important;
    text-align:center;
  }
  #steps > ol{
    counter-reset:pgstep;
    flex-direction:column;
    flex-wrap:nowrap!important;
    align-items:center;
    gap:0!important;
    flex:1 1 auto!important;
    width:100%;
  }
  #steps > ol > li:not([aria-hidden]){
    counter-increment:pgstep;
    position:relative;
    flex:0 0 auto!important;
    width:100%;
    padding:0 0 26px!important;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  #steps > ol > li:not([aria-hidden]):last-child{padding-bottom:4px!important}

  /* the number sits above the step, centred, in place of the tiny label */
  #steps > ol > li:not([aria-hidden])::before{
    content:counter(pgstep,decimal-leading-zero);
    position:static;
    width:32px; height:32px; border-radius:50%;
    background:#d1476b; color:#fff;
    font-size:12.5px; font-weight:800; letter-spacing:.02em;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 3px 10px rgba(209,71,107,.28);
    margin:0 0 10px;
    flex:0 0 auto;
  }
  /* connector lives in the gap between steps, never through the text */
  #steps > ol > li:not([aria-hidden]):not(:last-child)::after{
    content:""; position:absolute;
    left:50%; transform:translateX(-50%);
    bottom:5px; height:16px; width:2px; border-radius:2px;
    background:linear-gradient(#f3ccd8,#f7e6ec);
  }
  #steps > ol > li:not([aria-hidden]) > span:first-child{display:none}
  #steps > ol > li:not([aria-hidden]) > span:nth-child(2){
    font-size:16px!important; margin-top:0!important;
  }
  #steps > ol > li:not([aria-hidden]) > span:nth-child(3){font-size:13.5px!important}

  /* total time: a centred pill under the timeline */
  #steps > div{
    border-left:0!important;
    padding:9px 18px 9px 14px!important;
    margin-top:16px;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center;
    gap:9px;
    background:#fdeaf0;
    border-radius:999px;
    align-self:center!important;
    flex:0 0 auto!important;
  }
  #steps > div > span:first-child{color:#ae3557!important; font-size:9.5px!important}
  #steps > div > span:last-child{margin-top:0!important; font-size:15px!important; color:#05052c}
}

/* 8. "Browse all N destinations" sat at 14.5px, bigger than the
      "POPULAR RIGHT NOW" label beside it, and the pair needed 339px in a
      331px row so it wrapped to two lines. Both scale with the viewport now
      and stay on one line down to 320px. Mobile only. */
@media (max-width:767.98px){
  #destinations .tab-pane > .d-flex{flex-wrap:nowrap!important; gap:8px!important}
  #destinations .tab-pane > .d-flex > h3{
    font-size:clamp(10px,3.2vw,13px)!important;
    letter-spacing:.06em!important;
    white-space:nowrap;
  }
  #destinations .tab-pane > .d-flex > a{
    font-size:clamp(9.5px,2.9vw,12px)!important;
    white-space:nowrap;
    flex:0 0 auto;
  }
  #destinations .tab-pane > .d-flex > a .bi{font-size:.85em!important}
}

/* ============================================================
   DESTINATION AUTOCOMPLETE
   Dropdown under any search input. Built to match the design's
   surface language: white, 1px #ececee, the same shadow scale.
   ============================================================ */
.pg-ac{
  position:fixed;
  z-index:2147483000;
  background:#fff;
  border:1px solid #ececee;
  border-radius:18px;
  box-shadow:0 18px 44px rgba(5,5,44,.14);
  overflow:hidden auto;
  text-align:left;
}
.pg-ac-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 16px;
  color:#05052c; text-decoration:none;
  border-bottom:1px solid #f4f4f6;
}
.pg-ac-item:last-child{border-bottom:0}
.pg-ac-item:hover,.pg-ac-item.is-active,.pg-ac-item:focus-visible{background:#fdeaf0;color:#05052c}
.pg-ac-item img{border-radius:4px;object-fit:cover;box-shadow:0 0 0 1px rgba(5,5,44,.08);flex:0 0 auto}
.pg-ac-globe{
  width:26px;height:18px;border-radius:4px;background:#fdeaf0;color:#d1476b;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex:0 0 auto;
}
.pg-ac-name{flex:1 1 auto;min-width:0;font-size:15px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-ac-name b{color:#d1476b;font-weight:800}
.pg-ac-price{font-size:13px;color:#6f7480;white-space:nowrap;flex:0 0 auto}
.pg-ac-empty{margin:0;padding:16px;font-size:14.5px;color:#6f7480;text-align:center}
@media (max-width:575.98px){
  .pg-ac{border-radius:14px}
  .pg-ac-item{padding:10px 13px;gap:10px}
  .pg-ac-name{font-size:14px}
  .pg-ac-price{font-size:12px}
}

/* ============================================================
   COUNTRY PAGE PLAN PICKER
   Rows select rather than buy. Only the selected row is emphasised:
   everything else sits back in grey and lifts only on hover.
   ============================================================ */
.pg-plan{
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}

/* Unselected: quiet. The design gives the Popular row a permanent pink
   border, which looked identical to the selected state and made two rows
   appear chosen at once, so it is neutralised here and Popular is marked
   by its badge alone. */
.pg-plan:not(.is-selected){
  border:1px solid #ededef!important;
  padding:14px 18px!important;
  color:#9aa3b2!important;
  box-shadow:none!important;
}
.pg-plan:not(.is-selected) [style*="flex:1 1 auto"]{color:#aeb4c0!important}
.pg-plan:not(.is-selected) [style*="border-radius:50%"]{background:#f5f6f7!important;color:#aeb4c0!important}

/* Hover is the only other highlight. */
.pg-plan:not(.is-selected):hover{
  border-color:#e2adbc!important;
  background:#fffcfd!important;
  color:#05052c!important;
}
.pg-plan:not(.is-selected):hover [style*="flex:1 1 auto"]{color:#6f7480!important}
.pg-plan:not(.is-selected):hover [style*="border-radius:50%"]{background:#fdeaf0!important;color:#d1476b!important}

/* Selected: full contrast, one crisp border, no glow.
   The earlier box-shadow read as a second outline around the row. */
.pg-plan.is-selected{
  border:2px solid #d1476b!important;
  padding:13px 17px!important;
  color:#05052c!important;
  box-shadow:none!important;
}
.pg-plan.is-selected [style*="flex:1 1 auto"]{color:#6f7480!important}
.pg-plan.is-selected > span:last-child{background:#d1476b!important;color:#fff!important}
.pg-plan.is-selected .bi-arrow-right{color:#fff}

/* Keyboard focus still needs a ring, but not on a mouse click. */
.pg-plan:focus{outline:none}
.pg-plan:focus-visible{outline:2px solid #05052c;outline-offset:3px}

.pg-buy{transition:opacity .15s ease}
.pg-buy-price{font-weight:800}

/* Technical specs: two columns of label/value ran into each other because
   each cell filled its half edge to edge. Give the value a gap it cannot
   cross and cap how far the label can push it. */
.pg-specs > div{gap:20px!important}
.pg-specs dt{flex:0 0 auto;white-space:nowrap}
.pg-specs dd{flex:1 1 auto;text-align:right;min-width:0;overflow-wrap:anywhere}
@media (min-width:576px){
  .pg-specs > div:nth-child(odd){padding-right:22px}
  .pg-specs > div:nth-child(even){padding-left:22px;border-left:1px solid #f4f4f6}
}
@media (max-width:575.98px){
  .pg-buybar{flex-direction:column;align-items:stretch!important;gap:12px!important}
  .pg-buybar .pg-buy{justify-content:center}
  /* "SELECTED PLAN" and the plan itself share one line rather than stacking,
     keeping the design's grey label and black value. */
  .pg-buybar > span:first-child{
    display:flex!important;
    align-items:baseline;
    flex-wrap:wrap;
    gap:4px 10px;
    /* label left, plan right, the same treatment as the pricing rows above */
    justify-content:space-between;
    width:100%;
  }
  .pg-buybar > span:first-child > span{display:inline-block!important}
  .pg-buybar .pg-sel-label{margin-top:0!important}
  .pg-specs > div{gap:14px!important}
  /* touch has no hover, so an unselected row must still be readable */
  .pg-plan:not(.is-selected){color:#7c8494!important}
  .pg-plan:not(.is-selected) [style*="flex:1 1 auto"]{color:#9aa1ad!important}
}

/* Country page: centre the Regular / Unlimited tabs over the plan list, and
   bring the specs card in to the same 720px as the pricing block so the two
   read as one column instead of the card spanning the whole page. */
#plans > .pg-plans > .nav-pills{
  display:flex!important;
  width:fit-content;
  margin-left:auto!important;
  margin-right:auto!important;
}
#specs > .tab-content{
  max-width:720px;
  margin-left:auto!important;
  margin-right:auto!important;
}
@media (max-width:767.98px){
  /* the mobile rule already stretches pill rows to full width; keep that */
  #plans > .pg-plans > .nav-pills{width:100%}
  /* plans block and specs card must share one inset, or they step in and out */
  #plans{padding-left:12px!important;padding-right:12px!important}
  #specs > .tab-content{margin-left:12px!important;margin-right:12px!important;padding:44px 18px 28px!important}
}

/* Refund cards: the design stacks icon, then heading, then text. Buzz wants
   the heading on the same line as the icon. Done as a small grid so the
   markup is untouched and the description still spans the full card width. */
#refunds .col-12 > .h-100{
  display:grid;
  grid-template-columns:44px 1fr;
  grid-template-areas:"icon title" "desc desc";
  column-gap:14px;
  align-items:center;
}
#refunds .col-12 > .h-100 > span:first-child{grid-area:icon}
#refunds .col-12 > .h-100 > h3{grid-area:title;margin-top:0!important}
#refunds .col-12 > .h-100 > p{grid-area:desc;margin-top:16px!important}
@media (max-width:575.98px){
  #refunds .col-12 > .h-100{column-gap:12px}
  #refunds .col-12 > .h-100 > p{margin-top:12px!important}
}

/* Comparison table scroll affordance.
   The table is 720px wide inside a ~275px scroller on a phone, so two of the
   three columns are off screen with nothing to say so. */
.pg-scrollhint{
  display:flex; align-items:center; justify-content:flex-end; gap:6px;
  margin:14px 0 -18px;
  font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#d1476b;
  transition:opacity .25s ease;
}
.pg-scrollhint .bi{font-size:12px; animation:pg-nudge 1.6s ease-in-out infinite}
.pg-scrollhint.is-gone{opacity:0; pointer-events:none}
@keyframes pg-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.pg-scrollhint .bi{animation:none}}

/* a fade on the right edge, so the table visibly continues */
.pg-scrollbox{position:relative}
.pg-scrollbox::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:44px;
  pointer-events:none; border-radius:0 20px 20px 0;
  background:linear-gradient(90deg, rgba(247,248,250,0), rgba(247,248,250,.96));
  transition:opacity .2s ease;
}
.pg-scrollbox.is-end::after{opacity:0}

@media (min-width:992px){
  .pg-scrollhint{display:none}
  .pg-scrollbox::after{display:none}
}

/* ============================================================
   MOBILE ALIGNMENT, three blocks that stack awkwardly
   ============================================================ */
@media (max-width:767.98px){

  /* 1. "Not sure your phone supports eSIM?" card. When it wraps, the link
        dropped to its own line and sat left while the card reads centred. */
  #how > .d-flex.justify-content-between{
    justify-content:center!important;
    text-align:center;
  }
  #how > .d-flex.justify-content-between > .d-flex{
    flex-direction:column;
    align-items:center!important;
    text-align:center;
  }
  #how > .d-flex.justify-content-between > a{
    justify-content:center;
    width:100%;
  }

  /* 3. "Ready to land connected?" CTA. Everything centres, buttons included,
        instead of hugging the left edge once it stacks. */
  #cta > .d-flex{
    justify-content:center!important;
    text-align:center;
  }
  #cta > .d-flex > div:first-child p{margin-left:auto;margin-right:auto}
  #cta > .d-flex > .d-flex{
    justify-content:center!important;
    width:100%;
  }
  #cta > .d-flex > .d-flex > a{flex:1 1 auto;justify-content:center;min-width:0}
}

@media (max-width:575.98px){
  /* 2. The refund reassurance strip. Centring three items where the middle one
        wraps to two lines left it looking ragged against the other two. Stack
        them left aligned so every icon and every first word share one edge. */
  #refunds .d-flex.flex-wrap.justify-content-center{
    flex-direction:column;
    align-items:flex-start!important;
    gap:12px!important;
    width:fit-content;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  #refunds .d-flex.flex-wrap.justify-content-center > span{
    align-items:flex-start!important;
    text-align:left;
  }
  #refunds .d-flex.flex-wrap.justify-content-center > span > .bi{
    margin-top:3px;
    flex:0 0 auto;
  }
}

/* Mobile nav.
   The cart is moved into the top bar by nav.js. The open menu gets its own
   white surface so it reads as a panel over the gradient hero instead of
   floating text, and clears the logo and burger.
   NOTE: target .navbar-collapse, never an id. The design gives the collapse a
   different id on every page (pmNav2 / pmCountryNav / pmNavCart), so an
   id-scoped rule only ever applies on one page. */
@media (max-width:767.98px){
  .navbar-collapse{
    margin-top:18px;
    background:#fff;
    border:1px solid #ececee;
    border-radius:18px;
    box-shadow:0 18px 44px rgba(5,5,44,.13);
    padding:10px 12px 14px;
  }
  .navbar-collapse:not(.show):not(.collapsing){
    /* collapsed: no stray card outline behind a closed menu */
    border:0; box-shadow:none; padding:0; margin-top:0; background:transparent;
  }
  .navbar-collapse > .navbar-nav{gap:2px!important}
  .navbar-collapse .nav-link{padding:11px 14px!important;border-radius:12px!important}
  /* the active item is white in the design, which vanishes on a white panel */
  .navbar-collapse .nav-link.active{
    background:#fdeaf0!important;
    box-shadow:none!important;
  }
  .navbar .d-md-none > a[href="/cart/"]{flex:0 0 auto}
}