/* Food details: portion size, calories per 100g, allergen chips, expandable "show details" toggle.
   Uses the site's existing --menu-* theme variables (defined in modern-menu.css) so this
   matches each restaurant's own theme instead of a fixed color set. */

.modern-food-details-toggle {
    align-items: center;
    background: transparent;
    border: 1px solid var(--menu-line);
    border-radius: 8px;
    color: var(--menu-gold-dark);
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    gap: 6px;
    margin: 6px 0;
    padding: 6px 10px;
}

.modern-food-details-toggle i {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.modern-food-details-toggle.is-open i {
    transform: rotate(180deg);
}

.modern-food-grid:not(.food-view-list) .modern-food-details-toggle {
    display: none;
}

.modern-food-allergens {
    grid-column: 1 / -1;
}

.allergen-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.allergen-chip {
    align-items: center;
    background: var(--menu-soft);
    border: 1px solid var(--menu-line);
    border-radius: 999px;
    color: var(--menu-ink);
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 6px;
    padding: 4px 10px;
}

.allergen-chip img {
    display: block;
    flex: 0 0 auto;
    height: 16px;
    width: 16px;
}

.modern-food-energy-100g {
    color: var(--menu-muted);
    font-size: 12px;
    font-weight: 700;
    grid-column: 1 / -1;
}

/*
 * Shared base look for the calories/prep-time chips and the ingredients/allergens boxes, used on
 * both the food-list card (food_list.blade.php, unscoped — this file is loaded there directly)
 * and the product-details page (scoped under .product-detail-full-details further below, which
 * only overrides spacing to fit its own layout rather than redefining everything).
 */
.modern-food-info-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Theme setting "allow_show_grid_details": restaurants can hide the ingredients/allergens/
   calories box specifically in grid view mode, while it always stays visible in list view. */
.modern-food-grid:not(.food-view-list) .modern-food-info-stack.hide-grid-details {
    display: none;
}

.modern-food-more-content-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Grid view only: ingredients/allergens collapse behind a "المزيد" (More) toggle placed under
   the food name, while the calories/prep-time chip row (outside .modern-food-more-content) stays
   visible unconditionally. List view keeps showing ingredients/allergens directly, no toggle. */
.modern-food-more-toggle {
    display: none;
}

.modern-food-grid:not(.food-view-list) .modern-food-more-toggle {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--menu-gold-dark);
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    font-size: 12px;
    font-weight: 700;
    gap: 4px;
    margin: 2px 0 4px;
    padding: 0;
}

/* Accent line above the "المزيد" text/icon, in the theme's own accent color. */
.modern-food-grid:not(.food-view-list) .modern-food-more-toggle::before {
    background: var(--menu-gold);
    border-radius: 999px;
    content: '';
    height: 1px;
    width: 44px;
}

