/* Mobile First Responsive Design for Oozy Restaurant */

/* Base Mobile Styles (320px - 767px) */
/* All base mobile styles are already in main.css */

/* Tablet Styles (768px - 1024px) */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
        padding: var(--container-padding-tablet);
    }
    
    .header {
        height: var(--header-height-desktop);
    }
    
    .header-content {
        height: var(--header-height-desktop);
    }
    
    .logo {
        width: 50px;
        height: 50px;
    }
    
    .logo-text {
        font-size: 1.6rem;
    }
    
    .nav-menu {
        display: flex;
        gap: 32px;
        align-items: center;
    }
    
    .mobile-menu-btn {
        display: none;
    }
    
    .hero {
        margin-top: var(--header-height-desktop);
        min-height: 70vh;
        background-attachment: fixed;
    }
    
    .hero-content {
        max-width: 600px;
    }
    
    .hero-buttons {
        flex-direction: row;
        gap: 24px;
    }
    
    .about-section,
    .menu-preview {
        padding: var(--section-padding-tablet);
    }
    
    .section-header {
        margin-bottom: 50px;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        margin-top: 50px;
    }
    
    .menu-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    .menu-card-image {
        height: 200px;
    }
    
    /* Footer for tablet */
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
    
    .footer {
        padding: var(--section-padding-tablet);
    }
    
    /* Cart Page for tablet - Updated for new design */
    .cart-layout {
        display: flex;
        gap: 2rem;
        align-items: flex-start;
    }
    
    .cart-items {
        flex: 1;
    }
    
    .cart-summary {
        min-width: 300px;
        position: sticky;
        top: 120px;
    }

    /* Main Sections Tablet Responsive */
    .main-sections-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        padding: 30px 20px;
    }
    
    .section-card-image {
        height: 180px;
    }
    
    .section-card-content {
        padding: 22px;
    }

    .section-card-title {
        color: white;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }
    
    .section-card-description {
        color: rgba(255,255,255,0.9);
        text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }

    .section-card-button {
        background: rgba(255,255,255,0.2);
        color: white;
        border: 2px solid rgba(255,255,255,0.3);
        backdrop-filter: blur(10px);
        text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }

    .section-card-button:hover {
        background: rgba(255,255,255,0.3);
        border-color: rgba(255,255,255,0.5);
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
}

/* Desktop Styles (1025px and up) */
@media (min-width: 1025px) {
    .container {
        max-width: 1200px;
        padding: var(--container-padding-desktop);
    }
    
    .nav-menu {
        gap: 40px;
    }
    
    .hero-content {
        max-width: 800px;
    }
    
    .about-section,
    .menu-preview {
        padding: var(--section-padding-desktop);
    }
    
    .section-header {
        margin-bottom: 60px;
    }
    
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
        margin-top: 60px;
    }
    
    .feature-card {
        padding: 40px 30px;
    }
    
    .feature-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 25px;
    }
    
    .feature-icon svg {
        width: 35px;
        height: 35px;
    }
    
    .menu-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
    
    .menu-card-image {
        height: 220px;
    }
    
    /* Footer for desktop */
    .footer-content {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }
    
    .footer {
        padding: var(--section-padding-desktop);
    }

    /* Main Sections Desktop Responsive */
    .main-sections-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        padding: 40px 20px;
    }
    
    .section-card-image {
        height: 200px;
    }
    
    .section-card-content {
        padding: 25px;
    }

    .section-card-title {
        color: white;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }
    
    .section-card-description {
        color: rgba(255,255,255,0.9);
        text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }

    .section-card-button {
        background: rgba(255,255,255,0.2);
        color: white;
        border: 2px solid rgba(255,255,255,0.3);
        backdrop-filter: blur(10px);
        text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }

    .section-card-button:hover {
        background: rgba(255,255,255,0.3);
        border-color: rgba(255,255,255,0.5);
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
}

