/**
 * MTXE Collect.js inline layout (Cart/Checkout block + classic checkout).
 *
 * Design goals
 *  - Match the visual language of the WooCommerce Cart/Checkout block: rounded
 *    field hosts, subtle borders, clear hover and focus states.
 *  - Keep markup PCI-safe: hosts are empty <div>s; Collect.js mounts an <iframe>
 *    with the real <input> inside. The styles below shape the host (border /
 *    radius / shadow) and the iframe size; the input typography is set via
 *    Collect.js `customCss` (allowed properties only — see
 *    Documentation/Collect JS/advanced-inline-integration.md).
 *  - Avoid float-based WC classic classes inside the block panel; use flex.
 */

.wc-mtxe-blocks-collect {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: 12px;
	color: inherit;
}

.wc-mtxe-blocks-collect > p {
	margin: 0 0 16px;
}

.wc-mtxe-blocks-collect__row {
	margin: 0 0 16px;
}

.wc-mtxe-blocks-collect__row:last-child {
	margin-bottom: 0;
}

.wc-mtxe-blocks-collect__row--split {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.wc-mtxe-blocks-collect__col {
	flex: 1 1 calc( 50% - 8px );
	min-width: 140px;
}

.wc-mtxe-blocks-collect__label {
	display: block;
	margin: 0 0 6px;
	font-size: 0.8125em;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: inherit;
	opacity: 0.65;
}

.mtxe-blocks-collect-field,
.mtxe-collect-field {
	position: relative;
	display: block;
	width: 100%;
	height: 50px;
	padding: 0;
	background: #fff;
	border: 1px solid rgba( 0, 0, 0, 0.18 );
	border-radius: 6px;
	box-sizing: border-box;
	transition: border-color 120ms ease, box-shadow 120ms ease;
	overflow: hidden;
	isolation: isolate;
	pointer-events: auto;
	z-index: 1;
}

.mtxe-blocks-collect-field:hover,
.mtxe-collect-field:hover {
	border-color: rgba( 0, 0, 0, 0.32 );
}

.mtxe-blocks-collect-field:focus-within,
.mtxe-collect-field:focus-within {
	border-color: rgba( 0, 0, 0, 0.85 );
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.85 );
	outline: none;
}

/* Collect.js mounts the iframe directly into the host. We pin its size so the
   field is visible regardless of theme defaults (e.g. iframe { height: 0 }). */
.mtxe-blocks-collect-field > iframe,
.mtxe-collect-field > iframe {
	position: absolute !important;
	inset: 0 !important;
	z-index: 2 !important;
	width: 100% !important;
	height: 100% !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	background: transparent !important;
	pointer-events: auto !important;
	touch-action: manipulation !important;
	color-scheme: light;
}

/* Some production themes add decorative overlays/pseudo-elements to form fields.
   Keep MTXE hosts purely functional so nothing transparent can sit above the
   Collect.js iframe and steal clicks/taps. */
.mtxe-blocks-collect-field::before,
.mtxe-blocks-collect-field::after,
.mtxe-collect-field::before,
.mtxe-collect-field::after {
	content: none !important;
	display: none !important;
	pointer-events: none !important;
}

/* Lightbox variant (block + classic): just spacing for the description copy. */
.wc-mtxe-blocks-collect--lightbox p,
.wc-mtxe-collect--lightbox {
	margin: 8px 0 0;
}

/* Some block themes apply heavy default styles to <p> inside the gateway panel.
   Keep our row container neutral so it does not pick up unintended margins. */
.wc-mtxe-blocks-collect .wc-mtxe-blocks-collect__row p {
	margin: 0;
}