/**
 * Ulala Kasa 1.2.5 (etap K4) - szuflada "Dodano do koszyka" na karcie wzoru.
 * (1.2.2: bez zmian w wygladzie - poprawki wysylki w karta.js. 1.2.3: link
 * "Chce zmienic wymiar / kadr / material" moze sie zawinac - tekst do lewej.
 * 1.2.4: bez zmian w wygladzie - szybka sciezka dodania "przez hook"
 * w karta.js. 1.2.5: bez zmian w stylach - plakietke "Nowa kasa" przy
 * "Dla wszystkich" dostaje tylko tester, decyduje karta.js.)
 *
 * Plik laduje sie TYLKO na karcie wzoru z kreatorem i tylko dla aktywnej
 * nowej kasy (tester albo "Dla wszystkich"); wszystkie reguly dotycza
 * wlasnych elementow modulu (#ulkasa-szuflada, #ulkasa-zaslona,
 * #ulkasa-zmiana-info, #ulkasa-znacznik, klasa przycisku w trakcie
 * wysylki) - karta, kreator i motyw bez zmian.
 *
 * Makieta: strategia_ulala/makiety/kasa, ekran "1. Karta -> koszyk":
 * telefon - szuflada od dolu (zaokraglone gorne rogi), komputer (od 768 px)
 * - z prawej, szerokosc 400 px. Kolory jak w nakladce kasy: #009688
 * (morski sklepu), #00796b, #e0f2f1.
 *
 * 1.2.1: stan "Dodaje do koszyka..." (kolko obok tytulu, bez sumy
 * i przyciskow - ukrywa JS atrybutem hidden) i pasek "✓ W koszyku"
 * (#ulkasa-pasek) po zwinieciu szuflady: telefon - na dole ekranu (nad
 * paskami motywu - z-index wyzszy niz pasek ciasteczek x13 i "do gory"
 * motywu, strona dostaje dolny odstep, zeby pasek nie zaslanial tresci),
 * komputer - w prawym dolnym rogu (obok przycisku "do gory" motywu).
 * Wysuwanie z dolu / z prawej; bez animacji przy prefers-reduced-motion.
 */

/* ---------- zaslona ---------- */
#ulkasa-zaslona.ulkasa-zaslona {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147482000;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

#ulkasa-zaslona.ulkasa-zaslona.ulkasa-otw {
    opacity: 1;
    pointer-events: auto;
}

/* ---------- szuflada: telefon (od dolu) ---------- */
#ulkasa-szuflada.ulkasa-szuflada {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147482001;
    box-sizing: border-box;
    max-height: 88vh;
    margin: 0;
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-radius: 16px 16px 0 0;
    background: #fff;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
    color: #1f2328;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    text-align: left;
    visibility: hidden;
    transform: translateY(105%);
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

#ulkasa-szuflada.ulkasa-szuflada.ulkasa-otw {
    visibility: visible;
    transform: none;
    transition: transform 0.25s ease, visibility 0s linear 0s;
}

/* ---------- komputer: z prawej ---------- */
@media (min-width: 768px) {
    #ulkasa-szuflada.ulkasa-szuflada {
        top: 0;
        left: auto;
        width: 400px;
        max-width: 100%;
        max-height: none;
        padding: 20px 22px 24px;
        border-radius: 0;
        box-shadow: -6px 0 24px rgba(0, 0, 0, 0.18);
        transform: translateX(105%);
    }
}

@media (prefers-reduced-motion: reduce) {
    #ulkasa-zaslona.ulkasa-zaslona,
    #ulkasa-szuflada.ulkasa-szuflada,
    #ulkasa-szuflada.ulkasa-szuflada.ulkasa-otw {
        transition: none;
    }

    #ulkasa-szuflada .ulkasa-sz-kolko {
        animation: none;
    }
}

#ulkasa-szuflada [hidden] {
    display: none !important;
}

#ulkasa-szuflada * {
    box-sizing: border-box;
}

/* ---------- naglowek ---------- */
#ulkasa-szuflada .ulkasa-sz-glowa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 12px;
}

#ulkasa-szuflada .ulkasa-sz-tytul {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #00796b;
    font-family: inherit;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
}

/* 1.2.1: tytul zajmuje miejsce miedzy kolkiem a ✕ */
#ulkasa-szuflada .ulkasa-sz-glowa .ulkasa-sz-tytul {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---------- 1.2.1: stan "Dodaje do koszyka..." ---------- */
#ulkasa-szuflada .ulkasa-sz-kolko {
    display: none;
    flex: 0 0 18px;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border: 2px solid #b2dfdb;
    border-top-color: #009688;
    border-radius: 50%;
    animation: ulkasa-kolko 0.8s linear infinite;
}

