/* ===== Menu Grid Layout (New) ===== */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 1rem 0;
    width: 100%;
}

@media (max-width: 576px) {
    .menu-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        /* Tighter gap on small mobile */
    }
}

/* Visibility Management */
.menu-category-nav {
    display: grid;
    /* Maintain existing grid */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.menu-category-nav.hidden {
    display: none;
    opacity: 0;
    pointer-events: none;
}

.menu-category {
    display: none;
    /* Hidden by default */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.menu-category.active-category {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Back Button Styles */
.back-to-categories {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    color: var(--gold);
    font-family: var(--font-heading);
    font-size: 1.1rem;
    cursor: pointer;
    margin-bottom: 1.5rem;
    padding: 0.5rem 0;
    transition: transform 0.3s ease;
}

.back-to-categories:hover {
    transform: translateX(-5px);
    /* Move left for RTL */
}

/* Menu Item Card Optimizations for Grid */
.menu-item {
    display: flex;
    flex-direction: column;
    width: 100% !important;
    /* Force full width in grid cell */
    min-width: 0;
    /* Prevent flex overflow */
    margin: 0 !important;
    /* Remove carousel margins */
}

/* Wrapper for dynamic items (from JS) */
.item-image-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Common Image Styles */
.item-image,
.item-image-wrapper img,
.item-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Key fix for cropping */
    transition: transform 0.5s ease;
    background-color: transparent;
}

/* Static items container */
div.item-image {
    height: auto;
    aspect-ratio: 4/3;
    overflow: hidden;
}

/* Ensure direct images (if class misused) also contain */
img.item-image {
    object-fit: contain;
    height: 100%;
}

.item-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.item-description {
    margin-top: auto;
    /* Push description to bottom if space allows, or just good spacing */
}

/* ==========================================================================
   Scoped Revert: Restore Old Card/Image Style for Food Categories
   Target: Cold/Hot Appetizers, Soups, Konak Signature, Grills, Shawarma, 
           Pasta, Burgers, Tajines, Pastries, Salads, Desserts, Add-ons.
   Behavior: Images should fully fill the card (cover) instead of contain.
   ========================================================================== */
#cold_appetizers .item-image img,
#cold_appetizers .item-img,
#cold_appetizers .item-image,
#hot_appetizers .item-image img,
#hot_appetizers .item-img,
#hot_appetizers .item-image,
#soups .item-image img,
#soups .item-img,
#soups .item-image,
#konak_signature .item-image img,
#konak_signature .item-img,
#konak_signature .item-image,
#grills .item-image img,
#grills .item-img,
#grills .item-image,
#shawarma .item-image img,
#shawarma .item-img,
#shawarma .item-image,
#pasta .item-image img,
#pasta .item-img,
#pasta .item-image,
#burgers .item-image img,
#burgers .item-img,
#burgers .item-image,
#tajines .item-image img,
#tajines .item-img,
#tajines .item-image,
#pastries .item-image img,
#pastries .item-img,
#pastries .item-image,
#salads .item-image img,
#salads .item-img,
#salads .item-image,
#desserts .item-image img,
#desserts .item-img,
#desserts .item-image,
#add_ons .item-image img,
#add_ons .item-img,
#add_ons .item-image {
    object-fit: cover !important;
}

/* ==========================================================================
   Scoped Revert: Restore Old Styling for MAIN CATEGORY CARDS (Top Menu)
   Target: Food Categories Only (Grills, Shawarma, etc.)
   Behavior: Main navigation images should fill the card (cover).
   Excluded: Drinks (keep as contain).
   ========================================================================== */
.category-nav-card[data-target="konak_signature"] .category-img,
.category-nav-card[data-target="grills"] .category-img,
.category-nav-card[data-target="shawarma"] .category-img,
.category-nav-card[data-target="tajines"] .category-img,
.category-nav-card[data-target="pasta"] .category-img,
.category-nav-card[data-target="pastries"] .category-img,
.category-nav-card[data-target="burgers"] .category-img,
.category-nav-card[data-target="salads"] .category-img,
.category-nav-card[data-target="soups"] .category-img,
.category-nav-card[data-target="hot_appetizers"] .category-img,
.category-nav-card[data-target="cold_appetizers"] .category-img,
.category-nav-card[data-target="desserts"] .category-img,
.category-nav-card[data-target="add_ons"] .category-img {
    object-fit: cover !important;
}

/* ==========================================================================
   Scoped Override: specific aspect ratio for Drink Categories (1:1)
   Target: Fresh Juices, Cocktails, Milkshakes, Ice Tea, Soft Drinks, Hot Drinks, Cold Drinks
   Behavior: Images should be square (1:1) instead of default 4/3.
   ========================================================================== */
#fresh_juices .item-image-wrapper,
#fresh_juices .item-image,
#cocktails .item-image-wrapper,
#cocktails .item-image,
#milkshakes .item-image-wrapper,
#milkshakes .item-image,
#ice_tea .item-image-wrapper,
#ice_tea .item-image,
#soft_drinks .item-image-wrapper,
#soft_drinks .item-image,
#hot_drinks .item-image-wrapper,
#hot_drinks .item-image,
#cold_drinks .item-image-wrapper,
#cold_drinks .item-image,
#konak_signature .item-image-wrapper,
#konak_signature .item-image,
#grills .item-image-wrapper,
#grills .item-image,
#shawarma .item-image-wrapper,
#shawarma .item-image,
#tajines .item-image-wrapper,
#tajines .item-image,
#pasta .item-image-wrapper,
#pasta .item-image,
#pastries .item-image-wrapper,
#pastries .item-image,
#burgers .item-image-wrapper,
#burgers .item-image,
#salads .item-image-wrapper,
#salads .item-image,
#soups .item-image-wrapper,
#soups .item-image,
#hot_appetizers .item-image-wrapper,
#hot_appetizers .item-image,
#cold_appetizers .item-image-wrapper,
#cold_appetizers .item-image,
#desserts .item-image-wrapper,
#desserts .item-image,
#add_ons .item-image-wrapper,
#add_ons .item-image {
    aspect-ratio: 1/1 !important;
}

#fresh_juices .item-image,
#fresh_juices .item-image-wrapper img,
#cocktails .item-image,
#cocktails .item-image-wrapper img,
#milkshakes .item-image,
#milkshakes .item-image-wrapper img,
#ice_tea .item-image,
#ice_tea .item-image-wrapper img,
#soft_drinks .item-image,
#soft_drinks .item-image-wrapper img,
#hot_drinks .item-image,
#hot_drinks .item-image-wrapper img,
#cold_drinks .item-image,
#cold_drinks .item-image-wrapper img,
#konak_signature .item-image,
#konak_signature .item-image-wrapper img,
#grills .item-image,
#grills .item-image-wrapper img,
#shawarma .item-image,
#shawarma .item-image-wrapper img,
#tajines .item-image,
#tajines .item-image-wrapper img,
#pasta .item-image,
#pasta .item-image-wrapper img,
#pastries .item-image,
#pastries .item-image-wrapper img,
#burgers .item-image,
#burgers .item-image-wrapper img,
#salads .item-image,
#salads .item-image-wrapper img,
#soups .item-image,
#soups .item-image-wrapper img,
#hot_appetizers .item-image,
#hot_appetizers .item-image-wrapper img,
#cold_appetizers .item-image,
#cold_appetizers .item-image-wrapper img,
#desserts .item-image,
#desserts .item-image-wrapper img,
#add_ons .item-image,
#add_ons .item-image-wrapper img {
    object-fit: cover !important;
}