/* =============================================================================
   IzeChat — One-time-code entry ("iridescent tiles"), shared by every OTP screen:
   two-factor / unusual sign-in, email verify, phone (SMS) confirm, SMS password
   reset, phone signup, settings phone verification, settings 2FA and account
   activation.

   Structure (built by js/ize-otp.js around ONE real <input>):

     .ize-otp2                 the iridescent "film" well  (data-state = idle |
     │                         verifying | success | error)
     ├─ input.ize-otp2__input  the real field — transparent, covers the row, so
     │                         SMS autofill, paste, long-press and backspace stay
     │                         native (six separate inputs break one-time-code)
     ├─ .ize-otp2__row         flex row — owns the error SHAKE + complete shimmer
     │  └─ .ize-otp2__slot     owns the ENTRANCE (deal) animation only
     │     └─ .ize-otp2__face  the solid, high-contrast tile — lift/state colours
     │        ├─ .ize-otp2__char   the digit — owns the typing POP
     │        └─ .ize-otp2__caret  blinking caret on the active tile
     └─ .ize-otp2__status      caption under the tiles (verifying / ok / error)

   Each animation lives on its own element ON PURPOSE: two animations on one
   element replace each other, and a `fill: both` entrance would pin transform
   and kill the lift transition (see memory: verify-deck shake/deal clash).

   Theme: body.dark_active is the only source of truth (container.phtml renders
   it server-side and re-toggles it live).
   ========================================================================== */

.ize-otp2{
	/* light tokens */
	--izo-tile:#ffffff;
	--izo-tile-hi:#ffffff;
	--izo-tile-rim:rgba(15,32,58,.07);
	--izo-tile-shadow:0 1px 1px rgba(15,32,58,.05),0 8px 18px -10px rgba(15,32,58,.30);
	--izo-ink:#0c1a30;                 /* ~16:1 on the tile */
	--izo-ink-2:#4b5672;
	--izo-dot:rgba(12,26,48,.16);
	--izo-brand:#0280b4;
	--izo-navy:#1f4366;
	--izo-ring:linear-gradient(135deg,#0280b4 0%,#29d3e6 35%,#9b8cff 68%,#f08bd0 100%);
	--izo-film:linear-gradient(118deg,#bfe9ff 0%,#d9d0ff 20%,#ffd6ef 38%,#fff1cc 55%,#c9f5e4 72%,#b9e4ff 88%,#d9d0ff 100%);
	--izo-veil:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.14));
	--izo-film-rim:rgba(255,255,255,.75);
	--izo-glow:0 22px 44px -26px rgba(2,128,180,.55);
	--izo-ok:#15803d;
	--izo-ok-face:#ecfdf3;
	--izo-ok-rim:rgba(22,163,74,.45);
	--izo-bad:#d1173f;
	--izo-bad-face:#fff1f4;
	--izo-bad-rim:rgba(225,29,72,.50);

	/* geometry — deliberately airy: wide gaps, soft radius, no hard border */
	--izo-gap:10px;
	--izo-w:52px;
	--izo-h:62px;
	--izo-r:18px;
	--izo-pad:14px;
	--izo-ease:cubic-bezier(.2,.75,.25,1);
	--izo-spring:cubic-bezier(.2,.9,.3,1.35);

	position:relative;
	display:block;
	box-sizing:border-box;
	width:100%;
	max-width:calc(var(--n,6) * var(--izo-w) + (var(--n,6) - 1) * var(--izo-gap) + 2 * var(--izo-pad));
	margin:6px auto 4px;
	padding:var(--izo-pad);
	border-radius:26px;
	isolation:isolate;
	direction:ltr;
	text-align:center;
	-webkit-tap-highlight-color:transparent;
}

