/* static/kp_kamera_zewn.css - KOPIA wewnetrzne/kfg/foto_kamera.css (stan 18.10.2026 19:11) + reguły zewn. */
/* ══════════════════════════════════════════════════════════════════════
   kfg/foto_kamera.css - przymiarka NA ŻYWO z kamery (17.10.2026), logika w kfg/foto_kamera.js.
   Pełny ekran nad oknem przymiarki (#cfg-foto z-index 320), toast (3000) zostaje nad kamerą.
   ══════════════════════════════════════════════════════════════════════ */
.kpw-kam { position: fixed; inset: 0; z-index: 330; background: #000; color: #fff; font-family: Inter, system-ui, sans-serif;
    display: flex; flex-direction: column; overscroll-behavior: contain; touch-action: none; user-select: none; -webkit-user-select: none; }
.kpw-kam[hidden] { display: none; }
body.kpw-kam-otwarta { overflow: hidden; }
.kpw-kam-scena { position: absolute; inset: 0; overflow: hidden; }
.kpw-kam-wideo { position: absolute; left: 0; top: 0; width: 2px; height: 2px; opacity: .01; pointer-events: none; }   /* iOS: niewidoczne wideo bywa wstrzymane */
.kpw-kam-obraz, .kpw-kam-ramka, .kpw-kam-dotyk { position: absolute; inset: 0; width: 100%; height: 100%; }
.kpw-kam-ramka { pointer-events: none; }
.kpw-kam-dotyk { background: transparent; border: 0; padding: 0; margin: 0; cursor: crosshair; -webkit-tap-highlight-color: transparent; }
.kpw-kam-dotyk:focus-visible { outline: 3px solid var(--kp-gold, #c49060); outline-offset: -6px; border-radius: 0; }

/* Górny pasek: powrót + nazwa wzoru i kolor; pod nim podpowiedź */
.kpw-kam-gora { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px;
    padding: calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 12px calc(12px + env(safe-area-inset-left));
    background: linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,.55) 60%, rgba(0,0,0,0)); pointer-events: none; }
.kpw-kam-gora > * { pointer-events: auto; }
.kpw-kam-x { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28);
    background: rgba(20,12,6,.55); color: #fff; font: 700 .86rem/1 Inter, system-ui, sans-serif; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.kpw-kam-tytul { display: flex; flex-direction: column; min-width: 0; text-shadow: 0 0 6px rgba(0,0,0,.8), 0 1px 3px #000; }
.kpw-kam-tytul strong { font-size: .95rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpw-kam-tytul small { font-size: .8rem; opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpw-kam-status { position: relative; z-index: 2; align-self: center; max-width: min(92vw, 520px); margin: 2px 12px 0; padding: 9px 16px; border-radius: 14px;
    background: rgba(20,12,6,.66); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .86rem; font-weight: 600; line-height: 1.35;
    text-align: center; pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,.3); transition: opacity .5s; }
.kpw-kam-status.kpw-kam-cichy { opacity: 0; }
.kpw-kam-status:empty { display: none; }
.kpw-kam-stoi .kpw-kam-status { background: rgba(28,60,30,.7); }
.kpw-kam-debug { position: relative; z-index: 2; align-self: center; margin-top: 6px; padding: 3px 10px; border-radius: 8px; background: rgba(0,0,0,.6);
    font: 600 .72rem/1.3 ui-monospace, Consolas, monospace; pointer-events: none; }

/* Dół: pasek wzorów/kolorów + przyciski z migawką na środku */
.kpw-kam-dol { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 10px calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.7) 38%); pointer-events: none; }
.kpw-kam-dol > * { pointer-events: auto; }
.kpw-kam-przyciski { display: flex; align-items: flex-end; justify-content: center; gap: clamp(6px, 3vw, 22px); }   /* podpisy w jednej linii (wyższa migawka) */
.kpw-kam-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 56px; min-height: 56px; padding: 6px 4px;
    border: 0; border-radius: 14px; background: transparent; color: #fff; font: 700 .8rem/1 Inter, system-ui, sans-serif; cursor: pointer; text-shadow: 0 0 5px rgba(0,0,0,.8), 0 1px 3px #000; }
