/* reserves.css - Reservation page styles */

/* Page-specific overrides */
section {
    margin-bottom: var(--spacing-md);
}

section h2 {
    margin-bottom: var(--spacing-md);
}

/* Honeypot — visually hidden off-screen rather than display:none, since some spam bots
   skip fields hidden that way but still auto-fill anything else they can find. */
.reserve-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

/* Form rows */
.reserve-row {
    margin-bottom: var(--spacing-lg);
}

.reserve-row:last-child {
    margin-bottom: 0;
}

.reserve-row label {
    display: block;
    font-weight: var(--font-weight-semibold);
    font-family: 'playfair', Times, serif;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-base);
    letter-spacing: calc(1px * var(--spacing-scale));
}

/* Asterisk on labels whose field is `required` — applies to inputs, selects,
   textareas, and the form-associated <ex-date-picker>. */
.reserve-row:has(> [required]) > label::after,
.reserve-field:has(> [required]) > label::after {
    content: ' *';
    color: color-mix(in srgb, var(--c-green-aqua) 75%, transparent);
    font-weight: var(--font-weight-bold);
    margin-left: 2px;
}

/* Inputs, textareas — selects are now the custom ex-select component, styled
   separately below alongside ex-date-picker (see "Custom form controls"). */
.reserve-row input,
.reserve-row textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1.5px solid color-mix(in srgb, var(--c-green-aqua) 25%, transparent);
    border-radius: var(--border-radius);
    background: color-mix(in srgb, var(--c-light-gold) 30%, transparent);
    color: var(--c-green-aqua);
    font-size: var(--font-size-base);
    font-family: 'montserrat', Arial, sans-serif;
    transition: border-color var(--animation-duration-fast),
                background-color var(--animation-duration-fast);
    box-sizing: border-box;
}

.reserve-row input:focus,
.reserve-row textarea:focus {
    border-color: var(--c-green-aqua);
    background: color-mix(in srgb, var(--c-light-gold) 45%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-green-aqua) 30%, transparent);
    outline: none;
}

.reserve-row input::placeholder,
.reserve-row textarea::placeholder {
    color: color-mix(in srgb, var(--c-green-aqua) 35%, transparent);
}

/* Flag empty/invalid required fields once a submit attempt has failed —
   .reserve-form-invalid is toggled on the <form> by the submit handler, so
   nothing looks like an error before the user has actually tried to submit. */
.reserve-form-invalid .reserve-row input:invalid,
.reserve-form-invalid .reserve-row textarea:invalid,
.reserve-form-invalid ex-date-picker:invalid .dp-trigger,
.reserve-form-invalid ex-select:invalid .es-trigger {
    border-color: color-mix(in srgb, var(--c-red) 55%, transparent);
    background: color-mix(in srgb, var(--c-red) 8%, transparent);
}

.reserve-form-invalid .reserve-row input:invalid:focus,
.reserve-form-invalid .reserve-row textarea:invalid:focus,
.reserve-form-invalid ex-date-picker:invalid[data-open] .dp-trigger,
.reserve-form-invalid ex-select:invalid[data-open] .es-trigger {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-red) 35%, transparent);
}

/* Inline row for date/time/guests */
.reserve-row-inline {
    display: flex;
    gap: var(--spacing-md);
}

.reserve-field {
    flex: 1;
    min-width: 0;
}

.reserve-field label {
    display: block;
    font-weight: var(--font-weight-semibold);
    font-family: 'playfair', Times, serif;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-base);
    letter-spacing: calc(1px * var(--spacing-scale));
}

/* Submit button */
.reserve-submit-row {
    text-align: center;
    margin-top: var(--spacing-lg);
}

.reserve-submit {
    padding: var(--spacing-sm) var(--spacing-2xl);
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--c-green-normal);
    color: white;
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    font-family: 'montserrat', Arial, sans-serif;
    letter-spacing: calc(1.5px * var(--spacing-scale));
    transition: background-color var(--animation-duration-fast),
                transform var(--animation-duration-fast);
}

.reserve-submit:hover {
    background-color: color-mix(in srgb, var(--c-green-normal), black 15%);
    transform: scale(1.02);
}

.reserve-submit:active {
    transform: scale(0.98);
}

.reserve-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Kill switch / blackout announcement banner — same card recipe as
   .empty-infocard (general.css) / .menu-tasting-notice (menu.css), the
   site's established "notice box" look, rather than a generic web-alert
   pattern (icon badge, shadow, accent bar) that doesn't match anything
   else on the site. */
