/*
 * The public restaurant pages (Pages/Restaurant). Bootstrap and the site's
 * theme do the rest; these are the frames for pictures and the few things
 * Bootstrap has no class for. Colours come from the theme's variables.
 */

/* A location's or a dish's picture in a card: the same shape whatever was uploaded. */
.restaurant-photo {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-color: var(--bs-tertiary-bg);
}

.restaurant-dish-photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background-color: var(--bs-tertiary-bg);
}

.restaurant-dish-thumb {
    width: 104px;
    height: 104px;
    border-radius: var(--bs-border-radius);
    object-fit: cover;
    background-color: var(--bs-tertiary-bg);
}

.restaurant-photo-thumb {
    width: 72px;
    height: 54px;
    object-fit: cover;
}

/* Open or closed, beside a location's name. */
.restaurant-status-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

/* A dish that can't be had right now still reads, a little quieter. */
.restaurant-dish-unavailable .restaurant-dish-thumb {
    opacity: 0.6;
}

/* Choices and levels are tapped on phones: a finger needs room. */
.restaurant-choice {
    min-height: 48px;
}

label.restaurant-choice {
    cursor: pointer;
}

/* Checkout's tip buttons: one row on a desktop, wrapping on a phone. */
.restaurant-tips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
    gap: 0.5rem;
}

.restaurant-level {
    min-height: 44px;
}

.restaurant-dish-description > :last-child {
    margin-bottom: 0.5rem;
}

/* The section tabs stay under the site's header as the menu scrolls. */
.restaurant-menu-tabs {
    top: var(--site-header-height, 0);
    z-index: 1010;
}

.restaurant-menu-section {
    scroll-margin-top: calc(var(--site-header-height, 0px) + 4rem);
}

/* The order: beside the menu on a desktop, behind a bar at the foot of a phone. */
@media (min-width: 992px) {
    .restaurant-order-panel {
        position: sticky;
        top: calc(var(--site-header-height, 0px) + 1rem);
    }
}

.restaurant-order-bar {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    padding: 0.75rem 0;
    background-color: var(--bs-body-bg);
    border-top: var(--bs-border-width) solid var(--bs-border-color);
}

@media (max-width: 991.98px) {
    .restaurant-order-panel.offcanvas-bottom {
        height: auto;
        max-height: 85vh;
    }
}

/* The order page's step bar: placed, accepted, preparing, ready, picked up. */
.restaurant-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
}

.restaurant-step-bar {
    height: 6px;
    border-radius: 3px;
    margin-bottom: 0.5rem;
}

/* The order board: a column a station, side by side as room allows. */
.restaurant-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1rem;
    align-items: start;
}

.restaurant-board .btn {
    min-height: 44px;
}

/* Catering's strip (M10): cards keep their width however few there are. */
#boardCatering .restaurant-board {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}

/* Small bar charts, in CSS: no chart library. The numbers are beside them, or in a title. */
.restaurant-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 56px;
}

.restaurant-bar {
    flex: 1;
    min-width: 4px;
    max-width: 2.5rem;
    background-color: var(--bs-primary);
    border-radius: 2px 2px 0 0;
}

/* The floor plan (Admin, Dining areas): a grid the tables are dragged on.
   The layer is the plan at full size, scaled for zoom; the sizer gives the
   scroll area the scaled size. */
.restaurant-plan {
    height: 520px;
    overflow: auto;
    background-color: var(--bs-tertiary-bg);
}

.restaurant-plan-sizer {
    position: relative;
}

.restaurant-plan-layer {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    background-image:
        linear-gradient(var(--bs-secondary-bg) 1px, transparent 1px),
        linear-gradient(90deg, var(--bs-secondary-bg) 1px, transparent 1px);
    background-size: 24px 24px;
}

.restaurant-plan-table {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1.15;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: 2px solid var(--bs-secondary);
    border-radius: 6px;
    cursor: move;
    touch-action: none;
    user-select: none;
}

.restaurant-plan-round {
    border-radius: 50%;
}

