/* ================== Vars / Base ================== */
:root {
    /* one source of truth for layout */
    --cal-col-min: 110px; /* column min width (matches pills) */
    --cal-gap: 10px; /* equal gap for pills & slots */

    --bg: #ffffff;
    --text: #0f172a;
    --muted: #475569;
    --pill-idle: #f3f3f3;
    --accent: #2563eb;
    --accent-contrast: #ffffff;
    --slot-idle: #f3f3f3;
    --slot-hover: #e8e8e8;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
}

html, body {
    margin: 0;
    color: var(--text);
    background: var(--bg);
}

.datesContainer {
    max-width: 960px;
    margin: 24px auto;
    padding: 0 16px;
}

.bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.title {
    font-weight: 700;
    font-size: clamp(18px,2.2vw,22px);
    margin-right: auto;
}

.section {
    margin-top: 18px;
}

    .section h3 {
        margin: 0 0 12px;
        font-size: 14px;
        color: var(--muted);
        font-weight: 600;
    }

.nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

    .nav-btn:hover {
        background: #f8fafc;
    }

    .nav-btn:focus-visible {
        outline: 3px solid rgba(37,99,235,.45);
        outline-offset: 2px;
    }


/* ================== Shared Grid ================== */
.date-pills,
.slots {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(var(--cal-col-min), 1fr)) !important;
    gap: var(--cal-gap) !important;
    width: 100%;
}

/* ================== Date Pills ================== */
.pill {
    width: 100%; /* fill grid column */
    height: 84px;
    border-radius: 9px;
    background-color: var(--pill-idle);
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem; /* space between Wed / 1 */
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    user-select: none;
    color: var(--text);
    transition: background .15s ease, transform .05s ease, color .15s ease;
}

    .pill .dow {
        font-weight: 600;
        font-size: 1.05rem;
        line-height: 1.15;
    }

    .pill .day {
        font-weight: 700;
        font-size: 1.25rem;
        line-height: 1.1;
        color: #334155;
    }

    .pill:hover {
        transform: translateY(-1px);
    }

    .pill.active {
        background-color: var(--accent);
        color: var(--accent-contrast);
    }

        .pill.active .day {
            color: var(--accent-contrast);
        }

    .pill:focus-visible {
        outline: 3px solid rgba(37,99,235,.45);
        outline-offset: 2px;
    }

/* ================== Time Slots ================== */
.slots { /* (grid already defined above) */
}

.slot {
    width: 100%; /* align with pill columns */
    height: 52px; /* requested height */
    border: none;
    border-radius: 9px;
    background: var(--slot-idle) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 1.15rem;
    letter-spacing: 0.01em;
    color: #000;
    cursor: pointer;
    user-select: none;
    box-shadow: var(--shadow-sm);
    transition: background .15s ease, transform .05s ease, color .15s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    .slot:hover {
        background: var(--slot-hover);
        transform: translateY(-1px);
    }

    .slot.selected {
        background: var(--accent) !important;
        color: var(--accent-contrast) !important;
        box-shadow: none;
    }

    .slot:disabled {
        opacity: .45;
        cursor: not-allowed;
        text-decoration: line-through;
    }

    .slot:focus-visible {
        outline: 3px solid rgba(37,99,235,.45);
        outline-offset: 2px;
    }

/* ================== Terms / links (optional) ================== */
.terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
}

    .terms input {
        width: 20px;
        height: 20px;
        margin-top: 2px;
    }

    .terms a {
        color: #1d4ed8;
        text-decoration: none;
    }

        .terms a:hover {
            text-decoration: underline;
        }

/* ================== Responsive tweaks ================== */
@media (max-width: 640px) {
    /* Compact container */
    .container {
        max-width: 100%;
        padding: 0 8px; /* was 16px */
        margin: 12px auto; /* was 24px */
    }

    /* Reduce spacing between title and date row */
    .bar {
        margin-bottom: 8px;
    }

    /* Title spacing */
    .title {
        font-size: 18px;
    }

    /* Reduce section margins */
    .section {
        margin-top: 10px;
    }

    /* Slightly smaller gaps in grid */
    .date-pills,
    .slots {
        grid-template-columns: repeat(3, 1fr) !important; /* 3 per row */
        gap: 6px !important; /* tighter gaps */
    }

    /* Adjust pill and slot sizing slightly */
    .pill {
        height: 74px;
        border-radius: 8px;
    }

        .pill .dow {
            font-size: 0.95rem;
        }

        .pill .day {
            font-size: 1.05rem;
        }

    .slot {
        height: 48px;
        font-size: 1rem;
    }
}