/* Wtyczki płatności, dostawy i opcji produktu w wyglądzie systemu.

   Przelewy24, InPost i WPC Product Options wypisują własne znaczniki i arkusze: żółty przycisk
   InPost, zielone znaczniki WPC, natywne pole zgody P24. Motyw nie zmienia ich kodu, tylko wygląd.

   Arkusze wtyczek wczytują się po arkuszach motywu, dlatego selektory mają element więcej
   (body, form.cart, #payment). !important stoi tylko tam, gdzie wtyczka sama go użyła.

   Znaczniki zebrane ze stagingu 14.09.2026: woo-przelewy24 1.2.0, inpost-for-woocommerce
   (resources/assets/css/front.css), wpc-product-options 4.0.5. */

/* ── Przelewy24: logo metod ──
   Logo przychodzi z serwera P24 w naturalnym rozmiarze, więc Google Pay było pigułką wyższą
   od samej opcji. Wszystkie logo mają 24 px wysokości w prawej kolumnie karty .sp-opcja.
   Selektor dłuższy od reguły Woo #payment ul.payment_methods li img (margines -2px 0 0 .5em). */
#payment ul.payment_methods li .sp-opcja .sp-opcja-cena img {
	display: block;
	width: auto;
	max-width: 72px;
	height: 24px;
	margin: 0;
	padding: 0;
	object-fit: contain;
	box-shadow: none;
}

/* ── Przelewy24: zgoda na regulamin pod wybraną metodą ──
   Pole i tekst jak zgody kasy (.ks-zgoda). W etykiecie są tekst i dwa odnośniki, więc pole
   stoi z lewej na pozycji absolutnej - siatka zrobiłaby z każdego kawałka tekstu osobną komórkę. */
#payment .p24-payment-container .woocommerce-input-wrapper {
	display: block;
}

#payment .p24-payment-container label.checkbox {
	position: relative;
	display: block;
	margin: 0;
	padding-left: 30px;
	font-size: 16px;
	line-height: 1.45;
	color: var(--sp-ink);
	cursor: pointer;
}

#payment .p24-payment-container label.checkbox input[type="checkbox"] {
	position: absolute;
	top: 3px;
	left: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--sp-ink);
}

#payment .p24-payment-container label.checkbox a {
	color: var(--sp-action);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* ── Przelewy24: zapisane płatności (one click) ──
   Karty jak .sp-opcja: ramka 1 px, zaokrąglenie 2 px, wybrana w złocie zamiast niebieskiego
   #1d4ed8. Jeden krój, bez pogrubień i bez kroju maszynowego w numerze karty. */
#payment .p24-payment-container .p24-1click,
#payment .p24-payment-container .p24-1click--blik {
	color: var(--sp-ink);
	background: var(--sp-pole);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	box-shadow: none;
	outline: none;
	transition: border-color var(--sp-hover) var(--sp-ease), background-color var(--sp-hover) var(--sp-ease);
}

@media (hover: hover) and (pointer: fine) {

	#payment .p24-payment-container .p24-1click:hover,
	#payment .p24-payment-container .p24-1click--blik:hover {
		background: var(--sp-pole);
		border-color: var(--sp-gold);
		box-shadow: none;
	}
}

#payment .p24-payment-container .p24-1click.p24-1click--active,
#payment .p24-payment-container .p24-1click--blik.p24-1click--active {
	background: var(--sp-surface);
	border-color: var(--sp-gold);
	box-shadow: none;
	outline: none;
}

#payment .p24-payment-container .p24-1click:focus-visible,
#payment .p24-payment-container .p24-1click--blik:focus-visible {
	outline: 1px solid var(--sp-action);
	outline-offset: 3px;
}

#payment .p24-payment-container .p24-1click__indicator {
	border: 1px solid var(--sp-field-line);
}

#payment .p24-payment-container .p24-1click--active .p24-1click__indicator {
	background: var(--sp-ink);
	border-color: var(--sp-ink);
}

#payment .p24-payment-container :is(.p24-1click--blik__name, .p24-1clicks__label, .p24-1click--blik__valid strong),
#payment .p24-payment-container .p24-1click--blik.p24-1click--active .p24-1click--blik__name {
	font-weight: 400;
}

