/* ============================================================
   ALBATTAR eSIM — Premium UI overrides (loaded AFTER main.css)
   ============================================================ */

/* ===== Page chrome ===== */
html { scroll-behavior: smooth; }
body { font-family: var(--font-arabic); color: var(--gray-800); }

::selection { background: var(--teal-200); color: var(--teal-900); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--teal-500); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--teal-600); }

*:focus-visible {
    outline: 3px solid var(--teal-300);
    outline-offset: 2px;
    border-radius: var(--radius-md);
}

/* ===== Animations ===== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(30px, -30px) scale(1.05); }
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.fade-in-up { animation: fadeInUp 0.6s ease-out both; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ===== Top bar ===== */
.topbar {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid var(--gray-200);
    height: 72px !important;
    box-shadow: var(--shadow-sm);
}
.topbar__brand img { height: 44px; width: auto; }
.topbar__brand-name { color: var(--teal-700); font-weight: var(--fw-bold); font-size: var(--text-lg); }
.topbar__brand-suffix { color: var(--gold-500); font-weight: var(--fw-extrabold); }
.topbar__nav a {
    color: var(--gray-600) !important;
    font-weight: var(--fw-medium);
    padding: 8px 12px;
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
}
.topbar__nav a:hover { background: var(--teal-50); color: var(--teal-700) !important; }

.topbar-cta {
    background: var(--bg-hero);
    color: white;
    padding: 9px 18px;
    border-radius: var(--radius-full);
    font-weight: var(--fw-semibold);
    font-size: var(--text-sm);
    box-shadow: var(--shadow-teal);
    transition: var(--transition-base);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
}
.topbar-cta:hover { color: white; transform: translateY(-2px); box-shadow: var(--shadow-xl); }

/* ===== Hero ===== */
.hero {
    position: relative;
    background: var(--bg-soft-teal) !important;
    padding: 80px 0 100px !important;
    overflow: hidden;
    text-align: center;
}
.hero__bg-shapes { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero__bg-shapes .shape {
    position: absolute; border-radius: 50%;
    filter: blur(80px); opacity: 0.18;
    animation: float 20s ease-in-out infinite;
}
.shape--1 { width: 420px; height: 420px; background: var(--teal-500); top: -120px; inset-inline-end: -100px; animation-delay: 0s; }
.shape--2 { width: 320px; height: 320px; background: var(--gold-400); bottom: -80px; inset-inline-start: -60px; animation-delay: 7s; }
.shape--3 { width: 260px; height: 260px; background: var(--teal-300); top: 50%; inset-inline-start: 30%; animation-delay: 14s; }

.hero .container { position: relative; z-index: 1; }
.hero__badge {
    display: inline-flex !important;
    align-items: center; gap: 8px;
    background: linear-gradient(135deg, var(--gold-50) 0%, var(--gold-100) 100%) !important;
    border: 1px solid var(--gold-300);
    color: var(--gray-800) !important;
    padding: 8px 18px !important;
    border-radius: var(--radius-full) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--fw-medium);
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}
.hero__title {
    font-size: clamp(2rem, 5vw, var(--text-6xl)) !important;
    font-weight: var(--fw-extrabold);
    line-height: 1.1;
    color: var(--gray-900) !important;
    margin-bottom: 16px !important;
    letter-spacing: -0.02em;
}
.hero__title-accent {
    background: linear-gradient(135deg, var(--teal-600) 0%, var(--teal-800) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero__sub {
    font-size: var(--text-xl);
    color: var(--gray-600);
    margin-bottom: 36px !important;
}

/* Premium search box (overrides main.css) */
.search-box { max-width: 720px; margin: 0 auto; }
.search-box__input-wrapper {
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--shadow-2xl) !important;
    border: 1px solid var(--gray-200);
    padding: 8px;
    transition: var(--transition-base);
}
.search-box__input-wrapper:focus-within {
    border-color: var(--teal-500);
    box-shadow: 0 0 0 4px rgba(26,140,127,.1), var(--shadow-2xl) !important;
    transform: translateY(-2px);
}
.search-box__input {
    padding: 1rem 1.25rem !important;
    font-size: var(--text-base) !important;
}
.search-box__btn {
    background: var(--bg-hero) !important;
    border-radius: var(--radius-xl) !important;
    padding: 0 1.5rem !important;
    font-weight: var(--fw-semibold);
    box-shadow: var(--shadow-teal);
    transition: var(--transition-base);
}
.search-box__btn:hover { transform: scale(1.05); }

.hero__stats {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: 48px; margin-top: 48px;
}
.hero__stats .stat { text-align: center; }
.hero__stats .stat__number {
    display: block;
    font-size: var(--text-4xl);
    font-weight: var(--fw-extrabold);
    color: var(--teal-700);
    line-height: 1;
}
.hero__stats .stat__label {
    display: block;
    font-size: var(--text-sm);
    color: var(--gray-500);
    margin-top: 4px;
    font-weight: var(--fw-medium);
}

/* Suggestion chips */
.search-box__suggestions { margin-top: 16px; }
.search-box__suggestions .chip {
    background: rgba(255,255,255,0.85);
    border: 1px solid var(--gray-200);
    backdrop-filter: blur(8px);
    color: var(--gray-700) !important;
    font-weight: var(--fw-medium);
    transition: var(--transition-fast);
}
.search-box__suggestions .chip:hover {
    background: var(--teal-600) !important;
    color: white !important;
    border-color: var(--teal-600);
    box-shadow: var(--shadow-teal);
    transform: translateY(-1px);
}

/* Quick filters card */
.quick-filters {
    background: white !important;
    border-radius: var(--radius-2xl) !important;
    padding: 20px 24px !important;
    box-shadow: var(--shadow-md) !important;
    margin-top: 32px !important;
}
.filter-label { color: var(--gray-700); font-weight: var(--fw-semibold); }
.filter-chips button {
    border-radius: var(--radius-full) !important;
    border: 1px solid var(--gray-200) !important;
    padding: 8px 16px !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--fw-medium);
    color: var(--gray-700) !important;
    transition: var(--transition-fast);
}
.filter-chips button:hover {
    border-color: var(--teal-500) !important;
    color: var(--teal-700) !important;
    background: white !important;
}
.filter-chips button.is-active {
    background: var(--teal-600) !important;
    border-color: var(--teal-600) !important;
    color: white !important;
    box-shadow: var(--shadow-teal);
}

