.reservation-calendar {
    --calendar-blue: #0878c9;
    --calendar-line: #d9e2ea;
    margin: 20px 0 28px;
    overflow: hidden;
    border: 1px solid #d7e0e8;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(20, 45, 70, .08);
    color: #243746;
    text-align: left;
}

.reservation-calendar__toolbar {
    display: flex;
    min-height: 64px;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    background: var(--calendar-blue);
    color: #fff;
}

.reservation-calendar__month {
    flex: 1;
    margin: 0;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    text-align: left;
}

.reservation-calendar__nav,
.reservation-calendar__today {
    min-width: 40px;
    min-height: 40px;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 6px;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.reservation-calendar__nav { font-size: 27px; line-height: 1; }
.reservation-calendar__today { padding: 0 12px; font-size: 14px; }
.reservation-calendar__nav:hover,
.reservation-calendar__today:hover { background: rgba(255,255,255,.14); }

.reservation-calendar__week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: minmax(42px, auto);
    gap: 2px;
    padding: 10px 14px 12px;
    border-bottom: 1px solid var(--calendar-line);
}

.reservation-calendar__weekday { display: flex; align-items: center; justify-content: center; color: #73808b; font-size: 12px; text-transform: capitalize; }
.reservation-calendar__date-empty { min-width: 0; }

.reservation-calendar__date {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #5b6873;
    cursor: pointer;
    text-align: center;
}

.reservation-calendar__date-number { display: block; }
.reservation-calendar__date-number { width: 38px; height: 38px; margin: 0 auto; border-radius: 50%; font-size: 18px; line-height: 38px; }
.reservation-calendar__date.is-selected .reservation-calendar__date-number { background: var(--calendar-blue); color: #fff; }
.reservation-calendar__date.is-today:not(.is-selected) .reservation-calendar__date-number { color: var(--calendar-blue); font-weight: 700; }
.reservation-calendar__date:disabled { opacity: .35; cursor: not-allowed; }
.reservation-calendar__date:not(:disabled):hover { background: #eef6fc; }

.reservation-calendar__day-title { padding: 14px 18px 8px; font-size: 16px; font-weight: 600; }
.reservation-calendar__timeline { max-height: 440px; overflow-y: auto; padding: 0 12px 12px 0; }
.reservation-calendar__extra-hours { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 18px 14px; }
.reservation-calendar__extra-hours[hidden] { display: none; }
.reservation-calendar__extra-hours-title { flex-basis: 100%; margin: 0; color: #34495e; font-weight: 600; }
.reservation-calendar__base-summary { flex-basis: 100%; margin: 0 0 4px; color: #218838; font-weight: 700; }
.reservation-calendar__grand-total { flex-basis: 100%; margin: 4px 0 0; color: #243746; font-size: 18px; font-weight: 700; }
.reservation-calendar__extra-hour { padding: 9px 12px; border: 1px solid #b8d8f0; border-radius: 5px; background: #eef7fd; color: #075d9b; cursor: pointer; }
.reservation-calendar__extra-hour.is-selected { border-color: var(--calendar-blue); background: var(--calendar-blue); color: #fff; }
.reservation-calendar__extra-hour:hover { border-color: var(--calendar-blue); }
.reservation-calendar__event-addons { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 14px; }
.reservation-calendar__event-addons[hidden] { display: none; }
.reservation-calendar__extra-anniversary,
.reservation-calendar__extra-romantic { padding: 9px 12px; border: 1px solid; border-radius: 5px; cursor: pointer; }
.reservation-calendar__extra-anniversary { border-color: #591820; background: #f8ecee; color: #591820; }
.reservation-calendar__extra-anniversary.is-selected { background: #591820; color: #fff; }
.reservation-calendar__extra-romantic { border-color: #a52a3a; background: #fbecef; color: #8e1f30; }
.reservation-calendar__extra-romantic.is-selected { background: #a52a3a; color: #fff; }
.reservation-calendar__hour { display: grid; grid-template-columns: 78px minmax(0, 1fr); min-height: 64px; border-top: 1px solid var(--calendar-line); }
.reservation-calendar__hour-label { padding: 8px 12px 0 0; color: #71808d; font-size: 13px; text-align: right; }
.reservation-calendar__slots { display: contents; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 5px 0; }
.reservation-calendar__slot { min-height: 48px; border: 1px solid #8db9da; border-radius: 5px; background: #edf7ff; color: #075d9b; cursor: pointer; font-size: 14px; text-align: left; padding: 7px 10px; }
.reservation-calendar__slot:hover { border-color: var(--calendar-blue); background: #dcefff; }
.reservation-calendar__slot.is-selected { border-color: var(--calendar-blue); background: var(--calendar-blue); color: #fff; box-shadow: 0 2px 7px rgba(8,120,201,.25); }
.reservation-calendar__slot:disabled { border-color: #f0b8b8; background: #fde8e8; color: #a94442; cursor: not-allowed; }
.reservation-calendar__hint { margin: 0; padding: 12px 18px 16px; color: #647482; font-size: 13px; }
.reservation-calendar__source { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; overflow: hidden !important; clip-path: inset(50%); }
.reservation-calendar__source input { position: absolute; width: 1px; height: 1px; opacity: .01; }

.reservation-packages { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.reservation-packages legend { margin-bottom: 10px; font-size: 18px; font-weight: 600; }
.reservation-packages__choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.reservation-packages__choice { display: flex; min-height: 92px; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid #cbd6df; border-radius: 8px; background: #fff; cursor: pointer; }
.reservation-packages__choice.is-selected { border-color: #0878c9; background: #eef7fd; box-shadow: 0 0 0 1px #0878c9; }
.reservation-packages__choice input { margin: 0 0 3px; accent-color: #0878c9; }
.reservation-packages__name { font-weight: 600; }
.reservation-packages__price { color: #075d9b; }
.reservation-packages__duration { color: #647482; font-size: 13px; }

@media (max-width: 520px) {
    .reservation-calendar { width: 100%; margin: 14px 0 22px; border-radius: 8px; }
    .reservation-calendar__toolbar { gap: 7px; padding: 9px; }
    .reservation-calendar__month { font-size: 18px; }
    .reservation-calendar__week { gap: 0; padding: 8px 4px; }
    .reservation-calendar__week { grid-auto-rows: minmax(38px, auto); }
    .reservation-calendar__weekday { font-size: 10px; }
    .reservation-calendar__date { padding: 2px 0; }
    .reservation-calendar__date-number { width: 30px; height: 30px; font-size: 14px; line-height: 30px; }
    .reservation-calendar__hour { grid-template-columns: 58px minmax(0, 1fr); }
    .reservation-calendar__slot { padding: 6px; font-size: 12px; }
    .reservation-calendar__timeline { max-height: 55vh; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
}
.reservation-wizard { --wizard-accent: #0878c9; margin-top: 24px; margin-bottom: 48px; }
.reservation-wizard__progress { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.reservation-wizard__progress li { display: flex; align-items: center; gap: 8px; padding: 10px 8px; border-bottom: 3px solid #d9e2ea; color: #687782; font-size: 13px; }
.reservation-wizard__progress li span { display: inline-flex; width: 28px; height: 28px; flex: 0 0 28px; align-items: center; justify-content: center; border-radius: 50%; background: #e9eff4; font-weight: 700; }
.reservation-wizard__progress li.is-active { border-color: var(--wizard-accent); color: #075d9b; font-weight: 700; }
.reservation-wizard__progress li.is-active span, .reservation-wizard__progress li.is-complete span { background: var(--wizard-accent); color: #fff; }
.reservation-wizard__step { min-height: 250px; padding: 24px; border: 1px solid #e0e7ec; border-radius: 10px; background: #fff; box-shadow: 0 5px 20px rgba(20,45,70,.06); }
.reservation-wizard__step[hidden] { display: none !important; }
.reservation-wizard__step > h2 { margin-top: 0; margin-bottom: 22px; color: #243746; }
.reservation-wizard__actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.reservation-wizard__actions [hidden] { display: none !important; }
.reservation-wizard__summary { display: grid; grid-template-columns: minmax(130px, .4fr) 1fr; gap: 10px 16px; }
.reservation-wizard__summary dt { color: #647482; }
.reservation-wizard__summary dd { margin: 0; font-weight: 600; }
.reservation-wizard__total { margin: 24px 0 0; color: #0878c9; font-size: 22px; font-weight: 700; }
.reservation-wizard .reservation-packages__choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.reservation-wizard .reservation-packages__choice { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid #d7e0e8; border-radius: 8px; cursor: pointer; }
.reservation-wizard .reservation-packages__choice.is-selected { border: 2px solid #0878c9; background: #eef7fd; }
.reservation-wizard .reservation-packages__choice input { margin: 0 0 2px; }
.reservation-wizard [data-event-addons] { padding: 20px 0 0; }
.reservation-calendar[data-calendar-mode="date"] [data-calendar-timeline], .reservation-calendar[data-calendar-mode="date"] [data-extra-hours-options], .reservation-calendar[data-calendar-mode="date"] [data-calendar-hint] { display: none !important; }
.reservation-calendar[data-calendar-mode="time"] [data-calendar-week] { display: none !important; }
.reservation-calendar[data-calendar-mode="time"] [data-calendar-day-title] { padding-top: 12px; }
.reservation-calendar__included { margin: 0; padding: 12px 18px; color: #0878c9; font-weight: 700; }
.reservation-calendar[data-calendar-mode="date"] [data-calendar-included] { display: none !important; }
.reservation-calendar__extra-addon { padding: 10px 14px; border: 1px solid #d9a43b; border-radius: 20px; background: #fff8e8; color: #684707; cursor: pointer; }
.reservation-calendar__extra-addon.is-selected { background: #d9a43b; color: #fff; }
.reservation-calendar__exclusive-icon { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; margin-right: 7px; border: 1px solid #c62828; border-radius: 50%; color: #c62828; font-size: 17px; font-weight: 700; line-height: 1; vertical-align: middle; }
.reservation-calendar__secret-conflict { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 18px; }
.reservation-calendar__secret-conflict span { padding: 8px 12px; border: 1px solid #c62828; border-radius: 5px; background: #fde8e8; color: #c62828; font-weight: 700; }
.reservation-calendar__slot.is-selected:disabled { border-color: var(--calendar-blue); background: var(--calendar-blue); color: #fff; box-shadow: 0 2px 7px rgba(8,120,201,.25); }
@media (max-width: 700px) { .reservation-wizard__progress { grid-template-columns: repeat(3, 1fr); } .reservation-wizard__progress li { flex-direction: column; align-items: flex-start; } .reservation-wizard__step { padding: 16px; } }