/**
 * TapPay TPDirect card fields on the storefront (Classic and Blocks share the same markup).
 *
 * TPDirect mounts each field as a cross-origin iframe inside the element it is given, and that
 * iframe carries TapPay's own `width:100%; height:100%; float:left`. A container with no box of its
 * own therefore collapses to zero height while the iframe keeps the browser's default 150px — the
 * three fields end up unbounded and borderless, and the shopper has no card input to speak of.
 *
 * So the container owns the box. The look is not invented here: the element also carries
 * WooCommerce's own `input-text` class, so the active theme paints the border, background and radius
 * exactly as it paints every other checkout input. This file only fixes the geometry the SDK needs.
 */

.csq-payment-tappay-card {
	margin-bottom: 1em;
}

.csq-payment-tappay-card > .csq-payment-tpfield + .csq-payment-tpfield {
	margin-top: 0.5em;
}

.csq-payment-tpfield {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 2.75em;
	padding: 0;
	overflow: hidden;
}

/* Absolute children are laid out against the PADDING box, so the container's own padding cannot
   inset the iframe — the inset has to be on the iframe itself. */
.csq-payment-tpfield iframe {
	position: absolute;
	top: 0;
	left: 0.75em;
	width: calc(100% - 1.5em);
	height: 100%;
	border: 0;
}