/*
 * Schnüffelnase Buchungskalender – eindeutige Statusdarstellung
 */

.single-product .ph-calendar-container {
    --sn-cal-green: #2f7d4a;
    --sn-cal-green-bg: #eef8f1;
    --sn-cal-red: #b83a3a;
    --sn-cal-red-bg: #fff0f0;
    --sn-cal-muted: #a99f98;
    --sn-cal-muted-bg: #f2efed;
    --sn-cal-orange: #e8792e;
}

.single-product .ph-calendar-days {
    padding: 14px 16px 18px !important;
}

.single-product li.ph-calendar-date {
    box-sizing: border-box;
    margin: 3px 0 !important;
    border: 2px solid transparent !important;
    border-radius: 10px !important;
    font-weight: 700;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

/* Verfügbar: grün umrandet und leicht grün hinterlegt. */
.single-product li.ph-calendar-date:not(:empty):not(.not-available):not(.booking-disabled):not(.selected-date) {
    color: #245f39 !important;
    background: var(--sn-cal-green-bg) !important;
    border-color: var(--sn-cal-green) !important;
    cursor: pointer;
}

.single-product li.ph-calendar-date:not(:empty):not(.not-available):not(.booking-disabled):not(.selected-date):hover,
.single-product li.ph-calendar-date:not(:empty):not(.not-available):not(.booking-disabled).mouse_hover {
    color: #fff !important;
    background: var(--sn-cal-green) !important;
    border-color: var(--sn-cal-green) !important;
    box-shadow: 0 5px 12px rgba(47, 125, 74, .2);
    transform: translateY(-1px);
}

/* Ausgebucht oder anderweitig nicht verfügbar: klar rot. */
.single-product li.ph-calendar-date.not-available:not(.booking-disabled),
.single-product li.ph-calendar-date.not-available:not(.booking-disabled):hover {
    color: #8d2929 !important;
    background: var(--sn-cal-red-bg) !important;
    border-color: #dc7777 !important;
    box-shadow: none !important;
    cursor: not-allowed;
    transform: none;
}

/* Vergangene/gesperrte Tage: neutral grau statt rot. */
.single-product li.ph-calendar-date.booking-disabled,
.single-product li.ph-calendar-date.booking-disabled:hover {
    color: var(--sn-cal-muted) !important;
    background: var(--sn-cal-muted-bg) !important;
    border-color: #ded8d4 !important;
    box-shadow: none !important;
    cursor: not-allowed;
    transform: none;
    text-decoration: line-through;
}

/* Ausgewählt bleibt das eindeutige Schnüffelnase-Orange. */
.single-product li.ph-calendar-date.selected-date,
.single-product li.ph-calendar-date.selected-date:hover,
.single-product li.ph-calendar-date.timepicker-selected-date {
    color: #fff !important;
    background: var(--sn-cal-orange) !important;
    border-color: var(--sn-cal-orange) !important;
    box-shadow: 0 5px 14px rgba(232, 121, 46, .28) !important;
    transform: translateY(-1px);
}

/* Heute zusätzlich markieren, ohne den Verfügbarkeitsstatus zu überdecken. */
.single-product li.ph-calendar-date.today {
    outline: 2px solid #5b3a2a;
    outline-offset: 2px;
}

/* Erklärung direkt unter dem Datumsraster. */
.single-product .time-calendar-date-section::after {
    content: "Grün = verfügbar   ·   Rot = ausgebucht   ·   Orange = ausgewählt";
    display: block;
    margin: 2px 16px 16px;
    padding: 10px 14px;
    color: #5c4b42;
    background: #fff;
    border: 1px solid #eadfd7;
    border-radius: 12px;
    font-family: var(--sn-font-body);
    font-size: .92rem;
    font-weight: 600;
    text-align: center;
}

/* Uhrzeiten folgen derselben Logik. */
.single-product #ph-calendar-time li:not(.not-available):not(.booking-disabled):not(.booking-full):not(.de-active):not(.timepicker-selected-date):not(.selected-date) {
    color: #245f39 !important;
    background: var(--sn-cal-green-bg) !important;
    border: 2px solid var(--sn-cal-green) !important;
    border-radius: 10px !important;
}

.single-product #ph-calendar-time li.not-available,
.single-product #ph-calendar-time li.booking-disabled,
.single-product #ph-calendar-time li.booking-full,
.single-product #ph-calendar-time li.booking-full:hover {
    color: #8d2929 !important;
    background: var(--sn-cal-red-bg) !important;
    border: 2px solid #dc7777 !important;
    border-radius: 10px !important;
    cursor: not-allowed !important;
}

@media (max-width: 600px) {
    .single-product .ph-calendar-days {
        padding: 10px 7px 14px !important;
    }

    .single-product li.ph-calendar-date {
        margin: 2px 0 !important;
        border-radius: 8px !important;
        font-size: .9rem;
    }

    .single-product .time-calendar-date-section::after {
        margin: 2px 8px 12px;
        padding: 9px 10px;
        font-size: .8rem;
    }
}