/* 
Developer: Mohammed Al-Baqer
 * Website: https://wsl-iq.github.io/teaafi/
 * Copyright (c) 2026 Mohammed Al-Baqer
    * Folder : CSS
    * File   : mobile.css
    * Type: CSS
*/

@media (max-width: 767px) {
    .app-container {
        display: none;
    }
    
    .app-container.visible {
        display: flex;
        flex-direction: column;
    }

    .main-content {
        padding: var(--space-4);
        padding-bottom: calc(80px + var(--safe-bottom));
    }

    .sidebar {
        display: none !important;
    }

    .bottom-nav {
        display: flex;
    }

    .cards-grid {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .card {
        padding: var(--space-4);
        margin-bottom: 0;
    }

    .counter-card {
        padding: var(--space-6) var(--space-4);
    }

    .counter-value {
        font-size: 44px;
    }

    .counter-stats {
        flex-wrap: wrap;
        gap: var(--space-4);
    }

    .welcome-container {
        padding: var(--space-4);
    }

    .gender-selector {
        flex-direction: column;
        gap: var(--space-3);
    }

    .gender-option {
        padding: var(--space-6);
    }

    .section-title {
        font-size: var(--text-lg);
    }

    .subsection {
        padding: var(--space-4);
    }

    .settings-item {
        padding: var(--space-4);
    }

    h1 { font-size: var(--text-2xl); }
    h2 { font-size: var(--text-xl); }
    h3 { font-size: var(--text-lg); }

    .modal-container {
        padding: var(--space-6);
    }

    .spiritual-card {
        padding: var(--space-4);
    }
    
    .toast-container {
        bottom: calc(80px + var(--safe-bottom));
    }
}