body.dark_active .ize-otp2{
	--izo-tile:#101a33;
	--izo-tile-hi:#15213f;
	--izo-tile-rim:rgba(160,180,240,.14);
	--izo-tile-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 22px -12px rgba(0,0,0,.8);
	--izo-ink:#f3f6ff;                 /* ~15:1 on the tile */
	--izo-ink-2:#aab6da;
	--izo-dot:rgba(220,230,255,.22);
	--izo-brand:#3fb6e8;
	--izo-ring:linear-gradient(135deg,#2fb7ea 0%,#5ee3f0 35%,#a99bff 68%,#f59bd8 100%);
	--izo-film:linear-gradient(118deg,#0e4f73 0%,#3b3a8f 20%,#6d2f6e 38%,#6b5524 55%,#1d5e52 72%,#124a78 88%,#3b3a8f 100%);
	--izo-veil:linear-gradient(180deg,rgba(9,14,30,.38),rgba(9,14,30,.58));
	--izo-film-rim:rgba(170,190,255,.16);
	--izo-glow:0 24px 48px -26px rgba(47,183,234,.45);
	--izo-ok:#4ade80;
	--izo-ok-face:#0f2a1f;
	--izo-ok-rim:rgba(74,222,128,.45);
	--izo-bad:#ff7a93;
	--izo-bad-face:#2c1220;
	--izo-bad-rim:rgba(255,122,147,.5);
}

/* -------------------------------------------------------- iridescent film */
.ize-otp2::before,
.ize-otp2::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.ize-otp2::before{
	z-index:-2;
	background:var(--izo-film);
	background-size:280% 280%;
	animation:izoFilm 14s ease-in-out infinite alternate;
}
.ize-otp2::after{
	z-index:-1;
	background:
		radial-gradient(120% 70% at 18% 0%,rgba(255,255,255,.55),transparent 60%),
		var(--izo-veil);
	box-shadow:inset 0 0 0 1px var(--izo-film-rim),var(--izo-glow);
}
body.dark_active .ize-otp2::after{
	background:
		radial-gradient(120% 70% at 18% 0%,rgba(255,255,255,.10),transparent 60%),
		var(--izo-veil);
}
@keyframes izoFilm{
	0%{background-position:0% 30%}
	50%{background-position:70% 60%}
	100%{background-position:100% 40%}
}
/* the film speeds up and brightens while the code is being checked */
.ize-otp2[data-state="verifying"]::before{animation-duration:3.2s}

/* -------------------------------------------------------- the real input */
.ize-otp2 .ize-otp2__input{
	position:absolute; z-index:5;
	inset:0; width:100%; height:100%;
	margin:0; padding:0; border:0; outline:none; border-radius:inherit;
	background:transparent;
	color:transparent; caret-color:transparent; -webkit-text-fill-color:transparent;
	font-size:16px;                 /* >=16px: iOS must not zoom on focus */
	letter-spacing:0; text-indent:-9999px;
	box-shadow:none; -webkit-appearance:none; appearance:none;
	cursor:text;
}
.ize-otp2 .ize-otp2__input::selection{background:transparent}
.ize-otp2 .ize-otp2__input:-webkit-autofill{-webkit-box-shadow:0 0 0 999px transparent inset;transition:background-color 9999s}
.ize-otp2.is-disabled .ize-otp2__input{cursor:not-allowed}

/* -------------------------------------------------------------- the row */
.ize-otp2__row{
	position:relative; z-index:1;
	display:flex; justify-content:center; gap:var(--izo-gap);
	pointer-events:none;            /* every tap lands on the real input */
}
.ize-otp2__row.is-shake{animation:izoShake .44s cubic-bezier(.36,.07,.19,.97)}
@keyframes izoShake{
	0%,100%{transform:translateX(0)}
	15%{transform:translateX(-7px)} 30%{transform:translateX(6px)}
	45%{transform:translateX(-5px)} 60%{transform:translateX(4px)}
	75%{transform:translateX(-2px)}
}
/* a single light sweep across the row the moment the last digit lands */
.ize-otp2__row::after{
	content:""; position:absolute; top:-6px; bottom:-6px; left:0; width:38%;
	pointer-events:none; opacity:0; border-radius:20px;
	background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
	mix-blend-mode:soft-light;
}
body.dark_active .ize-otp2__row::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);mix-blend-mode:screen}
.ize-otp2.is-complete .ize-otp2__row::after{animation:izoSweep .7s var(--izo-ease)}
@keyframes izoSweep{0%{opacity:0;transform:translateX(-60%)}25%{opacity:1}100%{opacity:0;transform:translateX(280%)}}