#ulkasa-szuflada.ulkasa-sz--dodaje .ulkasa-sz-kolko {
    display: inline-block;
}

#ulkasa-szuflada.ulkasa-sz--dodaje .ulkasa-sz-tytul {
    color: #4b5563;
}

#ulkasa-szuflada.ulkasa-sz--dodaje .ulkasa-sz-cena {
    color: #4b5563;
}

@keyframes ulkasa-kolko {
    to {
        transform: rotate(360deg);
    }
}

#ulkasa-szuflada .ulkasa-sz-tytul:focus {
    outline: none;
}

#ulkasa-szuflada .ulkasa-sz-tytul:focus-visible {
    outline: 2px solid #009688;
    outline-offset: 2px;
}

#ulkasa-szuflada .ulkasa-sz-zamknij {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin: -6px -6px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: #4b5563;
    font-family: inherit;
    font-size: 20px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}

#ulkasa-szuflada .ulkasa-sz-zamknij:hover,
#ulkasa-szuflada .ulkasa-sz-zamknij:focus {
    background: #f2faf9;
    color: #00796b;
    outline: none;
}

#ulkasa-szuflada .ulkasa-sz-zamknij:focus-visible {
    outline: 2px solid #009688;
}

/* ---------- komunikat (podmiana, blad "Zmien") ---------- */
#ulkasa-szuflada .ulkasa-sz-komunikat {
    margin: 0 0 12px;
    padding: 8px 10px;
    border: 1px solid #f2c94c;
    border-radius: 8px;
    background: #fff8e1;
    color: #5d4a00;
    font-size: 13.5px;
}

/* ---------- pozycja ---------- */
#ulkasa-szuflada .ulkasa-sz-pozycja {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

#ulkasa-szuflada .ulkasa-sz-obraz {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border: 1px solid #e3e6e8;
    border-radius: 6px;
    background: #f5f6f6;
    object-fit: cover;
}

#ulkasa-szuflada .ulkasa-sz-opis {
    flex: 1 1 auto;
    min-width: 0;
}

#ulkasa-szuflada .ulkasa-sz-nazwa {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    overflow-wrap: break-word;
}

#ulkasa-szuflada .ulkasa-sz-param {
    margin-top: 2px;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.35;
}

#ulkasa-szuflada .ulkasa-sz-cena {
    margin-top: 4px;
    font-weight: 700;
    white-space: nowrap;
}

/* ---------- "Chce zmienic wymiar / kadr / material" (do 1.2.2 "Zmien wymiar / kadr") ---------- */
#ulkasa-szuflada .ulkasa-sz-zmien {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    margin: 4px 0 0 84px;
    padding: 0;
    text-align: left;
    line-height: 1.3;
    border: 0;
    background: none;
    box-shadow: none;
    color: #00796b;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

#ulkasa-szuflada .ulkasa-sz-zmien:disabled {
    opacity: 0.55;
    cursor: progress;
}

#ulkasa-szuflada .ulkasa-sz-zmien:focus-visible {
    outline: 2px solid #009688;
    outline-offset: 2px;
}

/* ---------- W koszyku + suma, Dostawa 0 zl ---------- */
#ulkasa-szuflada .ulkasa-sz-suma {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid #e3e6e8;
}

#ulkasa-szuflada .ulkasa-sz-ile {
    color: #4b5563;
}

#ulkasa-szuflada .ulkasa-sz-kwota {
    font-weight: 700;
    white-space: nowrap;
}

#ulkasa-szuflada .ulkasa-sz-dostawa {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: #2e7d32;
    font-size: 14px;
    font-weight: 500;
}

#ulkasa-szuflada .ulkasa-sz-dostawa svg {
    flex: 0 0 18px;
}

/* ---------- przyciski ---------- */
#ulkasa-szuflada .ulkasa-sz-kasa,
#ulkasa-szuflada .ulkasa-sz-dalej {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin: 14px 0 0;
    padding: 10px 16px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
}

#ulkasa-szuflada .ulkasa-sz-kasa {
    border: 1px solid #009688;
    background: #009688;
    color: #fff;
}

#ulkasa-szuflada .ulkasa-sz-kasa:hover,
#ulkasa-szuflada .ulkasa-sz-kasa:focus {
    border-color: #00796b;
    background: #00796b;
    color: #fff;
    text-decoration: none;
}

#ulkasa-szuflada .ulkasa-sz-dalej {
    margin-top: 10px;
    border: 1px solid #9fd3cc;
    background: #fff;
    color: #00796b;
    font-weight: 500;
}