#payment .p24-payment-container :is(.p24-1click--card__number, .p24-1click--card__valid, .p24-1click--blik__valid) {
	font-family: inherit;
	font-weight: 400;
}

#payment .p24-payment-container .p24-1clicks__label {
	color: var(--sp-muted);
	opacity: 1;
}

#payment .p24-payment-container .p24-1clicks__or::before,
#payment .p24-payment-container .p24-1clicks__or::after {
	background: var(--sp-line);
}

/* ── Komunikat w wyglądzie bloków Woo poza stronami z blokami ──
   Np. „Brak zapisanej płatności” P24 w zakładce konta. Bez arkusza bloków WooCommerce ikona
   i tekst stały przyklejone do lewej krawędzi. Kolory i ramkę daje bloki.css; na stronach
   z blokami ich arkusz wczytuje się później i ma pierwszeństwo. */
.wc-block-components-notice-banner {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 0 var(--sp-s3);
	padding: 18px 20px;
	font-size: 17px;
	line-height: 1.45;
}

.wc-block-components-notice-banner > svg {
	flex: none;
	width: 24px;
	height: 24px;
	margin-top: 1px;
}

.wc-block-components-notice-banner__content {
	flex: 1;
	min-width: 0;
}

/* ── InPost: logo przy metodzie dostawy ──
   Logo w jednej linii z nazwą metody (do 28 px wysokości - napis „Kurier” na logo kuriera jest
   czytelny), bez przesunięcia top: -3px, które wtyczka daje w podsumowaniu koszyka. */
.sp-opcja .sp-opcja-tresc:has(> .inpost_pl-shipping-method-meta-wrap) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
}

.sp-opcja .sp-opcja-tresc .inpost_pl-shipping-method-meta-wrap {
	display: block;
}

.sp-opcja .sp-opcja-tresc .inpost_pl_shipping_meta {
	display: block;
	margin: 0;
}

.sp-opcja .sp-opcja-tresc :is(.easypack-shipping-method-logo, .easypack-weekend-shipping-method-logo, .easypack-custom-shipping-method-logo) {
	position: static;
	top: auto;
}

.sp-opcja .sp-opcja-tresc :is(.easypack-shipping-method-logo, .easypack-weekend-shipping-method-logo, .easypack-custom-shipping-method-logo) img {
	display: block;
	width: auto;
	max-width: 110px;
	height: auto;
	max-height: 28px;
	margin: 0;
	border: 0;
}

body span#inpost_pl_delivery_terms {
	margin-left: 6px;
	padding: 0 6px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--sp-muted);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
}

/* ── InPost: „Wybierz punkt odbioru” ──
   Przycisk drugorzędny systemu (.sp-button--secondary) na całą szerokość bloku dostawy,
   z pinezką. Wtyczka rysuje go jako div - app.js dokłada rolę przycisku i obsługę klawiatury. */
body .easypack_show_geowidget {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	max-width: none;
	min-height: 48px;
	margin: 12px 0 0;
	padding: 12px 23px;
	color: var(--sp-action);
	background: transparent;
	border: 1px solid var(--sp-action) !important;
	border-radius: var(--sp-radius);
	box-shadow: none !important;
	font-size: 18px !important;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--sp-hover) var(--sp-ease);
}

body .easypack_show_geowidget::before {
	content: '';
	flex: none;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (hover: hover) and (pointer: fine) {

	body .easypack_show_geowidget:hover {
		background: var(--sp-soft);
	}
}

body .easypack_show_geowidget:focus-visible {
	outline: 1px solid var(--sp-action);
	outline-offset: 3px;
}

/* ── InPost: wybrany punkt odbioru ──
   Komunikat sukcesu systemu zamiast żółtej ramki 3 px i zielonego tła nagłówka. Nagłówek ma
   pogrubienie w stylu w linii, stąd jedyne !important. Ukrywanie zostaje klasie wtyczki. */
body #selected-parcel-machine {
	min-width: 0;
	margin: 12px 0 0;
	padding: 14px 16px;
	font-size: 16px;
	line-height: 1.45;
	color: var(--sp-ink);
	background: var(--sp-notice-surface);
	border: 1px solid var(--sp-line);
	border-left: 2px solid var(--sp-success);
	border-radius: var(--sp-radius);
}

