/* ============================================================
   Mobile Polish — Citizen Opinion
   Comprehensive responsive fixes for all pages (≤768px & ≤480px)
   ============================================================ */

/* ── HEADER: Hamburger Menu + Compact Layout ───────────── */
@media (max-width: 768px) {
    .header-container {
        padding: 8px 12px !important;
        gap: 8px;
    }
    .logo-img { width: 32px !important; height: 32px !important; }
    .logo-text .logo-name { font-size: 14px !important; }
    .logo-text .logo-tagline { display: none !important; }

    .nav-links { display: none !important; }

    .header-actions {
        gap: 6px !important;
    }
    .header-actions .lang-switcher { display: none !important; }
    .header-actions .btn { padding: 6px 12px !important; font-size: 12px !important; }

    /* Mobile hamburger button */
    .mobile-menu-btn {
        display: flex !important; align-items: center; justify-content: center;
        width: 36px; height: 36px; border: none; background: rgba(255,153,0,0.1);
        border-radius: 10px; font-size: 20px; cursor: pointer; color: var(--text-primary);
    }
}
@media (min-width: 769px) {
    .mobile-menu-btn { display: none !important; }
}

/* ── HERO SECTION ──────────────────────────────────────── */
@media (max-width: 768px) {
    .hero {
        flex-direction: column !important;
        padding: 24px 16px !important;
        min-height: auto !important;
        text-align: center;
    }
    .hero-content { max-width: 100% !important; padding: 0 !important; }
    .hero-content h1 { font-size: 28px !important; line-height: 1.2 !important; }
    .hero-content p { font-size: 14px !important; }
    .hero-mockup, .hero-image, .hero-visual {
        display: none !important;
    }
    .cta-group {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: center;
    }
    .cta-group .btn, .cta-group a {
        width: 100% !important; max-width: 280px; text-align: center;
    }
    .hero-badges, .hero-stats-bar {
        flex-wrap: wrap !important; justify-content: center !important;
        gap: 8px !important; font-size: 12px !important;
    }
}

/* ── SECTIONS & CARDS ──────────────────────────────────── */
@media (max-width: 768px) {
    .section { padding: 24px 16px !important; }
    .section-title { font-size: 22px !important; }

    .features-grid, .cards-grid, .categories-grid,
    .opinions-grid, .how-it-works-grid, .stats-row,
    .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .feature-card, .opinion-card, .category-card {
        padding: 16px !important;
    }
}

/* ── FEED PAGE ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .feed-layout {
        flex-direction: column !important;
        gap: 0 !important;
    }
    .feed-sidebar, .sidebar-left, .sidebar-right {
        display: none !important;
    }
    .feed-main { 
        max-width: 100% !important; width: 100% !important;
        padding: 12px !important;
    }
    .feed-filters {
        overflow-x: auto !important; white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px !important;
        gap: 6px !important;
    }
    .feed-filters::-webkit-scrollbar { height: 0; }
    .opinion-card .opinion-meta {
        flex-wrap: wrap !important; gap: 6px !important;
    }
}

/* ── OPINION DETAIL ────────────────────────────────────── */
@media (max-width: 768px) {
    .opinion-detail-layout {
        flex-direction: column !important;
    }
    .opinion-detail-sidebar { display: none !important; }
    .opinion-detail-main {
        max-width: 100% !important; padding: 16px !important;
    }
    .opinion-title { font-size: 22px !important; }
    .vote-buttons { flex-wrap: wrap !important; }
}

/* ── CATEGORIES PAGE ───────────────────────────────────── */
@media (max-width: 768px) {
    .categories-hero h1 { font-size: 24px !important; }
    .categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}
