/* Encoded Payment Gateway - customer payment form (scoped to .exp-payment). */
/* Colour variables are set inline from the Branding admin page; the values    */
/* below are fallbacks used if no branding has been saved.                     */

.exp-payment {
	--exp-blue: #102A63;
	--exp-orange: #EC6608;
	--exp-btn-text: #FFFFFF;
	--exp-card-bg: #F1F1F4;
	max-width: 440px;
	margin: 24px auto;
}

.exp-payment__logo {
	display: block;
	max-width: 100%;
	max-height: 72px;
	margin: 0 auto 18px;
}

.exp-payment__intro {
	margin: 0 0 12px;
	color: var(--exp-blue);
	font-size: 0.92em;
}

.exp-payment__form fieldset {
	background: var(--exp-card-bg);
	border: 1px solid rgba(0, 0, 0, 0.10);
	border-radius: 8px;
	padding: 24px;
	margin: 0;
}

.exp-payment__form legend {
	padding: 0 8px;
	color: var(--exp-blue);
	font-weight: 700;
	font-size: 1.1em;
}

.exp-payment__form label {
	display: block;
	margin: 14px 0 5px;
	font-weight: 700;
	color: var(--exp-blue);
}

.exp-payment__form input[type="text"] {
	width: 100%;
	min-height: 42px;
	padding: 9px 10px;
	border: 1px solid #B6C0C6;
	border-radius: 4px;
	font: inherit;
	background: #fff;
	box-sizing: border-box;
}

.exp-payment__form input:focus {
	outline: 3px solid var(--exp-orange);
	outline-offset: 2px;
	border-color: var(--exp-orange);
}

