/*
 * Newsletter i okno kampanii — wspólna struktura trzech sklepów (mu-plugin klx-newsletter). Wygląd (kolory, krój, kształt
 * przycisków, promienie, ilustracje) w skin-k.css (klimatlux.pl), skin-h.css (hurtownia-lux.pl), skin-g.css
 * (grzejniki-lux.pl): sklepy nie mogą wyglądać podobnie (CLAUDE.md). Tu tylko układ, stany i dostępność.
 * Projekt i wykonanie: Entsolve (entsolve.com).
 */

/* ------------------------------------------------------------------ Formularz (stopka, strona główna, okno) */
.klxnl-form { position: relative; display: grid; gap: 12px; margin: 0; }
.klxnl-row { display: flex; gap: 8px; align-items: stretch; }
.klxnl-field { position: relative; flex: 1 1 auto; min-width: 0; }
.klxnl-input { display: block; width: 100%; min-width: 0; margin: 0; font: inherit; box-sizing: border-box; }
.klxnl-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font: inherit; cursor: pointer; white-space: nowrap; text-decoration: none; box-sizing: border-box; }
.klxnl-btn svg { flex: 0 0 auto; }
.klxnl-btn[disabled], .klxnl-form.is-busy .klxnl-btn { opacity: .7; cursor: progress; }
.klxnl-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.klxnl-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
.klxnl-consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; margin: 0; cursor: pointer; }
.klxnl-consent input { width: 18px; height: 18px; margin: 2px 0 0; cursor: pointer; }
.klxnl-info, .klxnl-fine { margin: 0; }
.klxnl-msg { margin: 0; }
.klxnl-msg:empty { display: none; }
.klxnl-form.is-done .klxnl-row, .klxnl-form.is-done .klxnl-consent, .klxnl-form.is-done .klxnl-info { display: none; }

/* ------------------------------------------------------------------ Okno kampanii: komputer = okno modalne */
.klxnl-pop[hidden] { display: none !important; }
.klxnl-pop { position: fixed; inset: 0; z-index: 99980; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; }
.klxnl-pop__scrim { position: absolute; inset: 0; }
.klxnl-pop__box { position: relative; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); width: min(800px, 100%); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; box-sizing: border-box; outline: none; }
.klxnl-pop__x { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; cursor: pointer; background: transparent; }
.klxnl-pop__art { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-height: 100%; box-sizing: border-box; }
.klxnl-pop__art img.klxnl-pop__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.klxnl-pop__main { display: grid; align-content: start; gap: 14px; padding: 40px 40px 32px; min-width: 0; }
.klxnl-pop__main > * { margin: 0; }
.klxnl-pop__peek { display: none; }
.klxnl-pop__more { display: grid; gap: 14px; }
.klxnl-pop__short { display: none; }
.klxnl-pop__grab { display: none; }

