/**
 * Aha! Toys checkout add-ons — mobile-first. Inherits theme tokens where available.
 */

.aha-otp {
	margin-block-start: var(--wp--preset--spacing--40, 1rem);
	padding: 1rem;
	border: 1px solid var(--wp--preset--color--border, #e2e2e2);
	border-radius: 12px;
	background: var(--wp--preset--color--surface, #fafafa);
}

.aha-otp__lead {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
	color: var(--wp--preset--color--muted, #555);
}

.aha-otp__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-end: 0.5rem;
}

.aha-otp__code {
	flex: 1 1 100%;
	min-height: 44px;
	font-size: 16px; /* prevents iOS zoom-on-focus */
	padding: 0 0.75rem;
	letter-spacing: 0.25em;
	border: 1px solid var(--wp--preset--color--border, #c9c9c9);
	border-radius: 8px;
}

.aha-otp__btn {
	flex: 1 1 100%;
	min-height: 44px;
	font-size: 16px;
	cursor: pointer;
}

.aha-otp__verified {
	margin: 0.25rem 0 0;
	font-weight: 600;
	color: #1a7f37;
}

.aha-otp__msg {
	margin: 0.25rem 0 0;
	font-size: 0.9rem;
	line-height: 1.4;
	word-break: break-word;
}

.aha-otp__msg--error { color: #b32d2e; }
.aha-otp__msg--success { color: #1a7f37; }
.aha-otp__msg--info { color: #555; }

.aha-pin-hint {
	margin: 0.35rem 0 0;
	font-size: 0.9rem;
	line-height: 1.4;
	word-break: break-word;
}

.aha-pin-hint--ok { color: #1a7f37; }
.aha-pin-hint--bad { color: #b32d2e; }

.aha-upi-desc {
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted, #555);
}

/* Thank-you / email panel */
.aha-order-panel {
	margin-block-start: 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--wp--preset--color--border, #e2e2e2);
	border-radius: 12px;
	background: var(--wp--preset--color--surface, #fafafa);
}

.aha-order-panel__title {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
}

.aha-order-panel__facts {
	margin: 0.75rem 0;
	padding-inline-start: 1.1rem;
}

.aha-order-panel__qr {
	max-width: 100%;
	height: auto;
	width: 220px;
	display: block;
	margin: 0.75rem auto;
}

.aha-order-panel__pickup,
.aha-order-panel__upi {
	margin-block-start: 0.75rem;
}

.aha-order-panel__wa {
	display: inline-block;
	margin-block-start: 1rem;
	min-height: 44px;
	line-height: 44px;
	padding: 0 1.25rem;
	border-radius: 999px;
	background: #25d366;
	color: #062e13;
	font-weight: 600;
	text-decoration: none;
}

/* From ~480px up, let OTP controls sit inline. */
@media ( min-width: 480px ) {
	.aha-otp__code { flex: 1 1 auto; }
	.aha-otp__btn { flex: 0 0 auto; padding-inline: 1.25rem; }
}

/* OTP block title inside the order-summary slot. */
.aha-otp__title {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	font-weight: 600;
}