body #selected-parcel-machine.hidden-paczkomat-data {
	display: none;
}

body .easypack-visible-point-header {
	display: block;
	margin: 0 0 2px;
	font-size: 17px;
	font-style: normal;
	font-weight: 400 !important;
	color: var(--sp-success);
	background: none;
}

body .easypack-visible-point-description,
body .ep-chosen-parcel-machine {
	display: block;
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: 400;
	background: none;
}

/* Punkt w szczegółach zamówienia i przycisk zwrotu InPost (konto, potwierdzenie). */
body #easypack_selected_point_data {
	padding: 14px 16px;
	background: var(--sp-surface);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
}

body .inpost_returns_button {
	display: inline-flex !important;
	margin: var(--sp-s3) 0 0;
	padding: 12px 23px !important;
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-shadow: none;
	color: var(--sp-action) !important;
	background: transparent;
	border: 1px solid var(--sp-action);
	border-radius: var(--sp-radius);
	box-shadow: none;
}

/* ── WPC Product Options: grawer na adresówkach ──
   Pola opcji stoją w formularzu produktu nad ilością i przyciskiem. Nagłówki grup jak
   .sp-head--linia, nazwa pola i opis jak w .sp-field, pole tekstowe 48 px, gwiazdka pola
   wymaganego w kolorze akcji. Błąd w czerwieni z palety zamiast #e2401c, podsumowanie ceny
   bez szarych ramek #eee. */
form.cart .wpcpo-wrapper {
	--wpcpo-error: var(--sp-error);
	margin: 0 0 var(--sp-s3);
}

form.cart .wpcpo-options {
	display: grid;
	gap: var(--sp-s3);
}

form.cart .wpcpo-option {
	min-width: 0;
	margin: 0;
}

form.cart .wpcpo-option-appearance-heading h3 {
	margin: var(--sp-s2) 0 0;
	padding-bottom: 10px;
	font-size: 21px;
	font-weight: 400;
	line-height: 1.25;
	border-bottom: 1px solid var(--sp-hair);
}

form.cart .wpcpo-options > .wpcpo-option-appearance-heading:first-child h3 {
	margin-top: 0;
}

form.cart .wpcpo-option-name {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 4px;
	margin-bottom: 4px;
	font-size: 17px;
	line-height: 1.35;
}

form.cart .wpcpo-option-name strong {
	font-weight: 400;
}

form.cart .wpcpo-option-name > span {
	color: var(--sp-action);
}

form.cart .wpcpo-option-name .label-price {
	color: var(--sp-muted);
	font-variant-numeric: tabular-nums;
}

form.cart .wpcpo-option-description {
	margin: 0 0 7px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--sp-muted);
}

form.cart .wpcpo-option-description p {
	margin: 0;
}

form.cart .wpcpo-option-form .form-row {
	margin: 0;
	padding: 0;
}

form.cart .wpcpo-option-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], textarea, select) {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 11px 13px;
	font: inherit;
	font-size: 18px;
	color: var(--sp-ink);
	background: var(--sp-pole);
	border: 1px solid var(--sp-field-line);
	border-radius: var(--sp-radius);
	box-shadow: none;
}

form.cart .wpcpo-option-form textarea {
	min-height: 120px;
}

form.cart .wpcpo-option-form select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 42px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23735F38' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 20px 20px;
}

form.cart .wpcpo-option-form :is(input, textarea, select):focus-visible {
	outline: 1px solid var(--sp-action);
	outline-offset: -1px;
	border-color: var(--sp-action);
}

form.cart .wpcpo-option-form input:is([type="checkbox"], [type="radio"]) {
	width: 18px;
	height: 18px;
	margin: 0 8px 0 0;
	vertical-align: -3px;
	accent-color: var(--sp-ink);
}

