/* ============================================================
   Villa Tartaruga — Availability Calendar
   ============================================================ */

.avail-calendar {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    user-select: none;
    max-width: 460px;
}

/* ---------- Header with month nav ---------- */
.avail-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.avail-cal-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
}
.avail-cal-nav {
    display: flex;
    gap: .35rem;
}
.avail-cal-nav button {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border, #e3e8ee);
    background: #fff;
    color: var(--ocean);
    font-size: 1rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .15s, border-color .15s;
}
.avail-cal-nav button:hover:not(:disabled) {
    background: var(--ocean);
    border-color: var(--ocean);
    color: #fff;
}
.avail-cal-nav button:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* ---------- Weekday header ---------- */
.avail-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: .5rem;
}
.avail-cal-weekdays span {
    text-align: center;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    padding: .35rem 0;
}

/* ---------- Day grid ---------- */
.avail-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.avail-day {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .88rem;
    font-family: var(--font-body);
    color: var(--ink);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background .12s, color .12s, transform .12s;
    position: relative;
}

.avail-day.empty {
    visibility: hidden;
    pointer-events: none;
}

/* Available */
.avail-day.available:hover:not(.selected):not(.range) {
    background: #eef6f8;
}

/* Unavailable / booked */
.avail-day.blocked {
    color: #c8c1b8;
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-color: rgba(226, 114, 91, .5);
}
.avail-day.blocked::after {
    content: "";
    position: absolute;
    inset: 25%;
    border-radius: 50%;
    background: rgba(226, 114, 91, .08);
    pointer-events: none;
}

/* Past */
.avail-day.past {
    color: #d0cbc4;
    cursor: not-allowed;
}

/* Selected check-in / check-out */
.avail-day.selected {
    background: var(--ocean);
    color: #fff;
    font-weight: 600;
}

/* Range between check-in and check-out */
.avail-day.range {
    background: #d7e8ef;
    color: var(--ink);
    border-radius: 0;
}
.avail-day.range-start {
    background: var(--ocean);
    color: #fff;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.avail-day.range-end {
    background: var(--ocean);
    color: #fff;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Today marker */
.avail-day.today::before {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--coral);
}
.avail-day.selected.today::before,
.avail-day.range-start.today::before,
.avail-day.range-end.today::before {
    background: #fff;
}

/* ---------- Legend ---------- */
.avail-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e3e8ee;
    font-size: .78rem;
    color: var(--muted);
}
.avail-legend span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.avail-legend .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #eef6f8;
    border: 1px solid #c9dbe2;
}
.avail-legend .dot.blocked { background: rgba(226,114,91,.35); border-color: rgba(226,114,91,.5); }
.avail-legend .dot.selected { background: var(--ocean); border-color: var(--ocean); }
.avail-legend .dot.range { background: #d7e8ef; border-color: #b7d3de; }

/* ---------- Selection summary below calendar ---------- */
.avail-selection {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e3e8ee;
    font-size: .88rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-height: 44px;
}
.avail-selection .avail-sel-dates {
    color: var(--ink);
    font-weight: 500;
}
.avail-selection .avail-sel-hint {
    color: var(--muted);
    font-size: .82rem;
}
.avail-selection .btn {
    padding: .55rem 1.1rem;
    font-size: .85rem;
}

/* ---------- Loading state ---------- */
.avail-calendar.loading {
    opacity: .6;
    pointer-events: none;
}

/* ---------- Mobile ---------- */
@media (max-width: 540px) {
    .avail-calendar { padding: 1.15rem; }
    .avail-day { font-size: .82rem; }
    .avail-legend { gap: .75rem; font-size: .72rem; }
}