@media (max-width: 400px) {
    .categories-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── WALLET PAGE ───────────────────────────────────────── */
@media (max-width: 768px) {
    .wallet-header {
        flex-direction: column !important; text-align: center;
        gap: 12px !important;
    }
    .wallet-balance { font-size: 32px !important; }
    .wallet-grid, .rewards-grid {
        grid-template-columns: 1fr !important;
    }
    .wallet-actions {
        flex-direction: column !important; gap: 8px !important;
    }
}

/* ── PROFILE PAGE ──────────────────────────────────────── */
@media (max-width: 768px) {
    .profile-header {
        flex-direction: column !important; text-align: center;
        gap: 16px !important;
    }
    .profile-avatar { width: 80px !important; height: 80px !important; }
    .profile-stats {
        flex-wrap: wrap !important; justify-content: center !important;
        gap: 12px !important;
    }
    .profile-tabs {
        overflow-x: auto !important; white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── LEADERBOARD ───────────────────────────────────────── */
@media (max-width: 768px) {
    .leaderboard-top3 {
        flex-direction: column !important; gap: 12px !important;
    }
    .leaderboard-podium { order: 0 !important; }
    .leaderboard-table { font-size: 13px !important; }
    .leaderboard-table td, .leaderboard-table th {
        padding: 10px 8px !important;
    }
}

/* ── ANALYTICS ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .analytics-grid {
        grid-template-columns: 1fr !important;
    }
    .analytics-card { padding: 16px !important; }
}

/* ── BOOKMARKS ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .bookmarks-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── CREATE OPINION ────────────────────────────────────── */
@media (max-width: 768px) {
    .create-opinion-layout {
        flex-direction: column !important;
    }
    .create-opinion-sidebar, .create-sidebar {
        display: none !important;
    }
    .create-opinion-form, .create-form-container {
        max-width: 100% !important; padding: 16px !important;
    }
}

/* ── POLLS PAGE ────────────────────────────────────────── */
@media (max-width: 768px) {
    .polls-layout {
        flex-direction: column !important;
    }
    .polls-sidebar { display: none !important; }
    .polls-main { max-width: 100% !important; padding: 16px !important; }
    .poll-tabs, .polls-filter-tabs {
        overflow-x: auto !important; white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        gap: 4px !important;
    }
    .poll-tabs::-webkit-scrollbar, .polls-filter-tabs::-webkit-scrollbar {
        height: 0;
    }
    .poll-stats-grid, .polls-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}

/* ── NOTIFICATIONS ─────────────────────────────────────── */
@media (max-width: 768px) {
    .notifications-layout {
        flex-direction: column !important;
    }
    .notifications-sidebar { display: none !important; }
    .notifications-main { max-width: 100% !important; padding: 16px !important; }
    .notification-item {
        padding: 12px !important; gap: 10px !important;
    }
    .notification-icon { width: 36px !important; height: 36px !important; font-size: 16px !important; }
}

/* ── LOGIN/REGISTER ────────────────────────────────────── */
@media (max-width: 768px) {
    .auth-layout, .login-layout {
        flex-direction: column !important;
    }
    .auth-visual, .login-visual, .auth-left, .login-left {
        display: none !important;
    }
    .auth-form-container, .login-form-container, .auth-right, .login-right {
        max-width: 100% !important; width: 100% !important;
        padding: 24px 16px !important;
        min-height: auto !important;
    }
    .auth-form, .login-form {
        max-width: 100% !important;
    }
    .social-login-btns, .social-btns {
        flex-direction: column !important; gap: 8px !important;
    }
}

/* ── SETTINGS ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .settings-layout {
        flex-direction: column !important;
    }
    .settings-sidebar, .settings-nav {
        flex-direction: row !important; overflow-x: auto !important;
        white-space: nowrap !important; -webkit-overflow-scrolling: touch;
        border-right: none !important; border-bottom: 1px solid var(--border-light) !important;
        padding: 8px !important; gap: 4px !important;
    }
    .settings-main { padding: 16px !important; }
}

/* ── EDIT PROFILE ──────────────────────────────────────── */
@media (max-width: 768px) {
    .edit-profile-layout {
        flex-direction: column !important;
    }
    .edit-profile-sidebar { display: none !important; }
    .edit-profile-main { max-width: 100% !important; padding: 16px !important; }
    .form-row {
        flex-direction: column !important; gap: 0 !important;
    }
}

/* ── FAQ PAGE ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .faq-hero h1 { font-size: 24px !important; }
    .faq-tabs, .faq-categories {
        overflow-x: auto !important; white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
    }
    .faq-search { max-width: 100% !important; }
}

/* ── ABOUT PAGE ────────────────────────────────────────── */
@media (max-width: 768px) {
    .about-hero h1 { font-size: 26px !important; }
    .team-grid, .values-grid {
        grid-template-columns: 1fr !important;
    }
    .about-stats {
        flex-direction: column !important; gap: 12px !important;
    }
}

/* ── ADMIN DASHBOARD ───────────────────────────────────── */
@media (max-width: 768px) {
    .admin-layout { flex-direction: column !important; }
    .admin-sidebar { 
        display: none !important;
    }
    .admin-main { padding: 16px !important; }
    .admin-header-bar {
        flex-direction: column !important; gap: 12px !important;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .stat-card { padding: 14px !important; }
    .stat-card .stat-value { font-size: 22px !important; }
    .chart-grid {
        grid-template-columns: 1fr !important;
    }
    .admin-table {
        display: block !important; overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .donut-chart { flex-direction: column !important; align-items: center !important; }
}
@media (max-width: 400px) {
    .stats-grid { grid-template-columns: 1fr !important; }
}

/* ── FOOTER ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .footer-grid, .footer-columns {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        text-align: center;
    }
    .footer-brand { text-align: center !important; }
    .footer-social { justify-content: center !important; }
    .footer-bottom {
        flex-direction: column !important; gap: 8px !important;
        text-align: center;
    }
}

/* ── MOBILE BOTTOM NAV ─────────────────────────────────── */
@media (max-width: 768px) {
    .mobile-nav {
        display: flex !important;
    }
    body { padding-bottom: 70px !important; }
}
@media (min-width: 769px) {
    .mobile-nav { display: none !important; }
}

/* ── PWA INSTALL BANNER ────────────────────────────────── */
@media (max-width: 768px) {
    .pwa-install-banner {
        bottom: 70px !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 12px !important;
        text-align: center;
    }
    .pwa-install-banner .pwa-info {
        flex-direction: column !important; gap: 4px !important;
    }
    .pwa-install-banner img { display: none !important; }
}

/* ── GENERAL MOBILE FIXES (≤480px) ─────────────────────── */
@media (max-width: 480px) {
    body { font-size: 14px !important; }

    .hero-content h1 { font-size: 24px !important; }
    .section-title { font-size: 20px !important; }

    .btn { padding: 10px 16px !important; font-size: 13px !important; }
    .btn-lg { padding: 12px 20px !important; font-size: 14px !important; }

    /* Cards */
    .opinion-card, .feature-card, .poll-card {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    /* Tables */
    table th, table td {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    /* Smooth scrolling for scroll containers */
    .scroll-container {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    .scroll-container > * {
        scroll-snap-align: start;
    }

    /* Touch-friendly tap targets */
    button, a, .btn, input, select, textarea {
        min-height: 44px; /* iOS minimum tap target */
    }
    input, select, textarea {
        font-size: 16px !important; /* Prevent iOS zoom on focus */
    }
}

/* ── ONBOARDING MOBILE FIX ─────────────────────────────── */
@media (max-width: 768px) {
    .onb-welcome-card {
        padding: 24px 16px !important;
        max-width: 95% !important;
    }
    .onb-welcome-card h2 { font-size: 22px !important; }
    .onb-welcome-card .onb-features {
        gap: 8px !important;
    }
    .onb-tooltip {
        max-width: 90% !important;
        left: 5% !important;
    }
    .onb-complete-card {
        padding: 24px 16px !important;
    }
}

/* ── SEARCH OVERLAY MOBILE ─────────────────────────────── */
@media (max-width: 768px) {
    .search-overlay-content, .search-panel {
        width: 100% !important; max-width: 100% !important;
        border-radius: 0 !important;
        top: 0 !important; left: 0 !important;
        height: 100vh !important;
    }
}

/* ── DARK MODE MOBILE FIXES ────────────────────────────── */
@media (max-width: 768px) {
    [data-theme="dark"] .mobile-nav {
        background: rgba(20,20,30,0.98) !important;
        border-top: 1px solid rgba(255,255,255,0.06) !important;
    }
}