/*
 * Wspólny system przycisków — luźno wzorowany na Material Design 3
 * (https://m3.material.io/components/all-buttons): pełne zaokrąglenie
 * ("pill"), typografia Label Large (14px/500/0.1px), wysokość 40px,
 * warstwa stanu (hover/active) przez przyciemnienie zamiast osobnego
 * elementu nakładki — prostsze, a wizualnie wystarczająco bliskie.
 *
 * Ładowany wszędzie, gdzie w sklepie są przyciski akcji klienta: strona
 * produktu, lista produktów (sklep/kategorie/wyszukiwarka), koszyk,
 * kasa i konto klienta (patrz enqueue w class-woocommerce-product-page.php
 * i class-shop-loop.php).
 *
 * Celowo dwie grupy selektorów w każdej regule:
 * 1) nasze własne klasy narzędziowe (.bigsewciu-btn--filled/outlined/text)
 *    — używane przez elementy renderowane przez TĘ wtyczkę,
 * 2) stabilne, natywne klasy WooCommerce (.single_add_to_cart_button,
 *    .checkout-button, #place_order itd.) — żeby przyciski WooCommerce
 *    same z siebie wyglądały spójnie, bez potrzeby podmieniania ich
 *    szablonów.
 */

/* --- Filled button (akcja główna: dodaj do koszyka, zastosuj, złóż
   zamówienie) --- */
.bigsewciu-btn--filled,
.single_add_to_cart_button,
.add_to_cart_button,
.woocommerce-cart .checkout-button,
.woocommerce-checkout #place_order {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	height: 40px;
	min-height: 40px;
	padding: 0 24px !important;
	border: none !important;
	border-radius: 999px !important;
	background: var(--theme-palette-color-1, #cc3333) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 20px !important;
	letter-spacing: 0.1px;
	text-decoration: none !important;
	text-transform: none !important;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.bigsewciu-btn--filled:hover,
.single_add_to_cart_button:hover,
.add_to_cart_button:hover,
.woocommerce-cart .checkout-button:hover,
.woocommerce-checkout #place_order:hover {
	filter: brightness(0.93);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.12);
	color: #fff !important;
}

.bigsewciu-btn--filled:active,
.single_add_to_cart_button:active,
.add_to_cart_button:active,
.woocommerce-cart .checkout-button:active,
.woocommerce-checkout #place_order:active {
	filter: brightness(0.85);
	box-shadow: none;
}

.bigsewciu-btn--filled:focus-visible,
.single_add_to_cart_button:focus-visible,
.add_to_cart_button:focus-visible,
.woocommerce-cart .checkout-button:focus-visible,
.woocommerce-checkout #place_order:focus-visible {
	outline: 2px solid var(--theme-palette-color-1, #cc3333);
	outline-offset: 2px;
}

.single_add_to_cart_button.disabled,
.single_add_to_cart_button:disabled,
.woocommerce-checkout #place_order.disabled {
	opacity: 0.45;
	filter: none;
	cursor: not-allowed;
	box-shadow: none;
}

/* --- Outlined button (akcja drugorzędna: Informacje o produkcie,
   Kontynuuj zakupy) --- */
