.wompi-fields-marvox {
	--wompi-ink-marvox: #2d302f;
	--wompi-muted-marvox: #5e6864;
	--wompi-line-marvox: rgba(94, 104, 100, .28);
	--wompi-focus-marvox: #059d7f;
	--wompi-soft-marvox: #eaf7f2;
	box-sizing: border-box;
	margin: 14px 0;
	padding: clamp(18px, 3vw, 26px);
	border: 1px solid rgba(94, 104, 100, .18);
	border-radius: 18px;
	background: linear-gradient(145deg, #fff 0%, #fbfbfe 100%);
	box-shadow: 0 12px 34px rgba(45, 48, 47, .08);
	color: var(--wompi-ink-marvox);
}

.wompi-fields-marvox *,
.wompi-fields-marvox *::before,
.wompi-fields-marvox *::after {
	box-sizing: border-box;
}

.wompi-description-marvox {
	margin: 0 0 18px;
	color: var(--wompi-muted-marvox);
	font-size: 14px;
	line-height: 1.55;
}

.wompi-field-marvox {
	min-width: 0;
	margin: 0;
}

.wompi-field-wide-marvox + .wompi-grid-marvox,
.wompi-grid-marvox + .wompi-field-wide-marvox {
	margin-top: 15px;
}

.wompi-field-marvox > label,
.wompi-fields-marvox .form-row > label {
	display: block;
	margin: 0 0 7px;
	color: var(--wompi-ink-marvox);
	font-size: 13px;
	font-weight: 650;
	letter-spacing: .01em;
}

.wompi-input-shell-marvox {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 52px;
	overflow: hidden;
	border: 1px solid var(--wompi-line-marvox);
	border-radius: 13px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(45, 48, 47, .03);
	transition: border-color .22s ease, box-shadow .22s ease, background-color .22s ease, transform .22s ease;
}

.wompi-input-shell-marvox:hover {
	border-color: rgba(94, 104, 100, .55);
}

.wompi-input-shell-marvox:focus-within {
	border-color: var(--wompi-focus-marvox);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(5, 157, 127, .14), 0 7px 18px rgba(45, 48, 47, .07);
	transform: translateY(-1px);
}

.wompi-fields-marvox .wompi-input-shell-marvox input,
.wompi-fields-marvox .wompi-input-shell-marvox select {
	width: 100%;
	min-width: 0;
	min-height: 50px;
	margin: 0 !important;
	padding: 0 15px !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--wompi-ink-marvox);
	font-family: inherit;
	font-size: 16px;
	font-weight: 520;
	letter-spacing: .015em;
	transition: color .2s ease, opacity .2s ease;
}

.wompi-fields-marvox .wompi-input-shell-marvox input::placeholder {
	color: var(--wompi-muted-marvox);
	font-weight: 420;
	opacity: 1;
}

.wompi-card-shell-marvox input {
	padding-right: 86px !important;
	font-variant-numeric: tabular-nums;
	letter-spacing: .08em !important;
}

.wompi-brand-slot-marvox {
	position: absolute;
	z-index: 2;
	top: 50%;
	right: 11px;
	display: flex;
	width: 62px;
	height: 34px;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transform: translateY(-50%);
}

.wompi-brand-mark-marvox {
	position: relative;
	display: flex;
	width: 58px;
	height: 32px;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 1px solid #e0e4eb;
	border-radius: 9px;
	background: #fff;
	box-shadow: 0 3px 10px rgba(45, 48, 47, .08);
	color: #182d84;
	font-size: 15px;
	font-style: italic;
	font-weight: 900;
	letter-spacing: -.07em;
	opacity: 1;
	transform: scale(1);
	transition: opacity .24s ease, transform .24s cubic-bezier(.2, .8, .2, 1), background-color .24s ease, color .24s ease;
}

.wompi-brand-mark-marvox[data-brand-marvox="generic"] {
	width: 38px;
	border-color: #d8dee8;
	background: var(--wompi-soft-marvox);
	color: transparent;
	opacity: .72;
}

.wompi-brand-mark-marvox[data-brand-marvox="generic"]::before {
	content: "";
	position: absolute;
	width: 21px;
	height: 15px;
	border: 1.8px solid #7c8797;
	border-radius: 3px;
}

.wompi-brand-mark-marvox[data-brand-marvox="generic"]::after {
	content: "";
	position: absolute;
	top: 11px;
	width: 21px;
	height: 3px;
	background: #7c8797;
}