/* ===== Country/region grid cards (.country-card / .region-card on home) ===== */
.country-card, .region-card {
    background: white;
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-2xl) !important;
    padding: 22px 16px !important;
    transition: var(--transition-base);
    text-decoration: none;
    color: inherit;
    position: relative; overflow: hidden;
}
.country-card::before, .region-card::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--teal-50) 0%, transparent 60%);
    opacity: 0; transition: var(--transition-base);
}
.country-card:hover, .region-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--teal-500) !important;
    color: inherit;
}
.country-card:hover::before, .region-card:hover::before { opacity: 1; }
.country-card .flag, .region-card .flag {
    font-size: 2.6rem !important;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08));
    position: relative;
}
.country-card .name, .region-card .name {
    font-weight: var(--fw-bold) !important;
    color: var(--gray-900);
    margin-top: 8px;
    position: relative;
}
.country-card .price, .region-card .meta {
    color: var(--teal-700) !important;
    font-weight: var(--fw-semibold);
    font-size: var(--text-sm);
    position: relative;
}

/* ===== Package cards (existing markup, premium styling) ===== */
.package {
    background: white !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-2xl) !important;
    overflow: hidden;
    transition: var(--transition-base) !important;
    position: relative;
    box-shadow: var(--shadow-xs);
}
.package:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl) !important;
    border-color: var(--teal-500) !important;
}
.package__top {
    background: var(--bg-hero) !important;
    height: 4px !important;
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--transition-base);
}
.package:hover .package__top { transform: scaleX(1); }
.package__body { padding: 1.25rem 1.5rem !important; gap: .85rem !important; }
.package__data {
    /* Clamp keeps the headline tight on cards.
       Numeric values like "5 GB" stay punchy; long Arabic words like
       "غير محدود" don't dominate the card or wrap awkwardly. */
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
    font-weight: var(--fw-bold) !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
    color: var(--teal-700) !important;
    background: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-900) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.package__validity {
    color: var(--gray-500) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--fw-medium);
}
.package__operator {
    color: var(--gray-800) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--fw-bold);
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.package__provider {
    background: var(--gray-100) !important;
    color: var(--gray-600) !important;
    font-weight: var(--fw-medium) !important;
    padding: 2px 10px !important;
    border-radius: var(--radius-full) !important;
    font-size: var(--text-xs) !important;
}
.package__coverage {
    background: var(--teal-50) !important;
    color: var(--teal-700) !important;
    padding: 2px 10px !important;
    border-radius: var(--radius-full) !important;
    font-size: var(--text-xs) !important;
    font-weight: var(--fw-bold) !important;
}
.package__features { gap: 6px !important; }
.package__features span {
    background: var(--teal-50) !important;
    color: var(--teal-700) !important;
    padding: 4px 10px !important;
    border-radius: var(--radius-full) !important;
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
}
.package__fup {
    color: var(--gray-500);
    font-size: var(--text-xs) !important;
    border-top: 1px dashed var(--gray-200);
    padding-top: .5rem;
}
.package__price {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px dashed var(--gray-200);
    font-size: var(--text-3xl) !important;
    font-weight: var(--fw-extrabold) !important;
    color: var(--gray-900) !important;
}
.package__price small {
    font-size: var(--text-base) !important;
    color: var(--gray-500) !important;
    font-weight: var(--fw-medium);
}
.package__buy {
    padding: 0 1.5rem 1.5rem !important;
    display: flex; flex-direction: column; gap: 8px;
}
.package__buy .btn {
    background: var(--bg-hero) !important;
    border-radius: var(--radius-xl) !important;
    padding: 12px 20px !important;
    font-weight: var(--fw-semibold) !important;
    box-shadow: var(--shadow-teal);
    transition: var(--transition-base);
}
.package__buy .btn:hover { transform: scale(1.02); box-shadow: var(--shadow-xl); }
.package__details-link {
    color: var(--teal-700) !important;
    font-weight: var(--fw-medium);
    transition: var(--transition-fast);
}
.package__details-link:hover { color: var(--teal-900) !important; text-decoration: underline; }

