#availability { scroll-margin-top: 6rem; }
.availability-calendar { max-width: 760px; margin-top: 22px; }
.availability-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.availability-toolbar h3 { margin: 0; text-align: center; }
.availability-toolbar .btn { min-height: 44px; min-width: 44px; padding: 8px; }
.availability-toolbar .btn::after { content: none; }
.availability-toolbar .btn:disabled { opacity: .4; cursor: default; }
.availability-note { font-size: .9rem; }
.availability-calendar table { width: 100%; table-layout: fixed; border-spacing: 3px; text-align: center; }
.availability-calendar th { font-size: .85rem; }
.availability-calendar td { height: 54px; padding: 0; background: #fff; border-radius: 4px; font-size: clamp(.65rem, 2.7vw, .88rem); }
.availability-calendar td > :is(button, span) { display: grid; place-content: center; min-height: 54px; width: 100%; gap: 2px; border-radius: inherit; }
.availability-calendar td button { background: #e2f2ed; border: 1px solid #74a895; color: #164c3a; cursor: pointer; }
.availability-calendar td button:hover { background: #c9e8dc; }
.availability-calendar td button:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.availability-calendar td[data-status="booked"] { background: #e9edef; color: #384c59; }
.availability-calendar .availability-outside { background: transparent; color: #586b76; }
.availability-package { margin-top: 22px; }