/* Mobile UX Pass — Swiss Hookup
   Focus: tap targets ≥48px, sticky bottom CTA, safe-area, readable line lengths,
   smooth scroll snap on country/district carousels, reduced layout-shift. */

@media (max-width: 768px) {
    html { -webkit-text-size-adjust: 100%; }
    body { font-size: 16px; line-height: 1.55; }

    /* Tap target floor */
    .btn, button, .nav a, .city-link, input[type=submit] {
        min-height: 48px;
        padding-block: 12px;
        font-size: 1rem;
    }
    .btn-primary { font-weight: 700; letter-spacing: .2px; }

    /* Hero compaction */
    h1 { font-size: clamp(1.7rem, 6vw, 2.4rem) !important; line-height: 1.2 !important; }
    h2 { font-size: clamp(1.35rem, 5vw, 1.9rem) !important; }
    h3 { font-size: 1.15rem !important; }
    p, li { font-size: 1rem; }
    .container, .section { padding-inline: 18px; }

    /* Form inputs — 16px to prevent iOS zoom-on-focus */
    input, textarea, select { font-size: 16px !important; min-height: 48px; border-radius: 12px; }

    /* Sticky bottom CTA on long pages (article, country, quiz, district) */
    body.has-sticky-cta { padding-bottom: 80px; }
    .nh-mobile-cta {
        position: fixed; left: 0; right: 0; bottom: 0;
        background: linear-gradient(180deg, rgba(15,15,26,0) 0%, #0F0F1A 30%);
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
        z-index: 9990;
        display: flex; gap: 10px;
    }
    .nh-mobile-cta a {
        flex: 1; text-align: center;
        background: linear-gradient(135deg,#d8286d,#7c3aed);
        color: white; text-decoration: none; padding: 14px;
        border-radius: 14px; font-weight: 700; font-size: 1rem;
        box-shadow: 0 10px 28px rgba(216,40,109,.4);
    }

    /* Horizontal carousels — scroll-snap for districts/countries */
    .carousel, .city-grid, .country-grid {
        display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
        gap: 12px; padding: 4px 14px 14px; -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .carousel::-webkit-scrollbar, .city-grid::-webkit-scrollbar { display: none; }
    .carousel > *, .city-grid > *, .country-grid > * {
        flex: 0 0 78%; scroll-snap-align: start;
    }

    /* Tables → block on tiny screens */
    table { display: block; overflow-x: auto; }

    /* Footer compaction */
    footer .container { padding: 30px 18px; }

    /* Live chat widget — smaller on mobile */
    #nh-chat-toggle { width: 56px; height: 56px; right: 12px; bottom: 12px; }
    #nh-chat-panel { width: calc(100vw - 24px); right: -6px; bottom: 70px; }

    /* Exit popup — bottom sheet style */
    #exit-popup > div { width: 100% !important; max-width: 100% !important;
        border-radius: 24px 24px 0 0 !important; margin-top: auto !important; }

    /* Image lazy-load: prevent CLS */
    img { height: auto; max-width: 100%; }

    /* Skip-link affordance */
    a:focus-visible, button:focus-visible { outline: 2px solid #d8286d; outline-offset: 2px; }

    /* Quiz buttons more thumbable */
    #quiz button.city-link { padding: 16px 18px !important; font-size: 1rem !important; }

    /* Reduce motion for users who request it */
    @media (prefers-reduced-motion: reduce) {
        * { animation: none !important; transition: none !important; }
    }
}

/* iOS notch / safe-area on all sizes */
@supports (padding: max(0px)) {
    .nh-mobile-cta { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
    footer { padding-bottom: env(safe-area-inset-bottom); }
}

/* ============================================================
   Mobile overflow & layout fixes
   ============================================================ */
@media (max-width: 768px) {
    /* Hard guard against horizontal overflow */
    html, body { max-width: 100vw; overflow-x: hidden; }
    .container { padding-inline: 14px !important; }

    /* ---------- Header compaction ---------- */
    .site-header { height: 64px; }
    .header-inner { gap: 8px; padding: 0 12px; }
    .logo { font-size: 1.1rem !important; gap: 6px !important; }
    .logo i { width: 22px !important; height: 22px !important; }
    .site-header nav { gap: 10px !important; }
    /* Hide country flags on mobile — redundant with homepage country grid */
    .site-header nav > a[href*="/country/"] { display: none !important; }
    /* Compact JOIN NOW button */
    .site-header .btn-primary {
        padding: 10px 16px !important;
        font-size: 0.8rem !important;
        min-height: 40px !important;
        white-space: nowrap;
        letter-spacing: 0 !important;
    }
    /* Compact language switcher */
    #lang-switcher span { font-size: 0.8rem !important; }

    /* ---------- Cookie banner — stack vertically ---------- */
    #cookie-banner { padding: 14px !important; }
    #cookie-banner > div {
        gap: 10px !important;
        flex-direction: column;
        align-items: stretch !important;
    }
    #cookie-banner > div > p {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        font-size: 0.85rem !important;
    }
    #cookie-banner > div > div {
        display: flex !important;
        gap: 10px !important;
        justify-content: stretch !important;
    }
    #cookie-banner > div > div > button.btn {
        flex: 1;
        padding: 12px 16px !important;
        font-size: 0.9rem !important;
        min-height: 44px !important;
    }

    /* ---------- Live counter widget — force compact pill ---------- */
    #live-counter-widget {
        top: auto !important;
        bottom: 80px !important;
        right: 10px !important;
        left: auto !important;
        max-width: calc(100vw - 20px);
        white-space: nowrap !important;
        font-size: 0.75rem !important;
        padding: 8px 14px !important;
    }

    /* ---------- Age gate — full-width on mobile ---------- */
    #age-gate > div {
        max-width: calc(100vw - 28px) !important;
        padding: 28px 22px !important;
    }
    #age-gate > div > div[style*="display:flex"] {
        flex-direction: column;
        gap: 10px !important;
    }
    #age-gate > div > div[style*="display:flex"] > * { width: 100%; }

    /* ---------- Generic safety: no element wider than viewport ---------- */
    main, section, article, header, footer { max-width: 100vw; }
    section[style*="padding"][style*="border-radius"] { padding: 30px 18px !important; }
}