/* ===== Package badges (corner ribbon, single-line pill) ===== */
.package__badge {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    z-index: 2;
    box-shadow: var(--shadow-md);
    letter-spacing: .01em;
    white-space: nowrap;
}
.package__badge--cheapest    { background: var(--bg-gold); color: var(--gray-900); }
.package__badge--best-seller { background: var(--bg-popular); color: white; }
.package__badge--best-value  { background: var(--bg-new); color: white; }

/* ===== Variant: Unlimited package ===== */
.package--unlimited {
    background: linear-gradient(135deg, var(--teal-50) 0%, white 60%) !important;
    border-color: var(--teal-300) !important;
}
.package--unlimited .package__top {
    background: linear-gradient(90deg, var(--teal-500), var(--teal-700), var(--gold-400)) !important;
}

/* ===== Variant: Cheapest package (gold-tinged border + glow) ===== */
.package--cheapest {
    border-color: var(--gold-500) !important;
    box-shadow: 0 6px 20px -4px rgba(212, 168, 83, 0.25) !important;
}
.package--cheapest:hover {
    box-shadow: 0 12px 28px -6px rgba(212, 168, 83, 0.35) !important;
}

/* ===== Country card popular badge (countries.php) ===== */
.country-card { position: relative; overflow: hidden; }
.country-card__badge {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    background: var(--bg-popular);
    color: white;
    font-size: 10px;
    font-weight: var(--fw-bold);
    padding: 3px 9px;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    z-index: 2;
    letter-spacing: .02em;
}
.country-card--popular { border-color: rgba(239, 68, 68, .35) !important; }
.country-card--popular:hover { border-color: var(--teal-500) !important; }
.country-card__count {
    background: var(--teal-50);
    color: var(--teal-700) !important;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    display: inline-block;
    margin-inline-end: 4px;
}
.country-card__from { color: var(--gray-600); font-size: var(--text-xs); }

