/* ══════════════════════════════════════════════
   eSIM Store — Mobile-First Trendy UI
   ══════════════════════════════════════════════ */

/* ─── Coda font (SIL OFL — see public/fonts/coda/OFL.txt) ─── */
@font-face {
    font-family: 'Coda';
    src: url('../fonts/coda/Coda-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Coda';
    src: url('../fonts/coda/Coda-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ─── Reset & Base ───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --primary: #1a8a9e;
    --primary-dark: #0d5e6d;
    --primary-light: #6ec8d8;
    --primary-glow: rgba(26, 138, 158, 0.12);
    --secondary: #f0960e;
    --accent: #f5b731;
    --accent-light: #fef3cd;
    --success: #10b981;
    --warning: #f0960e;
    --danger: #ef4444;
    --dark: #0a1e24;
    --gray-900: #142d35;
    --gray-700: #2e5460;
    --gray-500: #6a909b;
    --gray-300: #b8d2d9;
    --gray-100: #f0f7f9;
    --gray-50: #f6fafb;
    --white: #ffffff;
    --gradient-hero: linear-gradient(135deg, #0d5e6d 0%, #1a8a9e 50%, #f0960e 100%);
    --gradient-card: linear-gradient(145deg, #f0f7f9 0%, #fef9ee 100%);
    --gradient-cta: linear-gradient(135deg, #1a8a9e 0%, #0e7490 100%);
    --radius: 16px;
    --radius-sm: 10px;
    --radius-xl: 24px;
    --shadow: 0 2px 8px rgba(26, 138, 158, 0.06), 0 1px 3px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 16px rgba(26, 138, 158, 0.1), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg: 0 12px 40px rgba(26, 138, 158, 0.15);
    --shadow-glow: 0 0 24px rgba(26, 138, 158, 0.2);
    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: var(--font); color: var(--gray-900);
    background: var(--gray-50); line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
/* Push content below the fixed public navbar.
   Admin pages use .admin-layout which has its own structure,
   so only apply when the public navbar is present. */
body.has-navbar { padding-top: 68px; }
a { color: var(--primary); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; height: auto; }

/* ─── Container ──────────────────────────────── */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.container--narrow { max-width: 720px; }

/* ─── Typography ─────────────────────────────── */
.page-title {
    font-size: 1.75rem; font-weight: 800; margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #0d5e6d, #1a8a9e, #f0960e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; background-clip: text;
}
/* Opt children out of the gradient text fill above. Without this, any
   nested <small>/<code>/<del>/<i> inherits the transparent fill and
   renders invisibly — the same trap that bit the mobile sticky bar
   earlier. Preempt it for any future inline children. */
.page-title small,
.page-title code,
.page-title del,
.page-title i,
.page-title .badge {
    background: none !important;
    -webkit-text-fill-color: var(--gray-700) !important;
    color: var(--gray-700) !important;
}
.page-subtitle { color: var(--gray-500); margin-bottom: 1.5rem; font-size: 1.0625rem; }
.section__title {
    font-size: 1.5rem; font-weight: 800; margin-bottom: 0.25rem;
    letter-spacing: -0.02em;
}
.section__subtitle { color: var(--gray-500); margin-bottom: 1.5rem; }
.text-center { text-align: center; }
.text-sm { font-size: 0.875rem; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }

/* ─── Buttons ────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.75rem 1.5rem; border-radius: 999px;
    font-weight: 600; font-size: 0.875rem; border: 2px solid transparent;
    cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font); text-decoration: none; line-height: 1.4; text-align: center;
    position: relative; overflow: hidden;
}
.btn--primary {
    background: var(--gradient-cta); color: var(--white);
    border: none; box-shadow: 0 4px 15px rgba(26, 138, 158, 0.3);
}
.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(26, 138, 158, 0.4);
    color: var(--white);
}
.btn--outline {
    border-color: var(--gray-300); color: var(--gray-700);
    background: var(--white);
}
.btn--outline:hover {
    border-color: var(--primary); color: var(--primary);
    background: var(--primary-glow);
}
.btn--sm { padding: 0.5rem 1rem; font-size: 0.8125rem; white-space: nowrap; }
.btn--lg { padding: 1rem 2rem; font-size: 1rem; }
.btn--block { width: 100%; justify-content: center; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* ─── Navbar ─────────────────────────────────── */
.navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: var(--white);
    border-bottom: 1px solid rgba(26, 138, 158, 0.08);
}
.navbar__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.navbar__logo {
    display: flex; align-items: center; gap: 0.5rem;
    text-decoration: none;
}
.navbar__logo-icon {
    flex-shrink: 0; display: block;
    transition: transform 0.2s;
}
.navbar__logo:hover .navbar__logo-icon { transform: scale(1.05); }
.navbar__logo-text {
    font-family: 'Coda', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em;
    line-height: 1; display: inline-flex; align-items: baseline;
}
.navbar__logo-ideal { color: var(--primary); }
.navbar__logo-esim  { color: var(--secondary); }
.navbar__toggle {
    display: flex; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 6px;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}
.navbar__toggle:hover { background: var(--gray-100); }
.navbar__toggle span {
    width: 22px; height: 2px; background: var(--gray-700);
    border-radius: 2px; transition: 0.3s;
}
.navbar__menu {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--gray-100);
    padding: 1rem; flex-direction: column; gap: 0.25rem;
    box-shadow: var(--shadow-lg);
    /* Cap the height to the available viewport and allow internal scroll
       so all items remain reachable on landscape mobile (where viewport
       height drops to ~375–430px and the open menu would otherwise spill
       below the fold with no way to reach the lower entries). */
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.navbar__menu.open { display: flex; }
.navbar__link {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 1rem; border-radius: var(--radius-sm);
    color: var(--gray-700); font-weight: 500; font-size: 0.9375rem;
    transition: all 0.2s; white-space: nowrap;
}
.navbar__link:hover { color: var(--primary); background: var(--primary-glow); }
.navbar__link.active { color: var(--primary); background: var(--primary-glow); font-weight: 600; }
.navbar__basket { position: relative; }
.navbar__basket-count {
    position: absolute; top: 0; right: 0;
    background: var(--secondary); color: var(--white);
    font-size: 0.625rem; font-weight: 800; line-height: 1;
    min-width: 16px; height: 16px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
}

/* Notification bell on nav and buttons — used for unread-count indicators. */
.navbar__account { position: relative; }
.navbar__notif-dot {
    display: inline-flex; align-items: center; gap: 0.25rem;
    margin-left: 0.375rem; padding: 0.125rem 0.5rem;
    background: #dc2626; color: #fff; font-size: 0.6875rem; font-weight: 700;
    border-radius: 999px; line-height: 1;
}
.navbar__notif-dot .fa-bell { font-size: 0.625rem; }

.btn-notif-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    margin-left: 0.375rem; background: #dc2626; color: #fff;
    font-size: 0.6875rem; font-weight: 700; line-height: 1;
    border-radius: 999px;
}
.navbar__actions {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
    margin-top: 0.5rem; padding-top: 0.5rem;
    border-top: 1px solid var(--gray-100);
}

/* ─── Currency switcher ────────────────────────── */
.currency-switcher { position: relative; }
.currency-switcher__btn {
    display: inline-flex; align-items: center; gap: 0.25rem;
    background: var(--gray-50); border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm, 6px); padding: 0.5rem 0.75rem;
    font-family: var(--font); font-size: 0.8125rem; font-weight: 600;
    color: var(--gray-700); cursor: pointer; transition: all 0.15s;
    line-height: 1; white-space: nowrap;
}
.currency-switcher__btn:hover { border-color: var(--primary); color: var(--primary); }
.currency-switcher__dropdown {
    display: none; position: absolute; top: 100%; right: 0;
    margin-top: 0.375rem; min-width: 140px; max-width: calc(100vw - 2rem);
    background: var(--white); border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm, 6px); box-shadow: var(--shadow-md);
    z-index: 200; overflow: hidden;
}
.currency-switcher__dropdown.open { display: block; }
.currency-switcher__option {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.75rem; cursor: pointer;
    font-size: 0.8125rem; font-weight: 500; color: var(--gray-700);
    transition: background 0.1s;
}
.currency-switcher__option:hover { background: var(--gray-50); }
.currency-switcher__option.active { color: var(--primary); font-weight: 700; background: var(--primary-glow); }
.currency-switcher__option-symbol {
    width: 1.25rem; text-align: center; font-weight: 700; font-size: 0.875rem;
}

/* Mobile: the currency button lives inside the off-canvas navbar menu near
   its left edge. `right: 0` (the desktop default) anchors the dropdown's
   right edge to the button, which pushes its left edge off-screen. Flip to
   left-anchored on narrow viewports so the dropdown extends rightwards and
   stays visible. */
@media (max-width: 1023px) {
    .currency-switcher__dropdown {
        left: 0; right: auto; min-width: 180px;
    }
}

/* ─── Page Hero (visible image + overlay text for inner pages) ─── */
.page-hero {
    position: relative; overflow: hidden;
    color: var(--white);
}
/* Tighten the gap between any page hero and the first content section
   below. Covers the home .hero, persona-hero, and the various page/city
   heroes so none of them leave 4.5rem of whitespace below on laptop. */
.page-hero + section.section,
.country-hero + section.section,
.city-hero + section.section,
.hero + section.section,
.persona-hero + section.section { padding-top: 1.25rem; }
@media (min-width: 768px) {
    .page-hero + section.section,
    .country-hero + section.section,
    .city-hero + section.section,
    .hero + section.section,
    .persona-hero + section.section { padding-top: 1.75rem; }
}
@media (min-width: 1280px) {
    .hero + section.section,
    .persona-hero + section.section { padding-top: 2rem; }
}

/* When the very first thing under <main> is a section (no hero above it),
   the navbar already gives ~68px of clearance — avoid stacking another
   4.5rem of section top-padding on top of that. */
main > section.section:first-child { padding-top: 1.25rem; }
@media (min-width: 768px) {
    main > section.section:first-child { padding-top: 2rem; }
}
.page-hero__img {
    display: block; width: 100%;
    height: 50vh; min-height: 280px; max-height: 600px;
    object-fit: cover; object-position: center 20%;
}
.page-hero__overlay {
    position: absolute; inset: 0; z-index: 1;
    display: flex; align-items: center;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--primary-dark) 75%, transparent) 0%,
            color-mix(in srgb, var(--primary)      40%, transparent) 50%,
            color-mix(in srgb, var(--secondary)    25%, transparent) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.35) 100%);
    padding: 2rem 0;
}
.page-hero__title {
    font-size: 2rem; font-weight: 800; letter-spacing: -0.02em;
    margin: 0 0 0.375rem; text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.page-hero__subtitle {
    font-size: 1rem; opacity: 0.92; margin: 0;
    max-width: 540px; text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
@media (min-width: 640px) {
    .page-hero__title { font-size: 2.5rem; }
}

/* ─── Hero (homepage) ────────────────────────── */
.hero {
    color: var(--white);
    position: relative; overflow: visible;
    display: flex; flex-direction: column;
}
.hero__bg {
    position: relative; z-index: 0; width: 100%; overflow: hidden;
}
.hero__bg img {
    width: 100%; height: auto; display: block;
    object-fit: cover; object-position: center 25%;
}
.hero__bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(10, 30, 36, 0.15) 0%,
        rgba(10, 30, 36, 0.4) 100%
    );
}
.hero__content-wrap {
    position: relative; z-index: 1;
    background: linear-gradient(
        135deg,
        rgba(10, 30, 36, 0.9) 0%,
        rgba(13, 94, 109, 0.85) 50%,
        rgba(240, 150, 14, 0.7) 100%
    );
    padding: 2rem 1rem;
    width: 100%;
}
.hero__content {
    max-width: 1200px; margin: 0 auto;
}
.hero__title {
    font-size: 1.75rem; font-weight: 900; line-height: 1.15;
    margin-bottom: 0.75rem; letter-spacing: -0.03em;
    color: var(--white); -webkit-text-fill-color: var(--white);
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.hero__subtitle { font-size: 1rem; opacity: 0.9; margin-bottom: 1.25rem; max-width: 540px; }
.hero__badges {
    display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem;
    justify-content: center;
}
.hero__actions {
    display: flex; flex-direction: column; gap: 0.75rem; align-items: stretch;
    max-width: 560px;
}
.hero__choose-btn {
    background: var(--secondary); color: var(--white);
    border: 2px solid var(--secondary); border-radius: 999px;
    box-shadow: 0 4px 15px rgba(240,150,14,0.4);
    white-space: nowrap; justify-content: center;
}
.hero__choose-btn:hover {
    background: #d97f0a; border-color: #d97f0a; color: var(--white);
    box-shadow: 0 6px 20px rgba(240,150,14,0.5);
}
@media (min-width: 640px) {
    .hero__actions { flex-direction: row; align-items: flex-start; gap: 0.5rem; }
}
.hero__badges span {
    display: inline-flex; align-items: center; gap: 0.375rem;
    font-size: 0.75rem; font-weight: 500;
    background: rgba(255,255,255,0.15); padding: 0.375rem 0.75rem;
    border-radius: 999px; backdrop-filter: blur(4px);
}

/* Search Bar */
.search-bar {
    display: flex; align-items: center; background: var(--white);
    border-radius: 999px; padding: 0.375rem 0.375rem 0.375rem 1.25rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15); max-width: 500px;
}
.search-bar i { color: var(--gray-500); }
.search-bar input {
    flex: 1; border: none; outline: none; padding: 0.625rem;
    font-size: 0.9375rem; font-family: var(--font); background: transparent;
    min-width: 0; color: var(--gray-900);
}
.search-bar .btn { border-radius: 999px; white-space: nowrap; }
.search-bar--wide {
    max-width: 100%; margin-bottom: 1.5rem;
    border: 2px solid var(--gray-300);
    box-shadow: var(--shadow);
}

