/* Mobile UI Fixes for Gita App - BNM InfoSolution */

/* ===== Preloader Mobile Centering Fix ===== */
@media (max-width: 768px) {
    .preloader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .preloader-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 300px;
        text-align: center;
    }

    .om-symbol {
        font-size: 3rem;
    }

    .loading-text {
        font-size: 1rem;
    }

    .loading-bar {
        width: 150px;
        margin: 0 auto;
    }
}

/* ===== Book View Mobile Fixes ===== */
@media (max-width: 768px) {
    /* Fix book container for mobile */
    .book-container {
        padding: 10px;
        min-height: calc(100vh - 80px);
        overflow-x: hidden;
        overflow-y: auto;
    }

    .book {
        width: calc(100vw - 20px) !important;
        height: calc(100vh - 100px) !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 auto;
        transform: none !important;
        perspective: none !important;
    }

    /* Single page view on mobile */
    .book-pages {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    .page {
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
        transform: none !important;
        box-shadow: none !important;
        display: block !important;
    }

    .page.left,
    .page.right {
        display: none;
    }

    .page.active {
        display: block !important;
        padding: 20px;
        overflow-y: auto;
        background: var(--background-primary);
    }

    /* Page content readability */
    .page-content {
        padding: 15px;
        font-size: 0.95rem;
        line-height: 1.8;
    }

    /* Book navigation */
    .book-nav {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 100;
        background: rgba(255, 255, 255, 0.95);
        padding: 10px;
        border-radius: 20px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .book-nav button {
        padding: 8px 16px;
        font-size: 0.9rem;
    }
}

/* ===== Text Visibility & Color Contrast Fixes ===== */
@media (max-width: 768px) {
    /* Ensure body maintains theme colors */
    body {
        background-color: var(--background-primary) !important;
        color: var(--text-primary) !important;
    }

    /* Light theme specific */
    body.theme-light {
        background-color: #ffffff !important;
        color: #2c3e50 !important;
    }

    /* Dark theme specific */
    body.theme-dark {
        background-color: #1a1a1a !important;
        color: #e0e0e0 !important;
    }

    /* Sepia theme specific */
    body.theme-sepia {
        background-color: #f4f1e8 !important;
        color: #3a3a3a !important;
    }

    /* Sanskrit text visibility - keep sacred red color */
    .sanskrit-text,
    .verse-sanskrit,
    .sanskrit-title {
        color: #b22222 !important; /* sacred red */
        font-weight: 600 !important;
        text-shadow: none !important;
        font-size: 1.1rem !important;
        line-height: 1.8 !important;
    }

    body.theme-dark .sanskrit-text,
    body.theme-dark .verse-sanskrit,
    body.theme-dark .sanskrit-title {
        color: #ff6b6b !important; /* lighter red for dark theme */
    }

    /* Hindi text visibility */
    .hindi-text,
    .verse-hindi,
    .hindi-translation {
        color: var(--text-secondary) !important;
        font-weight: 500 !important;
        font-size: 1rem !important;
        line-height: 1.7 !important;
    }

    /* English text visibility */
    .english-text,
    .verse-english,
    .english-translation {
        color: var(--text-primary) !important;
        font-weight: 400 !important;
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    /* Card backgrounds with better contrast */
    .verse-card,
    .chapter-card,
    .content-card,
    .feature-card {
        background: var(--background-secondary) !important;
        border: 1px solid var(--border-color) !important;
        color: var(--text-primary) !important;
    }

    /* Headers and titles - maintain theme colors */
    h1, h2, h3, h4, h5, h6 {
        color: var(--text-primary) !important;
        font-weight: 600 !important;
    }

    /* Links - keep brand color */
    a:not(.btn):not(.auth-btn) {
        color: var(--primary-color) !important;
        font-weight: 500;
    }

    a:not(.btn):not(.auth-btn):hover {
        color: var(--deep-saffron) !important;
    }

    /* Buttons - maintain consistent styling */
    button:not(.view-btn):not(.theme-btn):not(.font-btn),
    .btn-primary {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
        color: white !important;
        border: none !important;
    }

    .btn-outline {
        background: transparent !important;
        color: var(--primary-color) !important;
        border: 2px solid var(--primary-color) !important;
    }

    button:disabled, .btn:disabled {
        opacity: 0.5 !important;
        cursor: not-allowed !important;
    }
}

/* ===== Mobile Navigation Fixes ===== */
@media (max-width: 768px) {
    /* Header fixes with theme-aware background */
    .main-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(10px) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    }

    body.theme-dark .main-header {
        background: rgba(26, 26, 26, 0.98) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
    }

    body.theme-sepia .main-header {
        background: rgba(244, 241, 232, 0.98) !important;
    }

    .navbar {
        padding: 12px 16px !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        align-items: center !important;
    }

    /* Logo adjustment */
    .logo {
        font-size: 1.3rem !important;
        flex-shrink: 0 !important;
    }

    .logo-symbol {
        font-size: 1.6rem !important;
        margin-right: 6px !important;
    }

    .logo-text {
        font-size: 1.3rem !important;
    }

    /* Hide search on very small screens */
    @media (max-width: 480px) {
        .nav-center {
            display: none !important;
        }
    }

    /* View toggle buttons - improved touch targets */
    .view-toggle {
        display: flex !important;
        gap: 4px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        padding: 4px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 107, 53, 0.15) !important;
        flex-shrink: 0 !important;
    }

    body.theme-dark .view-toggle {
        background: rgba(45, 45, 45, 0.95) !important;
    }

    .view-btn {
        padding: 8px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
    }

    .view-btn .material-icons {
        font-size: 22px !important;
    }

    .view-btn.active {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
        color: white !important;
    }

    /* Settings button - improved visibility */
    .settings-btn {
        width: 44px !important;
        height: 44px !important;
        padding: 10px !important;
        flex-shrink: 0 !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border: 2px solid rgba(255, 107, 53, 0.2) !important;
    }

    body.theme-dark .settings-btn {
        background: rgba(45, 45, 45, 0.9) !important;
        border-color: rgba(255, 107, 53, 0.4) !important;
    }

    /* User menu */
    .username {
        display: none !important;
    }

    .user-dropdown {
        right: 0 !important;
        left: auto !important;
        min-width: 200px !important;
        max-width: 90vw !important;
    }

    .user-btn {
        width: 44px !important;
        height: 44px !important;
        padding: 10px !important;
        border-radius: 50% !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .auth-btn {
        width: 44px !important;
        height: 44px !important;
        padding: 10px !important;
        border-radius: 50% !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .auth-btn span {
        display: none !important;
    }
}

/* ===== Scroll View Mobile Fixes ===== */
@media (max-width: 768px) {
    .scroll-view {
        padding: 10px;
    }

    .scroll-view .verse-card {
        margin-bottom: 15px;
        padding: 15px;
    }

    .scroll-view .verse-content {
        font-size: 0.9rem;
    }
}

/* ===== Card View Mobile Fixes ===== */
@media (max-width: 768px) {
    .cards-container {
        padding: 10px;
    }

    .cards-container.grid-layout {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .verse-card {
        padding: 15px !important;
    }

    .card-header {
        font-size: 0.9rem;
    }

    .card-content {
        font-size: 0.85rem;
    }
}

/* ===== Footer Mobile Fixes ===== */
@media (max-width: 768px) {
    .site-footer {
        padding: 20px 10px;
    }

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

    .footer-section {
        padding: 10px;
    }

    .footer-section h3,
    .footer-section h4 {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }

    .footer-section p,
    .footer-section li {
        font-size: 0.9rem;
    }

    .social-links {
        justify-content: center;
    }
}

/* ===== Modal and Popover Mobile Fixes ===== */
@media (max-width: 768px) {
    .modal-content {
        width: 95% !important;
        margin: 10px !important;
        max-height: 90vh !important;
        overflow-y: auto;
        border-radius: 16px !important;
    }

    /* Settings Panel - Full Screen Overlay */
    .settings-panel {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important; /* Hidden by default */
        width: 100% !important;
        height: 100vh !important;
        max-width: none !important;
        z-index: 9999 !important;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        background: var(--background-primary) !important;
        border-left: none !important;
        overflow: hidden !important;
    }

    body.theme-dark .settings-panel {
        background: #1a1a1a !important;
    }

    body.theme-sepia .settings-panel {
        background: #f4f1e8 !important;
    }

    .settings-panel.open {
        right: 0 !important; /* Slide in when open */
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.4) !important;
    }

    /* Settings Header - Enhanced */
    .settings-panel .settings-header {
        padding: 20px !important;
        border-bottom: 2px solid var(--border-color) !important;
        background: var(--background-secondary) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    body.theme-dark .settings-panel .settings-header {
        background: #2d2d2d !important;
        border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    }

    .settings-panel .settings-header h3 {
        margin: 0 !important;
        font-size: 1.4rem !important;
        color: var(--text-primary) !important;
        font-weight: 600 !important;
    }

    /* Close button - Enhanced touch target */
    .settings-panel .close-settings {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        z-index: 10 !important;
        background: var(--primary-color) !important;
        color: white !important;
        border: none !important;
        padding: 12px !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        width: 48px !important;
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
        transition: all 0.3s ease !important;
    }

    .settings-panel .close-settings:active {
        transform: scale(0.95) !important;
        background: var(--deep-saffron) !important;
    }

    .settings-panel .close-settings .material-icons {
        font-size: 24px !important;
    }

    /* Settings Content - Scrollable with better spacing */
    .settings-panel .settings-content {
        padding: 24px 20px !important;
        height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .settings-panel .setting-group {
        margin-bottom: 32px !important;
        background: var(--background-secondary) !important;
        padding: 20px !important;
        border-radius: 12px !important;
        border: 1px solid var(--border-color) !important;
    }

    body.theme-dark .settings-panel .setting-group {
        background: #2d2d2d !important;
    }

    .settings-panel .setting-group label {
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        margin-bottom: 16px !important;
        color: var(--text-primary) !important;
        display: block !important;
    }

    /* Theme buttons - larger touch targets */
    .settings-panel .theme-btn {
        padding: 14px 18px !important;
        font-size: 1rem !important;
        border-radius: 10px !important;
        font-weight: 500 !important;
        min-height: 48px !important;
    }

    /* Font buttons - larger touch targets */
    .settings-panel .font-btn {
        width: 52px !important;
        height: 52px !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
    }

    /* Language select - better touch */
    .settings-panel .language-select {
        padding: 14px 16px !important;
        font-size: 1rem !important;
        border-radius: 10px !important;
        min-height: 48px !important;
    }

    /* Scroll speed slider */
    .settings-panel .speed-slider {
        height: 8px !important;
        border-radius: 4px !important;
    }

    .settings-panel .speed-value {
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: var(--primary-color) !important;
        display: block !important;
        margin-top: 12px !important;
        text-align: center !important;
    }

    /* Toast notifications - mobile optimized */
    .toast-container {
        bottom: 80px !important;
        right: 16px !important;
        left: 16px !important;
        z-index: 10000 !important;
    }

    .toast {
        width: 100% !important;
        margin-bottom: 12px !important;
        padding: 16px !important;
        border-radius: 12px !important;
        font-size: 0.95rem !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
    }
}

/* ===== Form and Input Mobile Fixes ===== */
@media (max-width: 768px) {
    input, textarea, select {
        font-size: 16px !important; /* Prevent zoom on iOS */
        padding: 10px !important;
        width: 100% !important;
    }

    .search-input {
        width: 100% !important;
        font-size: 16px !important;
    }

    button, .btn {
        padding: 10px 20px !important;
        font-size: 0.95rem !important;
        min-height: 44px; /* iOS touch target */
    }
}

/* ===== Touch and Gesture Optimizations ===== */
@media (pointer: coarse) {
    /* Larger touch targets for mobile */
    a, button, .btn, .clickable {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Better spacing for touch */
    .nav-right > * {
        margin: 0 5px;
    }

    /* Disable hover effects on touch devices */
    @media (hover: none) {
        a:hover, button:hover {
            color: inherit;
            background-color: inherit;
        }
    }

    /* Fix settings button on mobile */
    #settingsBtn {
        padding: 8px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        touch-action: manipulation;
    }
}

/* ===== Performance Optimizations ===== */
@media (max-width: 768px) {
    /* Keep animations smooth but reduce only problematic ones */
    .om-symbol,
    .loading-progress,
    .mandala-layer,
    .central-om {
        animation-duration: 2s !important;
    }

    /* Disable complex shadows on mobile */
    .card, .verse-card, .chapter-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    }

    /* Optimize backdrop filters */
    .backdrop-blur {
        backdrop-filter: blur(5px) !important;
        background-color: rgba(255, 255, 255, 0.98) !important;
    }

    /* Keep normal transitions for smooth UX */
    button, .btn, a, input, select, textarea {
        transition: all 0.3s ease !important;
    }
}

/* ===== iOS Specific Fixes ===== */
@supports (-webkit-touch-callout: none) {
    /* iOS Only */
    .book-container {
        -webkit-overflow-scrolling: touch;
    }

    input, textarea {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
}

/* ===== Android Specific Fixes ===== */
@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
    /* High DPI Android devices */
    body {
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }
}

/* ===== Landscape Mode Adjustments ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .book {
        height: calc(100vh - 60px) !important;
    }

    .main-header {
        padding: 5px 10px;
    }

    .navbar {
        padding: 5px 10px;
    }
}

/* ===== Critical Mobile Utilities ===== */
@media (max-width: 768px) {
    /* Hide desktop-only elements */
    .desktop-only {
        display: none !important;
    }

    /* Show mobile-only elements */
    .mobile-only {
        display: block !important;
    }

    /* Prevent horizontal scroll */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        position: relative !important;
    }

    /* Main content padding adjustment */
    .main-content {
        padding-top: 76px !important; /* Account for fixed header */
        min-height: calc(100vh - 76px) !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Back to top button - mobile optimized */
    .back-to-top {
        bottom: 24px !important;
        right: 20px !important;
        width: 56px !important;
        height: 56px !important;
        box-shadow: 0 4px 16px rgba(255, 107, 53, 0.4) !important;
    }

    .back-to-top .material-icons {
        font-size: 28px !important;
    }
}

/* ===== Additional Mobile Enhancements ===== */
@media (max-width: 768px) {
    /* Hero section mobile optimizations */
    .hero-section {
        min-height: auto !important;
        padding: 60px 16px 40px !important;
    }

    .hero-content {
        gap: 32px !important;
    }

    .hero-title {
        margin-bottom: 24px !important;
    }

    .sanskrit-title {
        font-size: clamp(2rem, 8vw, 3rem) !important;
        line-height: 1.3 !important;
    }

    .english-title {
        font-size: clamp(1.4rem, 6vw, 2rem) !important;
    }

    .hero-subtitle {
        font-size: 1.05rem !important;
        line-height: 1.7 !important;
    }

    /* Feature cards mobile */
    .feature-card {
        padding: 24px !important;
        margin-bottom: 16px !important;
    }

    .feature-icon {
        width: 70px !important;
        height: 70px !important;
        margin-bottom: 20px !important;
    }

    .feature-icon .material-icons {
        font-size: 2rem !important;
    }

    /* Chapter preview mobile */
    .chapter-preview {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }

    .chapter-preview .chapter-number {
        width: 56px !important;
        height: 56px !important;
        font-size: 1.4rem !important;
    }

    .chapter-content h3 {
        font-size: 1.1rem !important;
        margin-bottom: 8px !important;
    }

    .chapter-hindi {
        font-size: 0.95rem !important;
    }

    /* Verse cards mobile */
    .verse-card {
        padding: 20px !important;
        margin-bottom: 16px !important;
        border-radius: 16px !important;
    }

    .verse-header {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .verse-actions {
        gap: 8px !important;
    }

    .action-btn {
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 8px !important;
    }

    /* Footer mobile */
    .site-footer {
        padding: 40px 16px 24px !important;
        margin-top: 60px !important;
    }

    .footer-section h3 {
        font-size: 1.4rem !important;
    }

    .footer-section h4 {
        font-size: 1.1rem !important;
    }

    .footer-section p,
    .footer-section li {
        font-size: 0.9rem !important;
        line-height: 1.7 !important;
    }

    /* Search results mobile */
    .search-results {
        max-height: 70vh !important;
        margin-top: 8px !important;
    }

    .search-result-item {
        padding: 16px !important;
    }

    .result-content {
        margin-bottom: 12px !important;
    }

    .sanskrit-text {
        font-size: 1rem !important;
        margin-bottom: 12px !important;
    }

    .english-text {
        font-size: 0.9rem !important;
    }

    /* Buttons mobile */
    .btn {
        padding: 12px 20px !important;
        font-size: 0.95rem !important;
        border-radius: 12px !important;
        min-height: 48px !important;
    }

    .btn-large {
        padding: 16px 28px !important;
        font-size: 1.05rem !important;
        min-height: 52px !important;
    }

    /* Mandala animation - slower on mobile */
    .mandala-layer {
        animation-duration: 30s !important;
    }

    .central-om {
        font-size: 3.5rem !important;
        animation-duration: 5s !important;
    }

    /* Smooth scroll behavior */
    html {
        scroll-behavior: smooth !important;
    }

    /* Better tap highlighting */
    * {
        -webkit-tap-highlight-color: rgba(255, 107, 53, 0.2) !important;
    }

    /* Fix iOS Safari bottom bar */
    @supports (-webkit-touch-callout: none) {
        .main-content {
            min-height: -webkit-fill-available !important;
        }

        body {
            min-height: -webkit-fill-available !important;
        }
    }
}

/* ===== Extra Small Screens (< 480px) ===== */
@media (max-width: 480px) {
    /* Further optimize for small screens */
    .main-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .hero-section {
        padding: 50px 12px 32px !important;
    }

    .sanskrit-title {
        font-size: clamp(1.75rem, 10vw, 2.5rem) !important;
    }

    .english-title {
        font-size: clamp(1.2rem, 7vw, 1.75rem) !important;
    }

    .hero-stats {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .stat-number {
        font-size: 2rem !important;
    }

    .feature-card,
    .chapter-preview,
    .verse-card {
        padding: 16px !important;
    }

    .navbar {
        padding: 10px 12px !important;
    }

    .logo {
        font-size: 1.1rem !important;
    }

    .logo-symbol {
        font-size: 1.4rem !important;
    }

    .view-btn {
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 6px !important;
    }

    .settings-btn,
    .user-btn,
    .auth-btn {
        width: 40px !important;
        height: 40px !important;
    }

    .back-to-top {
        width: 50px !important;
        height: 50px !important;
        bottom: 20px !important;
        right: 16px !important;
    }
}