/* Promotion price + badge (MES-158). */

/* The "was / now" row. inline-flex, not flex: the pair then sits wherever its
   container puts text — centred on a product card, centred in the details modal
   — instead of breaking that rhythm the moment a dish goes on offer. */
.promotion-price {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.promotion-price__was {
    color: #6b7280;
    text-decoration: line-through;
    font-weight: 400;
    font-size: 0.85em;
}

.promotion-price__now {
    color: #b91c1c;
    font-weight: 700;
}

/* Visible to screen readers only — the struck price is aria-hidden, so this
   sentence carries the whole meaning for anyone not looking at the screen. */
.promotion-price__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.promotion-badge-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.promotion-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #b91c1c;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.promotion-badge__ends {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
}

/* Card corner ribbon — the badge over the image on a product card. */
.product-image-container .promotion-badge-group {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
}

.specials-section {
    margin: 0 0 20px;
}

.product-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
    position: relative;
    /* As tall as what it holds. The grid already gives the cards of one row the same height (and the
       actions sit at the bottom); a fixed height left a band of nothing above the buttons of a short
       card on a phone, and cut off the buttons of a card with a long name. */
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.product-card.unavailable {
    opacity: 0.6;
    filter: grayscale(0.3);
    transition: opacity 0.4s ease, filter 0.4s ease;
}

.product-card.out-of-stock {
    opacity: 0.5;
    filter: grayscale(0.4);
    transition: opacity 0.4s ease, filter 0.4s ease;
}

.out-of-stock-overlay {
    background: rgba(0, 0, 0, 0.6);
    font-size: 15px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.product-image-container {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #ffffff;
    cursor: pointer;
}

.product-image-container:focus-visible {
    outline: 2px solid #007cba;
    outline-offset: -2px;
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.product-card:hover .product-image {
    transform: scale(1.05);
}

.product-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
}

.unavailable-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 16px;
}

