/*
 * Formularz zwrotów i reklamacji (wtyczka Returns & Complaints for WooCommerce,
 * shortcode [sascom_rc_returns_form] oraz zakładka w "Moje konto").
 *
 * Wtyczka nie ma własnego wyglądu - jej reguły wizualne mają zerową
 * specyficzność. Wygląd pochodzi z istniejących komponentów motywu, podpiętych
 * klasami w inc/returns-form.php:
 *   - .cart-account__field  (layout/cart.css)  etykieta + pole z dolną linią,
 *   - .cart-account__button (layout/cart.css)  przycisk bazowy na szerokość kolumny.
 * Ten plik dokłada wyłącznie to, czego te komponenty nie obejmują (lista
 * wyboru, pole opisu, pola wyboru, komunikaty, rytm pionowy), i jest w całości
 * ograniczony do .sascom-rc. Kolory, kroje i odstępy: tokeny z tokens.css.
 *
 * Selektorów .sascom-rc-* i identyfikatorów nie zmieniamy - używa ich skrypt
 * wtyczki.
 */

.sascom-rc {
	/* Rozmiar tekstu formularza = etykiety, linki i komunikaty .cart-account
	   (Figma: 8 px w ramce 360, 18 px w ramce 1728). Jedno miejsce do zmiany. */
	--returns-text: calc(8 * var(--u));

	max-width: none;
	color: var(--color-ink);
	font-size: var(--returns-text);
	line-height: var(--line-height-body);
}

@media (min-width: 900px) {
	.sascom-rc {
		--returns-text: calc(18 * var(--u));

		/* Kolumna formularza jak w .cart-account__form (744 w ramce 1728). */
		max-width: calc(744 * var(--u));
	}
}

/* Rytm pionowy: jeden odstęp między kolejnymi blokami formularza. */
.sascom-rc .sascom-rc-step > * + *,
.sascom-rc .sascom-rc-type-details > * + * {
	margin-top: var(--space-5);
}

.sascom-rc .sascom-rc-field,
.sascom-rc .sascom-rc-message,
.sascom-rc .sascom-rc-order-summary {
	margin-bottom: 0;
}

/* Nagłówek kroku: typografia tytułów kart. */
.sascom-rc .sascom-rc-form h3 {
	margin: 0;
	font-size: var(--text-card-title);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-heading);
	text-transform: uppercase;
}

/* Etykiety grup ("Typ zgłoszenia", "Wybierz produkty...") jak etykiety pól. */
.sascom-rc .sascom-rc-label {
	margin: 0 0 var(--space-2);
	font-size: var(--returns-text);
}

.sascom-rc .sascom-rc-required {
	color: inherit;
}

/*
 * Lista wyboru, pole opisu i pole ilości: .cart-account__field stylizuje tylko
 * <input>, więc te kontrolki dostają ten sam język (dolna linia w kolorze
 * --color-muted, przezroczyste tło, co najmniej 16 px na mobile).
 */
.sascom-rc .cart-account__field select,
.sascom-rc .cart-account__field textarea,
.sascom-rc .sascom-rc-product-qty {
	display: block;
	margin: 0;
	padding: 0 0 var(--space-1);
	border: 0;
	border-bottom: 1px solid var(--color-muted);
	border-radius: var(--radius-0);
	outline: 0;
	background-color: transparent;
	font: inherit;
	font-size: max(16px, var(--returns-text));
	color: var(--color-ink);
}

.sascom-rc .cart-account__field select,
.sascom-rc .cart-account__field textarea {
	width: 100%;
}

.sascom-rc .cart-account__field textarea {
	padding: var(--space-2);
	border: 1px solid var(--color-muted);
	resize: vertical;
}

.sascom-rc .cart-account__field select:focus-visible,
.sascom-rc .cart-account__field textarea:focus-visible,
.sascom-rc .sascom-rc-product-qty:focus-visible {
	border-color: var(--color-ink);
}

/* Pola wyboru i opcje typu zgłoszenia. */
.sascom-rc input[type="checkbox"],
.sascom-rc input[type="radio"] {
	flex: none;
	width: 1.25em;
	height: 1.25em;
	margin: 0;
	accent-color: var(--color-ink);
}

