/* ═══════════════════════════════════════════════════════════
   JIG OTP — 10 Premium Login Page Themes
   ═══════════════════════════════════════════════════════════ */

.jig-otp-root {
	position: relative;
	--jig-otp-muted: color-mix(in srgb, var(--jig-otp-text) 55%, transparent);
	--jig-otp-border: color-mix(in srgb, var(--jig-otp-text) 12%, transparent);
	--jig-otp-shadow: 0 25px 50px -12px color-mix(in srgb, var(--jig-otp-text) 18%, transparent);
	font-family: var(--jig-otp-font, system-ui, sans-serif);
	background: var(--jig-otp-bg);
	color: var(--jig-otp-text);
}

.jig-otp-card {
	max-width: var(--jig-otp-card-width, 420px);
	background: var(--jig-otp-card);
	color: var(--jig-otp-text);
}

/* ─── Theme: Aurora ─────────────────────────────────────── */
.jig-otp-theme-aurora {
	background:
		radial-gradient(ellipse 90% 70% at 50% -20%, color-mix(in srgb, var(--jig-otp-primary) 22%, transparent), transparent),
		var(--jig-otp-bg);
}

/* ─── Theme: Minimal ────────────────────────────────────── */
.jig-otp-theme-minimal .jig-otp-card {
	box-shadow: none;
	border: 1px solid var(--jig-otp-border);
}
.jig-otp-theme-minimal .jig-otp-btn-primary {
	box-shadow: none;
}

/* ─── Theme: Glass ──────────────────────────────────────── */
.jig-otp-theme-glass {
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--jig-otp-primary) 40%, #000), color-mix(in srgb, var(--jig-otp-accent) 30%, #000)),
		var(--jig-otp-bg);
}
.jig-otp-theme-glass .jig-otp-card {
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.jig-otp-theme-glass .jig-otp-phone-wrap,
.jig-otp-theme-glass .jig-otp-digit {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.15);
}

/* ─── Theme: Midnight ───────────────────────────────────── */
.jig-otp-theme-midnight {
	background:
		radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--jig-otp-primary) 12%, transparent), transparent 40%),
		var(--jig-otp-bg);
}
.jig-otp-theme-midnight .jig-otp-card {
	border: 1px solid color-mix(in srgb, var(--jig-otp-primary) 25%, transparent);
}
.jig-otp-theme-midnight .jig-otp-logo { color: var(--jig-otp-primary); }

/* ─── Theme: Sunset ─────────────────────────────────────── */
.jig-otp-theme-sunset {
	background:
		linear-gradient(160deg, color-mix(in srgb, var(--jig-otp-primary) 15%, var(--jig-otp-bg)), var(--jig-otp-bg) 50%, color-mix(in srgb, var(--jig-otp-accent) 12%, var(--jig-otp-bg)));
}

/* ─── Theme: Ocean ──────────────────────────────────────── */
.jig-otp-theme-ocean {
	background:
		radial-gradient(ellipse at bottom, color-mix(in srgb, var(--jig-otp-accent) 18%, transparent), transparent 60%),
		var(--jig-otp-bg);
}
.jig-otp-theme-ocean .jig-otp-card {
	border-top: 3px solid var(--jig-otp-primary);
}

/* ─── Theme: Corporate ──────────────────────────────────── */
.jig-otp-theme-corporate {
	background: var(--jig-otp-bg);
	padding: 0;
}
.jig-otp-theme-corporate::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	width: min(42%, 520px);
	background: linear-gradient(160deg, var(--jig-otp-primary), color-mix(in srgb, var(--jig-otp-accent) 60%, var(--jig-otp-primary)));
	z-index: 0;
}
.jig-otp-theme-corporate .jig-otp-card {
	position: relative;
	z-index: 1;
	margin-left: auto;
	margin-right: max(24px, 5vw);
	box-shadow: -8px 0 40px rgba(0, 0, 0, 0.08);
}
@media (max-width: 768px) {
	.jig-otp-theme-corporate::before { width: 100%; height: 120px; inset: 0 0 auto; }
	.jig-otp-theme-corporate .jig-otp-card { margin: 100px auto 24px; }
}

/* ─── Theme: Neon ───────────────────────────────────────── */
.jig-otp-theme-neon {
	background: var(--jig-otp-bg);
}
.jig-otp-theme-neon .jig-otp-card {
	border: 1px solid color-mix(in srgb, var(--jig-otp-primary) 35%, transparent);
	box-shadow: 0 0 40px color-mix(in srgb, var(--jig-otp-primary) 15%, transparent);
}
.jig-otp-theme-neon .jig-otp-digit:focus {
	box-shadow: 0 0 12px var(--jig-otp-primary);
}

/* ─── Theme: Soft ───────────────────────────────────────── */
.jig-otp-theme-soft {
	background:
		radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--jig-otp-accent) 12%, transparent), transparent 50%),
		radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--jig-otp-primary) 12%, transparent), transparent 50%),
		var(--jig-otp-bg);
}
.jig-otp-theme-soft .jig-otp-card {
	border: none;
	box-shadow: 0 20px 60px color-mix(in srgb, var(--jig-otp-primary) 12%, transparent);
}

/* ─── Theme: Bold ───────────────────────────────────────── */
.jig-otp-theme-bold .jig-otp-card {
	border: 2px solid var(--jig-otp-primary);
}
.jig-otp-theme-bold .jig-otp-title {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1.35rem;
}
.jig-otp-theme-bold .jig-otp-btn-primary {
	color: #000;
	font-weight: 800;
}

/* ═══ Digit styles ═══════════════════════════════════════ */
.jig-otp-root.jig-otp-digit-underline .jig-otp-digit {
	border: none;
	border-bottom: 3px solid var(--jig-otp-border);
	border-radius: 0;
	background: transparent;
}
.jig-otp-root.jig-otp-digit-pill .jig-otp-digit {
	border-radius: 999px;
}
.jig-otp-root.jig-otp-digit-circle .jig-otp-digit {
	border-radius: 50%;
	width: clamp(44px, 12vw, 56px);
	height: clamp(44px, 12vw, 56px);
}

/* ═══ Button styles ══════════════════════════════════════ */
.jig-otp-root.jig-otp-btn-style-solid .jig-otp-btn-primary {
	background: var(--jig-otp-primary);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--jig-otp-primary) 30%, transparent);
}
.jig-otp-root.jig-otp-btn-style-outline .jig-otp-btn-primary {
	background: transparent;
	color: var(--jig-otp-primary);
	border: 2px solid var(--jig-otp-primary);
	box-shadow: none;
}
.jig-otp-root.jig-otp-btn-style-soft .jig-otp-btn-primary {
	background: color-mix(in srgb, var(--jig-otp-primary) 18%, transparent);
	color: var(--jig-otp-primary);
	box-shadow: none;
}
.jig-otp-root.jig-otp-btn-style-gradient .jig-otp-btn-primary {
	background: linear-gradient(135deg, var(--jig-otp-primary), var(--jig-otp-accent));
	color: #fff;
}

/* Admin live preview scale */
.jig-otp-theme-live {
	min-height: auto;
	padding: 16px;
	border-radius: 12px;
	transform-origin: top center;
}
.jig-otp-theme-live .jig-otp-card {
	padding: 20px 18px;
	animation: none;
}
.jig-otp-theme-live .jig-otp-title { font-size: 1.1rem; }
.jig-otp-theme-live .jig-otp-btn { min-height: 42px; font-size: 0.875rem; }