/* ============================================
   ALVI - Menu Page v3 - Theme-aware
   Soup strip + Product grid + Tabs
   ============================================ */

/* ── Page ── */
.menu-page { padding-bottom: var(--space-16); }

/* ── Ordering disabled banner ── */
.ordering-disabled-banner {
    text-align: center;
    padding: var(--space-3) var(--space-4);
    margin: var(--space-2) var(--space-4) 0;
    border-radius: var(--radius-lg);
    font-size: var(--text-sm); font-weight: 600;
    color: var(--white);
    background: var(--warning);
}

.menu-page-header {
    text-align: center;
    padding: var(--space-8) var(--space-4) var(--space-4);
}
.menu-page-header h2 {
    font-family: var(--font-display);
    font-size: var(--text-2xl); font-weight: 800;
    color: var(--gray-900); margin: 0 0 var(--space-1);
}

/* ── Hero banner ── */
.menu-hero {
    background: var(--hero-bg); color: var(--hero-text);
    padding: var(--space-10) var(--space-6);
    text-align: center; position: relative; overflow: hidden;
}
.menu-hero::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 50%, rgba(255,255,255,.06) 0%, transparent 60%);
    pointer-events: none;
}
.menu-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 800; margin: 0 0 var(--space-2);
    letter-spacing: -0.02em;
}
.menu-hero p {
    font-size: var(--text-lg); opacity: .8;
    margin: 0; max-width: 500px; margin-inline: auto;
}

/* ── Menu Tabs (Denne / Stale menu) ── */
.menu-tabs {
    display: flex; justify-content: center;
    gap: var(--space-2); padding: var(--space-4) var(--space-4) 0;
}
.menu-tab {
    padding: var(--space-2-5) var(--space-5);
    border-radius: var(--radius-full);
    font-size: var(--text-sm); font-weight: 700;
    border: 2px solid var(--tab-border);
    background: var(--tab-bg); color: var(--tab-text);
    cursor: pointer; transition: all .2s var(--ease);
    text-transform: uppercase; letter-spacing: .04em;
}
.menu-tab:hover {
    background: var(--tab-hover-bg);
    border-color: var(--tab-hover-bg);
    color: var(--tab-hover-text);
}
.menu-tab.active {
    background: var(--tab-active-bg);
    border-color: var(--tab-active-bg);
    color: var(--tab-active-text);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* ── Day Tabs ── */
.day-tabs {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-2);
}
.day-tab {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--text-xs); font-weight: 700;
    border: 1.5px solid var(--daytab-border);
    background: var(--daytab-bg); color: var(--daytab-text);
    cursor: pointer; transition: all .2s var(--ease);
    letter-spacing: .03em; text-transform: uppercase;
}
.day-tab:hover {
    border-color: var(--daytab-active-bg);
    color: var(--daytab-active-bg);
}
.day-tab.active {
    background: var(--daytab-active-bg);
    border-color: var(--daytab-active-bg);
    color: var(--daytab-active-text);
}

/* ── Section titles ── */
.menu-section { margin-bottom: var(--space-6); }
.menu-section-title {
    display: flex; align-items: center; gap: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-xl); font-weight: 800;
    color: var(--section-title-color);
    padding: 0 var(--space-6);
    margin-bottom: var(--space-4);
}
.menu-section-title .section-icon {
    font-size: 24px;
}

/* ============================================
   SOUP SECTION - Visually distinct strip
   ============================================ */