.reserve-banner {
    position: relative;
    overflow: hidden;
    text-align: center;
    background-color: hsla(calc(var(--base-gold-h) + var(--color-warmth)), calc(var(--base-gold-s) * var(--color-intensity)), calc(var(--base-gold-l) * var(--color-intensity)), calc(0.9 * var(--color-intensity)));
    border-radius: var(--border-radius);
    padding: var(--padding-loose);
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: calc(1.6 * var(--text-scale));
    color: var(--c-green-aqua);
}

/* Diagonal marching tape strips along the top/bottom edges — dark stripes
   over transparent gaps (the card's own gold shows through), not literal
   yellow/black. A single finite background-size tile, tiled by the browser's
   normal background-repeat and translated by exactly one tile-width — the
   standard seamless-diagonal-stripe technique (same one Bootstrap's striped
   progress bar uses). Animating a repeating-linear-gradient's own internal
   period directly (what this used to do) doesn't loop cleanly at 45deg: a
   pure-X translation needs to move by the period times sqrt(2), not the
   period itself, or every loop restart visibly jumps. */
.reserve-banner::before,
.reserve-banner::after {
    content: '';
    position: absolute;
    /* Extend a full tile-width past each side (clipped by the parent's
       overflow: hidden) so the pattern's own cut edge never sits anywhere
       near the visible rounded corner — that's what was reading as
       "breakage": a diagonal tile getting sliced off exactly at the same
       spot as the card's curve, at a straight left/right boundary the
       diagonal was never designed to meet cleanly. */
    left: -180px;
    right: -180px;
    height: 10px;
    background-image: linear-gradient(
        45deg,
        transparent 25%,
        color-mix(in srgb, var(--c-green-normal) 60%, transparent) 25%,
        color-mix(in srgb, var(--c-green-normal) 60%, transparent) 50%,
        transparent 50%,
        transparent 75%,
        color-mix(in srgb, var(--c-green-normal) 60%, transparent) 75%,
        color-mix(in srgb, var(--c-green-normal) 60%, transparent) 100%
    );
    background-size: 180px 180px;
    animation: reserve-banner-tape 13.5s linear infinite;
}

.reserve-banner::before {
    top: 0;
}

.reserve-banner::after {
    bottom: 0;
}

@keyframes reserve-banner-tape {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 180px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reserve-banner::before,
    .reserve-banner::after {
        animation: none;
    }
}

.reserve-banner--blocking {
    background-color: color-mix(in srgb, var(--c-red) 20%, transparent);
    color: var(--c-light-gold);
}

/* Success card */
.reserve-success {
    text-align: center;
}

.reserve-success h3 {
    font-family: 'playfair', Times, serif;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
    letter-spacing: calc(2px * var(--spacing-scale));
}

.reserve-success p {
    margin-bottom: var(--spacing-sm);
}

.reserve-contact-info {
    display: flex;
    gap: var(--spacing-2xl);
    justify-content: center;
    flex-wrap: wrap;
    margin: var(--spacing-lg) 0;
}

.reserve-contact-info a {
    color: var(--c-green-normal);
    transition: color var(--animation-duration-fast);
}

.reserve-contact-info a:hover {
    color: var(--c-green-aqua);
}

.reserve-success .reserve-submit {
    margin-top: var(--spacing-md);
}

/* Restaurant info section */
.reserve-info {
    text-align: center;
}

.reserve-info h3 {
    font-family: 'playfair', Times, serif;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-xs);
    letter-spacing: calc(1.5px * var(--spacing-scale));
    text-transform: uppercase;
}

.reserve-info-grid {
    display: flex;
    gap: var(--spacing-2xl);
    justify-content: center;
    flex-wrap: wrap;
}

.reserve-info-block {
    flex: 1;
    min-width: 160px;
}

.reserve-info-block a {
    color: var(--c-green-aqua);
    text-decoration: none;
    transition: color var(--animation-duration-fast);
}

.reserve-info-block a:hover {
    color: var(--c-green-normal);
}

/* Reservation policy notes (Large Groups / Families) — book-style paragraphs,
   matching .menu-tasting-notice's approach on the menu pages: reserves.css
   doesn't load index.css, so .empty-infocard's indent/justify paragraph
   treatment (defined there, home-page-only) is reproduced locally here.
   Same max-width as .menu-tasting-notice, so this reads as the same size of
   disclaimer box as the ones on the tasting menu pages. */
