/*
 * Wspólne dla koszyka, zamówienia, podziękowania i Moje konto (inc/store-pages.php):
 * odstęp strony, ramki, pola formularzy, checkboxy i radia, komunikaty, wiersze podsumowania, lista produktów,
 * pasek kuponu, dostawa, "Bezpieczne płatności", adresy. Domyślny CSS WooCommerce jest tu wyłączony.
 * Wymiary z Figmy "Moje konto" i "Checkout"; kolory, fonty i rozmiary z :root (tokens).
 */

.store-page {
	--store-line: var(--color-border);
	--store-field: color-mix(in srgb, var(--color-muted) 45%, var(--color-background));
	--store-error: #b42318; /* Błędy walidacji – jedyny kolor poza paletą, musi się odróżniać. */
	--store-pad: clamp(1rem, 0.85rem + 0.6vw, 1.5rem);

	padding-block: var(--page-top) 5rem;
	color: var(--color-text);
}

.store-page h1 { margin-block-end: clamp(1.5rem, 1rem + 2vw, 3rem); }

.store-page .clear { display: none; }

/* Ikony (maska jak w header.css). */
.icon--lock { width: 14px; height: 14px; -webkit-mask-image: url("../img/lock.svg"); mask-image: url("../img/lock.svg"); }
.icon--check { -webkit-mask-image: url("../img/check.svg"); mask-image: url("../img/check.svg"); }
.icon--chevron-right { width: 8px; height: 12px; -webkit-mask-image: url("../img/chevron-right.svg"); mask-image: url("../img/chevron-right.svg"); }

/* Ramka sekcji: "Dane do zamówienia", "Twoje zamówienie", podsumowanie koszyka, adresy. */
.store-box {
	min-width: 0;
	padding: var(--store-pad);
	border: 1px solid var(--store-line);
	background: var(--color-background);
}

.store-box__title {
	margin: 0 0 1.25rem;
	color: var(--color-text-strong);
	font: 400 clamp(1.125rem, 1rem + 0.45vw, 1.5rem) / 1.25 var(--font-body);
}

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

:is(.store-fields, .woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm, .woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1rem 1.25rem;
}

:is(.store-fields, .woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm, .woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword) > * { grid-column: 1 / -1; }

.store-page .form-row-first { grid-column: 1; }
.store-page .form-row-last { grid-column: 2; }
.store-page .form-row[hidden] { display: none; }

/* Ukryty kraj (jeden kraj sprzedaży): skrypt adresów WooCommerce pokazuje wiersze przez style="display", stąd !important. */
.store-page .store-hidden-row { display: none !important; }

.store-page .form-row,
.store-page fieldset { margin: 0; }

.store-page fieldset {
	display: grid;
	gap: 1rem;
	padding: 1.25rem 0 0;
	border: 0;
	border-top: 1px solid var(--store-line);
}

.store-page legend {
	padding: 0 0 0.75rem;
	color: var(--color-text-strong);
	font: 500 0.875rem / 1.5 var(--font-body);
}

.store-page .form-row > label:not(.checkbox),
.store-page .woocommerce-form-row > label:not(.woocommerce-form__label-for-checkbox) {
	display: block;
	margin-bottom: 0.375rem;
	color: var(--color-text-strong);
	font: 400 0.8125rem / 1.4 var(--font-body);
}

.store-page :is(.required, abbr.required) {
	color: inherit;
	text-decoration: none;
	border: 0;
}

.store-page .optional { color: var(--color-muted); }

.store-page :is(.input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], select, textarea) {
	display: block;
	width: 100%;
	min-height: 2.5rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--store-field);
	border-radius: 0;
	background: var(--color-background);
	color: var(--color-text-strong);
	font: 300 0.875rem / 1.5 var(--font-body);
	transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.store-page :is(.input-text, input, select, textarea)::placeholder { color: var(--color-muted); opacity: 0.8; }

.store-page :is(.input-text, input, select, textarea):focus {
	border-color: var(--color-text-strong);
	outline: none;
	box-shadow: 0 0 0 1px var(--color-text-strong);
}