.sascom-rc .sascom-rc-radio {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
	min-height: calc(26 * var(--u));
	font-size: max(16px, var(--returns-text));
}

.sascom-rc .sascom-rc-product {
	gap: var(--space-3);
	padding: var(--space-2) 0;
	font-size: max(16px, var(--returns-text));
}

.sascom-rc .sascom-rc-product-qty {
	width: 4em;
	text-align: center;
}

.sascom-rc .sascom-rc-product-hint,
.sascom-rc .sascom-rc-product-reason,
.sascom-rc .sascom-rc-order-meta {
	color: var(--color-muted);
	font-size: var(--returns-text);
	font-style: normal;
	opacity: 1;
}

/* Podsumowanie zamówienia i tekst pomocniczy: zwykły tekst, bez ramek. */
.sascom-rc .sascom-rc-order-summary p {
	margin: 0;
	font-size: max(16px, var(--returns-text));
}

/* Informacja o zwrocie środków to treść do przeczytania, nie etykieta. */
.sascom-rc .sascom-rc-bank-note {
	margin: 0 0 var(--space-3);
	font-size: max(16px, var(--returns-text));
	opacity: 1;
}

/*
 * Komunikaty jak .cart-account__notices: sam tekst, błąd i ostrzeżenie
 * w --color-red-dark, bez teł i ramek.
 */
.sascom-rc .sascom-rc-message {
	padding: 0;
	border: 0;
	font-size: max(16px, var(--returns-text));
}

.sascom-rc .sascom-rc-message-error,
.sascom-rc .sascom-rc-message-warning {
	color: var(--color-red-dark);
}

/* Przyciski: .cart-account__button stoją jeden pod drugim, z własnymi odstępami. */
.sascom-rc .sascom-rc-actions {
	flex-direction: column;
	gap: 0;
	margin: 0;
}

/*
 * "Wstecz" (.sascom-rc-button-secondary, krok 2) jest drugorzędny: obrys
 * i tekst w --color-ink, bez czerwonego wypełnienia. Wymiary i typografia
 * zostają z .cart-account__button; obrys mieści się w min-height
 * (box-sizing: border-box). "Wyślij zgłoszenie" zostaje czerwony.
 */
.sascom-rc .sascom-rc-button-secondary {
	border: 1px solid var(--color-ink);
	background-color: transparent;
	color: var(--color-ink);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.sascom-rc .sascom-rc-button-secondary:hover,
.sascom-rc .sascom-rc-button-secondary:focus-visible {
	background-color: var(--color-ink);
	color: var(--color-white);
}

.sascom-rc .sascom-rc-button-secondary:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
}

/* Przyciski zablokowane na czas zapytania (skrypt wtyczki ustawia disabled). */
.sascom-rc .cart-account__button:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.sascom-rc .sascom-rc-button-secondary:disabled {
	background-color: transparent;
	color: var(--color-ink);
}

.sascom-rc .cart-account__button:not(.sascom-rc-button-secondary):disabled {
	background-color: var(--color-brand-red);
}

