/* ============================================================
 * OTP Modal — Standalone AF Pages
 * Convention: .cmp-af-asia-{component}__{element}--{modifier}
 * All selectors scoped under .cmp-adaptiveform-container
 * to prevent site-level bleeding on standalone AF pages.
 * ============================================================ */

.cmp-adaptiveform-container [data-otp-body="true"] {
	margin: auto;
	background: var(--color-neutral-light-light-3);
	padding: var(--spacing-6) var(--spacing-4);
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	gap: var(--spacing-4);
	flex-wrap: wrap;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* DIG-1659: Typography alignment with Figma specs */
.cmp-adaptiveform-container [data-otp-body="true"] h2 {
	font-family: var(--font-sans, "Manulife JH Sans Optimized", sans-serif);
	font-size: 22px;
	font-weight: 600;
	color: #282B3E;
}

.cmp-adaptiveform-container [data-otp-body="true"] gds-otp-input {
	--otp-gap: var(--spacing-2, 8px);
}

/* DIG-1659: OTP field label */
.cmp-adaptiveform-container [data-otp-body="true"] gds-otp-input::part(label),
.cmp-adaptiveform-container [data-otp-body="true"] .gds-OtpInput-Label {
	font-family: var(--font-sans, "Manulife JH Sans Optimized", sans-serif);
	font-size: 18px;
	font-weight: 600;
	color: #282B3E;
}

/* DIG-1659: Resend helper text */
.cmp-adaptiveform-container [data-otp-body="true"] .otp-resend-label .font-demibold,
.cmp-adaptiveform-container [data-otp-body="true"] > .flex > .font-demibold {
	font-family: var(--font-sans, "Manulife JH Sans Optimized", sans-serif);
	font-size: 16px;
	font-weight: 600;
	color: #282B3E;
}

/* DIG-1659: Resend link text */
.cmp-adaptiveform-container [data-otp-body="true"] #otp-resend-link-label {
	font-family: var(--font-sans, "Manulife JH Sans Optimized", sans-serif);
	font-size: 16px;
	font-weight: 400;
}
.cmp-adaptiveform-container [data-otp-body="true"] #otp-resend-link-label:not([disabled="true"]) {
	color: #06874E;
}
.cmp-adaptiveform-container [data-otp-body="true"] #otp-resend-link-label[disabled="true"] {
	color: #5E6073;
}

/* DIG-1658: Phone icon color */
.cmp-adaptiveform-container [data-otp-body="true"] .text-dark-1-green {
	color: #06874E;
}

@media (min-width: 520px) {
	.cmp-adaptiveform-container [data-otp-body="true"] {
		flex-direction: row;
	}
}

@media (min-width: 768px) {
	.cmp-adaptiveform-container [data-otp-body="true"] {
		height: auto;
		padding: var(--spacing-10);
		max-width: 45rem;
	}
}

/* ============================================================
 * Phase 3 — BEM classes replacing inline style assignments
 * Applied via JS classList.add() in _asiaOtpApplyTitleStyles
 * ============================================================ */

/* OTP body container — font inheritance base */
.cmp-af-asia-otp__body {
	font-family: ManulifeJHSans-Optimized, 'Manulife JH Sans', Helvetica, Arial, sans-serif;
}

/* OTP heading (h2) — Heading/Small/Demibold 22px 600 */
.cmp-af-asia-otp__heading {
	font-family: ManulifeJHSans-Optimized, 'Manulife JH Sans', Helvetica, Arial, sans-serif;
	font-size: 22px;
	line-height: var(--line-height-6xl);
	font-weight: 600;
	color: #282B3E;
}

/* OTP input host — Heading/Extra Small/Demibold 18px 600 */
.cmp-af-asia-otp__input {
	font-family: ManulifeJHSans-Optimized, 'Manulife JH Sans', Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 600;
}

/* Resend helper text — Body/Base/Demibold 16px 600 */
.cmp-af-asia-otp__helper-text {
	font-family: ManulifeJHSans-Optimized, 'Manulife JH Sans', Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #282B3E;
}

/* Resend link (gds-text-link) — Body/Base/Regular 16px 400 */
.cmp-af-asia-otp__resend-link {
	font-family: ManulifeJHSans-Optimized, 'Manulife JH Sans', Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
}

/* Paragraph text inside OTP body */
.cmp-af-asia-otp__paragraph {
	font-family: ManulifeJHSans-Optimized, 'Manulife JH Sans', Helvetica, Arial, sans-serif;
}

/* Timer / resend label */
.cmp-af-asia-otp__timer {
	font-family: ManulifeJHSans-Optimized, 'Manulife JH Sans', Helvetica, Arial, sans-serif;
}

/* Custom OTP validation error (DIG-1653) — displayed via JS toggle */
.cmp-af-asia-otp__custom-error {
	font-family: 'Manulife JH Sans Optimized', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: #DB1F00;
	margin-top: 8px;
	display: none;
	align-items: center;
}