/* ============================================================
   Availability calendar — Bachoase Bischofsmais
   Follows the same design tokens as contact-form.css
   ============================================================ */

#availability_section {
    padding: 60px clamp(30px, 5vw, 70px);
    background: var(--bg-color, #fff);
    border-top: 1px solid color-mix(in oklab, var(--color-1, #0f6a6a) 15%, transparent);
}

@media (prefers-color-scheme: dark) {
    #availability_section {
        background: color-mix(in oklab, var(--color-1, #0f6a6a) 6%, var(--dark, #111));
    }
}

.ac-inner {
    max-width: 820px;
    margin: 0 auto;
}

/* ── Heading ─────────────────────────────────────────────── */

.ac-inner > h3 {
    font-size: var(--fsz-xxl, 1.6rem);
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 .5rem;
    letter-spacing: 0.02em;
    color: var(--text-color, #111);
}

.ac-subtitle {
    text-align: center;
    margin: 0 0 1.8rem;
    font-size: var(--fsz-xl, 1rem);
    color: color-mix(in oklab, var(--text-color, #111) 70%, transparent);
}

/* ── Apartment tabs ──────────────────────────────────────── */

.ac-tabs {
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin-bottom: 1.4rem;
}

.ac-tab {
    padding: .4rem 1.4rem;
    border: 2px solid var(--color-1, #0f6a6a);
    background: transparent;
    color: var(--color-1, #0f6a6a);
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: var(--fsz-sm, .875rem);
    font-weight: 600;
    transition: background .2s, color .2s;
}

.ac-tab.ac-tab-active,
.ac-tab:hover {
    background: var(--color-1, #0f6a6a);
    color: var(--light, #fff);
}

/* ── Month navigation ────────────────────────────────────── */

.ac-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
}

.ac-prev,
.ac-next {
    background: none;
    border: none;
    color: var(--color-1, #0f6a6a);
    cursor: pointer;
    font: inherit;
    font-size: var(--fsz-sm, .875rem);
    font-weight: 600;
    padding: .3rem .6rem;
    border-radius: 6px;
    transition: background .15s;
}

.ac-prev:hover,
.ac-next:hover {
    background: color-mix(in oklab, var(--color-1, #0f6a6a) 12%, transparent);
}

.ac-nav-label {
    font-size: var(--fsz-sm, .875rem);
    color: color-mix(in oklab, var(--text-color, #111) 60%, transparent);
}

/* ── Month grid ──────────────────────────────────────────── */

.ac-months {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.ac-month {
    min-width: 0;
}

.ac-month-title {
    text-align: center;
    font-weight: 700;
    font-size: var(--fsz-md, .95rem);
    margin-bottom: .6rem;
    color: var(--text-color, #111);
}

.ac-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.ac-wday {
    text-align: center;
    font-size: .7rem;
    font-weight: 700;
    color: color-mix(in oklab, var(--text-color, #111) 50%, transparent);
    padding: 2px 0 4px;
    text-transform: uppercase;
}

.ac-cell {
    text-align: center;
    padding: 5px 2px;
    font-size: .78rem;
    border-radius: 4px;
    line-height: 1;
}

.ac-cell.ac-empty {
    background: transparent;
}

.ac-cell.ac-past {
    color: color-mix(in oklab, var(--text-color, #111) 30%, transparent);
}

.ac-cell.ac-available {
    background: color-mix(in oklab, var(--color-2, #2ecc71) 22%, transparent);
    color: color-mix(in oklab, var(--color-2, #1a7a42) 120%, #000);
    font-weight: 500;
}

.ac-cell.ac-booked {
    background: color-mix(in oklab, #e34a4a 18%, transparent);
    color: color-mix(in oklab, #c0392b 130%, #000);
    text-decoration: line-through;
    text-decoration-color: color-mix(in oklab, #c0392b 60%, transparent);
}

/* ── Legend ──────────────────────────────────────────────── */

.ac-legend {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    justify-content: center;
    margin-top: 1.5rem;
    font-size: var(--fsz-sm, .875rem);
    color: color-mix(in oklab, var(--text-color, #111) 75%, transparent);
}

.ac-legend-item {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.ac-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}

.ac-swatch-available {
    background: color-mix(in oklab, var(--color-2, #2ecc71) 22%, transparent);
    border: 1px solid color-mix(in oklab, var(--color-2, #2ecc71) 50%, transparent);
}

.ac-swatch-booked {
    background: color-mix(in oklab, #e34a4a 18%, transparent);
    border: 1px solid color-mix(in oklab, #e34a4a 40%, transparent);
}

/* ── Loading / error states ──────────────────────────────── */

.ac-message {
    text-align: center;
    padding: 2rem 1rem;
    font-size: var(--fsz-md, .95rem);
    color: color-mix(in oklab, var(--text-color, #111) 60%, transparent);
}

.ac-unconfigured {
    text-align: center;
    padding: 1.5rem 1rem;
    border: 2px dashed color-mix(in oklab, var(--color-1, #0f6a6a) 30%, transparent);
    border-radius: 10px;
    color: color-mix(in oklab, var(--text-color, #111) 55%, transparent);
    font-size: var(--fsz-sm, .875rem);
    line-height: 1.6;
}