.store-page textarea {
	min-height: 5.5rem;
	resize: vertical;
}

.store-page select {
	padding-right: 2.5rem;
	background: var(--color-background) url("../img/chevron-down.svg") right 0.75rem center / 18px no-repeat;
	cursor: pointer;
	appearance: none;
}

/* Jeden kraj sprzedaży: WooCommerce pokazuje nazwę zamiast listy – wygląda jak zablokowane pole. */
.store-page .woocommerce-input-wrapper > strong {
	display: block;
	min-height: 2.5rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--store-line);
	background: var(--color-surface);
	color: var(--color-text-strong);
	font: 300 0.875rem / 1.5 var(--font-body);
}

/* Błędy walidacji. */
.store-page .woocommerce-invalid :is(.input-text, select) { border-color: var(--store-error); }

.store-page .checkout-inline-error-message,
.store-page .coupon-error-notice {
	margin: 0.375rem 0 0;
	color: var(--store-error);
	font: 400 0.75rem / 1.4 var(--font-body);
}

/* Pokaż/ukryj hasło (WooCommerce dokłada przycisk w .password-input). */
.store-page .password-input {
	position: relative;
	display: block;
}

.store-page .password-input input { padding-right: 2.75rem; }

.store-page .show-password-input {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	background: currentColor;
	color: var(--color-muted);
	cursor: pointer;
	transform: translateY(-50%);
	-webkit-mask: url("../img/eye.svg") center / 18px no-repeat;
	mask: url("../img/eye.svg") center / 18px no-repeat;
}

.store-page .show-password-input.display-password { color: var(--color-text-strong); }

.store-page .woocommerce-password-strength,
.store-page .woocommerce-password-hint {
	display: block;
	margin-top: 0.375rem;
	color: var(--color-muted);
	font: 300 0.75rem / 1.4 var(--font-body);
}

.store-page .woocommerce-password-strength.bad,
.store-page .woocommerce-password-strength.short { color: var(--store-error); }

.store-page .woocommerce-password-strength.strong { color: var(--color-text-strong); }

/* Checkbox i radio. */
.store-page label.checkbox,
.store-page .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
	color: var(--color-text-strong);
	font: 300 0.875rem / 1.4 var(--font-body);
	cursor: pointer;
}

.store-page input[type="checkbox"],
.store-page input[type="radio"] {
	flex: none;
	width: 1rem;
	height: 1rem;
	margin: 0;
	border: 1px solid var(--color-text-strong);
	border-radius: 0;
	background: var(--color-background);
	cursor: pointer;
	appearance: none;
	transition: background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.store-page input[type="checkbox"]:checked {
	background: var(--color-text-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.store-page input[type="radio"] { border-radius: 50%; }
.store-page input[type="radio"]:checked { box-shadow: inset 0 0 0 3px var(--color-background); background: var(--color-text-strong); }

.store-page :is(input[type="checkbox"], input[type="radio"]):focus-visible {
	outline: 2px solid var(--color-text-strong);
	outline-offset: 2px;
}

/* "(opcjonalnie)" przy checkboxach faktury i zgód nie ma sensu. */
.store-page label.checkbox .optional { display: none; }

/* Zwykłe przyciski WooCommerce (logowanie, rejestracja, zapis adresu i konta) w stylu .btn--primary. */
.store-page :is(.button, .woocommerce-Button):not(.btn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	border: 1px solid var(--btn-primary-bg);
	border-radius: 0;
	background: var(--btn-primary-bg);
	color: var(--btn-primary-text);
	font: 500 var(--btn-fs) / 1.5 var(--font-body);
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur) ease, border-color var(--dur) ease;
}

.store-page :is(.button, .woocommerce-Button):not(.btn):hover { border-color: var(--color-black); background: var(--color-black); }

/* Główny przycisk strony: "Kupuję i płacę", "Przejdź do zamówienia". */
.store-submit {
	justify-content: center;
	width: 100%;
	min-height: 3rem;
}

.store-submit[disabled],
.store-page .processing .store-submit { opacity: 0.6; pointer-events: none; }

.store-secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0.875rem 0 0;
	color: var(--color-text);
	font: 300 0.8125rem / 1.4 var(--font-body);
}

/* ---------- Komunikaty ---------- */

.store-page .woocommerce-notices-wrapper:empty { display: none; }

.store-page :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin: 0 0 1.5rem;
	padding: 0.875rem 1.25rem;
	border: 1px solid var(--store-line);
	border-left: 2px solid var(--color-text-strong);
	background: var(--color-surface);
	color: var(--color-text-strong);
	font: 300 0.875rem / 1.5 var(--font-body);
	list-style: none;
}