.reserve-policies-notice {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.reserve-policies-notice h3 {
    /* Same dark text as .reserve-success h3 elsewhere on this page — just
       centered here, unlike that one. */
    text-align: center;
    margin-bottom: var(--spacing-sm);
}

.reserve-policies-notice h3:not(:first-child) {
    margin-top: var(--spacing-lg);
}

.reserve-policies-notice p {
    text-indent: 4ch;
    text-align: justify;
    margin: 0 0 var(--spacing-md) 0;
}

.reserve-policies-notice p:last-child {
    margin-bottom: 0;
}

.reserve-policies-notice strong {
    font-weight: var(--font-weight-bold);
}

/* Notice popup (single style used for every rejection message) */
.reserve-notice-message {
    text-align: center;
    font-size: var(--font-size-base);
}

/* Confirmation popup */
.reserve-confirm-summary {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    text-align: left;
}

.reserve-confirm-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid color-mix(in srgb, var(--c-green-aqua) 15%, transparent);
}

.reserve-confirm-row:last-child {
    border-bottom: none;
}

.reserve-confirm-label {
    font-family: 'playfair', Times, serif;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    letter-spacing: calc(1px * var(--spacing-scale));
    text-transform: uppercase;
    color: color-mix(in srgb, var(--c-green-aqua) 60%, transparent);
    flex-shrink: 0;
    margin-right: var(--spacing-md);
}

.reserve-confirm-value {
    font-family: 'montserrat', Arial, sans-serif;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    text-align: right;
}

.reserve-confirm-buttons {
    margin-top: var(--spacing-lg);
    width: 100%;
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
}

/* Confirm buttons now use .btn-action / .btn-ghost classes from general.css */

/* Mobile */
@media only screen and (max-width: 768px) {
    section {
        margin-top: var(--spacing-xl);
    }

    .empty-infocard {
        padding: var(--padding-normal);
    }

    .art-deco-diamond .deco-center {
        width: calc(35px * var(--spacing-scale));
        height: calc(35px * var(--spacing-scale));
    }

    .reserve-row-inline {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .reserve-info-grid {
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .reserve-contact-info {
        flex-direction: column;
        gap: var(--spacing-md);
    }
}

@media only screen and (max-width: 480px) {
    section {
        margin-top: var(--spacing-lg);
        margin-bottom: var(--spacing-xs);
    }

    .reserve-submit {
        width: 100%;
    }
}

/* Custom date picker (ex-date-picker) */
ex-date-picker {
    position: relative;
    display: block;
}

.dp-trigger {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1.5px solid color-mix(in srgb, var(--c-green-aqua) 25%, transparent);
    border-radius: var(--border-radius);
    background: color-mix(in srgb, var(--c-light-gold) 30%, transparent);
    color: var(--c-green-aqua);
    font-size: var(--font-size-base);
    font-family: 'montserrat', Arial, sans-serif;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--animation-duration-fast),
                background-color var(--animation-duration-fast);
    box-sizing: border-box;
}

.dp-trigger:hover {
    border-color: color-mix(in srgb, var(--c-gold) 60%, transparent);
}

.dp-trigger:focus,
ex-date-picker[data-open] .dp-trigger {
    border-color: var(--c-green-aqua);
    background: color-mix(in srgb, var(--c-light-gold) 45%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-green-aqua) 30%, transparent);
    outline: none;
}

.dp-trigger-placeholder {
    color: color-mix(in srgb, var(--c-green-aqua) 35%, transparent);
}

.dp-popover {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: max-content;
    min-width: 280px;
    max-width: calc(100vw - 2 * var(--spacing-md));
    padding: var(--spacing-md);
    background: color-mix(in srgb, var(--c-light-gold) 95%, white);
    border: 1.5px solid color-mix(in srgb, var(--c-gold) 60%, transparent);
    border-radius: var(--border-radius);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--c-green-aqua) 25%, transparent);
}

.dp-popover[hidden] {
    display: none;
}

.dp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.dp-title {
    font-family: 'playfair', Times, serif;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    color: var(--c-green-aqua);
    text-transform: capitalize;
    letter-spacing: calc(0.5px * var(--spacing-scale));
}

.dp-nav {
    width: calc(32px * var(--spacing-scale));
    height: calc(32px * var(--spacing-scale));
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--c-green-aqua);
    font-size: calc(var(--font-size-base) * 1.4);
    font-family: 'playfair', Times, serif;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--animation-duration-fast),
                color var(--animation-duration-fast);
}

.dp-nav:hover {
    background: color-mix(in srgb, var(--c-gold) 35%, transparent);
}

.dp-nav:focus-visible {
    outline: 2px solid var(--c-green-aqua);
    outline-offset: 2px;
}

.dp-weekdays,
.dp-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: calc(2px * var(--spacing-scale));
}

.dp-weekday {
    text-align: center;
    font-family: 'playfair', Times, serif;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: color-mix(in srgb, var(--c-green-aqua) 65%, transparent);
    text-transform: uppercase;
    padding: var(--spacing-xs) 0;
}

