/* ==========================================
   RESERVATION SECTION
   ========================================== */
.reservation-eyebrow {
    display: inline-block;
    font-family: 'Exo 2', 'Nasalization', sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-color);
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.reservation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin: 1.25rem 0 0.5rem;
}

.reservation-card {
    padding: 1.35rem;
    background: color-mix(in srgb, var(--content-bg-color) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 30%, transparent);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.reservation-card h3 {
    margin: 0;
    font-size: 1.3rem;
}

.reservation-card p {
    margin: 0 0 0.25rem;
}

.reservation-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    background: color-mix(in srgb, var(--accent-color) 35%, transparent);
    border-radius: 999px;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

.reservation-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.reservation-list li {
    position: relative;
    padding-left: 1.2rem;
}

.reservation-list li::before {
    content: '>';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-color);
    font-size: 0.9rem;
    line-height: 1.1;
}

.contact-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin: 1.4rem 0 0.6rem;
}

.contact-note {
    font-size: 0.95rem;
    color: color-mix(in srgb, var(--text-color) 75%, transparent);
}

.reservation-form {
    display: grid;
    gap: 1rem;
    margin-top: 0.4rem;
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 30%, transparent);
    background: color-mix(in srgb, var(--content-bg-color) 80%, transparent);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.reservation-form label {
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-color-strong);
}

.reservation-form input,
.reservation-form select,
.reservation-form textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    /* 0.05rem (~1px) less vertical padding */
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--heading-color) 15%, transparent);
    background: rgba(0, 0, 0, 0.35);
    color: var(--heading-color);
    font-size: 1rem;
}

.reservation-form input:focus,
.reservation-form select:focus,
.reservation-form textarea:focus {
    outline: 1px solid var(--accent-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 35%, transparent);
}

.reservation-form textarea {
    min-height: 120px;
    resize: vertical;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    /* slightly denser */
}

.form-warning {
    margin: 0;
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--accent-color) 80%, var(--heading-color));
}

.form-row-inline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/* layout the submit button and reservation summary side-by-side (desktop) */
.form-actions-row {
    display: grid;
    grid-template-columns: 1fr 220px;
    /* summary | actions column */
    gap: 1rem;
    align-items: start;
}

.form-actions-row .form-actions {
    margin-left: 0;
}

.reservation-summary {
    width: 100%;
    background: transparent;
    padding: 0.5rem;
}

/* Make summary table labels and values top-aligned and clearer */
.reservation-summary table td {
    vertical-align: top;
    padding: 0.15rem 0.5rem;
}

.reservation-summary table td:first-child {
    font-weight: 700;
    padding-right: 0.6rem;
}

#res-availability-warning {
    color: var(--accent-color);
    font-weight: 700;
    margin-top: 0.4rem;
}

/* Submit button: larger and aligned to the right of the summary */
.form-actions {
    display: flex;
    flex: 0 0 200px;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: column;
    gap: 0.6rem;
}

.form-actions .action-button {
    padding: 1.05rem 2.2rem;
    font-size: 1.05rem;
    min-width: 160px;
}

@media (max-width: 700px) {
    .form-actions-row {
        flex-direction: column;
        align-items: stretch;
    }
}

.reservation-form .form-hint {
    margin: 0;
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--text-color) 70%, transparent);
}

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

    .contact-options {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================
   AVAILABILITY CALENDAR
   ========================================== */
.calendar-container {
    margin: 0;
    /* handled by parent reservation-panel when combined */
    background: transparent;
    padding: 0;
    border-radius: 0;
    border: none;
}

/* Combined panel styling for calendar + form */
.reservation-panel {
    margin: 2rem 0;
    background: color-mix(in srgb, var(--content-bg-color) 80%, transparent);
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--content-border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.reservation-panel .calendar-controls {
    margin-bottom: 0.75rem;
}

.reservation-panel .calendar-legend {
    margin-top: 0.5rem;
}

.reservation-panel .reservation-form {
    margin-top: 1rem;
    padding: 0;
    /* form uses panel padding */
    background: transparent;
    border: none;
    box-shadow: none;
}

.calendar-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

#cal-current-week-label {
    font-weight: bold;
    font-size: 1.1rem;
}

.availability-calendar {
    overflow-x: auto;
}

.cal-grid {
    display: grid;
    grid-template-columns: 50px repeat(7, 1fr);
    gap: 2px;
    min-width: 100%;
}

.cal-header-cell {
    text-align: center;
    font-weight: bold;
    padding: 0.25rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    line-height: 1.2;
}

.cal-header-cell.empty {
    background: transparent;
}

.cal-date {
    font-size: 0.8rem;
    opacity: 0.8;
    font-weight: normal;
}

.cal-time-cell {
    text-align: right;
    padding-right: 0.5rem;
    font-size: 0.8rem;
    align-self: center;
    color: var(--text-color);
}

.cal-cell {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 1px;
    min-height: 23px;
    /* 1px less */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    border: 1px solid transparent;
}

/* Past slots: visually striped and not selectable */
.cal-cell.past {
    /* remove the gray background for non-selectable past slots and keep a subtle stripe */
    background: transparent;
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 6px, transparent 6px, transparent 12px);
    pointer-events: none;
}