.store-page .woocommerce-error {
	flex-direction: column;
	align-items: flex-start;
	border-left-color: var(--store-error);
}

.store-page .woocommerce-error li { margin: 0; }

.store-page :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) { color: inherit; text-underline-offset: 0.2em; }

.store-page :is(.woocommerce-message, .woocommerce-info) .button {
	order: 2;
	padding: 0.4375rem 1rem;
	font-size: 0.8125rem;
}

/* ---------- Podsumowanie: lista produktów i wiersze kwot ---------- */

.summary-items {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
	padding: 0 0 1.25rem;
	list-style: none;
}

.summary-item {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
}

.summary-item__image img {
	display: block;
	width: 4.5rem;
	height: 3.25rem;
	object-fit: contain;
	mix-blend-mode: multiply; /* Białe tło zdjęcia znika (jak w mini koszyku). */
}

.summary-item__info {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.summary-item__name {
	color: var(--color-text-strong);
	font: 400 0.875rem / 1.35 var(--font-body);
}

.summary-item__name a { text-decoration: none; }
.summary-item__name a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.summary-item__meta,
.summary-item__note {
	color: var(--color-muted);
	font: 300 0.75rem / 1.4 var(--font-body);
}

.summary-item__note p { margin: 0; }

.summary-item__price {
	color: var(--color-text-strong);
	font: 400 0.875rem / 1.35 var(--font-body);
	white-space: nowrap;
}

/* Kreska nad każdą grupą: suma częściowa, dostawa, razem. */
.store-totals { border-top: 1px solid var(--store-line); }

.store-totals__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.875rem;
	color: var(--color-text-strong);
	font: 500 0.875rem / 1.4 var(--font-body);
}

.store-totals__row + .store-totals__row:not(.order-total) { padding-top: 0; }

.store-totals__value { text-align: right; }

.store-totals__note,
.store-totals .woocommerce-remove-coupon {
	color: var(--color-muted);
	font: 300 0.8125rem / 1.4 var(--font-body);
}

.store-totals .woocommerce-remove-coupon { margin-left: 0.25rem; }

.store-totals__row.cart-discount .store-totals__label { font-weight: 300; }

.store-totals__row.order-total {
	align-items: flex-start;
	padding-block: 1.125rem;
	border-top: 1px solid var(--store-line);
	font: 500 clamp(1.125rem, 1rem + 0.45vw, 1.375rem) / 1.3 var(--font-body);
}

/* "z VAT" / "(zawiera 244,72 zł VAT)" pod kwotą. */
.store-totals__row.order-total :is(small, .includes_tax) {
	display: block;
	margin-top: 0.125rem;
	color: var(--color-muted);
	font: 300 0.75rem / 1.4 var(--font-body);
}

.store-totals__row.order-total small .amount { font-weight: inherit; }

/* Dostawa: nagłówek nad listą metod. */
.store-shipping {
	padding-block: 0.875rem;
	border-top: 1px solid var(--store-line);
}

.store-shipping__title {
	margin: 0 0 0.625rem;
	color: var(--color-text-strong);
	font: 500 0.875rem / 1.4 var(--font-body);
}

.store-shipping__methods {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.store-shipping__method {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--color-text-strong);
	font: 300 0.875rem / 1.4 var(--font-body);
}

.store-shipping__method label { cursor: pointer; }