/* ===== Tabs (pill style) — applies to existing .tabs/.tabs__btn ===== */
.tabs {
    display: inline-flex !important;
    background: var(--gray-100) !important;
    padding: 5px;
    border-radius: var(--radius-full);
    gap: 2px;
    border: 0 !important;
    width: auto !important;
    margin-block: 1rem 1.5rem;
    flex-wrap: wrap;
}
.tabs__btn {
    border-radius: var(--radius-full) !important;
    padding: 9px 18px !important;
    color: var(--gray-600) !important;
    border-bottom: 0 !important;
    font-weight: var(--fw-medium);
    transition: var(--transition-base);
}
.tabs__btn.is-active {
    background: white !important;
    color: var(--teal-700) !important;
    box-shadow: var(--shadow-md);
}

/* ===== Country header polish ===== */
.country-header {
    padding: 60px 0 32px !important;
}
.country-header__flag {
    width: 120px; height: 120px;
    margin: 0 auto 24px !important;
    background: var(--bg-soft-teal);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    display: flex; align-items: center; justify-content: center;
    font-size: 5rem !important;
    line-height: 1 !important;
}
.country-header__name {
    font-size: var(--text-4xl) !important;
    font-weight: var(--fw-extrabold) !important;
    color: var(--gray-900);
    letter-spacing: -0.02em;
    margin-bottom: 8px !important;
}
.country-header__sub { color: var(--gray-500) !important; font-size: var(--text-lg) !important; }
.country-header__stats {
    display: inline-flex; align-items: center; gap: 14px;
    background: white;
    padding: 12px 22px;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    color: var(--gray-700);
    font-weight: var(--fw-medium);
    margin-top: 18px;
    font-size: var(--text-sm);
    flex-wrap: wrap;
    justify-content: center;
}
.country-header__stats .sep { color: var(--gray-300); }

/* ===== CTA / cards / buttons polish ===== */
.btn {
    border-radius: var(--radius-xl) !important;
    transition: var(--transition-base) !important;
    font-weight: var(--fw-semibold) !important;
}
.btn--primary {
    background: var(--bg-hero) !important;
    box-shadow: var(--shadow-teal);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); }
.btn--secondary { background: var(--bg-gold) !important; color: var(--gray-900) !important; box-shadow: var(--shadow-gold); }

.cta {
    background: var(--bg-hero) !important;
    border-radius: var(--radius-3xl) !important;
    padding: 4rem 2rem !important;
    box-shadow: var(--shadow-2xl);
    position: relative; overflow: hidden;
}
.cta::before {
    content: '';
    position: absolute; inset: -50% -10% auto -10%; height: 200%;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.15), transparent 60%);
    pointer-events: none;
}
.cta h2 { font-size: var(--text-4xl); margin-bottom: 8px; font-weight: var(--fw-extrabold); }

/* ===== Skeleton cards (for search results loader) ===== */
.skeleton-card {
    height: 280px;
    background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-2xl);
}

/* ===== Premium footer ===== */
.footer {
    background: var(--gray-900) !important;
    color: var(--gray-300) !important;
    padding: 60px 0 24px !important;
    border-top: 0 !important;
    margin-top: 60px;
}
.footer h4 { color: white !important; font-weight: var(--fw-semibold); margin-bottom: 18px !important; }
.footer a { color: var(--gray-400) !important; transition: var(--transition-fast); }
.footer a:hover { color: var(--teal-300) !important; }
.footer__brand img { width: 56px !important; filter: brightness(0) invert(1); opacity: 0.95; }
.footer__tagline { color: var(--gray-400) !important; font-size: var(--text-sm); }
.paymethod {
    background: rgba(255,255,255,0.08) !important;
    color: var(--gray-200) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}
.footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    color: var(--gray-500) !important;
    margin-top: 36px !important;
}