.soup-section {
    background: var(--soup-bg);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
    margin: var(--space-2) var(--space-4) var(--space-6);
    border: 1px solid var(--soup-border);
}
.soup-section .soup-header {
    display: flex; align-items: center; gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.soup-section .soup-title {
    font-family: var(--font-display);
    font-size: var(--text-lg); font-weight: 800;
    color: var(--soup-title);
    display: flex; align-items: center; gap: var(--space-2);
    letter-spacing: -0.01em;
}
.soup-section .soup-title .soup-icon {
    font-size: 22px;
}
.soup-section .soup-subtitle {
    font-size: var(--text-xs); font-weight: 500;
    color: var(--soup-text); opacity: .7;
    margin-left: auto;
    text-transform: uppercase; letter-spacing: .05em;
}

/* Soup items - horizontal compact cards */
.soup-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
}
.soup-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--soup-item-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--soup-item-border);
    transition: all .2s var(--ease);
    gap: var(--space-3);
}
.soup-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.soup-item-info { flex: 1; min-width: 0; }
.soup-item-name {
    font-size: var(--text-sm); font-weight: 700;
    color: var(--soup-item-text);
    margin: 0 0 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.soup-item-desc {
    font-size: var(--text-xs); color: var(--soup-text);
    opacity: .7; margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.soup-item-price {
    font-family: var(--font-display);
    font-size: var(--text-lg); font-weight: 800;
    color: var(--soup-price);
    white-space: nowrap;
    margin-right: var(--space-2);
}
.soup-item-cta {
    padding: var(--space-1-5) var(--space-3);
    border-radius: var(--radius-lg);
    font-size: var(--text-xs); font-weight: 700;
    background: var(--soup-cta-bg); color: var(--soup-cta-text);
    border: none; cursor: pointer;
    transition: all .2s var(--ease);
    white-space: nowrap;
}
.soup-item-cta:hover { opacity: .85; transform: scale(1.03); }

/* ============================================
   MAIN DISHES - Prominent product grid
   ============================================ */
.main-dishes-section {
    padding: 0 var(--space-4);
}
.main-dishes-header {
    display: flex; align-items: center; gap: var(--space-3);
    padding: 0 var(--space-2);
    margin-bottom: var(--space-4);
}
.main-dishes-title {
    font-family: var(--font-display);
    font-size: var(--text-xl); font-weight: 800;
    color: var(--section-title-color);
    display: flex; align-items: center; gap: var(--space-2);
}
.main-dishes-count {
    font-size: var(--text-xs); font-weight: 600;
    color: var(--gray-400); margin-left: var(--space-1);
}

/* Daily main dishes grid - uses same .product-grid + .product-card as stale menu */
.daily-dishes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-card), 1fr));
    gap: var(--space-5);
}

/* ============================================
   PRODUCT CARDS - Shared for stale + daily main
   ============================================ */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-card), 1fr));
    gap: var(--space-5);
    padding: 0 var(--space-4);
}

.product-card {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    border: 1px solid var(--card-border);
    overflow: hidden;
    transition: all .25s var(--ease);
    display: flex; flex-direction: column;
    position: relative;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-hover-shadow);
    border-color: var(--card-hover-border);
}
.product-card .card-image-wrap {
    position: relative; overflow: hidden;
    height: var(--card-img-h);
    background: var(--gray-100);
}
.product-card .card-image {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s var(--ease);
}
.product-card:hover .card-image { transform: scale(1.05); }
.product-card .card-image-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--gray-50), var(--gray-100));
    font-size: 48px; color: var(--gray-200);
}
.product-card .card-badge {
    position: absolute; top: var(--space-3); left: var(--space-3);
    padding: var(--space-1) var(--space-2-5);
    border-radius: var(--radius-full);
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    background: var(--brand); color: var(--white);
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

.product-card .card-body {
    padding: var(--space-4); flex: 1;
    display: flex; flex-direction: column;
}
.product-card .card-category {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--brand); margin-bottom: var(--space-1);
}
.product-card .card-name {
    font-family: var(--font-display);
    font-size: var(--text-base); font-weight: 700;
    color: var(--card-text);
    margin: 0 0 var(--space-1);
    line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.product-card .card-desc {
    font-size: var(--text-xs); color: var(--gray-400);
    line-height: 1.5; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    margin: 0 0 var(--space-3);
}
.product-card .card-allergens {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-bottom: var(--space-3);
}
.product-card .card-allergen {
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 9px; font-weight: 600;
    background: var(--gray-100); color: var(--gray-500);
}

/* Card footer - price + CTA */
.product-card .card-footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--card-border);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3);
}
.product-card .card-price {
    font-family: var(--font-display);
    font-size: var(--text-xl); font-weight: 800;
    color: var(--card-price-color);
    letter-spacing: -0.02em;
}
.product-card .card-cta {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm); font-weight: 700;
    background: var(--card-cta-bg); color: var(--card-cta-text);
    border: none; cursor: pointer;
    transition: all .2s var(--ease);
    display: flex; align-items: center; gap: var(--space-2);
    white-space: nowrap;
}
.product-card .card-cta:hover {
    opacity: .9; transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.product-card .card-cta .cta-icon { font-size: 14px; }

/* Qty controls on cards */
.card-qty-controls {
    display: flex; align-items: center; gap: var(--space-2);
}
.card-qty-controls .qty-btn {
    width: 30px; height: 30px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--gray-200);
    background: var(--white); color: var(--gray-700);
    font-size: 16px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .15s var(--ease);
}
.card-qty-controls .qty-btn:hover {
    border-color: var(--brand); color: var(--brand);
}
.card-qty-controls .qty-value {
    font-size: var(--text-sm); font-weight: 800;
    min-width: 24px; text-align: center;
    color: var(--gray-900);
}