form.cart .wpcpo-chars-remaining {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	color: var(--sp-muted);
}

/* Wtyczka oznacza puste pola wymagane klasą błędu już przy wczytaniu strony (sprawdzone na
   stagingu), więc etykiety i ramki były czerwone, zanim klient cokolwiek wpisał. Czerwień dopiero
   po interakcji z polem (:user-invalid) - klasa wtyczki nie zmienia wyglądu. */
form.cart .wpcpo-option.wpcpo-has-error label {
	color: inherit;
}

form.cart .wpcpo-option.wpcpo-has-error .wpcpo-option-field {
	border-color: var(--sp-field-line);
}

form.cart .wpcpo-option:has(.wpcpo-option-field:user-invalid) .wpcpo-option-name {
	color: var(--sp-error);
}

form.cart .wpcpo-option-form .wpcpo-option-field:user-invalid {
	border-color: var(--sp-error);
}

/* Wybór obrazkiem albo kolorem: pola jak .sp-segment, wybrane w złocie; znacznik wyboru
   w kolorze tekstu z rysowanym ptaszkiem zamiast zielonego koła ze znakiem „✓” z fontu. */
form.cart .wpcpo-option:is(.wpcpo-option-image-radio, .wpcpo-option-image-checkbox, .wpcpo-option-color-radio, .wpcpo-option-color-checkbox) .form-row {
	gap: 10px;
	margin: 0;
}

form.cart .wpcpo-option:is(.wpcpo-option-image-radio, .wpcpo-option-image-checkbox, .wpcpo-option-color-radio, .wpcpo-option-color-checkbox) .form-row label {
	flex: 0 1 calc(25% - 10px);
	width: auto;
	min-width: 88px;
	margin: 0;
	padding: 8px;
	background: var(--sp-pole);
	border: 1px solid var(--sp-field-line);
	border-radius: var(--sp-radius);
	transition: border-color var(--sp-hover) var(--sp-ease), background-color var(--sp-hover) var(--sp-ease);
}

form.cart .wpcpo-option:is(.wpcpo-option-image-radio, .wpcpo-option-image-checkbox, .wpcpo-option-color-radio, .wpcpo-option-color-checkbox) .form-row input:checked + label {
	background: var(--sp-surface);
	border: 1px solid var(--sp-gold);
}

form.cart .wpcpo-option:is(.wpcpo-option-image-radio, .wpcpo-option-image-checkbox, .wpcpo-option-color-radio, .wpcpo-option-color-checkbox) .form-row input:checked + label::before {
	content: '';
	top: -9px;
	right: -9px;
	width: 22px;
	height: 22px;
	background: var(--sp-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7F4ED' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
	border: 2px solid var(--sp-paper);
	border-radius: 50%;
}

form.cart .wpcpo-option:is(.wpcpo-option-image-radio, .wpcpo-option-image-checkbox, .wpcpo-option-color-radio, .wpcpo-option-color-checkbox) .form-row input:focus-visible + label {
	outline: 1px solid var(--sp-action);
	outline-offset: 3px;
}

form.cart .wpcpo-option:is(.wpcpo-option-image-radio, .wpcpo-option-image-checkbox) .form-row label img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

/* Podsumowanie ceny z opcjami: wiersze jak .kz-koszt, bez szarych ramek. Pusty kontener
   (produkt bez dopłat) nic nie zajmuje. */
form.cart .wpcpo-total {
	margin: 0 0 var(--sp-s3);
	padding: 0;
	overflow: visible;
	border: 0;
}

form.cart .wpcpo-total:empty {
	display: none;
}

form.cart .wpcpo-total ul {
	margin: 0;
	padding: 12px 0 0;
	list-style: none;
	border-top: 1px solid var(--sp-line);
}

form.cart .wpcpo-total ul li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
	font-size: 16px;
	color: var(--sp-muted);
}

form.cart .wpcpo-total ul li.wpcpo-subtotal {
	margin-top: 8px;
	padding: 10px 0 0;
	font-size: 18px;
	color: var(--sp-ink);
	border-top: 1px solid var(--sp-hair);
}

