/**
 * ===================================================================
 *  GŁÓWNE ZMIENNE KOLORYSTYCZNE - MOTYW BRĄZOWY
 * ===================================================================
 */
html:root {
    --breadcrumb-active: #966948;
    --breadcrumb-inactive: #858585;
    --button1-background: #966948;
    --button1-text: #ffffff;
    --button1-background-hover: #7d5639;
    --button1-text-hover: #ffffff;
    --link-text: #966948;
    --link-text-hover: #7d5639;
    --body-background-color: #010101;
    --body-color: #757575;
}

/**
 * ===================================================================
 *  KALENDARZ STONOWANY I KWADRATOWY - MAKSYMALNA CZYTELNOŚĆ
 * ===================================================================
 *  Prosty, czysty design z ostrymi krawędziami i stonowaną paletą.
 * ===================================================================
 */

/* Stonowana, profesjonalna paleta kolorów */
:root {
    --color-toned-green: #4CAF50; /* Spokojny zielony */
    --color-toned-red: #d32f2f;   /* Stonowany, ale wyraźny czerwony */
    --color-selected-green: #2E7D32; /* Głęboki zielony dla zaznaczenia */
    --color-calendar-bg: #2A2A2E;   /* Ciemne tło kalendarza */
}

/* 1. Główny kontener kalendarza - bez zbędnych efektów */
.litepicker {
    background-color: var(--color-calendar-bg) !important;
    border-radius: 12px !important; /* Zaokrąglenie tylko zewnętrznego kontenera */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

/* 2. Czysta, biała typografia */
.litepicker .month-item-header div,
.litepicker .month-item-weekdays-row div {
    color: #ffffff !important;
}

/* 3. Domyślny wygląd dnia - DOSTĘPNY */
.litepicker .day-item {
    color: #ffffff !important;
    font-weight: 600 !important;
    background-color: var(--color-toned-green) !important;
    background-image: none !important;
    border-radius: 0 !important; /* KLUCZOWA ZMIANA: Ostre, kwadratowe krawędzie */
    transition: filter 0.2s ease !important;
    /* Dodajemy cienką ramkę, aby stworzyć efekt siatki */
    border: 1px solid var(--color-calendar-bg) !important;
}

/* 4. Dzień NIEDOSTĘPNY - czerwone tło */
.litepicker .day-item.is-locked {
    background-color: var(--color-toned-red) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    cursor: not-allowed !important;
}

/* 5. Dzień CZĘŚCIOWO DOSTĘPNY - gradient po skosie */
.litepicker .day-item.halfBegin,
.litepicker .day-item.halfEnd {
    background-color: transparent !important; /* Usuwamy jednolite tło na rzecz gradientu */
}
/* Dzień, w którym można tylko ZACZĄĆ */
.litepicker .day-item.halfBegin {
    background-image: linear-gradient(
        135deg,
        var(--color-toned-red) 49.5%,
        var(--color-toned-green) 50.5%
    ) !important;
}
/* Dzień, w którym można tylko ZAKOŃCZYĆ */
.litepicker .day-item.halfEnd {
    background-image: linear-gradient(
        135deg,
        var(--color-toned-green) 49.5%,
        var(--color-toned-red) 50.5%
    ) !important;
}


/* 6. Interakcja - subtelne rozjaśnienie */
.litepicker .day-item:not(.is-locked):hover {
    filter: brightness(1.2) !important;
}

/* 7. Wybrany okres - ciemniejszy, głęboki zielony */
.litepicker .day-item.is-start-date,
.litepicker .day-item.is-end-date,
.litepicker .day-item.is-in-range {
    background-color: var(--color-selected-green) !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important; /* Wyłączamy rozjaśnienie dla zaznaczonego okresu */
}