/* ─── Section ────────────────────────────────── */
.section { padding: 2.5rem 0; }
.section--gray { background: var(--white); }
.section--dark {
    background: var(--dark); color: var(--white);
    position: relative;
}
.section--dark::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(26, 138, 158, 0.2) 0%, transparent 60%);
}

/* ─── SSO Buttons ────────────────────────────── */
.sso-divider {
    text-align: center; margin: 1.25rem 0; position: relative;
}
.sso-divider::before {
    content: ''; position: absolute; top: 50%; left: 0; right: 0;
    height: 1px; background: var(--gray-300);
}
.sso-divider span {
    position: relative; background: var(--white); padding: 0 0.75rem;
    font-size: 0.8125rem; color: var(--gray-500); font-weight: 500;
}
.sso-buttons { display: flex; flex-direction: column; gap: 0.5rem; }
.sso-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.625rem;
    padding: 0.625rem 1rem; border-radius: var(--radius-sm);
    font-family: var(--font); font-size: 0.875rem; font-weight: 600;
    text-decoration: none; transition: all 0.2s;
    border: 2px solid var(--gray-300);
}
.sso-btn:hover { box-shadow: var(--shadow-md); }
.sso-btn--google { background: var(--white); color: var(--gray-700); }
.sso-btn--google:hover { border-color: #4285F4; color: var(--gray-700); }
.sso-btn--facebook { background: #1877F2; color: var(--white); border-color: #1877F2; }
.sso-btn--facebook:hover { background: #166FE5; color: var(--white); }
.sso-btn--apple { background: #000; color: var(--white); border-color: #000; }
.sso-btn--apple:hover { background: #1a1a1a; color: var(--white); }
.sso-btn--disabled { opacity: 0.45; cursor: not-allowed; }
.sso-btn--disabled:hover { box-shadow: none; }
@media (min-width: 480px) {
    .sso-buttons { flex-direction: row; }
    .sso-btn { flex: 1; }
}

/* ─── Persona / Landing Pages ────────────────── */
.persona-hero {
    color: var(--white); padding: 2.5rem 0; position: relative;
    background-size: cover; background-position: center;
    overflow: hidden;
}
.persona-hero__overlay {
    position: absolute; inset: 0; z-index: 0;
}
.persona-hero .container { position: relative; z-index: 1; }
.persona-hero__content { max-width: 600px; }
.persona-hero__badge {
    display: inline-flex; align-items: center; gap: 0.375rem;
    background: rgba(255,255,255,0.15); backdrop-filter: blur(4px);
    padding: 0.375rem 0.875rem; border-radius: 999px;
    font-size: 0.8125rem; font-weight: 600; margin-bottom: 1rem;
}
.persona-hero__title {
    font-size: 2.5rem; font-weight: 900; line-height: 1.1;
    letter-spacing: -0.03em; margin-bottom: 1rem;
}
.persona-hero__subtitle {
    font-size: 1.0625rem; opacity: 0.9; line-height: 1.6; margin-bottom: 1.5rem;
}
.persona-hero__ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.persona-hero__ctas .btn--outline {
    border-color: rgba(255,255,255,0.5); color: var(--white); background: rgba(255,255,255,0.1);
}
.persona-hero__ctas .btn--outline:hover {
    background: rgba(255,255,255,0.25); border-color: var(--white); color: var(--white);
}
.persona-features {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem;
    margin-top: 2rem;
}
.persona-feature {
    text-align: center;
    padding: 1.5rem 1rem;
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex; flex-direction: column; align-items: center;
}
.persona-feature:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    border-color: var(--primary-light);
}
.persona-feature__icon {
    width: 56px; height: 56px; border-radius: var(--radius);
    background: var(--primary-glow); color: var(--primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.25rem; margin-bottom: 0.75rem; transition: all 0.3s;
}
.persona-feature:hover .persona-feature__icon {
    background: var(--gradient-cta); color: var(--white);
    box-shadow: 0 4px 12px rgba(26,138,158,0.25);
}
.persona-feature h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.375rem; }
.persona-feature p { font-size: 0.875rem; color: var(--gray-600); line-height: 1.6; margin: 0; }
@media (min-width: 640px) { .persona-hero__title { font-size: 3rem; } .persona-hero { padding: 3rem 0; } }
@media (min-width: 1024px) { .persona-hero { padding: 3.5rem 0; } }
@media (min-width: 1024px) { .persona-hero__title { font-size: 3.5rem; } .persona-features { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .persona-features--5 { grid-template-columns: repeat(5, 1fr); } }

/* ─── Legal Content ──────────────────────────── */
.legal-content h2 { font-size: 1.125rem; font-weight: 700; margin: 1.75rem 0 0.5rem; color: var(--gray-900); }
.legal-content p { margin-bottom: 0.75rem; color: var(--gray-700); font-size: 0.9375rem; line-height: 1.7; }
.legal-content ul, .legal-content ol { margin: 0.5rem 0 1rem 1.5rem; color: var(--gray-700); font-size: 0.9375rem; line-height: 1.8; }
.legal-content li { margin-bottom: 0.375rem; }
.legal-content a { color: var(--primary); }

/* ─── Flag Icons ─────────────────────────────── */
.flag-icon { display: inline-block; object-fit: contain; vertical-align: middle; border-radius: 4px; }

/* ─── Country List (covered countries) ───────── */
.plan-detail__countries { margin: 1.5rem 0; }
.plan-detail__countries h3 { font-size: 1.0625rem; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.country-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.country-tag {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.3125rem 0.625rem; background: var(--white);
    border: 1px solid rgba(26, 138, 158, 0.1); border-radius: 999px;
    font-size: 0.8125rem; font-weight: 500; color: var(--gray-700);
    transition: all 0.2s;
}
.country-tag:hover { border-color: var(--primary-light); background: var(--primary-glow); }
.country-tag .flag-icon { border-radius: 2px; }
.country-tag--more {
    cursor: pointer; border: 1px dashed var(--primary);
    color: var(--primary); font-weight: 700; background: var(--primary-glow);
}
.country-tag--more:hover { background: var(--primary); color: var(--white); }

/* Country count link on plan cards */
.plan-card__countries {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.6875rem; color: var(--primary); font-weight: 600;
    margin-top: 0.375rem; cursor: pointer; text-decoration: none;
}
.plan-card__countries:hover { color: var(--primary-dark); text-decoration: underline; }

/* Countries modal */
.countries-modal {
    display: none; position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
    align-items: center; justify-content: center; padding: 1rem;
}
.countries-modal.open { display: flex; }
.countries-modal__content {
    background: var(--white); border-radius: var(--radius-xl);
    padding: 2rem 1.5rem; max-width: 560px; width: 100%;
    max-height: 80vh; overflow-y: auto; position: relative;
    box-shadow: var(--shadow-lg);
}
.countries-modal__close {
    position: absolute; top: 1rem; right: 1rem;
    background: none; border: none; cursor: pointer;
    font-size: 1.25rem; color: var(--gray-500); padding: 0.25rem;
}
.countries-modal__close:hover { color: var(--gray-900); }
.countries-modal__title { font-size: 1.25rem; font-weight: 800; margin-bottom: 1rem; padding-right: 2rem; }

/* ─── Save / Favourite Button ────────────────── */
.save-btn {
    background: none; border: none; cursor: pointer; padding: 0.25rem;
    font-size: 1.125rem; color: var(--gray-300); transition: all 0.2s;
    line-height: 1; flex-shrink: 0;
}
.save-btn:hover { color: #f87171; transform: scale(1.15); }
.save-btn--saved { color: #ef4444; }
.save-btn--saved:hover { color: #dc2626; }

/* ─── Inline Filters (destination detail, wizard results) ── */
.inline-filters {
    background: var(--white); border: 1px solid rgba(26, 138, 158, 0.06);
    border-radius: var(--radius); padding: 1rem;
    box-shadow: var(--shadow); margin-bottom: 1.5rem;
}
.inline-filters__row {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem;
}
.inline-filters__clear {
    display: inline-flex; align-items: center; gap: 0.25rem;
    margin-top: 0.75rem; font-size: 0.8125rem; color: var(--gray-500);
}
.inline-filters__clear:hover { color: var(--danger); }
/* Discrete reset button — small icon-only control that sits in the
   top-right corner of the filter card. Avoids the extra row a full
   "Clear filters" link would add below the filter grid on mobile,
   which used to push the plan grid below the fold. Only visible when
   at least one filter is active (toggled via the [hidden] attribute). */
/* Discrete reset button — small icon-only control. Sits in the top-right
   corner of `.inline-filters` cards (destination detail, find-plan wizard
   refine panel) or inline inside `.filters-drawer` summaries (plans page).
   Only visible when at least one filter is active (toggled via [hidden]).
   Designed to NOT add a new row on mobile — that was the previous "Clear
   filters" link's failure mode, pushing the plan grid below the fold. */
.inline-filters { position: relative; }
.filters-reset {
    width: 28px; height: 28px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: var(--white); color: var(--gray-500);
    border: 1px solid var(--gray-200);
    cursor: pointer; font-size: 0.75rem; line-height: 1;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    text-decoration: none;
}
/* In .inline-filters cards, position absolutely so it occupies corner
   whitespace rather than a grid cell. */
.inline-filters > .filters-reset { position: absolute; top: 0.5rem; right: 0.5rem; }
.filters-reset:hover { color: var(--danger); border-color: var(--danger); background: #fff5f5; }
.filters-reset[hidden] { display: none; }
@media (min-width: 640px) {
    .inline-filters__row { grid-template-columns: repeat(4, 1fr); }
}

/* ─── Plan Cards ─────────────────────────────── */
.plan-grid {
    display: grid; grid-template-columns: 1fr; gap: 1rem;
}
.plan-card {
    background: var(--white);
    border: 1px solid rgba(26, 138, 158, 0.15);
    border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex; flex-direction: column;
}
.plan-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--gradient-cta); opacity: 0; transition: opacity 0.3s;
}
.plan-card:hover {
    box-shadow: var(--shadow-lg); transform: translateY(-4px);
}
.plan-card:hover::before { opacity: 1; }
/* Plan type toggle (Fixed / Unlimited) */
.plan-type-toggle {
    display: inline-flex; gap: 0; margin-bottom: 1.25rem;
    border-radius: 999px; overflow: hidden;
    background: var(--gray-100); padding: 0.25rem;
    border: 1px solid rgba(26,138,158,0.08);
    scroll-margin-top: 80px;
}
.plan-type-toggle__btn {
    padding: 0.5rem 1.125rem; border: none; cursor: pointer;
    background: transparent; color: var(--gray-500);
    font-family: var(--font); font-size: 0.8125rem; font-weight: 600;
    border-radius: 999px; transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 0.375rem;
    white-space: nowrap;
}
.plan-type-toggle__btn:hover { color: var(--gray-700); }
.plan-type-toggle__btn.active {
    background: var(--white); color: var(--primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.plan-card__unlimited {
    color: var(--secondary); font-weight: 700;
}
.plan-card__discount-badge {
    display: inline-block; font-size: 0.625rem; font-weight: 800;
    color: var(--white); background: var(--success);
    padding: 0.125rem 0.5rem; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-left: 0.375rem; vertical-align: middle;
}
/* Softer variant for discounts that resolve only at the line/order level
   (Fixed amount, margin-share, or any cap on a Daily plan), where the
   per-day card price doesn't move. */
.plan-card__discount-badge--checkout {
    background: var(--gray-600);
    text-transform: none; letter-spacing: 0;
    font-weight: 600;
}
.plan-card__header {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 1.25rem 1.25rem 0.5rem;
}
.plan-card__flag { font-size: 1.75rem; }
.plan-card__dest { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.plan-card__body { padding: 0 1.25rem 1rem; flex: 1; }
.plan-card__data {
    font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em;
    background: var(--gradient-cta); -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; background-clip: text;
}
.plan-card__duration { font-size: 0.875rem; color: var(--gray-500); font-weight: 500; }
.plan-card__speed, .plan-card__carrier {
    display: inline-block; font-size: 0.6875rem; color: var(--primary);
    background: var(--primary-glow); padding: 0.1875rem 0.625rem;
    border-radius: 999px; margin-top: 0.375rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.plan-card__footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid rgba(26, 138, 158, 0.06);
    background: var(--gray-50);
    margin-top: auto;
}
.plan-card__price { font-size: 1.25rem; font-weight: 800; color: var(--dark); }
/* Sub-line below the headline price showing per-day and per-GB rates so the
   customer can compare value across plans of different shapes (daily vs
   fixed, big vs small allowance). currency.js re-converts both numbers. */
.plan-card__value-metrics {
    font-size: 0.6875rem; color: var(--gray-500); font-weight: 500;
    margin-top: 0.125rem; font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
/* "Just over budget" upsell badge — soft warning colour, not alarming red,
   so users see it as informational rather than blocked. */
.plan-card__upsell {
    display: inline-flex; align-items: center; gap: 0.25rem;
    margin-top: 0.375rem; font-size: 0.6875rem; font-weight: 700;
    color: #92400e; background: #fef3c7;
    padding: 0.1875rem 0.5rem; border-radius: 999px;
    line-height: 1.2;
}
.plan-card__upsell i { font-size: 0.625rem; }

/* Mobile — tighten plan card so speed, FUP and Add-to-Basket all fit
   above the fold on a ~6" screen. */
@media (max-width: 640px) {
    .plan-card__header  { padding: 0.75rem 0.875rem 0.25rem; gap: 0.375rem; }
    .plan-card__flag    { font-size: 1.25rem; }
    .plan-card__dest    { font-size: 0.9375rem; }
    .plan-card__body    { padding: 0 0.875rem 0.625rem; }
    .plan-card__data    { font-size: 1.375rem; }
    .plan-card__duration { font-size: 0.8125rem; }
    .plan-card__speed,
    .plan-card__carrier { font-size: 0.625rem; padding: 0.125rem 0.5rem; margin-top: 0.25rem; }
    .plan-card__footer  { padding: 0.625rem 0.875rem; }
    .plan-card__price   { font-size: 1.0625rem; }
}

/* ─── Destination Cards ──────────────────────── */
.dest-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem;
}
.dest-card {
    display: flex; flex-direction: column; align-items: center;
    padding: 1.5rem 0.75rem; background: var(--white);
    border: 1px solid rgba(26, 138, 158, 0.06);
    border-radius: var(--radius);
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none; color: inherit;
    position: relative; overflow: hidden;
}
.dest-card::after {
    content: ''; position: absolute; inset: 0;
    background: var(--gradient-card); opacity: 0; transition: opacity 0.3s;
    z-index: 0;
}
.dest-card:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: inherit;
}
.dest-card:hover::after { opacity: 1; }
.dest-card > * { position: relative; z-index: 1; }
.dest-card__flag { font-size: 2.25rem; margin-bottom: 0.5rem; line-height: 1; }
.dest-card__flag .flag-icon { display: block; border-radius: 50%; object-fit: cover; }
.dest-card__name { font-size: 0.9375rem; font-weight: 700; }
.dest-card__info { font-size: 0.75rem; color: var(--gray-500); margin-top: 0.25rem; }

/* ─── Region Tiles (shared: /plans region picker + home page) ─── */
.region-tiles {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
    margin-bottom: 1.5rem;
}
.region-tile {
    background: var(--white); border: 2px solid rgba(26,138,158,0.08);
    border-radius: var(--radius); padding: 1.5rem 1rem;
    text-align: center; cursor: pointer; font-family: var(--font);
    color: inherit; text-decoration: none; display: block;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    position: relative; overflow: hidden;
}
.region-tile::before {
    content: ''; position: absolute; inset: 0;
    background: var(--gradient-card); opacity: 0; transition: opacity 0.3s;
}
.region-tile:hover {
    border-color: var(--primary-light); box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}
.region-tile:hover::before { opacity: 1; }
.region-tile > * { position: relative; z-index: 1; }
.region-tile__icon {
    width: 56px; height: 56px; border-radius: var(--radius);
    background: var(--primary-glow); color: var(--primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.375rem; margin-bottom: 0.75rem;
    transition: all 0.3s;
}
.region-tile:hover .region-tile__icon {
    background: var(--gradient-cta); color: var(--white);
    box-shadow: 0 4px 12px rgba(26,138,158,0.25);
}
.region-tile__name { font-size: 1.0625rem; font-weight: 700; margin-bottom: 0.25rem; }
.region-tile__info { font-size: 0.8125rem; color: var(--gray-500); margin: 0; }
@media (min-width: 640px) { .region-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .region-tiles { grid-template-columns: repeat(5, 1fr); } }

/* ─── Steps ──────────────────────────────────── */
.steps-grid {
    display: grid; grid-template-columns: 1fr; gap: 1.5rem;
}
.step { text-align: center; }
.step__icon {
    width: 72px; height: 72px; border-radius: var(--radius);
    background: var(--gradient-cta); color: var(--white);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin-bottom: 1rem;
    box-shadow: 0 6px 20px rgba(26, 138, 158, 0.25);
    transform: rotate(-3deg);
    transition: transform 0.3s;
}
.step:hover .step__icon { transform: rotate(0deg) scale(1.05); }
.step h3 { font-size: 1.0625rem; font-weight: 700; margin-bottom: 0.375rem; }
.step p { font-size: 0.875rem; color: var(--gray-500); max-width: 300px; margin: 0 auto; }

/* ─── Stats ──────────────────────────────────── */
.stats-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;
    text-align: center; padding: 1.5rem 0;
    position: relative; z-index: 1;
}
.stat__number {
    display: block; font-size: 2.25rem; font-weight: 900;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #fff 0%, #6ec8d8 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.stat__label { font-size: 0.875rem; opacity: 0.7; }

/* ─── Filters ────────────────────────────────── */
.filters {
    margin-bottom: 1.5rem; background: var(--white);
    border-radius: var(--radius); padding: 1.25rem;
    box-shadow: var(--shadow); border: 1px solid rgba(26, 138, 158, 0.06);
}
.filters__row { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.filter-group label {
    display: block; font-size: 0.6875rem; font-weight: 700; color: var(--primary);
    margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.08em;
}
.filter-group select {
    width: 100%; padding: 0.625rem 0.875rem; border: 2px solid var(--gray-300);
    border-radius: var(--radius-sm); font-family: var(--font); font-size: 0.875rem;
    background: var(--white); cursor: pointer; transition: all 0.2s;
    color: var(--gray-700);
}
.filter-group select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-glow); }

/* ─── Region Tabs ────────────────────────────── */
.region-tabs {
    display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.5rem;
    margin-bottom: 1.5rem; -webkit-overflow-scrolling: touch;
}
.region-tab {
    padding: 0.5rem 1.125rem; border: 2px solid var(--gray-300);
    border-radius: 999px; background: var(--white); cursor: pointer;
    font-family: var(--font); font-size: 0.8125rem; font-weight: 600;
    white-space: nowrap; transition: all 0.25s;
}
.region-tab:hover { border-color: var(--primary-light); color: var(--primary); }
.region-tab.active {
    background: var(--gradient-cta); color: var(--white);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(26, 138, 158, 0.25);
}
.region-title { font-size: 1.25rem; font-weight: 700; margin: 1.5rem 0 0.75rem; }

/* ─── Pagination ─────────────────────────────── */
.pagination { display: flex; justify-content: center; gap: 0.375rem; margin-top: 2rem; }
.pagination__btn {
    width: 42px; height: 42px; border: 2px solid var(--gray-300);
    border-radius: var(--radius-sm); background: var(--white);
    cursor: pointer; font-weight: 700; font-family: var(--font);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.pagination__btn:hover { border-color: var(--primary); color: var(--primary); }
.pagination__btn.active {
    background: var(--gradient-cta); color: var(--white);
    border-color: transparent;
}

/* ─── Breadcrumb ─────────────────────────────── */
.breadcrumb {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.875rem; color: var(--gray-500); margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.breadcrumb a { color: var(--gray-500); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb i { font-size: 0.625rem; opacity: 0.5; }

/* ─── Plan Detail ────────────────────────────── */
.plan-detail { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.plan-detail__header { display: flex; align-items: center; gap: 1rem; }
.plan-detail__flag { font-size: 3rem; }
.plan-detail__header h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.plan-detail__name { color: var(--gray-500); }
.plan-detail__seo-desc { color: var(--gray-600); font-size: 0.9375rem; line-height: 1.5; margin: 0.5rem 0 0; max-width: 65ch; }
.plan-detail__specs {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem;
    margin: 1.5rem 0;
}
.spec {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 1rem; background: var(--white); border-radius: var(--radius);
    border: 1px solid rgba(26, 138, 158, 0.06);
    box-shadow: var(--shadow);
    transition: border-color 0.2s;
}
.spec:hover { border-color: var(--primary-light); }
.spec i { font-size: 1.25rem; color: var(--primary); }
.spec strong { display: block; font-weight: 700; }

/* Fair Usage Policy callout (plan detail page, unlimited plans) */
.fup-callout {
    display: flex; align-items: flex-start; gap: 0.875rem;
    background: var(--primary-glow); border-left: 4px solid var(--primary);
    border-radius: var(--radius-sm); padding: 1rem 1.25rem; margin: 1rem 0 1.5rem;
}
.fup-callout__icon { font-size: 1.375rem; color: var(--primary); flex-shrink: 0; line-height: 1.2; }
/* Only the first-child <strong> is the heading (block); inline <strong>
   inside the paragraph (e.g. the data amount) stays inline so it wraps
   naturally with the surrounding text. */
.fup-callout > div > strong:first-child { display: block; font-size: 1rem; margin-bottom: 0.25rem; color: var(--gray-900); }
.fup-callout p { font-size: 0.875rem; color: var(--gray-700); line-height: 1.5; margin: 0; }
.fup-callout p strong { color: var(--gray-900); }
.fup-callout a { color: var(--primary); font-weight: 600; text-decoration: underline; }
.spec span { font-size: 0.75rem; color: var(--gray-500); }
.plan-detail__info ul { list-style: none; }
.plan-detail__info li {
    padding: 0.5rem 0; font-size: 0.9375rem;
    display: flex; align-items: flex-start; gap: 0.5rem;
}
.plan-detail__info li i {
    color: var(--success); font-size: 0.875rem;
    flex-shrink: 0; margin-top: 0.3125rem;
}

/* Purchase Box */
.purchase-box {
    background: var(--white);
    border: 2px solid rgba(26, 138, 158, 0.1);
    border-radius: var(--radius-xl); padding: 2rem 1.5rem;
    box-shadow: var(--shadow-md); position: sticky; top: 84px;
}
.purchase-box__price {
    font-size: 2.75rem; font-weight: 900; text-align: center;
    letter-spacing: -0.03em;
    background: var(--gradient-cta); -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; background-clip: text;
}
.purchase-box__per { text-align: center; color: var(--gray-500); margin-bottom: 1.5rem; font-weight: 500; }
.purchase-box__total { font-size: 1.125rem; font-weight: 700; margin: 1rem 0; text-align: center; }
.purchase-box__trust {
    display: flex; justify-content: center; gap: 1rem; margin-top: 1rem;
    font-size: 0.75rem; color: var(--gray-500);
}
.purchase-box__trust span { display: flex; align-items: center; gap: 0.25rem; }

/* ─── Dest Header ────────────────────────────── */
.dest-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.dest-header__flag { font-size: 3.5rem; line-height: 1; }
.dest-header__flag .flag-icon { display: block; border-radius: 50%; object-fit: cover; }
.dest-header h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }

/* ─── Auth Card ──────────────────────────────── */
.auth-card {
    background: var(--white);
    border: 1px solid rgba(26, 138, 158, 0.08);
    border-radius: var(--radius-xl); padding: 2.5rem 1.75rem;
    box-shadow: var(--shadow-lg); max-width: 440px; margin: 0 auto;
    position: relative; overflow: hidden;
}
.auth-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--gradient-hero);
}
.auth-card__title { font-size: 1.5rem; font-weight: 800; text-align: center; letter-spacing: -0.02em; }
.auth-card__subtitle { text-align: center; color: var(--gray-500); margin-bottom: 1.5rem; }
.auth-card__footer { text-align: center; margin-top: 1.5rem; font-size: 0.875rem; color: var(--gray-500); }

/* ─── Forms ──────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 1rem; }
.form-group { display: flex; flex-direction: column; }
.form-group label { font-size: 0.8125rem; font-weight: 700; margin-bottom: 0.375rem; color: var(--gray-700); }
.form-group input, .form-group select, .form-group textarea {
    padding: 0.75rem 1rem; border: 2px solid var(--gray-300);
    border-radius: var(--radius-sm); font-family: var(--font); font-size: 0.9375rem;
    transition: all 0.2s; background: var(--white);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--primary); outline: none;
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.form-group textarea { resize: vertical; }
.form-hint { font-size: 0.75rem; color: var(--gray-500); margin-top: 0.25rem; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.form-row .form-group { min-width: 0; }
.form-row .form-group input, .form-row .form-group select, .form-row .form-group textarea { width: 100%; box-sizing: border-box; }
.form-group--row { flex-direction: row; justify-content: space-between; align-items: center; }
.checkbox {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.875rem; cursor: pointer; color: var(--gray-700);
}

/* ─── Alerts ─────────────────────────────────── */
.alert {
    padding: 0.875rem 1.25rem; border-radius: var(--radius-sm);
    margin-bottom: 1rem; font-size: 0.9375rem; font-weight: 500;
}
.alert--success {
    background: linear-gradient(135deg, #dcfce7, #d1fae5); color: #065f46;
    border: 1px solid #a7f3d0;
}
.alert--error {
    background: linear-gradient(135deg, #fef2f2, #fef2f2); color: #991b1b;
    border: 1px solid #fecaca;
}

/* ─── Badges ─────────────────────────────────── */
.badge {
    display: inline-block; padding: 0.25rem 0.75rem; border-radius: 999px;
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em;
}
.badge--provisioned { background: #e0f5f9; color: #0d5e6d; }
.badge--installed { background: #dbeafe; color: #1d4ed8; }
.badge--active { background: #d1fae5; color: #065f46; }
.badge--disabled { background: #fef9c3; color: #854d0e; }
.badge--expired { background: #fef3c7; color: #92400e; }
.badge--suspended { background: #fff7ed; color: #9a3412; }
.badge--deactivated { background: var(--gray-100); color: var(--gray-500); }
/* Disabled-on-handset callout — soft amber, distinct from terminal red. */
.esim-disabled-callout {
    border-left: 4px solid #d97706;
    background: #fffbeb;
}
.badge--pending { background: #fef3c7; color: #92400e; }
.badge--paid { background: #dbeafe; color: #1d4ed8; }
.badge--completed { background: #d1fae5; color: #065f46; }
.badge--failed { background: #fef2f2; color: #991b1b; }
.badge--refunded { background: var(--gray-100); color: var(--gray-500); }
.badge--lg { padding: 0.375rem 1rem; font-size: 0.8125rem; }

/* ─── Dashboard ──────────────────────────────── */
.dashboard-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.dash-stat {
    display: flex; flex-direction: column; align-items: center;
    padding: 1.5rem; background: var(--white);
    border-radius: var(--radius);
    border: 1px solid rgba(26, 138, 158, 0.06);
    box-shadow: var(--shadow); transition: all 0.2s;
}
.dash-stat:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.dash-stat i {
    font-size: 1.5rem; margin-bottom: 0.5rem;
    background: var(--gradient-cta); -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; background-clip: text;
}
.dash-stat__num { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; }
.dash-stat__label { font-size: 0.8125rem; color: var(--gray-500); font-weight: 500; }

/* ─── eSIM Card ──────────────────────────────── */
.esim-list { display: flex; flex-direction: column; gap: 1rem; }
.esim-card {
    background: var(--white);
    border: 1px solid rgba(26, 138, 158, 0.06);
    border-radius: var(--radius); padding: 1.25rem;
    box-shadow: var(--shadow); transition: all 0.2s;
}
.esim-card:hover { box-shadow: var(--shadow-md); }
.esim-card__header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.esim-card__flag { font-size: 1.75rem; }
.esim-card__header h3 { font-size: 1rem; font-weight: 700; flex: 1; }
.esim-card__plan { font-size: 0.8125rem; color: var(--gray-500); display: block; font-weight: 500; }
.esim-card__meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.8125rem; color: var(--gray-500); margin: 0.75rem 0; }
.esim-card__meta span { display: flex; align-items: center; gap: 0.25rem; }
.esim-card__actions { display: flex; gap: 0.5rem; }

/* Usage Bar */
.usage-bar {
    height: 10px; background: var(--gray-100);
    border-radius: 999px; overflow: hidden;
}
.usage-bar__fill {
    height: 100%; border-radius: 999px; transition: width 0.5s;
    background: var(--gradient-cta);
}
.usage-bar__fill--warning {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
}
.usage-bar__fill--critical {
    background: linear-gradient(135deg, #dc2626, #991b1b);
    animation: usagePulse 2s ease-in-out infinite;
}
@keyframes usagePulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.75; }
}
.usage-info { display: flex; justify-content: space-between; font-size: 0.8125rem; color: var(--gray-500); margin-top: 0.375rem; font-weight: 500; }
.esim-card__low-data-alert {
    display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap;
    background: #fef3c7; border: 1px solid #fcd34d; color: #92400e;
    border-radius: var(--radius-sm); padding: 0.5rem 0.75rem;
    margin-top: 0.625rem; font-size: 0.8125rem; font-weight: 500;
}
.esim-card__low-data-alert > span { flex: 1; min-width: 0; }
.esim-card__low-data-alert i { color: #d97706; flex-shrink: 0; }
.esim-card__low-data-alert .btn { margin-left: auto; }

/* Top-up summary chip on dashboard tile — shows when applied top-ups
   exist for this eSIM. Click-through anchors to the history section
   on the detail page. Block-level flex (with width: fit-content) keeps
   the chip's actual box height — inline-flex would otherwise create a
   taller line-box that loosened the spacing below. */
.esim-card__topups {
    display: flex; align-items: center; gap: 0.375rem;
    width: fit-content;
    background: #ecfdf5; border: 1px solid #a7f3d0;
    color: #065f46; border-radius: 999px;
    padding: 0.25rem 0.625rem;
    margin: 0.5rem 0 0.75rem;
    font-size: 0.75rem;
    text-decoration: none; font-weight: 500;
    line-height: 1.2;
}
.esim-card__topups:hover { background: #d1fae5; }
.esim-card__topups i { color: #059669; }

/* Top-up history list on eSIM detail page */
.topup-history-list {
    display: flex; flex-direction: column; gap: 0.5rem;
}
.topup-history-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.625rem 0.875rem; gap: 1rem;
    background: var(--gray-50); border: 1px solid var(--gray-100);
    border-radius: var(--radius-sm);
}
.topup-history-row__left {
    display: flex; flex-direction: column; gap: 0.125rem; min-width: 0;
}
.topup-history-row__data {
    font-size: 1rem; font-weight: 700; color: var(--primary);
}
.topup-history-row__days {
    font-size: 0.8125rem; color: var(--gray-600);
}
.topup-history-row__right {
    text-align: right; flex-shrink: 0;
}
.topup-history-row__note {
    margin-top: -0.25rem;
    padding: 0.5rem 0.875rem;
    background: var(--primary-glow); border-radius: var(--radius-sm);
    color: var(--gray-700); font-size: 0.8125rem; font-style: italic;
}
.topup-history-row__note i { color: var(--primary); margin-right: 0.375rem; opacity: 0.6; }
/* Stuck-pending variant — amber, prompts the customer to contact support. */
.topup-history-row__note--alert {
    background: #fef3c7; color: #92400e;
    border: 1px solid #fcd34d;
    font-style: normal;
}
.topup-history-row__note--alert i { color: #d97706; opacity: 0.9; }
.topup-history-row__note--alert a { color: inherit; text-decoration: underline; font-weight: 700; }

/* Cancelled row — strike-through the headline figure, muted note. */
.topup-history-row--cancelled .topup-history-row__data,
.topup-history-row--cancelled .topup-history-row__days {
    text-decoration: line-through; color: var(--gray-500);
}
.topup-history-row__note--cancelled {
    background: var(--gray-50); color: var(--gray-700);
    border: 1px solid var(--gray-200);
    font-style: normal;
}
.topup-history-row__note--cancelled i { color: var(--gray-500); opacity: 0.9; }

/* Top-up prompt on eSIM detail page when data is low */
.low-data-cta {
    display: flex; align-items: center; gap: 0.875rem; flex-wrap: wrap;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #f59e0b; border-radius: var(--radius-sm);
    padding: 0.875rem 1rem; margin: 0.75rem 0;
}
.low-data-cta__icon { font-size: 1.5rem; color: #d97706; flex-shrink: 0; }
.low-data-cta__text { flex: 1; min-width: 200px; }
.low-data-cta__text strong { display: block; color: #92400e; font-size: 0.9375rem; margin-bottom: 0.125rem; }
.low-data-cta__text p { margin: 0; font-size: 0.8125rem; color: #78350f; }
.low-data-cta .btn { flex-shrink: 0; }

/* Stat pills (referral summary on profile) */
.stat-pill {
    background: var(--gray-50); border: 1px solid var(--gray-100);
    border-radius: var(--radius-sm); padding: 0.75rem 0.875rem;
    display: flex; flex-direction: column; text-align: center;
}
.stat-pill__value {
    font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em;
    color: var(--primary); line-height: 1.2;
}
.stat-pill__label {
    font-size: 0.6875rem; color: var(--gray-500); margin-top: 0.25rem;
    text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
@media (max-width: 520px) {
    .stat-pill__value { font-size: 1.0625rem; }
    .stat-pill__label { font-size: 0.625rem; }
}

/* ─── eSIM Detail ────────────────────────────── */
.esim-detail__header { display: flex; align-items: center; gap: 1rem; }
.esim-detail__flag { font-size: 3rem; }

/* Usage Gauge */
.usage-gauge { text-align: center; margin: 1.5rem 0; }
.usage-gauge__circle {
    width: 130px; height: 130px; border-radius: 50%;
    border: 8px solid var(--gray-100);
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative;
    background: conic-gradient(var(--primary) calc(var(--pct, 0) * 3.6deg), var(--gray-100) 0);
}
.usage-gauge__value {
    font-size: 1.75rem; font-weight: 800;
    background: var(--gradient-cta); -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; background-clip: text;
}
.usage-gauge__label { font-size: 0.75rem; color: var(--gray-500); font-weight: 600; }
.usage-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; text-align: center; }
.usage-detail__label { display: block; font-size: 0.6875rem; color: var(--gray-500); text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; }
.usage-detail__value { display: block; font-weight: 700; font-size: 1.0625rem; }

/* QR Display */
.qr-display { text-align: center; margin: 1.25rem 0; }
.qr-display__img {
    max-width: 200px; border-radius: var(--radius);
    box-shadow: var(--shadow-md); padding: 0.75rem; background: var(--white);
}

/* Copy Field */
.copy-field { display: flex; gap: 0.5rem; align-items: center; }
.copy-field code {
    flex: 1; padding: 0.625rem; background: var(--gray-100);
    border-radius: var(--radius-sm); font-size: 0.75rem;
    word-break: break-all; color: var(--primary-dark);
}

/* Install Tabs */
.install-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.install-tab {
    padding: 0.5rem 1.125rem; border: 2px solid var(--gray-300);
    border-radius: 999px; background: var(--white); cursor: pointer;
    font-family: var(--font); font-size: 0.8125rem; font-weight: 600;
    transition: all 0.2s;
}
.install-tab:hover { border-color: var(--primary-light); }
.install-tab.active {
    background: var(--gradient-cta); color: var(--white);
    border-color: transparent;
}
.install-steps ol { padding-left: 1.5rem; }
.install-steps li { padding: 0.5rem 0; font-size: 0.9375rem; line-height: 1.5; }

/* Info Table */
.info-table { width: 100%; }
.info-table td { padding: 0.625rem 0; border-bottom: 1px solid var(--gray-100); }
.info-table td:first-child { font-weight: 700; color: var(--gray-500); width: 120px; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* ─── Card ───────────────────────────────────── */
.card {
    background: var(--white);
    border: 1px solid rgba(26, 138, 158, 0.06);
    border-radius: var(--radius); padding: 1.5rem;
    box-shadow: var(--shadow);
}
.card h3 {
    font-size: 1.125rem; font-weight: 700; margin-bottom: 0.75rem;
    display: flex; align-items: center; gap: 0.5rem;
}

/* ─── How It Works Steps ─────────────────────── */
.hiw-steps { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
.hiw-step { display: flex; gap: 1.25rem; }
.hiw-step__num {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
    background: var(--gradient-cta); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.125rem;
    box-shadow: 0 4px 12px rgba(26, 138, 158, 0.25);
}
.hiw-step__content h2 { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.25rem; }
.hiw-step__content p { font-size: 0.9375rem; color: var(--gray-500); }

/* ─── FAQ ────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: 0.5rem; }
.faq-item {
    border: 1px solid rgba(26, 138, 158, 0.08);
    border-radius: var(--radius-sm);
    overflow: hidden; background: var(--white);
    transition: border-color 0.2s;
}
.faq-item:hover { border-color: var(--primary-light); }
.faq-item summary {
    padding: 1rem 1.25rem; font-weight: 600; cursor: pointer;
    list-style: none; display: flex; justify-content: space-between;
    transition: color 0.2s;
}
.faq-item summary:hover { color: var(--primary); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.25rem; color: var(--primary-light); font-weight: 700; }
.faq-item[open] summary::after { content: '-'; }
.faq-item[open] summary { color: var(--primary); }
.faq-item p { padding: 0 1.25rem 1.25rem; color: var(--gray-500); font-size: 0.9375rem; line-height: 1.7; }

/* ─── Table ──────────────────────────────────── */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th {
    text-align: left; padding: 0.875rem; border-bottom: 2px solid var(--gray-100);
    font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--primary); font-weight: 700;
}
.table td { padding: 0.875rem; border-bottom: 1px solid var(--gray-100); }
.table code {
    font-size: 0.8125rem; background: var(--primary-glow); color: var(--primary-dark);
    padding: 0.1875rem 0.5rem; border-radius: 6px; font-weight: 600;
}

/* ─── Footer ─────────────────────────────────── */
.footer {
    background: var(--dark); color: var(--gray-300);
    padding: 3.5rem 0 1.5rem; margin-top: 3rem;
    position: relative;
}
.footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--gradient-hero);
}
.footer__top {
    display: flex; flex-direction: column; gap: 0.75rem;
    padding-bottom: 1.5rem; margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.footer__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.footer__brand {
    font-family: 'Coda', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em;
}
.footer__tagline { font-size: 0.875rem; margin-top: 0.5rem; opacity: 0.6; }
.footer__social { display: flex; gap: 0.75rem; margin-top: 0.75rem; }
.footer__social a {
    color: var(--gray-300); font-size: 1.125rem; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(255,255,255,0.05);
    transition: all 0.2s;
}
.footer__social a:hover { color: var(--white); background: rgba(26, 138, 158, 0.3); }
.footer__col h4 { color: var(--white); font-size: 0.75rem; font-weight: 700; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.06em; }
.footer__col ul { list-style: none; }
.footer__col li { margin-bottom: 0.375rem; }
.footer__col a { color: var(--gray-300); font-size: 0.8125rem; transition: color 0.2s; }
.footer__col a:hover { color: var(--primary-light); }
/* ─── Newsletter CTA ─── */
.newsletter-cta {
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 2rem; padding-top: 1.5rem;
}
.newsletter-cta__inner {
    display: grid; grid-template-columns: 1fr; gap: 1.25rem;
}
@media (min-width: 768px) {
    .newsletter-cta__inner { grid-template-columns: 1fr 1fr; align-items: center; }
}
.newsletter-cta__text h4 {
    font-size: 1.125rem; font-weight: 700; margin: 0 0 0.375rem; color: var(--white);
}
.newsletter-cta__text h4 i { color: var(--secondary); margin-right: 0.375rem; }
.newsletter-cta__text p {
    font-size: 0.8125rem; color: var(--gray-400); margin: 0; line-height: 1.5;
}
.newsletter-cta__fields {
    display: flex; gap: 0.5rem;
}
.newsletter-cta__fields input[type="email"] {
    flex: 1; padding: 0.625rem 0.875rem; border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-sm); background: rgba(255,255,255,0.06);
    color: var(--white); font-size: 0.875rem; font-family: var(--font);
}
.newsletter-cta__fields input[type="email"]::placeholder { color: var(--gray-500); }
.newsletter-cta__fields input[type="email"]:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,138,158,0.2);
}
.newsletter-cta__consent {
    display: flex; align-items: flex-start; gap: 0.375rem; margin-top: 0.5rem;
    font-size: 0.6875rem; color: var(--gray-500); cursor: pointer; line-height: 1.4;
}
.newsletter-cta__consent input { margin-top: 0.1rem; }
.newsletter-cta__success {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem; border-radius: var(--radius-sm);
    background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2);
}
.newsletter-cta__success i { font-size: 2rem; color: #22c55e; flex-shrink: 0; }
.newsletter-cta__success strong { color: var(--white); display: block; margin-bottom: 0.25rem; }
.newsletter-cta__success p { color: var(--gray-400); font-size: 0.8125rem; margin: 0; }

/* ─── Inline newsletter strip (light-themed, content-area placement)
   Re-uses .newsletter-cta__* class hooks so submitNewsletter() works
   without changes, then re-skins for use on white/grey backgrounds. */
.newsletter-strip {
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--primary);
    background: linear-gradient(180deg, #ffffff 0%, var(--primary-glow) 120%);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}
.newsletter-strip .newsletter-cta__text h4 { color: var(--gray-900); font-size: 1rem; }
.newsletter-strip .newsletter-cta__text h4 i { color: var(--primary); }
.newsletter-strip .newsletter-cta__text p { color: var(--gray-600); }
.newsletter-strip .newsletter-cta__fields input[type="email"] {
    background: var(--white); border: 1px solid var(--gray-300); color: var(--gray-900);
}
.newsletter-strip .newsletter-cta__fields input[type="email"]::placeholder { color: var(--gray-500); }
.newsletter-strip .newsletter-cta__consent { color: var(--gray-600); }
.newsletter-strip .newsletter-cta__success {
    background: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.3);
}
.newsletter-strip .newsletter-cta__success strong { color: var(--gray-900); }
.newsletter-strip .newsletter-cta__success p { color: var(--gray-700); }

/* ─── Exit-intent newsletter modal */
.newsletter-modal {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.newsletter-modal[hidden] { display: none; }
.newsletter-modal__overlay {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    animation: nlFadeIn 0.18s ease-out;
}
.newsletter-modal__panel {
    position: relative; z-index: 1;
    width: 100%; max-width: 480px;
    background: var(--white); border-radius: var(--radius);
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    animation: nlSlideUp 0.22s cubic-bezier(0.21, 1, 0.36, 1);
}
.newsletter-modal__close {
    position: absolute; top: 0.5rem; right: 0.75rem;
    background: none; border: none; cursor: pointer;
    font-size: 1.75rem; line-height: 1; color: var(--gray-500);
    padding: 0.25rem 0.5rem; transition: color 0.15s;
}
.newsletter-modal__close:hover { color: var(--gray-800); }
.newsletter-modal__body { padding: 1.75rem 1.75rem 1.25rem; text-align: center; }
.newsletter-modal__icon {
    width: 56px; height: 56px; margin: 0 auto 0.875rem;
    border-radius: 50%; background: var(--primary-glow);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: var(--primary);
}
.newsletter-modal__body h3 {
    font-size: 1.25rem; margin: 0 0 0.5rem; color: var(--gray-900);
}
.newsletter-modal__body > p {
    font-size: 0.9375rem; color: var(--gray-600); margin: 0 0 1.25rem; line-height: 1.5;
}
.newsletter-modal__inner { display: block; text-align: left; }
.newsletter-modal__inner .newsletter-cta__fields input[type="email"] {
    background: var(--white); border: 1px solid var(--gray-300); color: var(--gray-900);
}
.newsletter-modal__inner .newsletter-cta__consent { color: var(--gray-600); }
.newsletter-modal__dismiss {
    display: block; width: 100%; margin-top: 0.875rem;
    background: none; border: none; cursor: pointer;
    font-size: 0.8125rem; color: var(--gray-500); text-decoration: underline;
    padding: 0.25rem; transition: color 0.15s;
}
.newsletter-modal__dismiss:hover { color: var(--gray-800); }
.newsletter-modal .newsletter-cta__success {
    background: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.3);
    justify-content: center;
}
.newsletter-modal .newsletter-cta__success strong { color: var(--gray-900); }
.newsletter-modal .newsletter-cta__success p { color: var(--gray-700); }

@keyframes nlFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes nlSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }


.footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.06); margin-top: 2rem; padding-top: 1.5rem;
    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
    text-align: center; font-size: 0.8125rem; opacity: 0.6;
}
.footer__payments { display: flex; gap: 0.75rem; font-size: 1.5rem; opacity: 0.5; }

/* ─── Saved heart pulse animation ─── */
@keyframes savedHeartPulse {
    0%   { transform: scale(1); color: inherit; }
    25%  { transform: scale(1.45); color: var(--danger); }
    50%  { transform: scale(0.9);  color: var(--danger); }
    75%  { transform: scale(1.2);  color: var(--danger); }
    100% { transform: scale(1);    color: inherit; }
}
#navSavedHeart.saved-pulse {
    display: inline-block; transform-origin: center;
    animation: savedHeartPulse 0.7s ease-in-out;
}

/* ─── Empty State ────────────────────────────── */
.empty-state { text-align: center; padding: 3rem 1rem; }
.empty-state i {
    font-size: 3.5rem; margin-bottom: 1rem; display: block;
    background: var(--gradient-cta); -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; background-clip: text;
    opacity: 0.4;
}
.empty-state p { color: var(--gray-500); margin-bottom: 1rem; font-size: 1.0625rem; }

/* ─── Loading ────────────────────────────────── */
.loading-spinner { text-align: center; padding: 3rem; color: var(--primary); font-size: 1rem; }

/* ─── Activation Code ────────────────────────── */
.activation-code label { font-size: 0.8125rem; font-weight: 700; display: block; margin-bottom: 0.375rem; }

/* ═══════════════════════════════════════════════
   RESPONSIVE — Tablet (640px+)
   ═══════════════════════════════════════════════ */
@media (min-width: 640px) {
    .container { padding: 0 1.5rem; }
    .hero { min-height: 400px; }
    .hero__bg { position: absolute; inset: 0; }
    .hero__bg img { height: 100%; }
    .hero__content-wrap {
        background: transparent; padding: 3rem 1.5rem;
    }
    .hero__title { font-size: 2.75rem; }
    .plan-grid { grid-template-columns: repeat(2, 1fr); }
    .dest-grid { grid-template-columns: repeat(3, 1fr); }
    .steps-grid { grid-template-columns: repeat(3, 1fr); }
    .stats-grid { grid-template-columns: repeat(4, 1fr); }
    .filters__row { grid-template-columns: repeat(2, 1fr); }
    .form-row { grid-template-columns: 1fr 1fr; }
    .footer__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — Desktop (1024px+)
   ═══════════════════════════════════════════════ */
/* Navbar lives in its own breakpoint — six top-level links plus the
   right-side actions need ~1200px to lay out comfortably without
   wrapping or overflowing. Below that, narrower laptops and small
   tablets in landscape get the hamburger menu (which is scrollable
   above so all entries remain reachable). The other layout rules in
   the next block stay at 1024px since hero/grid wrapping handles
   narrower screens fine. */
@media (min-width: 1200px) {
    .navbar__toggle { display: none; }
    .navbar__menu {
        display: flex !important; position: static;
        flex-direction: row; align-items: center;
        box-shadow: none; padding: 0; gap: 0.25rem;
        border-bottom: none; background: transparent;
        margin-left: 1.5rem;
        /* Reset the mobile-only height cap so items don't get an unwanted
           internal scrollbar at desktop widths. */
        max-height: none; overflow: visible;
    }
    .navbar__link { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
    .navbar__actions {
        flex-direction: row; align-items: center; margin-top: 0; padding-top: 0;
        border-top: none; margin-left: 0.5rem; gap: 0.375rem;
    }
}

@media (min-width: 1024px) {
    .hero { min-height: 520px; align-items: center; }
    .hero__bg::after {
        background: linear-gradient(
            135deg,
            rgba(10, 30, 36, 0.65) 0%,
            rgba(13, 94, 109, 0.4) 50%,
            rgba(240, 150, 14, 0.25) 100%
        );
    }
    .hero__content-wrap { padding: 5.5rem 1.5rem; }
    .hero__title { font-size: 3.5rem; }
    .plan-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
    .dest-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
    .filters__row { grid-template-columns: repeat(4, 1fr); }
    .plan-detail { grid-template-columns: 1fr 380px; }
    .footer__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
    .footer__top { flex-direction: row; justify-content: space-between; align-items: center; }
    .footer__bottom { flex-direction: row; justify-content: space-between; }
    .section { padding: 4.5rem 0; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — Large Desktop (1280px+)
   ═══════════════════════════════════════════════ */
@media (min-width: 1280px) {
    .dest-grid { grid-template-columns: repeat(6, 1fr); }
    .plan-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ═══════════════════════════════════════════════
   ACCESSIBILITY — focus visibility + skip link
   ═══════════════════════════════════════════════ */

/* Form inputs above use `outline: none` and rely solely on a border-color
   shift on focus, which fails WCAG 2.4.7 on dark / coloured cards.
   Restore a clear focus ring on keyboard focus across all interactive
   elements. :focus-visible (rather than :focus) avoids drawing the ring
   on mouse clicks, matching modern UX expectations. */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 2px;
}
/* Inputs already have a 2px border that shifts colour on focus; keep that
   primary ring contained inside the existing border so the layout doesn't
   jump. Override the offset for inputs/selects/textareas only. */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
    outline-offset: 0;
    box-shadow: 0 0 0 3px var(--primary-glow);
}

/* Skip-to-content link — visually hidden until focused, then becomes a
   primary-coloured pill in the top-left so keyboard / screen-reader
   users can jump past the navbar on every page. */
.skip-link {
    position: absolute;
    top: -100px; left: 0.5rem;
    z-index: 10000;
    padding: 0.625rem 1rem;
    background: var(--primary); color: var(--white);
    font-weight: 700; font-size: 0.875rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: top 0.15s;
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 0.5rem;
    outline: 2px solid var(--white);
    outline-offset: 2px;
}

/* ── Share block (blog posts) ──
   Compact pill row of share targets. Native Web Share button is hidden
   by default and revealed by JS only on browsers that support it; the
   four fallback buttons (WhatsApp, X, Email, Copy link) work without JS. */
.share-block {
    margin: 2rem 0 1rem; padding: 1rem 1.25rem;
    background: var(--gray-50); border: 1px solid var(--gray-100);
    border-radius: var(--radius);
}
.share-block__title {
    font-size: 0.9375rem; font-weight: 700; margin: 0 0 0.625rem;
    color: var(--gray-700);
}
.share-block__buttons {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.share-block__btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    background: var(--white); border: 1px solid var(--gray-300);
    border-radius: 999px; font-size: 0.8125rem; font-weight: 600;
    color: var(--gray-700); text-decoration: none; cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.1s;
    font-family: inherit;
}
.share-block__btn:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.share-block__btn:active { transform: translateY(0); }
.share-block__btn i { font-size: 0.9375rem; }
.share-block__btn--whatsapp:hover { color: #25D366; border-color: #25D366; }
.share-block__btn--copy.is-copied { color: var(--success); border-color: var(--success); }

/* ── Related Plans block (CMS pages + blog posts) ──
   Compact card row appended after the main content. Cards link to the
   plan detail page; price uses .js-price-single so the currency switcher
   converts it on-the-fly. */
.related-plans { margin: 2rem 0 1rem; }
.related-plans__title {
    font-size: 1.125rem; font-weight: 700; margin-bottom: 0.75rem;
    padding-top: 1rem; border-top: 1px solid var(--gray-100);
}
.related-plans__grid {
    display: grid; gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.related-plans__card {
    display: flex; flex-direction: column; gap: 0.375rem;
    padding: 0.875rem 1rem;
    background: var(--white); border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm); text-decoration: none; color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.related-plans__card:hover {
    border-color: var(--primary-light); box-shadow: var(--shadow);
    transform: translateY(-1px); color: inherit;
}
.related-plans__head { display: flex; align-items: center; gap: 0.375rem; font-size: 0.9375rem; }
.related-plans__meta { font-size: 0.75rem; color: var(--gray-500); }
.related-plans__price { font-size: 1rem; font-weight: 700; color: var(--primary); margin-top: 0.125rem; }