/* reserves.css - Reservation page styles */

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

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

/* 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));
}

/* Inputs, selects, textareas */
.reserve-row input,
.reserve-row select,
.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 select:focus,
.reserve-row textarea:focus {
    border-color: var(--c-gold);
    background: color-mix(in srgb, var(--c-light-gold) 45%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-gold) 30%, transparent);
    outline: none;
}

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

/* Selects styled to match the date trigger */
.reserve-row select {
    cursor: pointer;
}

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

/* Muted placeholder text when the disabled empty option is still selected */
.reserve-row select:invalid {
    color: color-mix(in srgb, var(--c-green-aqua) 35%, transparent);
}

.reserve-row select option {
    color: var(--c-green-aqua);
}

.reserve-row select option:disabled {
    color: color-mix(in srgb, var(--c-green-aqua) 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);
}

/* 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);
}

.reserve-large-party {
    margin-top: var(--spacing-lg);
    font-style: italic;
    font-size: var(--font-size-sm);
    opacity: 0.8;
}

/* 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-gold);
    background: color-mix(in srgb, var(--c-light-gold) 45%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-gold) 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-gold);
    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-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;
}

/* 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);
}