/* ==========================================================================
   RESERVATIONS PAGE STYLES
   Page: reservations.html - Multi-step reservation booking flow
   ========================================================================== */

/* --- Time slot selection buttons --- */
.time-slot {
    transition: all 0.3s ease;
}

.time-slot:hover {
    border-color: var(--gold);
}

.time-slot.selected {
    background: var(--gold);
    color: black;
    border-color: var(--gold);
}

.time-slot.unavailable {
    opacity: 0.3;
    cursor: not-allowed;
}

/* --- Guest count increment/decrement buttons --- */
.guest-btn {
    transition: all 0.2s ease;
}

.guest-btn:hover:not(:disabled) {
    background: var(--gold);
    color: black;
}

.guest-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* --- Booking progress step indicators (1, 2, 3...) --- */
.step-indicator {
    transition: all 0.3s ease;
}

.step-indicator.active {
    background: var(--gold);
    color: black;
}

.step-indicator.completed {
    background: var(--gold);
    color: black;
}

/* --- Calendar date picker grid --- */
.calendar-day {
    transition: all 0.2s ease;
}

.calendar-day:hover:not(.disabled) {
    border-color: var(--gold);
}

.calendar-day.selected {
    background: var(--gold);
    color: black;
}

.calendar-day.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.calendar-day.today {
    border-color: var(--gold);
}

/* --- Location selection cards (Malasaña / Salamanca) --- */
.location-card {
    transition: all 0.3s ease;
}

.location-card:hover {
    box-shadow: 0 10px 30px rgba(197, 160, 89, 0.1);
}

.selected-badge {
    transition: all 0.3s ease;
}