.restaurant-plan-table.is-selected {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.restaurant-plan-table:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.restaurant-plan-seats {
    font-size: 0.7rem;
}

/* The floor-plan table picker (_SeatPicker): the floor plan's drawing,
   cropped to the area's tables and fitted to the dialog by seat-picker.js,
   its tables buttons a finger chooses. Each state has a word on the table
   too, so none is told by colour alone. */
.restaurant-plan-picker {
    height: auto;
}

.restaurant-plan-picker-layer {
    background-image: none;
}

.restaurant-seat-table {
    cursor: pointer;
    touch-action: manipulation;
    font-size: 0.8rem;
    overflow: hidden;
}

.restaurant-seat-words {
    display: block;
    max-width: 100%;
    padding: 0 2px;
    pointer-events: none;
}

.restaurant-seat-line {
    font-size: 0.68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A key in the legend under the plan. */
.restaurant-seat-key {
    width: 14px;
    height: 14px;
    border: 2px solid var(--bs-secondary);
    border-radius: 3px;
    background-color: var(--bs-body-bg);
    vertical-align: -2px;
}

/* The states, on the tables and on the legend's keys alike. */
:is(.restaurant-seat-table, .restaurant-seat-key).is-selectable {
    border-color: var(--bs-success);
}

:is(.restaurant-seat-table, .restaurant-seat-key).is-best {
    border-width: 3px;
    background-color: var(--bs-success-bg-subtle);
}

/* Chosen only with the table beside it. */
:is(.restaurant-seat-table, .restaurant-seat-key).is-combo-only {
    border-style: dashed;
}

/* Seated stays grey even where the rules let the table be chosen: a party past its turn, or a booking seated early. */
:is(.restaurant-seat-table, .restaurant-seat-key).restaurant-seat-seated {
    color: var(--bs-secondary-color);
    background-color: var(--bs-secondary-bg);
}

.restaurant-seat-held {
    border-color: var(--bs-warning);
    background-color: var(--bs-warning-bg-subtle);
}

.restaurant-seat-closed {
    border-style: dashed;
    background-color: var(--bs-tertiary-bg);
    opacity: 0.5;
}

:is(.restaurant-seat-table, .restaurant-seat-key).is-wrong-size {
    opacity: 0.4;
}

.restaurant-seat-table.is-current,
.restaurant-seat-key.is-current {
    outline: 3px dashed var(--bs-primary);
    outline-offset: 3px;
}

.restaurant-seat-key.is-current {
    outline-width: 2px;
    outline-offset: 1px;
}

.restaurant-seat-table.is-chosen {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
    box-shadow: 0 0 0 0.3rem rgba(var(--bs-primary-rgb), 0.4);
}

.restaurant-seat-table:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 3px;
}

.restaurant-seat-tab {
    min-height: 44px;
}

/* Booking a table: the week's days and a day's times, as buttons that wrap. */
.restaurant-days {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr));
    gap: 0.5rem;
}

.restaurant-times {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: 0.5rem;
}

.restaurant-times[aria-busy="true"] {
    opacity: 0.5;
}

/* Reservations: the day as a row per table, each booking placed by its time.
   Wide enough to read on a phone by scrolling sideways. */
.restaurant-timeline {
    overflow-x: auto;
}

.restaurant-timeline-inner {
    min-width: 44rem;
}

.restaurant-timeline-label {
    width: 90px;
    flex-shrink: 0;
}

.restaurant-timeline-seats {
    font-size: 0.7rem;
}

.restaurant-timeline-row {
    height: 44px;
}

.restaurant-timeline-track {
    background-image: linear-gradient(90deg, var(--bs-secondary-bg) 1px, transparent 1px);
}

.restaurant-timeline-booking {
    position: absolute;
    top: 5px;
    height: 34px;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    font-size: 0.75rem;
    padding: 2px 6px;
}

.restaurant-timeline-booking.is-selected {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.35);
    z-index: 1;
}

.restaurant-timeline-key {
    width: 12px;
    height: 12px;
    vertical-align: -1px;
}

/* The host stand's tables, as tiles that wrap. */
.restaurant-host-tables {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: 0.5rem;
}

.restaurant-host-table {
    min-height: 64px;
}

/* The location editor's Page tab (M7): the gallery's thumbnails. */
.gallery-thumb {
    position: relative;
    width: 120px;
    height: 90px;
    cursor: grab;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--bs-border-radius);
    border: 1px solid var(--bs-border-color);
}

.gallery-thumb .js-gallery-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    line-height: 1;
    padding: 0.125rem 0.375rem;
}

/* A location page's Content tab (M7): the masthead's fixed row. */
.location-masthead-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-tertiary-bg);
}