/**
 * DATEI 3: Styling für gebuchte Tage im Kalender
 * ================================================
 * EINBINDUNG: Siehe Datei 4 oder direkt in dein Theme CSS einfügen
 *
 * Funktioniert mit:
 * - JetEngine Dynamic Calendar (Elementor Widget)
 * - Fluent Forms Flatpickr Datepicker
 */


/* ============================================================
   FLATPICKR DATEPICKER – Gesperrte Tage
   ============================================================ */

/* Bereits gebuchte/gesperrte Tage im Datepicker */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    background-color: #fde8e8 !important;
    color: #c0392b !important;
    text-decoration: line-through;
    opacity: 0.8;
    cursor: not-allowed;
}

/* Wochenenden etwas dezenter */
.flatpickr-day:nth-child(7),  /* Samstag */
.flatpickr-day:nth-child(1) { /* Sonntag */
    color: #bdc3c7;
}


/* ============================================================
   JETENGINE DYNAMIC CALENDAR – Gebuchte Tage einfärben
   ============================================================ */

/* Basis-Klasse für alle gebuchten Tage */
.workshop-tag-gebucht {
    background-color: var(--buchungs-farbe, #e74c3c) !important;
    color: #ffffff !important;
    border-radius: 4px;
    cursor: not-allowed;
    position: relative;
    transition: opacity 0.2s ease;
}

.workshop-tag-gebucht:hover {
    opacity: 0.85;
}

/* Kleines Label im Kalender-Tag */
.workshop-tag-gebucht::after {
    content: attr(data-buchungstyp);
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
    line-height: 1.2;
}

/* Typ-spezifische Farben */
.workshop-typ-workshop {
    background-color: #e74c3c !important; /* Rot */
}

.workshop-typ-urlaub {
    background-color: #e67e22 !important; /* Orange */
}

.workshop-typ-dienstreise {
    background-color: #9b59b6 !important; /* Lila */
}


/* ============================================================
   LEGENDE – Optional auf der Seite anzeigen
   Shortcode: [workshop_legende] (via functions.php registrieren)
   oder einfach diesen HTML-Block in Elementor einfügen:
   ============================================================

   <div class="workshop-legende">
     <span class="workshop-legende-item workshop-typ-workshop">Ausgebucht</span>
     <span class="workshop-legende-item workshop-typ-urlaub">Urlaub</span>
     <span class="workshop-legende-item workshop-typ-dienstreise">Dienstreise</span>
   </div>

   ============================================================ */

.workshop-legende {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin: 12px 0;
    font-size: 13px;
}

.workshop-legende-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    color: #fff;
    font-weight: 500;
}

.workshop-legende-item::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    display: inline-block;
}


/* ============================================================
   JETENGINE CALENDAR – Allgemeine Anpassungen
   (Selektoren je nach JetEngine-Version anpassen)
   ============================================================ */

/* Aktueller Tag hervorheben */
.jet-calendar-week__day--today .jet-calendar-week__day-date {
    font-weight: 700;
    color: #2980b9;
}

/* Vergangene Tage etwas ausblenden */
.jet-calendar-week__day--past {
    opacity: 0.5;
}