.modern-food-grid:not(.food-view-list) .modern-food-more-toggle-inner {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

.modern-food-grid:not(.food-view-list) .modern-food-more-toggle i {
    font-size: 10px;
    transition: transform 0.2s ease;
}

.modern-food-more-toggle.is-open i {
    transform: rotate(180deg);
}

.modern-food-grid:not(.food-view-list) .modern-food-more-toggle.hide-grid-details {
    display: none;
}

/* Reveal is layout-instant (display: none -> flex, so the CSS Grid row/card height updates
   immediately and correctly) with a purely visual fade+slide animation on top, rather than
   transitioning max-height. Animating max-height here fights CSS Grid: this card sits in an
   auto-sized grid row under the default align-items: stretch, and a *transitioning* max-height
   never gets picked up by the grid's row-track sizing, which only measures stable (non-transition)
   states — the row stays frozen at its pre-toggle height and the revealed content stays clipped
   at 0, confirmed by reproducing the exact same freeze in an isolated grid+flex test with a
   transition, and it disappearing the moment the transition was removed. Using an `animation`
   for opacity/transform instead sidesteps this: those are the two properties browsers can animate
   without ever invalidating layout, so they don't confuse the grid's measurement pass at all. */
.modern-food-grid:not(.food-view-list) .modern-food-more-content {
    display: none;
}

.modern-food-grid:not(.food-view-list) .modern-food-more-content.is-open {
    animation: modern-food-more-reveal 0.3s ease;
    display: flex;
    /* Without an explicit column direction this defaults to row, so .modern-food-more-content-inner
       (its only child) never stretched to fill the width - it shrink-wrapped to its own content
       width and packed to one side instead, which is what made the ingredients/allergies boxes
       look narrower than the card even though their own CSS was already width:100% of *this*. */
    flex-direction: column;
}

@keyframes modern-food-more-reveal {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modern-food-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.modern-food-chip {
    align-items: center;
    background: linear-gradient(135deg, var(--menu-soft), var(--menu-surface));
    border: 1px solid var(--menu-line);
    border-radius: 999px;
    color: var(--menu-gold-dark);
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    gap: 8px;
    padding: 7px 14px;
}

.modern-food-chip i {
    font-size: 14px;
}

/* Calories chip: unit label stacked above the number, in a smaller size, instead of both on
   one line — e.g. "سعرة حرارية" (small) above "600" (normal size). */
.modern-food-chip-stacked {
    padding-block: 5px;
}

.modern-food-chip-stack {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.25;
}

.modern-food-chip-unit {
    font-size: .72em;
    font-weight: 700;
    opacity: .85;
}

.modern-food-chip-value {
    font-size: 1em;
    font-weight: 900;
}

.modern-food-box {
    background: var(--menu-soft);
    border: 1px solid var(--menu-line);
    border-radius: 10px;
    padding: 12px 14px;
}

.modern-food-box strong {
    align-items: center;
    color: var(--menu-gold-dark);
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    gap: 7px;
    margin-bottom: 6px;
}

.modern-food-box p {
    color: var(--menu-muted);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.65;
    margin: 0;
}

.modern-food-box-icon {
    color: var(--menu-gold-dark);
    flex: 0 0 auto;
}

i.modern-food-box-icon {
    font-size: 15px;
}

svg.modern-food-box-icon {
    height: 17px;
    width: 17px;
}

/* Grid view only: the ingredients/allergens boxes (behind the "المزيد" toggle) run slightly
   smaller than their list-view/product-details size, since they now share the card with the
   toggle and chip row above them. */
.modern-food-grid:not(.food-view-list) .modern-food-more-content .modern-food-box {
    padding: 9px 11px;
    /* Bleed most of the way past .modern-food-body's own horizontal padding so the box reads as
       close to the full card width, not just the card's padded content area - matters most when
       the box only has the "......" placeholder and would otherwise look like a small, narrow
       chip - but leave a small breathing-room gap (--food-box-edge-gap) rather than going fully
       flush with the card edge. --food-card-pad-x is set on .modern-food-body (modern-menu.css)
       next to each of its own padding declarations, so this stays correct at every breakpoint. */
    --food-box-edge-gap: 6px;
    margin-inline: calc(var(--food-box-edge-gap) - var(--food-card-pad-x, 12px));
}

.modern-food-grid:not(.food-view-list) .modern-food-more-content .modern-food-box strong {
    font-size: 12px;
    gap: 6px;
    margin-bottom: 4px;
}

.modern-food-grid:not(.food-view-list) .modern-food-more-content .modern-food-box p {
    font-size: 12px;
    line-height: 1.5;
}

.modern-food-grid:not(.food-view-list) .modern-food-more-content i.modern-food-box-icon {
    font-size: 13px;
}

.modern-food-grid:not(.food-view-list) .modern-food-more-content svg.modern-food-box-icon {
    height: 15px;
    width: 15px;
}

/* Product-details page: modern info card — nutrition pills + a labeled details grid. */
.product-detail-full-details {
    background: var(--menu-surface);
    border: 1px solid var(--menu-line);
    border-radius: var(--menu-radius, 14px);
    box-shadow: var(--menu-shadow);
    margin: 16px 0;
    overflow: hidden;
    width: 100%;
}

.product-detail-full-details-title {
    align-items: center;
    border-bottom: 1px solid var(--menu-line);
    color: var(--menu-ink);
    display: flex;
    font-size: 15px;
    font-weight: 900;
    gap: 8px;
    margin: 0;
    padding: 14px 18px;
}

.product-detail-full-details-title i {
    color: var(--menu-gold-dark);
    font-size: 14px;
}

.product-detail-full-details .modern-food-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 18px 4px;
}

.product-detail-full-details .modern-food-chip {
    align-items: center;
    background: linear-gradient(135deg, var(--menu-soft), var(--menu-surface));
    border: 1px solid var(--menu-line);
    border-radius: 999px;
    color: var(--menu-gold-dark);
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    gap: 8px;
    min-height: 38px;
    padding: 7px 14px;
}

.product-detail-full-details .modern-food-chip i {
    font-size: 14px;
}

/* Ingredients / allergens: each gets its own standalone rounded card (instead of one shared
   two-column grid) with a small icon next to its label — a bowl for ingredients, a warning
   triangle for allergens. */
.product-detail-full-details .modern-food-box {
    background: var(--menu-soft);
    border: 1px solid var(--menu-line);
    border-radius: 10px;
    margin: 12px 18px 0;
    padding: 12px 14px;
}

.product-detail-full-details .modern-food-box:last-child {
    margin-bottom: 16px;
}

.product-detail-full-details .modern-food-box strong {
    align-items: center;
    color: var(--menu-gold-dark);
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    gap: 7px;
    margin-bottom: 6px;
}

.product-detail-full-details .modern-food-box p {
    color: var(--menu-muted);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.65;
    margin: 0;
}

@media (max-width: 640px) {
    .product-detail-full-details-title {
        font-size: 14px;
        padding: 12px 14px;
    }

    .product-detail-full-details .modern-food-chip-row {
        gap: 8px;
        padding: 14px 14px 2px;
    }

    .product-detail-full-details .modern-food-chip {
        font-size: 12.5px;
        min-height: 34px;
        padding: 6px 11px;
    }

    .product-detail-full-details .modern-food-box {
        margin: 10px 14px 0;
        padding: 10px 12px;
    }

    .product-detail-full-details .modern-food-box:last-child {
        margin-bottom: 14px;
    }
}