/* ===== Search results list (premium) ===== */
.search-results { margin-top: 2.5rem; }
.results-header strong { color: var(--teal-700); font-size: var(--text-3xl); }
.parsed-hint { color: var(--gray-400); font-size: var(--text-xs); }
.results-sort {
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    padding: .55rem 1rem !important;
}
.result-card {
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--shadow-xs);
    transition: var(--transition-base);
}
.result-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl) !important;
    border-color: var(--teal-500) !important;
}
.result-card__data {
    background: var(--teal-50) !important;
    color: var(--teal-700) !important;
    font-weight: var(--fw-bold) !important;
}
.result-card__price {
    color: var(--gray-900) !important;
    font-weight: var(--fw-extrabold) !important;
}

/* ===== Mobile tuning ===== */
@media (max-width: 768px) {
    .hero { padding: 56px 0 72px !important; }
    .hero__title { font-size: clamp(1.75rem, 8vw, 2.5rem) !important; }
    .hero__sub { font-size: var(--text-base); }
    .hero__stats { gap: 24px; margin-top: 36px; }
    .hero__stats .stat__number { font-size: var(--text-3xl); }

    .quick-filters { padding: 16px !important; }
    .filter-group { flex-direction: column; align-items: flex-start; gap: 8px; }
    .filter-label { min-width: 0 !important; }

    .package__body { padding: 1rem 1.25rem !important; }
    .package__data  { font-size: clamp(1.25rem, 5vw, 1.5rem) !important; }
    .package__price { font-size: var(--text-2xl) !important; }
    .package__buy   { padding: 0 1.25rem 1.25rem !important; }
    .package__badge { top: 10px; inset-inline-end: 10px; padding: 4px 10px; font-size: 10px; }

    .country-header__flag { width: 96px; height: 96px; font-size: 3.5rem !important; }
    .country-header__name { font-size: var(--text-3xl) !important; }

    .tabs { overflow-x: auto; max-width: 100%; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .tabs__btn { white-space: nowrap; }
}

/* ============================================================
   Inline Coverage Reveal — flags strip + drawer toggle
   Shown on regional/global package cards only.
   ============================================================ */
.package__flags-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 10px 0 8px;
}
.package__flags-strip .package__flag {
    font-size: 1.25rem;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.08));
}
.package__flags-strip .package__flag-more {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-primary, #1A8C7F);
    background: rgba(26, 140, 127, 0.08);
    padding: 3px 10px;
    border-radius: 999px;
    margin-inline-start: 4px;
}

.package__toggle-coverage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 6px;
    padding: 9px 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary, #1A8C7F);
    background: transparent;
    border: 1px dashed rgba(26, 140, 127, 0.35);
    border-radius: 10px;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.package__toggle-coverage:hover {
    background: rgba(26, 140, 127, 0.06);
    border-color: rgba(26, 140, 127, 0.6);
}
.package__toggle-coverage .toggle-icon {
    transition: transform .25s ease;
    font-size: 0.7rem;
}
.package__toggle-coverage.is-open .toggle-icon { transform: rotate(180deg); }

.package__coverage-drawer {
    margin-top: 10px;
    padding: 12px;
    background: #f8fbfa;
    border: 1px solid rgba(26, 140, 127, 0.15);
    border-radius: 12px;
    max-height: 280px;
    overflow-y: auto;
    animation: coverage-fade-in .22s ease;
}
.package__coverage-drawer[hidden] { display: none !important; }