form.cart .wpcpo-total ul li.wpcpo-subtotal .amount {
	margin-left: 10px;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

/* ── Smart Coupons (WebToffee 2.3.2): kupony w koszyku, kasie i koncie ──
   Wtyczka wpisuje kolory w atrybut style (tło #a48e62, biała przerywana ramka, cień) i dokłada własny
   <style>: kupon 300 px z wyśrodkowanym tekstem, opis w czarnym dymku nad kuponem po najechaniu na „i”.
   Tu kupon jak pole wyboru systemu: jasne pole z przerywaną złotą ramką i ikoną biletu, kwota w tonie
   akcji, rodzaj rabatu obok, kod wersalikami i opis zawsze widoczny pod kodem. Kolory z atrybutu style
   przykrywa tylko !important. */
body .wt_coupon_wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: 12px;
	margin: var(--sp-s3) 0;
	padding: 0;
}

body .wt_coupon_wrapper .wt-sc-hidden-coupon-box {
	display: none;
}

body .wt_sc_single_coupon,
body .wt_coupon_wrapper .wt-single-coupon {
	position: relative;
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: 0 14px;
	align-items: start;
	width: auto;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 14px 16px !important;
	text-align: left;
	color: var(--sp-ink) !important;
	background: var(--sp-surface) !important;
	border: 1px dashed var(--sp-gold) !important;
	border-radius: var(--sp-radius);
	box-shadow: none !important;
	transition: border-color var(--sp-hover) var(--sp-ease);
}

body .wt_sc_single_coupon::before {
	content: '';
	width: 22px;
	height: 22px;
	margin-top: 3px;
	background: var(--sp-gold);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M13 5v2'/%3E%3Cpath d='M13 17v2'/%3E%3Cpath d='M13 11v2'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M13 5v2'/%3E%3Cpath d='M13 17v2'/%3E%3Cpath d='M13 11v2'/%3E%3C/svg%3E") center/contain no-repeat;
}

body .wt_sc_single_coupon :is(.wbte_sc_coupon_layout_expired_text, .wbte_sc_coupon_layout_expired_overlay)[style*="hidden"] {
	display: none;
}

body .wt_sc_single_coupon .wt_sc_coupon_content {
	grid-column: 2;
	display: grid;
	gap: 2px;
	float: none;
	width: auto;
	padding: 0;
}

body .wt_sc_single_coupon .wt-coupon-amount {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
}

body .wt_sc_single_coupon .wt_sc_coupon_amount {
	margin: 0;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.1;
	color: var(--sp-action) !important;
	font-variant-numeric: tabular-nums;
}

body .wt_sc_single_coupon .wt_sc_coupon_type {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--sp-muted);
	white-space: normal;
}

body .wt_sc_single_coupon .wt_sc_coupon_code {
	float: none;
	width: auto;
	font-size: inherit;
	line-height: 1.3;
}

body .wt_sc_single_coupon .wt_sc_coupon_code code {
	padding: 0;
	font-family: inherit;
	font-size: 13px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--sp-ink) !important;
	background: none;
	opacity: 1;
}

body .wt_sc_single_coupon .wt_sc_coupon_desc_wrapper {
	position: static;
	margin-top: 4px;
}

body .wt_sc_single_coupon .wt_sc_coupon_desc_wrapper .info {
	display: none;
}

body .wt_sc_single_coupon .wt_sc_coupon_desc {
	position: static;
	display: block;
	width: auto;
	padding: 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--sp-muted);
	background: none;
	border-radius: 0;
	box-shadow: none;
}

body .wt_sc_single_coupon .wt_sc_coupon_desc::before,
body .wt_sc_single_coupon .wt_sc_coupon_desc::after {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	body .wt_sc_single_coupon.active-coupon:hover {
		border-color: var(--sp-action) !important;
	}
}

body .wt_sc_single_coupon:focus-visible {
	outline: 1px solid var(--sp-action);
	outline-offset: 3px;
}

body .wt_sc_single_coupon[aria-pressed="true"] {
	border-style: solid !important;
	border-color: var(--sp-action) !important;
}