/* ===================================================================
   MOBILE-ONLY FIXES - DOES NOT AFFECT DESKTOP DESIGN
   Target: Phones and small tablets (< 1024px)
   =================================================================== */

/* Global Mobile Fixes */
@media (max-width: 1024px) {

    /* ============ NAVBAR FIXES ============ */
    .modern-navbar {
        padding: 0.5rem 0;
    }

    .navbar .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .navbar-logo {
        height: 35px;
        max-width: 120px;
        object-fit: contain;
    }

    /* Fix toggler button - increase size to prevent icon cutoff */
    .navbar-toggler,
    .modern-toggler {
        padding: 0.6rem;
        margin-right: 0;
        background: transparent;
        border: 2px solid #f39c12;
        border-radius: 8px;
        width: 48px;
        height: 48px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
    }

    /* Ensure toggler icons are visible and properly sized */
    .toggler-icon {
        width: 20px;
        height: 2.5px;
        background: #f39c12;
        border-radius: 2px;
        transition: all 0.3s ease;
        display: block;
        opacity: 1;
        transform: none;
    }

    /* Default state - hamburger menu (collapsed) */
    .modern-toggler.collapsed .toggler-icon:nth-child(1),
    .modern-toggler.collapsed .toggler-icon:nth-child(2),
    .modern-toggler.collapsed .toggler-icon:nth-child(3) {
        transform: none;
        opacity: 1;
    }

    /* Open state - X icon (when NOT collapsed) */
    .modern-toggler:not(.collapsed) .toggler-icon:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .modern-toggler:not(.collapsed) .toggler-icon:nth-child(2) {
        opacity: 0;
    }

    .modern-toggler:not(.collapsed) .toggler-icon:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

    .navbar-collapse {
        margin-top: 1rem;
    }

    /* CRITICAL: Hide navbar actions container on mobile AND tablet */
    .navbar-actions {
        display: none !important;
    }

        /* CRITICAL: Force cart button to display as floating button */
        button.cart-btn-modern,
        .navbar-actions .cart-btn-modern,
        button#cartBtn,
        #cartBtn,
        .cart-btn-modern,
        .navbar-actions button.cart-btn-modern {
            display: flex !important;
            visibility: visible !important;
            position: fixed !important;
            bottom: 20px !important;
            right: 20px !important;
            width: 60px !important;
            height: 60px !important;
            min-width: 60px !important;
            border-radius: 50% !important;
            z-index: 1050 !important;
            box-shadow: 0 4px 20px rgba(243, 156, 18, 0.5) !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 1.4rem !important;
            animation: cartPulse 2s ease-in-out infinite !important;
            background: linear-gradient(135deg, #f39c12, #d87f0f) !important;
            color: white !important;
            border: 3px solid rgba(255, 255, 255, 0.3) !important;
            padding: 0 !important;
            margin: 0 !important;
            cursor: pointer !important;
            opacity: 1 !important;
        }

    /* Ensure floating cart button is visible on mobile/tablet even if parent is hidden */
    #cartBtn,
    button#cartBtn,
    .cart-btn-modern {
        display: flex !important;
        visibility: visible !important;
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        width: 60px !important;
        height: 60px !important;
        border-radius: 50% !important;
        z-index: 20050 !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, #f39c12, #d87f0f) !important;
        color: #fff !important;
        box-shadow: 06px 24px rgba(0, 0, 0, 0.2) !important;
        border: 3px solid rgba(255, 255, 255, 0.3) !important;
    }

        /* badge */
        #cartBtn .cart-badge,
        .cart-btn-modern .cart-badge,
        #cartCount {
            position: absolute !important;
            top: -6px !important;
            right: -6px !important;
            width: 26px !important;
            height: 26px !important;
            background: #ff6b6b !important;
            color: #fff !important;
            border-radius: 50% !important;
            border: 3px solid #fff !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        .cart-btn-modern:hover,
        button.cart-btn-modern:hover,
        #cartBtn:hover {
            transform: scale(1.15) !important;
            box-shadow: 0 6px 24px rgba(243, 156, 18, 0.6) !important;
            background: linear-gradient(135deg, #d87f0f, #c67310) !important;
        }

        /* Cart badge positioning for floating button */
        .cart-btn-modern .cart-badge,
        .cart-btn-modern #cartCount,
        #cartBtn .cart-badge,
        #cartBtn #cartCount,
        button.cart-btn-modern .cart-badge,
        button#cartBtn #cartCount,
        #cartCount {
            position: absolute !important;
            top: -6px !important;
            right: -6px !important;
            width: 26px !important;
            height: 26px !important;
            font-size: 0.8rem !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: #ff6b6b !important;
            color: white !important;
            border-radius: 50% !important;
            border: 3px solid white !important;
            font-weight: 900 !important;
            box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4) !important;
        }

    /* Add subtle pulse animation */
    @keyframes cartPulse {
        0%, 100% {
            box-shadow: 0 4px 20px rgba(243, 156, 18, 0.5);
        }

        50% {
            box-shadow: 0 6px 28px rgba(243, 156, 18, 0.7);
        }
    }

    /* Ensure floating cart doesn't overlap with cookie banner */
    body:has(.cookie-consent-banner) .cart-btn-modern,
    body:has(.cookie-consent-banner) #cartBtn,
    body:has(.cookie-consent-banner) button.cart-btn-modern {
        bottom: 70px !important;
    }

    /* Adjust for when cart drawer is open */
    body.cart-drawer-open .cart-btn-modern,
    body.cart-drawer-open #cartBtn,
    body.cart-drawer-open button.cart-btn-modern,
    .cart-drawer.open ~ .cart-btn-modern {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: scale(0.8) !important;
    }

    .user-dropdown .dropdown-toggle {
        width: 100%;
        justify-content: flex-start;
        margin-bottom: 0.5rem;
    }

        .user-dropdown .dropdown-toggle span {
            font-size: 0.9rem;
        }

    .modern-dropdown {
        width: calc(100vw - 2rem) !important;
        left: 1rem !important;
        right: 1rem !important;
        max-width: none;
    }

    /* ============ HERO SECTION FIXES (MOBILE & TABLET) ============ */

    /* Reduce hero visual height for mobile/tablet */
    .hero-visual-new {
        height: 350px;
        margin-top: 2rem;
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    /* Make all food cards smaller and responsive */
    .food-card {
        border-radius: 16px;
        overflow: hidden;
    }

        .food-card.card-main {
            width: 200px !important;
            height: 260px !important;
            right: 10px;
            top: 10px;
        }

        .food-card.card-secondary {
            width: 150px !important;
            height: 170px !important;
            bottom: 10px;
            left: 10px;
        }

        .food-card.card-tertiary {
            width: 110px !important;
            height: 130px !important;
            bottom: 90px;
            right: 40px;
        }

        /* Make images fully responsive */
        .food-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

    /* Adjust card badges for mobile/tablet */
    .card-badge {
        padding: 0.35rem 0.65rem;
        font-size: 0.7rem;
        top: 0.5rem;
        right: 0.5rem;
    }

    .floating-info {
        padding: 0.6rem 0.8rem;
        font-size: 0.8rem;
        border-radius: 12px;
    }

    .badge-delivery {
        left: 15px;
        top: 50px;
    }

    .badge-quality {
        right: 15px;
        bottom: 200px;
    }

    .info-icon {
        font-size: 1.4rem;
    }

    .info-label {
        font-size: 0.7rem;
    }

    .info-value {
        font-size: 0.95rem;
    }

    /* ============ SEARCH BOX FIXES (MOBILE & TABLET) ============ */
    /* Make search box vertical layout like mobile for tablets too */
    .search-box-modern {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
        gap: 0.75rem;
        position: relative;
        width: 100% !important; /* Force full width */
        max-width: 100% !important; /* Remove any max-width constraints */
    }

        .search-box-modern input {
            padding: 0.9rem 1rem;
            font-size: 1rem;
            width: 100%;
            order: 1;
        }

        /* Remove absolute positioning for search icon */
        .search-box-modern i:first-of-type {
            position: static;
            left: auto;
            top: auto;
            margin: 0;
            display: none; /* Hide the decorative icon */
        }

    /* Keep "Use Location" button visible but positioned properly */
    #use-location {
        position: static;
        right: auto;
        top: auto;
        padding: 0.75rem 1rem;
        margin: 0;
        order: 2;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        background: rgba(243,156,18,0.1);
        color: var(--primary-color);
        border-radius: 8px;
    }

        #use-location::before {
            content: '\f3c5'; /* Font Awesome location icon */
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
        }

        #use-location:hover {
            background: rgba(243,156,18,0.2);
        }

    /* Search button should come last */
    .search-box-modern button {
        padding: 0.9rem 1.5rem;
        width: 100%;
        margin-top: 0;
        order: 3;
    }

    .quick-links {
        flex-wrap: wrap;
        gap: 0.5rem;
        width: 100%; /* Full width for quick links container */
    }

        .quick-links span {
            width: 100%; /* Label takes full width */
        }

        .quick-links button,
        .quick-tag {
            flex: 1 1 auto; /* Buttons expand to fill space */
            min-width: calc(50% - 0.25rem); /* 2 buttons per row on small screens */
        }

    /* ============ REGISTRATION FORM FIXES (MOBILE & TABLET) ============ */
    /* Make registration form fields full width on mobile/tablet */
    /* Using multiple selectors for higher specificity */
    .modern-auth-container .modern-auth-card-wide .modern-form-row,
    .modern-auth-card-wide .modern-form-row {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
        display: grid !important;
    }

        .modern-auth-container .modern-auth-card-wide .modern-form-group,
        .modern-auth-card-wide .modern-form-group,
        .modern-auth-card-wide .modern-form-row .modern-form-group {
            width: 100% !important;
            max-width: 100% !important;
            flex: 1 1 100% !important;
            grid-column: 1 / -1 !important;
        }

            /* Force input wrappers to full width */
            .modern-auth-container .modern-auth-card-wide .modern-input-wrapper,
            .modern-auth-card-wide .modern-input-wrapper,
            .modern-auth-card-wide .modern-form-group .modern-input-wrapper {
                width: 100% !important;
                max-width: 100% !important;
                display: block !important;
            }

                /* Force all inputs to full width */
                .modern-auth-container .modern-auth-card-wide .modern-input,
                .modern-auth-card-wide .modern-input,
                .modern-auth-card-wide .modern-form-group .modern-input,
                .modern-auth-card-wide .modern-input-wrapper .modern-input {
                    width: 100% !important;
                    max-width: 100% !important;
                    box-sizing: border-box !important;
                }

    /* Ensure password toggle buttons don't break layout */
    .modern-auth-card-wide .modern-password-toggle {
        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
    }

    /* Fix for input wrapper positioning */
    .modern-auth-card-wide .modern-form-group .modern-input-wrapper {
        position: relative !important;
    }

    /* Override any flex properties that might cause issues */
    .modern-auth-card-wide .modern-auth-form {
        width: 100% !important;
    }

    /* Force specific registration inputs to full width as a fallback */
    #FirstName, #LastName, #Password, #ConfirmPassword {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* Ensure their immediate wrappers don't constrain width */
    .modern-form-row > .modern-form-group,
    .modern-auth-card-wide .modern-form-row > .modern-form-group {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        grid-column: 1 / -1 !important;
    }

    /* Ensure input wrappers are positioned and full width */
    .modern-form-group .modern-input-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        position: relative !important;
    }

    /* If any flex container forces side-by-side, override to column */
    .modern-form-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* ============ MENU PAGE FIXES (MOBILE & TABLET) ============ */
    .menu-content-layout {
        grid-template-columns: 1fr !important;
    }

    .menu-sidebar {
        position: static !important;
        max-height: none !important;
    }

    .menu-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    .menu-item-card-modern {
        max-width: 100% !important;
    }

    /* Ensure list view also displays as single column */
    .menu-grid.view-list {
        grid-template-columns: 1fr !important;
    }

        .menu-grid.view-list .menu-item-card-modern {
            flex-direction: column !important;
        }

        .menu-grid.view-list .card-image-wrapper {
            width: 100% !important;
            height: 200px !important;
        }
}