@keyframes coverage-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.package__coverage-loading,
.package__coverage-empty {
    margin: 0;
    padding: 8px 4px;
    text-align: center;
    color: var(--color-text-muted, #6b7280);
    font-size: 0.875rem;
}

.package__coverage-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.package__coverage-country {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 8px;
    font-size: 0.8125rem;
}
.package__coverage-flag { font-size: 1.1rem; line-height: 1; }
.package__coverage-name { font-weight: 600; color: #1f2937; }
.package__coverage-operator {
    color: var(--color-text-muted, #6b7280);
    font-size: 0.75rem;
    text-align: end;
}
.package__coverage-operator em { font-style: normal; opacity: .75; }

@media (max-width: 480px) {
    .package__coverage-country {
        grid-template-columns: auto 1fr;
        row-gap: 2px;
    }
    .package__coverage-operator { grid-column: 2 / 3; text-align: start; }
}

/* ============================================================
   Session 9I — Mobile UX critical fixes
   - Drawer turns into a real slide-in panel (was a JS-injected absolute box)
   - Topbar CTA / toggles shrink so 4 buttons + logo fit at 360px
   - Stats row becomes a 2×2 card
   - Quick-filters tighten up
   - Respects prefers-reduced-motion
   ============================================================ */

/* Defensive guard against horizontal scroll caused by off-screen drawers,
   absolutely-positioned hero shapes, or anything else that overshoots. */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Overlay element (always in DOM, hidden by default).
   2026-05-03: dropped `backdrop-filter: blur()` — on iOS Safari it renders the
   drawer panel itself fuzzy because the panel sits in the same stacking context
   that the filter walks. Solid translucent dark dim is enough for focus. */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 998;
    pointer-events: none;
}
.drawer-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* CTA: text by default, icon-only at very narrow viewports */
.topbar-cta__icon { display: none; }

/* Lock body scroll while drawer is open (any viewport) */
body.drawer-open { overflow: hidden; touch-action: none; }

/* The topbar is `position: sticky; z-index: 100` which creates a stacking context.
   The drawer (its child) at z-index:1100 is therefore *trapped* inside that
   context — effectively rendering at the topbar's global layer (100), BELOW the
   `.drawer-overlay` (998) which sits at the document root. Overlay then catches
   every tap on drawer links. While the drawer is open, lift the topbar above
   the overlay so the drawer reaches the top of the stack. */
body.drawer-open .topbar { z-index: 1200 !important; }

/* main.css hides .topbar__nav by default and shows it at min-width:900px,
   so the drawer + density rules MUST run all the way up to 899px to avoid
   a dead zone (burger visible, no drawer styling). */
@media (max-width: 899px) {
    /* ---- Topbar density ---- */
    .topbar__inner {
        gap: 8px !important;
    }
    .topbar__brand img { height: 36px !important; width: auto !important; }
    .topbar__brand-name { font-size: 0.95rem !important; }
    .topbar__brand-suffix { font-size: 0.75rem !important; }

    .btn-toggle {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        padding: 0 !important;
        font-size: 0.75rem !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .topbar-cta {
        font-size: 0.7rem !important;
        padding: 8px 12px !important;
        height: 38px !important;
        border-radius: 9999px !important;
        white-space: nowrap !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    /* ---- Drawer base: position + size only (direction-agnostic) ---- */
    .topbar__nav {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;          /* dynamic viewport height — accounts for mobile URL bar */
        width: 280px !important;
        max-width: 80vw !important;
        background: #ffffff !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 64px 0 24px !important;
        margin: 0 !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 1100 !important;            /* well above overlay (998) and any sticky bar */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        display: flex !important;
        visibility: hidden !important;
        pointer-events: none !important;
        /* Isolate stacking context so parent backdrop-filter/transform never bleeds in. */
        isolation: isolate !important;
        will-change: transform !important;
        /* Kill any inherited blur/filter/opacity that could fuzz the drawer chrome. */
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        opacity: 1 !important;
    }

    /* Direction-explicit anchoring + slide-out direction.
       The burger lives on the visual end of .topbar__inner — that's the RIGHT
       in RTL and the LEFT in LTR. The drawer slides in from the same side. */
    [dir="rtl"] .topbar__nav {
        right: 0 !important;
        left: auto !important;
        transform: translateX(100%) !important;       /* anchored right → slide off the right */
        box-shadow: -8px 0 32px rgba(0,0,0,0.15) !important;
    }
    [dir="ltr"] .topbar__nav {
        left: 0 !important;
        right: auto !important;
        transform: translateX(-100%) !important;      /* anchored left → slide off the left */
        box-shadow: 8px 0 32px rgba(0,0,0,0.15) !important;
    }

    [dir="rtl"] .topbar__nav.is-open,
    [dir="ltr"] .topbar__nav.is-open,
    .topbar__nav.is-open {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* ---- Drawer links: crisp text, no inherited blur ---- */
    .topbar__nav a {
        display: block !important;
        padding: 16px 22px !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 1.5 !important;
        color: #0F172A !important;          /* near-black for max contrast on white */
        background: #ffffff !important;
        border-bottom: 1px solid #E5E7EB !important;
        border-radius: 0 !important;
        text-decoration: none !important;
        text-shadow: none !important;
        opacity: 1 !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
    .topbar__nav a:hover,
    .topbar__nav a:active {
        background: #F0FDFA !important;
        color: #0F766E !important;
    }

    /* ---- Stats: 2x2 card ---- */
    .hero__stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 14px 20px !important;
        max-width: 340px !important;
        margin: 24px auto 0 !important;
        padding: 18px 20px !important;
        background: #ffffff !important;
        border-radius: 18px !important;
        box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,0.08)) !important;
    }
    .hero__stats .stat__number {
        font-size: 1.6rem !important;
        line-height: 1.05 !important;
    }
    .hero__stats .stat__label {
        font-size: 0.7rem !important;
        margin-top: 2px !important;
    }

    /* ---- Quick-filters polish ---- */
    .quick-filters {
        margin-inline: 12px !important;
        border-radius: 16px !important;
    }
    .filter-group + .filter-group { margin-top: 12px !important; }
    .filter-label {
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        margin-bottom: 6px !important;
    }
    .filter-chips {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .filter-chips button {
        font-size: 0.72rem !important;
        padding: 6px 12px !important;
        border-radius: 9999px !important;
        white-space: nowrap !important;
    }
}

/* ---- Very narrow phones: CTA collapses to icon ---- */
@media (max-width: 420px) {
    .topbar-cta {
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        justify-content: center !important;
    }
    .topbar-cta__text { display: none !important; }
    .topbar-cta__icon { display: inline-flex !important; font-size: 1.1rem !important; }

    .hero__stats .stat__number { font-size: 1.4rem !important; }
}

/* ---- Reduced-motion respect: kill drawer slide animation ---- */
@media (prefers-reduced-motion: reduce) {
    .topbar__nav,
    .drawer-overlay { transition: none !important; }
}

/* ============================================================
   Phase 1 Quick-Wins — browse toolbar + pagination
   Used on country.php and region.php for sort dropdown + page nav
   ============================================================ */
.browse-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    margin: 0 0 16px;
    background: #f8fbfa;
    border: 1px solid #e6efe9;
    border-radius: 12px;
}
.browse-toolbar__count { font-size: 0.9rem; color: #4b5563; }
.browse-toolbar__count strong { color: #047857; font-size: 1.05rem; margin-inline-end: 4px; }
.browse-toolbar__count .text-muted { color: #9ca3af; font-size: 0.85rem; margin-inline-start: 6px; }

.browse-toolbar__sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.browse-toolbar__sort select {
    padding: 8px 32px 8px 12px;
    border: 1px solid #d1fae5;
    border-radius: 8px;
    background: #fff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23047857' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E")
        no-repeat right 10px center;
    color: #1f2937;
    font-size: 0.9rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    min-width: 180px;
}
[dir="rtl"] .browse-toolbar__sort select {
    background-position: left 10px center;
    padding: 8px 12px 8px 32px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 24px 0 8px;
    padding: 12px;
}
.pagination__nav {
    padding: 8px 16px;
    border: 1px solid #d1fae5;
    border-radius: 8px;
    background: #fff;
    color: #047857;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.15s;
}
.pagination__nav:hover {
    background: #f0fdf4;
}
.pagination__nav.is-disabled {
    color: #9ca3af;
    border-color: #f3f4f6;
    cursor: default;
}
.pagination__info {
    color: #4b5563;
    font-size: 0.9rem;
}

@media (max-width: 480px) {
    .browse-toolbar { padding: 10px 12px; gap: 10px; }
    .browse-toolbar__sort select { min-width: 0; flex: 1; width: 100%; }
    .browse-toolbar__sort { width: 100%; }
    .pagination { gap: 12px; margin-top: 16px; }
    .pagination__nav { padding: 8px 12px; font-size: 0.85rem; }
}