.product-info {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.product-details-content {
    flex: 0 0 auto;
    cursor: pointer;
}

.product-details-content:focus-visible {
    outline: 2px solid #007cba;
    outline-offset: 2px;
    border-radius: 4px;
}

.product-name {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.product-price {
    font-size: 20px;
    font-weight: 700;
    color: #059669;
    margin: 0 0 12px 0;
}

.product-description {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 12px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card .ingredients {
    font-size: 12px;
    color: #374151;
    margin: 0 0 16px 0;
    padding: 8px 12px;
    background: #f9fafb;
    border-radius: 6px;
    border-left: 3px solid #6b7280;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
}

.details-button {
    flex: 1;
    padding: 10px 16px;
    background: #ffffff;
    border: 2px solid #374151;
    border-radius: 6px;
    color: #1f2937;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.details-button:hover {
    background: #f9fafb;
    border-color: #1f2937;
    color: #111827;
}

.add-to-cart-button {
    flex: 2;
    padding: 10px 16px;
    background: #065f46;
    border: none;
    border-radius: 6px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-to-cart-button:hover:not(:disabled) {
    background: #047857;
    transform: translateY(-1px);
}

.add-to-cart-button:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
}

.product-details {
    border-top: 1px solid #e5e7eb;
    padding-top: 16px;
    margin-top: 16px;
}

.ingredients-section {
    margin-bottom: 16px;
}

.ingredients-section h4 {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 8px 0;
}

.ingredients-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ingredient-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 14px;
}

.ingredient-item:last-child {
    border-bottom: none;
}

.ingredient-name {
    color: #374151;
    font-weight: 500;
}

.ingredient-quantity {
    color: #6b7280;
    font-size: 12px;
}

/* Responsive design */
@media (max-width: 768px) {
    .product-actions {
        flex-direction: column;
    }
    
    .details-button,
    .add-to-cart-button {
        flex: 1;
    }
}

@media (max-width: 480px) {
    .product-info {
        padding: 12px;
    }
    
    .product-name {
        font-size: 16px;
    }
    
    .product-price {
        font-size: 18px;
    }
}


/* The add button keeps its label while the cart is being opened; the spinner
   sits beside it so the row does not jump under the guest's finger. */
.add-to-cart-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.add-to-cart-button[data-adding="true"] {
    cursor: progress;
}

.add-to-cart-spinner {
    color: currentColor;
}

.product-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.product-modal {
    background: white;
    border-radius: 12px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Full screen for screens up to 1239px */
@media (max-width: 1239px) {
    .product-modal-overlay {
        padding: 0;
        align-items: flex-start;
    }
    
    .product-modal {
        max-width: 100%;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        box-shadow: none;
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
    background-color: #f8f9fa;
}

.product-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #333;
    flex: 1;
}

.product-title:focus-visible {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

.close-btn {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.close-btn:hover {
    background-color: #f0f0f0;
}

.close-btn:focus-visible {
    outline: 2px solid #007cba;
    outline-offset: 2px;
    background-color: #f0f0f0;
}

.modal-content {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px;
}

.product-image {
    width: calc(100% + 40px);
    height: 200px;
    margin: -20px -20px 20px -20px;
    border-radius: 0;
    overflow: hidden;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image img,
.product-image picture {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-image picture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.image-placeholder {
    font-size: 48px;
    color: #ccc;
}

.product-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
}

.price-section {
    text-align: center;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.price-section:focus-visible {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

.price {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    display: block;
    margin-bottom: 8px;
}

.portion-size {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.ingredients-section h3,
.allergens-section h3,
.additives-section h3,
.nutrition-section h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #007cba;
    padding-bottom: 4px;
}

.ingredients-section h3:focus-visible,
.allergens-section h3:focus-visible,
.additives-section h3:focus-visible,
.nutrition-section h3:focus-visible {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

.nutrition-header {
    margin-bottom: var(--space-2);
}

.nutrition-header h3 {
    margin: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.product-modal .ingredients {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #555;
    text-align: center;
}

.product-modal .ingredients strong {
    font-weight: bold;
    color: #2c3e50;
}

.allergen-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.allergen-tag {
    background-color: #fff3cd;
    color: #856404;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #ffeaa7;
}

.modal-footer {
    padding: 20px;
    border-top: 1px solid #eee;
    background-color: #f8f9fa;
}

.add-to-cart-btn {
    width: 100%;
    background-color: #007cba;
    color: white;
    border: none;
    padding: 16px 24px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.add-to-cart-btn:hover {
    background-color: #005a87;
}

.add-to-cart-btn:focus-visible {
    outline: 2px solid #007cba;
    outline-offset: 2px;
    background-color: #005a87;
}

.add-to-cart-btn:active {
    transform: translateY(1px);
}

.add-to-cart-btn.unavailable-btn {
    background-color: #9ca3af;
    cursor: not-allowed;
    opacity: 0.8;
}

.add-to-cart-btn.unavailable-btn:hover {
    background-color: #9ca3af;
}

.product-unavailable-section {
    text-align: center;
}

.unavailable-reason {
    margin: 8px 0 0 0;
    font-size: 13px;
    color: #6b7280;
    font-style: italic;
}

/* Full screen styles for screens up to 1239px */
@media (max-width: 1239px) {
    .modal-header {
        padding: 16px;
        position: sticky;
        top: 0;
        z-index: 10;
        background-color: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .product-title {
        font-size: 20px;
    }
    
    .modal-content {
        padding: 16px;
    }
    
    .product-image {
        height: 250px;
        width: calc(100% + 32px);
        margin: -16px -16px 20px -16px;
    }
    
    .price {
        font-size: 24px;
    }
    
    .modal-footer {
        padding: 16px;
        position: sticky;
        bottom: 0;
        background-color: white;
        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .add-to-cart-btn {
        font-size: 16px;
        padding: 14px 20px;
    }
}

@media (max-width: 480px) {
    .product-title {
        font-size: 18px;
    }
    
    .product-image {
        height: 200px;
    }
    
    .price {
        font-size: 22px;
    }
}
/* A dish's additives (MES-361): one line, read like the ingredients above it. */
.product-modal .additives {
    margin: 0;
    font: var(--type-body-small-weight) var(--type-body-small-size) / var(--type-body-small-line) var(--type-body-small-font);
    text-align: center;
}

/* The call is answered: the button turns to the success tint with a green check. It takes no tap
   meanwhile, but it is news, not an unavailable control, so it is never dimmed. The label keeps the
   body text colour, which reads on the tint in both themes. */
.assistance-button.assistance-button--confirmed:disabled,
.assistance-button.assistance-button--coming:disabled {
    border-color: var(--success);
    background: var(--success-bg);
    color: var(--text);
    opacity: 1;
    cursor: default;
}

.assistance-button--confirmed .ds-icon,
.assistance-button--coming .ds-icon {
    color: var(--success);
}

/* Arrangement only: the sheet, choices, field and buttons are design-system components. */
.bill-request-sheet__intro {
    margin: 0 0 var(--space-3);
    color: var(--text-2);
}


.bill-request-sheet__hint {
    margin: var(--space-1) 0 var(--space-3);
    color: var(--text-2);
    font-size: var(--type-body-small-size);
}

/* Arrangement only: a refusal takes the row's full width under the buttons. */
.bill-request-error {
    flex-basis: 100%;
}

/* A seat's name: a person mark and the name as plain inline text in the link colour — no pill, no
   background, no border. It reads as tappable through its colour; yours is a weight stronger. The
   underline comes only on hover and keyboard focus. Its tap area (::after) is at least a touch target
   centred on the name, drawn over nothing and taking no room, so a list row of `size/touch` (ui/PlayerList)
   keeps neighbours' tap areas apart. */
.seat-name {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--brand-text);
    font: inherit;
    vertical-align: baseline;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* The mark is the text's own height and sits on the middle of the name's first line, whatever size
   the line around it uses. */
.seat-name__icon {
    align-self: flex-start;
    inline-size: 1em;
    block-size: 1em;
    margin-block-start: calc((1lh - 1em) / 2);
}

.seat-name::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, var(--size-touch));
    height: max(100%, var(--size-touch));
    transform: translate(-50%, -50%);
}

.seat-name[data-you='true'] {
    font-weight: var(--type-body-strong-weight);
}

/* Hover only where a pointer hovers: a phone keeps "hover" on what was last tapped. */
.seat-name:focus-visible .seat-name__label {
    text-decoration: underline;
    text-decoration-thickness: var(--stroke-1);
    text-underline-offset: var(--stroke-2);
}

@media (hover: hover) {
    .seat-name:not(.seat-name--static):hover .seat-name__label {
        text-decoration: underline;
        text-decoration-thickness: var(--stroke-1);
        text-underline-offset: var(--stroke-2);
    }
}

.seat-name:not(.seat-name--static):active {
    color: var(--brand);
}

.seat-name:focus {
    outline: none;
}

.seat-name:focus-visible {
    border-radius: var(--r-sm);
    outline: var(--stroke-2) solid var(--focus);
    outline-offset: var(--stroke-2);
}

/* A long name wraps to a second line rather than losing its end — "(you)" included — and only a
   name longer than that is cut short. */
.seat-name__label {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.seat-name--static {
    color: inherit;
    cursor: auto;
}

.seat-name--static::after {
    content: none;
}

.legal-facts,
.legal-hours {
    display: grid;
    gap: var(--space-2);
    margin: 0;
}

.legal-facts__row,
.legal-hours__row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--space-3);
}

.legal-facts__label,
.legal-hours__day {
    color: var(--text-2);
}

.legal-hours__day::first-letter {
    text-transform: uppercase;
}

.legal-facts__value,
.legal-hours__time {
    margin: 0;
    color: var(--text);
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .legal-facts__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
}

.order-start-facts {
    flex: 1 1 auto;
    min-inline-size: 0;
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-2);
    border: var(--stroke-1) solid var(--border);
    border-radius: var(--r-lg);
    font: var(--type-body-small-weight) var(--type-body-small-size) / var(--type-body-small-line) var(--type-body-small-font);
    text-align: start;
}

.order-start-facts__title {
    margin: 0;
    font: var(--type-body-strong-weight) var(--type-body-strong-size) / var(--type-body-strong-line) var(--type-body-strong-font);
    color: var(--text);
}

.order-start-facts__service {
    display: grid;
    gap: var(--space-1);
}

.order-start-facts__service-title {
    margin: 0;
    font: var(--type-body-small-weight) var(--type-body-small-size) / var(--type-body-small-line) var(--type-body-small-font);
    color: var(--text-2);
}

/* The band under the menu tabs: at a table, where you sit and the table's actions; for pickup or
   delivery, what is open today and the link to share the cart. Arrangement only — the buttons,
   badges, icons and notices are design-system components. */

.cart-session-bar {
    background: var(--brand-soft);
    border-bottom: var(--stroke-1) solid var(--border);
    padding: var(--space-3) var(--space-5);
}

/* The band spans the menu list; its content lines up with the dish grid below it. */
.cart-session-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

/* Pickup / delivery */

.service-status-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    flex-shrink: 0;
}

.service-pill {
    gap: var(--space-1);
}

.share-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
}

.share-message {
    margin: 0;
    max-width: var(--layout-measure);
    color: var(--text-2);
    font: var(--type-body-default-weight) var(--type-body-default-size) / var(--type-body-default-line) var(--type-body-default-font);
    text-align: end;
}

.copy-link-btn {
    flex-shrink: 0;
}

/* At a table: the place and the guests on one line, the actions beside it (below it on a phone). */

.cart-session-bar--location .cart-session-bar-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-6);
    row-gap: var(--space-3);
}

.location-info {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

.location-badge,
.clients-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.location-badge {
    color: var(--text);
    font: var(--type-body-strong-weight) var(--type-body-strong-size) / var(--type-body-strong-line) var(--type-body-strong-font);
}

.clients-badge {
    color: var(--text-2);
    font: var(--type-body-default-weight) var(--type-body-default-size) / var(--type-body-default-line) var(--type-body-default-font);
}

.location-badge .ds-icon,
.clients-badge .ds-icon {
    flex-shrink: 0;
    color: var(--text-2);
}

.session-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* A slot only says how wide its button is; the button (and a refused call's notice) sit in the row. */
.session-actions__slot {
    display: contents;
}

.session-actions .assistance-refusal,
.cart-session-bar--location .treat-notice {
    grid-column: 1 / -1;
    flex-basis: 100%;
    margin: 0;
}

/* A phone: one column. The actions share each row equally, and an odd one out — the bill, when all
   three are there — takes a row of its own. A label never wraps while its button can grow: a pair
   too wide for one row in a long locale stacks instead, each button the full width. */
@media (max-width: 600px) {
    .cart-session-bar {
        padding-inline: var(--space-4);
    }

    .cart-session-bar-inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .service-status-container {
        justify-content: center;
    }

    .share-section {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .share-message {
        max-width: none;
        text-align: center;
    }

    .cart-session-bar--location .cart-session-bar-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .location-info {
        justify-content: space-between;
    }

    .session-actions__slot > .ds-button {
        flex: 1 1 0;
        min-inline-size: fit-content;
        white-space: normal;
        text-align: center;
    }

    .session-actions__slot--wide > .ds-button {
        flex-basis: 100%;
    }

    /* Once the bill is asked for, its status takes the button's place — and its row. */
    .session-actions__slot--wide > .ds-badge {
        flex-basis: 100%;
        justify-content: center;
    }
}

/* Session-ended banner (MES-126) — warm, non-blocking, sits above the menu. */
.session-ended-notice {
    margin: 12px 16px;
    padding: 16px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border: 1px solid #fdba74;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    text-align: center;
}

.session-ended-notice__title {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #7c2d12;
}

.session-ended-notice__message {
    margin: 0 0 10px;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #9a3412;
}

.session-ended-notice__hours {
    margin: 0 0 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #7c2d12;
}

.session-ended-notice__website {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 999px;
    background-color: #ea580c;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.session-ended-notice__website:hover,
.session-ended-notice__website:focus {
    background-color: #c2410c;
}

.consumer-protection {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2) var(--space-4);
}

.consumer-protection__anpc {
    font: var(--type-body-strong-weight) var(--type-body-strong-size) / var(--type-body-strong-line) var(--type-body-strong-font);
    color: var(--brand-text);
    text-decoration: underline;
    text-underline-offset: var(--stroke-2);
}

.menu-legal-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.menu-legal-footer__terms {
    font: var(--type-body-small-weight) var(--type-body-small-size) / var(--type-body-small-line) var(--type-body-small-font);
    color: var(--text-2);
}

.menu-list {
    padding: 0;
    width: 100%;
}

/* Menu Header Bar (Language & Login) */
.menu-header-bar {
    display: flex;
    justify-content: flex-end;
    padding: 8px 16px;
    background-color: #f5f5f5;
    /* Match app background or slightly different */
    width: 100%;
    z-index: 101;
    position: relative;
}

/* Menu Navigation Bar */
.menu-navigation {
    background-color: #2c3e50;
    padding: 0;
    margin-bottom: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    width: 100%;
}

.scroll-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 104;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.scroll-fade-left {
    left: 0;
    background: linear-gradient(to right,
            #2c3e50 0%,
            rgba(44, 62, 80, 0.9) 30%,
            rgba(44, 62, 80, 0.5) 60%,
            transparent 100%);
}

.scroll-fade-right {
    right: 0;
    background: linear-gradient(to left,
            #2c3e50 0%,
            rgba(44, 62, 80, 0.9) 30%,
            rgba(44, 62, 80, 0.5) 60%,
            transparent 100%);
}

.menu-tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 16px;
    padding: 0 16px;
    position: relative;
    z-index: 1;
    /* Add horizontal padding so first/last items aren't flush against edge */
}

/* Removed menu-header-actions-container as it's no longer used inside nav */

.menu-tabs::-webkit-scrollbar {
    display: none;
}

.menu-tab {
    background: none;
    border: none;
    color: #ecf0f1;
    padding: 16px 20px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease-in-out;
    border-bottom: 4px solid transparent;
    /* Slightly thicker indicator */
    min-width: fit-content;
    /* Allow natural width */
    flex-shrink: 0;
    /* Strip scrolls; a tab never squeezes narrower than its nowrap label */
    scroll-snap-align: center;
    opacity: 0.8;
    position: relative;
    z-index: 1;
}

/* The strip scrolls sideways, which clips anything drawn outside a tab: the ring sits inside it. */
.menu-tab:focus-visible {
    outline-offset: calc(-1 * var(--stroke-2));
}

.menu-tab:hover {
    background-color: transparent;
    /* Remove background hover for cleaner look, rely on opacity */
    opacity: 1;
    color: #fff;
}

.menu-tab.active {
    background-color: transparent;
    /* Keep background transparent */
    color: #ffffff;
    border-bottom-color: #3498db;
    /* Brighter blue for better contrast */
    opacity: 1;
    font-weight: 600;
}

/* Today's specials — the one tab that isn't a category, so it wears the offer's
   colour instead of blending into the strip. */
.menu-tab--specials {
    color: #fca5a5;
    opacity: 1;
}

.menu-tab--specials:hover,
.menu-tab--specials.active {
    color: #fecaca;
}

.menu-tab--specials.active {
    border-bottom-color: #ef4444;
}

/* Loading and Error States */
.menu-list-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007cba;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.menu-list-error {
    text-align: center;
    padding: 40px;
    color: #e74c3c;
}

.retry-button {
    background-color: #007cba;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}

.retry-button:hover {
    background-color: #005a87;
}

.menu-list-empty {
    text-align: center;
    padding: var(--space-10);
    color: var(--text-2);
}

.menu-list-empty--closed {
    padding: var(--space-8);
}

.menu-list-empty__title {
    font-size: var(--type-heading-section-size);
    margin-bottom: var(--space-4);
}


/* Category Filter */
.category-filter {
    margin: 20px auto;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    max-width: 1200px;
}

.category-filter h3 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 18px;
}

.category-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.category-button {
    background-color: white;
    border: 2px solid #ddd;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

.category-button:hover {
    border-color: #007cba;
    color: #007cba;
}

.category-button.active {
    background-color: #007cba;
    border-color: #007cba;
    color: white;
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px 20px calc(20px + var(--order-bar-height, 0px)) 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.no-products {
    text-align: center;
    padding: 40px;
    color: #666;
    grid-column: 1 / -1;
}

/* Responsive Design */
@media (max-width: 768px) {
    .menu-list {
        padding: 0;
    }

    .menu-tab {
        padding: 12px 16px;
        font-size: 14px;
        min-width: 100px;
    }


    .category-filter {
        margin: 15px auto;
        padding: 15px;
    }

    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 15px;
        padding: 15px 15px calc(15px + var(--order-bar-height, 0px)) 15px;
    }

    .category-buttons {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: 1fr;
    }

    .menu-tab {
        padding: 10px 12px;
        font-size: 13px;
        min-width: 80px;
    }
}

/* The footer at the end of the menu carries the order-bar bottom clearance, not the grid */
.menu-list:has(.menu-end-footer) .products-grid {
    padding-bottom: 20px;
}

@media (max-width: 768px) {
    .menu-list:has(.menu-end-footer) .products-grid {
        padding-bottom: 15px;
    }
}

/* End of the menu: the restaurant's logo, then the privacy link */
.menu-end-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: 16px 16px calc(16px + var(--order-bar-height, 0px));
}

.menu-logo-footer {
    display: flex;
    justify-content: center;
    opacity: 0.4;
}

.menu-privacy-link {
    font: var(--type-body-small-weight) var(--type-body-small-size) / var(--type-body-small-line) var(--type-body-small-font);
    color: var(--text-2);
}

.menu-logo-image {
    max-width: 120px;
    max-height: 48px;
    object-fit: contain;
}
/* The "added to your order" dialog's two lines; the dialog itself is the design system's. */
.add-to-cart-confirm__text {
    margin: 0 0 var(--space-2);
    color: var(--text);
}

.add-to-cart-confirm__hint {
    margin: 0;
    color: var(--text-2);
    font: var(--type-body-small-weight) var(--type-body-small-size) / var(--type-body-small-line) var(--type-body-small-font);
}

/* The guest's running total, pinned to the foot of the menu. The amount and the button keep to one
   line each at any phone width: the label sits above the amount instead of beside it. */
.order-summary-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--layer-overlay);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--brand);
    color: var(--on-brand);
    box-shadow: var(--shadow-lg);
}

.order-summary-bar__total {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.order-summary-bar__label {
    font: var(--type-body-small-weight) var(--type-body-small-size) / var(--type-body-small-line) var(--type-body-small-font);
}

.order-summary-bar__amount {
    font: var(--type-heading-card-weight) var(--type-heading-card-size) / var(--type-heading-card-line) var(--type-heading-card-font);
    white-space: nowrap;
}

.order-summary-bar__amount--changed {
    animation: order-summary-bar-fade-in var(--motion-progress) ease-out;
}

.order-summary-bar .view-order-button {
    flex-shrink: 0;
}

@keyframes order-summary-bar-fade-in {
    from {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .order-summary-bar__amount--changed {
        animation: none;
    }
}

.error-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--layer-dialog);
    padding: 20px;
}

.error-modal {
    background: white;
    border-radius: 12px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.error-modal.error-modal-error {
    border-top: 4px solid #dc3545;
}

.error-modal.error-modal-warning {
    border-top: 4px solid #ffc107;
}

.error-modal.error-modal-success {
    border-top: 4px solid #28a745;
}

.error-modal.error-modal-info {
    border-top: 4px solid #17a2b8;
}

/* Full screen for screens up to 1239px */
@media (max-width: 1239px) {
    .error-modal-overlay {
        padding: 0;
        align-items: flex-start;
    }
    
    .error-modal {
        max-width: 100%;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        box-shadow: none;
    }
}

.error-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
    background-color: #f8f9fa;
}

.error-modal-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #333;
    flex: 1;
}

.error-modal-close-btn {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.error-modal-close-btn:hover {
    background-color: #f0f0f0;
}

.error-modal-close-btn:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

.error-modal-content {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px;
}

.error-modal-message {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}

.error-modal-footer {
    padding: 20px;
    border-top: 1px solid #eee;
    background-color: #f8f9fa;
}

.error-modal-ok-btn {
    width: 100%;
    background-color: #007cba;
    color: white;
    border: none;
    padding: 16px 24px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.error-modal-ok-btn:hover {
    background-color: #005a87;
}

.error-modal-ok-btn:active {
    transform: translateY(1px);
}

.error-modal-ok-btn:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* Full screen styles for screens up to 1239px */
@media (max-width: 1239px) {
    .error-modal-header {
        padding: 16px;
        position: sticky;
        top: 0;
        z-index: 10;
        background-color: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .error-modal-title {
        font-size: 20px;
    }
    
    .error-modal-content {
        padding: 16px;
    }
    
    .error-modal-footer {
        padding: 16px;
        position: sticky;
        bottom: 0;
        background-color: white;
        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .error-modal-ok-btn {
        font-size: 16px;
        padding: 14px 20px;
    }
}

@media (max-width: 480px) {
    .error-modal-title {
        font-size: 18px;
    }
    
    .error-modal-message {
        font-size: 14px;
    }
}







.login-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: color-mix(in srgb, var(--overlay) calc(var(--opacity-backdrop) * 100%), transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--layer-dialog);
    padding: 20px;
}

.login-modal {
    background: var(--surface);
    border-radius: 12px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}

.login-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: var(--stroke-1) solid var(--border);
}

.login-modal-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}

.login-modal-title:focus-visible {
    outline: var(--stroke-2) solid var(--focus);
    outline-offset: 2px;
}

.login-modal-close-btn {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--text-2);
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.login-modal-close-btn:hover {
    background-color: var(--surface-2);
}

.login-modal-close-btn:focus-visible {
    outline: var(--stroke-2) solid var(--focus);
    outline-offset: 2px;
}

.login-modal-content {
    padding: 20px;
}

.login-tabs {
    display: flex;
    border-bottom: var(--stroke-2) solid var(--border);
    margin-bottom: 20px;
}

.login-tab {
    flex: 1;
    padding: 12px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 16px;
    color: var(--text-2);
    transition: all 0.2s;
}

.login-tab:hover {
    color: var(--brand-text);
}

.login-tab.active {
    color: var(--brand-text);
    border-bottom-color: var(--brand);
}

.login-tab:focus-visible {
    outline: var(--stroke-2) solid var(--focus);
    outline-offset: 2px;
}

.login-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-form-group label {
    font-weight: 500;
    color: var(--text);
}

.login-form-group input {
    padding: 12px;
    border: var(--stroke-1) solid var(--border-strong);
    border-radius: 4px;
    font-size: 16px;
}

.login-form-group input:focus-visible {
    outline: var(--stroke-2) solid var(--focus);
    outline-offset: 2px;
}

.login-send-code-btn,
.login-confirm-btn {
    padding: 12px 24px;
    background-color: var(--brand);
    color: var(--on-brand);
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.login-send-code-btn:hover:not(:disabled),
.login-confirm-btn:hover:not(:disabled) {
    background-color: var(--brand-hover);
}

.login-send-code-btn:disabled,
.login-confirm-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.login-send-code-btn:focus-visible,
.login-confirm-btn:focus-visible {
    outline: var(--stroke-2) solid var(--focus);
    outline-offset: 2px;
}

.login-back-btn {
    padding: 12px 24px;
    background: none;
    color: var(--brand-text);
    border: var(--stroke-1) solid var(--brand);
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.login-back-btn:hover {
    background-color: var(--brand-soft);
}

.login-back-btn:focus-visible {
    outline: var(--stroke-2) solid var(--focus);
    outline-offset: 2px;
}

.login-error {
    padding: 12px;
    background-color: var(--error-bg);
    color: var(--error);
    border-radius: 4px;
    border: var(--stroke-1) solid var(--error);
}

.login-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    border-bottom: var(--stroke-1) solid var(--border);
}

.login-divider span {
    padding: 0 16px;
    color: var(--text-2);
}

.google-signin-container {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.login-google-note {
    text-align: center;
    color: var(--text-2);
    font-size: 14px;
    margin-top: 16px;
}

@media (max-width: 1239px) {
    .login-modal-overlay {
        padding: 0;
        align-items: flex-start;
    }

    .login-modal {
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }
}

/* The link to the privacy policy, under every step of the sign-in. */
.login-privacy {
    margin: var(--space-4) 0 0;
    text-align: center;
    font: var(--type-body-small-weight) var(--type-body-small-size) / var(--type-body-small-line) var(--type-body-small-font);
}

.login-privacy a {
    color: var(--text-2);
    text-decoration: underline;
}

.diner-reservations {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border-top: 1px solid var(--border);
}

.diner-reservations__title {
    margin: 0;
    font-family: var(--type-heading-section-font);
    font-size: var(--type-heading-section-size);
    font-weight: var(--type-heading-section-weight);
    line-height: var(--type-heading-section-line);
    letter-spacing: var(--type-heading-section-tracking);
    color: var(--text);
}

.diner-reservations__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.user-details-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--layer-dialog);
    padding: 20px;
}

.user-details-modal {
    background: white;
    border-radius: 12px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.user-details-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.user-details-modal-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}

.user-details-modal-title:focus-visible {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

.user-details-modal-close-btn {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.user-details-modal-close-btn:hover {
    background-color: #f0f0f0;
}

.user-details-modal-close-btn:focus-visible {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

.user-details-modal-content {
    padding: 20px;
}

.user-details-field {
    margin-bottom: 20px;
}

.user-details-field label {
    display: block;
    font-weight: 500;
    color: #666;
    margin-bottom: 8px;
    font-size: 14px;
}

.user-details-value {
    font-size: 16px;
    color: #333;
    padding: 8px 0;
}

.user-details-modal-footer {
    padding: 20px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.user-details-view-orders-btn {
    padding: 12px 24px;
    background-color: #007cba;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.user-details-view-orders-btn:hover {
    background-color: #005a87;
}

.user-details-view-orders-btn:focus-visible {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

.user-details-logout-btn {
    padding: 12px 24px;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.user-details-logout-btn:hover {
    background-color: #c82333;
}

.user-details-logout-btn:focus-visible {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

@media (max-width: 1239px) {
    .user-details-modal-overlay {
        padding: 0;
        align-items: flex-start;
    }

    .user-details-modal {
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }
}

/* Details and reservations scroll together; the header and the footer stay put. */
.user-details-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.update-toast {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2500;
  background-color: #1976d2;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  font-size: 14px;
  animation: update-toast-slide-down 0.3s ease-out;
}

.update-toast__text {
  flex-shrink: 1;
}

.update-toast__button {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.update-toast__button:active {
  background: rgba(255, 255, 255, 0.35);
}

@keyframes update-toast-slide-down {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.page-block-overlay {
    position: fixed;
    inset: 0;
    z-index: 900; /* below UpdateToast (z-index 2500) + ConnectivityBanner (1000), above the app */
    background: rgba(0, 0, 0, 0.45);
    cursor: default;
}

.connectivity-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    font-size: 14px;
    color: #fff;
    background: #b3541e;
}

.connectivity-banner--offline {
    background: #7a1f1f;
}

.connectivity-banner__text {
    max-width: 640px;
}

.connectivity-banner__button {
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: transparent;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.connectivity-banner__button:active {
    background: rgba(255, 255, 255, 0.15);
}

/* The ordering pause sits at the top of the page, in its flow, above the menu it pauses. */
.global-notices__paused {
    margin: var(--space-3) var(--space-4) 0;
}

.language-selector {
  position: relative;
  display: inline-block;
}

.language-selector-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: all 0.2s;
}

.language-selector-button:hover {
  background: #f5f5f5;
  border-color: #007cba;
}

.language-selector-button:focus-visible {
  outline: 2px solid #007cba;
  outline-offset: 2px;
}

.language-flag {
  font-size: 18px;
  line-height: 1;
}

.language-name {
  font-weight: 500;
}

.language-arrow {
  font-size: 10px;
  color: #666;
  margin-left: 4px;
}

.language-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  min-width: 200px;
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 2147483647;
}

.language-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: #fff;
  border: none;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  font-size: 14px;
  text-align: left;
  transition: background 0.2s;
}

.language-option:last-child {
  border-bottom: none;
}

.language-option:hover {
  background: #f5f5f5;
}

.language-option:focus-visible {
  outline: 2px solid #007cba;
  outline-offset: -2px;
}

.language-option.active {
  background: #e7f5ff;
  font-weight: 600;
}

.language-check {
  margin-left: auto;
  color: #007cba;
  font-weight: bold;
}



.client-auth-button {
    padding: 8px 16px;
    background-color: #007cba;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.client-auth-button:hover {
    background-color: #005a87;
}

.client-auth-button:focus-visible {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

.menu-header-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

/* The table's strips reach a guest wherever they are in the menu (MES-364): on the toast layer, above
   every sheet, modal and page of it. On the menu they stack just above the order bar (App sets
   --order-bar-height); over an overlay they go to the top, clear of its footer's buttons. The empty
   stack takes no taps meant for what is behind it. */
.table-strips {
    position: fixed;
    inset-inline: var(--space-3);
    bottom: calc(var(--order-bar-height) + var(--space-3));
    z-index: var(--layer-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
}

.table-strips > * {
    pointer-events: auto;
}

body[data-scroll-locked] .table-strips {
    top: var(--space-3);
    bottom: auto;
}

/* Arrangement only: the sheet, choices, fields and buttons are design-system components. */
.refund-request-sheet__intro {
    margin: 0 0 var(--space-3);
    color: var(--text-2);
}

.online-payment-refund {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.online-payment-refund__note {
    margin: 0;
    color: var(--text-2);
    font-size: var(--type-body-small-size);
}

/* Arrangement only: the sheet, spinner, alert and buttons are design-system components. */
.online-payment__waiting {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.online-payment__amount {
    font-weight: var(--type-body-strong-weight);
    margin: 0 0 var(--space-2);
}

.App {
  min-height: 100vh;
  background-color: #f5f5f5;
}


main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

/* Embeddable styles - can be overridden by parent container */
.App.embeddable {
  background-color: transparent;
  min-height: auto;
}


.App.embeddable main {
  padding: 0;
  max-width: none;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #007cba;
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 100;
  border-radius: 0 0 4px 0;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.app-error-fallback {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px;
    text-align: center;
}

.app-error-fallback__button {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    background: #b3541e;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}

.menu-page-gate {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: var(--bg);
}

.legal-section {
    display: grid;
    gap: var(--space-2);
}

.legal-section__title {
    margin: 0;
    font: var(--type-heading-card-weight) var(--type-heading-card-size) / var(--type-heading-card-line) var(--type-heading-card-font);
    color: var(--text);
}

.legal-section__paragraph {
    margin: 0;
    color: var(--text);
    /* A restaurant's own clauses may break lines inside a paragraph. */
    white-space: pre-line;
}

.legal-section--own {
    padding: var(--space-4);
    background: var(--surface-2);
    border: var(--stroke-1) solid var(--border-strong);
    border-radius: var(--r-lg);
}

.legal-section__own-title {
    margin: 0;
    font: var(--type-heading-section-weight) var(--type-heading-section-size) / var(--type-heading-section-line) var(--type-heading-section-font);
    color: var(--text);
}

.legal-section__hint {
    margin: 0;
    color: var(--text-2);
    font: var(--type-body-small-weight) var(--type-body-small-size) / var(--type-body-small-line) var(--type-body-small-font);
}

/* At least the screen's height: on a short page the background otherwise stops where the terms do. */
.terms-page {
    box-sizing: border-box;
    min-block-size: 100dvh;
    background: var(--bg);
    color: var(--text);
    font: var(--type-body-default-weight) var(--type-body-default-size) / var(--type-body-default-line) var(--type-body-default-font);
}

.terms-page__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    max-inline-size: var(--layout-page);
    margin-inline: auto;
    padding: var(--space-3) var(--space-4);
}

.terms-page__main {
    padding: 0 var(--space-4) var(--space-6);
}

.terms-page__content {
    display: grid;
    gap: var(--space-5);
}

.terms-page__waiting {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding-block: var(--space-12);
    color: var(--text-2);
}

.terms-page__note,
.terms-page__version {
    margin: 0;
    color: var(--text-2);
}

.terms-page__end {
    display: flex;
    justify-content: center;
    padding: 0 var(--space-4) var(--space-8);
}

.terms-layer {
    display: grid;
    gap: var(--space-4);
}

.terms-layer__group {
    display: grid;
    gap: var(--space-2);
}

.terms-layer__subheading {
    margin: 0;
    font: var(--type-heading-card-weight) var(--type-heading-card-size) / var(--type-heading-card-line) var(--type-heading-card-font);
}

.terms-layer__minor {
    margin: var(--space-2) 0 0;
    font: var(--type-body-strong-weight) var(--type-body-strong-size) / var(--type-body-strong-line) var(--type-body-strong-font);
    color: var(--text-2);
}

.terms-layer__note {
    margin: 0;
    color: var(--text-2);
}

.terms-layer__link,
.terms-layer a {
    color: var(--brand-text);
    text-underline-offset: var(--stroke-2);
}

.terms-layer__consumer {
    justify-content: flex-start;
}

.terms-layer__marks {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* nunito-sans-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/meniu/static/media/nunito-sans-cyrillic-ext-400-normal.e56560ddbf70cfcd11a0.woff2) format('woff2'), url(/meniu/static/media/nunito-sans-cyrillic-ext-400-normal.d50263fc14a039450570.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* nunito-sans-cyrillic-400-normal */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/meniu/static/media/nunito-sans-cyrillic-400-normal.d2d19e40cd3d31424bcc.woff2) format('woff2'), url(/meniu/static/media/nunito-sans-cyrillic-400-normal.43f72bd940e8a99176d2.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* nunito-sans-vietnamese-400-normal */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/meniu/static/media/nunito-sans-vietnamese-400-normal.30006829d5ac51bab9b5.woff2) format('woff2'), url(/meniu/static/media/nunito-sans-vietnamese-400-normal.e66452ef00342981101e.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* nunito-sans-latin-ext-400-normal */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/meniu/static/media/nunito-sans-latin-ext-400-normal.b97108ec388ef30a7560.woff2) format('woff2'), url(/meniu/static/media/nunito-sans-latin-ext-400-normal.312e9f4354ae9eb4f435.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* nunito-sans-latin-400-normal */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/meniu/static/media/nunito-sans-latin-400-normal.bc3fe9e22e911a5ec378.woff2) format('woff2'), url(/meniu/static/media/nunito-sans-latin-400-normal.d086c8010ad10f56e03b.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* nunito-sans-cyrillic-ext-600-normal */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/meniu/static/media/nunito-sans-cyrillic-ext-600-normal.37582765c3d9ccc7f3f8.woff2) format('woff2'), url(/meniu/static/media/nunito-sans-cyrillic-ext-600-normal.26d50f550e20d31193e3.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* nunito-sans-cyrillic-600-normal */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/meniu/static/media/nunito-sans-cyrillic-600-normal.a3d451976cda4c7b5aa0.woff2) format('woff2'), url(/meniu/static/media/nunito-sans-cyrillic-600-normal.245bc8cb0f38c3f26bd9.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* nunito-sans-vietnamese-600-normal */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/meniu/static/media/nunito-sans-vietnamese-600-normal.2d8ebc3362ba6d2cf556.woff2) format('woff2'), url(/meniu/static/media/nunito-sans-vietnamese-600-normal.78486e9477542a1d3c79.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* nunito-sans-latin-ext-600-normal */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/meniu/static/media/nunito-sans-latin-ext-600-normal.fa58d84a884c4e1eb97c.woff2) format('woff2'), url(/meniu/static/media/nunito-sans-latin-ext-600-normal.0835cc9e87b5c86899c7.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* nunito-sans-latin-600-normal */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/meniu/static/media/nunito-sans-latin-600-normal.e850d88bba951b27a92d.woff2) format('woff2'), url(/meniu/static/media/nunito-sans-latin-600-normal.ab06728f9dc94c4a13fb.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* nunito-sans-cyrillic-ext-700-normal */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/meniu/static/media/nunito-sans-cyrillic-ext-700-normal.124d54cf6b02b62a6227.woff2) format('woff2'), url(/meniu/static/media/nunito-sans-cyrillic-ext-700-normal.4e89025a576496e0c818.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* nunito-sans-cyrillic-700-normal */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/meniu/static/media/nunito-sans-cyrillic-700-normal.5b8558b8b5dca5b265ec.woff2) format('woff2'), url(/meniu/static/media/nunito-sans-cyrillic-700-normal.b53cc7c90f2a764f7f60.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* nunito-sans-vietnamese-700-normal */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/meniu/static/media/nunito-sans-vietnamese-700-normal.3d04d332e0bdf611903b.woff2) format('woff2'), url(/meniu/static/media/nunito-sans-vietnamese-700-normal.db53bfe2a4606ae331a2.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* nunito-sans-latin-ext-700-normal */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/meniu/static/media/nunito-sans-latin-ext-700-normal.f88f6a2586ef6edf95e0.woff2) format('woff2'), url(/meniu/static/media/nunito-sans-latin-ext-700-normal.100999aa0f3aacddf6d4.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* nunito-sans-latin-700-normal */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/meniu/static/media/nunito-sans-latin-700-normal.cde3646c5c538d4a979f.woff2) format('woff2'), url(/meniu/static/media/nunito-sans-latin-700-normal.10d7b0b39777fba0030a.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* GENERATED by packages/design-system/scripts/build.mjs from tokens.json. Do not edit; edit tokens.json and run `npm run build -w @mesea/design-system`. */
:root {
  /* Primitives — never use directly in a component; bind to a semantic token. */
  --navy-50: #eef2f7;
  --navy-100: #d6dee9;
  --navy-200: #b3c1d6;
  --navy-250: #a9bbd9;
  --navy-275: #93a9d1;
  --navy-300: #8b9fbd;
  --navy-350: #7c95c4;
  --navy-400: #5f7aa3;
  --navy-500: #3b5689;
  --navy-600: #1a3668;
  --navy-700: #14294f;
  --navy-800: #0f2347;
  --navy-900: #0a1830;
  --navy-950: #060f1f;
  --navy-350-a14: #7c95c424;
  --navy-350-a28: #7c95c447;
  --orange-50: #fff4ec;
  --orange-75: #fff1e6;
  --orange-100: #ffe4d0;
  --orange-200: #ffc8a3;
  --orange-300: #ffa66d;
  --orange-400: #f9843d;
  --orange-500: #e8641c;
  --orange-600: #c5500f;
  --orange-650: #b6480c;
  --orange-700: #9c3f0d;
  --orange-800: #7a3210;
  --orange-900: #5c2710;
  --orange-950: #3a1608;
  --orange-400-a16: #f9843d29;
  --neutral-0: #ffffff;
  --neutral-25: #f4f6f9;
  --neutral-50: #f7f8fa;
  --neutral-100: #eff1f5;
  --neutral-200: #e3e7ed;
  --neutral-300: #cfd5de;
  --neutral-400: #9aa4b4;
  --neutral-500: #6b7688;
  --neutral-600: #4b5567;
  --neutral-700: #353d4c;
  --neutral-750: #2a3140;
  --neutral-800: #232935;
  --neutral-850: #1c212c;
  --neutral-900: #161a23;
  --neutral-950: #0e1117;
  --green-50: #e6f7f0;
  --green-100: #dcefe6;
  --green-400: #34d399;
  --green-500: #059669;
  --green-600: #2e7d5b;
  --green-400-a14: #34d39924;
  --amber-50: #fdf1dc;
  --amber-100: #f6e7cc;
  --amber-400: #fbbf24;
  --amber-700: #b45309;
  --amber-800: #9a6412;
  --amber-400-a14: #fbbf2424;
  --red-50: #fbeaea;
  --red-400: #f87171;
  --red-600: #c02f2f;
  --red-400-a14: #f8717124;
  --slate-100: #e7eaef;
  --slate-500: #5a6270;
  --purple-600: #7c3aed;
  --pink-500: #ec4899;
  --brown-600: #7c4a21;
  /* Semantic colors, light */
  --bg: var(--neutral-25);
  --surface: var(--neutral-0);
  --surface-2: var(--neutral-50);
  --surface-3: var(--neutral-100);
  --overlay: var(--neutral-950);
  --text: var(--neutral-900);
  --text-2: var(--neutral-600);
  --text-3: var(--neutral-500);
  --on-brand: var(--neutral-0);
  --on-accent: var(--neutral-0);
  --border: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --brand: var(--navy-600);
  --brand-hover: var(--navy-700);
  --brand-text: var(--navy-600);
  --brand-soft: var(--navy-50);
  --brand-soft-2: var(--navy-100);
  --accent: var(--orange-600);
  --accent-hover: var(--orange-700);
  --accent-bright: var(--orange-500);
  --accent-text: var(--orange-650);
  --accent-soft: var(--orange-75);
  --focus: var(--navy-500);
  --success: var(--green-500);
  --success-bg: var(--green-50);
  --warning: var(--amber-700);
  --warning-bg: var(--amber-50);
  --error: var(--red-600);
  --error-bg: var(--red-50);
  --info: var(--navy-500);
  --info-bg: var(--navy-50);
  --course-fired: var(--green-600);
  --course-fired-bg: var(--green-100);
  --course-held: var(--amber-800);
  --course-held-bg: var(--amber-100);
  --course-done: var(--slate-500);
  --course-done-bg: var(--slate-100);
  /* Space and shape */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;
  --size-touch: 44px;
  --size-row-compact: 36px;
  --size-icon-sm: 16px;
  --size-icon: 20px;
  --size-icon-lg: 22px;
  --size-control-sm: 28px;
  --size-control: 36px;
  --size-control-lg: 44px;
  --size-button-sm: 26px;
  --size-media-tile: 160px;
  --size-joystick: 112px;
  --layout-page: 720px;
  --layout-dialog: 480px;
  --layout-measure: 528px;
  --layout-page-wide: 1120px;
  --layout-side-panel: 320px;
  --layout-plan-min-height: 360px;
  --stroke-1: 1px;
  --stroke-2: 2px;
  /* Opacity and layers */
  --opacity-disabled: 0.45;
  --opacity-hover-shade: 0.12;
  --opacity-backdrop: 0.48;
  --opacity-overlay: 0.85;
  --layer-sticky: 10;
  --layer-overlay: 1000;
  --layer-dialog: 1050;
  --layer-toast: 1100;
  /* Motion */
  --motion-fast: 120ms;
  --motion-spin: 800ms;
  --motion-settle: 600ms;
  --motion-progress: 1100ms;
  --motion-celebrate: 2400ms;
  /* Fonts */
  --font-display: 'Bricolage Grotesque', 'Nunito Sans', system-ui, sans-serif;
  --font-body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  /* Typography: one set of custom properties per text style */
  --type-display-page-title-font: var(--font-display);
  --type-display-page-title-weight: 600;
  --type-display-page-title-size: 28px;
  --type-display-page-title-line: 34px;
  --type-display-page-title-tracking: -0.4px;
  --type-display-page-title-mobile-font: var(--font-display);
  --type-display-page-title-mobile-weight: 600;
  --type-display-page-title-mobile-size: 24px;
  --type-display-page-title-mobile-line: 28px;
  --type-display-page-title-mobile-tracking: -0.35px;
  --type-display-money-font: var(--font-display);
  --type-display-money-weight: 600;
  --type-display-money-size: 32px;
  --type-display-money-line: 36px;
  --type-display-money-tracking: -0.3px;
  --type-display-kpi-font: var(--font-display);
  --type-display-kpi-weight: 600;
  --type-display-kpi-size: 30px;
  --type-display-kpi-line: 36px;
  --type-display-kpi-tracking: -0.3px;
  --type-display-cover-font: var(--font-display);
  --type-display-cover-weight: 600;
  --type-display-cover-size: 56px;
  --type-display-cover-line: 60px;
  --type-display-cover-tracking: -1px;
  --type-heading-section-font: var(--font-body);
  --type-heading-section-weight: 700;
  --type-heading-section-size: 18px;
  --type-heading-section-line: 26px;
  --type-heading-section-tracking: 0px;
  --type-heading-card-font: var(--font-body);
  --type-heading-card-weight: 700;
  --type-heading-card-size: 16px;
  --type-heading-card-line: 22px;
  --type-heading-card-tracking: 0px;
  --type-body-default-font: var(--font-body);
  --type-body-default-weight: 400;
  --type-body-default-size: 14px;
  --type-body-default-line: 20px;
  --type-body-default-tracking: 0px;
  --type-body-strong-font: var(--font-body);
  --type-body-strong-weight: 700;
  --type-body-strong-size: 14px;
  --type-body-strong-line: 20px;
  --type-body-strong-tracking: 0px;
  --type-body-large-font: var(--font-body);
  --type-body-large-weight: 400;
  --type-body-large-size: 16px;
  --type-body-large-line: 24px;
  --type-body-large-tracking: 0px;
  --type-body-small-font: var(--font-body);
  --type-body-small-weight: 400;
  --type-body-small-size: 13px;
  --type-body-small-line: 18px;
  --type-body-small-tracking: 0px;
  --type-label-field-font: var(--font-body);
  --type-label-field-weight: 700;
  --type-label-field-size: 13px;
  --type-label-field-line: 18px;
  --type-label-field-tracking: 0px;
  --type-label-button-font: var(--font-body);
  --type-label-button-weight: 700;
  --type-label-button-size: 14px;
  --type-label-button-line: 20px;
  --type-label-button-tracking: 0px;
  --type-label-button-small-font: var(--font-body);
  --type-label-button-small-weight: 700;
  --type-label-button-small-size: 13px;
  --type-label-button-small-line: 18px;
  --type-label-button-small-tracking: 0px;
  --type-label-badge-font: var(--font-body);
  --type-label-badge-weight: 700;
  --type-label-badge-size: 12px;
  --type-label-badge-line: 16px;
  --type-label-badge-tracking: 0px;
  --type-label-tab-bar-font: var(--font-body);
  --type-label-tab-bar-weight: 700;
  --type-label-tab-bar-size: 11px;
  --type-label-tab-bar-line: 14px;
  --type-label-tab-bar-tracking: 0px;
  --type-code-token-font: var(--font-mono);
  --type-code-token-weight: 400;
  --type-code-token-size: 12px;
  --type-code-token-line: 18px;
  --type-code-token-tracking: 0px;
  /* Shadows, light */
  --shadow-sm: 0px 1px 2px 0px #1118270d, 0px 1px 1px 0px #11182708;
  --shadow-md: 0px 4px 16px -2px #11182712, 0px 2px 6px -1px #1118270a;
  --shadow-lg: 0px 20px 40px -12px #1118271f, 0px 8px 16px -4px #1118270d;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--neutral-950);
    --surface: var(--neutral-900);
    --surface-2: var(--neutral-850);
    --surface-3: var(--neutral-800);
    --overlay: var(--neutral-950);
    --text: var(--neutral-100);
    --text-2: var(--neutral-300);
    --text-3: var(--neutral-400);
    --on-brand: var(--navy-900);
    --on-accent: var(--orange-950);
    --border: var(--neutral-750);
    --border-strong: var(--neutral-700);
    --brand: var(--navy-350);
    --brand-hover: var(--navy-275);
    --brand-text: var(--navy-250);
    --brand-soft: var(--navy-350-a14);
    --brand-soft-2: var(--navy-350-a28);
    --accent: var(--orange-400);
    --accent-hover: var(--orange-300);
    --accent-bright: var(--orange-400);
    --accent-text: var(--orange-300);
    --accent-soft: var(--orange-400-a16);
    --focus: var(--navy-250);
    --success: var(--green-400);
    --success-bg: var(--green-400-a14);
    --warning: var(--amber-400);
    --warning-bg: var(--amber-400-a14);
    --error: var(--red-400);
    --error-bg: var(--red-400-a14);
    --info: var(--navy-250);
    --info-bg: var(--navy-350-a14);
    --course-fired: var(--green-400);
    --course-fired-bg: var(--green-400-a14);
    --course-held: var(--amber-400);
    --course-held-bg: var(--amber-400-a14);
    --course-done: var(--neutral-400);
    --course-done-bg: var(--neutral-800);
    --shadow-sm: 0px 1px 2px 0px #00000066;
    --shadow-md: 0px 4px 16px -2px #00000080;
    --shadow-lg: 0px 20px 40px -12px #00000099;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: var(--neutral-950);
  --surface: var(--neutral-900);
  --surface-2: var(--neutral-850);
  --surface-3: var(--neutral-800);
  --overlay: var(--neutral-950);
  --text: var(--neutral-100);
  --text-2: var(--neutral-300);
  --text-3: var(--neutral-400);
  --on-brand: var(--navy-900);
  --on-accent: var(--orange-950);
  --border: var(--neutral-750);
  --border-strong: var(--neutral-700);
  --brand: var(--navy-350);
  --brand-hover: var(--navy-275);
  --brand-text: var(--navy-250);
  --brand-soft: var(--navy-350-a14);
  --brand-soft-2: var(--navy-350-a28);
  --accent: var(--orange-400);
  --accent-hover: var(--orange-300);
  --accent-bright: var(--orange-400);
  --accent-text: var(--orange-300);
  --accent-soft: var(--orange-400-a16);
  --focus: var(--navy-250);
  --success: var(--green-400);
  --success-bg: var(--green-400-a14);
  --warning: var(--amber-400);
  --warning-bg: var(--amber-400-a14);
  --error: var(--red-400);
  --error-bg: var(--red-400-a14);
  --info: var(--navy-250);
  --info-bg: var(--navy-350-a14);
  --course-fired: var(--green-400);
  --course-fired-bg: var(--green-400-a14);
  --course-held: var(--amber-400);
  --course-held-bg: var(--amber-400-a14);
  --course-done: var(--neutral-400);
  --course-done-bg: var(--neutral-800);
  --shadow-sm: 0px 1px 2px 0px #00000066;
  --shadow-md: 0px 4px 16px -2px #00000080;
  --shadow-lg: 0px 20px 40px -12px #00000099;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-spin: 3200ms;
  }
}

.ds-focusable:focus-visible{outline:var(--stroke-2) solid var(--focus);outline-offset:var(--stroke-2)}.ds-visually-hidden{inline-size:var(--stroke-1);block-size:var(--stroke-1);margin:calc(-1 * var(--stroke-1));clip-path:inset(50%);white-space:nowrap;border:0;padding:0;position:absolute;overflow:hidden}.ds-icon{inline-size:var(--size-icon);block-size:var(--size-icon);vertical-align:middle;flex:none;display:inline-block}.ds-icon>*{vector-effect:non-scaling-stroke}.ds-icon--sm{inline-size:var(--size-icon-sm);block-size:var(--size-icon-sm)}.ds-icon--lg{inline-size:var(--size-icon-lg);block-size:var(--size-icon-lg)}.ds-logo{inline-size:auto;block-size:var(--size-icon);aspect-ratio:231/44;flex:none;display:block}.ds-logo--brand{color:var(--brand)}.ds-logo--inherit{color:inherit}.ds-logo--sm{block-size:var(--size-icon-sm)}.ds-logo--lg{block-size:var(--space-6)}.ds-sal-pictogram{border-radius:var(--r-sm);flex:none;line-height:0;display:inline-block}.ds-sal-pictogram__image{object-fit:contain;display:block}.ds-card-brand-mark{block-size:var(--size-control-sm);padding-inline:var(--space-2);background:var(--surface);border:var(--stroke-1) solid var(--border);border-radius:var(--r-sm);flex:none;justify-content:center;align-items:center;display:inline-flex}.ds-card-brand-mark__image{inline-size:auto;block-size:var(--size-icon);display:block}.ds-spinner{color:var(--brand);flex:none;display:inline-flex}.ds-spinner__ring{inline-size:var(--size-icon);block-size:var(--size-icon);animation:ds-spin var(--motion-spin) linear infinite}.ds-spinner--sm .ds-spinner__ring{inline-size:var(--size-icon-sm);block-size:var(--size-icon-sm)}.ds-spinner--lg .ds-spinner__ring{inline-size:var(--size-control);block-size:var(--size-control)}.ds-spinner__track{stroke:var(--brand-soft-2)}.ds-spinner__arc{stroke:currentColor;stroke-dasharray:30 100}@keyframes ds-spin{to{transform:rotate(1turn)}}.ds-progress{inline-size:100%;block-size:var(--space-1);border-radius:var(--r-full);background:var(--brand-soft);position:relative;overflow:hidden}.ds-progress--sm{block-size:var(--stroke-2)}.ds-progress__bar{border-radius:inherit;background:var(--brand);block-size:100%;display:block}.ds-progress--indeterminate .ds-progress__bar{inline-size:40%;animation:ds-progress-slide var(--motion-progress) ease-in-out infinite}@keyframes ds-progress-slide{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media (prefers-reduced-motion:reduce){.ds-progress--indeterminate .ds-progress__bar{inline-size:100%;animation:none}}.ds-button{box-sizing:border-box;justify-content:center;align-items:center;gap:var(--space-2);min-block-size:var(--size-control);padding-block:0;padding-inline:var(--space-4);border:var(--stroke-1) solid transparent;border-radius:var(--r-md);font:var(--type-label-button-weight) var(--type-label-button-size) / var(--type-label-button-line) var(--type-label-button-font);letter-spacing:var(--type-label-button-tracking);white-space:nowrap;cursor:pointer;transition:background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease;margin:0;text-decoration:none;display:inline-flex}.ds-button--sm{gap:var(--space-1);min-block-size:var(--size-button-sm);padding-inline:var(--space-3);font:var(--type-label-button-small-weight) var(--type-label-button-small-size) / var(--type-label-button-small-line) var(--type-label-button-small-font);letter-spacing:var(--type-label-button-small-tracking)}.ds-button--lg{min-block-size:var(--size-control-lg);padding-inline:var(--space-5)}.ds-button--icon-only{inline-size:var(--size-control);padding-inline:0}.ds-button--sm.ds-button--icon-only{inline-size:var(--size-button-sm)}.ds-button--lg.ds-button--icon-only{inline-size:var(--size-control-lg)}@media (pointer:coarse){.ds-button--md{min-block-size:var(--size-touch)}.ds-button--md.ds-button--icon-only{inline-size:var(--size-touch)}}.ds-button--primary{background:var(--brand);color:var(--on-brand)}.ds-button--secondary{border-color:var(--border-strong);background:var(--surface);color:var(--brand-text)}.ds-button--ghost{color:var(--brand-text);background:0 0}.ds-button--accent{background:var(--accent);color:var(--on-accent)}.ds-button--danger{background:var(--error);color:var(--on-brand)}.ds-button:where(:not(:disabled,[aria-disabled=true])):hover{text-decoration:none}.ds-button--primary:where(:not(:disabled,[aria-disabled=true])):hover{background:var(--brand-hover)}.ds-button--secondary:where(:not(:disabled,[aria-disabled=true])):hover,.ds-button--ghost:where(:not(:disabled,[aria-disabled=true])):hover{background:var(--brand-soft)}.ds-button--accent:where(:not(:disabled,[aria-disabled=true])):hover{background:var(--accent-hover)}.ds-button--danger:where(:not(:disabled,[aria-disabled=true])):hover{background:color-mix(in srgb, var(--error), var(--text) calc(var(--opacity-hover-shade) * 100%))}.ds-button:disabled,.ds-button[aria-disabled=true]{opacity:var(--opacity-disabled);cursor:not-allowed}.ds-button.ds-button--busy{opacity:1;cursor:progress;position:relative;overflow:hidden}.ds-button--busy .ds-spinner{color:inherit}.ds-button--busy .ds-spinner__track{stroke:#0000}.ds-button__progress{block-size:var(--stroke-2);pointer-events:none;position:absolute;inset-block-end:0;inset-inline:0;overflow:hidden}.ds-button__progress-bar{block-size:100%;inline-size:40%;animation:ds-progress-slide var(--motion-progress) ease-in-out infinite;background:currentColor;display:block}@media (prefers-reduced-motion:reduce){.ds-button__progress-bar{inline-size:100%;animation:none}}.ds-action-bar{box-sizing:border-box;z-index:var(--layer-sticky);gap:var(--space-3);padding:var(--space-3) var(--space-4);border-block-start:var(--stroke-1) solid var(--border);background:var(--surface);padding-block-end:calc(var(--space-3) + env(safe-area-inset-bottom,0px));display:grid;position:sticky;inset-block-end:0}.ds-action-bar--two{grid-template-columns:1fr 1fr}.ds-action-bar>.ds-button{inline-size:100%;min-block-size:var(--size-control-lg)}.ds-fab{box-sizing:border-box;inline-size:calc(var(--size-touch) + var(--space-2));block-size:calc(var(--size-touch) + var(--space-2));border-radius:var(--r-lg);background:var(--brand);color:var(--on-brand);box-shadow:var(--shadow-md);cursor:pointer;transition:background-color var(--motion-fast) ease;border:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.ds-fab:hover{background:var(--brand-hover)}.ds-fab:disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.ds-field{box-sizing:border-box;gap:var(--space-1);flex-direction:column;min-inline-size:0;display:flex}.ds-field__label{color:var(--text);font:var(--type-label-field-weight) var(--type-label-field-size) / var(--type-label-field-line) var(--type-label-field-font)}.ds-field__control{box-sizing:border-box;inline-size:100%;min-block-size:var(--size-control);padding-block:0;padding-inline:var(--space-3);border:var(--stroke-1) solid var(--border-strong);border-radius:var(--r-md);background:var(--surface);color:var(--text);font:var(--type-body-default-weight) var(--type-body-default-size) / var(--type-body-default-line) var(--type-body-default-font);transition:border-color var(--motion-fast) ease;margin:0}.ds-field--lg .ds-field__control{min-block-size:var(--size-control-lg);padding-inline:var(--space-4);font-size:var(--type-body-large-size);line-height:var(--type-body-large-line)}@media (pointer:coarse){.ds-field--md .ds-field__control{min-block-size:var(--size-touch)}}.ds-field__control::placeholder{color:var(--text-3)}.ds-field__control:hover{border-color:var(--text-3)}.ds-field__control:focus-visible{border-color:var(--focus);outline:var(--stroke-2) solid var(--focus);outline-offset:var(--stroke-2)}.ds-field--error .ds-field__control{border-color:var(--error)}.ds-field__control:disabled{background:var(--surface-2);cursor:not-allowed}.ds-field--disabled{opacity:var(--opacity-disabled)}textarea.ds-field__control{padding-block:var(--space-2);resize:vertical}.ds-field__select{display:flex;position:relative}.ds-field__select>select{appearance:none;cursor:pointer;padding-inline-end:calc(var(--space-3) + var(--size-icon) + var(--space-2))}.ds-field__select>.ds-icon{color:var(--text-2);pointer-events:none;margin-block:auto;position:absolute;inset-block:0;inset-inline-end:var(--space-3)}.ds-field__message{align-items:flex-start;gap:var(--space-1);color:var(--text-2);font:var(--type-body-small-weight) var(--type-body-small-size) / var(--type-body-small-line) var(--type-body-small-font);margin:0;display:flex}.ds-field__message--error{color:var(--error)}.ds-field__message>.ds-icon{margin-block-start:calc((var(--type-body-small-line) - var(--size-icon-sm)) / 2)}.ds-time-field .ds-field__control{min-inline-size:calc(5ch + 4 * var(--space-4));font-variant-numeric:tabular-nums}.ds-date-field__row{align-items:center;gap:var(--space-1);display:flex;position:relative}.ds-date-field .ds-field__control{min-inline-size:calc(10ch + 2 * var(--space-4));font-variant-numeric:tabular-nums}.ds-date-field__picker{flex:none}.ds-date-field__native{inline-size:var(--stroke-1);block-size:var(--stroke-1);opacity:0;pointer-events:none;border:0;padding:0;position:absolute;inset-block-end:0;inset-inline-end:0}.ds-combobox__anchor{flex-direction:column;display:flex;position:relative}.ds-combobox__status{color:var(--text-3);font:var(--type-body-small-weight) var(--type-body-small-size) / var(--type-body-small-line) var(--type-body-small-font);pointer-events:none;position:absolute;inset-block-start:50%;inset-inline-end:var(--space-3);transform:translateY(-50%)}.ds-combobox__list{--ds-combobox-offset:var(--space-1);--ds-combobox-edge:var(--space-2);--ds-combobox-cap:calc(var(--size-control) * 5);box-sizing:border-box;inset-block-start:var(--ds-combobox-top,auto);left:var(--ds-combobox-left,auto);inline-size:var(--ds-combobox-width,auto);z-index:var(--layer-overlay);padding:var(--space-1);max-block-size:min(var(--ds-combobox-cap), var(--ds-combobox-room,var(--ds-combobox-cap)));overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;background:var(--surface);border:var(--stroke-1) solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-md);margin:0;list-style:none;position:fixed;overflow-y:auto}.ds-combobox__list::-webkit-scrollbar{width:var(--space-2)}.ds-combobox__list::-webkit-scrollbar-track{background:0 0}.ds-combobox__list::-webkit-scrollbar-thumb{border-radius:var(--r-full);background:var(--border-strong)}.ds-combobox__list[data-hidden]{visibility:hidden}.ds-combobox__option{padding:var(--space-2) var(--space-3);border-radius:var(--r-sm);color:var(--text);cursor:pointer}.ds-combobox__option--active,.ds-combobox__option:hover{background:var(--brand-soft);color:var(--brand-text)}.ds-choice{align-items:center;gap:var(--space-2);min-block-size:var(--size-control);color:var(--text);font:var(--type-body-default-weight) var(--type-body-default-size) / var(--type-body-default-line) var(--type-body-default-font);cursor:pointer;display:inline-flex;position:relative}@media (pointer:coarse){.ds-choice{min-block-size:var(--size-touch)}}.ds-choice__input{inline-size:var(--size-icon);opacity:0;cursor:inherit;margin:auto 0;position:absolute;inset-block:0;inset-inline-start:0}.ds-choice__control{pointer-events:none;box-sizing:border-box;inline-size:var(--size-icon);block-size:var(--size-icon);border:var(--stroke-1) solid var(--border-strong);background:var(--surface);color:var(--on-brand);transition:background-color var(--motion-fast) ease, border-color var(--motion-fast) ease;flex:none;justify-content:center;align-items:center;display:inline-flex}.ds-choice__input:focus-visible+.ds-choice__control{outline:var(--stroke-2) solid var(--focus);outline-offset:var(--stroke-2)}.ds-choice__input:checked+.ds-choice__control{border-color:var(--brand);background:var(--brand)}.ds-choice--disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.ds-choice--checkbox .ds-choice__control{border-radius:var(--r-sm)}.ds-choice--checkbox .ds-choice__control>.ds-icon{visibility:hidden}.ds-choice--checkbox .ds-choice__input:checked+.ds-choice__control>.ds-icon{visibility:visible}.ds-choice--radio .ds-choice__control{border-radius:var(--r-full)}.ds-choice--radio .ds-choice__input:checked+.ds-choice__control:after{content:"";inline-size:var(--space-2);block-size:var(--space-2);border-radius:var(--r-full);background:var(--on-brand)}.ds-radio-group{gap:var(--space-2);border:0;flex-direction:column;min-inline-size:0;margin:0;padding:0;display:flex}.ds-radio-group__legend{color:var(--text);font:var(--type-label-field-weight) var(--type-label-field-size) / var(--type-label-field-line) var(--type-label-field-font);padding:0}.ds-radio-group__options{flex-direction:column;display:flex}.ds-choice--switch .ds-choice__input{inline-size:var(--size-control)}.ds-choice--switch .ds-choice__control{inline-size:var(--size-control);padding:var(--stroke-2);border-radius:var(--r-full);background:var(--border-strong);border:0;justify-content:flex-start}.ds-choice--switch .ds-choice__control:after{content:"";inline-size:var(--size-icon-sm);block-size:var(--size-icon-sm);border-radius:var(--r-full);background:var(--surface);box-shadow:var(--shadow-sm);transition:transform var(--motion-fast) ease}.ds-choice--switch .ds-choice__input:checked+.ds-choice__control:after{transform:translateX(calc(var(--size-control) - var(--size-icon-sm) - 2 * var(--stroke-2)))}.ds-choice--switch .ds-choice__input:checked+.ds-choice__control:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):after{transform:translateX(calc(-1 * (var(--size-control) - var(--size-icon-sm) - 2 * var(--stroke-2))))}.ds-color-field{border:0;min-inline-size:0;margin:0;padding:0}.ds-color-field__legend{color:var(--text);font:var(--type-label-field-weight) var(--type-label-field-size) / var(--type-label-field-line) var(--type-label-field-font);margin-block-end:var(--space-2);padding:0}.ds-color-field__swatches{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.ds-color-field__swatch{inline-size:var(--size-icon-lg);block-size:var(--size-icon-lg);border-radius:var(--r-full);border:var(--stroke-1) solid var(--border-strong);cursor:pointer;position:relative}.ds-color-field__swatch--none{background:var(--surface);border-style:dashed}.ds-color-field__swatch:has(:checked){outline:var(--stroke-2) solid var(--focus);outline-offset:var(--stroke-2)}:is(.ds-color-field__swatch:has(:focus-visible),.ds-color-field__custom:has(:focus-visible)){outline:var(--stroke-2) solid var(--focus);outline-offset:var(--stroke-2)}.ds-color-field__custom{align-items:center;gap:var(--space-1);cursor:pointer;color:var(--text-2);font:var(--type-body-small-weight) var(--type-body-small-size) / var(--type-body-small-line) var(--type-body-small-font);display:inline-flex}.ds-color-field__custom--chosen .ds-color-field__picker{outline:var(--stroke-2) solid var(--focus);outline-offset:var(--stroke-2)}.ds-color-field__picker{inline-size:var(--size-icon-lg);block-size:var(--size-icon-lg);border:var(--stroke-1) solid var(--border-strong);border-radius:var(--r-full);cursor:pointer;background:0 0;padding:0}.ds-color-field[disabled]{opacity:var(--opacity-disabled)}@media (pointer:coarse){.ds-color-field__swatch,.ds-color-field__picker{inline-size:var(--size-touch);block-size:var(--size-touch)}}.ds-fieldset{border:0;min-inline-size:0;margin:0;padding:0}.ds-fieldset__legend{color:var(--text);font:var(--type-heading-card-weight) var(--type-heading-card-size) / var(--type-heading-card-line) var(--type-heading-card-font);padding:0}.ds-fieldset__help{margin-block:var(--space-1) 0;color:var(--text-2);font:var(--type-body-small-weight) var(--type-body-small-size) / var(--type-body-small-line) var(--type-body-small-font)}.ds-fieldset__fields{gap:var(--space-4);flex-direction:column;margin-block-start:var(--space-3);display:flex}.ds-fieldset--nested{border-inline-start:var(--stroke-2) solid var(--border);margin-inline-start:var(--space-4);padding-inline-start:var(--space-4)}.ds-fieldset--nested .ds-fieldset__legend{font:var(--type-label-field-weight) var(--type-label-field-size) / var(--type-label-field-line) var(--type-label-field-font)}@media (width<=600px){.ds-fieldset--nested{margin-inline-start:0;padding-inline-start:var(--space-3)}}.ds-badge{box-sizing:border-box;align-items:center;gap:var(--space-1);min-block-size:var(--space-5);padding-inline:var(--space-2);border-radius:var(--r-full);font:var(--type-label-badge-weight) var(--type-label-badge-size) / var(--type-label-badge-line) var(--type-label-badge-font);letter-spacing:var(--type-label-badge-tracking);white-space:nowrap;display:inline-flex}.ds-badge__dot{inline-size:calc(var(--space-1) + var(--stroke-2));block-size:calc(var(--space-1) + var(--stroke-2));border-radius:var(--r-full);background:currentColor;flex:none}.ds-badge--success{background:var(--success-bg);color:var(--success)}.ds-badge--warning{background:var(--warning-bg);color:var(--warning)}.ds-badge--error{background:var(--error-bg);color:var(--error)}.ds-badge--info{background:var(--info-bg);color:var(--info)}.ds-badge--neutral{background:var(--surface-3);color:var(--text-2)}.ds-badge--accent{background:var(--accent-soft);color:var(--accent-text)}.ds-counter{box-sizing:border-box;min-inline-size:var(--space-5);block-size:var(--space-5);padding-inline:var(--space-1);border-radius:var(--r-full);font:var(--type-label-badge-weight) var(--type-label-badge-size) / var(--type-label-badge-line) var(--type-label-badge-font);font-variant-numeric:tabular-nums;justify-content:center;align-items:center;display:inline-flex}.ds-counter--accent{background:var(--accent);color:var(--on-accent)}.ds-counter--neutral{background:var(--surface-3);color:var(--text)}.ds-alert{box-sizing:border-box;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--r-md);color:var(--text);display:flex}.ds-alert__icon{margin-block-start:calc((var(--type-body-strong-line) - var(--size-icon)) / 2)}.ds-alert__content{gap:var(--space-1);flex-direction:column;min-inline-size:0;display:flex}.ds-alert__title{font:var(--type-body-strong-weight) var(--type-body-strong-size) / var(--type-body-strong-line) var(--type-body-strong-font);margin:0}.ds-alert__body{color:var(--text-2);font:var(--type-body-default-weight) var(--type-body-default-size) / var(--type-body-default-line) var(--type-body-default-font)}.ds-alert__body>p{margin:0}.ds-alert--success{background:var(--success-bg)}.ds-alert--success .ds-alert__icon{color:var(--success)}.ds-alert--warning{background:var(--warning-bg)}.ds-alert--warning .ds-alert__icon{color:var(--warning)}.ds-alert--error{background:var(--error-bg)}.ds-alert--error .ds-alert__icon{color:var(--error)}.ds-alert--info{background:var(--info-bg)}.ds-alert--info .ds-alert__icon{color:var(--info)}.ds-toast-region{inset-inline:var(--space-4);z-index:var(--layer-toast);align-items:center;gap:var(--space-2);pointer-events:none;flex-direction:column;display:flex;position:fixed;inset-block-end:calc(var(--space-4) + env(safe-area-inset-bottom,0px))}.ds-toast-region__stack{align-items:center;gap:var(--space-2);flex-direction:column;max-inline-size:100%;display:flex}.ds-toast{box-sizing:border-box;align-items:center;gap:var(--space-3);max-inline-size:100%;padding:var(--space-3) var(--space-4);border:var(--stroke-1) solid var(--border);border-radius:var(--r-lg);background:var(--surface);color:var(--text);box-shadow:var(--shadow-lg);pointer-events:auto;display:flex}.ds-toast__message{font:var(--type-body-strong-weight) var(--type-body-strong-size) / var(--type-body-strong-line) var(--type-body-strong-font);flex:1;margin:0}.ds-toast--success .ds-toast__icon{color:var(--success)}.ds-toast--error .ds-toast__icon{color:var(--error)}.ds-toast__close{margin-inline-end:calc(-1 * var(--space-2))}.ds-tabs{gap:var(--space-1);border-block-end:var(--stroke-1) solid var(--border);display:flex;overflow-x:auto}.ds-tab{box-sizing:border-box;min-block-size:var(--size-control);margin:0 0 calc(-1 * var(--stroke-1));padding-inline:var(--space-3);border:0;border-block-end:var(--stroke-2) solid transparent;color:var(--text-2);font:var(--type-label-button-weight) var(--type-label-button-size) / var(--type-label-button-line) var(--type-label-button-font);cursor:pointer;transition:color var(--motion-fast) ease;background:0 0;flex:none;align-items:center;display:inline-flex}.ds-tab.ds-focusable:focus-visible{outline-offset:calc(-1 * var(--stroke-2))}.ds-tab:hover{color:var(--text)}.ds-tab--active{border-block-end-color:var(--brand);color:var(--brand-text)}@media (pointer:coarse){.ds-tab{min-block-size:var(--size-touch)}}.ds-chip{box-sizing:border-box;align-items:center;gap:var(--space-1);min-block-size:var(--size-control-sm);padding-inline:var(--space-3);border:var(--stroke-1) solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--text);font:var(--type-label-button-small-weight) var(--type-label-button-small-size) / var(--type-label-button-small-line) var(--type-label-button-small-font);cursor:pointer;transition:background-color var(--motion-fast) ease, border-color var(--motion-fast) ease;margin:0;display:inline-flex}.ds-chip:hover{background:var(--surface-2)}.ds-chip--selected,.ds-chip--selected:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-text)}.ds-chip:disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.ds-chip__count{color:var(--text-3);font-variant-numeric:tabular-nums}.ds-chip--selected .ds-chip__count{color:inherit}@media (pointer:coarse){.ds-chip{min-block-size:var(--size-control)}}.ds-pagination__list{align-items:center;gap:var(--space-1);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.ds-pagination-item{box-sizing:border-box;min-inline-size:var(--size-control);block-size:var(--size-control);padding-inline:var(--space-2);border-radius:var(--r-md);color:var(--text);font:var(--type-label-button-weight) var(--type-label-button-size) / var(--type-label-button-line) var(--type-label-button-font);font-variant-numeric:tabular-nums;cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;margin:0;display:inline-flex}.ds-pagination-item:hover:not(:disabled){background:var(--brand-soft)}.ds-pagination-item--active,.ds-pagination-item--active:hover:not(:disabled){background:var(--brand);color:var(--on-brand)}.ds-pagination-item:disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.ds-pagination__gap{padding-inline:var(--space-1);color:var(--text-3)}@media (pointer:coarse){.ds-pagination-item{min-inline-size:var(--size-touch);block-size:var(--size-touch)}}.ds-confetti{z-index:var(--layer-toast);pointer-events:none;position:fixed;inset:0;overflow:hidden}.ds-confetti__piece{top:0;inline-size:var(--space-2);block-size:var(--space-2);opacity:0;animation:ds-confetti-fall calc(var(--motion-celebrate) * var(--confetti-speed)) cubic-bezier(.25, .6, .45, 1) calc(var(--motion-celebrate) * var(--confetti-delay)) both;position:absolute;inset-inline-start:var(--confetti-x)}.ds-confetti__piece--strip{inline-size:var(--space-1);block-size:var(--space-3)}.ds-confetti__piece--dot{border-radius:var(--r-full)}.ds-confetti__piece--brand{background:var(--brand)}.ds-confetti__piece--accent{background:var(--accent)}.ds-confetti__piece--accent-bright{background:var(--accent-bright)}.ds-confetti__piece--success{background:var(--success)}.ds-confetti__piece--warning{background:var(--warning)}.ds-confetti__piece--info{background:var(--info)}@keyframes ds-confetti-fall{0%{opacity:1;transform:translateY(-100%)rotate(0)}80%{opacity:1}to{opacity:0;transform:translate3d(calc(var(--confetti-drift) * var(--space-16)), 100vh, 0) rotate(calc(var(--confetti-spin) * 1turn))}}@media (prefers-reduced-motion:reduce){.ds-confetti__piece{top:var(--confetti-y);transform:rotate(calc(var(--confetti-spin) * .25turn));animation-name:ds-confetti-settle;animation-duration:var(--motion-celebrate);animation-timing-function:ease-in-out}}@keyframes ds-confetti-settle{0%,to{opacity:0}25%,75%{opacity:1}}.ds-table-scroll{border:var(--stroke-1) solid var(--border);border-radius:var(--r-lg);background:var(--surface);overflow-x:auto}.ds-table{border-collapse:collapse;inline-size:100%;color:var(--text);font:var(--type-body-default-weight) var(--type-body-default-size) / var(--type-body-default-line) var(--type-body-default-font)}.ds-table__caption{padding:var(--space-3) var(--space-4);text-align:start;font:var(--type-heading-card-weight) var(--type-heading-card-size) / var(--type-heading-card-line) var(--type-heading-card-font)}.ds-table__th{block-size:var(--size-row-compact);padding-inline:var(--space-4);border-block-end:var(--stroke-1) solid var(--border);background:var(--surface-2);color:var(--text-2);font:var(--type-label-field-weight) var(--type-label-field-size) / var(--type-label-field-line) var(--type-label-field-font);white-space:nowrap}.ds-table__td{block-size:var(--size-touch);padding-inline:var(--space-4);border-block-end:var(--stroke-1) solid var(--border)}.ds-table__td--action+.ds-table__td--action,.ds-table__th--action+.ds-table__th--action{padding-inline-start:0}.ds-table tr:last-child>.ds-table__td{border-block-end:0}.ds-table--compact .ds-table__td{block-size:var(--size-row-compact)}@media (pointer:coarse){.ds-table--compact .ds-table__td{block-size:var(--size-touch)}}.ds-table__cell--left{text-align:start}.ds-table__cell--right{text-align:end}.ds-table__td--item{inline-size:100%}.ds-table__td--number{font-variant-numeric:tabular-nums;white-space:nowrap}.ds-table__item{padding-block:var(--space-2);flex-direction:column;display:flex}.ds-table__item-title{font-weight:var(--type-body-strong-weight)}.ds-table__item-sub{color:var(--text-2);font-size:var(--type-body-small-size);line-height:var(--type-body-small-line)}.ds-empty-state{box-sizing:border-box;align-items:center;gap:var(--space-2);padding:var(--space-10) var(--space-6);text-align:center;flex-direction:column;display:flex}.ds-empty-state__icon{inline-size:var(--space-12);block-size:var(--space-12);border-radius:var(--r-full);background:var(--brand-soft);color:var(--brand-text);justify-content:center;align-items:center;margin-block-end:var(--space-2);display:inline-flex}.ds-empty-state__title{color:var(--text);font:var(--type-heading-section-weight) var(--type-heading-section-size) / var(--type-heading-section-line) var(--type-heading-section-font);margin:0}.ds-empty-state__body{max-inline-size:var(--layout-measure);color:var(--text-2);margin:0}.ds-empty-state__action{margin-block-start:var(--space-3)}.ds-row-card{box-sizing:border-box;gap:var(--space-3);inline-size:100%;padding:var(--space-3) var(--space-4);border:var(--stroke-1) solid var(--border);border-radius:var(--r-lg);background:var(--surface);color:var(--text);font:var(--type-body-default-weight) var(--type-body-default-size) / var(--type-body-default-line) var(--type-body-default-font);text-align:start;flex-direction:column;margin:0;text-decoration:none;display:flex}.ds-row-card--interactive{cursor:pointer}.ds-row-card--interactive:hover{background:var(--surface-2)}.ds-row-card__media{inline-size:var(--space-12);block-size:var(--space-12);border-radius:var(--r-md);background:var(--surface-3);flex:none;display:flex;overflow:hidden}.ds-row-card__media>img{object-fit:cover;block-size:100%;inline-size:100%}.ds-row-card__main{gap:var(--space-1);flex-direction:column;flex:1;min-inline-size:0;display:flex}.ds-row-card__title{font:var(--type-body-strong-weight) var(--type-body-strong-size) / var(--type-body-strong-line) var(--type-body-strong-font)}.ds-row-card__sub,.ds-row-card__items{color:var(--text-2);font-size:var(--type-body-small-size);line-height:var(--type-body-small-line)}.ds-row-card__value{font:var(--type-body-strong-weight) var(--type-body-strong-size) / var(--type-body-strong-line) var(--type-body-strong-font);font-variant-numeric:tabular-nums;flex:none}.ds-row-card__top{align-items:flex-start;gap:var(--space-3);display:flex}.ds-row-card__leading{min-block-size:var(--size-touch);flex:none;align-items:center;display:flex}.ds-row-card__details{gap:var(--space-1);flex-direction:column;margin:0;display:flex}.ds-row-card__detail{gap:var(--space-1) var(--space-2);flex-wrap:wrap;align-items:baseline;display:flex}.ds-row-card__detail dt{color:var(--text-2);font-size:var(--type-body-small-size);line-height:var(--type-body-small-line)}.ds-row-card__detail dt:after{content:":"}.ds-row-card__detail dd{font-size:var(--type-body-small-size);line-height:var(--type-body-small-line);margin:0}.ds-row-card__actions{gap:var(--space-2);border-block-start:var(--stroke-1) solid var(--border);flex-wrap:wrap;padding-block-start:var(--space-2);display:flex}.ds-row-card__actions .ds-button{min-block-size:var(--size-touch)}.ds-row-card__title-link{color:inherit;text-underline-offset:.15em;text-decoration:underline}.ds-data-table{gap:var(--space-3);flex-direction:column;min-inline-size:0;display:flex}.ds-data-table__sort{align-items:center;gap:var(--space-1);border-radius:var(--r-sm);color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;padding:0;display:inline-flex}.ds-data-table__sort-icon{color:var(--text-3)}.ds-data-table__sort-icon--active{color:var(--brand)}.ds-data-table__action{margin-block:var(--space-2) 0}.ds-data-table__cards{gap:var(--space-2);flex-direction:column;display:flex}.ds-data-table__caption{color:var(--text-2);font:var(--type-label-field-weight) var(--type-label-field-size) / var(--type-label-field-line) var(--type-label-field-font);margin:0}.ds-data-table__selection{align-items:center;gap:var(--space-2) var(--space-4);padding:var(--space-3) var(--space-4);border:var(--stroke-1) solid var(--border);border-radius:var(--r-lg);background:var(--surface);flex-wrap:wrap;display:flex}.ds-data-table__selection-summary{color:var(--text-2);font-size:var(--type-body-small-size);line-height:var(--type-body-small-line);flex:12rem;margin:0}.ds-data-table__selection-actions{gap:var(--space-2);flex-wrap:wrap;display:flex}.ds-kpi-card{box-sizing:border-box;gap:var(--space-1);padding:var(--space-4) var(--space-5);border:var(--stroke-1) solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm);flex-direction:column;display:flex}.ds-kpi-card__label{color:var(--text-2);font:var(--type-label-field-weight) var(--type-label-field-size) / var(--type-label-field-line) var(--type-label-field-font);margin:0}.ds-kpi-card__value{color:var(--text);font:var(--type-display-kpi-weight) var(--type-display-kpi-size) / var(--type-display-kpi-line) var(--type-display-kpi-font);letter-spacing:var(--type-display-kpi-tracking);font-variant-numeric:tabular-nums;margin:0}.ds-kpi-card__delta{align-items:center;gap:var(--space-1);font:var(--type-body-small-weight) var(--type-body-small-size) / var(--type-body-small-line) var(--type-body-small-font);margin:0;display:flex}.ds-kpi-card__delta-value{font-weight:var(--type-body-strong-weight)}.ds-kpi-card__delta--up{color:var(--success)}.ds-kpi-card__delta--down{color:var(--error)}.ds-kpi-card__delta--flat,.ds-kpi-card__delta-label{color:var(--text-2)}.ds-media-grid{grid-template-columns:repeat(auto-fill, minmax(var(--size-media-tile), 1fr));gap:var(--space-3);margin:0;padding:0;list-style:none;display:grid}.ds-media-tile{box-sizing:border-box;border:var(--stroke-1) solid var(--border);border-radius:var(--r-lg);background:var(--surface);inline-size:100%;color:var(--text);font:var(--type-body-default-weight) var(--type-body-default-size) / var(--type-body-default-line) var(--type-body-default-font);text-align:start;flex-direction:column;margin:0;padding:0;display:flex;overflow:hidden}.ds-media-tile--interactive{cursor:pointer;transition:border-color var(--motion-fast) ease}.ds-media-tile--interactive:hover{border-color:var(--border-strong)}.ds-media-tile--selected,.ds-media-tile--selected:hover{border-color:var(--brand);box-shadow:0 0 0 var(--stroke-1) var(--brand)}.ds-media-tile__preview{aspect-ratio:1;background:var(--surface-3);color:var(--text-3);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.ds-media-tile__preview>img{object-fit:cover;block-size:100%;inline-size:100%}.ds-media-tile__badge{position:absolute;inset-block-start:var(--space-2);inset-inline-start:var(--space-2)}.ds-media-tile__text{gap:var(--space-1);padding:var(--space-2) var(--space-3) var(--space-3);flex-direction:column;min-inline-size:0;display:flex}.ds-media-tile__title{font:var(--type-body-strong-weight) var(--type-body-strong-size) / var(--type-body-strong-line) var(--type-body-strong-font);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ds-media-tile__meta{color:var(--text-2);font-size:var(--type-body-small-size);line-height:var(--type-body-small-line)}.ds-map-frame{box-sizing:border-box;gap:var(--space-3);flex-direction:column;display:flex}.ds-map-frame__toolbar{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.ds-map-frame__viewport{aspect-ratio:4/3;border:var(--stroke-1) solid var(--border);border-radius:var(--r-lg);background:var(--surface-2);position:relative;overflow:hidden}.ds-map-frame__canvas{position:absolute;inset:0}.ds-map-frame__canvas[hidden]{display:none}.ds-map-frame__state{justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-4);color:var(--text-2);flex-direction:column;display:flex;position:absolute;inset:0}.ds-map-frame__state-label,.ds-map-frame__caption{color:var(--text-2);font:var(--type-body-small-weight) var(--type-body-small-size) / var(--type-body-small-line) var(--type-body-small-font);margin:0}@media (width<=600px){.ds-map-frame__viewport{aspect-ratio:1}}.ds-nutrition{color:var(--text);margin:0}.ds-nutrition__table{border-collapse:collapse;inline-size:100%;font:var(--type-body-default-weight) var(--type-body-default-size) / var(--type-body-default-line) var(--type-body-default-font)}.ds-nutrition__caption{text-align:start;font:var(--type-heading-card-weight) var(--type-heading-card-size) / var(--type-heading-card-line) var(--type-heading-card-font);padding-block-end:var(--space-2)}.ds-nutrition__th{padding:var(--space-1) 0 var(--space-1) var(--space-3);border-block-end:var(--stroke-1) solid var(--border);color:var(--text-2);text-align:end;font:var(--type-label-field-weight) var(--type-label-field-size) / var(--type-label-field-line) var(--type-label-field-font)}.ds-nutrition__th--label{padding-inline-start:0}.ds-nutrition__label,.ds-nutrition__value{padding-block:var(--space-1);border-block-end:var(--stroke-1) solid var(--border)}.ds-nutrition__row:last-child>.ds-nutrition__label,.ds-nutrition__row:last-child>.ds-nutrition__value{border-block-end:0}.ds-nutrition__label{text-align:start;font-weight:var(--type-body-strong-weight)}.ds-nutrition__row--sub>.ds-nutrition__label{color:var(--text-2);font-weight:var(--type-body-default-weight);padding-inline-start:var(--space-4)}.ds-nutrition__value{text-align:end;font-variant-numeric:tabular-nums;padding-inline-start:var(--space-3)}.ds-nutrition__value--unknown{color:var(--text-2);font-style:italic}.ds-nutrition__note{color:var(--text-2);font:var(--type-body-small-weight) var(--type-body-small-size) / var(--type-body-small-line) var(--type-body-small-font);margin-block-start:var(--space-2)}.ds-card{box-sizing:border-box;gap:var(--space-4);padding:var(--space-6);border:var(--stroke-1) solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm);flex-direction:column;display:flex}.ds-card__heading{color:var(--text);font:var(--type-heading-card-weight) var(--type-heading-card-size) / var(--type-heading-card-line) var(--type-heading-card-font);margin:0}.ds-card>.ds-button{align-self:flex-start}@media (width<=600px){.ds-card{padding:var(--space-4)}.ds-card--flush-on-phone{box-shadow:none;background:0 0;border-color:#0000;padding:0}}.ds-form{gap:var(--space-6);flex-direction:column;display:flex}.ds-form>.ds-button{align-self:flex-start}.ds-page{box-sizing:border-box;gap:var(--space-6);inline-size:100%;max-inline-size:var(--layout-page);padding:var(--space-10) var(--space-6) var(--space-16);flex-direction:column;margin-inline:auto;display:flex}.ds-page--wide{max-inline-size:var(--layout-page-wide)}.ds-page__header{gap:var(--space-2);flex-direction:column;display:flex}.ds-page__title{color:var(--text);font:var(--type-display-page-title-weight) var(--type-display-page-title-size) / var(--type-display-page-title-line) var(--type-display-page-title-font);letter-spacing:var(--type-display-page-title-tracking);margin:0}.ds-page__intro{max-inline-size:var(--layout-measure);color:var(--text-2);font:var(--type-body-large-weight) var(--type-body-large-size) / var(--type-body-large-line) var(--type-body-large-font);margin:0}.ds-page>.ds-button{align-self:flex-start}@media (width<=600px){.ds-page{padding:var(--space-6) var(--space-4) var(--space-12)}.ds-page__title{font-size:var(--type-display-page-title-mobile-size);line-height:var(--type-display-page-title-mobile-line);letter-spacing:var(--type-display-page-title-mobile-tracking)}}.ds-scroll-row{--ds-scroll-row-ring:calc(var(--stroke-2) * 2);grid-auto-flow:column;grid-auto-columns:minmax(calc(var(--size-media-tile) * 1.2), 1fr);gap:var(--space-3);margin:calc(var(--ds-scroll-row-ring) * -1);padding:var(--ds-scroll-row-ring) var(--ds-scroll-row-ring) var(--space-2);overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--ds-scroll-row-ring);scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;margin-bottom:0;list-style:none;display:grid;overflow-x:auto}.ds-scroll-row>*{scroll-snap-align:start}.ds-scroll-row::-webkit-scrollbar{height:var(--space-2)}.ds-scroll-row::-webkit-scrollbar-track{background:0 0}.ds-scroll-row::-webkit-scrollbar-thumb{border-radius:var(--r-full);background:var(--border-strong)}.ds-scroll-row::-webkit-scrollbar-thumb:hover{background:var(--text-3)}@media (prefers-reduced-motion:no-preference){.ds-scroll-row{scroll-behavior:smooth}}.ds-skip-link{z-index:var(--layer-toast);padding:var(--space-2) var(--space-4);border-radius:var(--r-md);background:var(--brand);color:var(--on-brand);font:var(--type-label-button-weight) var(--type-label-button-size) / var(--type-label-button-line) var(--type-label-button-font);text-decoration:none;position:absolute;inset-block-start:calc(-1 * var(--space-16));inset-inline-start:var(--space-4)}.ds-skip-link:focus{inset-block-start:var(--space-4)}.ds-sidebar-item{box-sizing:border-box;align-items:center;gap:var(--space-3);inline-size:100%;min-block-size:var(--size-control);padding-inline:var(--space-3);border-radius:var(--r-md);color:var(--text-2);font:var(--type-body-default-weight) var(--type-body-default-size) / var(--type-body-default-line) var(--type-body-default-font);transition:background-color var(--motion-fast) ease, color var(--motion-fast) ease;text-decoration:none;display:flex}.ds-sidebar-item:hover{background:var(--surface-2);color:var(--text)}.ds-sidebar-item--active,.ds-sidebar-item--active:hover{background:var(--brand-soft);color:var(--brand-text);font-weight:var(--type-body-strong-weight)}.ds-sidebar-item__label{flex:1;min-inline-size:0}@media (pointer:coarse){.ds-sidebar-item{min-block-size:var(--size-touch)}}.ds-business-selector{box-sizing:border-box;align-items:center;gap:var(--space-2);inline-size:100%;min-block-size:var(--size-touch);padding:var(--space-2) var(--space-3);border:var(--stroke-1) solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--text);text-align:start;cursor:pointer;margin:0;display:flex}.ds-business-selector:hover,.ds-business-selector--open{border-color:var(--border-strong);background:var(--surface-2)}.ds-business-selector__text{flex-direction:column;flex:1;min-inline-size:0;display:flex}.ds-business-selector__name{font:var(--type-body-strong-weight) var(--type-body-strong-size) / var(--type-body-strong-line) var(--type-body-strong-font);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ds-business-selector__address{color:var(--text-2);font:var(--type-body-small-weight) var(--type-body-small-size) / var(--type-body-small-line) var(--type-body-small-font);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ds-business-selector__chevron{color:var(--text-2);transition:transform var(--motion-fast) ease}.ds-business-selector--open .ds-business-selector__chevron{transform:rotate(.5turn)}.ds-avatar{box-sizing:border-box;inline-size:var(--size-control-sm);block-size:var(--size-control-sm);border-radius:var(--r-full);background:var(--brand-soft-2);color:var(--brand-text);font:var(--type-label-badge-weight) var(--type-label-badge-size) / var(--type-label-badge-line) var(--type-label-badge-font);-webkit-user-select:none;user-select:none;flex:none;justify-content:center;align-items:center;display:inline-flex}.ds-avatar--md{inline-size:var(--size-control);block-size:var(--size-control);font:var(--type-label-button-weight) var(--type-label-button-size) / var(--type-label-button-line) var(--type-label-button-font)}.ds-top-bar{box-sizing:border-box;justify-content:space-between;align-items:center;gap:var(--space-4);min-block-size:var(--space-16);padding-inline:var(--space-6);border-block-end:var(--stroke-1) solid var(--border);background:var(--surface);color:var(--text);display:flex}.ds-top-bar__start,.ds-top-bar__end{align-items:center;gap:var(--space-3);display:flex}.ds-top-bar__start{flex:none}.ds-top-bar__end{flex:0 auto;justify-content:flex-end;min-inline-size:0}.ds-top-bar__center{flex:1;min-inline-size:0}@media (width<=600px){.ds-top-bar{gap:var(--space-2);min-block-size:calc(var(--size-touch) + 2 * var(--space-2));padding-block:var(--space-2);padding-inline:var(--space-4);grid-template-columns:auto minmax(0,1fr);grid-template-areas:"start end""context context";display:grid}.ds-top-bar__start{grid-area:start;min-inline-size:0}.ds-top-bar__end{grid-area:end}.ds-top-bar__center{grid-area:context}}.ds-tab-bar{z-index:var(--layer-sticky);border-block-start:var(--stroke-1) solid var(--border);background:var(--surface);padding-block-end:env(safe-area-inset-bottom,0px);position:sticky;inset-block-end:0}.ds-tab-bar__list{grid-auto-columns:1fr;grid-auto-flow:column;margin:0;padding:0;list-style:none;display:grid}.ds-tab-bar__slot{display:flex}.ds-tab-bar-item{box-sizing:border-box;justify-content:center;align-items:center;gap:var(--space-1);padding-block:var(--space-2);color:var(--text-3);font:var(--type-label-tab-bar-weight) var(--type-label-tab-bar-size) / var(--type-label-tab-bar-line) var(--type-label-tab-bar-font);flex-direction:column;flex:1;text-decoration:none;display:flex}.ds-tab-bar-item--active{color:var(--brand-text)}.ds-tab-bar-item__icon{display:inline-flex;position:relative}.ds-tab-bar-item__counter{position:absolute;inset-block-start:calc(-1 * var(--space-1));inset-inline-start:calc(100% - var(--space-2))}.ds-overlay{box-sizing:border-box;z-index:var(--layer-overlay);padding:var(--space-4);background:color-mix(in srgb, var(--overlay) calc(var(--opacity-backdrop) * 100%), transparent);overscroll-behavior:contain;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.ds-overlay--sheet{align-items:flex-end;padding:0}.ds-modal{box-sizing:border-box;background:var(--surface);max-block-size:100%;inline-size:100%;color:var(--text);box-shadow:var(--shadow-lg);outline:none;flex-direction:column;display:flex}.ds-modal--dialog{max-inline-size:var(--layout-dialog);border-radius:var(--r-xl)}.ds-modal--sheet{max-inline-size:var(--layout-page);max-block-size:calc(100% - var(--space-12));border-start-start-radius:var(--r-xl);border-start-end-radius:var(--r-xl);padding-block-end:env(safe-area-inset-bottom,0px)}.ds-modal__handle{inline-size:var(--space-10);block-size:var(--space-1);border-radius:var(--r-full);background:var(--border-strong);align-self:center;margin-block-start:var(--space-2)}.ds-modal__header{align-items:flex-start;gap:var(--space-2);padding:var(--space-5) var(--space-6) 0;display:flex}.ds-modal__title{font:var(--type-heading-section-weight) var(--type-heading-section-size) / var(--type-heading-section-line) var(--type-heading-section-font);flex:1;margin:0}.ds-modal__title-icon{color:var(--error);margin-block-start:calc((var(--type-heading-section-line) - var(--size-icon)) / 2)}.ds-modal__body{overscroll-behavior:contain;padding:var(--space-3) var(--space-6) var(--space-5);color:var(--text-2);flex:1;overflow-y:auto}.ds-modal__body>p{margin:0}.ds-modal__body>form{gap:var(--space-4);flex-direction:column;display:flex}.ds-modal__actions{justify-content:flex-end;gap:var(--space-3);padding:var(--space-4) var(--space-6);border-block-start:var(--stroke-1) solid var(--border);display:flex}.ds-modal--sheet .ds-modal__actions{grid-auto-columns:1fr;grid-auto-flow:column;display:grid}.ds-modal--sheet .ds-modal__actions>.ds-button{min-block-size:var(--size-control-lg)}.ds-snackbar{box-sizing:border-box;align-items:center;gap:var(--space-3);max-inline-size:100%;min-block-size:var(--size-touch);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);border-radius:var(--r-md);background:var(--text);color:var(--bg);box-shadow:var(--shadow-lg);display:flex}.ds-snackbar__message{font:var(--type-body-default-weight) var(--type-body-default-size) / var(--type-body-default-line) var(--type-body-default-font);flex:1;margin:0}.ds-snackbar__action{min-block-size:var(--size-control);padding-inline:var(--space-3);border-radius:var(--r-sm);color:inherit;font:var(--type-label-button-weight) var(--type-label-button-size) / var(--type-label-button-line) var(--type-label-button-font);cursor:pointer;background:0 0;border:0;text-decoration:underline}.ds-snackbar .ds-focusable:focus-visible{outline-color:currentColor}.ds-menu{min-inline-size:0;display:inline-flex;position:relative}.ds-menu__trigger{box-sizing:border-box;align-items:center;gap:var(--space-2);min-inline-size:0;max-inline-size:100%;min-block-size:var(--size-touch);padding-block:0;padding-inline:var(--space-2);border:var(--stroke-1) solid transparent;border-radius:var(--r-md);color:var(--text);font:var(--type-body-strong-weight) var(--type-body-strong-size) / var(--type-body-strong-line) var(--type-body-strong-font);cursor:pointer;transition:background-color var(--motion-fast) ease, border-color var(--motion-fast) ease;background:0 0;margin:0;display:inline-flex}.ds-menu__trigger:hover,.ds-menu__trigger--open{border-color:var(--border);background:var(--surface-2)}.ds-menu__trigger-content{align-items:center;gap:var(--space-2);min-inline-size:0;display:inline-flex}.ds-menu__chevron{color:var(--text-2);transition:transform var(--motion-fast) ease;flex:none}.ds-menu__trigger--open .ds-menu__chevron{transform:rotate(.5turn)}.ds-menu__list{box-sizing:border-box;z-index:var(--layer-overlay);--ds-menu-gutter:var(--space-4);inline-size:max-content;max-inline-size:calc(100vw - 2 * var(--ds-menu-gutter));translate:var(--ds-menu-shift,0) 0;padding-block:var(--space-1);border:var(--stroke-1) solid var(--border);border-radius:var(--r-lg);background:var(--surface);color:var(--text);box-shadow:var(--shadow-md);max-block-size:calc(100dvh - var(--size-touch) - 2 * var(--space-4));flex-direction:column;display:flex;position:absolute;inset-block-start:calc(100% + var(--space-1));overflow-y:auto}.ds-menu__list[hidden]{display:none}.ds-menu__list--end{inset-inline-end:0}.ds-menu__list--start{inset-inline-start:0}.ds-menu__heading{padding:var(--space-3) var(--space-4) var(--space-2);color:var(--text);font:var(--type-body-strong-weight) var(--type-body-strong-size) / var(--type-body-strong-line) var(--type-body-strong-font);overflow-wrap:anywhere;margin:0}.ds-menu__group{flex-direction:column;display:flex}.ds-menu__group-label{padding:var(--space-2) var(--space-4) var(--space-1);color:var(--text-2);font:var(--type-label-field-weight) var(--type-label-field-size) / var(--type-label-field-line) var(--type-label-field-font)}.ds-menu__item{box-sizing:border-box;align-items:center;gap:var(--space-3);inline-size:100%;min-block-size:var(--size-touch);padding-block:0;padding-inline:var(--space-4);color:var(--text);font:var(--type-body-large-weight) var(--type-body-large-size) / var(--type-body-large-line) var(--type-body-large-font);text-align:start;white-space:nowrap;cursor:pointer;background:0 0;border:0;margin:0;text-decoration:none;display:flex}.ds-menu__item:hover,.ds-menu__item:focus{background:var(--brand-soft)}.ds-menu__group-toggle{color:var(--text-2);font:var(--type-label-field-weight) var(--type-label-field-size) / var(--type-label-field-line) var(--type-label-field-font)}.ds-menu__trailing-icon{color:var(--text-2);transition:transform var(--motion-fast) ease;flex:none}.ds-menu__group-toggle--open .ds-menu__trailing-icon{transform:rotate(.5turn)}.ds-menu__item[aria-current=page]{background:var(--brand-soft-2);color:var(--brand-text);font-weight:var(--type-body-strong-weight);position:relative}.ds-menu__item[aria-current=page]:before{content:"";inset-block:var(--space-2);inline-size:var(--stroke-2);background:var(--brand);border-start-end-radius:var(--r-full);border-end-end-radius:var(--r-full);position:absolute;inset-inline-start:0}.ds-menu__item.ds-focusable:focus-visible{outline-offset:calc(-1 * var(--stroke-2))}.ds-menu__item--unchecked{padding-inline-start:calc(var(--space-4) + var(--size-icon) + var(--space-3))}.ds-menu__icon{color:var(--brand-text);flex:none}.ds-menu__label{flex:1}.ds-menu__item--disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.ds-menu__separator{block-size:var(--stroke-1);margin-block:var(--space-1);background:var(--border)}.ds-app-bar{box-sizing:border-box;z-index:var(--layer-sticky);align-items:center;gap:var(--space-2);min-block-size:calc(var(--space-12) + var(--space-2));padding-inline:var(--space-4);border-block-end:var(--stroke-1) solid var(--border);background:var(--surface);color:var(--text);display:flex;position:sticky;inset-block-start:0}.ds-app-bar--detail{padding-inline-start:var(--space-1)}.ds-app-bar__title{text-overflow:ellipsis;white-space:nowrap;flex:1;min-inline-size:0;margin:0;overflow:hidden}.ds-app-bar--root .ds-app-bar__title{font:var(--type-display-page-title-mobile-weight) var(--type-display-page-title-mobile-size) / var(--type-display-page-title-mobile-line) var(--type-display-page-title-mobile-font);letter-spacing:var(--type-display-page-title-mobile-tracking)}.ds-app-bar--detail .ds-app-bar__title{font:var(--type-heading-section-weight) var(--type-heading-section-size) / var(--type-heading-section-line) var(--type-heading-section-font)}.ds-app-bar__actions{align-items:center;gap:var(--space-1);display:flex}.ds-list-item{box-sizing:border-box;align-items:center;gap:var(--space-3);inline-size:100%;min-block-size:var(--size-touch);padding:var(--space-3) var(--space-4);border:0;border-block-end:var(--stroke-1) solid var(--border);background:var(--surface);color:var(--text);font:var(--type-body-default-weight) var(--type-body-default-size) / var(--type-body-default-line) var(--type-body-default-font);text-align:start;margin:0;text-decoration:none;display:flex}.ds-list-item--interactive{cursor:pointer}.ds-list-item--interactive:hover{background:var(--surface-2)}.ds-list-item__icon{color:var(--text-2)}.ds-list-item__text{flex-direction:column;flex:1;min-inline-size:0;display:flex}.ds-list-item__title{font-weight:var(--type-body-strong-weight)}.ds-list-item__sub{color:var(--text-2);font-size:var(--type-body-small-size);line-height:var(--type-body-small-line)}.ds-list-item__chevron{color:var(--text-3)}.ds-order-ticket{box-sizing:border-box;gap:var(--space-2);padding:var(--space-3) var(--space-4);border:var(--stroke-1) solid var(--border);border-inline-start:var(--space-1) solid var(--ds-course);border-radius:var(--r-lg);background:var(--surface);color:var(--text);flex-direction:column;display:flex}.ds-order-ticket--fired{--ds-course:var(--course-fired);--ds-course-bg:var(--course-fired-bg)}.ds-order-ticket--held{--ds-course:var(--course-held);--ds-course-bg:var(--course-held-bg)}.ds-order-ticket--done{--ds-course:var(--course-done);--ds-course-bg:var(--course-done-bg)}.ds-order-ticket__header{justify-content:space-between;align-items:baseline;gap:var(--space-2);display:flex}.ds-order-ticket__title{font:var(--type-heading-card-weight) var(--type-heading-card-size) / var(--type-heading-card-line) var(--type-heading-card-font);margin:0}.ds-order-ticket__time{color:var(--text-2);font:var(--type-body-small-weight) var(--type-body-small-size) / var(--type-body-small-line) var(--type-body-small-font);font-variant-numeric:tabular-nums}.ds-order-ticket__course{padding-inline:var(--space-2);border-radius:var(--r-full);background:var(--ds-course-bg);color:var(--ds-course);font:var(--type-label-badge-weight) var(--type-label-badge-size) / var(--type-label-badge-line) var(--type-label-badge-font);align-self:flex-start}.ds-order-ticket__items{font:var(--type-body-default-weight) var(--type-body-default-size) / var(--type-body-default-line) var(--type-body-default-font)}.ds-table-tile{box-sizing:border-box;align-items:flex-start;gap:var(--space-1);aspect-ratio:1;inline-size:100%;padding:var(--space-3);border:var(--stroke-1) solid var(--border-strong);border-radius:var(--r-lg);background:var(--surface);color:var(--text);text-align:start;cursor:pointer;flex-direction:column;margin:0;display:flex}.ds-table-tile--occupied{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-text)}.ds-table-tile--reserved{border-color:var(--warning);background:var(--warning-bg)}.ds-table-tile__name{font:var(--type-heading-card-weight) var(--type-heading-card-size) / var(--type-heading-card-line) var(--type-heading-card-font)}.ds-table-tile__seats{color:var(--text-2);font:var(--type-body-small-weight) var(--type-body-small-size) / var(--type-body-small-line) var(--type-body-small-font)}.ds-table-tile__value{font:var(--type-body-strong-weight) var(--type-body-strong-size) / var(--type-body-strong-line) var(--type-body-strong-font);font-variant-numeric:tabular-nums}.ds-table-tile__state{font:var(--type-label-badge-weight) var(--type-label-badge-size) / var(--type-label-badge-line) var(--type-label-badge-font);margin-block-start:auto}.ds-segmented{--ds-segmented-inset:calc(var(--stroke-1) + var(--stroke-2));box-sizing:border-box;gap:var(--stroke-2);padding:var(--stroke-2);border:var(--stroke-1) solid var(--border);border-radius:var(--r-md);background:var(--surface-2);display:inline-flex}.ds-segmented__option{min-inline-size:var(--size-touch);min-block-size:calc(var(--size-control) - 2 * var(--ds-segmented-inset));padding-inline:var(--space-3);border-radius:calc(var(--r-md) - var(--stroke-2));color:var(--text-2);font:var(--type-label-button-small-weight) var(--type-label-button-small-size) / var(--type-label-button-small-line) var(--type-label-button-small-font);cursor:pointer;transition:background-color var(--motion-fast) ease, color var(--motion-fast) ease;background:0 0;border:0;flex:1;margin:0}.ds-segmented__option:hover{color:var(--text)}.ds-segmented__option--selected,.ds-segmented__option--selected:hover{background:var(--brand);color:var(--on-brand)}.ds-segmented__option:disabled{opacity:var(--opacity-disabled);cursor:not-allowed}@media (pointer:coarse){.ds-segmented__option{min-block-size:calc(var(--size-touch) - 2 * var(--ds-segmented-inset))}}.ds-stepper{align-items:center;gap:var(--space-2);display:inline-flex}.ds-stepper__value{min-inline-size:var(--space-8);color:var(--text);font:var(--type-body-strong-weight) var(--type-body-strong-size) / var(--type-body-strong-line) var(--type-body-strong-font);font-variant-numeric:tabular-nums;text-align:center}
/*$vite$:1*/
/* The design system's UI face (Nunito Sans, self-hosted from index.js) for the whole menu. */
body {
  margin: 0;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: var(--font-mono);
}

/* Form controls take the browser's own face (Arial on most phones) unless told otherwise: the menu's
   tabs and "Add to cart" buttons were the only text on the page in another typeface. */
button,
input,
select,
textarea {
  font-family: inherit;
}

* {
  box-sizing: border-box;
}

/* Focus indicators for accessibility */
*:focus-visible {
  outline: var(--stroke-2) solid var(--focus);
  outline-offset: var(--stroke-2);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--stroke-2) solid var(--focus);
  outline-offset: var(--stroke-2);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Screen reader only - visually hidden but accessible to assistive technologies */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}