/* OPAY bank selection rows inside the checkout block. Visually matched to the
   shipping cards (.zod-shipx__card) so both checkout steps read the same.
   Fallback hex values are required: WC blocks render outside the theme's
   custom-property scope in some containers (see checkout CSS notes). */

/* Sole payment method: WooCommerce still renders its own "El. bankininkystė"
   radio above our list, which would mean picking a payment method twice. With
   one gateway the choice is only the bank, so that row is hidden and our list
   becomes the payment options. If a second gateway is ever enabled the option
   is no longer :only-child and WC's own row comes back. */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:only-child > .wc-block-components-radio-control__option {
	display: none;
}

.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:only-child > .wc-block-components-radio-control-accordion-content {
	padding: 0;
	margin: 0;
}

/* With the gateway row hidden the outer frame has nothing to enclose — it just
   double-frames the bank rows. Two sources: WC's own 1px ::after ring on the
   radio control, and the theme's inset ring on the accordion option (grey when
   unchecked, gold + halo when checked, see child.css). Both are dropped only
   while our list is the sole payment option; the bank cards keep their own
   borders. The :has(input:checked) selector outranks the theme's checked rule
   regardless of stylesheet order. */
.wc-block-checkout__payment-method .wc-block-components-radio-control:has(.wc-block-components-radio-control-accordion-option:only-child)::after {
	content: none;
}

.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:only-child,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:only-child:has(input:checked) {
	box-shadow: none;
}

.zod-opay {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Sits directly under the checkout step title, like a section lede. */
.zod-opay__intro {
	margin: -4px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--zod-on-surface-variant, #4C4546);
}

.zod-opay__group {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.zod-opay__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

/* The bordered box wraps the row together with its notice, so a selected bank
   reads as one card (same frame as .zod-shipx__card). */
.zod-opay__item {
	background: var(--zod-white, #FFFFFF);
	border: 1px solid var(--zod-subtle-gray, #DCD3C5);
	border-radius: 0;
	transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
	min-width: 0;
}

.zod-opay__item:hover {
	border-color: var(--zod-antique-gold, #B8924A);
}

/* Išskleista kortelė dviejų tonų: banko eilutė lieka balta (kaip nepažymėtos),
   o paaiškinimo juosta apačioje kreminė — pasirinkimą žymi auksinis rėmelis su
   aureole, o kreminė juosta atskiria antrinę informaciją nuo paties banko. */
.zod-opay__item.is-selected {
	border-color: var(--zod-antique-gold, #B8924A);
	box-shadow: 0 0 0 2px rgba(184, 146, 74, 0.15);
}

.zod-opay__row {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 13px 16px;
	background: none;
	border: 0;
	text-align: left;
	font-family: inherit;
	cursor: pointer;
	appearance: none;
}

.zod-opay__row:focus-visible {
	outline: 2px solid var(--zod-antique-gold, #B8924A);
	outline-offset: -2px;
}

/* What happens after submitting — shown only under the selected bank. */
.zod-opay__note {
	margin: 0;
	padding: 12px 16px 14px;
	background: var(--zod-surface-low, #EFE9DD);
	border-top: 1px solid rgba(184, 146, 74, 0.35);
	font-size: 14px;
	line-height: 1.5;
	color: var(--zod-on-surface-variant, #4C4546);
}

.zod-opay__radio {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 1px solid var(--zod-on-surface-variant, #4C4546);
	border-radius: 999px;
	position: relative;
	transition: border-color 0.3s ease-in-out;
}

.zod-opay__item.is-selected .zod-opay__radio {
	border-color: var(--zod-antique-gold, #B8924A);
}

.zod-opay__item.is-selected .zod-opay__radio::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 999px;
	background: var(--zod-antique-gold, #B8924A);
}

.zod-opay__name {
	flex: 1;
	min-width: 0;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--zod-on-surface, #1B1B1B);
}

.zod-opay__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 76px;
	height: 24px;
}

.zod-opay__logo img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}