/* eSIM web pages. Each page borrows the design language of the matching page
   of another module (landing: tour/cruise home bands, results: tour results,
   payment: e-Visa checkout, confirmation: the shared booking success page);
   only eSIM-specific rules live here, scoped to the page wrapper. */

/* Search bar (home card and eSIM pages). */
#esim-search-form .esim-sb-flag { width: 22px; height: 16px; object-fit: cover; border-radius: 3px; flex: 0 0 auto; }
#esim-search-form .esim-days-select {
    width: 100%;
    height: var(--search-form-input-height, 52px);
    padding: 0 38px 0 14px;
    border: 1px solid #e5e7eb;
    border-radius: var(--sb-radius, 12px);
    background: #fff url("/assets/icons/select-icon.svg") no-repeat right 14px center;
    font-size: 15px;
    font-weight: 600;
    color: inherit;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

#esim-search-form .location-tab:not(.active0) { display: none; }
@media (max-width: 767.98px) {
    #esim-search-form .input-area > .labels { display: none; }
    #esim-search-form .input-area > .d-flex { flex-wrap: wrap; gap: 10px; }
    #esim-search-form .sb-where,
    #esim-search-form .sb-date,
    #esim-search-form .sb-complate { flex: 0 0 100%; width: 100%; max-width: 100%; }
    #esim-search-form .sb-complate .btn { width: 100%; }
    #esim-search-form .location-tab { left: 0; right: 0; width: auto; max-width: 100%; }
}

/* Landing: the band system of the tour landing (.zr-home > .zr-sec), its
   destination cards (.selected-tour-card) and sub-category arrow. Tokens are
   the zr ones of home_redesign.css (--zr-red, --zr-ink, --zr-line...). */
[x-cloak] { display: none !important; }
.esim-ic { flex: none; }

/* Benefit strip right under the hero card. */
.esim-home .esim-benefit-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: #fff;
    border: 1px solid var(--zr-line);
    border-radius: 16px;
    box-shadow: 0 6px 22px rgba(16, 24, 40, .06);
}
.esim-home .esim-benefit {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    min-width: 0;
}
.esim-home .esim-benefit + .esim-benefit { border-left: 1px solid var(--zr-line); }
.esim-benefit-ic {
    width: 46px;
    height: 46px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--zr-tint, #fce9e7);
    color: var(--zr-red, #d8291c);
}
.esim-benefit-tx { display: flex; flex-direction: column; min-width: 0; }
.esim-benefit-tx b { font-family: var(--zr-font); font-size: 14.5px; font-weight: 800; color: var(--zr-ink); line-height: 1.3; }
.esim-benefit-tx small { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--zr-muted); line-height: 1.4; }

