/*
 * „Zapytaj przed zakupem" - uchwyt przy krawedzi + szuflada.
 *
 * Wariant inline (sekcja w tresci strony) zostal wycofany: lezal pod konfiguratorem produktu,
 * ktory juz zbiera opis i zdjecia, wiec czytal sie jak powtorzenie tej samej czynnosci. Do tego
 * jego tlo (--ff-cream) bylo identyczne z tlem strony, wiec karta byla niewidoczna, a szerokosc
 * nie zgadzala sie z kolumna produktu.
 *
 * Skala warstw - nazwana, zeby nie mnozyc przypadkowych 999/9999:
 *   uchwyt 40  <  szuflada (natywny top layer <dialog>, poza scope'em z-index)
 */

.ff-ask,
.ff-ask-tab,
.ff-ask-panel,
.ff-ask-inline{
	--ff-ask-tusz:#2B1F14;
	--ff-ask-zloto:#B8962E;
	--ff-ask-powierzchnia:#FFFCF8;
	--ff-ask-linia:#E6D9C2;
	/* #8a7452 na jasnym tle daje ~4:1 - ponizej progu dla malego tekstu. Ciemniejszy odcien
	   tej samej rodziny trzyma charakter i przechodzi WCAG AA. */
	--ff-ask-drugorzedny:#6B5636;
	--ff-ask-warstwa-uchwyt:40;
	--ff-ask-czas:240ms;
	--ff-ask-krzywa:cubic-bezier(.22,1,.36,1);
}

/* ------------------------------------------------------------------ Uchwyt */

