/* ============================================
   HOOR APP - RESPONSIVE STYLES
   ============================================ */

/* Tablet & Desktop */
@media (min-width: 768px) {
    #app {
        max-width: 480px;
    }
    
    .hero-card {
        flex: 0 0 320px;
        height: 200px;
    }
    
    .category-item, .extra-category-item {
        padding: 16px 20px;
    }
    
    .category-icon, .extra-category-icon {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }
}

/* Small Phones */
@media (max-width: 360px) {
    .app-title {
        font-size: 18px;
        letter-spacing: 2px;
    }
    
    .hero-card {
        flex: 0 0 220px;
        height: 150px;
    }
    
    .tab-btn {
        font-size: 13px;
        padding: 10px 6px;
    }
    
    .category-name, .extra-category-name {
        font-size: 15px;
    }
    
    .nav-label {
        font-size: 10px;
    }
    
    .bottom-nav {
        padding: 8px 0 20px;
    }
}

/* Landscape Mode */
@media (max-height: 500px) and (orientation: landscape) {
    .app-header {
        padding: 10px 16px;
    }
    
    .hero-card {
        flex: 0 0 200px;
        height: 140px;
    }
    
    .bottom-nav {
        padding: 6px 0 12px;
    }
    
    .nav-label {
        display: none;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --off-white: #1a1a1a;
        --white: #242424;
        --cream: #2a2a2a;
        --light-gray: #333333;
        --text-primary: #f0ece6;
        --text-secondary: #a09a92;
        --dark-gray: #b0aaa2;
    }
    
    .category-item, .extra-category-item {
        background: #2a2a2a;
    }
    
    .bottom-nav {
        background: #242424;
        border-top-color: #333;
    }
    
    .side-nav-content {
        background: #242424;
    }
    
    .nav-user-section {
        background: #2a2a2a;
    }
    
    .modal-content {
        background: #242424;
    }
    
    .btn-secondary {
        background: #2a2a2a;
        border-color: #444;
    }
    
    .loading-overlay {
        background: #1a1a1a;
    }
}