/**
 * @author IURCO - Prisma SA
 * @copyright Copyright © 2022 IURCO and PRISMA. All rights reserved.
 *
 * Minimal, layout-only stylesheet for the Payway payment method as rendered
 * in the WooCommerce Cart & Checkout Block.
 *
 * This does NOT restyle inputs/selects/labels/notices — those adopt WC
 * Blocks' own reusable component classes (`wc-block-components-text-input`,
 * `wc-blocks-components-select`, `wc-block-components-notice-banner`, etc.),
 * already themed by the active theme's checkout styling. The only thing
 * that needs custom CSS here is grouping the card fields into one row, a
 * layout this specific field set needs that WC Blocks' native classes don't
 * provide out of the box.
 *
 * Intentionally separate from `assets/css/style.css`, which targets the
 * classic (non-Blocks) checkout only.
 */

.payway-gateway-blocks-card-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-top: 16px;
}

/*
 * Core sets `margin-top: 12px` on every `.wc-block-components-text-input`
 * unconditionally, and only zeroes it out via
 * `.wc-block-components-checkout-step .wc-block-components-text-input:first-of-type`
 * (verified in `wc-block-library-style.css` on the live server — NOT a bare
 * `.wc-block-components-text-input:first-child{margin-top:0}`, and scoped
 * to an ancestor `.wc-block-components-checkout-step`, which is the
 * "Payment" checkout step our form is rendered inside). That rule reaches
 * the first field of our card row (the first-of-type among its own
 * siblings) but not the other three, which is what desyncs them
 * vertically. We zero the margin on all of them here and let the row
 * itself carry the spacing instead, which sidesteps the selector
 * regardless of exactly which core rule ends up matching.
 */
.payway-gateway-blocks-card-row > .wc-block-components-text-input {
	margin-top: 0;
	flex: 1 1 160px;
}

.payway-gateway-blocks-card-row > .payway-gateway-blocks-field--cvv {
	flex: 0 1 100px;
}

/*
 * The active theme (Woodmart) ships its own rules for WC Blocks fields in
 * `woodmart/css/parts/wp-blocks-cart-checkout.css`:
 *
 *   :is(div.wc-block-checkout,div.wc-block-cart)
 *     .wc-block-components-text-input>label{line-height:1;top:21px}
 *
 * That selector scores (0,0,2,2) — higher than core's own floating-label
 * rule `.wc-block-components-text-input.is-active label{top:6px}` at
 * (0,0,2,1). So the theme pins the label at 21px even in the active state,
 * while core still pushes the input's text down to `padding-top: 24px`,
 * and the label ends up overlapping the typed value. Restoring core's
 * intent needs (0,0,3,1), which is what scoping to our own form buys us.
 * The `scale(.82)` still comes from core — the theme doesn't touch
 * `transform`, so only `top` has to be reasserted here.
 */
.wc-block-payway-gateway-cc-form .wc-block-components-text-input.is-active > label {
	top: 6px;
}

/*
 * `<fieldset>` has a UA-stylesheet `min-inline-size: min-content`, so it
 * refuses to shrink below its content's minimum width. Combined with the
 * `white-space: nowrap` that core sets on `.wc-block-components-text-input`
 * (which the help paragraph inherits, since the native component renders
 * it inside that wrapper), the long help text became one unbreakable line
 * and dragged the whole form wider than the checkout column — which is why
 * the order summary sidebar ended up overlapping the payment form.
 */
.wc-block-payway-gateway-cc-form {
	min-width: 0;
	max-width: 100%;
}

/*
 * Core defines no CSS at all for `.wc-block-components-text-input__help`
 * (confirmed by searching the full `wc-block-library-style.css` on the
 * live server — no rule targets that class). Added preventively rather
 * than "only if it turns out to be needed" as the plan suggested, because
 * that verification step requires a live re-check in a browser this
 * environment doesn't have, and the overlap was already reported as a
 * live symptom by the user. Scoped tightly to our own form so it can't
 * affect anything else.
 */
.wc-block-payway-gateway-cc-form .wc-block-components-text-input__help {
	margin-top: 4px;
	/* Undoes the inherited `white-space: nowrap` — see the fieldset rule
	   above for why an unbreakable help line broke the whole layout. */
	white-space: normal;
	line-height: 1.4;
}