.wompi-brand-mark-marvox[data-brand-marvox="mastercard"] {
	border: 0;
	background:
		radial-gradient(circle at 39% 50%, #eb001b 0 12px, transparent 12.5px),
		radial-gradient(circle at 61% 50%, #f79e1b 0 12px, transparent 12.5px),
		#fff;
	color: transparent;
}

.wompi-brand-mark-marvox[data-brand-marvox="amex"] {
	border-color: #1683c4;
	background: #1683c4;
	color: #fff;
	font-size: 12px;
	font-style: normal;
	letter-spacing: -.04em;
}

.wompi-grid-marvox {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: end;
	gap: 14px;
	margin: 15px 0 0;
}

.wompi-expiry-shell-marvox {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	padding: 0 10px;
}

.wompi-fields-marvox .wompi-expiry-shell-marvox input {
	min-width: 0;
	padding: 0 4px !important;
	text-align: center;
	font-variant-numeric: tabular-nums;
	letter-spacing: .08em;
}

.wompi-expiry-separator-marvox {
	display: inline-flex;
	height: 28px;
	align-items: center;
	align-self: center;
	color: var(--wompi-muted-marvox);
	font-size: 19px;
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
}

.wompi-cvc-shell-marvox input {
	padding-right: 48px !important;
	font-variant-numeric: tabular-nums;
	letter-spacing: .12em !important;
}

.wompi-cvc-shell-marvox input[type="password"] {
	font-family: Arial, sans-serif;
	font-size: 21px;
	font-weight: 900;
	letter-spacing: .16em !important;
}

.wompi-cvc-shell-marvox input[type="password"]::placeholder {
	color: #5e6864;
	font-size: 23px;
	font-weight: 900;
	letter-spacing: .16em;
}

.wompi-fields-marvox button.wompi-cvc-toggle-marvox {
	position: absolute;
	z-index: 2;
	top: 50%;
	right: 8px;
	display: inline-flex;
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	min-height: 36px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 9px;
	background: transparent !important;
	box-shadow: none !important;
	color: #667287;
	cursor: pointer;
	transform: translateY(-50%);
	transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

.wompi-fields-marvox button.wompi-cvc-toggle-marvox:hover,
.wompi-fields-marvox button.wompi-cvc-toggle-marvox:focus-visible {
	border: 0 !important;
	background: #eaf7f2 !important;
	box-shadow: none !important;
	color: var(--wompi-focus-marvox);
	outline: 0;
}

.wompi-fields-marvox button.wompi-cvc-toggle-marvox:active {
	transform: translateY(-50%) scale(.92);
}

.wompi-eye-icon-marvox {
	display: block;
}

.wompi-consents-marvox {
	display: grid;
	gap: 9px;
	margin-top: 18px;
}

.wompi-consent-marvox,
.wompi-fields-marvox .form-row.wompi-consent-marvox > label {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	color: #4f5c70;
	font-size: 13px;
	font-weight: 450;
	line-height: 1.45;
	cursor: pointer;
}

.wompi-consent-marvox input {
	width: 17px !important;
	height: 17px !important;
	min-height: 17px !important;
	flex: 0 0 17px;
	margin: 1px 0 0 !important;
	accent-color: var(--wompi-focus-marvox);
	transition: transform .18s ease, box-shadow .18s ease;
}

.wompi-consent-marvox input:checked {
	transform: scale(1.05);
}

.wompi-consent-marvox a {
	color: var(--wompi-focus-marvox);
	text-decoration-color: rgba(5, 157, 127, .35);
	text-underline-offset: 2px;
	transition: color .18s ease, text-decoration-color .18s ease;
}

.wompi-consent-marvox a:hover {
	color: var(--wompi-ink-marvox);
	text-decoration-color: currentColor;
}

.wompi-test-badge-marvox {
	display: inline-flex;
	align-items: center;
	margin: 0 0 12px;
	padding: 5px 10px;
	border: 1px solid #f1d477;
	border-radius: 999px;
	background: #fff8dc;
	color: #755700;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
}

.wompi-security-note-marvox {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 17px 0 0;
	padding-top: 14px;
	border-top: 1px solid #edf0f4;
	color: #687487;
	font-size: 12px;
	line-height: 1.5;
}

.wompi-lock-marvox {
	display: inline-flex;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #e8f8ef;
	color: #17824b;
	font-size: 11px;
	font-weight: 900;
}

/* Classic checkout uses WooCommerce form-row wrappers around the same shells. */
.wompi-fields-marvox .form-row {
	margin: 0 !important;
	padding: 0 !important;
}

.wompi-fields-marvox .form-row-first-marvox,
.wompi-fields-marvox .form-row-last-marvox {
	width: auto !important;
	float: none !important;
}

.wompi-classic-grid-marvox {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: end;
	gap: 14px;
	margin-top: 15px;
}

.wompi-classic-holder-marvox {
	margin-top: 15px !important;
}

/*
 * WooCommerce Blocks dibuja un marco oscuro para distinguir pasarelas.
 * Como Marvox Wompi es la única disponible, se elimina ese marco y el
 * relleno duplicado, conservando el encabezado accesible del método.
 */
.wc-block-components-radio-control-accordion-option:has(.wompi-fields-marvox) {
	box-shadow: none !important;
}

.wc-block-components-radio-control-accordion-option:has(.wompi-fields-marvox) > .wc-block-components-radio-control-accordion-content {
	padding: 0 !important;
}

.wc-block-components-radio-control-accordion-option:has(.wompi-fields-marvox) .wompi-fields-marvox {
	margin-top: 4px;
}

@media (max-width: 480px) {
	.wompi-fields-marvox {
		padding: 17px 14px;
		border-radius: 15px;
	}

	.wompi-grid-marvox,
	.wompi-classic-grid-marvox {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 10px;
	}

	.wompi-field-marvox > label,
	.wompi-fields-marvox .form-row > label {
		font-size: 12px;
	}

	.wompi-fields-marvox .wompi-input-shell-marvox input {
		padding-right: 10px !important;
		padding-left: 11px !important;
		font-size: 15px;
	}

	.wompi-card-shell-marvox input {
		padding-right: 70px !important;
		letter-spacing: .035em !important;
	}

	.wompi-brand-slot-marvox {
		right: 7px;
		width: 55px;
	}

	.wompi-brand-mark-marvox {
		width: 52px;
	}

	.wompi-cvc-shell-marvox input {
		padding-right: 42px !important;
	}

	.wompi-fields-marvox .wompi-expiry-shell-marvox input {
		padding-right: 3px !important;
		padding-left: 3px !important;
	}

	.wompi-cvc-toggle-marvox {
		right: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wompi-fields-marvox *,
	.wompi-fields-marvox *::before,
	.wompi-fields-marvox *::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}