/**
 * Ulala Wizualizator - przycisk pod kreatorem i okno "Zobacz na swojej scianie".
 * Kolor akcentu motywu ulala (#009688, jak moduly FAQ i Linki), czcionka z motywu.
 * Wszystko z prefiksem .ulwiz-, zeby nie mieszac sie ze stylami kreatora.
 */

/* Atrybut hidden ma wygrywac z display:flex klas ponizej. */
.ulwiz [hidden],
.ulwiz-okno [hidden],
.ulwiz-strona [hidden] {
    display: none !important;
}

.ulwiz {
    clear: both;
    margin: 18px 0 26px 0;
    text-align: center;
}

/* Od 1.2.0 skrypt przenosi przycisk do lewej kolumny kreatora - do tego czasu
   blok jest ukryty, zeby nie mrugal pod kreatorem. */
.ulwiz[data-ulwiz] {
    display: none;
}

.ulwiz[data-ulwiz].ulwiz--gotowy {
    display: block;
}

.ulwiz.ulwiz--w-kreatorze {
    margin: 14px 0 6px 0;
}

.ulwiz--w-kreatorze .ulwiz-przycisk {
    box-sizing: border-box;
    justify-content: center;
    width: 100%;
    max-width: 420px;
}

.ulwiz-przycisk {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 26px;
    border: 2px solid #009688;
    border-radius: 4px;
    background: #fff;
    color: #00796b;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.ulwiz-przycisk:hover,
.ulwiz-przycisk:focus {
    background: #009688;
    color: #fff;
    outline: none;
}

.ulwiz-przycisk:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 150, 136, .35);
}

.ulwiz-podpis {
    margin: 8px 0 0 0;
    color: #777;
    font-size: 13px;
}

/* ---------------------------------------------------------------- okno */

html.ulwiz-otwarte,
html.ulwiz-otwarte body {
    overflow: hidden;
}

.ulwiz-okno {
    position: fixed;
    inset: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ulwiz-okno[hidden] {
    display: none;
}

.ulwiz-tlo {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(20, 20, 20, .6);
}

.ulwiz-panel {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 760px;
    padding: 26px 28px 24px 28px;
    border-radius: 6px;
    background: #fff;
    color: #333;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}

.ulwiz-x {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: #777;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.ulwiz-x:hover {
    color: #009688;
}

.ulwiz-panel .ulwiz-tytul {
    margin: 0 40px 6px 0;
    padding: 0;
    border: 0;
    background: none;
    color: #009688;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
    outline: none;
}

.ulwiz-wzor {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px 0;
    color: #515151;
    font-weight: 700;
}

.ulwiz-wzor img {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    object-fit: cover;
}

.ulwiz-panel p {
    margin: 0 0 10px 0;
}

.ulwiz-mala {
    color: #777;
    font-size: 12.5px;
}

.ulwiz-komunikat,
.ulwiz-blad {
    margin: 0 0 14px 0;
    padding: 10px 14px;
    border: 1px solid #f0b6b6;
    border-radius: 4px;
    background: #fdf1f1;
    color: #8a1f1f;
    font-weight: 600;
}

.ulwiz-blad {
    font-weight: 400;
}

.ulwiz-sukces {
    padding: 10px 14px;
    border: 1px solid #b2dfdb;
    border-radius: 4px;
    background: #e8f5f3;
    color: #00594f;
}

.ulwiz-rzad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
}

.ulwiz-rzad--srodek {
    justify-content: center;
    margin: 8px 0 0 0;
}

.ulwiz-btn,
a.ulwiz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 42px;
    padding: 9px 20px;
    border: 2px solid #009688;
    border-radius: 4px;
    background: #009688;
    color: #fff !important;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;
}

.ulwiz-btn:hover,
.ulwiz-btn:focus {
    border-color: #00796b;
    background: #00796b;
}

.ulwiz-btn[disabled] {
    opacity: .6;
    cursor: progress;
}

.ulwiz-btn--jasny,
a.ulwiz-btn--jasny {
    background: #fff;
    color: #00796b !important;
}

.ulwiz-btn--jasny:hover,
.ulwiz-btn--jasny:focus {
    background: #e8f5f3;
}

.ulwiz-btn--maly {
    min-height: 34px;
    padding: 5px 12px;
    font-size: 13px;
}