.ff-ask-tab{
	position:fixed;top:50%;right:0;transform:translateY(-50%);
	z-index:var(--ff-ask-warstwa-uchwyt);
	display:flex;flex-direction:column;align-items:center;gap:10px;
	margin:0;padding:18px 11px;
	border:0;border-radius:14px 0 0 14px;
	background:var(--ff-ask-tusz);color:#F5EFE3;
	font-family:"Lexend",system-ui,sans-serif;font-size:12.5px;font-weight:600;
	letter-spacing:.02em;text-transform:none;line-height:1;
	cursor:pointer;
	box-shadow:0 10px 30px rgba(40,28,10,.22);
	transition:background var(--ff-ask-czas) var(--ff-ask-krzywa),
		padding-right var(--ff-ask-czas) var(--ff-ask-krzywa),
		color var(--ff-ask-czas) var(--ff-ask-krzywa);
}
.ff-ask-tab__tekst{writing-mode:vertical-rl;text-orientation:mixed;}
.ff-ask-tab__ikona{display:flex;color:var(--ff-ask-zloto);transition:color var(--ff-ask-czas) var(--ff-ask-krzywa);}
.ff-ask-tab:hover,
.ff-ask-tab:focus-visible{background:#3A2A1B;padding-right:15px;}
.ff-ask-tab:hover .ff-ask-tab__ikona,
.ff-ask-tab:focus-visible .ff-ask-tab__ikona{color:#E7C765;}
.ff-ask-tab:focus-visible{outline:2px solid var(--ff-ask-zloto);outline-offset:3px;}

/* ------------------------------------------------------------------ Szuflada */

.ff-ask-panel{
	/* Reset domyslnych stylow <dialog> - inaczej Astra i przegladarka doda ramke i margines. */
	position:fixed;margin:0;padding:0;border:0;max-width:none;max-height:none;
	inset:0 0 0 auto;width:min(432px,100vw);height:100dvh;
	background:var(--ff-ask-powierzchnia);color:var(--ff-ask-tusz);
	box-shadow:-24px 0 60px rgba(40,28,10,.18);
	overflow:hidden;
	transition:transform var(--ff-ask-czas) var(--ff-ask-krzywa),
		opacity var(--ff-ask-czas) var(--ff-ask-krzywa);
}

/*
 * WJAZD ROBIMY ANIMACJA KLATKOWA, NIE PRZEJSCIEM ZE STANU STARTOWEGO.
 *
 * Dwie wczesniejsze proby zawiodly tak samo: widocznosc zalezala od tego, czy cos sie odpali.
 * Najpierw klasa `.is-open` dokladana w `requestAnimationFrame` (rAF nie dziala w karcie w tle),
 * potem `@starting-style` + transition (przejscie potrafi utknac na wartosci poczatkowej - panel
 * zostawal odsuniety o 100% w bok). W obu wypadkach klient dostawal zablokowane, przyciemnione
 * tlo i zadnego panelu.
 *
 * Przy `animation` stanem SPOCZYNKOWYM jest wlasny styl elementu, czyli normalna pozycja.
 * Animacja tylko dodaje wjazd; gdy nie zagra, panel jest po prostu od razu widoczny.
 */
@keyframes ff-ask-wjazd-bok{ from{ transform:translateX(100%); opacity:0; } }
@keyframes ff-ask-wjazd-dol{ from{ transform:translateY(100%); opacity:0; } }
@keyframes ff-ask-tlo{ from{ opacity:0; } }

/* BEZ `animation-fill-mode` (czyli `none`). `both` przytrzymuje klatke poczatkowa, gdy animacja
   nie ruszy - a wlasnie tak zachowuja sie renderery, ktore animacji nie odtwarzaja: panel
   zostawal przyklejony do wartosci `from`, czyli poza ekranem. Przy `none` brak animacji
   oznacza po prostu element w jego wlasnej, widocznej pozycji. */
.ff-ask-panel[open]{animation:ff-ask-wjazd-bok var(--ff-ask-czas) var(--ff-ask-krzywa);}
.ff-ask-panel[open]::backdrop{animation:ff-ask-tlo var(--ff-ask-czas) var(--ff-ask-krzywa);}

/* Wyjscie zostaje na klasie i przejsciu - tu jest to bezpieczne, bo brak animacji konczy sie
   zamknieciem panelu, a nie panelem niewidocznym. */
.ff-ask-panel.is-closing{transform:translateX(100%);opacity:0;animation:none;}

.ff-ask-panel::backdrop{
	background:rgba(28,19,10,.42);
	/* Rozmycie jest tu funkcjonalne: odcina wzrok od dlugiej strony produktu za panelem.
	   Nie jest dekoracja - bez niego tresc pod spodem konkuruje z formularzem. */
	backdrop-filter:blur(3px);
	transition:opacity var(--ff-ask-czas) var(--ff-ask-krzywa);
}
.ff-ask-panel.is-closing::backdrop{opacity:0;animation:none;}

/* Sam <dialog> jest kolumna flexa. `height:100%` na wewnetrznym opakowaniu nie dzialalo na
   telefonie, bo arkusz ma tam `max-height`, a nie `height` - procent nie mial sie do czego
   odniesc i stopka z przyciskiem wychodzila 35px pod krawedz ekranu. `min-height:0` w kazdym
   ogniwie, inaczej dziecko flexa nie moze sie skurczyc ponizej swojej tresci. */
.ff-ask-panel[open]{display:flex;flex-direction:column;}
.ff-ask-panel__inner{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;}
.ff-ask-panel__uchwyt{display:none;}

.ff-ask-panel__head{
	display:flex;align-items:center;justify-content:space-between;gap:16px;
	padding:20px 24px 14px;border-bottom:1px solid var(--ff-ask-linia);
	background:var(--ff-ask-powierzchnia);
}
/* Astra wersalikuje naglowki w tresci - w panelu to krzyk, wiec zdejmujemy jawnie. */
.ff-ask-panel__tytul{
	margin:0;font-family:"Lexend",system-ui,sans-serif;
	font-size:18px;line-height:1.25;font-weight:700;letter-spacing:-.005em;
	text-transform:none;color:var(--ff-ask-tusz);
}
.ff-ask-panel__zamknij{
	display:flex;align-items:center;justify-content:center;
	width:40px;height:40px;flex:0 0 40px;margin:-4px -6px -4px 0;padding:0;
	border:0;border-radius:50%;background:transparent;color:var(--ff-ask-drugorzedny);
	cursor:pointer;transition:background 160ms var(--ff-ask-krzywa),color 160ms var(--ff-ask-krzywa);
}
.ff-ask-panel__zamknij:hover{background:#F2E9D9;color:var(--ff-ask-tusz);}
.ff-ask-panel__zamknij:focus-visible{outline:2px solid var(--ff-ask-zloto);outline-offset:2px;}

/* Anatomia szuflady: naglowek i stopka stoja, przewija sie tylko srodek. `margin-top:auto`
   wewnatrz obszaru przewijania wypychalo przycisk pod krawedz ekranu - glowna akcja musi byc
   widoczna od razu, bez szukania. `min-height:0` jest konieczne, zeby dziecko flexa w ogole
   moglo sie skurczyc i uruchomic wlasny scroll. */
.ff-ask-panel__form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;}
.ff-ask-panel__body{
	flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
	padding:18px 24px 24px;
}
.ff-ask-panel__lead{
	margin:0 0 18px;font-size:14.5px;line-height:1.55;color:var(--ff-ask-drugorzedny);
	max-width:60ch;
}
.ff-ask-panel__stopka{
	flex:0 0 auto;padding:16px 24px 20px;
	border-top:1px solid var(--ff-ask-linia);background:var(--ff-ask-powierzchnia);
}

/* ------------------------------------------------------------------ Pola */

.ff-ask__chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;}
.ff-ask__chip{
	display:inline-flex;align-items:center;min-height:38px;padding:8px 14px;margin:0;
	border:1px solid var(--ff-ask-linia);border-radius:999px;background:#fff;
	color:var(--ff-ask-tusz);
	font-family:"Lexend",system-ui,sans-serif;font-size:13px;font-weight:500;
	line-height:1.25;letter-spacing:0;text-transform:none;text-align:left;
	cursor:pointer;transition:border-color 160ms var(--ff-ask-krzywa),background 160ms var(--ff-ask-krzywa);
}
.ff-ask__chip:hover{border-color:#C9B389;background:#FFFDF9;}
.ff-ask__chip:focus-visible{outline:2px solid var(--ff-ask-zloto);outline-offset:2px;}
.ff-ask__chip[aria-pressed="true"]{
	background:var(--ff-ask-zloto);border-color:var(--ff-ask-zloto);
	color:var(--ff-ask-tusz);font-weight:700;
}

.ff-ask__label{
	display:block;margin:0 0 6px;
	font-family:"Lexend",system-ui,sans-serif;font-size:13px;font-weight:600;
	letter-spacing:0;text-transform:none;color:var(--ff-ask-tusz);
}

.ff-ask__form textarea,
.ff-ask__form input[type="email"]{
	width:100%;box-sizing:border-box;margin:0 0 18px;padding:11px 13px;
	border:1px solid var(--ff-ask-linia);border-radius:10px;background:#fff;
	font-family:inherit;font-size:15px;line-height:1.5;color:var(--ff-ask-tusz);
	transition:border-color 160ms var(--ff-ask-krzywa),box-shadow 160ms var(--ff-ask-krzywa);
}
.ff-ask__form textarea{resize:vertical;min-height:104px;}
.ff-ask__form textarea::placeholder,
.ff-ask__form input[type="email"]::placeholder{color:var(--ff-ask-drugorzedny);opacity:1;}
.ff-ask__form textarea:focus,
.ff-ask__form input[type="email"]:focus{
	outline:none;border-color:var(--ff-ask-zloto);
	box-shadow:0 0 0 3px rgba(184,150,46,.18);
}

/* Natywny input pliku zostaje w DOM (walidacja, wysylka, czytniki ekranu), ale jest schowany -
   `display:none` wyjelby go z kolejnosci fokusu, wiec chowamy klipowaniem. */
.ff-ask__plik{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 4px;}
.ff-ask__plik-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.ff-ask__plik-btn{
	display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:9px 16px;
	border:1px dashed #C9B389;border-radius:10px;background:#fff;
	font-family:"Lexend",system-ui,sans-serif;font-size:13.5px;font-weight:600;
	color:var(--ff-ask-tusz);cursor:pointer;
	transition:border-color 160ms var(--ff-ask-krzywa),background 160ms var(--ff-ask-krzywa);
}
.ff-ask__plik-btn:hover{border-color:var(--ff-ask-zloto);background:#FFFDF9;}
.ff-ask__plik-input:focus-visible + .ff-ask__plik-btn{outline:2px solid var(--ff-ask-zloto);outline-offset:2px;}
.ff-ask__plik-nazwa{font-size:13px;color:var(--ff-ask-drugorzedny);min-width:0;overflow-wrap:anywhere;}

/* Podpowiedz o zdjeciu. Nigdy nie blokuje wyslania - stad brak czerwieni alarmowej przy „uwaga”. */
.ff-ask__hint{
	margin:12px 0 0;padding:10px 13px;border-radius:10px;
	font-size:13px;line-height:1.5;border:1px solid transparent;
}
.ff-ask__hint--ok{background:#F1F6EE;border-color:#D6E4CC;color:#3B5230;}
.ff-ask__hint--uwaga{background:#FDF6E3;border-color:#EBD9A8;color:#6B5312;}
.ff-ask__hint--zle{background:#FBEEEC;border-color:#EBC9C2;color:#7A3B2E;}

.ff-ask__submit{
	width:100%;padding:14px 26px;min-height:48px;margin:0;
	border:1px solid var(--ff-ask-zloto);border-radius:999px;
	background:var(--ff-ask-zloto);color:var(--ff-ask-tusz);
	font-family:"Lexend",system-ui,sans-serif;font-weight:700;font-size:15px;
	letter-spacing:.02em;text-transform:none;cursor:pointer;
	transition:background 160ms var(--ff-ask-krzywa),box-shadow 160ms var(--ff-ask-krzywa);
}
.ff-ask__submit:hover{background:#A3811F;border-color:#A3811F;box-shadow:0 8px 20px rgba(184,150,46,.26);}
.ff-ask__submit:focus-visible{outline:2px solid var(--ff-ask-tusz);outline-offset:2px;}
.ff-ask__submit[disabled]{background:#E5D9BF;border-color:#E5D9BF;color:#8B7C5C;cursor:progress;box-shadow:none;}
.ff-ask__submit--ghost{
	background:transparent;border-color:var(--ff-ask-linia);color:var(--ff-ask-tusz);margin-top:18px;
}
.ff-ask__submit--ghost:hover{background:#F2E9D9;border-color:#C9B389;box-shadow:none;}

.ff-ask__note{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--ff-ask-drugorzedny);}

.ff-ask__done{
	display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:12px;
	background:#F1F6EE;border:1px solid #D6E4CC;color:#3B5230;font-size:15px;line-height:1.55;
}
.ff-ask__error{
	margin:0 0 16px;padding:11px 14px;border-radius:10px;
	background:#FBEEEC;border:1px solid #EBC9C2;color:#7A3B2E;font-size:13.5px;line-height:1.5;
}

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

/* ------------------------------------------------------------------ Wyzwalacz inline */

.ff-ask-inline{
	display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 20px;
	border:1px solid var(--ff-ask-linia);border-radius:999px;background:#fff;
	font-family:"Lexend",system-ui,sans-serif;font-size:14.5px;font-weight:600;
	text-transform:none;color:var(--ff-ask-tusz);cursor:pointer;
	transition:border-color 160ms var(--ff-ask-krzywa),background 160ms var(--ff-ask-krzywa);
}
.ff-ask-inline:hover{border-color:var(--ff-ask-zloto);background:#FFFDF9;}
.ff-ask-inline:focus-visible{outline:2px solid var(--ff-ask-zloto);outline-offset:2px;}
.ff-ask-inline__arrow{transition:transform 160ms var(--ff-ask-krzywa);}
.ff-ask-inline:hover .ff-ask-inline__arrow{transform:translateX(3px);}

/* ------------------------------------------------------------------ Telefon */

@media (max-width:768px){
	/* Pionowy uchwyt przy krawedzi jest na telefonie nietrafiony - wchodzi w gest cofania
	   i laduje poza zasiegiem kciuka. Zamiast tego niska pigulka w prawym dolnym rogu,
	   ktora CHOWA SIE przy przewijaniu w dol i wraca przy przewijaniu w gore. */
	.ff-ask-tab{
		top:auto;bottom:calc(16px + env(safe-area-inset-bottom));right:16px;
		transform:none;flex-direction:row;gap:8px;
		padding:10px 16px;border-radius:999px;
		font-size:13.5px;box-shadow:0 6px 18px rgba(40,28,10,.24);
		transition:transform 260ms var(--ff-ask-krzywa),opacity 200ms var(--ff-ask-krzywa),background 160ms;
	}
	.ff-ask-tab__tekst{writing-mode:horizontal-tb;}
	.ff-ask-tab:hover,.ff-ask-tab:focus-visible{padding-right:16px;}
	.ff-ask-tab.is-hidden{
		transform:translateY(calc(100% + 24px + env(safe-area-inset-bottom)));
		opacity:0;pointer-events:none;
	}

	/* Panel jako arkusz od dolu - kciuk siega gory ekranu gorzej niz dolu, a wysuwanie
	   z boku na waskim ekranie zabiera caly widok bez zysku. */
	.ff-ask-panel{
		inset:auto 0 0 0;width:100%;height:auto;max-height:88dvh;
		border-radius:20px 20px 0 0;
		box-shadow:0 -18px 50px rgba(40,28,10,.24);
	}
	/* Arkusz wjezdza od dolu, nie z boku - na waskim ekranie ruch w bok nie ma sie skad wziac. */
	.ff-ask-panel[open]{animation-name:ff-ask-wjazd-dol;}
	.ff-ask-panel.is-closing{transform:translateY(100%);}
	.ff-ask-panel__uchwyt{
		display:block;width:40px;height:4px;margin:10px auto 0;
		border-radius:999px;background:#DCCDB2;flex:0 0 auto;
	}
	.ff-ask-panel__head{padding:12px 18px 12px;}
	.ff-ask-panel__body{padding:16px 18px calc(20px + env(safe-area-inset-bottom));}
	.ff-ask__chip{font-size:12.5px;padding:8px 12px;}
}

/* ------------------------------------------------------------------ Mniej ruchu */

@media (prefers-reduced-motion:reduce){
	.ff-ask-panel,
	.ff-ask-panel::backdrop,
	.ff-ask-tab,
	.ff-ask__chip,
	.ff-ask__submit,
	.ff-ask-inline,
	.ff-ask-inline__arrow{transition-duration:1ms;}
	.ff-ask-panel[open],
	.ff-ask-panel[open]::backdrop{animation:none;}
	.ff-ask-panel.is-closing{transform:none;}
	.ff-ask-tab.is-hidden{transform:none;}
}