.reservation-sub { display:flex; align-items:center; gap:4px; margin-top:34px; font-size:12px; color:#C31616; margin-bottom:2px; }
.reservation-sub-icon { width:14px; height:14px; display:block; }
h1 { margin-top:10px; font-size:24px; color:#101828; }
.reservation-description { font-size:14px; margin:8px 0 22px; color:#667085; }
.reservation { margin:28px 0 140px; display:grid; gap:26px; font-size:14px; }
.reservation-step { display:flex; align-items:center; gap:8px; margin:0 0 14px; color:#98a2b3; font-size:14px; letter-spacing:0; }
.reservation-step strong { color:#C31616; font-size:15px; }
.reservation-step i { display:block; width:28px; height:1px; background:#d0d5dd; }
.reservation-calendar { display:flex; flex-direction:column; padding:18px 14px 16px; border:1px solid #ccc; border-radius:12px; background:#fff; }
.calendar-header { display:flex; justify-content:space-between; align-items:center; padding:0 2px; margin-bottom:16px; }
.calendar-nav { width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:#222; background:#fff; font-size:18px; cursor:pointer; }
.calendar-year-month { font-size:18px; font-weight:700; color:#101828; }
.calendar-days { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; margin-bottom:8px; font-size:12px; font-weight:bold; color:#667085; }
.calendar-dates { display:grid; grid-template-columns:repeat(7,1fr); gap:6px 3px; text-align:center; }
.calendar-date { position:relative; min-height:60px; padding:5px 1px; border:0; border-radius:9px; background:#fff; color:#101828; font:inherit; cursor:pointer; overflow:hidden; }
.calendar-date::before { content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; z-index:0; border-radius:50%; background:#C31616; transform:translate(-50%,-50%) scale(0); transition:transform .28s ease, border-radius .28s ease; }
.calendar-date:disabled { cursor:default; }
.calendar-date:not(.other-month):not(.date-reserved):hover { background:#fff3f3; border-radius:6px; }
.calendar-date.selected, .calendar-date.selected:hover { background:#fff; border-radius:6px; color:#fff; }
.calendar-date.selected::before { border-radius:6px; transform:translate(-50%,-50%) scale(18); }
.other-month { color:#cbd5e1; background:#f1f5f9 !important; }
.date-reserved { color:#98a2b3; background:#f2f4f7; }
.calendar-days span:first-child { color:#C31616; }
.calendar-days span:last-child { color:#2563eb; }
.calendar-dates .calendar-date:nth-child(7n+1):not(.other-month):not(.date-reserved) { color:#C31616; }
.calendar-dates .calendar-date:nth-child(7n):not(.other-month):not(.date-reserved) { color:#2563eb; }
.date-num { position:relative; z-index:1; display:block; line-height:18px; font-weight:700; }
.calendar-date.selected .date-num { color:#fff; }
.date-btn { position:relative; z-index:1; display:block; width:max-content; margin:3px auto 0; padding:2px 6px; font-size:10px; border:1px solid #C31616; color:#C31616; background:linear-gradient(to right,#C31616 50%,#fff 50%); background-position:right bottom; background-size:200% 100%; border-radius:999px; transition:color .2s, background-position .28s ease; }
.calendar-date:hover .date-btn { color:#fff; background-position:left bottom; }
.calendar-date.selected .date-btn { color:#fff; border-color:#fff; background:#C31616; }
.date-unavailable { display:block; margin-top:4px; font-size:10px; color:#98a2b3; }
.calendar-legend { display:flex; align-items:center; gap:14px; margin:14px 0 0; padding:0 2px; color:#98a2b3; font-size:12px; }
.calendar-legend span { display:flex; align-items:center; gap:5px; }
.calendar-legend span::before { content:""; width:8px; height:8px; border-radius:50%; box-sizing:border-box; }
.calendar-legend-selected::before { background:#C31616; }
.calendar-legend-available::before { border:1px solid #C31616; background:#fff; }
.calendar-legend-reserved::before { background:#cbd5e1; }
.reservation-field { padding:16px 0 0; }
.field-list { display:grid; gap:14px; grid-template-columns:1fr; list-style:none; padding:0; margin:0; }
.field-item { overflow:hidden; background:#fff; }
.field-name { display:flex; align-items:center; height:42px; padding:0 14px; background:#fff; color:#C31616; font-size:15px; }
.time-list { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; list-style:none; padding:12px; margin:0; }
.time-empty { display:flex; align-items:center; justify-content:center; min-height:42px; padding:12px; border-radius:8px; background:#f9fafb; color:#98a2b3; font-size:13px; text-align:center; }
.time-slot { min-width:0; transition:transform .15s; cursor:pointer; }
.time-slot:hover { transform:scale(1.02); }
.time-slot:hover .jw-button { background:#fff3f3; }
.time-slot.unavailable { display:flex; align-items:center; justify-content:center; position:relative; height:38px; padding:0 8px; border-radius:8px; background:#f2f4f7; color:#98a2b3; font-size:12px; cursor:default; }
.time-slot.unavailable:hover { transform:none; }
.time-slot.unavailable span:first-child { text-decoration:line-through; }
.unavailable-mark { position:absolute; right:7px; top:50%; transform:translateY(-50%); font-size:10px; color:#94a3b8; line-height:1; white-space:nowrap; }
.jw-button { cursor:pointer; border:none; background:none; padding:0; font:inherit; color:inherit; }
.jw-button.submit { width:112px; height:46px; background:#C31616; color:#fff; border-radius:10px; font-weight:700; }
.jw-button.submit:disabled { background:#cbd5e1; color:#fff; cursor:default; }
.time-slot .jw-button { width:100%; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid #d0d5dd; border-radius:8px; background:#fff; color:#101828; font-size:12px; }
.time-slot.selected .jw-button { border:2px solid #C31616; background:#fff; color:#C31616; font-weight:700; }
.time-slot.selected:hover { transform:none; }
.reservation-status { position:fixed; left:0; right:0; bottom:0; z-index:50; padding:12px 14px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid #f0caca; background:rgba(255,255,255,.96); }
.reservation-status-inner { display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:720px; margin:0 auto; }
.reservation-summary { min-width:0; display:grid; gap:4px; }
.reservation-summary-title { font-size:12px; color:#667085; }
.reservation-summary-text { color:#101828; font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reservation-status-actions { display:flex; align-items:center; gap:8px; }
.reservation-reset { display:none; width:46px; height:46px; border:1px solid #d0d5dd; border-radius:10px; background:#fff; color:#667085; font-size:20px; font-weight:700; }
.reservation-reset.active { display:block; }