/* ══════════════════════════════════════════════════════════════════════
   kfg/kroki/k3.css — KROK 3 (Klamka i zamek), 17.10.2026.
   Karty zamków, klamek, chipy (.cfg-wk-kolory/.cfg-fchip) mają style w kfg/shell.css (1:1 z zewn.).
   Tu tylko to, czego zewnętrzne nie mają. Prefiks: k3-.
   ══════════════════════════════════════════════════════════════════════ */

/* Packshoty wewn. to PNG z przezroczystym tłem i różnymi proporcjami (szyld pionowy, rozeta pozioma).
   W zewn. zdjęcie jest białym prostokątem na gradiencie: dajemy to samo białe pole, a klamka
   wypełnia je w „contain" z oddechem, żeby nie była mała i blada (kontrola agentami 17.10). */
#k3-klamki .cfg-klamka-foto { background: #fff; box-shadow: inset 0 0 0 10px #f7f1e7; }
#k3-klamki .cfg-klamka-foto img { width: 100%; height: 100%; object-fit: contain; padding: 8px 6px; box-sizing: border-box;
    filter: drop-shadow(0 2px 2px rgba(60, 40, 20, .28)); }   /* chrom i biel zlewały się z białym polem (2. kontrola) */
@media (max-width: 700px) { #k3-klamki .cfg-klamka-foto { box-shadow: inset 0 0 0 8px #f7f1e7; } #k3-klamki .cfg-klamka-foto img { padding: 6px 4px; } }

/* Klamka niedostępna przy wybranym zamku / typie drzwi (system jej nie pokazuje na liście) */
.cfg-klamka-card.k3-off { cursor: not-allowed; border-style: dashed; border-color: #e7dcc8; }
.cfg-klamka-card.k3-off .cfg-klamka-foto, .cfg-klamka-card.k3-off .cfg-klamka-nazwa { opacity: .45; filter: grayscale(.7); }
.cfg-klamka-card.k3-off .cfg-klamka-cena { font-weight: 600; color: var(--kp-muted); }
@media (hover: hover) { .cfg-klamka-card.k3-off:hover { transform: none; box-shadow: none; border-color: #e7dcc8; } }
.cfg-klamka-card.k3-off .cfg-foto-lupka { pointer-events: auto; }
.k3-bez-foto { font-size: 2rem; color: #d9c7a8; }

/* Pasek „bez zamka" (wzór: .cfg-zamek-lock-info z zewn.) */
.k3-bez-zamka { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 12px; padding: 8px 10px 8px 12px; border-radius: 10px; border: 1px solid #eadfc6; background: linear-gradient(120deg, #fdf6e7, #f7ecd6); font-size: .74rem; font-weight: 700; color: var(--kp-brown-mid); line-height: 1.35; }
.k3-bez-zamka[hidden] { display: none !important; }
.k3-bez-zamka i { color: var(--kp-gold); margin-right: 6px; }

/* Szyld, rozeta i kolor klamki pod siatką klamek, oddzielone jak „Kolor wkładek" */
.k3-opcje { margin-top: 14px; padding-top: 12px; border-top: 1px solid #f5efe3; }
.k3-opcje[hidden], .k3-opcje .cfg-fchip[hidden], #k3-okucia .cfg-fchip[hidden] { display: none !important; }
.k3-szyld-info { margin-top: 8px; }
.k3-szyld-info[hidden] { display: none !important; }

@media (max-width: 700px) {
    .k3-bez-zamka .cfg-zamek-lock-btn { min-height: 44px; }
}

/* Plakietka „Najczęściej" po lewej: po prawej nachodziła na pigułkę ceny (telefon, kontrola 17.10) */
#k3-zamki .cfg-zamek-badge { right: auto; left: 14px; }

/* ── Chipy szyldu, koloru klamki i okuć: wygląd (pole wyboru, ✓, obrys, dopłata w drugiej linii) daje powłoka
   (kontrakt stylu 18.10.2026: .kpw-opcje, .kpw-doplata w shell.css), tu zostaje tylko układ ── */
.k3-opcje[hidden] { display: none !important; }
.kpw-opcje > .cfg-wk-kolory-lbl, .kpw-opcje > .kpw-opcje-tytul { grid-column: 1 / -1; margin: 0 0 -2px; }
.kpw-opcje .k3-chip-nazwa { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; text-align: left; }
.kpw-opcje .k3-chip-nazwa .cfg-kropka { margin: 0; flex: 0 0 auto; }
.kpw-opcje .kpw-doplata:empty { display: none; }
/* Po kontroli agenta (18.10): dopłata w drugiej linii zaczyna się pod NAZWĄ, nie pod kropką koloru / plusem (12 px + odstęp 7 px) */
#k3-okucia .kpw-opcja-tekst > .kpw-doplata, #k3-kolory .kpw-opcja-tekst > .kpw-doplata,
#k3-szyld [data-rozeta] .kpw-opcja-tekst > .kpw-doplata { padding-left: 19px; }
/* „Rozeta ozdobna" ma własny wiersz, żeby nazwa nie zawijała się na dwie linie */
#k3-szyld [data-rozeta] { grid-column: 1 / -1; }

/* „Cofnij" w komunikacie o dobranych osłonkach (19.10) */
.k3-toast-cofnij { margin-left: 12px; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.6);
    background: transparent; color: inherit; font: inherit; font-weight: 800; cursor: pointer; }
@media (max-width: 700px) { .k3-toast-cofnij { min-height: 44px; } }
.cfg-toast.show:has(.k3-toast-cofnij) { pointer-events: auto; }   /* toast powłoki ma pointer-events:none */
/* Komunikat z „Cofnij" szerszy i w jednej linii z przyciskiem (na telefonie toast powłoki miał 180 px i 4 linie) */
.cfg-toast:has(.k3-toast-cofnij) { display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; }
.cfg-toast:has(.k3-toast-cofnij) .k3-toast-cofnij { margin-left: auto; flex: 0 0 auto; }