.booking-widget {
    --booking-open: #d7f1df;
    --booking-open-text: #14532d;
    --booking-booked: #f7cdd3;
    --booking-booked-text: #7f1d1d;
    --booking-closed: #e2e5e9;
    --booking-closed-text: #374151;
    --booking-selected: var(--epg-calendar-month-active, #b00000);
    --booking-nav-bg: var(--epg-nav-bg, #343a40);
    --booking-nav-text: var(--epg-nav-active, #ffffff);
    width: 100%;
    text-align: left;
}

.booking-widget-months {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.booking-widget-admin .booking-widget-months {
    gap: 0.75rem;
}

.booking-widget-admin .booking-widget-month {
    padding: 0.55rem;
}

.booking-widget-admin .booking-widget-month h3 {
    margin-bottom: 0.5rem;
    font-size: 0.88rem;
}

.booking-widget-month {
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background: #fff;
}

.booking-widget-month h3 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}

.booking-widget-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.22rem;
}

.booking-widget-weekday {
    padding: 0.35rem 0.15rem;
    border-radius: 4px;
    color: var(--booking-nav-text);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    background: var(--booking-nav-bg);
}

.booking-widget-day {
    display: grid;
    align-content: center;
    justify-items: center;
    min-width: 0;
    min-height: 3rem;
    padding: 0.25rem;
    border: 2px solid transparent;
    border-radius: 5px;
    color: #202124;
    line-height: 1;
    text-align: center;
    cursor: pointer;
}

.booking-widget-admin .booking-widget-day {
    min-height: 2.45rem;
    padding: 0.16rem;
}

.booking-widget-day:disabled {
    cursor: default;
}

.booking-widget-day.is-open {
    color: var(--booking-open-text);
    background: var(--booking-open);
}

.booking-widget-day.is-booked {
    color: var(--booking-booked-text);
    background: var(--booking-booked);
}

.booking-widget-day.is-closed {
    color: var(--booking-closed-text);
    background: var(--booking-closed);
}

.booking-widget-day.is-neutral {
    color: #202124;
    background: #fff;
}

.booking-widget-day.is-outside {
    opacity: 0.4;
    background: #f8f9fa;
}

.booking-widget-day.is-selected {
    border-color: var(--booking-selected);
    box-shadow: inset 0 0 0 1px var(--booking-selected), 0 0 0 2px color-mix(in srgb, var(--booking-selected), transparent 76%);
}

.booking-widget-day:not(:disabled):hover,
.booking-widget-day:not(:disabled):focus {
    border-color: var(--booking-nav-bg);
    outline: none;
}

.booking-widget-day-number {
    font-size: 0.95rem;
    font-weight: 800;
}

.booking-widget-headcount {
    margin-top: 0.35rem;
    padding: 0.14rem 0.4rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

.booking-widget-headcount.is-zero {
    color: #6b7280;
    background: rgba(229, 231, 235, 0.82);
}

.booking-widget-headcount.is-green {
    color: #14532d;
    background: #bbf7d0;
}

.booking-widget-headcount.is-yellow {
    color: #713f12;
    background: #fde68a;
}

.booking-widget-headcount.is-red {
    color: #7f1d1d;
    background: #fecaca;
}

.booking-widget-markers {
    display: flex;
    gap: 0.18rem;
    justify-content: center;
    min-height: 0.45rem;
    margin-top: 0.22rem;
}

.booking-widget-dot {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
}

.booking-widget-dot.is-local {
    background: #198754;
}

.booking-widget-dot.is-shared {
    background: #f0b429;
}

.booking-widget-admin .booking-widget-headcount {
    margin-top: 0.2rem;
    padding: 0.08rem 0.28rem;
    font-size: 0.64rem;
}

.booking-widget-selection {
    margin-bottom: 0.85rem;
    padding: 0.7rem 0.85rem;
    border-left: 4px solid var(--booking-selected);
    border-radius: 6px;
    color: #1f2937;
    background: #f8f9fa;
    font-weight: 700;
}

.booking-widget-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-top: 1rem;
}

.booking-widget-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.booking-widget-legend i {
    width: 1rem;
    height: 1rem;
    border-radius: 3px;
}

.booking-widget-legend .is-open {
    background: var(--booking-open);
}

.booking-widget-legend .is-booked {
    background: var(--booking-booked);
}

.booking-widget-legend .is-closed {
    background: var(--booking-closed);
}

.range-widget {
    position: relative;
    max-width: 48rem;
}

.range-widget > .form-control {
    max-width: 32rem;
    cursor: pointer;
}

.range-widget-close {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--booking-nav-bg);
    border-radius: 0.25rem;
    color: var(--booking-nav-text);
    background: var(--booking-nav-bg);
    font-weight: 700;
}

.range-widget-popover {
    position: absolute;
    z-index: 50;
    top: calc(100% + 0.35rem);
    left: 0;
    width: min(48rem, calc(100vw - 2rem));
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.18);
}

.range-widget-nav {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 0.85rem;
}

.range-widget-nav strong {
    text-align: center;
}

.range-widget-nav button {
    min-width: 2.15rem;
    padding: 0.28rem 0.45rem;
    border: 1px solid var(--booking-nav-bg);
    border-radius: 0.25rem;
    color: var(--booking-nav-text);
    background: var(--booking-nav-bg);
    font-weight: 700;
}

.range-widget-calendars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.range-widget-time-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.range-widget-time-field {
    margin: 0;
    padding: 0;
    border: 0;
}

.range-widget-time-field legend {
    margin-bottom: 0.35rem;
    font-size: 0.875rem;
    font-weight: 700;
}

.range-widget-time-selects {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.35rem;
    align-items: center;
}

.range-widget-time-selects span {
    font-weight: 800;
}

.range-widget-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.range-widget .booking-widget-month {
    padding: 0.75rem;
}

.range-widget .booking-widget-day {
    min-height: 2.45rem;
}

.range-widget .booking-widget-legend {
    display: none;
}

@media (max-width: 1050px) {
    .booking-widget-months {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .booking-widget-months,
    .range-widget-calendars,
    .range-widget-time-row {
        grid-template-columns: 1fr;
    }

    .range-widget-nav {
        grid-template-columns: 1fr;
    }

    .range-widget-popover {
        position: fixed;
        inset: 1rem;
        width: auto;
        overflow: auto;
    }

    .booking-widget-month {
        padding: 0.65rem;
    }

    .booking-widget-day {
        min-height: 2.55rem;
    }
}