/**
 * Card field and package-protection styling, shared by the Blocks and classic checkouts.
 *
 * The two checkouts render the same class names on purpose, so the card form cannot look
 * like a different plugin depending on which one a store uses.
 *
 * ---------------------------------------------------------------------------
 * TWO THINGS HERE ARE DELIBERATE AND LOOK LIKE MISTAKES
 * ---------------------------------------------------------------------------
 * 1. DEFAULTS LIVE IN THE var() FALLBACK, NOT IN A DECLARATION BLOCK. Declaring
 *    `--peptides-border` on .peptides-card-fields would mean a theme setting the same
 *    property on the same selector loses whenever this stylesheet is enqueued later --
 *    which it usually is. With the default in the fallback there is no competing
 *    declaration at all, so a theme setting the property anywhere above the field wins.
 *
 * 2. THE INPUT SELECTOR IS `input.peptides-card-fields__input`, NOT THE BARE CLASS. A
 *    class is specificity (0,1,0) and a theme's `input[type="text"]` is (0,1,1) -- so the
 *    bare class LOSES to any theme that styles its text inputs by attribute, which is
 *    most of them. The element-plus-class form is (0,2,1) and holds.
 *
 * Themeable properties: --peptides-gap, --peptides-radius, --peptides-border,
 * --peptides-border-focus, --peptides-field-bg, --peptides-error.
 */

.peptides-card-fields {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --peptides-gap, 12px );
	margin-top: var( --peptides-gap, 12px );
}

/* The name and the card number need the full width; expiry and security code share the row below. */
.peptides-card-fields > .peptides-card-fields__field--holder,
.peptides-card-fields > .peptides-card-fields__field--number {
	grid-column: 1 / -1;
}

.peptides-card-fields > .peptides-card-fields__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.peptides-card-fields .peptides-card-fields__label {
	display: block;
	margin: 0;
	font-size: 0.8125em;
	line-height: 1.3;
	font-weight: normal;
	opacity: 0.75;
}

/* Positioning context for the brand badge that sits inside the number field. */
.peptides-card-fields .peptides-card-fields__control {
	position: relative;
	display: block;
	min-width: 0;
}

/**
 * The detected card brand.
 *
 * Text rather than a logo sprite: no image assets to ship, nothing to load, and it
 * survives any theme's colours. Pointer events are off so it cannot swallow a click
 * meant for the field underneath it.
 */
.peptides-card-fields .peptides-card-fields__brand {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY( -50% );
	pointer-events: none;
	font-size: 0.6875em;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0.65;
}

.peptides-card-fields .peptides-card-fields__brand[hidden] {
	display: none;
}

/*
 * Room for the badge, so a 19-digit number cannot run underneath it. Reserved on the
 * number field only -- the expiry and security code have nothing to make room for.
 */
.peptides-card-fields
	.peptides-card-fields__field--number
	input.peptides-card-fields__input {
	padding-right: 92px;
}

.peptides-card-fields input.peptides-card-fields__input {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: var( --peptides-field-padding, 12px 14px );
	font-family: inherit;
	/*
	 * 16px, not inherited: iOS Safari zooms the whole page when a focused input is under
	 * 16px, which on a checkout pushes the Place Order button off screen.
	 */
	font-size: 16px;
	line-height: 1.4;
	color: inherit;
	background: var( --peptides-field-bg, #fff );
	border: 1px solid var( --peptides-border, rgba( 0, 0, 0, 0.28 ) );
	border-radius: var( --peptides-radius, 6px );
	/* Digits at a fixed advance, so a long card number does not jitter as it is typed. */
	font-variant-numeric: tabular-nums;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
}

.peptides-card-fields input.peptides-card-fields__input:focus,
.peptides-card-fields input.peptides-card-fields__input:focus-visible {
	outline: 2px solid var( --peptides-border-focus, currentColor );
	outline-offset: -2px;
	border-color: var( --peptides-border-focus, currentColor );
}

.peptides-card-fields input.peptides-card-fields__input::placeholder {
	color: inherit;
	opacity: 0.45;
}

.peptides-card-fields input.peptides-card-fields__input:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.peptides-card-fields .peptides-card-fields__error {
	grid-column: 1 / -1;
	margin: 0;
	color: var( --peptides-error, #cc1818 );
	font-size: 0.875em;
	line-height: 1.4;
}

.peptides-card-fields .peptides-card-fields__description {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 0.875em;
	line-height: 1.4;
	opacity: 0.8;
}

/* Stack once expiry and security code can no longer sit side by side. */
@media ( max-width: 480px ) {
	.peptides-card-fields {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/**
 * The Package Protection/Insurance opt-out.
 *
 * Sits next to the fee line it controls: the order summary on the Blocks checkout, the
 * totals table on the classic one.
 */
.peptides-protection {
	display: block;
	font-weight: normal;
	text-align: left;
}

.peptides-protection .peptides-protection__label,
.peptides-protection .peptides-protection__fallback {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	cursor: pointer;
	line-height: 1.4;
	font-weight: normal;
}

.peptides-protection input[type='checkbox'] {
	/* Nudged down to sit on the label's first line rather than above it. */
	margin: 0.15em 0 0;
	flex: 0 0 auto;
}

.peptides-protection input[type='checkbox']:disabled {
	cursor: progress;
}

.peptides-protection .peptides-protection__description {
	display: block;
	margin: 4px 0 0;
	/* Indented to the label text, not the checkbox, so the two read as one block. */
	padding-left: 24px;
	font-size: 0.8125em;
	line-height: 1.4;
	opacity: 0.7;
}

/* A control, not a total: the classic totals table styles every row as a figure. */
.peptides-protection-row th {
	font-weight: normal;
	padding-top: 12px;
	padding-bottom: 12px;
}