#ulkasa-szuflada .ulkasa-sz-dalej:hover,
#ulkasa-szuflada .ulkasa-sz-dalej:focus {
    background: #f2faf9;
}

#ulkasa-szuflada .ulkasa-sz-kasa:focus-visible,
#ulkasa-szuflada .ulkasa-sz-dalej:focus-visible {
    outline: 2px solid #00796b;
    outline-offset: 2px;
}

/* ---------- "Przyda sie do montazu" ---------- */
#ulkasa-szuflada .ulkasa-sz-podp {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e3e6e8;
}

#ulkasa-szuflada .ulkasa-sz-podp-tytul {
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    background: none;
    color: #1f2328;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
}

#ulkasa-szuflada .ulkasa-sz-podp-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

#ulkasa-szuflada .ulkasa-sz-podp-poz {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px solid #f0f2f3;
    list-style: none;
}

#ulkasa-szuflada .ulkasa-sz-podp-poz:last-child {
    border-bottom: 0;
}

#ulkasa-szuflada .ulkasa-sz-podp-obraz {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border: 1px solid #e3e6e8;
    border-radius: 6px;
    object-fit: cover;
}

#ulkasa-szuflada .ulkasa-sz-podp-opis {
    display: flex;
    flex: 1 1 120px;
    flex-direction: column;
    min-width: 0;
}

#ulkasa-szuflada .ulkasa-sz-podp-nazwa {
    font-size: 14px;
    line-height: 1.3;
    overflow-wrap: break-word;
}

#ulkasa-szuflada .ulkasa-sz-podp-cena {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

#ulkasa-szuflada .ulkasa-sz-podp-dodaj {
    flex: 0 0 auto;
    min-width: 92px;
    min-height: 40px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #009688;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
    color: #00796b;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-shadow: none;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
}

#ulkasa-szuflada .ulkasa-sz-podp-dodaj:hover,
#ulkasa-szuflada .ulkasa-sz-podp-dodaj:focus {
    background: #e0f2f1;
}

#ulkasa-szuflada .ulkasa-sz-podp-dodaj:focus-visible {
    outline: 2px solid #00796b;
    outline-offset: 1px;
}

#ulkasa-szuflada .ulkasa-sz-podp-dodaj:disabled {
    cursor: progress;
    opacity: 0.7;
}

#ulkasa-szuflada .ulkasa-sz-podp-dodaj.ulkasa-dodano,
#ulkasa-szuflada .ulkasa-sz-podp-dodaj.ulkasa-dodano:disabled {
    border-color: #2e7d32;
    background: #e8f5e9;
    color: #2e7d32;
    cursor: default;
    opacity: 1;
}

#ulkasa-szuflada .ulkasa-sz-podp-blad {
    flex: 1 0 100%;
    margin: 0;
    color: #d32f2f;
    font-size: 13px;
}

#ulkasa-szuflada .ulkasa-sz-podp-blad:empty {
    display: none;
}

/* ---------- strona pod szuflada na telefonie ---------- */
body.ulkasa-bez-przewijania {
    position: fixed !important;
    right: 0;
    left: 0;
    width: 100%;
    overflow: hidden !important;
}

/* ---------- przycisk "Dodaj do koszyka" w trakcie wysylki ---------- */
#buy_block .ulkasa-dodaje,
#buy_block .ulkasa-dodaje:disabled {
    cursor: progress;
    opacity: 0.75;
}

/* ---------- "Zmieniasz pozycje z koszyka" (nad formularzem kreatora) ----------
 * clear: both - w global.css motywu (telefon) #price_contener plywa w lewo
 * (width: calc(100% - 65px)), a schowek (.clipboard_product) w prawo;
 * bez tego informacja wciskalaby sie w waska kolumne obok nich */
#ulkasa-zmiana-info.ulkasa-zmiana-info {
    clear: both;
    float: none;
    box-sizing: border-box;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px solid #9fd3cc;
    border-radius: 8px;
    background: #e0f2f1;
    color: #00594f;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
}

#ulkasa-zmiana-info .ulkasa-zmiana-tekst {
    flex: 1 1 200px;
}

#ulkasa-zmiana-info .ulkasa-zmiana-anuluj {
    min-height: 36px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid #9fd3cc;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
    color: #00796b;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    cursor: pointer;
}

/* ---------- znacznik trybu testowego (lewy dolny rog) ---------- */
#ulkasa-znacznik.ulkasa-znacznik--karta {
    position: fixed;
    bottom: 8px;
    left: 8px;
    z-index: 2147481000;
    max-width: calc(100% - 16px);
    padding: 4px 10px;
    border-radius: 8px;
    background: #009688;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    color: #fff;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    pointer-events: none;
}