.dp-day {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--c-green-aqua);
    font-family: 'montserrat', Arial, sans-serif;
    font-size: var(--font-size-sm);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color var(--animation-duration-fast),
                color var(--animation-duration-fast);
}

.dp-day-empty {
    cursor: default;
}

.dp-day:not([disabled]):hover {
    background: color-mix(in srgb, var(--c-gold) 40%, transparent);
}

.dp-day:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--c-green-aqua);
}

.dp-day-today:not(.dp-day-selected) {
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-green-normal) 70%, transparent);
}

.dp-day-selected {
    background: var(--c-green-normal);
    color: white;
}

.dp-day-selected:not([disabled]):hover {
    background: var(--c-green-normal);
}

.dp-day-past,
.dp-day-closed {
    color: color-mix(in srgb, var(--c-green-aqua) 55%, transparent);
    cursor: not-allowed;
}

.dp-day-closed {
    background: color-mix(in srgb, var(--c-green-aqua) 8%, transparent);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--c-green-aqua) 70%, transparent);
    text-decoration-thickness: 1.5px;
}

/* Custom select (ex-select) — same visual language as ex-date-picker above */
ex-select {
    position: relative;
    display: block;
}

.es-trigger {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1.5px solid color-mix(in srgb, var(--c-green-aqua) 25%, transparent);
    border-radius: var(--border-radius);
    background: color-mix(in srgb, var(--c-light-gold) 30%, transparent);
    color: var(--c-green-aqua);
    font-size: var(--font-size-base);
    font-family: 'montserrat', Arial, sans-serif;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--animation-duration-fast),
                background-color var(--animation-duration-fast);
    box-sizing: border-box;
}

.es-trigger:hover {
    border-color: color-mix(in srgb, var(--c-gold) 60%, transparent);
}

.es-trigger:focus,
ex-select[data-open] .es-trigger {
    border-color: var(--c-green-aqua);
    background: color-mix(in srgb, var(--c-light-gold) 45%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-green-aqua) 30%, transparent);
    outline: none;
}

.es-trigger-placeholder {
    color: color-mix(in srgb, var(--c-green-aqua) 35%, transparent);
}

.es-popover {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    min-width: 160px;
    max-width: calc(100vw - 2 * var(--spacing-md));
    max-height: min(320px, 60vh);
    overflow-y: auto;
    padding: var(--spacing-xs);
    background: color-mix(in srgb, var(--c-light-gold) 95%, white);
    border: 1.5px solid color-mix(in srgb, var(--c-gold) 60%, transparent);
    border-radius: var(--border-radius);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--c-green-aqua) 25%, transparent);
    /* Own scrollbar treatment instead of inheriting the sitewide one (general.css)
       — that one's dark-green track is tuned for the page's own dark backdrop and
       looks wrong against this popover's light background. Track fully
       transparent (just the gold thumb) rather than any solid color here. */
    scrollbar-width: thin;
    scrollbar-color: var(--c-gold) transparent;
}

.es-popover::-webkit-scrollbar {
    width: 8px;
}

.es-popover::-webkit-scrollbar-track {
    background: transparent;
}

.es-popover::-webkit-scrollbar-thumb {
    background: var(--c-gold);
    border-radius: var(--border-radius-sm);
}

.es-popover[hidden] {
    display: none;
}

.es-group:not(:first-child) {
    margin-top: var(--spacing-xs);
}

.es-group-label {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-family: 'playfair', Times, serif;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: color-mix(in srgb, var(--c-green-aqua) 65%, transparent);
    text-transform: uppercase;
    letter-spacing: calc(0.5px * var(--spacing-scale));
}

.es-option {
    display: block;
    width: 100%;
    padding: var(--spacing-sm);
    border: none;
    border-radius: var(--border-radius-sm);
    background: transparent;
    color: var(--c-green-aqua);
    font-size: var(--font-size-base);
    font-family: 'montserrat', Arial, sans-serif;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--animation-duration-fast),
                color var(--animation-duration-fast);
}

.es-option:not([disabled]):hover {
    background: color-mix(in srgb, var(--c-gold) 40%, transparent);
}

.es-option:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--c-green-aqua);
}

.es-option-selected {
    background: var(--c-green-normal);
    color: white;
}

.es-option-selected:not([disabled]):hover {
    background: var(--c-green-normal);
}

.es-option[disabled] {
    color: color-mix(in srgb, var(--c-green-aqua) 40%, transparent);
    cursor: not-allowed;
}

/* Hours grid */
.hours-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}

.hours-day {
    font-family: 'playfair', Times, serif;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
}

.hours-time {
    font-family: 'montserrat', Arial, sans-serif;
    font-size: var(--font-size-sm);
    color: var(--c-green-aqua);
}