@media (min-width: 900px) {
	.sascom-rc .sascom-rc-button-secondary,
	.sascom-rc .sascom-rc-button-secondary:disabled {
		color: var(--color-ink);
	}

	.sascom-rc .sascom-rc-button-secondary:hover:not(:disabled),
	.sascom-rc .sascom-rc-button-secondary:focus-visible {
		color: var(--color-cream);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sascom-rc .sascom-rc-button-secondary {
		transition: none;
	}
}

/* "Moje konto": odstęp między akapitem wstępu WooCommerce a formularzem. */
.woocommerce-MyAccount-content .sascom-rc {
	margin-top: var(--space-5);
}

/*
 * Strona formularza zwrotów (inc/returns-form.php): tytuł i zasady odstąpienia
 * na całą szerokość kontenera (na desktopie wyśrodkowane), pod nimi dwie
 * równorzędne opcje (.returns-option): formularz online po lewej i formularz PDF
 * po prawej, na mobile jedna pod drugą. Bez kart i tła - każda opcja zaczyna się
 * cienką linią, jak pola formularza.
 *
 * Odstęp pod headerem: page.css daje .page-content padding-block 96 px
 * (48 px do 640 px), tu górny odstęp tej strony zastępujemy własnym
 * (24 px mobile, 48 px desktop); dolny zostaje z page.css.
 */
.page-content:has(.returns-page) {
	padding-top: var(--space-5);
}

/*
 * Zasady odstąpienia od umowy: każde zdanie w osobnym akapicie, zwykły tekst
 * bez tła i ramek, mniejszy od tekstu formularza (12 px mobile, 13 px desktop),
 * ciemnoszary. 16 px od tytułu: ujemny margines skraca margines tytułu
 * z page.css (32 px, marginesy się sumują).
 */
.returns-policy {
	margin-top: calc(var(--space-4) - var(--space-6));
	color: color-mix(in srgb, var(--color-ink) 78%, var(--color-white));
	font-size: 12px;
	font-weight: var(--font-weight-regular);
	line-height: 1.5;
}

.returns-policy p {
	margin: 0;
}

.returns-policy p + p {
	margin-top: var(--space-1);
}

.returns-options {
	display: grid;
	row-gap: var(--space-7);
	margin-top: var(--space-6);
}

.returns-option {
	min-width: 0;
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-ink);
	color: var(--color-ink);
}

/* Nazwa opcji: między tytułem strony a nagłówkami kroków formularza, bez wersalików. */
.returns-option__title {
	margin: 0;
	font-size: var(--text-product-subtitle);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
}

.returns-option__text {
	margin: var(--space-2) 0 0;
	color: color-mix(in srgb, var(--color-ink) 78%, var(--color-white));
	font-size: 12px;
	line-height: 1.5;
}

.returns-option__body {
	margin-top: var(--space-6);
}

/* Oczekiwany sposób rozwiązania reklamacji (pole wtyczki od 1.8.0): etykieta jak pozostałe grupy. */
.sascom-rc .sascom-rc-expected legend {
	margin: 0 0 var(--space-2);
	font-size: var(--returns-text);
}

.sascom-rc .sascom-rc-expected-other {
	margin-top: var(--space-4);
}

/*
 * Przycisk pobrania PDF: wymiary i krój przycisku bazowego .cart-account__button
 * (przycisk formularza obok), obrysowany na czerwono, żeby dwa wypełnione
 * czerwone przyciski obok siebie nie konkurowały.
 */
.returns-pdf__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: calc(38 * var(--u));
	padding: var(--space-2) calc(7.45 * var(--u));
	border: 1px solid var(--color-brand-red);
	border-radius: var(--radius-0);
	background-color: transparent;
	color: var(--color-brand-red);
	font-size: calc(9.646 * var(--u));
	font-weight: var(--font-weight-medium);
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.returns-pdf__button:hover,
.returns-pdf__button:focus-visible {
	background-color: var(--color-brand-red);
	color: var(--color-white);
}

.returns-pdf__button:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
}

@media (min-width: 900px) {
	.page-content:has(.returns-page) {
		padding-top: var(--space-7);
	}

	/* Tytuł i zasady odstąpienia wyśrodkowane względem całej sekcji. */
	.returns-page > .page-content__title,
	.returns-policy {
		text-align: center;
	}

	.returns-policy,
	.returns-option__text {
		font-size: 13px;
	}

	.returns-options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: calc(80 * var(--u));
		align-items: start;
		margin-top: var(--space-7);
	}

	/* Szerokość kolumny formularza (744 w ramce 1728) - jak .sascom-rc. */
	.returns-option__text,
	.returns-pdf__button {
		max-width: calc(744 * var(--u));
	}

	.returns-pdf__button {
		min-height: calc(62.32 * var(--u));
		padding: var(--space-2) calc(20.39 * var(--u));
		font-size: calc(20 * var(--u));
	}
}

@media (prefers-reduced-motion: reduce) {
	.returns-pdf__button {
		transition: none;
	}
}