.ulwiz-link {
    padding: 0;
    border: 0;
    background: none;
    color: #00796b;
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.ulwiz-ukryty {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.ulwiz-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------------------------------------------------------------- krok: zdjecie */

.ulwiz-ostatnie {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 16px 0;
    padding: 12px;
    border: 1px solid #b2dfdb;
    border-radius: 4px;
    background: #f3faf9;
}

.ulwiz-ostatnie img {
    width: 120px;
    height: 90px;
    border-radius: 4px;
    object-fit: cover;
}

.ulwiz-wskazowki {
    margin: 0 0 14px 0;
    padding: 12px 16px;
    border-radius: 4px;
    background: #f5f5f5;
}

.ulwiz-wskazowki ul {
    margin: 0;
    padding: 0 0 0 18px;
    list-style: disc;
}

.ulwiz-wskazowki li {
    margin: 0 0 3px 0;
    color: #515151;
    list-style: disc;
}

.ulwiz-pliki {
    margin: 0 0 14px 0;
    padding: 18px 12px;
    border: 2px dashed #ccc;
    border-radius: 6px;
    text-align: center;
}

.ulwiz-pliki--nad {
    border-color: #009688;
    background: #e8f5f3;
}

.ulwiz-pliki__opis {
    color: #515151;
    font-weight: 600;
}

/* 1.2.2: podglad wybranego zdjecia (plik lokalny, przed wgraniem). Orientacje
   EXIF stosuje przegladarka - celowo jawnie from-image (nie wylaczac). */
.ulwiz-wybrane {
    margin: 0 0 4px 0;
}

.ulwiz-wybrane__ramka {
    display: flex;
    justify-content: center;
}

.ulwiz-wybrane__img {
    display: block;
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 200px;
    margin: 0 auto 8px auto;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f5f5f5;
    object-fit: contain;
    image-orientation: from-image;
}

.ulwiz-panel .ulwiz-wybrane__stan {
    margin: 0 0 2px 0;
    font-weight: 700;
}

.ulwiz-wybrane__stan--ok {
    color: #00796b;
}

.ulwiz-panel .ulwiz-wybrane__stan--ostrzezenie {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid #ffe0a3;
    border-radius: 4px;
    background: #fff8e6;
    color: #7a5200;
    font-weight: 600;
}

.ulwiz-panel .ulwiz-wybrane__plik {
    margin: 0;
    word-break: break-all;
}

/* 1.2.3: dzienne limity na adres IP - drobny licznik pod przyciskami zdjecia
   i przy zleceniu wizualizacji; przy 0 zolta ramka jak ostrzezenie. */
.ulwiz-panel .ulwiz-limit {
    margin: 10px 0 0 0;
    color: #777;
    font-size: 12.5px;
}

.ulwiz-panel .ulwiz-limit--wyczerpany {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid #ffe0a3;
    border-radius: 4px;
    background: #fff8e6;
    color: #7a5200;
    font-size: 13.5px;
    font-weight: 600;
}

.ulwiz-limit--wyczerpany .ulwiz-link {
    color: #00796b;
    font-weight: 600;
}

.ulwiz-btn.ulwiz-btn--nieaktywny,
.ulwiz-btn.ulwiz-btn--nieaktywny[disabled] {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

.ulwiz-pole {
    display: block;
    margin: 0 0 14px 0;
    font-weight: 600;
}

.ulwiz-pole input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 320px;
    height: 40px;
    margin: 4px 0 2px 0;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 400;
}

.ulwiz-pole .ulwiz-mala {
    display: block;
    font-weight: 400;
}

.ulwiz-zgoda {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 6px 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
}

.ulwiz-zgoda input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0 0;
}

.ulwiz-zgoda a {
    color: #00796b;
    text-decoration: underline;
}

.ulwiz-turnstile {
    margin: 0 0 12px 0;
}

.ulwiz-pasek {
    height: 6px;
    margin: 10px 0 0 0;
    overflow: hidden;
    border-radius: 3px;
    background: #eee;
}

.ulwiz-pasek span {
    display: block;
    width: 0;
    height: 100%;
    background: #009688;
    transition: width .2s;
}

/* ---------------------------------------------------------------- krok: sciana */

.ulwiz-sciana {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: #eee;
    cursor: crosshair;
    outline: none;
    touch-action: manipulation;
}

.ulwiz-sciana:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 150, 136, .45);
}

.ulwiz-sciana img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    image-orientation: from-image;
    -webkit-user-select: none;
    user-select: none;
}

.ulwiz-znacznik {
    position: absolute;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: rgba(0, 150, 136, .75);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .45);
    pointer-events: none;
}

/* ---------------------------------------------------------------- krok: postep */

