/* Desktop: verberg mobiele kalender */
@media (min-width: 768px) {
    .booking-calendar-mobile { display: none !important; }
}

/* Booking.com-style mobiele kalender - ALLEEN < 768px */
@media (max-width: 767px) {
    .booking-calendar-mobile {
        --bc-primary: var(--color-primary, #ef4a46);
        --bc-primary-hover: #d63d39;
        --bc-range-bg: #fce8e8;
        --bc-today-border: var(--color-primary, #ef4a46);
        display: flex;
        flex-direction: column;
        min-height: 320px;
    }
    .booking-calendar-mobile {
        padding: 0 16px 16px;
    }
    .booking-calendar-mobile__weekdays {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        text-align: center;
        font-size: 0.75rem;
        font-weight: 600;
        color: #6b7280;
        margin-bottom: 8px;
        padding: 0 4px;
    }
    .booking-calendar-mobile__weekdays span {
        padding: 4px 0;
    }
    .booking-calendar-mobile__months {
        flex: 1;
        overflow-y: auto;
        min-height: 240px;
        max-height: 280px;
        -webkit-overflow-scrolling: touch;
    }
    .booking-calendar-mobile__month {
        margin-bottom: 24px;
    }
    .booking-calendar-mobile__month-title {
        font-size: 1rem;
        font-weight: 600;
        color: #111;
        margin-bottom: 12px;
        padding: 0 4px;
    }
    .booking-calendar-mobile__days {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
    }
    .booking-calendar-mobile__day {
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        font-weight: 500;
        color: #111827;
        background: #fff;
        border: 2px solid transparent;
        border-radius: 50%;
        cursor: pointer;
        touch-action: manipulation;
        min-height: 40px;
    }
    .booking-calendar-mobile__day:hover {
        background: #f9fafb;
    }
    .booking-calendar-mobile__day.other-month {
        color: #d1d5db;
        cursor: default;
    }
    .booking-calendar-mobile__day.other-month:hover {
        background: #fff;
    }
    .booking-calendar-mobile__day.today {
        border-color: var(--bc-today-border);
        background: #fff;
    }
    .booking-calendar-mobile__day.today.selected,
    .booking-calendar-mobile__day.today.range-start,
    .booking-calendar-mobile__day.today.range-end {
        background: var(--bc-primary);
        border-color: var(--bc-primary);
        color: #fff;
    }
    .booking-calendar-mobile__day.range-start,
    .booking-calendar-mobile__day.range-end {
        background: var(--bc-primary);
        color: #fff;
        border-color: var(--bc-primary);
    }
    .booking-calendar-mobile__day.in-range {
        background: var(--bc-range-bg);
        color: #111;
        border-radius: 0;
    }
    .booking-calendar-mobile__day.range-start {
        border-radius: 50% 0 0 50%;
    }
    .booking-calendar-mobile__day.range-end {
        border-radius: 0 50% 50% 0;
    }
    .booking-calendar-mobile__day.range-start.range-end {
        border-radius: 50%;
    }
    .booking-calendar-mobile__day.disabled {
        color: #d1d5db;
        cursor: not-allowed;
    }
    .booking-calendar-mobile__day.disabled:hover {
        background: #fff;
    }
    .booking-calendar-mobile__footer {
        flex-shrink: 0;
        padding-top: 16px;
        margin-top: 16px;
        border-top: 1px solid #e5e7eb;
    }
    .booking-calendar-mobile__range {
        font-size: 0.95rem;
        color: #374151;
        min-height: 1.4em;
        margin-bottom: 12px;
    }
    .booking-calendar-mobile__btn {
        width: 100%;
        padding: 14px 24px;
        font-size: 1rem;
        font-weight: 600;
        background: var(--bc-primary);
        color: #fff;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        touch-action: manipulation;
    }
    .booking-calendar-mobile__btn:hover {
        background: var(--bc-primary-hover);
    }
    .booking-calendar-mobile__btn:disabled {
        background: #9ca3af;
        cursor: not-allowed;
    }
    .booking-calendar-mobile__flexible-text {
        padding: 24px;
        color: #6b7280;
        font-size: 0.95rem;
    }
}