/* Saale Döner Pizza Haus — order.html: categories / products / delivery+cart+checkout */

/* --- Menu filter bar (diet toggles + price range) --- */
.menu-filter-bar { margin-bottom: 18px; }
.menu-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-toggle-btn {
    display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
    background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 11px 18px;
    font-weight: 700; font-size: 13.5px; color: #0e1318; cursor: pointer; transition: all .2s ease;
}
.filter-toggle-btn i { font-size: 16px; color: #4CAF50; }
.filter-toggle-btn:hover { border-color: #4CAF50; }
.filter-toggle-btn.has-active-filters { background: #4CAF50; color: #fff; border-color: #4CAF50; }
.filter-toggle-btn.has-active-filters i { color: #fff; }
.filter-count-badge {
    background: #fff; color: #4CAF50; border-radius: 999px; font-size: 11px; font-weight: 700;
    min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}
.active-filter-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.active-filter-chip {
    display: inline-flex; align-items: center; gap: 6px; background: #E8F5EC; color: #296239;
    border-radius: 999px; padding: 6px 8px 6px 14px; font-size: 12.5px; font-weight: 600;
}
.active-filter-chip button {
    background: rgba(41,98,57,.12); color: #296239; border: none; border-radius: 50%;
    width: 18px; height: 18px; line-height: 1; font-size: 14px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.active-filter-chip button:hover { background: rgba(41,98,57,.22); }

.menu-filter-panel {
    margin-top: 12px; background: #fff; border: 1px solid #eee; border-radius: 16px;
    padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px;
}
.filter-group { display: flex; flex-direction: column; gap: 10px; }
.filter-group-label { font-size: 12.5px; font-weight: 700; color: #8a8f94; text-transform: uppercase; letter-spacing: .03em; }
.diet-filter-options { display: flex; gap: 8px; flex-wrap: wrap; }
.diet-filter-btn {
    display: inline-flex; align-items: center; gap: 7px; background: #f5f6f7; border: 1px solid transparent;
    border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 600; color: #0e1318;
    cursor: pointer; transition: all .2s ease;
}
.diet-filter-btn i { font-size: 15px; color: #8a8f94; }
.diet-filter-btn:hover { border-color: #4CAF50; }
.diet-filter-btn.active { background: #4CAF50; color: #fff; }
.diet-filter-btn.active i { color: #fff; }

.price-range-control { width: 240px; max-width: 100%; }
.price-range-track-wrap { position: relative; height: 32px; }
.price-range-track-wrap::before {
    content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 4px; transform: translateY(-50%);
    background: #eee; border-radius: 4px;
}
.price-range-track {
    position: absolute; top: 50%; height: 4px; transform: translateY(-50%);
    background: #4CAF50; border-radius: 4px;
}
.price-range-input {
    position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: 0;
    width: 100%; height: 32px; background: transparent; pointer-events: none;
    -webkit-appearance: none; appearance: none;
}
.price-range-input::-webkit-slider-thumb {
    -webkit-appearance: none; pointer-events: auto; width: 20px; height: 20px; border-radius: 50%;
    background: #4CAF50; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(14,19,24,.25); cursor: pointer;
}
.price-range-input::-moz-range-thumb {
    pointer-events: auto; width: 20px; height: 20px; border-radius: 50%;
    background: #4CAF50; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(14,19,24,.25); cursor: pointer;
}
.price-range-input::-webkit-slider-runnable-track { background: transparent; }
.price-range-input::-moz-range-track { background: transparent; }

.filter-reset-btn {
    background: none; border: none; color: #c0392b; font-size: 12.5px; font-weight: 700;
    cursor: pointer; text-decoration: underline; padding: 0; align-self: center;
}

.category-item.is-empty { opacity: .45; }
.product-grid-empty {
    grid-column: 1 / -1; text-align: center; color: #8a8f94; font-size: 13.5px;
    padding: 40px 20px; background: #fff; border-radius: 12px; border: 1px dashed #e0e0e0;
}

.order-layout { display: flex; gap: 28px; align-items: flex-start; }

/* --- Category nav (left) --- */
.category-nav-wrap { flex: 0 0 210px; }
/* Its own scroll area once the list is taller than the viewport, so paging
   through categories doesn't drag the whole site (header, product grid,
   cart) along with it — only this column scrolls. */
.category-nav {
    display: flex; flex-direction: column; gap: 8px; position: sticky; top: 20px;
    max-height: calc(100vh - 40px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: #c7ead0 transparent;
}
.category-nav::-webkit-scrollbar { width: 5px; }
.category-nav::-webkit-scrollbar-thumb { background: #c7ead0; border-radius: 10px; }
.category-nav::-webkit-scrollbar-thumb:hover { background: #4CAF50; }
.category-nav::-webkit-scrollbar-track { background: transparent; }
.category-item {
    display: flex; align-items: center; gap: 10px;
    text-align: left; padding: 13px 16px; border-radius: 12px;
    border: 1px solid #eee; background: #fff; font-weight: 600; font-size: 14px; color: #0e1318;
    transition: all .2s ease; cursor: pointer;
}
.category-item:hover { border-color: #4CAF50; color: #4CAF50; }
.category-item.active { background: #4CAF50; color: #fff; border-color: #4CAF50; box-shadow: 0 10px 20px rgba(76,175,80,.25); }
.category-item .count {
    margin-left: auto; font-size: 11px; background: rgba(0,0,0,.08); border-radius: 20px; padding: 2px 8px;
}
.category-item.active .count { background: rgba(255,255,255,.25); }

/* --- Product grid (center) --- */
.product-grid-wrap { flex: 1 1 auto; min-width: 0; }
.product-grid-heading { font-size: 20px; font-weight: 700; color: #0e1318; margin: 0 0 16px; }
.product-grid-note { display: block; font-size: 12.5px; font-weight: 500; color: #8a8f94; margin-top: 4px; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.product-card {
    background: #fff; border-radius: 12px; overflow: hidden;
    box-shadow: 0 6px 18px rgba(14,19,24,.06); display: flex; flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}
.product-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(14,19,24,.1); }
.product-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.product-card-top { display: flex; align-items: center; gap: 7px; }
.product-card h4 { margin: 0; font-size: 14px; font-weight: 700; color: #0e1318; line-height: 1.3; }
.product-card .subtitle { font-size: 11.5px; color: #8a8f94; margin-bottom: 1px; }
.product-allergens { font-size: 10.5px; color: #b0b4b8; margin-bottom: 2px; }
.product-allergens .open-allergen-modal {
    display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px;
    border-radius: 50%; background: #eee; color: #666; font-size: 9px; font-weight: 700; margin-left: 2px; text-decoration: none;
}
.product-card .price { margin-top: auto; font-weight: 700; color: #4CAF50; font-size: 15px; }

.veg-dot { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 3px; border: 2px solid; }
.veg-dot.veg { border-color: #2e8b3d; }
.veg-dot.veg::after { content: ''; display: block; width: 5px; height: 5px; margin: 1px; border-radius: 50%; background: #2e8b3d; }
.veg-dot.nonveg { border-color: #c0392b; }
.veg-dot.nonveg::after { content: ''; display: block; width: 5px; height: 5px; margin: 1px; border-radius: 50%; background: #c0392b; }
.product-add-btn {
    margin-top: 8px; height: 36px; border-radius: 9px; background: #0e1318; color: #fff;
    border: none; font-weight: 700; font-size: 12.5px; display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: background .2s ease;
}
.product-add-btn:hover { background: #4CAF50; }
.product-add-btn .las { font-size: 15px; }

/* --- Right sidebar: delivery card + cart --- */
/* Plain independent vertical-scroll column, no framing box of its own —
   each section inside (order-summary-box, order-choice-box, order-time-box,
   cart-panel) is its own elevated "3D" card instead. */
.order-sidebar {
    flex: 0 0 380px; display: flex; flex-direction: column; gap: 22px; position: sticky; top: 20px;
    max-height: calc(100vh - 40px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: #c7ead0 transparent;
}
.order-sidebar::-webkit-scrollbar { width: 5px; }
.order-sidebar::-webkit-scrollbar-thumb { background: #c7ead0; border-radius: 10px; }
.order-sidebar::-webkit-scrollbar-thumb:hover { background: #4CAF50; }
.order-sidebar::-webkit-scrollbar-track { background: transparent; }
.order-sidebar .default-btn { width: 100%; text-align: center; }

/* Shared "3D card" treatment: white card, soft shadow, gentle lift on
   hover — applied to every card-like section in the sidebar so they read
   as a consistent set even though each keeps its own background/radius. */
.order-summary-box, .order-choice-box, .order-time-box, .cart-panel {
    transition: transform .2s ease, box-shadow .2s ease;
}
.order-summary-box:hover, .order-choice-box:hover, .order-time-box:hover, .cart-panel:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(14,19,24,.12);
}
.order-choice-box {
    background: #fff; border-radius: 16px; box-shadow: 0 15px 40px rgba(14,19,24,.08);
    padding: 22px;
}

.cart-panel { background: #fff; border-radius: 16px; box-shadow: 0 15px 40px rgba(14,19,24,.08); padding: 24px; min-width: 0; }
.cart-panel h4 { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: #0e1318; }
.cart-empty { color: #8a8f94; font-size: 13px; text-align: center; padding: 24px 0; }
.cart-empty i { font-size: 26px; color: #d7dadd; display: block; margin-bottom: 8px; }

.cart-item-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.cart-item-row:last-child { border-bottom: none; }
.cart-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cart-item-row .name { font-size: 13.5px; font-weight: 600; color: #0e1318; }
.cart-item-details { font-size: 11px; color: #8a8f94; }
.cart-item-row .qty-controls { display: flex; align-items: center; gap: 6px; }
.cart-item-row .qty-controls button {
    width: 24px; height: 24px; border-radius: 50%; border: 1px solid #eee; background: #f5f6f7;
    font-weight: 700; line-height: 1; color: #0e1318; display: flex; align-items: center; justify-content: center;
}
.cart-item-row .qty-controls .qty-val { min-width: 16px; text-align: center; font-size: 13px; font-weight: 700; }
.cart-item-row .line-price { font-size: 13.5px; font-weight: 700; width: 62px; text-align: right; color: #0e1318; }

/* --- Rabattcode --- */
.promo-code-box { margin-top: 14px; }
.promo-code-input-row { display: flex; gap: 8px; }
.promo-code-input-row input {
    flex: 1 1 auto; min-width: 0; height: 40px; border-radius: 10px; border: 1px solid #eee; background: #fff;
    padding: 0 12px; font-size: 13px; color: #0e1318; text-transform: uppercase;
}
.promo-code-input-row input::placeholder { text-transform: none; }
.promo-code-input-row input:focus { outline: none; border-color: #4CAF50; }
.promo-code-input-row button {
    flex: 0 0 auto; height: 40px; padding: 0 16px; border-radius: 10px; border: none;
    background: #0e1318; color: #fff; font-weight: 700; font-size: 12.5px; cursor: pointer; transition: background .2s ease;
}
.promo-code-input-row button:hover { background: #4CAF50; }
.promo-code-message { margin-top: 8px; font-size: 12px; font-weight: 600; line-height: 1.4; }
.promo-code-message.is-success { color: #296239; }
.promo-code-message.is-error { color: #c0392b; }

/* --- Trinkgeld --- */
.tip-box { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #e0e0e0; }
.tip-box-label { display: block; font-size: 12.5px; font-weight: 700; color: #0e1318; margin-bottom: 10px; }
.tip-box-label small { font-weight: 500; color: #8a8f94; }
.tip-options { display: flex; flex-wrap: wrap; gap: 8px; }
.tip-option-btn {
    flex: 1 1 auto; background: #f5f6f7; border: 1px solid transparent; border-radius: 999px;
    padding: 9px 14px; font-size: 12.5px; font-weight: 600; color: #0e1318; cursor: pointer; transition: all .2s ease;
}
.tip-option-btn:hover { border-color: #4CAF50; }
.tip-option-btn.active { background: #4CAF50; color: #fff; }
#tipCustomInput { width: 100%; }

.cart-totals { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #e0e0e0; display: flex; flex-direction: column; gap: 6px; }
.cart-totals .row { display: flex; justify-content: space-between; font-size: 13px; color: #666; }
.cart-totals .row.discount-row { color: #296239; font-weight: 600; }
.cart-totals .row.grand { font-size: 16.5px; font-weight: 700; color: #0e1318; margin-top: 6px; padding-top: 10px; border-top: 1px solid #eee; }

.cart-min-order-warning {
    margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #fff3e6; color: #c0392b;
    font-size: 12px; font-weight: 600; line-height: 1.5;
}
/* Positive/neutral state (e.g. the delivery-zone min-order note once
   checkout is actually ready) — same shape, calmer color than the warning. */
.cart-min-order-warning.is-note { background: #fff1e0; color: #b56a10; }
@keyframes cp-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}
.cart-min-order-warning.shake { animation: cp-shake .4s ease-in-out; }

.cart-checkout-btn {
    margin-top: 16px; width: 100%; height: 52px; border-radius: 12px; background: #4CAF50; color: #fff;
    font-weight: 700; font-size: 14.5px; border: none; transition: background .2s ease;
}
.cart-checkout-btn:hover { background: #388E3C; }

/* Stays fully clickable — this is a hint, not a disabled state (tapping it
   shows a red message and jumps to what's missing instead of doing nothing). */
.cart-checkout-btn.not-ready,
#mobileCartCheckoutBtn.not-ready {
    background: #fff; color: #4CAF50; border: 2px solid #4CAF50;
}

/* --- Mobile sticky cart bar --- */
.mobile-cart-bar {
    display: none; flex-direction: column; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
    background: #0e1318; color: #fff; padding: 14px 18px;
    box-shadow: 0 -10px 30px rgba(0,0,0,.25);
}
.mobile-cart-bar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mobile-cart-bar .info { font-size: 13.5px; }
.mobile-cart-bar .info strong { display: block; font-size: 15px; }
.mobile-cart-bar button {
    background: #4CAF50; color: #fff; border: none; border-radius: 10px; padding: 12px 20px; font-weight: 700; font-size: 13.5px;
    flex: 0 0 auto; white-space: nowrap;
}

/* Same reason text shown instantly on the sticky mobile bar as soon as
   something blocks checkout (or, once ready, the delivery-zone note) — the
   desktop .cart-min-order-warning lives further up the page in the cart
   panel, which on mobile is below the whole product grid and easy to miss
   entirely behind the always-visible sticky bar at the bottom. */
.mobile-cart-reason {
    font-size: 12.5px; font-weight: 600; line-height: 1.45; padding: 9px 12px; border-radius: 8px;
}
.mobile-cart-reason.is-blocked { background: rgba(255,90,90,.18); color: #ff9d8f; }
.mobile-cart-reason.is-note { background: rgba(76,175,80,.18); color: #ffb27a; }
.mobile-cart-reason.shake { animation: cp-shake .4s ease-in-out; }

/* --- Product configurator modal (extends .order-modal-overlay/.order-modal-box) --- */
.configurator-modal-box { max-width: 480px; max-height: 88vh; overflow-y: auto; text-align: left; }
.configurator-header { display: flex; gap: 14px; margin-bottom: 18px; }
.configurator-header img { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; background: #f5f6f7; }
.configurator-header-info { min-width: 0; }
.configurator-header-info h3 { margin: 2px 0 4px; font-size: 17px; font-weight: 700; color: #0e1318; padding-right: 0; }
.configurator-veg-badge { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 2px solid; }
.configurator-veg-badge.veg { border-color: #2e8b3d; }
.configurator-veg-badge.veg::after { content: ''; display: block; width: 5px; height: 5px; margin: 1px; border-radius: 50%; background: #2e8b3d; }
.configurator-veg-badge.nonveg { border-color: #c0392b; }
.configurator-veg-badge.nonveg::after { content: ''; display: block; width: 5px; height: 5px; margin: 1px; border-radius: 50%; background: #c0392b; }
.configurator-description { font-size: 12.5px; color: #666; margin: 4px 0 0; line-height: 1.5; }
.configurator-allergens { font-size: 11px; color: #b0b4b8; margin: 4px 0 0; }
.configurator-allergens a { color: #4CAF50; text-decoration: none; }

.configurator-section { margin-bottom: 18px; }
.configurator-section-label { display: block; font-size: 11.5px; font-weight: 700; color: #8a8f94; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }

.configurator-size-options { display: flex; flex-direction: column; gap: 8px; }
.configurator-size-pill {
    display: flex; justify-content: space-between; align-items: center; width: 100%;
    border: 1px solid #eee; border-radius: 10px; padding: 12px 14px; background: #fff;
    font-size: 13.5px; font-weight: 600; color: #0e1318; transition: all .2s ease;
}
.configurator-size-pill .price { color: #4CAF50; font-weight: 700; }
.configurator-size-pill.active { border-color: #4CAF50; background: #C8E6C9; }

.configurator-extras-options { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.configurator-extra-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 4px; font-size: 13px; color: #333; cursor: pointer;
    border-bottom: 1px solid #f5f6f7;
}
.configurator-extra-row:last-child { border-bottom: none; }
.configurator-extra-row input { flex: 0 0 auto; width: 16px; height: 16px; accent-color: #4CAF50; }
.configurator-extra-row .name { flex: 1; }
.configurator-extra-row .price { color: #8a8f94; font-weight: 600; }

.configurator-footer { display: flex; align-items: center; gap: 14px; padding-top: 14px; border-top: 1px dashed #e0e0e0; }
.configurator-qty { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.configurator-qty button {
    width: 32px; height: 32px; border-radius: 50%; border: 1px solid #eee; background: #f5f6f7;
    font-weight: 700; font-size: 16px; line-height: 1; color: #0e1318; display: flex; align-items: center; justify-content: center;
}
.configurator-qty span { min-width: 18px; text-align: center; font-weight: 700; font-size: 14px; }
.configurator-add-btn {
    flex: 1; height: 50px; border-radius: 12px; background: #4CAF50; color: #fff; border: none;
    font-weight: 700; font-size: 14px; transition: background .2s ease;
}
.configurator-add-btn:hover { background: #388E3C; }

/* --- Checkout modal (extends .order-modal-overlay/.order-modal-box) --- */
.checkout-modal-box { max-width: 560px; max-height: 88vh; overflow-y: auto; text-align: left; }
.checkout-mode-pill {
    display: inline-block; background: #C8E6C9; color: #4CAF50; font-weight: 700; font-size: 12px;
    padding: 4px 12px; border-radius: 20px; margin-bottom: 14px;
}
.checkout-summary { background: #f5f6f7; border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; }
.checkout-summary-row { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; color: #333; }
.checkout-summary-totals { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #d7dadd; }
.checkout-summary-totals .row { display: flex; justify-content: space-between; font-size: 12.5px; color: #666; padding: 2px 0; }
.checkout-summary-totals .row.grand { font-size: 15px; font-weight: 700; color: #0e1318; margin-top: 4px; }

.checkout-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.checkout-form-grid .full-width { grid-column: 1 / -1; }
.checkout-input {
    height: 48px; border-radius: 10px; border: 1px solid #eee; background: #f5f6f7;
    padding: 0 14px; font-size: 13.5px; width: 100%; color: #0e1318;
}
.checkout-input::placeholder { color: #8a8f94; }
textarea.checkout-input { height: 80px; padding: 12px 14px; resize: vertical; }
.checkout-field-label { font-size: 11.5px; font-weight: 700; color: #8a8f94; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; display: block; }

.order-time-box {
    background: #fff; border-radius: 16px; box-shadow: 0 15px 40px rgba(14,19,24,.08);
    padding: 18px 22px; margin: 14px 0;
}
.order-time-status {
    font-size: 12.5px; font-weight: 600; line-height: 1.5; color: #c0392b;
    background: #fdf1ef; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px;
}
.order-time-choice { display: flex; gap: 10px; margin-top: 6px; }
.order-time-btn {
    flex: 1; border: 1px solid #eee; border-radius: 12px; padding: 10px 8px; text-align: center;
    cursor: pointer; font-weight: 700; font-size: 12.5px; color: #0e1318; background: #fff; transition: all .2s ease;
}
.order-time-btn.active { border-color: #4CAF50; background: #C8E6C9; color: #4CAF50; }
.order-time-btn:disabled { color: #c2c6ca; cursor: not-allowed; background: #f7f7f8; }
.order-time-picker { margin-top: 14px; }
.order-time-picker-fields { display: flex; gap: 10px; }
.order-time-picker-fields .checkout-input { flex: 1; }

.payment-options { display: flex; gap: 10px; margin-bottom: 16px; }
.payment-option {
    flex: 1; border: 1px solid #eee; border-radius: 12px; padding: 14px 10px; text-align: center;
    cursor: pointer; font-weight: 700; font-size: 13.5px; color: #0e1318; transition: all .2s ease;
}
.payment-option i { display: block; font-size: 20px; margin-bottom: 6px; color: #8a8f94; }
.payment-option.active { border-color: #4CAF50; background: #C8E6C9; color: #4CAF50; }
.payment-option.active i { color: #4CAF50; }

.checkout-privacy { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: #666; margin-bottom: 18px; line-height: 1.5; }
.checkout-privacy input { margin-top: 3px; flex: 0 0 auto; }

.checkout-submit-btn {
    width: 100%; height: 52px; border-radius: 12px; background: #4CAF50; color: #fff;
    font-weight: 700; font-size: 14.5px; border: none; transition: background .2s ease;
}
.checkout-submit-btn:hover:not(:disabled) { background: #388E3C; }
.checkout-submit-btn:disabled { background: #C8E6C9; cursor: not-allowed; }

.checkout-success-state { display: none; text-align: center; padding: 20px 10px 4px; }
.checkout-success-state.active { display: block; }
.checkout-success-icon {
    width: 60px; height: 60px; border-radius: 50%; background: #eafaf0; color: #1fa855;
    font-size: 24px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.checkout-success-state h3 { margin-bottom: 10px; }
.checkout-success-state p { color: #666; font-size: 13.5px; margin-bottom: 4px; }
#checkoutSuccessOrderId { font-weight: 700; color: #0e1318; }
.checkout-success-state .checkout-submit-btn { margin-top: 18px; }

/* --- Responsive --- */
@media (max-width: 991px) {
    .order-layout { flex-direction: column; }

    /* The filter bar itself stays in normal flow on mobile (a full sticky
       bar ate too much header space) — instead a small floating icon
       (.mobile-filter-fab below) appears once it's scrolled out of view
       and jumps back to it on tap. Its panel still opens as an overlay
       (not pushing layout) so toggling it doesn't shift the category bar
       stuck underneath. */
    .menu-filter-panel {
        position: absolute; left: 0; right: 0; top: 100%; margin-top: 8px; z-index: 46;
        box-shadow: 0 20px 45px rgba(14,19,24,.18); max-height: 70vh; overflow-y: auto;
    }

    /* Category chips stick right below the site's own fixed navbar once
       scrolling carries them there. --sticky-offset is set by order.html
       from the real (fixed) navbar height, so this tracks it even if the
       navbar's height ever changes. */
    .category-nav-wrap {
        flex: none; width: 100%;
        position: sticky; top: var(--sticky-offset, 0px); z-index: 44;
        background: #faf7f2; padding: 8px 0; margin-bottom: 4px;
    }

    .mobile-filter-fab {
        display: flex; align-items: center; justify-content: center;
        position: fixed; right: 18px; bottom: var(--fab-bottom, 24px); z-index: 950;
        width: 50px; height: 50px; border-radius: 50%; border: none;
        background: #4CAF50; color: #fff; font-size: 19px;
        box-shadow: 0 10px 24px rgba(76,175,80,.4);
        opacity: 0; visibility: hidden; transform: translateY(12px);
        transition: opacity .25s ease, transform .25s ease, visibility .25s;
    }
    .mobile-filter-fab.visible { opacity: 1; visibility: visible; transform: translateY(0); }
    .mobile-filter-fab .filter-fab-badge {
        position: absolute; top: -3px; right: -3px; background: #0e1318; color: #fff;
        border-radius: 999px; min-width: 17px; height: 17px; font-size: 10px; font-weight: 700;
        display: flex; align-items: center; justify-content: center; padding: 0 4px;
    }
    .category-nav {
        flex-direction: row; overflow-x: auto; overflow-y: visible; gap: 8px; padding-bottom: 2px;
        position: static; max-height: none; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
    }
    .category-nav::-webkit-scrollbar { width: auto; height: 5px; }
    .category-nav::-webkit-scrollbar-thumb { background: #d7dadd; border-radius: 10px; }
    .category-nav::-webkit-scrollbar-track { background: transparent; }
    .category-item { flex: 0 0 auto; white-space: nowrap; }
    .order-sidebar {
        flex: none; width: 100%; position: static; max-height: none; overflow-y: visible; overflow-x: visible;
        padding-bottom: 90px;
    }
    .order-summary-box:hover, .order-choice-box:hover, .order-time-box:hover, .cart-panel:hover {
        transform: none; box-shadow: 0 15px 40px rgba(14,19,24,.08);
    }
    .mobile-cart-bar.active { display: flex; }
}

@media (max-width: 767px) {
    .order-layout { gap: 20px; }
    .checkout-form-grid { grid-template-columns: 1fr; }
    .checkout-modal-box { max-height: 100vh; height: 100%; border-radius: 0; width: 100%; max-width: 100%; }
    .configurator-modal-box { max-height: 100vh; height: 100%; border-radius: 0; width: 100%; max-width: 100%; }
    /* Always exactly 2 columns on mobile — auto-fill's minmax(150px, 1fr)
       was collapsing to a single column on narrower phones once padding
       and the gap ate into the available width, forcing a lot more
       scrolling than necessary to see the same number of dishes. */
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .product-card h4 { font-size: 13px; }
    .product-card .subtitle { font-size: 11px; }

    .filter-toggle-btn { padding: 10px 14px; font-size: 13px; flex: 1 1 auto; justify-content: center; }
    .active-filter-chips { flex-basis: 100%; order: 3; }
    .menu-filter-panel { flex-direction: column; align-items: stretch; gap: 18px; padding: 16px; }
    .price-range-control { width: 100%; }
}