/* ============================================================
   ARC Payments — checkout field styling.

   Deliberately minimal and shares the ARC checkout's tokens, so the
   payment column looks like the two beside it whether or not the ARC
   Membership Checkout plugin is also active.
   ============================================================ */

.arc-pay-fields .arc-pay-field {
	margin: 0 0 16px;
}

.arc-pay-fields label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	line-height: 1.3;
	color: #212326;
}

/* Collect.js replaces this with an iframe, which has no intrinsic height —
   without an explicit one the field collapses to nothing and looks broken.

   This box IS the field: same border, radius and height as the text inputs
   beside it. The input inside the iframe is made borderless and transparent
   from the inside (customCss in collect.js), so there is exactly one box. */
.arc-pay-fields .arc-pay-input {
	box-sizing: border-box;
	height: 38px;
	padding: 0;
	border: 1px solid var(--arc-border, #E5E7E9);
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.arc-pay-fields .arc-pay-input iframe {
	display: block;
	width: 100% !important;
	height: 36px !important;
	border: 0;
}

/* The iframe takes focus, and :focus-within sees it. */
.arc-pay-fields .arc-pay-input:focus-within {
	border-color: var(--arc-accent, #B9151C);
	box-shadow: 0 0 0 3px rgba(185, 21, 28, .08);
}

.arc-pay-fields .arc-pay-input.is-invalid {
	border-color: var(--arc-accent, #B9151C);
}

/* One message per field, under the field it is about. */
.arc-pay-fields .arc-pay-field-error {
	margin: 6px 0 0 !important;
	font-size: 12.5px;
	line-height: 1.4;
	color: #B9151C;
}

.arc-pay-fields .arc-pay-field-error[hidden] {
	display: none;
}

/* Whole-form problems (a token that could not be read, a declined card). */
.arc-pay-fields .arc-pay-error {
	margin: 0 0 16px !important;
	padding: 10px 12px;
	border: 1px solid #F1C4C4;
	border-radius: 6px;
	background: #FDF3F3;
	font-size: 13px;
	line-height: 1.5;
	color: #8A2424;
}

.arc-pay-fields .arc-pay-error[hidden] {
	display: none;
}
.arc-pay-manual {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 14px;
	padding: 12px 14px;
	border: 1px solid #E5E7E9;
	border-radius: 8px;
	background: #F2F4F7;
	font-size: 13px;
	line-height: 20px;
	font-weight: 500;
	color: #0C1116;
}

/* An information mark, drawn in CSS so it needs no image. */
.arc-pay-manual::before {
	content: "";
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	background: no-repeat center / 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
}

#pmpro_btn-submit.is-busy {
	opacity: .6;
	cursor: progress;
}

.arc-pay-plan {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
}