/* Shared styling for the guest-facing ordering pages (table ordering and pickup
   orders). Both render the same menu/cart/summary pattern, so these rules live
   here instead of in one page's scoped stylesheet — a scoped file only applies
   to its own component, which previously left the pickup page unstyled.
   Page-specific additions stay in the respective .razor.css. */

/* ── Order Page Header ─────────────────────────────── */
.order-page-header {
    background: var(--ml-surface, #fff);
    border: 1px solid var(--ml-border, #e8ddd0);
    border-radius: 1rem;
    padding: 1.25rem 1.25rem 1.1rem;
    box-shadow: 0 2px 8px rgba(140, 100, 60, 0.06);
}

.order-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.restaurant-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ml-text-muted, #8b7355);
}

.order-header-title {
    font-family: Georgia, 'Palatino Linotype', Book Antiqua, Palatino, serif;
    font-size: 1.55rem;
    font-weight: 400;
    color: var(--ml-text, #2d2015);
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.order-header-subtitle {
    font-size: 0.9rem;
    color: var(--ml-text-muted, #8b7355);
    margin-bottom: 0;
}

/* ── Category Quick-Nav ────────────────────────────── */
/* Named .order-category-pill rather than .category-pill: app.css already
   defines .category-pill for the public menu page with a different look and a
   different active-class (.active vs .is-active). */
.category-quick-nav {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0.65rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--ml-bg, #faf7f4);
    margin-bottom: 0.75rem;
}

.category-quick-nav::-webkit-scrollbar {
    display: none;
}

.order-category-pill {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--ml-text, #2d2015);
    background: var(--ml-surface, #fff);
    border: 1px solid var(--ml-border, #e8ddd0);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.order-category-pill:hover,
.order-category-pill:focus-visible {
    background: var(--ml-primary-subtle, #fdf5ef);
    border-color: var(--ml-primary-light, #f8ece3);
    color: var(--ml-action, #00778a);
    outline: none;
}

.order-category-pill.is-active {
    background: var(--ml-primary-subtle, #fdf5ef);
    border-color: var(--ml-primary-light, #f8ece3);
    color: var(--ml-action, #00778a);
    font-weight: 600;
}

/* ── Menu Item Card ─────────────────────────────────── */
.menu-item-card .card-body {
    padding: 1rem;
}

.menu-item-image {
    width: 76px;
    height: 76px;
    object-fit: cover;
}

/* Temporarily unavailable dishes stay visible, but recede and cannot be ordered. */
.menu-item-card-sold-out .menu-item-price {
    text-decoration: line-through;
}

.menu-item-card-sold-out .menu-item-image {
    filter: grayscale(1);
    opacity: 0.65;
}

.menu-item-price {
    min-width: 5.2rem;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── Quantity Stepper ───────────────────────────────── */
.quantity-stepper {
    display: flex;
    align-items: center;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
    width: 132px;
    flex: 0 0 132px;
}

.quantity-stepper .btn {
    border: 0;
    border-radius: 0;
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.quantity-stepper .stepper-symbol {
    position: relative;
    display: inline-block;
    width: 14px;
    height: 14px;
}

.quantity-stepper .stepper-symbol::before,
.quantity-stepper .stepper-symbol::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: currentColor;
    border-radius: 1px;
}

.quantity-stepper .stepper-symbol::before {
    width: 10px;
    height: 2px;
}

.quantity-stepper .stepper-symbol-minus::after {
    display: none;
}

.quantity-stepper .stepper-symbol-plus::after {
    width: 2px;
    height: 10px;
}

.quantity-value {
    min-width: 3rem;
    text-align: center;
    font-weight: 600;
    flex: 1;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ── Bottom Summary Bar ─────────────────────────────── */
.order-summary-bar {
    position: sticky;
    bottom: 0;
    z-index: 1030;
    margin-top: 1.5rem;
    padding: 0.85rem 0;
    background: var(--ml-surface, #fff);
    border-top: 1px solid var(--ml-border, #d8e3e8);
}

.order-summary-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.order-summary-figures {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.order-summary-count {
    font-size: 0.85rem;
    color: var(--ml-text-muted, #5a7282);
}

.order-summary-total {
    white-space: nowrap;
}

.order-submit-btn {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Submit errors render inside the sticky bar so they stay in view next to the
   button that produced them. */
.order-summary-error {
    display: flex;
    align-items: flex-start;
    gap: 0.15rem;
    margin-bottom: 0.6rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.5rem;
    background: var(--bs-danger-bg-subtle, #f8d7da);
    border: 1px solid var(--bs-danger-border-subtle, #f1aeb5);
    color: var(--bs-danger-text-emphasis, #58151c);
    font-size: 0.87rem;
    line-height: 1.35;
}

@media (max-width: 575.98px) {
    .menu-category {
        margin-bottom: 0.9rem !important;
    }

    .menu-item-card .card-body {
        padding: 0.8rem;
    }

    .menu-item-image {
        width: 58px;
        height: 58px;
    }

    .menu-item-header-row {
        gap: 0.55rem !important;
    }

    .menu-item-price {
        min-width: 5.8rem;
        font-size: 1.08rem;
    }

    .quantity-stepper {
        width: 120px;
        flex: 0 0 120px;
    }

    .quantity-stepper .btn {
        width: 40px;
        min-width: 40px;
        height: 40px;
    }

    .quantity-value {
        height: 40px;
    }
}

/* Phone and tablet-portrait: the summary bar becomes a fixed action bar, so the
   page needs bottom padding to keep the last card clear of it. Scoped to
   .order-content-container, not the generic .content-container, since the
   latter is used site-wide (header, other feature pages) and doesn't have a
   fixed bottom bar to clear. */
@media (max-width: 767.98px) {
    .order-content-container {
        padding-bottom: calc(10rem + env(safe-area-inset-bottom));
    }

    /* Full-bleed: the pills used to be clipped mid-word at the container gutter,
       which read as a layout glitch. Now they run to the screen edge — the usual
       "there is more, keep swiping" affordance — and the nav's own background
       covers the full width while cards scroll underneath it. */
    .category-quick-nav {
        margin-inline: -1rem;
        padding-inline: 1rem;
        scroll-padding-inline: 1rem;
    }

    .order-summary-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin-top: 0;
        padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
        box-shadow: 0 -6px 20px rgba(23, 48, 71, 0.12);
    }

    .order-summary-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
        column-gap: 0.75rem;
        row-gap: 0.6rem;
    }

    .order-submit-btn {
        width: 100%;
        min-height: 48px;
    }

    .order-summary-count {
        font-size: 0.8rem;
    }

    .order-summary-total {
        font-size: 1.05rem;
    }
}