/* Produkty kampanii (promocje): miniatura, nazwa, cena — dane na żywo z WooCommerce */
.klxnl-prods { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.klxnl-prod { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.klxnl-prod img { width: 64px; height: 48px; object-fit: contain; }
.klxnl-prod__n { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.klxnl-prod__p { white-space: nowrap; text-align: right; }

/* ------------------------------------------------------------------ Telefon: mały panel u dołu (bez pełnoekranowej planszy) */
@media (max-width: 699px) {
	.klxnl-pop { inset: auto 0 0 0; padding: 0; align-items: flex-end; }
	.klxnl-pop__scrim { display: none; }
	.klxnl-pop__box { grid-template-columns: minmax(0, 1fr); width: 100%; max-height: 70vh; max-height: 70dvh; padding-bottom: env(safe-area-inset-bottom, 0); }
	.klxnl-pop__art { display: none; }
	.klxnl-pop__main { gap: 10px; padding: 20px 16px 16px; }
	/* [class] podnosi wagę ponad kolumny i odstępy z skin-*.css (te są dla komputera) */
	.klxnl-pop[class] .klxnl-pop__box { grid-template-columns: minmax(0, 1fr); width: 100%; }
	.klxnl-pop[class] .klxnl-pop__main { padding: 20px 16px 16px; }
	.klxnl-pop__grab { display: block; justify-self: center; width: 36px; height: 4px; margin: -8px 0 2px; border-radius: 4px; }
	.klxnl-pop__x { top: 8px; right: 8px; }
	.klxnl-pop__eyebrow { padding-right: 40px; }
	.klxnl-pop__d { display: none; }
	.klxnl-pop__short { display: block; }
	.klxnl-pop__peek { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
	.klxnl-pop__more { display: none; }
	/* Po „Odbierz kod”: panel rozwija się w formularz i staje się oknem modalnym (tło przyciemnione, fokus w środku). */
	.klxnl-pop.is-expanded { inset: 0; }
	.klxnl-pop.is-expanded .klxnl-pop__scrim { display: block; }
	.klxnl-pop.is-expanded .klxnl-pop__box { position: absolute; left: 0; right: 0; bottom: 0; }
	.klxnl-pop.is-expanded .klxnl-pop__peek, .klxnl-pop.is-expanded .klxnl-pop__short { display: none; }
	.klxnl-pop.is-expanded .klxnl-pop__more, .klxnl-pop.is-expanded .klxnl-pop__d { display: grid; }
	.klxnl-pop.is-expanded .klxnl-pop__d { display: block; }
	.klxnl-pop .klxnl-row { flex-direction: column; }
	.klxnl-pop .klxnl-btn { width: 100%; }
	.klxnl-prod { grid-template-columns: 56px minmax(0, 1fr) auto; }
	.klxnl-prod img { width: 56px; height: 42px; }
}

/* Ruch tylko bez „ogranicz ruch”; okno nie przesuwa treści strony (position: fixed, brak przesunięcia układu). */
@media (prefers-reduced-motion: no-preference) {
	.klxnl-pop.is-in .klxnl-pop__scrim { animation: klxnl-fade .24s ease-out both; }
	.klxnl-pop.is-in .klxnl-pop__box { animation: klxnl-rise .28s cubic-bezier(.2, .7, .2, 1) both; }
	.klxnl-pop.is-out .klxnl-pop__box, .klxnl-pop.is-out .klxnl-pop__scrim { animation: klxnl-fade .16s ease-in reverse both; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 699px) {
	.klxnl-pop.is-in .klxnl-pop__box { animation-name: klxnl-up; }
}
@keyframes klxnl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes klxnl-rise { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes klxnl-up { from { transform: translateY(100%); } to { transform: none; } }

/* Czat (klx-czat) nie wychodzi nad panel na telefonie; po zamknięciu wraca. */
html.klxnl-open #klx-czat { visibility: hidden !important; }

/* ------------------------------------------------------------------ v2: grafika w oknie (kv/*.webp), nakładka tekstu, pasek na telefonie */
.klxnl-pop__art--kv { padding: 0; }
.klxnl-pop__strip { display: none; }
.klxnl-ov { position: absolute; z-index: 1; left: 24px; right: 24px; margin: 0; pointer-events: none; }
.klxnl-ov p { margin: 0; }
.klxnl-ov--top { top: 30px; }
.klxnl-ov--bottom { bottom: 28px; }
.klxnl-ov__k { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.klxnl-ov__v { font-size: 60px; line-height: .95; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
.klxnl-ov__v small { font-size: 22px; font-weight: 700; letter-spacing: 0; }
.klxnl-ov__s { margin-top: 8px !important; font-size: 14px; line-height: 1.4; font-weight: 600; }
@media (max-width: 699px) {
	.klxnl-pop__main { position: relative; }
	.klxnl-pop .klxnl-pop__strip { display: block; width: calc(100% + 32px); max-width: none; height: 96px; margin: -20px -16px 6px; object-fit: cover; object-position: center 35%; }
	.klxnl-pop .klxnl-pop__grab { position: absolute; top: 8px; left: 50%; z-index: 1; margin: 0; transform: translateX(-50%); background: rgba(255, 255, 255, .75) !important; }
	.klxnl-pop.is-expanded .klxnl-pop__strip { height: 72px; }
}

/* ------------------------------------------------------------------ Strony wtyczki: potwierdzenie, błąd, wypisanie */
.klxnl-page { box-sizing: border-box; width: 100%; max-width: 760px; margin: 48px auto; padding: 0 16px; }
.klxnl-page__in { box-sizing: border-box; position: relative; overflow: hidden; }
.klxnl-page__k, .klxnl-page__t, .klxnl-page__d, .klxnl-page__lbl, .klxnl-page__code, .klxnl-page__a { margin: 0; }
.klxnl-page__a form { margin: 0; }
.klxnl-page .tnp-submit { appearance: none; display: inline-flex; align-items: center; justify-content: center; margin: 0; cursor: pointer; font: inherit; text-decoration: none; }

/* Odstęp sekcji na stronie głównej (kontener w motywie: .klxnl-homewrap) */
.klxnl-homewrap { padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(32px, 5vw, 64px); }
.klxnl-homewrap:empty { display: none; }
@media (max-width: 699px) {
	.klxnl-pop .klxnl-pop__x { background: rgba(255, 255, 255, .92) !important; border-radius: 50%; color: #1a1a1a; }
}