/* Modern / interactive layer (loaded after styles.css). */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(22,163,74,0); } }
main > * { animation: rise .28s ease both; }
.srow, .slot { animation: pop .22s ease both; animation-delay: calc(var(--i, 0) * 18ms); }

.nextav { display: none; align-items: center; gap: 8px; font-size: .85rem; background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; border-radius: 999px; padding: 6px 14px; width: fit-content; margin: 0 0 12px; }
.nextav.on { display: inline-flex; }
.nextav .muted { color: #4d7c5a; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; animation: pulse 1.8s infinite; }

.toolbar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar .search { margin: 0; flex: 0 1 190px; }
.tabs2 { display: flex; gap: 4px; background: #f1f2f4; padding: 3px; border-radius: 10px; overflow-x: auto; max-width: 100%; }
.tabs2 button { border: 0; background: none; padding: 6px 12px; border-radius: 8px; font-size: .84rem; font-weight: 600; color: var(--muted); white-space: nowrap; transition: background .15s, color .15s; }
.tabs2 button:hover { color: var(--ink); }
.tabs2 button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

.srow { position: relative; }
.srow .go { flex: none; color: var(--red); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; font-weight: 700; margin-left: -4px; }
.srow:hover .go, .srow:focus-visible .go { opacity: 1; transform: none; }
.srow:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(229,20,28,.10); }
.free { font-style: normal; font-size: .68rem; font-weight: 700; background: #dcfce7; color: #166534; padding: 1px 7px; border-radius: 999px; margin-left: 4px; vertical-align: 1px; }

.pick1-head img { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--red); }
.host img { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--red); }

.stepper { list-style: none; display: flex; gap: 8px; justify-content: center; margin: 0 auto 14px; padding: 0; font-size: .82rem; color: var(--muted); font-weight: 600; max-width: 980px; }
.stepper li { display: flex; align-items: center; gap: 7px; }
.stepper li + li::before { content: ""; width: 28px; height: 2px; background: #d5d8de; border-radius: 2px; }
.stepper li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #e5e7eb; color: #4b5563; font-size: .72rem; }
.stepper li.cur { color: var(--ink); }
.stepper li.cur span { background: var(--red); color: #fff; }
.stepper li.done span { background: var(--ink); color: #fff; }

.slot button { transition: background .12s, transform .12s, color .12s; }
.slot:not(.sel) button:hover { background: var(--red); color: #fff; transform: translateX(2px); }
.day { transition: background .12s, transform .12s; }
.day.avail:hover { transform: scale(1.08); }
@media (max-width: 560px) { .stepper li:not(.cur) { font-size: 0; gap: 0; } .stepper li:not(.cur) span { font-size: .72rem; } }