.cal-cell.closed {
    /* remove the heavy gray so closed cells blend with the calendar background */
    background: transparent;
}

.cal-cell.open {
    cursor: pointer;
}

.cal-cell.open:hover {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid var(--accent-color);
}

.cal-cell.insufficient {
    /* animated diagonal stripes using accent color */
    /* stronger, more visible accent stripes */
    background-image: repeating-linear-gradient(135deg,
            color-mix(in srgb, var(--accent-color) 30%, transparent) 0,
            color-mix(in srgb, var(--accent-color) 30%, transparent) 6px,
            transparent 6px,
            transparent 12px);
    background-size: 24px 24px;
    animation: stripeShift 1.8s linear infinite;
    opacity: 1;
    /* leave pointer to indicate caution but allow selection handling in JS */
    cursor: pointer;
}

@keyframes stripeShift {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 24px 24px;
    }
}

.dots-container {
    /* Use a fixed 5-columns layout so there are 5 dots per row */
    display: grid;
    grid-template-columns: repeat(5, max-content);
    gap: 4px;
    justify-content: center;
    max-width: 100%;
}

.dot {
    width: 12px;
    /* slightly wider so fewer dots fit per line */
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

.dot.free {
    background-color: var(--text-color);
    border: 1px solid var(--text-color);
    opacity: 0.3;
}

.dot.reserved {
    background-color: var(--accent-color);
    border: 1px solid var(--accent-color);
}

.calendar-legend {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    justify-content: flex-end;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.loading-spinner {
    text-align: center;
    padding: 2rem;
    font-style: italic;
}

.loading-events,
.calendar-error {
    text-align: center;
    padding: 2rem;
    color: #7f8c8d;
    font-style: italic;
    width: 100%;
}

.events-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.events-loading__spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--accent-color);
    animation: events-spin 0.9s linear infinite;
}

.events-loading__text {
    line-height: 1.4;
}

.events-retry-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.events-retry-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
    opacity: 0.85;
}

@keyframes events-spin {
    to {
        transform: rotate(360deg);
    }
}

.error-message {
    text-align: center;
    padding: 1rem;
    color: var(--accent-color);
}

.cal-cell.selected {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color);
}

.cal-header-cell.highlight,
.cal-time-cell.highlight {
    background-color: var(--accent-color);
    color: #fff;
    text-shadow: none;
    border-radius: 4px;
}

.cal-header-cell.header-hover,
.cal-time-cell.header-hover {
    background-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
    color: #fff;
    border-radius: 4px;
    transition: background-color 0.1s ease;
}

/* Additional mobile fixes: reduce pill height slightly and force panel/form elements to stack */
@media (max-width: 480px) {
    .reservation-pill {
        padding: 0.18rem 0.75rem;
        /* slightly less vertical padding (~1px reduction) */
    }

    /* Ensure inline form groups stack on narrow phones */
    .form-row-inline {
        grid-template-columns: 1fr !important;
    }

    /* Make specific inputs full width to avoid overflow */
    #res-phone,
    #res-date,
    #res-mode {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Stack reservation summary and actions vertically (summary first) */
    .form-actions-row {
        grid-template-columns: 1fr !important;
        align-items: stretch;
    }

    .form-actions {
        flex: none !important;
        justify-content: flex-start !important;
        width: 100%;
    }

    .form-actions .action-button {
        width: 100%;
        min-width: 0;
    }
}

/* Further mobile tweaks requested: equalize datetime field width, smaller calendar controls, smaller availability cells */
@media (max-width: 480px) {

    /* Ensure each column wrapper uses full width so inputs don't appear wider */
    .reservation-form .form-row-inline>div {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Force datetime-local to the same sizing as other inputs on iOS/mobile */
    .reservation-form input[type="datetime-local"],
    .reservation-form input[type="tel"],
    .reservation-form select {
        width: 100% !important;
        box-sizing: border-box;
        -webkit-appearance: none;
        appearance: none;
    }

    /* Calendar nav buttons: use same visual style as .action-button but constrained width */
    .calendar-controls .cal-nav-button {
        /* inherit action-button visuals, only restrict size */
        max-width: 5em;
        padding: 0.45rem 0.9rem;
        font-size: 0.95rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Make availability grid cells smaller (half the visual height) */
    .reservation-panel .cal-cell {
        min-height: 12px;
        padding: 0.5px;
    }

    /* Reduce dot sizes in calendar legend */
    .reservation-panel .dot {
        width: 5px;
        /* +1px wider */
        height: 5px;
        border-radius: 0;
        /* square indicators on mobile */
    }

    /* Reduce gap between dots by 1px on mobile */
    .dots-container {
        gap: 3px;
    }
}