/**
 * Edly Cybersource Gateway — checkout styles.
 *
 * @package edly-woocommerce-cybersource
 */

.edly-cybs-form {
	margin: 10px 0;
}

.edly-cybs-row {
	margin-bottom: 14px;
}

.edly-cybs-row label {
	display: block;
	margin-bottom: 4px;
	font-size: 0.9em;
}

.edly-cybs-row--split {
	display: flex;
	gap: 14px;
}

.edly-cybs-row--split .edly-cybs-col {
	flex: 1 1 0;
}

/* The Microform iframe mounts inside these containers. Give them an input look
   and pin the height to 44px so the injected iframe can't grow the field. */
.edly-cybs-field {
	display: block;
	width: 100%;
	height: 44px;
	padding: 0 12px !important;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #c7c7c7;
	border-radius: 4px;
	overflow: hidden;
}

/* Cybersource injects its secure <iframe> here — make it fill the 44px field. */
.edly-cybs-field iframe {
	display: block;
	width: 100% !important;
	height: 44px !important;
	border: 0;
	margin: 0;
}

input.edly-cybs-field {
	font-size: 16px;
	line-height: 42px; /* vertically center text in the 44px box (minus borders) */
}

.edly-cybs-field.flex-microform-focused {
	border-color: #3a7afe;
	box-shadow: 0 0 0 1px #3a7afe;
}

.edly-cybs-field.flex-microform-invalid {
	border-color: #d63638;
}

.edly-cybs-errors {
	color: #d63638;
	font-size: 0.9em;
	margin-top: 6px;
	min-height: 1em;
}

/* 3DS step-up challenge overlay. */
.edly-cybs-3ds-container {
	position: static;
}

.edly-cybs-3ds-container.edly-cybs-3ds-active {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 0, 0, 0, 0.55 );
	padding: 16px;
}

.edly-cybs-3ds-container.edly-cybs-3ds-active .edly-cybs-stepup-iframe {
	max-width: 480px;
	background: #fff;
	border: 0;
	border-radius: 6px;
	box-shadow: 0 8px 40px rgba( 0, 0, 0, 0.3 );
}