/* ==========================================================================
   AquaBlue — OTP + email login / signup (My Account)
   Built on the active "AquaBlue Water Station" design system: reuses the
   site's own --ab-* tokens, .glass-card and .ab-btn-primary/.ab-btn-glass
   primitives from main.css. Only new, page-specific rules live here.
   ========================================================================== */

.aq-otp-auth {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: min(78vh, 760px);
	padding: 2.5rem 1rem;
	isolation: isolate;
	overflow: hidden;
}

/* ---------- decorative water ripples (background only, transform-only) ---------- */
.aq-otp-decor {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
.aq-otp-ripple {
	position: absolute;
	border-radius: 50%;
	background: var(--ab-gradient-soft);
	filter: blur(2px);
}
.aq-otp-ripple--1 { width: 420px; height: 420px; top: -140px; left: -120px; animation: aq-otp-drift 22s ease-in-out infinite; }
.aq-otp-ripple--2 { width: 320px; height: 320px; bottom: -160px; right: -100px; animation: aq-otp-drift 18s ease-in-out infinite reverse; }
.aq-otp-ripple--3 { width: 180px; height: 180px; top: 55%; right: 8%; opacity: 0.6; animation: aq-otp-drift 14s ease-in-out infinite; }
@keyframes aq-otp-drift {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50% { transform: translate3d(24px, -18px, 0) scale(1.06); }
}

.aq-otp-card {
	position: relative;
	width: 100%;
	max-width: 420px;
	padding: 2.75rem 2.25rem 2.25rem;
	text-align: center;
}

.aq-otp-mark { width: 56px; height: 56px; margin: 0 auto 1.25rem; animation: aq-otp-float 6s ease-in-out infinite; }
.aq-otp-mark svg { width: 100%; height: 100%; }
@keyframes aq-otp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.aq-otp-title { font-size: clamp(1.35rem, 2.4vw, 1.6rem); margin-bottom: 0.5rem; }
.aq-otp-subtitle { font-size: 0.95rem; color: var(--ab-text-muted); margin-bottom: 1.75rem; }
.aq-otp-subtitle strong { color: var(--ab-text); font-weight: 600; }

.aq-otp-form { text-align: left; }
.aq-otp-label { display: block; font-family: var(--ab-font-display); font-weight: 600; font-size: 0.82rem; color: var(--ab-text); margin: 0 0 0.4rem; }
.aq-otp-input {
	width: 100%; font-family: var(--ab-font-body); font-size: 1rem; padding: 0.85rem 1rem;
	border-radius: var(--ab-radius-sm); border: 1px solid var(--ab-border); background: var(--ab-bg-alt);
	color: var(--ab-text); transition: border-color var(--ab-transition), box-shadow var(--ab-transition); margin-bottom: 1.25rem;
}
.aq-otp-input:focus { outline: none; border-color: var(--ab-primary); box-shadow: 0 0 0 4px rgba(0, 174, 239, 0.15); }

.aq-otp-phone-field {
	display: flex; align-items: stretch; border-radius: var(--ab-radius-sm); border: 1px solid var(--ab-border);
	background: var(--ab-bg-alt); overflow: hidden; margin-bottom: 1.25rem; transition: border-color var(--ab-transition), box-shadow var(--ab-transition);
}
.aq-otp-phone-field:focus-within { border-color: var(--ab-primary); box-shadow: 0 0 0 4px rgba(0, 174, 239, 0.15); }
.aq-otp-phone-prefix { display: flex; align-items: center; padding: 0 0.9rem; font-family: var(--ab-font-display); font-weight: 600; color: var(--ab-text-muted); background: rgba(0, 60, 100, 0.05); border-right: 1px solid var(--ab-border); }
.aq-otp-phone-field .aq-otp-input { border: none; margin-bottom: 0; border-radius: 0; box-shadow: none !important; }

.aq-otp-submit { width: 100%; position: relative; }
.aq-otp-spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; animation: aq-otp-spin 0.7s linear infinite; }
.aq-otp-submit[aria-busy="true"] .aq-otp-spinner { display: inline-block; }
.aq-otp-submit[aria-busy="true"] .aq-otp-btn-label { opacity: 0.85; }
@keyframes aq-otp-spin { to { transform: rotate(360deg); } }

.aq-otp-fineprint { margin: 1.25rem 0 0; font-size: 0.78rem; color: var(--ab-text-muted); }