#ulkasa-znacznik.ulkasa-znacznik--karta.ulkasa-znacznik--wszyscy {
    background: #e65100;
}

/* ---------- 1.2.1: pasek "✓ W koszyku" po zwinieciu szuflady ----------
 * telefon: na dole ekranu (z-index ponad paskami motywu - pasek ciasteczek
 * x13 ma 2000, "do gory" 9999 - ale pod szuflada i zaslona); komputer:
 * prawy dolny rog, obok przycisku "do gory" motywu (right: 25px, 40 px) */
#ulkasa-pasek.ulkasa-pasek {
    position: fixed;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    left: 8px;
    z-index: 2147481500;
    display: flex;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    min-height: 52px;
    margin: 0;
    padding: 5px 4px 5px 6px;
    border: 1px solid #9fd3cc;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
    color: #1f2328;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.3;
    text-align: left;
    visibility: hidden;
    transform: translateY(calc(100% + 24px));
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

#ulkasa-pasek.ulkasa-pasek.ulkasa-pasek--widoczny {
    visibility: visible;
    transform: none;
    transition: transform 0.25s ease, visibility 0s linear 0s;
}

#ulkasa-pasek * {
    box-sizing: border-box;
}

#ulkasa-pasek [hidden] {
    display: none !important;
}

#ulkasa-pasek .ulkasa-pasek-otworz {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    min-width: 0;
    min-height: 40px;
    margin: 0;
    padding: 0 4px;
    border: 0;
    border-radius: 8px;
    background: none;
    box-shadow: none;
    color: inherit;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.3;
    text-align: left;
    text-transform: none;
    cursor: pointer;
}

#ulkasa-pasek .ulkasa-pasek-otworz:hover,
#ulkasa-pasek .ulkasa-pasek-otworz:focus {
    background: #f2faf9;
    outline: none;
}

#ulkasa-pasek .ulkasa-pasek-otworz:focus-visible,
#ulkasa-pasek .ulkasa-pasek-kasa:focus-visible,
#ulkasa-pasek .ulkasa-pasek-zamknij:focus-visible {
    outline: 2px solid #00796b;
    outline-offset: 1px;
}

#ulkasa-pasek .ulkasa-pasek-znak {
    color: #2e7d32;
    font-weight: 700;
}

#ulkasa-pasek .ulkasa-pasek-tekst {
    font-weight: 500;
    white-space: nowrap;
}

#ulkasa-pasek .ulkasa-pasek-kwota {
    font-weight: 700;
    white-space: nowrap;
}

#ulkasa-pasek .ulkasa-pasek-kwota::before {
    content: "· ";
    color: #6b7280;
    font-weight: 400;
}

#ulkasa-pasek .ulkasa-pasek-kasa {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 40px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #009688;
    border-radius: 8px;
    background: #009688;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
}

#ulkasa-pasek .ulkasa-pasek-kasa:hover,
#ulkasa-pasek .ulkasa-pasek-kasa:focus {
    border-color: #00796b;
    background: #00796b;
    color: #fff;
    text-decoration: none;
}

#ulkasa-pasek .ulkasa-pasek-zamknij {
    flex: 0 0 auto;
    width: 32px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: #6b7280;
    font-family: inherit;
    font-size: 15px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}

#ulkasa-pasek .ulkasa-pasek-zamknij:hover,
#ulkasa-pasek .ulkasa-pasek-zamknij:focus {
    background: #f2faf9;
    color: #00796b;
    outline: none;
}

@media (max-width: 767px) {
    /* strona ma pod spodem miejsce na pasek (tresc i "Dodaj do koszyka"
     * nie chowaja sie pod nim); znacznik testera nad paskiem */
    body.ulkasa-karta.ulkasa-z-paskiem {
        padding-bottom: 76px;
    }

    body.ulkasa-z-paskiem #ulkasa-znacznik.ulkasa-znacznik--karta {
        bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }
}

@media (min-width: 768px) {
    #ulkasa-pasek.ulkasa-pasek {
        right: 80px;
        bottom: 24px;
        left: auto;
        width: auto;
        max-width: 460px;
        padding: 6px 6px 6px 8px;
        transform: translateX(calc(100% + 104px));
    }

    #ulkasa-pasek .ulkasa-pasek-otworz {
        flex-wrap: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    #ulkasa-pasek.ulkasa-pasek,
    #ulkasa-pasek.ulkasa-pasek.ulkasa-pasek--widoczny {
        transition: none;
    }
}