/* Card payment panel at checkout. Uses the store's --oxd-* tokens. */

.oxp-card-brands {
	display: inline-flex;
	gap: 6px;
	margin-left: 10px;
	vertical-align: middle;
}

.oxp-card-brand {
	display: block;
	width: auto;
	height: 22px;
	padding: 3px 6px;
	background: #fff;
	border-radius: 4px;
	box-sizing: border-box;
	object-fit: contain;
}

.oxd-gateway__title:has(.oxp-card-brands) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 0;
}

.oxd-gateway:has(input[value="paystack"]) {
	border-radius: 11px 11px 0 0;
}

.oxp-card {
	margin: -10px 0 0;
	padding: 18px 17px 14px;
	border: 1px solid var(--oxd-line, #262626);
	border-top: 0;
	border-radius: 0 0 11px 11px;
	background: var(--oxd-raised, #0a0a0a);
}

.oxp-card[hidden] { display: none; }

.oxp-card .oxd-field { margin-bottom: 14px; }

.oxp-card__label {
	display: block;
	margin-bottom: 7px;
	font-size: 13px;
	color: var(--oxd-bright, #a3a3a3);
}

/* Shown until the email is in, then replaced by Paystack's card form. */
.oxp-card-wait {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	align-items: center;
	margin: 0 0 12px;
	padding: 18px 16px;
	border: 1px dashed var(--oxd-border, #404040);
	border-radius: 10px;
	color: var(--oxd-bright, #a3a3a3);
	font-size: 13px;
}

.oxp-card-wait[hidden] { display: none; }

.oxp-card-wait svg { flex: none; color: var(--oxd-accent-soft, #a6acfb); }

.oxp-card-wait__retry {
	padding: 6px 12px;
	border: 1px solid var(--oxd-accent, #7165ef);
	border-radius: 999px;
	background: transparent;
	color: var(--oxd-text, #fff);
	font: inherit;
	cursor: pointer;
}

.oxp-card-wait__retry[hidden] { display: none; }

/* Paystack's card form, embedded in the panel. */
.oxp-card-frame { margin: 0 0 12px; }

.oxp-card-frame[hidden] { display: none; }

.oxp-card-frame__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	font-size: 12px;
	color: var(--oxd-bright, #a3a3a3);
}

.oxp-card-frame__secure { display: inline-flex; gap: 6px; align-items: center; }

.oxp-card-frame__body {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
}

.oxp-card-frame__body iframe {
	display: block;
	width: 100%;
	height: 640px;
	border: 0;
	background: #fff;
}

@media (max-width: 560px) {
	.oxp-card-frame__body iframe { height: 700px; }
}

.oxp-card-frame__loading {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	margin: 0;
	color: #525252;
	font-size: 13px;
	pointer-events: none;
}

.oxp-card-frame__loading[hidden] { display: none; }

.oxp-card-frame__help { margin: 8px 0 0; font-size: 12px; color: var(--oxd-muted, #737373); }

.oxp-card-frame__help a { color: var(--oxd-accent-soft, #a6acfb); }

.oxp-card__note {
	margin: 0;
	font-size: 12px;
	line-height: 1.55;
	color: var(--oxd-muted, #737373);
}

.oxp-card__note strong { color: var(--oxd-bright, #a3a3a3); font-weight: 500; }

.oxp-checkout-notice[hidden] { display: none; }