/* ===================================================================
   MOBILE-ONLY FIXES (< 768px)
   Applies ONLY to phones, not tablets
   =================================================================== */

@media (max-width: 767px) {

    /* ============ HOME PAGE HERO FIXES ============ */
    .hero-modern {
        min-height: auto;
        padding: 2rem 1rem;
    }

    .hero-container-new {
        grid-template-columns: 1fr;
        gap: 2rem;
        width: 100%;
        max-width: 100%;
    }

    .search-box-modern {
        /*margin: 0 -1rem;*/
        padding: 1rem;
        border-radius: 12px;
    }

    /* ============ AUTH CARD ADJUSTMENTS (MOBILE ONLY) ============ */
    .modern-auth-container {
        padding: 1rem;
    }

    .modern-auth-card {
        padding: 1.5rem;
    }

    .modern-auth-card-wide {
        padding: 1.5rem;
    }

    /* ============ MENU PAGE MOBILE FIXES ============ */
    .menu-hero-modern {
        padding: 2.5rem 1rem 2rem;
        min-height: 300px;
    }

    .menu-hero-title {
        font-size: 2rem;
    }

    .menu-main-container {
        padding: 1rem;
    }

    .menu-controls-bar {
        padding: 1rem;
        gap: 0.75rem;
    }

    .filter-toggle-btn {
        font-size: 0.9rem;
        padding: 0.6rem 1rem;
    }

    .card-content-modern {
        padding: 1rem;
    }

    .card-title-modern {
        font-size: 1rem;
    }

    .card-description-modern {
        font-size: 0.85rem;
    }

    .card-price-modern {
        font-size: 1.2rem;
    }

    .card-add-btn {
        padding: 0.5rem 0.9rem;
        font-size: 0.85rem;
    }
}