.booking-view-switch{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 20px}
.booking-view-switch button{display:flex;align-items:center;gap:8px;border:1px solid var(--l);background:#fff;color:var(--g);padding:10px 15px;border-radius:999px;font-weight:700;cursor:pointer}
.booking-view-switch button span{display:grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:#e8f2ee;font-size:12px}
.booking-view-switch button.active{background:var(--g);border-color:var(--g);color:#fff}
.booking-view-switch button.active span{background:#ffffff2b}
.booking-panel{display:none}
.booking-panel.active{display:block}
.booking-state{align-self:center;padding:10px 14px;border-radius:999px;font-weight:700;font-size:13px}
.booking-state.completed{background:#e4f3ea;color:#147052}
.booking-state.cancelled{background:#fff0ed;color:#bd422c}
.booking-empty{background:#fff;border:1px dashed var(--l);border-radius:12px;padding:22px;color:var(--m)}
@media(max-width:650px){.booking-view-switch{display:grid;grid-template-columns:1fr}.booking-view-switch button{justify-content:space-between}.booking{grid-template-columns:1fr}.booking-state,.booking .delete{justify-self:start;margin-top:8px}}