/* ------------------------------------------------------------- the slots */
.ize-otp2__slot{
	position:relative; display:block;
	flex:1 1 0; min-width:0; max-width:var(--izo-w); height:var(--izo-h);
	/* the "deal": pivot far below the row so one rotation gives spread + arc */
	transform-origin:50% 320%;
	animation:izoDeal .56s var(--izo-ease) both;
	animation-delay:calc(var(--i,0) * 45ms);
}
@keyframes izoDeal{
	from{opacity:0;transform:translateX(calc(var(--t,0) * -150%)) rotate(calc(var(--t,0) * -12deg)) scale(.92)}
	to{opacity:1;transform:none}
}

.ize-otp2__face{
	position:absolute; inset:0;
	display:flex; align-items:center; justify-content:center;
	border-radius:var(--izo-r);
	background:var(--izo-tile);
	box-shadow:0 0 0 1px var(--izo-tile-rim),var(--izo-tile-shadow);
	transition:
		transform .26s var(--izo-spring),
		background-color .28s ease,
		box-shadow .28s ease;
	transition-delay:0s;
}
/* empty tile: a quiet dot, so the length is readable before typing */
.ize-otp2__face::after{
	content:""; position:absolute; left:50%; top:50%;
	width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%;
	background:var(--izo-dot);
	transition:opacity .18s ease, transform .22s var(--izo-ease);
}
.ize-otp2__slot.is-filled .ize-otp2__face::after,
.ize-otp2__slot.is-active .ize-otp2__face::after{opacity:0;transform:scale(.3)}

/* the iridescent ring (gradient border via mask) */
.ize-otp2__face::before{
	content:""; position:absolute; inset:-2px; border-radius:calc(var(--izo-r) + 2px);
	padding:2px; background:var(--izo-ring);
	-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;
	        mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
	        mask-composite:exclude;
	opacity:0; transition:opacity .22s ease;
}

/* filled — a confident tile with a brand underline */
.ize-otp2__slot.is-filled .ize-otp2__face{
	background:var(--izo-tile-hi);
	box-shadow:0 0 0 1px var(--izo-tile-rim),inset 0 -3px 0 var(--izo-brand),var(--izo-tile-shadow);
}

/* active (focused, next to type) — lifted with the iridescent ring */
.ize-otp2.is-focused .ize-otp2__slot.is-active .ize-otp2__face{
	transform:translateY(-3px);
	background:var(--izo-tile-hi);
	box-shadow:0 0 0 1px transparent,0 14px 26px -12px rgba(2,128,180,.55);
}
.ize-otp2.is-focused .ize-otp2__slot.is-active .ize-otp2__face::before{opacity:1}

/* --------------------------------------------------------- digit + caret */
.ize-otp2__char{
	display:block;
	font:700 27px/1 "Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	/* proportional figures: each digit is centred in a fixed tile anyway, and the
	   tabular "1" in Plus Jakarta Sans carries a slab foot that reads as a typo */
	font-variant-numeric:proportional-nums;
	color:var(--izo-ink);
	letter-spacing:0;
	transition:color .25s ease;
}
.ize-otp2__char.is-pop{animation:izoPop .34s var(--izo-spring)}
@keyframes izoPop{
	0%{opacity:0;transform:translateY(9px) scale(.55);filter:blur(3px)}
	60%{opacity:1;transform:translateY(-2px) scale(1.12);filter:blur(0)}
	100%{transform:none}
}
/* the tile itself gives a tiny press when a digit lands / is erased */
.ize-otp2__slot.is-hit .ize-otp2__face{animation:izoHit .3s var(--izo-ease)}
@keyframes izoHit{0%{transform:scale(.93)}100%{transform:scale(1)}}
.ize-otp2__slot.is-erase .ize-otp2__face{animation:izoErase .24s var(--izo-ease)}
@keyframes izoErase{0%{transform:scale(1.04)}100%{transform:scale(1)}}

