/**
 * Tilled checkout styles.
 *
 * Minimal CSS for the Tilled.js iframe containers and validation states.
 * Intentionally light-touch so the active WooCommerce theme controls the
 * overall look and feel. Override via your theme stylesheet or by enqueuing
 * a later stylesheet.
 *
 * @package WC_Tilled_Gateway
 * @since   1.0.0
 */

/* ---------------------------------------------------------------
   Iframe Containers
   --------------------------------------------------------------- */

/**
 * Each Tilled.js iframe is injected into one of these container divs.
 * They need an explicit height because iframes won't auto-size from the
 * parent. The padding and border mirror WooCommerce's default input styling.
 */
.tilled-field-container {
	height: 40px;
	padding: 6px 12px;
	/*
	 * Theme-adaptive by default: a transparent fill inherits the surrounding
	 * surface (works on light or dark themes) and a neutral semi-transparent
	 * border reads on both. tilled-checkout.js sets --wc-tilled-field-bg to the
	 * theme's own input background when it can sample one, so the field matches
	 * native inputs. Themes can override any of these custom properties.
	 */
	border: 1px solid var( --wc-tilled-field-border, rgba( 127, 127, 127, 0.4 ) );
	border-radius: 3px;
	background-color: var( --wc-tilled-field-bg, transparent );
	box-sizing: border-box;
	transition: border-color 0.2s ease;
}

/**
 * Ensure the Tilled iframe fills the container.
 */
.tilled-field-container iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ---------------------------------------------------------------
   Focus / Hover States
   --------------------------------------------------------------- */

.tilled-field-container:hover {
	border-color: var( --wc-tilled-field-border-hover, rgba( 127, 127, 127, 0.7 ) );
}

.tilled-field-container:focus-within {
	border-color: var( --wc-tilled-field-border-focus, currentColor );
}

/* ---------------------------------------------------------------
   Validation States
   --------------------------------------------------------------- */

.tilled-field-container.tilled-field-valid {
	border-color: var( --wc-tilled-valid, #4ab866 );
}

.tilled-field-container.tilled-field-invalid {
	border-color: var( --wc-tilled-invalid, #cc1818 );
}

/* ---------------------------------------------------------------
   Error Messages
   --------------------------------------------------------------- */

.tilled-field-error {
	display: none;
	color: var( --wc-tilled-invalid, #cc1818 );
	font-size: 0.85em;
	line-height: 1.4;
	margin-top: 4px;
}

/* ---------------------------------------------------------------
   Description
   --------------------------------------------------------------- */

.wc-tilled-description {
	margin-bottom: 1em;
}

/* ---------------------------------------------------------------
   Labels
   --------------------------------------------------------------- */

/**
 * Let the field labels inherit the surrounding surface's text color instead of
 * a theme's single global label color, which cannot be legible on both light
 * and dark surfaces at once. A theme can force a specific accessible value with
 * the --wc-tilled-label-color custom property.
 *
 * Targeted by the field's `for` attribute as well as the form wrapper, so it
 * still applies when a theme overrides the payment-fields template and drops the
 * .wc-tilled-cc-form class (the `for` bindings are kept for accessibility).
 */
.wc-tilled-cc-form label,
label[for^="tilled-card-"] {
	color: var( --wc-tilled-label-color, inherit );
}

/* ---------------------------------------------------------------
   Fieldset Reset
   --------------------------------------------------------------- */

.wc-tilled-cc-form {
	padding: 0;
	border: 0;
	margin: 0;
}