.store-shipping__note {
	margin: 0;
	color: var(--color-muted);
	font: 300 0.8125rem / 1.4 var(--font-body);
}

/* Bez wyboru (jedna metoda) – tylko nazwa i cena. */
.store-shipping__method input[type="hidden"] + label { cursor: default; }

/* ---------- Pasek kuponu ---------- */

/* Bez ramki – tekst w linii z treścią ramek poniżej. */
.store-coupon { background: var(--color-background); }

.store-coupon__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	min-height: 2.875rem;
	padding: 0.5rem 0;
	border: 0;
	background: none;
	color: var(--color-text-strong);
	font: 300 0.875rem / 1.4 var(--font-body);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.store-coupon__link {
	margin-left: 0.75rem;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.store-coupon__toggle .icon { transition: transform var(--dur) var(--ease-out); }
.store-coupon.is-open .store-coupon__toggle .icon { transform: rotate(90deg); }

/* Rozwijanie: wysokość 0fr → 1fr (płynnie, bez skoku paddingu). */
.store-coupon__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--dur) var(--ease-out);
}

.store-coupon.is-open .store-coupon__panel { grid-template-rows: 1fr; }

.store-coupon__inner {
	min-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity var(--dur-fast) ease;
}

.store-coupon.is-open .store-coupon__inner {
	opacity: 1;
	transition-delay: 0.08s;
}

/* WooCommerce chowa formularz kuponu (display:none w stylu i slideUp po zastosowaniu) – widoczność trzyma panel. */
.store-coupon__form {
	display: flex !important;
	gap: 0.75rem;
	padding: 0.25rem 0 1rem;
}

.store-coupon__form .input-text { flex: 1; min-width: 0; }
.store-coupon__form .btn { flex: none; padding-block: 0.4375rem; }

/* Komunikat po zastosowaniu kodu (WooCommerce wstawia go nad formularzem). */
.store-coupon__inner > :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) { margin: 0.25rem 0 0.75rem; }

/* ---------- Adresy (podziękowanie, zamówienie w koncie) ---------- */

.store-addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 1.25rem;
}

.store-address address {
	color: var(--color-text);
	font: 300 0.875rem / 1.7 var(--font-body);
	font-style: normal;
}

.store-address address p { margin: 0; }

/* Link wstecz: "Kontynuuj zakupy", "Wszystkie zamówienia". */
.account-back {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--color-text-strong);
	font: 400 0.8125rem / 1.4 var(--font-body);
	text-decoration: none;
}

.account-back:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- Pusty stan ---------- */

.store-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	max-width: 28rem;
	margin-inline: auto;
	padding-block: 2rem;
	text-align: center;
}

.store-empty__icon {
	width: 2.5rem;
	height: 2.5rem;
	color: var(--color-muted);
}

.store-empty__title {
	margin: 0.5rem 0 0;
	color: var(--color-text-strong);
	font: 400 var(--fs-title) / 1.3 var(--font-body);
}

.store-empty__text {
	margin: 0 0 1rem;
	color: var(--color-muted);
	font: 300 0.875rem / 1.5 var(--font-body);
}

/* ---------- Status zamówienia (konto, podgląd zamówienia) ---------- */

.order-status {
	display: inline-block;
	padding: 0.1875rem 1rem;
	border: 1px solid var(--store-field);
	color: var(--color-muted);
	font: 300 0.75rem / 1.4 var(--font-body);
	white-space: nowrap;
}

.order-status--processing,
.order-status--on-hold { border-color: var(--color-text-strong); color: var(--color-text-strong); }

/* Szczegóły zamówienia: podsumowanie, przyciski (zapłać, anuluj), adresy pod spodem. */
.order-details {
	display: grid;
	gap: 1.25rem;
}

.order-details__actions { margin-top: 1rem; }

@media (max-width: 47.999rem) {
	.store-page { padding-bottom: 3.5rem; }

	.store-coupon__form { flex-direction: column; }
	.store-coupon__form .btn { justify-content: center; }
}