.bigsewciu-btn--outlined,
.bigsewciu-drawer-trigger,
.woocommerce-cart .wc-backward,
.woocommerce-cart a.button:not(.checkout-button) {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	height: 40px;
	min-height: 40px;
	padding: 0 24px !important;
	background: none !important;
	border: 1px solid rgba(0, 0, 0, 0.3) !important;
	border-radius: 999px !important;
	color: #1d2327 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 20px !important;
	letter-spacing: 0.1px;
	text-decoration: none !important;
	text-transform: none !important;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.bigsewciu-btn--outlined:hover,
.bigsewciu-drawer-trigger:hover,
.woocommerce-cart .wc-backward:hover,
.woocommerce-cart a.button:not(.checkout-button):hover {
	border-color: var(--theme-palette-color-1, #cc3333) !important;
	background: rgba(0, 0, 0, 0.04) !important;
	color: var(--theme-palette-color-1, #cc3333) !important;
}

/* --- Text button (akcja trzeciorzędna: Wyczyść, Zobacz koszyk) --- */
.bigsewciu-btn--text,
.added_to_cart {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 12px !important;
	background: none !important;
	border: none !important;
	color: var(--theme-palette-color-1, #cc3333) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0.1px;
	text-decoration: none !important;
	cursor: pointer;
}

.bigsewciu-btn--text:hover,
.added_to_cart:hover {
	text-decoration: underline !important;
}

/* --- Icon buttons (stepper ilości Blocksy: .ct-increase/.ct-decrease —
   style'ujemy tylko WYGLĄDEM gotowy element motywu, bez podmiany
   zachowania/JS, które i tak należy do Blocksy). --- */
.quantity.quantity {
	display: inline-flex;
	align-items: center;
	height: 40px;
	width: auto;
	min-width: 132px;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 999px;
	overflow: hidden;
}

.quantity .ct-decrease,
.quantity .ct-increase {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	cursor: pointer;
	transition: background 0.15s ease;
}

.quantity .ct-decrease:hover,
.quantity .ct-increase:hover {
	background: rgba(0, 0, 0, 0.06);
}

.quantity input.qty.qty {
	display: block;
	width: 48px;
	height: 40px;
	min-height: 40px;
	line-height: 40px;
	margin: 0;
	padding: 0;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
	box-sizing: border-box;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: #1d2327 !important;
	-webkit-text-fill-color: #1d2327 !important;
	opacity: 1 !important;
	-moz-appearance: textfield;
}

/* Chrome/Safari/Edge: ukrywa natywne małe strzałki góra/dół na
   <input type="number"> — mamy już własne, większe +/- (.ct-increase/
   .ct-decrease od Blocksy) po bokach, dwa komplety strzałek naraz tylko
   myliły. */
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.quantity input.qty:focus {
	outline: none;
}

@media (max-width: 480px) {
	.bigsewciu-btn--filled,
	.single_add_to_cart_button,
	.bigsewciu-btn--outlined,
	.bigsewciu-drawer-trigger {
		width: 100%;
	}
}

/* --- "Kup teraz" (wtyczka zewnętrzna Furgonetka, moduł "Portmonetka") ---
   Stylujemy tylko WYGLĄD gotowego elementu obcej wtyczki (bez podmiany
   jej JS/działania, zgodnie z zasadą projektu: nigdy nie ruszamy plików
   innych wtyczek). Klasy znalezione w jej kodzie
   (wp-content/plugins/furgonetka/public/js/furgonetka-checkout.js):
   .portmonetka-container__btn to sam przycisk, .portmonetka-container__desc
   to tekst "Jak działa Furgonetka Koszyk?" pod nim.

   Furgonetka NIE dokłada swojego CSS od razu w HTML-u strony — wstrzykuje
   go dopiero w JS, PO wczytaniu tego pliku (sprawdzone bezpośrednio na
   produkcji: nasz plik ładuje się poprawnie, ale przycisk i tak wyglądał
   jak domyślny Furgonetki). Przy takiej samej specyficzności selektora
   (u obu stron pojedyncza klasa + !important) wygrywa ten wstrzyknięty
   PÓŹNIEJ, czyli Furgonetki — niezależnie od kolejności <link> w <head>.
   Dlatego każdy selektor niżej jest celowo podwojony/potrojony (więcej
   klas w jednym selektorze = wyższa specyficzność, bez znaczenia, co
   wczyta się później) — to jedyny pewny sposób, żeby wygrać z czymś, co
   dokłada się do strony już PO nas, też z !important.

   Celowo DOKŁADNIE ten sam wygląd co główne "Dodaj do koszyka" tuż obok
   (ten sam kolor, ten sam kształt) — admin zgłosił, że dwa różne style
   obok siebie wyglądały niespójnie. */
.furgonetka-checkout-btn-container.furgonetka-checkout-btn-container {
	margin-top: 10px !important;
	width: 100% !important;
}

.furgonetka-checkout-btn-container .portmonetka-container.portmonetka-container {
	margin: 0 !important;
	max-width: none !important;
}

.furgonetka-checkout-btn-container .portmonetka-container .portmonetka-container__btn.portmonetka-container__btn {
	width: 100% !important;
	min-width: 0 !important;
	height: 44px !important;
	background: var(--theme-palette-color-1, #cc3333) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	padding: 0 24px !important;
	font-weight: 500 !important;
	text-transform: none !important;
	transition: filter 0.15s ease, box-shadow 0.15s ease !important;
}

.furgonetka-checkout-btn-container .portmonetka-container .portmonetka-container__btn.portmonetka-container__btn:hover,
.furgonetka-checkout-btn-container .portmonetka-container .portmonetka-container__btn.portmonetka-container__btn:focus,
.furgonetka-checkout-btn-container .portmonetka-container .portmonetka-container__btn.portmonetka-container__btn:active {
	background: var(--theme-palette-color-1, #cc3333) !important;
	filter: brightness(0.93) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.12) !important;
}

.furgonetka-checkout-btn-container .portmonetka-container__btn .portmonetka-container__btn-txt.portmonetka-container__btn-txt {
	margin-right: 0 !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0.1px !important;
	text-transform: none !important;
}

.furgonetka-checkout-btn-container .portmonetka-container__desc.portmonetka-container__desc {
	margin-top: 0.5em !important;
	font-size: 0.8em !important;
	color: #9ca3af !important;
	text-align: center !important;
}

.furgonetka-checkout-btn-container .portmonetka-container__desc-link.portmonetka-container__desc-link {
	color: inherit !important;
	text-decoration: underline !important;
}

.portmonetka-container__desc-link:hover {
	color: var(--theme-palette-color-1, #cc3333) !important;
}