/* Wizualizacja „Obraz we wnętrzu”: wspólny wygląd dla panelu Kamili i strony dla klientów.
   Korzysta z barw strony (--noc, --gesso, --zloto...), które definiują oba arkusze. */
.wiz { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.wiz > * { min-width: 0; }
.wiz-telefon { margin: 0 0 1rem; padding: .7rem .9rem; background: var(--gesso-2); font-size: .9rem; }
@media (min-width: 48rem) and (max-width: 63.99rem) { .wiz-gora { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); } .wiz-plotno canvas { max-height: 38vh; } }
@media (min-width: 64rem) { .wiz { grid-template-columns: 20rem minmax(0, 1fr); align-items: start; } .wiz-kroki { position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow: auto; padding-right: .5rem; } }
.wiz-kroki { display: grid; gap: 1rem; min-width: 0; }
.wiz-krok, .wiz-pola, .wiz-pola label { min-width: 0; }
.wiz-pola input, .wiz-pola select { max-width: 100%; }
.wiz-pola input[type=range] { width: 100%; accent-color: var(--zloto-ciemne); }
.wiz-krok { padding: .75rem .85rem; background: #fff; border: 1px solid var(--linia); font-size: .85rem; }
.wiz-krok h3 { margin: 0 0 .2rem; font: 400 1rem/1.2 Georgia, 'Poltawski Nowy', serif; }
.wiz-krok p { margin: .2rem 0 .5rem; font-size: .78rem; color: var(--szary); }
.wiz-pola { display: grid; gap: .6rem; }
.wiz-pola label { display: grid; gap: .15rem; font-size: .78rem; font-weight: 600; }
.wiz input[type=number], .wiz input[type=text], .wiz input[type=email], .wiz select { min-height: 2.2rem; padding: .3rem .45rem; border: 1px solid var(--linia); border-radius: 0; background: #fff; color: var(--grafit); font: inherit; font-size: .95rem; }
.wiz input[type=file] { font-size: .9rem; }
.wiz-dwa { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.wiz-wybor { display: flex; flex-wrap: wrap; gap: .4rem; }
.wiz-wybor label { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border: 1px solid var(--linia); border-radius: 2rem; background: #fff; font-size: .9rem; font-weight: 500; cursor: pointer; }
.wiz-wybor label:has(input:checked) { background: var(--zloto); border-color: var(--zloto); color: var(--noc); font-weight: 700; }
.wiz-wybor-duzy { gap: .5rem; }
.wiz-wybor-duzy label { flex: 1 1 8rem; justify-content: center; min-height: 2.8rem; padding: .5rem .9rem; border-radius: 0; font-size: .92rem; text-align: center; }
.wiz-wybor-duzy label:hover { border-color: var(--zloto-ciemne); }
.zmien-zdjecie { width: 100%; }
.wiz-wybor input { position: absolute; opacity: 0; pointer-events: none; }
.wiz-zgoda { display: flex; align-items: start; gap: .45rem; font-size: .82rem; font-weight: 600; cursor: pointer; }
.wiz-zgoda input { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .15rem; accent-color: var(--zloto-ciemne); }
.wiz-zgoda span { font-weight: 400; }
.wiz-uwaga { margin: .5rem 0 0; font-size: .85rem; color: #b3261e; }
.wiz-plotno { position: relative; margin: 0; background: #fff; border: 1px solid var(--linia); }
.wiz-podpis-plotna { padding: .35rem .5rem; font-size: .8rem; color: var(--szary); text-align: center; }
/* górna część: po lewej ustawienia obrazu i cienia, po prawej płótno z liniami */
.wiz-gora { display: grid; gap: 1rem; }
@media (min-width: 64rem) { .wiz-gora { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: start; } }
.wiz-gora-boczne { display: grid; gap: 1rem; align-content: start; }
.wiz-plotno canvas { display: block; width: auto; max-width: 100%; max-height: 46vh; margin: 0 auto; touch-action: none; cursor: crosshair; }
.wiz-plotno.ciagniete canvas { cursor: grabbing; }
.wiz-pusto { display: grid; place-items: center; align-content: center; gap: .9rem; min-height: 24rem; padding: clamp(1.5rem, 4vw, 3rem); color: var(--szary); text-align: center; }
.wiz-pusto h3 { margin: 0; font: 400 1.3rem/1.2 Georgia, 'Poltawski Nowy', serif; color: var(--grafit); }
.wiz-pusto p { max-width: 34rem; margin: 0; font-size: .95rem; }
.wiz-przyklad { max-width: 22rem; margin: 0; }
.wiz-przyklad img { width: 100%; border: 1px solid var(--linia); }
.wiz-przyklad figcaption { margin-top: .35rem; font-size: .8rem; }
.wiz-zacheta { margin: 1rem 0 .25rem; font-size: .95rem; text-align: center; }
.wiz-podglad { margin: .5rem 0 0; }
.wiz-podglad.ciagniete canvas { cursor: grabbing; }
.wiz-podglad canvas { display: block; width: auto; max-width: 100%; max-height: 72vh; margin: 0 auto; border: 4px solid var(--noc); touch-action: none; cursor: grab; }
.wiz-podglad figcaption { margin-top: .4rem; font-size: .85rem; color: var(--szary); text-align: center; }
/* pasek pod kadrem: obrazy z galerii albo gotowe wymiary */
.wiz-pasek { margin-top: 1rem; }
.wiz-pasek-opis { margin: 0 0 .5rem; font-size: .85rem; color: var(--szary); }
.wiz-pasek-lista { display: flex; gap: .6rem; padding-bottom: .75rem; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--zloto) var(--gesso-2); }
.wiz-kafel { flex: 0 0 8.5rem; display: grid; gap: .15rem; padding: .4rem; border: 1px solid var(--linia); background: #fff; text-align: left; cursor: pointer; }
.wiz-kafel img { width: 100%; height: 6.5rem; object-fit: contain; background: var(--gesso-2); }
.wiz-kafel-nazwa { font-size: .8rem; font-weight: 600; line-height: 1.2; }
.wiz-kafel-wymiar { font-size: .75rem; color: var(--szary); }
.wiz-kafel:hover { border-color: var(--zloto-ciemne); }
.wiz-kafel[aria-pressed="true"] { border-color: var(--zloto-ciemne); box-shadow: inset 0 0 0 2px var(--zloto); }
.wiz-kafel-sprzedany { background: #6c727d; color: #fff; border-color: #6c727d; }
.wiz-kafel-sprzedany .wiz-kafel-wymiar { color: #edeceb; }
.wiz-kafel-sprzedany img { background: #5d636e; }
.wiz-wymiar { flex: 0 0 auto; display: grid; justify-items: center; gap: .3rem; padding: .5rem .7rem; border: 1px solid var(--linia); background: #fff; font-size: .8rem; cursor: pointer; }
.wiz-wymiar-ramka { width: auto; height: 3.2rem; border: 1.5px solid var(--zloto-ciemne); }
.wiz-wymiar:hover { border-color: var(--zloto-ciemne); }
.wiz-wymiar[aria-pressed="true"] { border-color: var(--zloto-ciemne); box-shadow: inset 0 0 0 2px var(--zloto); }
.wiz-pod { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .75rem; }
.wiz-pod .wiz-male, .wiz-stan { font-size: .85rem; color: var(--szary); }
.wiz-przycisk { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.5rem; padding: .45rem 1rem; border: 1px solid var(--linia); border-radius: 0; background: #fff; color: var(--grafit); font: inherit; font-size: .95rem; cursor: pointer; }
.wiz-przycisk:hover { border-color: var(--zloto-ciemne); color: var(--zloto-ciemne); }
.wiz-glowny { border-color: var(--zloto); background: var(--zloto); color: var(--noc); font-weight: 700; }
.wiz-glowny:hover { background: #dcbd7c; border-color: #dcbd7c; color: var(--noc); }
.wiz-przycisk:disabled { background: var(--gesso-2); border-color: var(--linia); color: #8b8a85; font-weight: 400; cursor: default; }
.wiz-wyslij { display: grid; gap: .6rem; margin-top: 1rem; padding: 1rem; background: var(--gesso-2); }
.wiz-wyslij h3 { margin: 0; font: 400 1.15rem/1.2 Georgia, 'Poltawski Nowy', serif; }
.wiz-wyslij .wiz-drobne { margin: 0; font-size: .8rem; color: var(--szary); }
/* na telefonie pole i przycisk jeden pod drugim, na szerokość */
.wiz-wyslij-pola { display: grid; gap: .6rem; }
.wiz-wyslij label:not(.wiz-zgoda) { display: grid; gap: .2rem; font-size: .82rem; font-weight: 600; }
.wiz-wyslij input[type=email] { width: 100%; }
.wiz-wyslij .wyslij { width: 100%; }
@media (min-width: 48rem) { .wiz-wyslij-pola { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } .wiz-wyslij .wyslij { width: auto; } }
.wiz-pulapka { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.wiz-blad { margin: 0; padding: .6rem .8rem; background: #fbe9e7; color: #8a1c14; font-size: .9rem; }
.wiz-ok { margin: 0; padding: .6rem .8rem; background: #e8f0e0; color: #2f5c0a; font-size: .9rem; }
.wiz-okno { width: min(100% - 2rem, 60rem); padding: 0; border: 0; background: var(--gesso); color: var(--grafit); }
.wiz-okno::backdrop { background: rgb(18 22 29 / .7); }
.wiz-okno-tresc { display: grid; gap: .75rem; padding: 1.25rem; }
.okno-wyslane { width: min(100% - 2rem, 28rem); }
.wiz-okno-tresc h3 { margin: 0; font: 400 1.3rem/1.2 Georgia, 'Poltawski Nowy', serif; }
.wiz-kadrowanie { background: var(--noc); }
.wiz-kadrowanie canvas { display: block; width: auto; max-width: 100%; max-height: 66vh; margin: 0 auto; touch-action: none; cursor: crosshair; }
.wiz-okno-przyciski { display: flex; flex-wrap: wrap; gap: .5rem; }