/* Destination cards (photo or flag artwork). */
.esim-dest-grid .selected-tour-card { aspect-ratio: 4 / 3; }
.esim-dest .selected-tour-card img { transition: transform .35s; }
.esim-dest .selected-tour-card:hover img { transform: scale(1.05); }
.esim-dest .esim-dest-flag { width: 22px; height: 16px; margin-right: 6px; object-fit: cover; border-radius: 3px; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .55); }
.esim-dest .selected-tour-name { font-family: var(--zr-font); font-weight: 800; font-size: 17px; }
.esim-price-chip {
    padding: 6px 10px 7px;
    border-radius: 10px;
    background: var(--zr-red, #d8291c);
    box-shadow: 0 6px 14px rgba(216, 41, 28, .35);
    text-shadow: none;
    font-family: var(--zr-font);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.15;
}
.esim-price-chip .selected-tour-price-label { font-size: 10px; font-weight: 700; opacity: .92; }
.esim-dest-count {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: var(--zr-ink, #1c1c24);
    font-family: var(--zr-font);
    font-size: 11.5px;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.esim-dest-count .esim-ic { color: var(--zr-red, #d8291c); }
/* No destination photo: a clean flag card (flat flag on a light surface). */
.selected-tour-card.esim-dest-noimg { background: linear-gradient(180deg, #f7f7f9 0%, #eceef2 100%); }
.selected-tour-card.esim-dest-noimg img.esim-dest-flagfill {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 50%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 10px;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 12px 26px rgba(16, 24, 40, .14);
}
.selected-tour-card.esim-dest-noimg:hover img.esim-dest-flagfill { transform: translate(-50%, -50%) scale(1.04); }
.esim-dest-noimg .selected-tour-overlay { background: none; color: var(--zr-ink, #1c1c24); }
.esim-dest-noimg .selected-tour-name,
.esim-dest-noimg .esim-dest-plan { text-shadow: none; }
.esim-dest-noimg .esim-dest-flag { display: none; }

/* Region cards. */
.esim-region-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}
.esim-search-page .esim-region-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.esim-region-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--zr-line);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .05);
    color: var(--zr-ink);
    text-decoration: none;
    transition: border-color .16s, box-shadow .16s, transform .16s;
}
.esim-region-card:hover {
    border-color: #e0c6c3;
    box-shadow: 0 12px 28px rgba(219, 46, 28, .13);
    transform: translateY(-2px);
    color: var(--zr-ink);
    text-decoration: none;
}
.esim-region-band {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 92px;
    padding: 0 14px 12px;
    overflow: hidden;
    background: var(--zr-soft, #f6f6f8);
    border-bottom: 1px solid var(--zr-line, #ececef);
}
.esim-region-band.has-photo { border-bottom: 0; }
.esim-region-band .esim-region-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.esim-region-band.has-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .45) 100%); }
.esim-region-card:hover .esim-region-img { transform: scale(1.05); }
.esim-region-band .esim-flagstack { z-index: 1; }
.esim-flagstack { position: relative; display: flex; }
.esim-flagstack img {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 50%;
    border: 2.5px solid #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
    background: #fff;
}
.esim-flagstack img + img { margin-left: -9px; }
.esim-region-body { display: flex; flex-direction: column; flex: 1; gap: 3px; padding: 13px 16px 15px; }
.esim-region-name { font-family: var(--zr-font); font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.esim-region-meta { font-size: 12.5px; font-weight: 700; color: var(--zr-muted); }
.esim-region-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; }
.esim-region-price { display: flex; flex-direction: column; line-height: 1.15; }
.esim-region-price small { font-size: 11px; font-weight: 700; color: var(--zr-muted); }
.esim-region-price b { font-family: var(--zr-font); font-size: 17px; font-weight: 800; color: var(--zr-red); }
.esim-region-card .esim-region-arrow { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--zr-red, #d8291c); color: #fff; }

/* Promo banner (destination photo). */
.esim-promo {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 300px;
    overflow: hidden;
    border-radius: 20px;
    background-color: #1c1c24;
    background-size: cover;
    background-position: center;
    color: #fff;
    box-shadow: 0 10px 28px rgba(16, 24, 40, .14);
}
.esim-promo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 10, 16, .78) 0%, rgba(10, 10, 16, .5) 45%, rgba(10, 10, 16, 0) 80%); }
.esim-promo-tx { position: relative; z-index: 1; max-width: 640px; padding: 40px 44px; }
.esim-promo-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px 4px 6px;
    border-radius: 999px;
    background: #fff;
    color: var(--zr-ink, #1c1c24);
    font-size: 12px;
    font-weight: 800;
}
.esim-promo h2 { margin: 12px 0 8px; font-family: var(--zr-display); font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: #fff; }
.esim-promo p { max-width: 520px; margin: 0 0 16px; font-size: 15px; line-height: 1.55; opacity: .95; }
.esim-promo-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.esim-promo-chips span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .22);
    font-size: 12.5px;
    font-weight: 700;
}
.esim-promo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.esim-promo-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 12px;
    background: var(--zr-red, #d8291c);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
}
.esim-promo-btn:hover { background: var(--zr-red-deep, #b11f14); color: #fff; text-decoration: none; }
.esim-promo-link { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.esim-promo-link:hover { color: #fff; }

/* How it works. */
.esim-how {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.esim-how::before {
    content: "";
    position: absolute;
    top: 44px;
    left: 12.5%;
    right: 12.5%;
    border-top: 2px dashed #f1c4bf;
}
.esim-how-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10px;
    text-align: center;
}
.esim-how-art {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin-bottom: 16px;
    border-radius: 26px;
    background: #fff;
    border: 1px solid var(--zr-line);
    color: var(--zr-red);
    box-shadow: 0 10px 26px rgba(216, 41, 28, .12);
}
.esim-how-num {
    position: absolute;
    top: -9px;
    right: -9px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--zr-red);
    color: #fff;
    font-family: var(--zr-font);
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 0 0 4px #fff;
}
.esim-how-t { font-family: var(--zr-font); font-size: 16px; font-weight: 800; color: var(--zr-ink); }
.esim-how-s { max-width: 260px; margin-top: 6px; font-size: 13.5px; font-weight: 500; line-height: 1.55; color: var(--zr-muted-2, #6b6f76); }

/* Compatibility. */
.esim-compat-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.esim-compat-brands { display: flex; flex-direction: column; gap: 10px; }
.esim-brand { border: 1px solid var(--zr-line); border-radius: 14px; background: #fff; overflow: hidden; transition: border-color .16s, box-shadow .16s; }
.esim-brand.is-open { border-color: #f0cfcb; box-shadow: 0 8px 22px rgba(216, 41, 28, .08); }
.esim-brand-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 16px;
    border: 0;
    background: none;
    font-family: var(--zr-font);
    font-size: 15px;
    font-weight: 800;
    color: var(--zr-ink);
    text-align: left;
}
.esim-brand-ic { flex: none; width: 62px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--zr-soft); color: var(--zr-ink); }
.esim-brand.is-open .esim-brand-ic { background: #fff; box-shadow: inset 0 0 0 1px #f0cfcb; }
.esim-brand-ic.is-multi { gap: 5px; }
.esim-brand-logo { width: 20px; height: 20px; object-fit: contain; }
.esim-brand-logo.is-samsung { width: 46px; height: 10px; }
.esim-brand-logo.is-oppo { width: 28px; height: 8px; }
.esim-brand-logo.is-oneplus { width: 17px; height: 17px; }
.esim-brand-name { flex: 1; }
.esim-brand-chev { color: var(--zr-muted); transition: transform .18s; }
.esim-brand.is-open .esim-brand-chev { transform: rotate(180deg); color: var(--zr-red); }
.esim-brand-body { padding: 0 16px 15px 90px; font-size: 13.5px; line-height: 1.6; color: var(--zr-muted-2, #6b6f76); }
.esim-compat-note { margin: 4px 2px 0; font-size: 12.5px; color: var(--zr-muted); }
.esim-compat-check {
    padding: 22px 24px;
    border: 1px solid var(--zr-line, #ececef);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .05);
}
.esim-compat-ic { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--zr-tint, #fce9e7); color: var(--zr-red, #d8291c); }
.esim-compat-check h3 { margin: 12px 0 6px; font-family: var(--zr-font); font-size: 19px; font-weight: 800; color: var(--zr-ink, #1c1c24); }
.esim-compat-check p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--zr-muted-2, #6b6f76); }
.esim-compat-list { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.esim-compat-list li { display: flex; gap: 9px; font-size: 13px; line-height: 1.5; color: var(--zr-ink, #1c1c24); }
.esim-compat-list .esim-ic { margin-top: 2px; color: #1e9e5a; }

/* Comparison table. */
.esim-compare-wrap { overflow-x: auto; border: 1px solid var(--zr-line); border-radius: 18px; background: #fff; box-shadow: 0 6px 22px rgba(16, 24, 40, .05); }
.esim-compare-table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.esim-compare-table th, .esim-compare-table td { padding: 15px 18px; border-bottom: 1px solid var(--zr-line); vertical-align: middle; }
.esim-compare-table tr:last-child th, .esim-compare-table tr:last-child td { border-bottom: 0; }
.esim-compare-table thead th { font-family: var(--zr-font); font-size: 14.5px; font-weight: 800; color: var(--zr-ink); background: var(--zr-soft); white-space: nowrap; }
.esim-compare-table thead th:first-child { width: 20%; }
.esim-compare-table tbody th { font-weight: 800; color: var(--zr-ink); }
.esim-compare-table td { color: var(--zr-muted-2, #6b6f76); font-weight: 600; }
.esim-compare-table .is-esim { background: #fff7f6; color: var(--zr-ink); }
.esim-compare-table thead .is-esim { background: var(--zr-red); color: #fff; }
.esim-compare-table td.is-esim .esim-ic { color: #12805c; margin-right: 4px; vertical-align: -3px; }
.esim-compare-ic { display: inline-flex; vertical-align: -4px; margin-right: 6px; opacity: .8; }
.esim-compare-badge { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #fff; color: var(--zr-red); font-size: 10.5px; font-weight: 800; vertical-align: 2px; }

/* SEO text (two columns, tour landing text layout). */
.esim-seo-title { margin: 0 0 10px; font-family: var(--zr-display); font-size: 24px; font-weight: 700; color: var(--zr-red); }
.esim-seo-lead { max-width: 980px; margin: 0 0 18px; font-size: 14.5px; line-height: 1.75; color: #4a4f57; }
.esim-seo-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 44px; color: #4a4f57; }
.esim-seo-cols h3 { color: var(--zr-red) !important; font-size: 17px !important; }

/* Country list. */
.esim-home .esim-country-filter { position: relative; max-width: 420px; margin-bottom: 14px; }
.esim-home .esim-country-filter .fsearch-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #9aa0a6; display: inline-flex; }
.esim-home .esim-country-filter .form-control { padding-left: 38px; height: 44px; border-radius: 12px; }
.esim-home .esim-country-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 6px 14px;
    max-height: 208px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 70%, transparent);
    mask-image: linear-gradient(#000 70%, transparent);
}
.esim-home .esim-country-list.is-open { max-height: none; -webkit-mask-image: none; mask-image: none; }
.esim-country-link { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; color: inherit; font-size: 14px; font-weight: 600; }
.esim-country-link:hover { background: #f3f4f6; color: inherit; }
.esim-country-link img { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; }

@media (max-width: 1100px) {
    .esim-region-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .esim-home .esim-benefit-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .esim-home .esim-benefit:nth-child(3) { border-left: 0; }
    .esim-home .esim-benefit:nth-child(n+3) { border-top: 1px solid var(--zr-line); }
}
@media (max-width: 767px) {
    .esim-region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .esim-region-band { height: 70px; padding: 0 12px 10px; }
    .esim-flagstack img { width: 28px; height: 28px; }
    .esim-region-body { padding: 10px 12px 12px; }
    .esim-region-name { font-size: 14.5px; }
    .esim-region-price b { font-size: 15px; }
    .esim-region-card .esim-region-arrow { width: 30px; height: 30px; }
    .esim-home .esim-benefit { padding: 14px 12px; gap: 10px; flex-direction: column; align-items: flex-start; }
    .esim-benefit-ic { width: 38px; height: 38px; border-radius: 12px; }
    .esim-benefit-tx b { font-size: 13px; }
    .esim-benefit-tx small { font-size: 11.5px; }
    .esim-dest .selected-tour-name { font-size: 14px; }
    .esim-price-chip { font-size: 13px; padding: 5px 8px; }
    .esim-dest-count { top: 8px; left: 8px; padding: 4px 8px; font-size: 10.5px; }
    .esim-promo { min-height: 0; }
    .esim-promo::before { background: linear-gradient(180deg, rgba(10, 10, 16, .55) 0%, rgba(10, 10, 16, .8) 100%); }
    .esim-promo-tx { padding: 24px 20px; }
    .esim-promo h2 { font-size: 24px; }
    .esim-how { grid-template-columns: 1fr; gap: 14px; }
    .esim-how::before { top: 30px; bottom: 30px; left: 39px; right: auto; border-top: 0; border-left: 2px dashed #f1c4bf; }
    .esim-how-step { display: grid; grid-template-columns: 78px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; text-align: left; padding: 0; }
    .esim-how-art { grid-row: span 2; width: 64px; height: 64px; margin: 0 0 0 7px; border-radius: 20px; }
    .esim-how-art .esim-ic { width: 26px; height: 26px; }
    .esim-how-t { align-self: end; }
    .esim-how-s { align-self: start; margin-top: 2px; max-width: none; }
    .esim-compat-grid { grid-template-columns: 1fr; }
    .esim-brand-body { padding-left: 16px; }
    .esim-seo-cols { grid-template-columns: 1fr; }
    .esim-seo-title { font-size: 20px; }
}

/* PWA landing (pwa/esim/index.html): the web landing cards, two per row.
   The PWA shell does not load home_redesign.css, so the zr tokens are set
   here. */
.esim-pwa {
    --zr-red: #d8291c;
    --zr-red-deep: #b11f14;
    --zr-tint: #fce9e7;
    --zr-ink: #1c1c24;
    --zr-muted: #8a8f98;
    --zr-muted-2: #6b6f76;
    --zr-line: #ececef;
    --zr-soft: #f6f6f8;
    --zr-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --zr-display: "Jost", "Manrope", system-ui, sans-serif;
    padding: 0 16px;
}
.esim-pwa-title { margin: 24px 0 12px; font-size: 18px; font-weight: 800; color: var(--zr-ink); }
.esim-pwa-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.esim-pwa-benefit { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--zr-line); border-radius: 12px; background: #fff; }
.esim-pwa-benefit .esim-benefit-ic { width: 32px; height: 32px; border-radius: 10px; }
.esim-pwa-benefit b { font-size: 12.5px; font-weight: 800; line-height: 1.25; color: var(--zr-ink); }
.esim-pwa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.esim-pwa .selected-tour-card { border-radius: 14px; box-shadow: 0 6px 16px rgba(16, 24, 40, .1); }
.esim-pwa .esim-region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.esim-pwa .esim-region-band { height: 64px; padding: 0 12px 10px; }
.esim-pwa .esim-flagstack img { width: 26px; height: 26px; }
.esim-pwa .esim-region-body { padding: 10px 12px 12px; }
.esim-pwa .esim-region-name { font-size: 14px; }
.esim-pwa .esim-region-price b { font-size: 14.5px; }
.esim-pwa .esim-region-card .esim-region-arrow { width: 28px; height: 28px; }
.esim-pwa .esim-how { grid-template-columns: 1fr; gap: 14px; }
.esim-pwa .esim-how::before { top: 30px; bottom: 30px; left: 39px; right: auto; border-top: 0; border-left: 2px dashed #f1c4bf; }
.esim-pwa .esim-how-step { display: grid; grid-template-columns: 78px 1fr; column-gap: 14px; align-items: center; text-align: left; padding: 0; }
.esim-pwa .esim-how-art { grid-row: span 2; width: 64px; height: 64px; margin: 0 0 0 7px; border-radius: 20px; }
.esim-pwa .esim-how-art .esim-ic { width: 26px; height: 26px; }
.esim-pwa .esim-how-t { align-self: end; font-size: 15px; }
.esim-pwa .esim-how-s { align-self: start; margin-top: 2px; max-width: none; font-size: 13px; }
.esim-pwa-check { margin-top: 22px; padding: 20px; }
.esim-pwa-check h3 { font-size: 20px; }

/* Narrow cards (phone web + PWA): name above the price chip, regions as a
   two-row horizontal rail instead of nine rows. */
@media (max-width: 767px) {
    .esim-dest .selected-tour-overlay { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; }
    .esim-dest .selected-tour-price { text-align: left; }
    .esim-home .esim-region-grid,
    .esim-pwa .esim-region-grid {
        grid-template-columns: none;
        grid-template-rows: repeat(2, auto);
        grid-auto-flow: column;
        grid-auto-columns: 46%;
        overflow-x: auto;
        margin: 0 -16px;
        padding: 2px 16px 10px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .esim-home .esim-region-grid > *,
    .esim-pwa .esim-region-grid > * { scroll-snap-align: start; }
}

/* Results: layout, filter accordion, toolbar and the card shell are the tour
   results design (.tour-search-page); the destination banner, the card body
   and the help box are eSIM's. */
.esim-search-page .esim-crumbs .breadcrumb { margin: 6px 0 10px; font-size: 13px; }

/* Destination banner. */
.esim-cov-banner {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    color: #fff;
    background: radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .22) 0, transparent 55%),
        linear-gradient(120deg, var(--esim-from, #1c1c24), var(--esim-to, #d8291c));
    box-shadow: 0 14px 34px rgba(16, 24, 40, .14);
}
.esim-cov-banner.has-photo { background: #1c1c24; }
.esim-cov-banner.is-plain { background: #fff; color: var(--tour-ink, #1c1c24); border: 1px solid var(--tour-line, #ececef); box-shadow: var(--tour-shadow, 0 2px 8px rgba(0, 0, 0, .04)); }
.esim-cov-banner.is-plain h1 { color: var(--tour-ink, #1c1c24); }
.esim-cov-banner.is-plain p { color: var(--tour-muted-2, #6b6f76); }
.esim-cov-banner.is-plain .esim-cov-kicker { background: var(--tour-tint, #fce9e7); color: var(--tour-red, #d8291c); }
.esim-cov-banner.is-plain .esim-cov-fact { background: #f6f6f8; border-color: var(--tour-line, #ececef); color: var(--tour-ink, #1c1c24); }
.esim-cov-banner.is-plain .esim-cov-fact.is-price { background: var(--tour-tint, #fce9e7); }
.esim-cov-banner-bg { position: absolute; inset: 0; }
.esim-cov-banner.has-photo .esim-cov-banner-bg {
    background: linear-gradient(90deg, rgba(12, 12, 18, .86) 0%, rgba(12, 12, 18, .62) 45%, rgba(12, 12, 18, .18) 100%),
        var(--esim-photo) center / cover no-repeat;
}
.esim-cov-banner-in { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 28px 30px 24px; }
.esim-cov-id { display: flex; align-items: center; gap: 18px; max-width: 860px; }
.esim-cov-banner .esim-cov-flag {
    width: 64px;
    height: 48px;
    flex: none;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .3), 0 0 0 2px rgba(255, 255, 255, .8);
}
.esim-cov-banner .esim-flagstack img { width: 38px; height: 38px; }
.esim-cov-kicker { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 5px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.esim-cov-banner h1 { margin: 6px 0 4px; font-family: var(--tour-font, "Manrope"), sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.esim-cov-banner p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.esim-cov-facts { display: flex; flex-wrap: wrap; gap: 10px; }
.esim-cov-fact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: 13.5px;
    font-weight: 700;
}
.esim-cov-fact.is-price { flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 16px; background: #fff; color: var(--tour-ink, #1c1c24); line-height: 1.15; }
.esim-cov-fact.is-price small { font-size: 11px; font-weight: 700; color: var(--tour-muted, #8a8f98); }
.esim-cov-fact.is-price b { font-size: 19px; font-weight: 800; color: var(--tour-red, #d8291c); }

/* Filter column + help box. */
.esim-search-page .preload-wrapper .esim-filter-col {
    position: sticky;
    top: 90px;
    align-self: flex-start;
}
.esim-search-page .preload-wrapper .filter-box .fcount { align-items: center; gap: 10px; }
.esim-search-page .esim-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 4px 13px 4px 4px;
    border: 1px solid rgba(216, 41, 28, .14);
    border-radius: 999px;
    background: var(--tour-tint, #fce9e7);
    font-family: var(--tour-font);
    color: var(--tour-ink);
    white-space: nowrap;
}
.esim-search-page .esim-count-ic {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--tour-red);
    box-shadow: 0 1px 4px rgba(216, 41, 28, .16);
}
.esim-search-page .esim-count-txt { font-size: 13.5px; font-weight: 700; }
.esim-search-page .esim-count-n { margin-right: 2px; font-size: 15px; font-weight: 800; color: var(--tour-red); }
.esim-help { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.esim-help-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border: 1px solid var(--tour-line, #ececef);
    border-radius: var(--tour-panel-radius, 16px);
    background: #fff;
    box-shadow: var(--tour-shadow, 0 2px 8px rgba(0, 0, 0, .04));
    font-family: var(--tour-font);
}
.esim-help-ic { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; border-radius: 12px; background: var(--tour-tint, #fce9e7); color: var(--tour-red); }
.esim-help-card b { font-size: 14.5px; font-weight: 800; color: var(--tour-ink); }
.esim-help-card p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--tour-muted-2, #6b6f76); }
.esim-help-card a { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 13px; font-weight: 800; color: var(--tour-red); text-decoration: none; }
.esim-help-list { margin: 0; padding: 4px 4px 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.esim-help-list li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--tour-muted-2, #6b6f76); }
.esim-help-list .esim-ic { color: #1e9e5a; }

/* Mobile filter / sort bar. */
.esim-search-page .esim-mobile-bar { display: none; }
.esim-search-page .esim-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--tour-line);
    border-radius: 12px;
    background: #fff;
    font-family: var(--tour-font);
    font-size: 14px;
    font-weight: 800;
    color: var(--tour-ink);
    white-space: nowrap;
}
.esim-sort-select select {
    height: 40px;
    max-width: 170px;
    padding: 0 30px 0 12px;
    border: 1px solid var(--tour-line);
    border-radius: 12px;
    background: #fff url("/assets/icons/select-icon.svg") no-repeat right 10px center;
    font-family: var(--tour-font);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--tour-ink);
    appearance: none;
    -webkit-appearance: none;
}
.esim-mobile-count { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--tour-muted-2, #6b6f76); white-space: nowrap; }
.esim-mobile-count b { color: var(--tour-red); }

/* Package card. */
.esim-search-page .preload-wrapper .esim-card { margin-bottom: 12px; }
.esim-search-page .preload-wrapper .esim-card.is-highlight { border-color: #f1cdc9; }
.esim-search-page .preload-wrapper .esim-card .esim-card-top { grid-template-columns: minmax(0, 1fr) 220px; }
.esim-card-main { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 18px 22px 14px; }
.esim-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.esim-badge { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; line-height: 1.5; }
.esim-badge.is-red { background: var(--tour-red); color: #fff; }
.esim-badge.is-green { background: var(--tour-ok-tint, #e7f6ee); color: var(--tour-ok, #1e9e5a); }
.esim-badge.is-blue { background: #e8f0fe; color: #1d4ed8; }
.esim-badge.is-amber { background: #fdf1e3; color: #b8621b; }
.esim-card-plan { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.esim-card-data, .esim-card-days { display: inline-flex; align-items: center; gap: 9px; }
.esim-card-ic { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--tour-tint, #fce9e7); color: var(--tour-red); }
.esim-card-days .esim-card-ic { background: #f3f4f6; color: var(--tour-ink); }
.esim-card-data b { font-size: 26px; font-weight: 800; letter-spacing: -.025em; color: var(--tour-ink); line-height: 1; }
.esim-card-days b { font-size: 18px; font-weight: 800; color: var(--tour-ink); }
.esim-card-x { width: 1px; height: 26px; background: var(--tour-line); }
.esim-card-specs { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; font-weight: 600; color: var(--tour-muted-2, #6b6f76); }
.esim-spec { display: inline-flex; align-items: center; gap: 6px; }
.esim-spec .esim-ic { color: var(--tour-muted, #8a8f98); }
.esim-spec.is-value { color: var(--tour-ok, #1e9e5a); font-weight: 800; }
.esim-search-page .esim-plan-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.esim-card-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--tour-font);
    font-size: 13px;
    font-weight: 800;
    color: var(--tour-red);
}
.esim-card-more .esim-ic { transition: transform .18s; }
.esim-card-more.is-open .esim-ic { transform: rotate(180deg); }
.esim-search-page .preload-wrapper .esim-card .esim-card-price { justify-content: center; padding: 18px 22px; }
.esim-search-page .preload-wrapper .esim-card .tsc-val { font-size: 28px; }
.esim-search-page .preload-wrapper .esim-card .tsc-cta { margin-top: 12px; padding: 11px; }
.esim-card-details { padding: 14px 22px 18px; border-top: 1px dashed var(--tour-line); background: #fcfcfd; }
.esim-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 22px; margin: 0; }
.esim-dl dt { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; font-size: 12px; font-weight: 800; color: var(--tour-ink); text-transform: uppercase; letter-spacing: .02em; }
.esim-dl dt .esim-ic { color: var(--tour-red); }
.esim-dl dd { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tour-muted-2, #6b6f76); }

.esim-search-page .esim-group-head { margin: 22px 0 10px; font-size: 15px; font-weight: 800; color: var(--tour-ink); }
.esim-search-page .esim-group-head small { display: block; font-size: 13px; font-weight: 600; color: var(--tour-muted, #6b7280); }
/* eSIM labels are short ranges: show them whole instead of the tour's
   one-line ellipsis. */
.esim-search-page .filterer.form-check.check-group label > span:first-child { overflow: visible; text-overflow: clip; white-space: normal; }
.esim-search-page .esim-empty {
    margin-top: 16px;
    padding: 28px 20px;
    border: 1px dashed var(--tour-line);
    border-radius: var(--tour-card-radius);
    background: #fff;
    text-align: center;
}
.esim-search-page .esim-empty-t { font-size: 17px; font-weight: 800; color: var(--tour-ink); }
.esim-search-page .esim-empty-btn {
    margin-top: 14px;
    border: 0;
    border-radius: 11px;
    padding: 10px 20px;
    background: var(--tour-red);
    color: #fff;
    font-weight: 800;
}
.esim-search-page .esim-related-head { margin-top: 30px; }
.esim-search-page .esim-related-head h2, .esim-cov-how h2 { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.esim-search-page .esim-related { margin-bottom: 8px; }
.esim-cov-how {
    margin: 36px 0 0;
    padding: 28px 28px 32px;
    border: 1px solid var(--tour-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--tour-shadow, 0 2px 8px rgba(0, 0, 0, .04));
}
.esim-cov-how .zr-chead { margin-bottom: 26px; }
.esim-cov-how .esim-how::before { border-top-color: #f1c4bf; }
.esim-cov-faq { margin-top: 12px; }
@media (max-width: 991.98px) {
    .esim-search-page .preload-wrapper .esim-filter-col { position: static; max-height: none; display: none; }
    .esim-search-page .preload-wrapper .esim-filter-col.is-open { display: block; }
    .esim-search-page .esim-mobile-bar {
        position: sticky;
        top: 0;
        z-index: 20;
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 -12px 12px;
        padding: 10px 12px;
        background: rgba(246, 246, 248, .94);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border-bottom: 1px solid var(--tour-line);
    }
    .esim-search-page .preload-wrapper .tbar { display: none; }
    .esim-search-page .esim-region-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .esim-cov-banner { border-radius: 16px; }
    .esim-cov-banner-in { padding: 20px 18px 18px; gap: 14px; }
    .esim-cov-id { gap: 12px; align-items: flex-start; }
    .esim-cov-banner .esim-cov-flag { width: 48px; height: 36px; }
    .esim-cov-banner .esim-flagstack img { width: 30px; height: 30px; }
    .esim-cov-banner h1 { font-size: 22px; }
    .esim-cov-banner p { font-size: 13px; }
    .esim-cov-facts { gap: 6px; }
    .esim-cov-fact { padding: 6px 10px; font-size: 12px; }
    .esim-cov-fact:nth-child(n+4) { display: none; }
    .esim-cov-fact.is-price b { font-size: 16px; }
    .esim-search-page .preload-wrapper .esim-card .esim-card-top { grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
    .esim-card-main { padding: 14px 0 12px 14px; gap: 7px; }
    .esim-card-ic { width: 30px; height: 30px; border-radius: 9px; }
    .esim-card-ic .esim-ic { width: 16px; height: 16px; }
    .esim-card-data b { font-size: 21px; }
    .esim-card-days b { font-size: 15px; }
    .esim-card-x { display: none; }
    .esim-card-plan { gap: 6px 10px; }
    .esim-card-specs { gap: 4px 10px; font-size: 12px; }
    .esim-card-specs .esim-spec:nth-child(2), .esim-card-specs .esim-spec:nth-child(3) { display: none; }
    .esim-search-page .preload-wrapper .esim-card .esim-card-price { min-width: 118px; padding: 14px 14px 12px; background: transparent; align-items: flex-end; text-align: right; }
    .esim-search-page .preload-wrapper .esim-card .tsc-val { font-size: 19px; align-self: flex-end; }
    .esim-search-page .preload-wrapper .esim-card .tsc-per { font-size: 11px; align-self: flex-end; }
    .esim-search-page .preload-wrapper .esim-card .tsc-cta { margin-top: 8px; padding: 8px 14px; font-size: 13.5px; }
    .esim-card-details { padding: 12px 14px 14px; }
    .esim-dl { grid-template-columns: 1fr; gap: 10px; }
    .esim-search-page .esim-region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .esim-cov-how { padding: 20px 16px 22px; margin-top: 26px; }
    .esim-sort-select select { max-width: 150px; }
}

/* Payment: the tour checkout design (.tp2-page / .cp2-* / .tps-*). */
.esim-payment-page .esim-methods { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.esim-payment-page .esim-method {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    font-weight: 700;
    cursor: pointer;
}
.esim-payment-page .esim-method input { accent-color: #d8291c; }
.esim-payment-page .esim-method .cp2-svg { width: 18px; height: 18px; }
.esim-payment-page .esim-method.is-on { border-color: #d8291c; background: #fff6f5; }
.esim-payment-page .esim-install-note,
.esim-payment-page .esim-redirect-note { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; font-weight: 600; color: #6b6f76; }
.esim-payment-page .esim-install-note .cp2-svg,
.esim-payment-page .esim-redirect-note .cp2-svg { width: 16px; height: 16px; flex: none; color: #1e9e5a; }
.esim-payment-page .esim-redirect-note { padding: 14px 16px; border-radius: 12px; background: #f6f6f8; }
.esim-payment-page .esim-cond-link { color: #d8291c; font-weight: 700; text-decoration: underline; }
.esim-payment-page .esim-paybar-hint { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: #8a8f98; text-align: right; }
.esim-payment-page .car-pay-submit:disabled { opacity: .55; cursor: not-allowed; }
.esim-payment-page .esim-tps-plain { display: flex; align-items: center; justify-content: center; background: #f1f3f5; }
.esim-payment-page .esim-tps-plain .esim-tps-flag { width: 72px; height: 72px; margin-bottom: 26px; object-fit: cover; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 8px 20px rgba(16, 24, 40, .14); }
.esim-payment-page .esim-tps-plain .tps-photo-title { color: #1c1c24; text-shadow: none; }
.esim-payment-page .esim-tps-plain::after { display: none; }
.esim-payment-page .tps-provider img { flex: none; }
.esim-payment-page .tps-fx .esim-ic { flex: none; margin-top: 2px; }
.esim-pay-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 0 18px 16px; }
.esim-pay-badges img { width: auto; opacity: .9; }

/* Order / voucher: the shared booking success page (.bsx-*). */
.esim-qr { width: 220px; height: 220px; object-fit: contain; border: 1px solid #eceef1; border-radius: 12px; background: #fff; }
.esim-steps-list { padding-left: 18px; margin: 0; }
.esim-steps-list li { margin-bottom: 6px; }
.esim-profile { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.esim-profile-body { flex: 1; min-width: 240px; }
@media print { .no-print { display: none !important; } }

/* Tour payment add-on, in the car payment "Extra Products" card design. */
.esim-upsell-flag { width: 24px; height: 17px; object-fit: cover; border-radius: 3px; }
/* Phone checkout: the summary sits above the form, so it keeps the photo,
   the plan and the total. */
@media (max-width: 991.98px) {
    .esim-payment-page .tps-mgrid .tps-mrow:nth-child(n+4),
    .esim-payment-page .esim-pay-badges { display: none; }
    .esim-payment-page .tps-photo { max-height: 150px; }
}
/* Phone web results: the compact navbar has no room for the search pill
   next to the language and menu buttons (it wrapped onto three rows); the
   sticky filter bar below takes over its job. */
@media (max-width: 575.98px) {
    .esim-search-page .tour-nav-pillwrap { display: none !important; }
}

/* ---- Landing, energetic pass: hero, rail, chips, featured plans, red band,
   micro-animations (all motion is off under prefers-reduced-motion). ---- */
.esim-landing .search-area:has(.searchbar-hero-text) { padding-top: 6.5rem; background-position: center 40%; }
.esim-landing .search-area:has(.searchbar-hero-text) .mask {
    background: linear-gradient(180deg, rgba(8, 10, 16, .55) 0%, rgba(8, 10, 16, .38) 55%, rgba(8, 10, 16, .62) 100%);
}
.esim-landing .searchbar-hero-text { max-width: 980px; }
.esim-landing .searchbar-hero-text h1 { font-family: var(--zr-display, "Jost", sans-serif); font-size: 50px; font-weight: 700; letter-spacing: -.02em; line-height: 1.08; }
.esim-landing .searchbar-hero-text h2 { font-size: 18px; opacity: .95; }
.esim-hl { display: inline-block; padding: 0 .22em .04em; border-radius: 12px; background: #d8291c; color: #fff; box-shadow: 0 10px 26px rgba(216, 41, 28, .45); }
.esim-hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.esim-hero-stat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-shadow: none;
}
.esim-hero-stat b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.esim-hero-stat .esim-ic { color: #fff; opacity: .9; }

/* Destination rail. */
.esim-rail-nav { display: flex; gap: 8px; }
.esim-rail-btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--zr-line);
    border-radius: 50%;
    background: #fff;
    color: var(--zr-ink);
    transition: background .16s, color .16s, border-color .16s;
}
.esim-rail-btn:first-child .esim-ic { transform: rotate(180deg); }
.esim-rail-btn:hover { background: var(--zr-red); border-color: var(--zr-red); color: #fff; }
.esim-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.esim-chip {
    padding: 8px 16px;
    border: 1px solid var(--zr-line);
    border-radius: 999px;
    background: #fff;
    font-family: var(--zr-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--zr-ink);
    transition: background .16s, color .16s, border-color .16s;
}
.esim-chip:hover { border-color: #e0c6c3; }
.esim-chip.is-on { background: var(--zr-ink); border-color: var(--zr-ink); color: #fff; }
.esim-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * 18px) / 3.6);
    gap: 18px;
    overflow-x: auto;
    padding: 4px 2px 14px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.esim-rail::-webkit-scrollbar { display: none; }
.esim-rail-item { scroll-snap-align: start; min-width: 0; }
.esim-rail .selected-tour-card { aspect-ratio: 6 / 7; border-radius: 18px; box-shadow: 0 10px 26px rgba(16, 24, 40, .14); transition: transform .25s ease, box-shadow .25s ease; }
.esim-rail .selected-tour-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(16, 24, 40, .2); }
.esim-rail .selected-tour-card img { transition: transform .6s ease; }
.esim-rail .selected-tour-card:hover img { transform: scale(1.07); }
.esim-rail .selected-tour-overlay { padding: 18px; min-height: 55%; }
.esim-rail .selected-tour-name { font-size: 21px; }
.esim-dest .selected-tour-name { display: block; }
.esim-dest-plan { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 700; opacity: .92; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.esim-rail-all { display: inline-flex; }

/* Featured plans. */
.esim-feat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.esim-feat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--zr-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .05);
    color: var(--zr-ink);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.esim-feat:hover { transform: translateY(-4px); border-color: #f0cfcb; box-shadow: 0 16px 32px rgba(216, 41, 28, .14); color: var(--zr-ink); text-decoration: none; }
.esim-feat-top { display: flex; align-items: center; gap: 10px; }
.esim-feat-flag { width: 28px; height: 20px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.esim-feat-name { flex: 1; min-width: 0; font-family: var(--zr-font); font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esim-feat-sig { color: var(--zr-red); }
.esim-feat-plan { display: flex; align-items: baseline; gap: 10px; }
.esim-feat-plan b { font-family: var(--zr-display); font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.esim-feat-plan span { font-size: 15px; font-weight: 700; color: var(--zr-muted-2, #6b6f76); }
.esim-feat-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--zr-line); }
.esim-feat-price { display: flex; flex-direction: column; line-height: 1.2; }
.esim-feat-price b { font-size: 19px; font-weight: 800; color: var(--zr-red); }
.esim-feat-price small { font-size: 12px; font-weight: 700; color: #1e9e5a; }
.esim-feat-cta { padding: 8px 16px; border-radius: 10px; background: var(--zr-red); color: #fff; font-size: 13.5px; font-weight: 800; }

/* Brand-red band. */
.esim-band {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    overflow: hidden;
    padding: 40px 44px;
    border-radius: 24px;
    background: #d8291c;
    color: #fff;
}
.esim-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .14) 100%); pointer-events: none; }
.esim-band > * { position: relative; z-index: 1; }
.esim-band-kicker { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 12.5px; font-weight: 800; }
.esim-band h2 { margin: 12px 0 8px; font-family: var(--zr-display); font-size: 36px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: #fff; }
.esim-band p { max-width: 520px; margin: 0 0 18px; font-size: 15px; line-height: 1.55; opacity: .95; }
.esim-band-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.esim-band-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 12px; background: #fff; color: #d8291c; font-weight: 800; text-decoration: none; box-shadow: 0 8px 20px rgba(0, 0, 0, .15); transition: transform .16s; }
.esim-band-btn:hover { color: #b11f14; transform: translateY(-2px); text-decoration: none; }
.esim-band-link { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.esim-band-link:hover { color: #fff; }
.esim-band-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.esim-band-steps li { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 10px; border-radius: 18px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); text-align: center; }
.esim-band-steps b { font-size: 14px; font-weight: 800; }
.esim-band-ic { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; background: #fff; color: #d8291c; }
.esim-signal-anim { gap: 3px; align-items: flex-end; padding-bottom: 14px; }
.esim-signal-anim i { display: block; width: 5px; border-radius: 2px; background: currentColor; }
.esim-signal-anim i:nth-child(1) { height: 7px; }
.esim-signal-anim i:nth-child(2) { height: 12px; }
.esim-signal-anim i:nth-child(3) { height: 17px; }
.esim-signal-anim i:nth-child(4) { height: 22px; }
@media (prefers-reduced-motion: no-preference) {
    .esim-signal-anim i { animation: esim-signal 1.8s ease-in-out infinite; }
    .esim-signal-anim i:nth-child(2) { animation-delay: .15s; }
    .esim-signal-anim i:nth-child(3) { animation-delay: .3s; }
    .esim-signal-anim i:nth-child(4) { animation-delay: .45s; }
    html.esim-motion [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
    html.esim-motion [data-reveal].is-in { opacity: 1; transform: none; }
}
@keyframes esim-signal { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }

@media (max-width: 1100px) {
    .esim-rail { grid-auto-columns: calc((100% - 2 * 18px) / 2.6); }
    .esim-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .esim-landing .searchbar-hero-text h1 { font-size: 32px; }
    .esim-hero-stat { padding: 6px 10px; font-size: 12.5px; }
    .esim-rail { grid-auto-columns: 72%; gap: 12px; margin: 0 -16px; padding: 4px 16px 14px; }
    .esim-rail .selected-tour-name { font-size: 17px; }
    .esim-rail-nav { display: none; }
    .esim-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 14px; padding: 0 16px; scrollbar-width: none; }
    .esim-chip { flex: none; }
    .esim-feat-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .esim-band { grid-template-columns: 1fr; padding: 26px 20px; border-radius: 20px; }
    .esim-band h2 { font-size: 26px; }
    .esim-band-steps li { padding: 14px 6px; }
    .esim-band-ic { width: 44px; height: 44px; }
}

/* PWA: the shared rail / featured / band sections without the zr band CSS. */
.esim-pwa .zr-sec { margin: 22px 0 0; padding: 0; }
.esim-pwa .zr-chead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.esim-pwa .zr-chead h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--zr-ink); }
.esim-pwa .zr-chead p { margin: 2px 0 0; font-size: 13px; color: var(--zr-muted); }
.esim-pwa .zr-more { display: inline-flex; padding: 7px 14px; border: 1px solid var(--zr-line); border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--zr-red); }
.esim-pwa .esim-rail { grid-auto-columns: 70%; gap: 12px; margin: 0 -16px; padding: 4px 16px 12px; }
.esim-pwa .esim-rail-nav { display: none; }
.esim-pwa .esim-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 12px; padding: 0 16px; scrollbar-width: none; }
.esim-pwa .esim-chip { flex: none; }
.esim-pwa .esim-feat-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.esim-pwa .esim-feat { scroll-snap-align: start; }
.esim-pwa .esim-feat { padding: 14px 16px; gap: 10px; }
.esim-pwa .esim-feat-plan b { font-size: 26px; }
.esim-pwa .esim-band { grid-template-columns: 1fr; padding: 22px 18px; border-radius: 20px; gap: 18px; }
.esim-pwa .esim-band h2 { font-size: 24px; }
.esim-pwa .esim-band-steps li { padding: 12px 6px; }
.esim-pwa .esim-band-ic { width: 42px; height: 42px; }
.searchbar-text .esim-hl { padding: 0 .2em; border-radius: 8px; box-shadow: none; }

/* ---- Installation guide (checkout card, /esim/guide/, order page). ---- */
.esim-guide { font-size: 14px; color: #1c1c24; }
.esim-guide-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.esim-guide .esim-chip { padding: 7px 14px; border: 1px solid #ececef; border-radius: 999px; background: #fff; font-size: 13.5px; font-weight: 700; color: #1c1c24; }
.esim-guide .esim-chip.is-on { background: #1c1c24; border-color: #1c1c24; color: #fff; }
.esim-guide-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.esim-guide-steps li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.55; }
.esim-guide-n {
    flex: none;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d8291c;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}
.esim-guide-device h3, .esim-guide-h { margin: 22px 0 10px; font-size: 16px; font-weight: 800; }
.esim-guide-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.esim-guide-note { padding: 12px 14px; border: 1px solid #ececef; border-radius: 12px; background: #fafafb; }
.esim-guide-note b { display: block; margin-bottom: 4px; font-size: 13.5px; font-weight: 800; }
.esim-guide-note p { margin: 0; font-size: 13px; line-height: 1.55; color: #4a4f57; }
.esim-guide-faq { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.esim-guide-faq dt { font-size: 13.5px; font-weight: 800; }
.esim-guide-faq dd { margin: 2px 0 0; font-size: 13px; line-height: 1.55; color: #4a4f57; }
.esim-guide-warn { margin: 16px 0 0; padding: 10px 14px; border-radius: 10px; background: #fff6f5; color: #b11f14; font-size: 13px; font-weight: 700; }
.esim-pay-guide-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.esim-payment-page .esim-sum-guide { display: flex; align-items: center; gap: 8px; margin: 0 18px 14px; padding: 10px 12px; border: 1px solid #ececef; border-radius: 12px; font-size: 13px; font-weight: 800; color: #1c1c24; text-decoration: none; }
.esim-payment-page .esim-sum-guide span { flex: 1; }
.esim-payment-page .esim-sum-guide .esim-ic { color: #d8291c; }
.esim-order-guide { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: #d8291c; text-decoration: underline; }

/* Printable guide page. */
.esim-guide-doc { max-width: 860px; margin: 0 auto; padding: 32px 36px; border: 1px solid #ececef; border-radius: 18px; background: #fff; box-shadow: 0 2px 10px rgba(16, 24, 40, .05); }
.esim-guide-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid #ececef; }
.esim-guide-head > div { flex: 1; }
.esim-guide-head h1 { margin: 0 0 4px; font-size: 24px; font-weight: 800; }
.esim-guide-head p { margin: 0; font-size: 14px; color: #6b6f76; }
.esim-guide-logo { display: none; height: 26px; width: auto; }
@media print { .esim-guide-logo { display: block; } }
.esim-guide-print { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 12px; background: #d8291c; color: #fff; font-weight: 800; white-space: nowrap; }
.esim-guide-foot { margin-top: 24px; padding-top: 14px; border-top: 1px solid #ececef; font-size: 13px; color: #6b6f76; }
@media (max-width: 767px) {
    .esim-guide-notes { grid-template-columns: 1fr; }
    .esim-guide-doc { padding: 20px 16px; }
    .esim-guide-head { flex-wrap: wrap; }
}
@media print {
    @page { size: A4; margin: 14mm; }
    .esim-guide-page nav.navbar,
    .esim-guide-page footer:not(.esim-guide-foot),
    .esim-guide-page .no-print,
    .esim-guide-page [class*="chat" i],
    .esim-guide-page .page-footer-content { display: none !important; }
    .esim-guide-page, .esim-guide-page body { background: #fff !important; }
    .esim-guide-doc { max-width: none; padding: 0; border: 0; box-shadow: none; }
    .esim-guide-device, .esim-guide-note, .esim-guide-faq > div { break-inside: avoid; }
    .esim-guide-n { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- PWA checkout (pwa/esim/payment.html) and guide (pwa/esim/guide.html). ---- */
.esim-pwa-pay { padding: 12px 14px calc(96px + env(safe-area-inset-bottom)); font-family: "Manrope", system-ui, sans-serif; color: #1c1c24; }
.esim-pwa-alert { margin-bottom: 10px; padding: 10px 12px; border-radius: 12px; background: #fdecea; color: #b11f14; font-size: 13.5px; font-weight: 700; }
.esim-pwa-sum { margin-bottom: 12px; border: 1px solid #ececef; border-radius: 16px; background: #fff; overflow: hidden; }
.esim-pwa-sum-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: none; text-align: left; color: inherit; }
.esim-pwa-sum-img { width: 46px; height: 46px; flex: none; object-fit: cover; border-radius: 12px; }
.esim-pwa-sum-img.is-flag { border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.esim-pwa-sum-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.esim-pwa-sum-tx b { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esim-pwa-sum-tx small { font-size: 12.5px; font-weight: 600; color: #6b6f76; }
.esim-pwa-sum-amt { font-size: 16px; font-weight: 800; color: #d8291c; white-space: nowrap; }
.esim-pwa-sum-chev { color: #8a8f98; transition: transform .18s; }
.esim-pwa-sum.is-open .esim-pwa-sum-chev { transform: rotate(180deg); }
.esim-pwa-sum-body { padding: 4px 14px 14px; border-top: 1px solid #f0f0f3; }
.esim-pwa-kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13.5px; border-bottom: 1px dashed #ececef; }
.esim-pwa-kv span { color: #6b6f76; }
.esim-pwa-kv b { text-align: right; font-weight: 700; }
.esim-pwa-kv.is-total { border-bottom: 0; font-size: 15px; }
.esim-pwa-kv.is-total b { color: #d8291c; font-weight: 800; }
.esim-pwa-link { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 800; color: #d8291c; text-decoration: underline; }
.esim-pwa-card { margin-bottom: 12px; padding: 14px; border: 1px solid #ececef; border-radius: 16px; background: #fff; }
.esim-pwa-card h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 16px; font-weight: 800; }
.esim-pwa-card h2 .esim-ic { color: #d8291c; }
.esim-pwa-field { display: block; margin-bottom: 10px; }
.esim-pwa-field > span { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 700; color: #4a4f57; }
.esim-pwa-field input, .esim-pwa-field select, .esim-pwa-phone select, .esim-pwa-phone input {
    width: 100%;
    height: 48px;
    padding: 0 12px;
    border: 1px solid #e3e5ea;
    border-radius: 12px;
    background: #fff;
    font-size: 16px;
    color: #1c1c24;
}
.esim-pwa-phone { display: flex; gap: 8px; }
.esim-pwa-phone select { flex: 0 0 120px; width: 120px; }
.esim-pwa-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.esim-pwa-note { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: #6b6f76; }
.esim-pwa-toggle, .esim-pwa-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; }
.esim-pwa-toggle input, .esim-pwa-check input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: #d8291c; }
.esim-pwa-toggle b { display: block; font-size: 15px; }
.esim-pwa-toggle small { color: #6b6f76; }
.esim-pwa-toggle + input + div { margin-top: 12px; }
.esim-pwa-check + .esim-pwa-check { margin-top: 12px; }
.esim-pwa-check a { color: #d8291c; font-weight: 700; text-decoration: underline; }
.esim-pwa-pay .pmsel-grid { grid-template-columns: 1fr; }
.esim-pwa-paybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid #ececef;
    background: #fff;
    box-shadow: 0 -8px 24px rgba(16, 24, 40, .08);
}
.esim-pwa-paybar-amt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.esim-pwa-paybar-amt small { font-size: 11.5px; font-weight: 700; color: #8a8f98; }
.esim-pwa-paybar-amt b { font-size: 19px; font-weight: 800; color: #d8291c; }
.esim-pwa-paybtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: 14px;
    background: #d8291c;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}
.esim-pwa-paybtn:disabled { opacity: .5; }
.esim-pwa-sheet-bg { position: fixed; inset: 0; z-index: 60; background: rgba(10, 10, 16, .45); }
.esim-pwa-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 61;
    display: flex;
    flex-direction: column;
    max-height: 82vh;
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
    background: #fff;
}
.esim-pwa-sheet-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid #ececef; }
.esim-pwa-sheet-head button { border: 0; background: none; font-size: 26px; line-height: 1; color: #6b6f76; }
.esim-pwa-sheet-body { flex: 1; overflow-y: auto; padding: 10px 0; font-size: 13px; word-break: break-word; }
.esim-pwa-guide { padding: 14px 14px 28px; }
.esim-pwa-guide h1 { margin: 0 0 4px; font-size: 22px; font-weight: 800; }
.esim-pwa-guide .esim-guide-notes { grid-template-columns: 1fr; }
/* PWA shell has no icon font: the method tiles get their icons from SVG. */
.esim-pwa-pay .pmsel-icon i { display: none; }
.esim-pwa-pay .pmsel-icon::before { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--pmsel-glyph) center / contain no-repeat; mask: var(--pmsel-glyph) center / contain no-repeat; }
.esim-pwa-pay .pmsel-icon { --pmsel-glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><rect x='2.5' y='5' width='19' height='14' rx='2.5'/><path d='M2.5 10h19M6.5 15h4'/></svg>"); }
.esim-pwa-pay .pmsel-icon--stripe { --pmsel-glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13.98 9.7c-1.62-.6-2.5-1.06-2.5-1.8 0-.62.51-.98 1.43-.98 1.66 0 3.37.64 4.55 1.22l.66-4.1c-.93-.45-2.83-1.17-5.46-1.17-1.86 0-3.4.49-4.5 1.4-1.15.94-1.74 2.31-1.74 3.96 0 2.99 1.83 4.27 4.8 5.35 1.92.68 2.56 1.17 2.56 1.92 0 .73-.62 1.15-1.75 1.15-1.4 0-3.7-.69-5.2-1.57l-.67 4.15c1.29.73 3.67 1.47 6.15 1.47 1.96 0 3.6-.46 4.7-1.33 1.24-.97 1.88-2.4 1.88-4.24 0-3.06-1.86-4.33-4.91-5.43z'/></svg>"); }
.esim-pwa-pay label.esim-pwa-check, .esim-pwa-pay label.esim-pwa-toggle { display: flex; padding: 0; margin: 0; background: none; }
.esim-pwa-pay label.esim-pwa-check + label.esim-pwa-check { margin-top: 14px; }
.esim-pwa-pay-page .esim-pwa-paybar { padding-left: 84px; }
/* PWA guide / checkout: touch targets and readable footer text. The shared
   navbar keeps its own 33px chips (pwa/redesign.css §3): enlarging them here
   pushed the burger past the right edge at 360px. */
.esim-pwa-page .esim-guide-print,
.esim-pwa-page .esim-pwa-paybtn { min-height: 48px; }
.esim-pwa-page footer, .esim-pwa-page .footer { font-size: 12px; }
.esim-pwa-paybar-amt small { line-height: 1.15; }
.esim-pwa-paybar-amt b { white-space: nowrap; }
.esim-pwa-paybtn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 380px) {
    .esim-pwa-paybar-amt b { font-size: 17px; }
    .esim-pwa-paybtn { padding: 0 14px; font-size: 14px; }
}

/* ---- multi-eSIM checkout: quantity stepper + per-eSIM labels ---- */
.esim-qty { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding: 12px 14px; border: 1px solid #ffd9d2; border-radius: 14px; background: #fff7f5; }
.esim-qty-head { display: flex; flex-direction: column; min-width: 0; }
.esim-qty-t { font-weight: 700; font-size: 14.5px; color: #24272c; }
.esim-qty-head small { font-size: 12px; color: #6b7280; }
.esim-qty-stepper { display: inline-flex; align-items: center; border: 1px solid #e3e5e9; border-radius: 999px; background: #fff; overflow: hidden; flex: 0 0 auto; }
.esim-qty-btn { width: 38px; height: 38px; border: 0; background: transparent; font-size: 20px; font-weight: 700; line-height: 1; color: #d8291c; cursor: pointer; }
.esim-qty-btn:disabled { color: #c4c7cc; cursor: default; }
.esim-qty-val { min-width: 30px; text-align: center; font-weight: 800; font-size: 16px; color: #24272c; }
.esim-qty-stepper--sm .esim-qty-btn { width: 32px; height: 32px; font-size: 18px; }
.esim-qty-stepper--sm .esim-qty-val { min-width: 24px; font-size: 14px; }
.esim-labels { margin: 0 0 16px; }
.esim-labels-t { font-weight: 600; font-size: 13.5px; margin-bottom: 8px; }
.esim-labels-t small { display: block; font-weight: 400; font-size: 12px; color: #6b7280; }
.esim-labels-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.esim-label-field { display: block; margin: 0; }
.esim-label-field > span { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 700; color: #4a4f57; }
.esim-label-field input { width: 100%; min-height: 42px; padding: 8px 12px; border: 1px solid #dfe1e6; border-radius: 10px; font-size: 14px; }
.esim-qty-unit { display: block; font-size: 12px; font-weight: 500; color: #6b7280; }
.esim-qty-unit .currency-icon, .esim-qty-unit i { font-size: inherit; }

/* ---- top-up: banner, tag, order-page link ---- */
.esim-topup-banner { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; padding: 12px 14px; border-radius: 14px; background: #eef6ff; border: 1px solid #cfe3fb; color: #1d3b5c; }
.esim-topup-banner b { display: block; font-size: 14.5px; }
.esim-topup-banner span { font-size: 13px; }
.esim-topup-ic { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: #fff; color: #d8291c; }
.esim-topup-ic--lg { width: 48px; height: 48px; border-radius: 14px; background: #fff1ee; }
.esim-topup-tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #1d6fd6; color: #fff; font-size: 11.5px; font-weight: 700; vertical-align: middle; }
.esim-topup-cta { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; padding: 14px 16px; border-radius: 14px; border: 1px dashed #f3a99d; background: #fff7f5; color: #24272c; text-decoration: none; }
.esim-topup-cta:hover { background: #ffefeb; color: #24272c; }
.esim-topup-cta > span:nth-child(2) { flex: 1; min-width: 0; }
.esim-topup-cta b { display: block; font-size: 15px; }
.esim-topup-cta small { color: #6b7280; }
.esim-topup-cta > .esim-ic, .esim-topup-cta > svg { color: #d8291c; flex: 0 0 auto; }
.esim-profile-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.esim-profile-no { padding: 2px 8px; border-radius: 999px; background: #f1f2f4; font-size: 12px; color: #4a4f57; }
.esim-profile-label { padding: 2px 10px; border-radius: 999px; background: #fff1ee; color: #d8291c; font-size: 13px; }

/* ---- top-up page ---- */
.esim-topup { max-width: 760px; margin: 0 auto; }
.esim-topup-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.esim-topup-head h1 { margin: 0 0 4px; font-size: 26px; font-weight: 800; color: #24272c; }
.esim-topup-head p { margin: 0; color: #5b616b; font-size: 14.5px; }
.esim-topup-alert { border-radius: 12px; }
.esim-topup-card { margin-bottom: 14px; padding: 20px; border: 1px solid #ececef; border-radius: 18px; background: #fff; }
.esim-topup-card h2 { margin: 0 0 12px; font-size: 18px; font-weight: 800; }
.esim-topup-field { display: block; margin-bottom: 14px; }
.esim-topup-field > span { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 700; color: #4a4f57; }
.esim-topup-field input { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid #dfe1e6; border-radius: 12px; font-size: 15px; }
.esim-topup-field small { display: block; margin-top: 5px; font-size: 12px; color: #8a8f98; }
.esim-topup-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; border: 0; border-radius: 12px; background: #d8291c; color: #fff; font-weight: 800; font-size: 15px; }
.esim-topup-steps { margin: 4px 0 0; padding-left: 20px; color: #5b616b; font-size: 13.5px; line-height: 1.7; }
.esim-topup-found { display: flex; align-items: center; gap: 12px; }
.esim-topup-flag { width: 36px; height: 26px; object-fit: cover; border-radius: 5px; box-shadow: 0 0 0 1px #eee; }
.esim-topup-found-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.esim-topup-found-tx b { font-size: 16px; }
.esim-topup-found-tx small { color: #6b7280; }
.esim-topup-change { font-size: 13px; font-weight: 700; color: #d8291c; white-space: nowrap; }
.esim-topup-pick { margin-top: 16px; }
.esim-topup-pick-t { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.esim-topup-pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.esim-topup-pick-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e3e5e9; border-radius: 12px; color: #24272c; text-decoration: none; }
.esim-topup-pick-item small { display: block; color: #6b7280; }
.esim-topup-pick-item.is-on { border-color: #d8291c; background: #fff7f5; }
.esim-topup-pick-no { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #f1f2f4; font-weight: 800; font-size: 13px; }
.esim-topup-pick-item.is-on .esim-topup-pick-no { background: #d8291c; color: #fff; }
.esim-topup-note { margin: 0 0 12px; color: #5b616b; font-size: 13.5px; }
.esim-topup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.esim-topup-pkg { display: flex; flex-direction: column; gap: 2px; padding: 14px; border: 1px solid #e3e5e9; border-radius: 14px; color: #24272c; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.esim-topup-pkg:hover { border-color: #d8291c; box-shadow: 0 6px 18px rgba(216, 41, 28, .08); color: #24272c; }
.esim-topup-pkg-data { font-size: 20px; font-weight: 800; }
.esim-topup-pkg-days { font-size: 13px; color: #6b7280; }
.esim-topup-pkg-price { margin-top: 6px; font-size: 16px; font-weight: 800; color: #d8291c; }
.esim-topup-pkg-cta { margin-top: 8px; padding: 7px 0; border-radius: 10px; background: #fff1ee; color: #d8291c; text-align: center; font-size: 13px; font-weight: 700; }
.esim-topup--pwa { padding: 14px 14px 90px; }
.esim-topup--pwa .esim-topup-head h1 { font-size: 21px; }
.esim-topup--pwa .esim-topup-card { padding: 14px; border-radius: 16px; }
.esim-topup--pwa .esim-topup-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 575px) {
    .esim-topup-head h1 { font-size: 22px; }
    .esim-topup-grid { grid-template-columns: 1fr 1fr; }
}
.esim-pwa-pay .esim-labels-grid { grid-template-columns: 1fr 1fr; }

/* ---- PWA checkout / top-up / guide: 360-430px fit and 44px touch targets ---- */
/* country code: room for "Türkiye (+90)" at 16px, own chevron, ellipsis for longer names */
.esim-pwa-phone select {
    flex: 0 0 142px;
    width: 142px;
    min-width: 0;
    padding: 0 28px 0 10px;
    -webkit-appearance: none;
    appearance: none;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") right 10px center / 14px no-repeat;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.esim-pwa-phone input { flex: 1 1 auto; min-width: 0; }
/* summary title: wrap to two lines instead of "ABD Virjin Ada…" */
.esim-pwa-sum-tx b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
.esim-pwa-sum-head { min-height: 60px; }
.esim-pwa-pay .esim-qty-btn { width: 44px; height: 44px; }
.esim-pwa-sheet-head button { min-width: 44px; min-height: 44px; }
.esim-pwa-paybar-amt small { font-size: 11px; }
@media (max-width: 380px) {
    .esim-pwa-paybar { gap: 8px; }
    .esim-pwa-paybtn .esim-ic { display: none; }
}
.esim-pwa-guide .esim-chip { min-height: 44px; display: inline-flex; align-items: center; }
.esim-topup--pwa { padding-bottom: 28px; }
.esim-topup--pwa .esim-topup-change { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }

/* ---- inline form validation (esim/includes/form_validate.html), web + PWA ---- */
.esim-invalid,
.esim-pwa-field input.esim-invalid,
.esim-pwa-phone input.esim-invalid,
.esim-topup-field input.esim-invalid { border-color: #d8291c !important; box-shadow: 0 0 0 3px rgba(216, 41, 28, .12); }
.esim-field-err { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 700; line-height: 1.35; color: #c62a1d; }
.esim-topup-field .esim-field-err + small { margin-top: 3px; }

/* ---- PWA checkout: the agreements sheet sits above the sticky navbar (z 600) and,
   while open, the cookie banner and the chat bubble step aside so the
   "I have read and understood" button is never covered ---- */
.esim-pwa-sheet-bg { z-index: 1000; }
.esim-pwa-sheet { z-index: 1001; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
body:has(.esim-pwa-sheet.is-open) .cookie-alert,
body:has(.esim-pwa-sheet.is-open) .woot-widget-bubble,
body:has(.esim-pwa-sheet.is-open) .woot-widget-holder,
body:has(.esim-pwa-sheet.is-open) .woot--bubble-holder,
body:has(.esim-pwa-sheet.is-open) .pwa-back-to-top { display: none !important; }
body:has(.esim-pwa-sheet.is-open) { overflow: hidden; }

/* ---- per-eSIM traveller cards (esim/includes/traveller_cards.html), web + PWA ---- */
.esim-traveller { min-width: 0; margin: 0; padding: 0; border: 0; }
.esim-traveller + .esim-traveller { border-top: 1px solid #ececef; }
.esim-traveller-self { gap: 0; cursor: pointer; font-size: 13px; font-weight: 600; }
.esim-traveller-self .form-check-input { float: none; margin-left: 0; }
.esim-date-field { position: relative; }
.esim-vh,
.esim-pwa-field input.esim-vh {
    position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
    border: 0 !important; opacity: 0; pointer-events: none; overflow: hidden; bottom: 0; left: 0;
}
.esim-date-field:has(.esim-invalid) .date-picker-input,
.gender-container:has(.esim-invalid) .zgender-seg { border-color: #d8291c !important; box-shadow: 0 0 0 3px rgba(216, 41, 28, .12); }
.gender-container { position: relative; }
.esim-kvkk-note { font-size: 12px; line-height: 1.4; font-weight: 400; color: #6b7280; }
.esim-pwa-traveller { padding: 12px 0 4px; }
.esim-pwa-traveller-in > .row { --bs-gutter-x: 0; }
.esim-pwa-traveller .form-label { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 700; color: #4a4f57; }
.esim-pwa-traveller .esim-pwa-field input.date-picker-input { height: 48px; }
.esim-pwa-traveller .form-check-input { width: 20px; height: 20px; }
.esim-traveller-names { margin: 0; padding-left: 18px; }
.esim-upsell-slots { display: grid; gap: 8px; margin-top: 10px; }
.esim-upsell-slot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.esim-upsell-slot select { max-width: 60%; }
.esim-pwa-traveller input[type="checkbox"] {
    -webkit-appearance: checkbox; appearance: auto; position: static; display: inline-block;
    opacity: 1; visibility: visible; width: 20px; height: 20px; flex: none; margin: 0; accent-color: #d8291c;
}
.esim-pwa-traveller .form-check { display: flex; align-items: center; gap: 8px; padding-left: 0; }

/* ==========================================================================
   Order detail (esim/includes/order_detail.html): the reservation detail of
   the other modules (tour finish page) in the .bsx look of
   booking_success.css: its --bsx-* tokens, card radius / line / shadow and
   the type scale of tour's ticket_view. Own grid instead of Bootstrap (the
   PWA shell loads none).
   ========================================================================== */
.esim-od { box-sizing: border-box; padding: 0 14px; }
.bsx--app .esim-od { padding: 0 12px; }
.esim-od *, .esim-od *::before, .esim-od *::after { box-sizing: border-box; }
.esim-od-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.esim-od-card { min-width: 0; padding: 16px; background: #fff; border: 1px solid var(--bsx-line); border-radius: var(--bsx-r-md); box-shadow: var(--bsx-shadow); color: var(--bsx-ink); font-family: var(--bsx-font); }
.esim-od-title { margin: 0 0 12px; font-family: var(--bsx-font); font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--bsx-ink); }
.esim-od-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; margin-bottom: 8px; font-size: 11.5px; color: var(--bsx-ink-2); }
.esim-od-meta b { color: var(--bsx-ink); }
.esim-od-kind { font-weight: 700; color: var(--bsx-primary); }
.esim-od-photo { position: relative; margin-bottom: 14px; }
.esim-od-photo > img { display: block; width: 100%; height: 200px; object-fit: cover; border-radius: 8px; background: var(--bsx-surface); }
.esim-od-flag { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 20px); padding: 4px 10px 4px 5px; border-radius: 999px; background: rgba(255, 255, 255, .95); font-size: 12px; font-weight: 700; color: var(--bsx-ink); box-shadow: 0 2px 8px rgba(20, 20, 30, .12); }
.esim-od-flag img { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
.esim-od-name { margin-bottom: 14px; font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--bsx-ink); overflow-wrap: anywhere; }
.esim-od-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-bottom: 14px; }
.esim-od-k { display: block; font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--bsx-muted); }
.esim-od-v { display: block; margin: 2px 0 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--bsx-ink); overflow-wrap: anywhere; }
.esim-od-v--lg { font-size: 15px; font-weight: 700; }
.esim-od-v a { color: var(--bsx-primary); font-weight: 600; }
.esim-od-sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--bsx-ok); }
.esim-od-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0; }
.esim-od-facts dd, .esim-od-codes dd { margin-left: 0; margin-bottom: 0; }
.esim-od-wide { grid-column: 1 / -1; }
.esim-od-pill { display: inline-block; max-width: 100%; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.4; }
.esim-od-pill--ok { background: var(--bsx-ok-soft); color: var(--bsx-ok); }
.esim-od-pill--warn { background: var(--bsx-warn-soft); color: var(--bsx-warn); }
.esim-od-pill--info { background: #eaf2fd; color: #1d5fbf; }
.esim-od-pill--danger { background: var(--bsx-primary-soft); color: var(--bsx-primary-dark); }
.esim-od-total { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bsx-line); font-size: 14px; font-weight: 600; }
.esim-od-total b { font-size: 16px; font-weight: 800; }
.esim-od-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding: 10px 0; }
.esim-od-row:first-child { padding-top: 0; }
.esim-od-row + .esim-od-row { border-top: 1px solid var(--bsx-line); }
.esim-od-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.esim-od-chip { display: inline-block; padding: 2px 8px; border: 1px solid var(--bsx-line); border-radius: 999px; background: var(--bsx-surface); font-size: 11.5px; font-weight: 700; line-height: 1.5; color: var(--bsx-ink-2); white-space: nowrap; }
.esim-od-chip--strong { border-color: #f6cfc9; background: var(--bsx-primary-soft); color: var(--bsx-primary-dark); }
.esim-od-head { margin: 24px 2px 0; }
.esim-od-head h2 { margin: 0; font-family: var(--bsx-font-head); font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--bsx-ink); }
.esim-od-head p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--bsx-ink-2); }
.esim-od-head + .esim-od-grid { margin-top: 12px; }
.esim-od-esim { display: flex; flex-direction: column; gap: 14px; }
.esim-od-esim-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.esim-od-person { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 14.5px; font-weight: 700; color: var(--bsx-ink); overflow-wrap: anywhere; }
.esim-od-person svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--bsx-muted); }
.esim-od-label { font-size: 12.5px; color: var(--bsx-muted); overflow-wrap: anywhere; }
.esim-od-esim-body { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.esim-od-qr { align-self: center; margin: 0; padding: 10px; border: 1px solid var(--bsx-line); border-radius: 12px; background: #fff; }
.esim-od-qr img { display: block; width: 184px; height: 184px; max-width: 100%; object-fit: contain; }
.esim-od-codes { display: grid; gap: 12px; flex: 1 1 auto; min-width: 0; margin: 0; }
.esim-od-code { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.esim-od-code > span { min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--bsx-ink); overflow-wrap: anywhere; }
.esim-od-copy { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border: 1px solid var(--bsx-line); border-radius: 8px; background: #fff; color: var(--bsx-ink-2); cursor: pointer; transition: border-color .15s, color .15s; }
.esim-od-copy:hover, .esim-od-copy:focus-visible { border-color: var(--bsx-ink); color: var(--bsx-ink); }
.esim-od-copy svg { width: 15px; height: 15px; }
.esim-od-copy .esim-od-copy-ok { display: none; }
.esim-od-copy.is-done { border-color: var(--bsx-ok-line); color: var(--bsx-ok); }
.esim-od-copy.is-done .esim-od-copy-ic { display: none; }
.esim-od-copy.is-done .esim-od-copy-ok { display: block; }
.esim-od-meter { display: block; height: 8px; margin: 6px 0; overflow: hidden; border-radius: 999px; background: #ececf1; }
.esim-od-meter i { display: block; height: 100%; border-radius: inherit; background: var(--bsx-ok); }
.esim-od-usage-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-size: 13px; color: var(--bsx-ink-2); }
.esim-od-usage-row b { color: var(--bsx-ink); }
.esim-od-install { margin-top: 14px; }
.esim-od-install .esim-steps-list { font-size: 14px; line-height: 1.5; color: var(--bsx-ink); }
.esim-od-install .esim-steps-list + p { font-size: 12.5px; }
.esim-od-install-links .esim-order-guide { margin-top: 12px; }
.esim-od-demo { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bsx-line); }
.esim-od-demo > summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--bsx-ink); }
.esim-od-demo > summary::-webkit-details-marker { display: none; }
.esim-od-demo > summary > :first-child { color: var(--bsx-primary); }
.esim-od-demo > summary > :last-child { margin-left: auto; color: var(--bsx-muted); transition: transform .2s; }
.esim-od-demo[open] > summary > :last-child { transform: rotate(180deg); }
.esim-od-demo .ep-demo { margin: 12px 0 0; }
.esim-od .esim-topup-cta { margin: 14px 0 0; }
.esim-od .bsx-note { margin: 14px 0 0; }
@media (min-width: 576px) {
    .esim-od-esim-body { flex-direction: row; align-items: flex-start; }
    .esim-od-qr { align-self: flex-start; }
    .esim-od-topup { align-self: flex-start; }
}
@media (min-width: 768px) {
    .esim-od { padding: 0 20px; }
}
@media (min-width: 992px) {
    .esim-od-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .esim-od-grid--one { grid-template-columns: minmax(0, 1fr); }
    .esim-od-grid:not(.esim-od-grid--one) .esim-od-esim-body { flex-direction: column; align-items: stretch; }
    .esim-od-grid:not(.esim-od-grid--one) .esim-od-qr { align-self: center; }
}
@media print {
    .esim-od-card { box-shadow: none; break-inside: avoid; }
    .esim-od-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The shared PWA header (logo + selectors + menu) needs 380px with its 20px
   side padding and pushes 360px phones sideways on every inner page; the
   eSIM pages trim the padding there instead of touching the shared navbar. */
@media (max-width: 379px) {
    body.esim-pwa-page #app .navbar .navbar-inner { padding-left: 6px; padding-right: 8px; }
}