.availability-picker {
    --calendar-accent: #A68B5B;
    --calendar-ink: #1a1a1a;
    background: #fff;
    border: 1px solid rgba(26, 26, 26, .09);
    border-radius: 18px;
    box-shadow: 0 18px 55px rgba(26, 26, 26, .08);
    padding: 1.25rem;
}

.availability-picker__top,
.availability-picker__nav,
.availability-picker__legend,
.availability-picker__flex,
.availability-picker__selection {
    align-items: center;
    display: flex;
}

.availability-picker__top {
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.availability-picker__eyebrow,
.availability-picker__label,
.availability-picker__legend {
    font-family: Montserrat, sans-serif;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.availability-picker__eyebrow { color: var(--calendar-accent); }
.availability-picker__title {
    font-family: "Playfair Display", serif;
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    line-height: 1.08;
    margin: .25rem 0 0;
}

.availability-picker__nav { gap: .5rem; }
.availability-picker__nav button {
    align-items: center;
    background: #f7f4ee;
    border: 1px solid rgba(26, 26, 26, .08);
    border-radius: 999px;
    color: var(--calendar-ink);
    display: inline-flex;
    font-size: 1.1rem;
    height: 2.6rem;
    justify-content: center;
    transition: background .2s ease, color .2s ease;
    width: 2.6rem;
}
.availability-picker__nav button:hover:not(:disabled) { background: var(--calendar-ink); color: #fff; }
.availability-picker__nav button:disabled { cursor: not-allowed; opacity: .28; }

.availability-picker__months { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.availability-month { min-width: 0; }
.availability-month__name {
    font-family: Montserrat, sans-serif;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    margin: .5rem 0 .9rem;
    text-align: center;
    text-transform: uppercase;
}
.availability-month__week,
.availability-month__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.availability-month__week span {
    color: #8b877f;
    font-family: Montserrat, sans-serif;
    font-size: .58rem;
    font-weight: 600;
    padding: .35rem 0;
    text-align: center;
    text-transform: uppercase;
}
.availability-day {
    align-items: center;
    aspect-ratio: 1;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--calendar-ink);
    display: inline-flex;
    font-family: Montserrat, sans-serif;
    font-size: .78rem;
    justify-content: center;
    margin: 1px;
    min-width: 0;
    position: relative;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.availability-day > span { position: relative; z-index: 2; }
.availability-day:not(:disabled):hover { box-shadow: inset 0 0 0 1px var(--calendar-accent); }
.availability-day--outside { visibility: hidden; }
.availability-day--past { color: #c8c5bf; text-decoration: line-through; }
.availability-day--occupied {
    background: repeating-linear-gradient(135deg, #f0ede7, #f0ede7 4px, #e3dfd7 4px, #e3dfd7 8px);
    color: #9d9890;
    text-decoration: line-through;
}
.availability-day--selected,
.availability-day--range,
.availability-day--start,
.availability-day--end {
    background: var(--calendar-accent);
    border-radius: 50%;
    box-shadow: 0 7px 18px rgba(126, 101, 57, .22);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
.availability-day--selected:not(:disabled):hover {
    background: #806a43;
    box-shadow: 0 9px 22px rgba(126, 101, 57, .32);
    color: #fff;
    transform: translateY(-1px);
}
.availability-day--today::after {
    background: var(--calendar-accent);
    border-radius: 50%;
    bottom: .25rem;
    content: "";
    height: 3px;
    position: absolute;
    width: 3px;
}
.availability-day--selected.availability-day--today::after { background: #fff; }

.availability-picker__legend { color: #777269; flex-wrap: wrap; gap: .9rem; margin: 1rem 0; }
.availability-picker__legend span { align-items: center; display: inline-flex; gap: .35rem; }
.availability-picker__legend i { border: 1px solid rgba(26,26,26,.1); border-radius: 50%; height: .7rem; width: .7rem; }
.availability-picker__legend .is-available { background: #fff; }
.availability-picker__legend .is-occupied { background: #e3dfd7; }
.availability-picker__legend .is-selected { background: var(--calendar-accent); border-radius: 999px; width: 1.35rem; }

.availability-picker__selection {
    align-items: stretch;
    background: #f9f7f2;
    border: 1px solid rgba(26, 26, 26, .07);
    border-radius: 12px;
    gap: .75rem;
    margin-top: 1rem;
    padding: .85rem;
}
.availability-picker__date { flex: 1; min-width: 0; }
.availability-picker__date input {
    background: transparent;
    border: 0;
    color: var(--calendar-ink);
    font-family: Montserrat, sans-serif;
    font-size: .78rem;
    font-weight: 600;
    margin-top: .2rem;
    padding: 0;
    width: 100%;
}
.availability-picker__date input:focus { outline: 2px solid var(--calendar-accent); outline-offset: 4px; }
.availability-picker__arrow { align-self: center; color: var(--calendar-accent); }

.availability-picker__flex { align-items: flex-start; flex-direction: column; gap: .55rem; margin-top: 1rem; }
.availability-picker__flex-options { display: flex; flex-wrap: wrap; gap: .45rem; }
.availability-picker__flex input { position: absolute; opacity: 0; pointer-events: none; }
.availability-picker__flex label {
    border: 1px solid rgba(26, 26, 26, .14);
    border-radius: 999px;
    cursor: pointer;
    font-family: Montserrat, sans-serif;
    font-size: .68rem;
    padding: .55rem .75rem;
}
.availability-picker__flex input:checked + label { background: var(--calendar-ink); border-color: var(--calendar-ink); color: #fff; }
.availability-picker__status { color: #666159; font-family: Montserrat, sans-serif; font-size: .72rem; line-height: 1.55; margin-top: .8rem; min-height: 1.2rem; }
.availability-picker__status.is-error { color: #9a3d32; }
.availability-picker__sync { color: #9a958c; font-family: Montserrat, sans-serif; font-size: .58rem; letter-spacing: .08em; margin-top: .65rem; text-transform: uppercase; }

@media (max-width: 767px) {
    .availability-picker { border-radius: 14px; padding: 1rem .7rem; }
    .availability-picker__months { grid-template-columns: 1fr; }
    .availability-month:nth-child(2) { display: none; }
    .availability-day { font-size: .73rem; }
    .availability-picker__selection { gap: .45rem; padding: .75rem .6rem; }
}