.exp-payment__button {
	display: inline-block;
	margin-top: 18px;
	padding: 11px 20px;
	border: 1px solid var(--exp-blue);
	border-radius: 4px;
	background: var(--exp-blue);
	color: var(--exp-btn-text);
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.exp-payment__button:hover {
	filter: brightness(0.9);
	color: var(--exp-btn-text);
	text-decoration: none;
}

.exp-payment__button--primary {
	background: var(--exp-orange);
	border-color: var(--exp-orange);
}

.exp-payment__back {
	display: inline-block;
	margin: 18px 0 0 12px;
	color: var(--exp-blue);
	font-weight: 700;
	text-decoration: none;
}

.exp-payment__back:hover {
	text-decoration: underline;
}

.exp-payment__footer {
	margin: 16px 0 0;
	text-align: center;
	font-size: 0.9em;
	color: #555;
}

.exp-payment__errors {
	margin-bottom: 14px;
}

.exp-payment__error {
	margin: 0 0 8px;
	padding: 10px 12px;
	background: #fdf1f0;
	border: 1px solid #D4351C;
	border-left: 5px solid #D4351C;
	border-radius: 4px;
	color: #6b1a12;
}

.exp-payment__form p {
	margin: 6px 0;
}

/* Return-from-payment result landing. */
.exp-payment__result fieldset {
	border-left-width: 5px;
}

.exp-payment__result--success fieldset {
	border-left-color: #1a7f37;
}

.exp-payment__result--declined fieldset {
	border-left-color: #D4351C;
}

.exp-payment__result--pending fieldset {
	border-left-color: var(--exp-orange);
}

/* Opt-in "Email a receipt" panel on the Payment Success page */
.exp-payment__receipt { margin-top: 16px; }
.exp-payment__receipt input[type="text"],
.exp-payment__receipt input[type="email"] { width: 100%; box-sizing: border-box; margin: 4px 0 12px; padding: 10px; }
.exp-payment__receipt label { font-weight: 600; display: block; }
.exp-payment__receipt-status { margin-top: 8px; min-height: 1.2em; }

/* Receipt panel refinements */
.exp-payment__receipt-summary { font-weight: 600; margin: 0 0 6px; }
.exp-payment__receipt--sent label,
.exp-payment__receipt--sent input,
.exp-payment__receipt--sent #exp-receipt-send,
.exp-payment__receipt--sent fieldset > p:not(.exp-payment__receipt-summary):not(.exp-payment__receipt-status) { display: none; }
.exp-payment__receipt--sent .exp-payment__receipt-status { font-weight: 600; color: #0E8F4F; }
.exp-payment__restart { margin-top: 16px; }

/* Style fieldset legends as in-card headings rather than border-floating labels */
.exp-payment fieldset { position: relative; }
.exp-payment legend { float: left; width: 100%; padding: 0; margin: 0 0 10px; font-weight: 700; font-size: 1.05em; }
.exp-payment legend + * { clear: both; }

/* Embedded checkout (SAQ A-EP) - Hosted Payment Fields rendered on-site */
.exp-payment__embedded { margin-top: 8px; }
.exp-payment__summary { margin: 0 0 14px; }
.exp-payment__status { margin: 0 0 14px; min-height: 1.2em; }
.exp-payment__field { margin: 0 0 14px; }
.exp-payment__field label { display: block; margin: 0 0 4px; font-weight: 600; }
.exp-payment__hpf-field {
	height: 44px;
	padding: 0 10px;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
	box-sizing: border-box;
}
/* The mounted iframe has no intrinsic height; pin it so each field is a single
   input line rather than the browser default (~150px). */
.exp-payment__hpf-field iframe { display: block; width: 100%; height: 100% !important; border: 0; }
.exp-payment__secure-note { margin: 10px 0 0; font-size: 0.9em; opacity: 0.8; }
.exp-payment__error { color: #b32d2e; }

/* 3-D Secure challenge (embedded checkout) */
.exp-payment__3ds { margin: 14px 0; }
.exp-payment__3ds-frame {
	width: 100%;
	min-height: 400px;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	background: #fff;
}

/* Embedded checkout wallets (Apple Pay / Google Pay) */
.exp-payment__wallets { margin: 0 0 18px; }
.exp-payment__wallet-btn { margin: 0 0 10px; }
.exp-payment__wallet-btn:empty { display: none; }
.exp-payment__or {
	position: relative;
	text-align: center;
	margin: 16px 0 4px;
	color: #6b7280;
	font-size: 0.85em;
}
.exp-payment__or::before {
	content: "";
	position: absolute;
	top: 50%; left: 0; right: 0;
	height: 1px;
	background: #e5e7eb;
}
.exp-payment__or span {
	position: relative;
	background: #fff;
	padding: 0 12px;
}

/* Soft (non-blocking) verification notice on the confirm page */
.exp-payment__notice {
	background: #fff8e1;
	border: 1px solid #f3d98b;
	color: #7a5b00;
	padding: 10px 14px;
	border-radius: 6px;
	margin: 0 0 16px;
	font-size: 0.92em;
}

/* Wallet-specific status line (kept separate from the card status area) */
.exp-payment__wallet-status { margin: 10px 0 0; min-height: 1em; }
.exp-payment__wallet-status:empty { display: none; }

/* Hosted iframe checkout (SAQ-A: Encoded HPP embedded in an iframe) */
.exp-payment__iframe-wrap {
	margin: 0 auto;
	max-width: 760px;
}
.exp-payment__iframe-heading {
	margin: 0 0 .25em;
}
.exp-payment__iframe-summary {
	margin: 0 0 1em;
	font-weight: 600;
}
.exp-payment__iframe {
	display: block;
	width: 100%;
	min-height: 640px;
	border: 0;
	border-radius: 8px;
	background: #fff;
}
.exp-payment__iframe-note {
	margin: .75em 0 0;
	font-size: .85em;
	opacity: .75;
}

/* Hosted iframe result: "completing payment" loader shown while the page
   breaks out of the iframe to the host site's full-page result. */
.exp-result-loader {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1em;
	min-height: 240px;
	padding: 2em 1em;
	text-align: center;
}
.exp-result-loader__spinner {
	width: 44px;
	height: 44px;
	border: 4px solid rgba(0, 0, 0, .12);
	border-top-color: var(--exp-blue, #1a3b8b);
	border-radius: 50%;
	animation: exp-result-spin 0.8s linear infinite;
}
.exp-result-loader__text {
	margin: 0;
	font-weight: 600;
	opacity: .85;
}
@keyframes exp-result-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.exp-result-loader__spinner { animation-duration: 2s; }
}

/* Hosted iframe checkout needs more width/height than the narrow invoice form. */
.exp-payment--wide {
	max-width: 820px;
}
.exp-payment--wide .exp-payment__iframe {
	min-height: 760px;
}