/* Large Desktop Styles (1400px and up) */
@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }
    
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .menu-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Mobile Styles (max-width: 767px) - Consolidated */
@media (max-width: 767px) {
    /* Navigation */
    .nav-menu {
        position: fixed;
        top: var(--header-height-mobile);
        left: 0;
        right: 0;
        background: var(--overlay-dark);
        backdrop-filter: blur(10px);
        padding: 20px;
        z-index: 999;
        transform: translateY(-100%);
        opacity: 0;
        transition: all 0.3s ease;
        flex-direction: column;
        gap: 16px;
    }
    .nav-menu.active {
        display: flex;
        transform: translateY(0);
        opacity: 1;
    }
    .mobile-nav-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .mobile-nav-overlay.active {
        display: block;
        opacity: 1;
    }
    
    .mobile-menu-btn.active {
        color: var(--accent-gold);
    }
    
    /* Menu Page */
    .menu-page {
        padding: 100px 0 60px 0;
    }
    
    .menu-header-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    
    .menu-images-sidebar {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding: 15px;
        text-align: center;
    }
    
    .menu-images-sidebar .menu-images-sidebar {
        gap: 10px;
        margin-bottom: 15px;
    }
    
    .menu-page-image {
        width: 100%;
        height: auto;
    }
    
    .section-header {
        padding: 20px 10px;
    }

    /* Menu Cards - Updated for better mobile experience */
    .menu-grid,
    .dishes-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .category-tabs {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        margin: 30px auto;
    }
    
    .category-tab {
        padding: 10px 15px;
        font-size: 14px;
    }

    /* التأكد من ظهور النص والأيقونة في التبويبات */
    .category-tab span {
        display: inline !important;
        visibility: visible !important;
    }
    
    /* Cart Page Mobile - New Design */
    .cart-layout {
        flex-direction: column;
        gap: 24px;
    }
    
    .cart-summary {
        position: static;
        order: -1;
        min-width: auto;
        width: 100%;
        top: auto;
    }

    /* Main Sections Mobile Responsive */
    .main-sections-container {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 15px;
    }
    
    .section-card {
        margin: 0 auto;
        max-width: 100%;
        width: 100%;
    }
    
    .section-card-image {
        height: 160px;
    }
    
    .section-card-content {
        padding: 20px 15px;
    }
    
    .section-card-title {
        font-size: 20px;
        margin-bottom: 8px;
        color: white;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }
    
    .section-card-description {
        font-size: 14px;
        margin-bottom: 15px;
        line-height: 1.5;
        color: rgba(255,255,255,0.9);
        text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }
    
    .section-card-button {
        padding: 10px 25px;
        font-size: 14px;
        background: rgba(255,255,255,0.2);
        color: white;
        border: 2px solid rgba(255,255,255,0.3);
        backdrop-filter: blur(10px);
        text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }

    .section-card-button:hover {
        background: rgba(255,255,255,0.3);
        border-color: rgba(255,255,255,0.5);
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }

    /* Menu page header improvements for mobile */
    .menu-page {
        padding: 90px 0 60px 0;
    }
    
    .menu-header-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
        margin-bottom: 30px;
    }
    
    .section-header {
        padding: 15px 10px;
    }
    
    .section-header .section-title {
        font-size: 1.5rem;
        margin-bottom: 5px;
    }
    
    .section-header .section-subtitle {
        font-size: 0.9rem;
        opacity: 0.8;
    }
}

/* Large Desktop Cart Styles */
@media (min-width: 1024px) {
    .cart-layout {
        gap: 3rem;
    }
    
    .cart-summary {
        min-width: 350px;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .btn {
        min-height: 48px;
        padding: 16px 32px;
    }
    
    .nav-link {
        min-height: 44px;
        padding: 16px;
    }
    
    .mobile-menu-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 12px;
    }
    
    .feature-card:hover,
    .menu-card:hover {
        transform: none;
    }
    
    .cart-item-quantity .quantity-btn,
    .remove-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Print Styles */
@media print {
    .header,
    .mobile-menu-btn,
    .btn {
        display: none;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .hero {
        background: none !important;
        color: black !important;
        margin-top: 0;
    }
}