.ize-otp2__caret{
	position:absolute; left:50%; top:50%;
	width:2px; height:26px; margin:-13px 0 0 -1px; border-radius:2px;
	background:var(--izo-brand); opacity:0;
}
.ize-otp2.is-focused .ize-otp2__slot.is-active:not(.is-filled) .ize-otp2__caret{animation:izoBlink 1.05s steps(1) infinite}
@keyframes izoBlink{0%,100%{opacity:1}50%{opacity:0}}

/* ------------------------------------------------------------- verifying */
.ize-otp2[data-state="verifying"] .ize-otp2__face{
	animation:izoWave 1.1s ease-in-out infinite;
	animation-delay:calc(var(--i,0) * 90ms);
}
.ize-otp2[data-state="verifying"] .ize-otp2__face::before{opacity:.85}
@keyframes izoWave{0%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}

/* --------------------------------------------------------------- success */
.ize-otp2[data-state="success"] .ize-otp2__face{
	background:var(--izo-ok-face);
	box-shadow:0 0 0 1.5px var(--izo-ok-rim),0 10px 22px -12px rgba(22,163,74,.5);
	transform:translateY(-2px);
	transition-delay:calc(var(--i,0) * 55ms);
}
.ize-otp2[data-state="success"] .ize-otp2__char{color:var(--izo-ok);transition-delay:calc(var(--i,0) * 55ms)}
.ize-otp2[data-state="success"] .ize-otp2__face::before{opacity:0}

/* ----------------------------------------------------------------- error */
.ize-otp2[data-state="error"] .ize-otp2__face{
	background:var(--izo-bad-face);
	box-shadow:0 0 0 1.5px var(--izo-bad-rim),0 10px 22px -14px rgba(225,29,72,.5);
}
.ize-otp2[data-state="error"] .ize-otp2__char{color:var(--izo-bad)}
.ize-otp2[data-state="error"] .ize-otp2__face::before{opacity:0}

.ize-otp2.is-disabled .ize-otp2__face{opacity:.5}

