/* ============================================================
   SMART STUDY DZ — MOBILE-FIRST RESPONSIVE DESIGN
   Phone-only overrides (max-width: 767px)
   ============================================================ */

@media (max-width: 767px) {

    /* ── NAVBAR ─────────────────────────────────────────── */
    .navbar {
        padding: 10px 0 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
    }

    .navbar .container {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        gap: 8px !important;
        padding: 0 14px !important;
        align-items: center !important;
    }

    .navbar-left {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .navbar-right {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-content: flex-end !important;
    }

    .navbar-center {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        justify-content: center !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .navbar-center::-webkit-scrollbar { display: none !important; }

    .logo { width: 36px !important; height: 36px !important; }

    .site-title {
        font-size: 16px !important;
        letter-spacing: 0.5px !important;
    }

    .nav-links {
        gap: 4px !important;
        flex-wrap: nowrap !important;
        padding-bottom: 2px !important;
    }

    .nav-links a {
        font-size: 12px !important;
        padding: 6px 10px !important;
        white-space: nowrap !important;
    }

    .language-switcher {
        padding: 3px !important;
        gap: 3px !important;
    }

    .language-switcher a, .lang-btn {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }

    /* ── HERO SECTION ───────────────────────────────────── */
    .hero {
        padding: 60px 16px 40px !important;
        min-height: auto !important;
    }

    .hero-content h2 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 14px !important;
        letter-spacing: -0.5px !important;
    }

    .hero-content p {
        font-size: 15px !important;
        margin-bottom: 24px !important;
    }

    .hero-buttons {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .btn {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        justify-content: center !important;
    }

    /* ── HERO STATS PANEL (index.php) ───────────────────── */
    .hero-stats-panel {
        margin: 20px 0 0 !important;
        padding: 18px 16px !important;
        border-radius: 22px !important;
        max-width: 100% !important;
    }

    /* Make the flex row inside the stats panel vertical */
    .hero-stats-panel > div {
        flex-direction: column !important;
        gap: 16px !important;
    }

    /* Left info text block */
    .hero-stats-panel > div > div:first-child {
        min-width: unset !important;
        flex: unset !important;
        width: 100% !important;
    }

    /* Title shrink */
    .hero-stats-panel > div > div:first-child > div:nth-child(2) {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }

    /* Right stats grid block */
    .hero-stats-panel > div > div:last-child {
        min-width: unset !important;
        flex: unset !important;
        width: 100% !important;
    }

    /* Each individual stat card */
    .hero-stats-panel > div > div:last-child > div {
        padding: 14px 16px !important;
        border-radius: 18px !important;
    }

    /* Icon box inside stat card */
    .hero-stats-panel > div > div:last-child > div > div:first-child {
        width: 46px !important;
        height: 46px !important;
        font-size: 18px !important;
        border-radius: 14px !important;
        flex-shrink: 0 !important;
    }

    /* Big number inside stat card */
    .hero-stats-panel > div > div:last-child > div > div:last-child > div:last-child {
        font-size: 30px !important;
        margin-top: 4px !important;
    }

    /* steam-stats-container (Cyberpunk pods) */
    .steam-stats-container {
        margin-top: 24px !important;
        padding: 10px !important;
    }

    .stats-deck {
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
        padding: 10px !important;
    }

    .stat-pod {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 14px 18px !important;
    }

    .pod-value { font-size: 28px !important; }
    .pod-connector { transform: rotate(90deg) !important; }

    /* ── FEATURES / WHY CHOOSE US ───────────────────────── */
    .features {
        padding: 60px 14px !important;
    }

    .features h2 {
        font-size: 26px !important;
        margin-bottom: 36px !important;
    }

    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .feature-card {
        padding: 30px 24px !important;
    }

    /* ── VIDEO SECTION ───────────────────────────────────── */
    .video-section {
        padding: 50px 14px !important;
    }

    .video-section h2 {
        font-size: 24px !important;
    }

    /* ── SOCIAL BUTTONS ─────────────────────────────────── */
    .social-buttons {
        gap: 10px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .social-btn {
        font-size: 13px !important;
        padding: 10px 14px !important;
    }

    /* ── PRICING SECTION ────────────────────────────────── */
    .pricing-section {
        padding: 60px 14px !important;
    }

    .pricing-section h2 {
        font-size: 26px !important;
    }

    .pricing-tabs {
        gap: 8px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .tab-btn {
        font-size: 13px !important;
        padding: 8px 14px !important;
    }

    .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .pricing-card {
        padding: 24px !important;
    }

    /* ── REVIEWS SECTION ─────────────────────────────────── */
    .reviews-section {
        padding: 60px 14px !important;
    }

    .reviews-header h2 {
        font-size: 26px !important;
    }

    .reviews-header p {
        font-size: 15px !important;
    }

    /* Rating Overview Card — stack to single column */
    .rating-overview-card {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 22px 18px !important;
        text-align: center !important;
    }

    .score-summary {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
        padding-right: 0 !important;
        padding-bottom: 18px !important;
    }

    html[dir="rtl"] .score-summary {
        border-left: none !important;
        padding-left: 0 !important;
    }

    .big-score { font-size: 48px !important; }

    .score-bars {
        text-align: left !important;
        padding: 0 10px !important;
    }

    .bar-name { width: 52px !important; font-size: 12px !important; }

    .btn-community-review {
        width: 100% !important;
        padding: 14px !important;
    }

    /* Review cards — single column */
    .reviews-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .review-card {
        padding: 22px 18px !important;
    }

    .author-name { font-size: 16px !important; }
    .card-body-quote { font-size: 14px !important; }

    /* ── MODALS ──────────────────────────────────────────── */
    .review-modal-content {
        padding: 24px 18px !important;
        border-radius: 20px !important;
    }

    /* ── FOOTER ──────────────────────────────────────────── */
    .footer {
        padding: 20px 14px !important;
        margin-top: 60px !important;
        font-size: 12px !important;
    }

    .footer-links {
        gap: 12px !important;
        margin-top: 10px !important;
    }

    /* ── DASHBOARD SPECIFIC ──────────────────────────────── */
    /* About cards */
    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .about-card {
        padding: 20px !important;
    }

    /* Course / enrollment cards */
    .course-card, .enrollment-card {
        margin-bottom: 16px !important;
    }

    /* User stats row */
    .stats-row, .user-stats {
        flex-direction: column !important;
        gap: 14px !important;
    }

    /* ── ADMIN RESPONSIVE (shared styles) ────────────────── */
    .admin-card, .admin-stat-card {
        padding: 18px 14px !important;
    }
}

/* ── SMALL PHONES (max-width: 380px) ─────────────────────── */
@media (max-width: 380px) {
    .hero-content h2 { font-size: 24px !important; }
    .site-title { font-size: 14px !important; }
    .logo { width: 30px !important; height: 30px !important; }
    .nav-links a { font-size: 11px !important; padding: 5px 7px !important; }
}