.ulwiz-postep {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: #eee;
}

.ulwiz-postep img {
    display: block;
    width: 100%;
    height: auto;
    opacity: .55;
}

.ulwiz-postep__karta {
    position: absolute;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    width: 86%;
    max-width: 420px;
    padding: 18px 20px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .96);
    text-align: center;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
    transform: translate(-50%, -50%);
}

.ulwiz-kolko {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin: 0 0 8px 0;
    border: 3px solid #b2dfdb;
    border-top-color: #009688;
    border-radius: 50%;
    animation: ulwiz-obrot .9s linear infinite;
}

@keyframes ulwiz-obrot {
    to {
        transform: rotate(360deg);
    }
}

.ulwiz-email {
    margin: 16px 0 0 0;
    padding: 14px 16px;
    border: 1px solid #b2dfdb;
    border-radius: 4px;
    background: #f3faf9;
}

/* ---------------------------------------------------------------- krok: wynik */

.ulwiz-porownanie {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: #eee;
    -webkit-user-select: none;
    user-select: none;
}

.ulwiz-porownanie img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.ulwiz-porownanie .ulwiz-porownanie__przed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: inset(0 50% 0 0);
}

.ulwiz-porownanie .ulwiz-porownanie__laczenia {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ulwiz-porownanie__linia {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    margin-left: -1px;
    background: #fff;
    box-shadow: 0 0 6px rgba(0, 0, 0, .5);
    pointer-events: none;
}

.ulwiz-etykieta {
    position: absolute;
    top: 10px;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    pointer-events: none;
}

.ulwiz-etykieta--lewa {
    left: 10px;
}

.ulwiz-etykieta--prawa {
    right: 10px;
}

/* 1.2.1: napis "wizualizacja pogladowa AI" - stale na dole calego podgladu
   (nad "przed" i "po", niezaleznie od suwaka i laczen pasow). Suwak (range)
   lezy nad nim, wiec przeciaganie dziala tez po napisie. */
.ulwiz-porownanie .ulwiz-napis-ai {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 6px 14px;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
    text-wrap: balance;
    pointer-events: none;
}

.ulwiz-porownanie input[type="range"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
}

.ulwiz-podpis-wyniku {
    margin: 0 0 10px 0;
    color: #515151;
    font-weight: 600;
}

.ulwiz-kreator-info {
    margin: 0 0 12px 0;
    padding: 8px 12px;
    border-left: 3px solid #009688;
    background: #f3faf9;
    color: #00594f;
    font-size: 13px;
}

.ulwiz-przelacznik {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 8px 0;
    font-weight: 600;
    cursor: pointer;
}

.ulwiz-przelacznik input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.ulwiz-podpowiedz {
    margin: 8px 0;
    padding: 10px 14px;
    border: 1px solid #b2dfdb;
    border-radius: 4px;
    background: #f3faf9;
    color: #00594f;
}

.ulwiz-ostrzezenia {
    margin: 10px 0;
    padding: 10px 14px 10px 30px;
    border: 1px solid #ffe0a3;
    border-radius: 4px;
    background: #fff8e6;
    color: #7a5200;
}

/* ---------------------------------------------------------------- strona wyniku z maila */

.ulwiz-strona {
    max-width: 900px;
    margin: 0 auto 30px auto;
}

.ulwiz-strona h1 {
    color: #009688;
}

/* ---------------------------------------------------------------- telefon */

.ulwiz-tylko-telefon {
    display: none;
}

@media (max-width: 767px) {
    .ulwiz-tylko-telefon {
        display: inline-flex;
    }

    .ulwiz-okno {
        padding: 0;
    }

    .ulwiz-panel {
        min-height: 100%;
        padding: 18px 14px 20px 14px;
        border-radius: 0;
    }

    .ulwiz-panel .ulwiz-tytul {
        font-size: 19px;
    }

    .ulwiz-ostatnie {
        flex-direction: column;
        align-items: flex-start;
    }

    .ulwiz-rzad .ulwiz-btn {
        flex: 1 1 100%;
    }

    .ulwiz-wybrane__img {
        max-height: 140px;
    }

    .ulwiz-porownanie .ulwiz-napis-ai {
        padding: 4px 8px;
        font-size: 10px;
        line-height: 1.3;
    }
}

@media (max-width: 420px) {
    .ulwiz-porownanie .ulwiz-napis-ai {
        padding: 3px 6px;
        font-size: 9.5px;
        line-height: 1.28;
    }
}