.aq-otp-back {
	position: absolute; top: 1.5rem; left: 1.5rem; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--ab-radius-pill); border: 1px solid var(--ab-glass-border); background: var(--ab-glass-bg); color: var(--ab-text); cursor: pointer; transition: transform var(--ab-transition);
}
.aq-otp-back:hover { transform: translateX(-2px); }
.aq-otp-back svg { width: 16px; height: 16px; }

.aq-otp-digits { display: flex; gap: 0.6rem; justify-content: center; margin-bottom: 1.5rem; }
.aq-otp-digit {
	width: 44px; height: 52px; text-align: center; font-family: var(--ab-font-display); font-size: 1.3rem; font-weight: 700;
	border-radius: var(--ab-radius-sm); border: 1px solid var(--ab-border); background: var(--ab-bg-alt); color: var(--ab-text);
	transition: border-color var(--ab-transition), box-shadow var(--ab-transition), transform 0.15s ease;
}
.aq-otp-digit:focus { outline: none; border-color: var(--ab-primary); box-shadow: 0 0 0 4px rgba(0, 174, 239, 0.15); transform: translateY(-1px); }
.aq-otp-digit.is-filled { border-color: var(--ab-primary-dark); }
.aq-otp-digit.is-error { border-color: #e0554f; animation: aq-otp-shake 0.4s ease; }
@keyframes aq-otp-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.aq-otp-resend { text-align: center; font-size: 0.85rem; color: var(--ab-text-muted); margin: 0; }
.aq-otp-resend-btn { background: none; border: none; padding: 0; margin-left: 0.35rem; font-family: var(--ab-font-body); font-weight: 600; font-size: 0.85rem; color: var(--ab-primary); cursor: pointer; }
.aq-otp-resend-btn:hover { color: var(--ab-primary-dark); text-decoration: underline; }
.aq-otp-resend-btn:disabled { color: var(--ab-text-muted); cursor: not-allowed; text-decoration: none; }
.aq-otp-cooldown { margin-left: 0.35rem; font-variant-numeric: tabular-nums; }

.aq-otp-message { font-size: 0.85rem; font-weight: 600; padding: 0.7rem 1rem; border-radius: var(--ab-radius-sm); margin-bottom: 1.25rem; background: rgba(224, 85, 79, 0.1); color: #c33d38; border: 1px solid rgba(224, 85, 79, 0.25); }
.aq-otp-message[data-tone="info"] { background: rgba(0, 174, 239, 0.1); color: var(--ab-primary-dark); border-color: rgba(0, 174, 239, 0.25); }

.aq-otp-step--success { padding-top: 0.5rem; }
.aq-otp-check {
	width: 64px; height: 64px; margin: 0 auto 1.25rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: var(--ab-gradient-hero); color: #fff; box-shadow: 0 12px 28px rgba(0, 174, 239, 0.35); animation: aq-otp-pop 0.4s cubic-bezier(.34,1.56,.64,1);
}
.aq-otp-check svg { width: 28px; height: 28px; }
@keyframes aq-otp-pop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

@media (max-width: 480px) {
	.aq-otp-card { padding: 2.25rem 1.5rem 1.75rem; }
	.aq-otp-digit { width: 38px; height: 48px; font-size: 1.15rem; }
	.aq-otp-digits { gap: 0.45rem; }
}

@media (prefers-reduced-motion: reduce) {
	.aq-otp-ripple, .aq-otp-mark, .aq-otp-check, .aq-otp-spinner { animation: none !important; }
}

/* ---------- method switch links (mobile <-> email) ---------- */
.aq-otp-switch { text-align: center; margin: 0 0 0.5rem; }
.aq-otp-link { background: none; border: none; padding: 0; font-family: var(--ab-font-body); font-weight: 600; font-size: 0.85rem; color: var(--ab-primary); cursor: pointer; }
.aq-otp-link:hover { color: var(--ab-primary-dark); text-decoration: underline; }

/* ---------- info notice banner (e.g. "add a mobile number") ---------- */
.aq-otp-notice {
	font-size: 0.85rem; font-weight: 500; line-height: 1.5; text-align: left; padding: 0.85rem 1rem;
	border-radius: var(--ab-radius-sm); margin-bottom: 1.5rem; background: rgba(0, 174, 239, 0.1); color: var(--ab-primary-dark); border: 1px solid rgba(0, 174, 239, 0.25);
}

/* ---------- add-email offer step ---------- */
.aq-otp-offer-actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; }
.aq-otp-check--sm { width: 48px; height: 48px; }
.aq-otp-check--sm svg { width: 22px; height: 22px; }