.kpw-kam-btn i { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.kpw-kam-btn[aria-expanded="true"] i { background: var(--kp-gold, #c49060); border-color: #f2c96a; }
.kpw-kam-btn:disabled { opacity: .42; cursor: default; }
.kpw-kam-mig { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 6px; }   /* ten sam dolny odstęp co .kpw-kam-btn: podpisy w jednej linii */
.kpw-kam-mig-podpis { font: 700 .72rem/1 Inter, system-ui, sans-serif; text-shadow: 0 0 5px rgba(0,0,0,.8), 0 1px 3px #000; white-space: nowrap; }
.kpw-kam-migawka { width: 74px; height: 74px; border-radius: 50%; border: 4px solid #fff; background: rgba(255,255,255,.12); padding: 5px; cursor: pointer; flex: 0 0 auto;
    box-shadow: 0 4px 18px rgba(0,0,0,.45); margin: 0 4px; }
.kpw-kam-migawka span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; transition: transform .12s, background .2s; }
.kpw-kam-migawka:active span { transform: scale(.88); }
.kpw-kam-stoi .kpw-kam-migawka span { background: linear-gradient(135deg, #f6d68a, #c9962c); }
.kpw-kam-pasek { display: flex; gap: 8px; overflow-x: auto; padding: 4px 4px 10px; margin-bottom: 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; touch-action: pan-x; }
.kpw-kam-pasek::-webkit-scrollbar { display: none; }
.kpw-kam-pasek[hidden] { display: none; }
.kpw-kam-kafel { flex: 0 0 auto; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border-radius: 12px;
    border: 2px solid rgba(255,255,255,.18); background: rgba(20,12,6,.5); color: #fff; font: 600 .72rem/1.15 Inter, system-ui, sans-serif; cursor: pointer;
    scroll-snap-align: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.kpw-kam-kafel img { width: 40px; height: 54px; object-fit: contain; background: #fff; border-radius: 4px; }
.kpw-kam-kafel span:last-child { max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: center; white-space: normal; word-break: break-word; }
.kpw-kam-kafel[aria-selected="true"] { border-color: #f2c96a; box-shadow: 0 0 0 2px rgba(242,201,106,.35); }
.kpw-kam-probka { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); display: block; }

/* Puls w miejscu stuknięcia */
.kpw-kam-puls { position: absolute; z-index: 1; width: 0; height: 0; pointer-events: none; }
.kpw-kam-puls::before, .kpw-kam-puls::after { content: ""; position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%;
    border: 3px solid #f2c96a; box-shadow: 0 0 14px rgba(242,201,106,.7); opacity: 0; }
.kpw-kam-puls.gra::before { animation: kpwKamPuls 1.1s ease-out; }
.kpw-kam-puls.gra::after { animation: kpwKamPuls 1.1s ease-out .25s; }
@keyframes kpwKamPuls { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }
.kpw-kam-blysk .kpw-kam-scena::after { content: ""; position: absolute; inset: 0; background: #fff; animation: kpwKamBlysk .35s ease-out forwards; pointer-events: none; }
@keyframes kpwKamBlysk { from { opacity: .85; } to { opacity: 0; } }

/* Błąd kamery: karta na środku z wyjściem do zdjęcia */
.kpw-kam-blad { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px;
    background: #140c06; text-align: center; }
.kpw-kam-blad .kpw-kam-blad-rada { font-size: .84rem; opacity: .85; }
.kpw-kam-blad[hidden] { display: none; }
.kpw-kam-blad p { max-width: 420px; font-size: .95rem; line-height: 1.5; margin: 0 0 6px; }
.kpw-kam-btn-tekst { min-height: 48px; padding: 0 22px; border-radius: 12px; border: 0; background: linear-gradient(135deg, #f6d68a, #c9962c);
    color: #2a1a0c; font: 800 .9rem/1 Inter, system-ui, sans-serif; cursor: pointer; }
.kpw-kam-btn-drugi { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); }
/* Wąskie telefony (360 px i mniej): pięć pól musi się zmieścić, cel dotyku zostaje ≥ 44 px */
@media (max-width: 389px) {
    .kpw-kam-przyciski { gap: 2px; }
    .kpw-kam-btn { min-width: 48px; }
    .kpw-kam-migawka { width: 66px; height: 66px; }
}
/* Telefon w poziomie: niższe paski, żeby zostało miejsce na drzwi */
@media (orientation: landscape) and (max-height: 500px) {
    .kpw-kam-gora { padding-top: 6px; padding-bottom: 6px; }
    .kpw-kam-status { font-size: .78rem; padding: 6px 12px; }
    .kpw-kam-btn i { width: 34px; height: 34px; }
    .kpw-kam-migawka { width: 58px; height: 58px; }
    .kpw-kam-mig-podpis { display: none; }
}

/* Wejście w oknie przymiarki: obok „Wybierz zdjęcie" (kfg/foto.php) */
.cfg-foto-start .kpw-kam-wejscie { margin-top: 10px; background: linear-gradient(135deg, #c9962c, #a0622a); border: 0; }
.cfg-foto-start .kpw-kam-wejscie[hidden], .cfg-foto-szybkie .kpw-kam-wejscie[hidden] { display: none; }
.cfg-foto-start .kpw-kam-wejscie small { display: block; font-weight: 600; font-size: .72rem; opacity: .9; }
@media (prefers-reduced-motion: reduce) {
    .kpw-kam-puls.gra::before, .kpw-kam-puls.gra::after, .kpw-kam-blysk .kpw-kam-scena::after { animation-duration: .01s; }
}

/* ══ WEJŚCIE DO PRZYMIARKI NA TELEFONIE (17.10.2026, Kamil: „nie mogę nigdzie znaleźć przycisku przymierz")
   Przycisk z kfg/stage.php (.cfg-foto-btn) na telefonie był białym obrysem jak „Cena", więc go nie widać.
   Teraz złoty, z napisem „Przymierz u siebie" (tekst podmienia foto_kamera.js), w lepkiej górnej karcie,
   czyli na każdym kroku. Rozwinięty podgląd dostaje ten sam przycisk na obrazie drzwi. ══ */
@media (max-width: 980px) {
    body.kp-body .cfg-summary .cfg-foto-btn { background: linear-gradient(135deg, #f6d68a, #c9962c); color: #2a1a0c; border: 0;
        font-weight: 800; font-size: .875rem; min-height: 44px; padding: .5rem .875rem; box-shadow: 0 3px 10px rgba(150,100,30,.35); }
    body.kp-body .cfg-summary .cfg-foto-btn i { font-size: 1rem; }
    /* 17.10: pod zdjęciem drzwi, szeroki, nic nie nachodzi na render (Kamil: „nie podoba mi się miejsce tego przycisku”) */
    .kpw-przymierz-scena { position: relative; display: flex; justify-content: center; align-items: center; gap: 8px;
        width: calc(100% - 32px); max-width: 420px; margin: 12px auto 6px; min-height: 48px; padding: 0 16px; font-size: 1rem; border: 0; border-radius: 999px; background: linear-gradient(135deg, #f6d68a, #c9962c); color: #2a1a0c;
        font: 800 .875rem/1 Inter, system-ui, sans-serif; box-shadow: 0 4px 14px rgba(0,0,0,.25); cursor: pointer; }
    body.cfg-zwiniete .kpw-przymierz-scena { display: none; }
    /* w rozwiniętym podglądzie przycisk jest na obrazie, drugi pod obrazem byłby dublem */
    body:not(.cfg-zwiniete) .cfg-summary .cfg-foto-btn.kpw-ma-scene { display: none; }
}
@media (min-width: 981px) { .kpw-przymierz-scena { display: none; } }
/* Jednorazowa podpowiedź pod przyciskiem (localStorage kpw_przymierz_podp_v1) */
.kpw-podpowiedz { position: fixed; z-index: 40; max-width: min(300px, calc(100vw - 24px)); padding: 12px 38px 12px 14px; border-radius: 14px;
    background: #2a1a0c; color: #fff; font: 600 .875rem/1.4 Inter, system-ui, sans-serif; box-shadow: 0 10px 28px rgba(0,0,0,.35);
    animation: kpwPodpIn .3s ease-out; }
.kpw-podpowiedz strong { color: #f6d68a; }
.kpw-podpowiedz::before { content: ""; position: absolute; top: -7px; left: var(--strzalka, 40px); width: 14px; height: 14px; background: #2a1a0c; transform: rotate(45deg); }
.kpw-podpowiedz button { position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; border: 0; background: transparent; color: #fff; font-size: 1rem; cursor: pointer; }
@keyframes kpwPodpIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Okno przymiarki na telefonie: „Na żywo z kamery" pierwsza i największa, zdjęcie jako druga opcja */
@media (max-width: 700px) {
    .cfg-foto-start.kpw-kam-pierwsza { display: flex; flex-direction: column; align-items: center; }
    .cfg-foto-start.kpw-kam-pierwsza > * { order: 4; }
    .cfg-foto-start.kpw-kam-pierwsza > .cfg-foto-ikona { order: 0; }
    .cfg-foto-start.kpw-kam-pierwsza > .cfg-foto-lead { order: 1; }
    .cfg-foto-start.kpw-kam-pierwsza > .kpw-kam-wejscie { order: 2; align-self: stretch; justify-content: center; min-height: 58px; margin: 4px 0 10px; font-size: 1.05rem; border-radius: 14px; }
    .cfg-foto-start.kpw-kam-pierwsza > label.cfg-foto-upload { order: 3; background: #fff; color: var(--kp-brown, #552d1c); border: 1.5px solid var(--kp-line, #e8d5c0); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .kpw-podpowiedz { animation: none; } }
/* 360 px: „Cena netto (bez VAT)" nie może się łamać obok przycisku */
@media (max-width: 389px) {
    body.kp-body .cfg-summary .cfg-foto-btn { font-size: .8125rem; padding: .5rem .625rem; gap: .3rem; }
}
@media (max-width: 389px) {
    body.kp-body.cfg-zwiniete .cfg-price-label { white-space: nowrap; font-size: .6875rem; }
    body.kp-body .cfg-summary .cfg-foto-btn i { font-size: .875rem; }
}
/* Okno otwarte na zapamiętanym zdjęciu (edytor): na telefonie kamera też musi rzucać się w oczy */
@media (max-width: 700px) {
    .cfg-foto-szybkie .kpw-kam-wejscie:not([hidden]) { background: linear-gradient(135deg, #f6d68a, #c9962c); color: #2a1a0c; border-color: transparent; font-weight: 800; }
}

/* Jeden przycisk w jednym miejscu: gdy przycisk mini podglądu (sesja kroku 1, .kpw-przymierz-mini) jest WIDOCZNY,
   foto_kamera.js daje body klasę kpw-mini-widoczny i złoty przycisk zwiniętej karty się chowa (nigdy oba naraz znikają). */
@media (max-width: 980px) {
    body.cfg-zwiniete.kpw-mini-widoczny .cfg-summary .cfg-foto-btn { display: none; }
}
.cfg-foto-start .kpw-kam-brak { order: 3; margin: 8px 0 0; font-size: .8125rem; line-height: 1.45; color: #7a6a5a; max-width: 340px; }

/* Propozycja miejsca (18.10.2026): „Tak, wstaw tutaj" / „Inne miejsce" nad dolnym paskiem */
.kpw-kam-pytanie { position: absolute; left: 0; right: 0; bottom: calc(118px + env(safe-area-inset-bottom)); z-index: 3; display: flex; justify-content: center; gap: 10px;
    padding: 0 16px; pointer-events: none; }
.kpw-kam-pytanie[hidden] { display: none; }
.kpw-kam-pytanie button { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 999px;
    font: 800 .92rem/1 Inter, system-ui, sans-serif; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.kpw-kam-tak { border: 0; background: #f2c96a; color: #2a1a0c; }
.kpw-kam-inne { border: 1px solid rgba(255,255,255,.4); background: rgba(20,12,6,.66); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@media (max-width: 389px) { .kpw-kam-pytanie button { padding: 0 12px; font-size: .84rem; } }
/* ── Zewnętrzne (18.10.2026): dwie opcje na ekranie startowym przymiarki, „Na zdjęciu domu" i „Na żywo z kamery" ── */
.cfg-foto-start .cfg-foto-upload small { display: block; font-weight: 600; font-size: .72rem; opacity: .85; }
.cfg-foto-start .kp-foto-opcje-info { margin: 8px auto 0; max-width: 420px; font-size: .8rem; color: var(--kp-muted, #8a7564); text-align: center; }
/* Kontrola wyglądu 18.10 (agent Sonnet): na komputerze zdjęcie jest PIERWSZE i główne, kamera drugorzędna (obrys);
   na wąskim telefonie bez podpisów pod przyciskami, żeby się nie łamały; w pasku pod zdjęciem kamera jak inne narzędzia. */
@media (min-width: 981px) {
    .cfg-foto-start .kpw-kam-wejscie:not([hidden]) { background: #fff; color: var(--kp-brown, #552d1c); border: 1.5px solid var(--kp-line, #e8d5c0); box-shadow: none; }
    .cfg-foto-start .kpw-kam-wejscie:not([hidden]) i { color: var(--kp-gold, #c49060); }
}
@media (max-width: 400px) { .cfg-foto-start .cfg-foto-upload small, .cfg-foto-start .kpw-kam-wejscie small { display: none; } }
.cfg-foto .cfg-foto-szybkie > .cfg-foto-narzedzie.kpw-kam-wejscie:not([hidden]) { background: #fff; color: var(--kp-brown, #552d1c); border: 1px solid var(--kp-line, #e8d5c0); font-weight: 600; white-space: nowrap; }
.cfg-foto .cfg-foto-szybkie > .cfg-foto-narzedzie.kpw-kam-wejscie i { color: #a67b52; }
/* A8 przed startem (19.10.2026): dymek „Nowość: zobacz te drzwi u siebie” - krzyżyk 44 px w rogu, tekst nie wchodzi pod krzyżyk.
   Nadpisanie w części zewn., bo górna część pliku to kopia foto_kamera.css podmieniana przy nowych wersjach kamery. */
.kpw-podpowiedz { padding: 12px 48px 12px 14px; }
.kpw-podpowiedz button { top: 0; right: 0; width: 44px; height: 44px; }