/* Rezervace — kalendář + formulář + time roller */

/* Vodorovně max(24px, výřez) — naležato na iPhonu jinak výřez uřízne sloupec „Po" */
.booking-page {
    max-width: 880px; margin: 0 auto;
    padding: var(--s-6) max(var(--s-5), env(safe-area-inset-right, 0px)) var(--s-8) max(var(--s-5), env(safe-area-inset-left, 0px));
}

.booking-hero { text-align: center; padding: var(--s-6) 0 var(--s-5); }
.booking-hero .icon { color: var(--accent); margin-bottom: var(--s-3); }
.booking-hero h1 { font-size: var(--fs-2xl); margin-bottom: var(--s-2); }
.booking-hero p { color: var(--text-2); max-width: 420px; margin: 0 auto; font-size: var(--fs-sm); }

.booking-legend { display: flex; gap: var(--s-2); margin-bottom: var(--s-5); flex-wrap: wrap; justify-content: center; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.legend-dot--free { background: var(--green); }
.legend-dot--today { background: var(--accent); }
.legend-dot--taken { background: var(--orange); }
.legend-dot--blocked { background: var(--text-3); }

/* Kalendář */
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4); }
.cal-nav h2 { font-size: var(--fs-lg); }
/* Long translated month names stay readable on narrow screens. */
@media (max-width: 480px) {
    .cal-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2); }
    .cal-nav h2 { grid-column: 1 / -1; grid-row: 1; text-align: center; }
    .cal-nav a { min-width: 0; white-space: normal; }
    .cal-nav a:last-child { justify-self: end; }
}

.booking-calendar {
    display: grid;
    /* minmax(0, 1fr), ne 1fr: 1fr = minmax(auto, 1fr) a .cal-day s aspect-ratio si
       vynutí 132px minimum, takže na telefonu byly vidět jen 3 dny ze 7 */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: var(--s-6);
}
.cal-header { text-align: center; font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); padding: var(--s-2); }
.cal-day {
    aspect-ratio: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
    border: 2px solid transparent;
    background: var(--card);
    -webkit-tap-highlight-color: transparent;
}
.cal-day:hover { background: var(--card-2); border-color: var(--border-strong); }
.cal-day.today { border-color: var(--accent); }
/* Dnešek dostane 12% crimson wash, ať přežije mezi hover rámečky (číslo zůstává čitelné) */
.cal-day.today:not(.selected) { background: var(--accent-soft); }
.cal-day.selected { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Vybraný den se zvedne z mřížky se stejno-tónovým podsvitem */
.cal-day.selected { box-shadow: 0 4px 14px -4px rgba(200, 16, 46, .45); }
/* Taktilní press na klikatelné dny (zrcadlí .btn:active) */
.cal-day:not(.past):not(.blocked):not(.empty):active { transform: scale(.94); }
.cal-day.blocked { opacity: .3; pointer-events: none; text-decoration: line-through; }
.cal-day.past { opacity: .2; pointer-events: none; }
.cal-day.empty { background: transparent; pointer-events: none; }
.cal-day.has-booking { position: relative; }
.cal-day.has-booking::after {
    content: '';
    position: absolute;
    bottom: 4px;
    width: 6px; height: 6px;
    background: var(--orange);
    border-radius: 50%;
}

/* Formulář */
.booking-form-card { margin-top: var(--s-5); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

/* Telefonní prefix */
.phone-prefix-wrap {
    display: flex;
    align-items: stretch;
    background: var(--card-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.phone-prefix-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.phone-prefix-label {
    padding: 0 var(--s-3);
    color: var(--text-2);
    font-size: 15px; font-weight: 600;
    border-right: 1px solid var(--border);
    display: flex; align-items: center;
    user-select: none;
}
.phone-prefix-wrap input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px;
    color: var(--text);
    font-size: 16px;
    outline: none;
}

/* Time roller (Apple styl) */
.time-roller-row { display: flex; align-items: center; gap: var(--s-3); }
.time-roller-group { flex: 1; }
.time-roller-group > label {
    display: block;
    font-size: 11px; color: var(--text-2); font-weight: 600;
    margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em;
}
.time-roller-trigger {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--card-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 12px 16px;
    font-size: 17px; font-weight: 600;
    cursor: pointer;
    transition: border-color var(--t-fast);
}
.time-roller-trigger:hover { border-color: var(--accent); }
.time-roller-dash { color: var(--text-3); font-size: 20px; padding-top: 22px; }

#timePickerOverlay {
    display: none;
    position: fixed; inset: 0; z-index: var(--z-modal);
    background: rgba(0, 0, 0, .7);
    align-items: flex-end; justify-content: center;
}
#timePickerOverlay.open { display: flex; }
.tp-sheet {
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: var(--s-5) var(--s-5) var(--s-7);
    width: 100%; max-width: 480px;
    animation: tpUp .28s cubic-bezier(.16, 1, .3, 1);
}
@keyframes tpUp { from { transform: translateY(100%); } to { transform: none; } }
.tp-title { text-align: center; font-weight: 700; margin-bottom: var(--s-4); }
.tp-cols { display: flex; align-items: center; justify-content: center; position: relative; height: 216px; }
.tp-col {
    flex: 1; height: 216px;
    overflow-y: scroll; overflow-x: hidden;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: relative;
}
.tp-col::-webkit-scrollbar { display: none; }
.tp-col-item {
    height: 36px;
    scroll-snap-align: center;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 500; color: rgba(255, 255, 255, .35);
    user-select: none; cursor: pointer;
}
.tp-col-pad { height: 90px; flex-shrink: 0; pointer-events: none; }
.tp-selection-band {
    position: absolute; left: 0; right: 0;
    top: 50%; transform: translateY(-50%);
    height: 36px; pointer-events: none; z-index: 2;
    border-top: 1px solid var(--border-strong);
    border-bottom: 1px solid var(--border-strong);
}
.tp-colon { font-size: 26px; font-weight: 700; padding: 0 6px; }
.tp-col::before, .tp-col::after {
    content: '';
    position: sticky; display: block; z-index: 3;
    left: 0; right: 0; height: 90px; pointer-events: none;
}
.tp-col::before { top: 0; background: linear-gradient(to bottom, var(--card), transparent); }
.tp-col::after { bottom: 0; background: linear-gradient(to top, var(--card), transparent); }
.tp-actions { display: flex; gap: var(--s-3); margin-top: var(--s-4); }
.tp-actions .btn { flex: 1; }
.tp-actions .btn--primary { flex: 2; }

/* Úspěšná rezervace */
.booking-success { text-align: center; padding: var(--s-7) var(--s-5); max-width: 480px; margin: 0 auto; }
.booking-success-icon {
    width: 72px; height: 72px;
    background: rgba(48, 209, 88, .12);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--s-5);
    color: var(--green);
}