/* ============================================
   STALE MENU - Toolbar & Filters
   ============================================ */
.menu-toolbar {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-2);
}
.menu-search {
    flex: 1; min-width: 200px;
    padding: var(--space-2-5) var(--space-4);
    padding-left: var(--space-10);
    border-radius: var(--radius-full);
    border: 1.5px solid var(--gray-200);
    font-size: var(--text-sm);
    background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239ca3af' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") var(--space-3) center no-repeat;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.menu-search:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(212,175,55,.12);
}
.category-chips {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    padding: 0 var(--space-4) var(--space-4);
}
.category-chip {
    padding: var(--space-1-5) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs); font-weight: 600;
    border: 1.5px solid var(--gray-200);
    background: var(--white); color: var(--gray-600);
    cursor: pointer; transition: all .2s var(--ease);
}
.category-chip:hover { border-color: var(--brand); color: var(--brand); }
.category-chip.active {
    background: var(--brand); border-color: var(--brand);
    color: var(--white);
}

/* ── Old daily-menu-list + daily-item (backward compat, hidden by new design) ── */
.daily-menu-list { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-4); }
.daily-item {
    display: flex; align-items: center;
    gap: var(--space-4); padding: var(--space-3) var(--space-4);
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-lg);
    transition: all .2s var(--ease);
}
.daily-item:hover {
    border-color: var(--gray-200);
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.daily-item-icon { font-size: 28px; flex-shrink: 0; }
.daily-item-info { flex: 1; min-width: 0; }
.daily-item-name {
    font-weight: 700; font-size: var(--text-sm);
    color: var(--gray-900); margin: 0 0 2px;
}
.daily-item-desc {
    font-size: var(--text-xs); color: var(--gray-400); margin: 0;
}
.daily-item-price {
    font-family: var(--font-display);
    font-size: var(--text-lg); font-weight: 800;
    color: var(--brand); white-space: nowrap;
}
.daily-item-actions { display: flex; align-items: center; gap: var(--space-2); }

/* Qty controls (shared) */
.qty-controls {
    display: flex; align-items: center; gap: var(--space-1);
}
.qty-btn {
    width: 28px; height: 28px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--gray-200);
    background: var(--white); color: var(--gray-700);
    font-size: 14px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .15s var(--ease);
}
.qty-btn:hover { border-color: var(--brand); color: var(--brand); }
.qty-value {
    font-size: var(--text-sm); font-weight: 800;
    min-width: 22px; text-align: center;
}

/* ============================================
   DENNE MENU / STALE MENU labels
   ============================================ */
.denne-menu { padding: 0; }
.stale-menu { padding: 0; }

/* ── Unavailable states ── */
.product-card.nedostupne,
.soup-item.vypredane { opacity: .5; pointer-events: none; }
.product-card.nedostupne .card-cta,
.soup-item.vypredane .soup-item-cta { display: none; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .menu-hero { padding: var(--space-6) var(--space-4); }
    .menu-hero h1 { font-size: var(--text-xl); }
    .day-tabs { gap: var(--space-1); }
    .day-tab { padding: var(--space-1-5) var(--space-3); font-size: 10px; }
    .soup-section {
        margin: var(--space-2) var(--space-2) var(--space-4);
        padding: var(--space-3) var(--space-4);
    }
    .soup-list { grid-template-columns: 1fr; }
    .product-grid,
    .daily-dishes-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: var(--space-3); padding: 0 var(--space-2);
    }
    .product-card .card-footer {
        flex-direction: column; align-items: stretch;
        gap: var(--space-2);
    }
    .product-card .card-cta { justify-content: center; }
    .menu-toolbar { padding: var(--space-3) var(--space-2); }
    .menu-search { min-width: 100%; }
    .category-chips { padding: 0 var(--space-2) var(--space-3); }
}

@media (max-width: 480px) {
    .menu-tabs { flex-direction: column; align-items: stretch; }
    .product-grid,
    .daily-dishes-grid { grid-template-columns: 1fr; }
}