/* ------------------------------------------------------------ the status */
.ize-otp2__status{
	position:relative; z-index:1;
	display:flex; align-items:center; justify-content:center; gap:8px;
	min-height:18px; margin:12px 0 -2px;
	font:600 12.5px/1.3 "Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	color:var(--izo-ink-2);
	pointer-events:none;
}
.ize-otp2__status:empty{display:none}
.ize-otp2__status svg{width:16px;height:16px;flex:none}
.ize-otp2__status .izo-spin{animation:izoSpin 1s linear infinite}
.ize-otp2__status .izo-spin circle{fill:none;stroke-width:2.6;stroke-linecap:round}
.ize-otp2__status .izo-spin .t{stroke:var(--izo-dot)}
.ize-otp2__status .izo-spin .s{stroke:var(--izo-brand);stroke-dasharray:14 60}
@keyframes izoSpin{to{transform:rotate(360deg)}}
.ize-otp2[data-state="success"] .ize-otp2__status{color:var(--izo-ok)}
.ize-otp2[data-state="error"] .ize-otp2__status{color:var(--izo-bad)}
.ize-otp2__status .izo-tick path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;animation:izoDraw .4s .05s ease forwards}
@keyframes izoDraw{to{stroke-dashoffset:0}}
.ize-otp2__status > span{animation:izoRise .25s var(--izo-ease)}
@keyframes izoRise{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

.ize-otp2__sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- sizes */
@media (max-width:420px){
	.ize-otp2{--izo-gap:8px;--izo-h:56px;--izo-r:16px;--izo-pad:11px;border-radius:22px}
	.ize-otp2__char{font-size:24px}
}
@media (max-width:340px){
	.ize-otp2{--izo-gap:6px;--izo-h:50px;--izo-r:14px;--izo-pad:9px}
	.ize-otp2__char{font-size:21px}
}
/* 7-digit (Authy) rows need a touch less per tile */
.ize-otp2[data-length="7"]{--izo-w:48px}

/* ======================================================= screen helpers
   Shared by the full-screen OTP pages (welcome/*). Optional — the tiles above
   work on their own inside any modal or settings card. */
.ize-otp-badge{
	position:relative; width:60px; height:60px; margin:2px auto 16px;
	display:flex; align-items:center; justify-content:center;
	border-radius:20px; color:#fff;
	background:linear-gradient(140deg,#0280b4 0%,#1f4366 100%);
	box-shadow:0 16px 30px -14px rgba(2,128,180,.65);
	animation:izoBadge .6s var(--izo-spring,cubic-bezier(.2,.9,.3,1.35)) both;
}
.ize-otp-badge svg{width:28px;height:28px}
.ize-otp-badge::before{ /* iridescent rim */
	content:""; position:absolute; inset:-3px; border-radius:23px; padding:2px;
	background:linear-gradient(135deg,#29d3e6,#9b8cff,#f08bd0,#ffd58a,#29d3e6);
	background-size:200% 200%; animation:izoFilm 6s ease-in-out infinite alternate;
	-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;
	        mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
	        mask-composite:exclude;
}
@keyframes izoBadge{from{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}

.ize-otp-resend{
	display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px;
	margin:14px 0 16px; font-size:12.5px; line-height:1.4; color:var(--ize-ink-3,#666c85);
}
.ize-otp-resend b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ize-ink-2,#4b5672)}
.ize-otp-link{
	background:none; border:0; padding:4px 6px; border-radius:8px; cursor:pointer;
	font:inherit; font-weight:700; color:var(--ize-accent-ink,#1f4366);
}
.ize-otp-link:disabled{color:var(--ize-ink-3,#666c85);cursor:default}
.ize-otp-link:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.ize-otp-note{font-size:12.5px;line-height:1.5;margin:10px 0 0;min-height:0}
.ize-otp-note:empty{display:none}
.ize-otp-note.is-ok{color:#15803d}
.ize-otp-note.is-bad{color:#d1173f}
body.dark_active .ize-otp-note.is-ok{color:#4ade80}
body.dark_active .ize-otp-note.is-bad{color:#ff7a93}

/* settings → two-factor: the Google code block sits beside the QR code */
.ize-2fa-code{flex:1 1 280px;min-width:0;max-width:420px;text-align:center}
.ize-2fa-code__label{margin:0 0 4px;font-weight:600;font-size:14px}

/* ---------------------------------------------------------- less motion */
@media (prefers-reduced-motion:reduce){
	.ize-otp2::before,
	.ize-otp-badge,.ize-otp-badge::before,
	.ize-otp2__slot,
	.ize-otp2__char.is-pop,
	.ize-otp2__slot.is-hit .ize-otp2__face,
	.ize-otp2__slot.is-erase .ize-otp2__face,
	.ize-otp2[data-state="verifying"] .ize-otp2__face,
	.ize-otp2.is-complete .ize-otp2__row::after,
	.ize-otp2__status > span{animation:none!important}
	.ize-otp2__row.is-shake{animation-duration:.01ms}
	.ize-otp2__face{transition-duration:.01ms!important}
	.ize-otp2__status .izo-tick path{stroke-dashoffset:0;animation:none}
}