/* ========================================
   COMPREHENSIVE MOBILE RESPONSIVE STYLES
   For ALL Pages - Beautiful Mobile Experience
   Desktop Mode: UNCHANGED
   ======================================== */

/* Remove logo rotation on all screen sizes */
.logo-badge.bounce,
.bounce {
    animation: none !important;
    transform: none !important;
}

/* ===== MOBILE ONLY (768px and below) ===== */
@media (max-width: 768px) {
    
    /* ===== GLOBAL MOBILE STYLES ===== */
    html {
        zoom: 0.85;
        -moz-transform: scale(0.85);
        -moz-transform-origin: 0 0;
    }
    
    body {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    .container {
        padding: 0 16px !important;
        max-width: 100% !important;
    }

    /* ===== AUTH PAGES (Login/Signup) ===== */
    .auth-container {
        padding: 20px 16px !important;
        min-height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .auth-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 32px 24px !important;
        margin: 0 !important;
    }

    .auth-logo-badge {
        font-size: 32px !important;
        width: 60px !important;
        height: 60px !important;
        margin: 0 auto 16px !important;
    }

    .auth-title {
        font-size: 24px !important;
        margin-bottom: 8px !important;
    }

    .auth-subtitle {
        font-size: 14px !important;
        margin-bottom: 24px !important;
    }

    .google-btn {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        margin-bottom: 20px !important;
    }

    .divider {
        margin: 24px 0 !important;
    }

    .form-group {
        margin-bottom: 20px !important;
    }

    .form-input {
        padding: 14px 16px !important;
        font-size: 16px !important; /* Prevents iOS zoom */
    }

    .submit-btn,
    .form-btn-primary {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
    }

    .auth-footer {
        margin-top: 24px !important;
        font-size: 14px !important;
    }

    /* Fix checkbox sizes on mobile */
    .form-checkbox {
        margin-bottom: 16px !important;
        gap: 10px !important;
    }

    .form-checkbox input[type="checkbox"] {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        flex-shrink: 0 !important;
    }

    .form-checkbox label {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .forgot-password {
        margin-top: -8px !important;
        margin-bottom: 16px !important;
    }

    .forgot-password a {
        font-size: 13px !important;
    }

    /* ===== DASHBOARD PAGE ===== */
    .dashboard-container header {
        padding: 12px 0 !important;
    }

    .dashboard-container .nav {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .dashboard-container .nav-logo {
        font-size: 18px !important;
    }

    .dashboard-container .nav-buttons {
        gap: 8px !important;
    }

    .dashboard-container .nav-buttons .btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    /* Dashboard Stats */
    .dashboard-stats,
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .stat-card {
        padding: 16px !important;
    }

    .stat-value {
        font-size: 28px !important;
    }

    .stat-label {
        font-size: 13px !important;
    }

    /* Dashboard Progress */
    .progress-section {
        padding: 20px 16px !important;
    }

    .progress-rings {
        flex-direction: column !important;
        gap: 20px !important;
    }

    /* Dashboard Section Header & Filter Tabs */
    .section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .section-title {
        font-size: 22px !important;
    }

    .filter-tabs {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .filter-tab {
        font-size: 13px !important;
        padding: 8px 12px !important;
        white-space: nowrap !important;
    }

    /* Dashboard Lessons Grid */
    .lessons-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .lesson-card {
        padding: 16px !important;
    }

    .lesson-card h3 {
        font-size: 17px !important;
    }

    .lesson-card p {
        font-size: 14px !important;
    }

    .lesson-card .btn {
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    /* ===== LESSON PAGES ===== */
    .lesson-header {
        padding: 12px 0 !important;
    }

    .lesson-nav {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    .lesson-nav .back-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .lesson-nav .lesson-title {
        font-size: 16px !important;
        text-align: center !important;
    }

    .lesson-nav .btn-complete {
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    /* Lesson Progress Bar */
    .progress-container {
        padding: 12px 16px !important;
    }

    .progress-wrapper {
        padding: 12px !important;
    }

    /* Lesson Content */
    .lesson-container {
        padding: 24px 16px !important;
        max-width: 100% !important;
    }

    .lesson-badge {
        font-size: 11px !important;
        padding: 6px 12px !important;
    }

    .lesson-title {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 16px !important;
    }

    .content-section {
        margin-bottom: 32px !important;
        padding: 0 !important;
    }

    .content-section h2 {
        font-size: 20px !important;
        margin-bottom: 12px !important;
    }

    .content-section h3 {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }

    .content-section p {
        font-size: 15px !important;
        line-height: 1.7 !important;
        margin-bottom: 12px !important;
    }

    .content-section ul,
    .content-section ol {
        padding-left: 24px !important;
        margin-bottom: 16px !important;
    }

    .content-section li {
        font-size: 15px !important;
        margin-bottom: 8px !important;
    }

    /* Video Containers */
    .video-container {
        margin: 20px 0 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }

    .video-container iframe {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9 !important;
    }

    /* Prompt Boxes */
    .prompt-box,
    .code-block,
    .note-box {
        padding: 16px !important;
        margin: 16px 0 !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        overflow-x: auto !important;
    }

    /* Tool Links */
    .tool-link {
        word-break: break-all !important;
        font-size: 14px !important;
    }

    /* Images */
    .content-section img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: 8px !important;
        margin: 16px 0 !important;
    }

    /* ===== BUTTONS - ALL PAGES ===== */
    .btn,
    button:not(.tab-btn):not(.nav-cta) {
        padding: 12px 20px !important;
        font-size: 15px !important;
        border-radius: 8px !important;
    }

    .btn-primary,
    .btn-secondary {
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    /* ===== MODALS - ALL PAGES ===== */
    .modal {
        padding: 16px !important;
    }

    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        max-height: 90vh !important;
        margin: 20px auto !important;
        padding: 20px !important;
        overflow-y: auto !important;
    }

    .modal-header {
        padding: 0 0 16px 0 !important;
    }

    .modal-header h2 {
        font-size: 20px !important;
    }

    .modal-body {
        padding: 16px 0 !important;
    }

    .modal-footer {
        padding: 16px 0 0 0 !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .modal-footer .btn {
        width: 100% !important;
    }

    /* ===== FORMS - ALL PAGES ===== */
    .form-row {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .form-col {
        width: 100% !important;
    }

    select,
    textarea,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"] {
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 16px !important; /* Prevents iOS zoom */
    }

    textarea {
        min-height: 120px !important;
    }

    /* ===== TABLES - ALL PAGES ===== */
    table {
        font-size: 13px !important;
    }

    table th,
    table td {
        padding: 10px 8px !important;
        font-size: 13px !important;
    }

    /* ===== NAVIGATION - ALL PAGES ===== */
    .nav-links {
        display: none !important; /* Hide nav links on mobile */
    }

    .nav-logo .logo-text {
        display: none !important; /* Hide long text, keep badge only */
    }

    /* Hide "HOW EARN MONEY WITH AI" text on mobile - all pages */
    .nav-logo > div:not(.logo-badge),
    .logo > div:not(.logo-badge),
    .nav .logo > div:last-child,
    .nav > div > div:not(.logo-badge) {
        display: none !important;
    }

    /* Show only AI badge on mobile */
    .nav-logo,
    .logo,
    .nav > div {
        font-size: 0 !important;
    }

    .nav-logo .logo-badge,
    .logo .logo-badge,
    .logo-badge {
        font-size: 20px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        width: 40px !important;
        height: 40px !important;
    }

    /* Specifically for index.html structure */
    .nav > div > div:last-child {
        display: none !important;
    }

    /* Target the exact structure in index.html */
    .logo > div:nth-child(2) {
        display: none !important;
    }

    /* Alternative targeting */
    div.logo > div:not(.logo-badge) {
        display: none !important;
    }

    /* Make index.html navbar same size as dashboard */
    header .nav {
        padding: 14px 0 !important;
        min-height: 64px !important;
    }

    .nav-actions a {
        padding: 8px 12px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    .logo-badge {
        animation: none !important;
    }

    /* Fix logo position - not in corner */
    header .container {
        padding: 0 16px !important;
    }

    /* ===== FOOTER - ALL PAGES ===== */
    footer {
        padding: 32px 16px !important;
    }

    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        text-align: center !important;
    }

    .footer-section {
        align-items: center !important;
    }

    .footer-links {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }

    /* ===== CARDS - ALL PAGES ===== */
    .card,
    .info-card,
    .feature-card {
        padding: 20px !important;
        margin-bottom: 16px !important;
    }

    .card h3,
    .info-card h3,
    .feature-card h3 {
        font-size: 18px !important;
    }

    .card p,
    .info-card p,
    .feature-card p {
        font-size: 14px !important;
    }

    /* ===== GRIDS - ALL PAGES ===== */
    .grid,
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* ===== SPACING - ALL PAGES ===== */
    section {
        padding: 40px 16px !important;
    }

    h1 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    h4 {
        font-size: 18px !important;
    }

    h5 {
        font-size: 16px !important;
    }

    /* ===== UTILITY CLASSES ===== */
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }

    .text-center-mobile {
        text-align: center !important;
    }

    .full-width-mobile {
        width: 100% !important;
    }
}

/* ===== SMALL MOBILE (480px and below) ===== */
@media (max-width: 480px) {
    html {
        zoom: 0.75;
        -moz-transform: scale(0.75);
        -moz-transform-origin: 0 0;
    }
    
    body {
        font-size: 14px !important;
    }

    .container {
        padding: 0 12px !important;
    }

    h1 {
        font-size: 24px !important;
    }

    h2 {
        font-size: 20px !important;
    }

    h3 {
        font-size: 18px !important;
    }

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

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

    .lesson-container {
        padding: 20px 12px !important;
    }

    .content-section p {
        font-size: 14px !important;
    }

    /* Even smaller checkboxes for very small screens */
    .form-checkbox input[type="checkbox"] {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        min-height: 14px !important;
    }

    .form-checkbox label {
        font-size: 13px !important;
    }
}

/* ===== LANDSCAPE MODE ===== */
@media (max-height: 500px) and (orientation: landscape) {
    .auth-container {
        padding: 16px !important;
    }

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

    .modal-content {
        max-height: 95vh !important;
    }
}

/* ===== TOUCH IMPROVEMENTS ===== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets - but NOT for checkboxes */
    a,
    button,
    .btn {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Checkboxes should stay small but have larger clickable area via label */
    .form-checkbox {
        min-height: 44px !important;
        align-items: center !important;
    }

    .form-checkbox input[type="checkbox"] {
        min-height: 16px !important;
        min-width: 16px !important;
    }

    /* Better tap highlighting */
    * {
        -webkit-tap-highlight-color: rgba(99, 102, 241, 0.2) !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .nav,
    .footer,
    .btn,
    .modal,
    header,
    .sidebar {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .lesson-container,
    .content-section {
        max-width: 100% !important;
        padding: 0 !important;
    }
}