/* Lucian UX/UI Prompt #026 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#026 */
/* Campo de código de 6 dígitos (confirmação do e-mail no cadastro). Tudo preso à classe .u026.
   As cores vêm do tema da página: style.css (entrar, com claro/escuro por data-tema) ou checkout.html (só claro). */
.u026 {
  --u026-surface: var(--cartao, var(--superficie, #ffffff));
  --u026-ink: var(--texto, var(--tinta, #16151b));
  --u026-ink-2: var(--texto, var(--tinta-2, #57535f));
  --u026-ink-3: var(--suave, var(--tinta-2, #8e8a97));
  --u026-line-2: var(--borda, var(--linha, rgba(22, 21, 27, .17)));
  --u026-accent: var(--primaria, var(--petroleo, #6a57f2));
  --u026-accent-soft: var(--primaria-suave, rgba(67, 148, 129, .14));
  --u026-mint: var(--ok, #119c72);
  --u026-danger: var(--perigo, #d93a55);
  --u026-ease: cubic-bezier(.2, .8, .2, 1);
  --u026-spring: cubic-bezier(.34, 1.45, .64, 1);
  position: relative; width: 100%; max-width: 350px; min-height: 250px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  color: var(--u026-ink); -webkit-font-smoothing: antialiased; letter-spacing: -.01em; box-sizing: border-box;
}
.u026 *, .u026 *::before, .u026 *::after { box-sizing: border-box; }
.u026 :is(button, input) { font: inherit; color: inherit; }
.u026 [hidden] { display: none !important; }
.u026-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, #5b8cff, #8b6cff); box-shadow: 0 14px 26px -14px rgba(91, 108, 255, .8); transition: background .5s var(--u026-ease); }
.u026-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.u026.is-ok .u026-ic { background: linear-gradient(140deg, #2fd8a8, #119c72); }
.u026-t { margin: 16px 0 0; font-size: 20px; font-weight: 760; letter-spacing: -.03em; }
.u026-s { margin: 6px 0 20px; font-size: 15px; color: var(--u026-ink-3); overflow-wrap: anywhere; }
.u026-s b { color: var(--u026-ink-2); font-weight: 650; }
.u026-row { position: relative; display: flex; gap: 8px; }
.u026-row i.sep { width: 10px; align-self: center; height: 2px; border-radius: 2px; background: var(--u026-line-2); }
.u026-c { position: relative; width: 46px; height: 58px; border-radius: 14px; background: var(--u026-surface); box-shadow: inset 0 0 0 1.5px var(--u026-line-2);
  display: grid; place-items: center; overflow: hidden; font-size: 26px; font-weight: 760; font-variant-numeric: tabular-nums;
  transition: box-shadow .25s var(--u026-ease), background-color .4s var(--u026-ease), color .4s, transform .45s var(--u026-spring); }
.u026-c span { display: block; animation: u026-in .4s var(--u026-spring); }
@keyframes u026-in { from { transform: translateY(70%); opacity: 0; } }
.u026-c.cur { box-shadow: inset 0 0 0 2px var(--u026-accent), 0 0 0 4px var(--u026-accent-soft); }
.u026-c.cur::after { content: ""; position: absolute; left: 50%; top: 16px; bottom: 16px; width: 2px; margin-left: -1px; border-radius: 1px;
  background: var(--u026-accent); animation: u026-blink 1s steps(1) infinite; }
.u026-c.cur.has::after { display: none; }
@keyframes u026-blink { 50% { opacity: 0; } }
.u026.is-check .u026-c { animation: u026-wave .5s var(--u026-ease); animation-delay: calc(var(--i) * 60ms); }
@keyframes u026-wave { 40% { transform: translateY(-8px); } }
.u026.is-ok .u026-c { background: color-mix(in srgb, var(--u026-mint) 14%, var(--u026-surface)); box-shadow: inset 0 0 0 2px var(--u026-mint);
  color: var(--u026-mint); transition-delay: calc(var(--i) * 50ms); }
.u026.is-bad .u026-row { animation: u026-shake .45s var(--u026-ease); }
.u026.is-bad .u026-c { box-shadow: inset 0 0 0 2px var(--u026-danger); color: var(--u026-danger); }
@keyframes u026-shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
.u026-real { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; font-size: 16px; cursor: text;
  caret-color: transparent; color: transparent; background: transparent; }
.u026-real:focus-visible { outline: none; }
.u026-real:disabled { cursor: progress; }
.u026-msg { min-height: 22px; margin: 16px 0 0; font-size: 15px; font-weight: 650; color: var(--u026-ink-3); transition: color .3s var(--u026-ease); }
.u026.is-ok .u026-msg { color: var(--u026-mint); }
.u026.is-bad .u026-msg { color: var(--u026-danger); }
.u026-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 10px; }
.u026-link { border: 0; background: none; padding: 4px 2px; font-size: 15px; font-weight: 650; color: var(--u026-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.u026-link:disabled { color: var(--u026-ink-3); cursor: default; text-decoration: none; }
.u026-link:focus-visible { outline: 2px solid var(--u026-accent); outline-offset: 3px; border-radius: 4px; }
.u026-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 380px) { .u026-row { gap: 5px; } .u026-c { width: 40px; height: 52px; font-size: 23px; } }
@media (prefers-reduced-motion: reduce) {
  .u026, .u026 *, .u026 *::before, .u026 *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- Confirmação do e-mail no campo (email-confirmado.js): ✓/✕ no campo e pop-up com o código ---------- */
.uce-campo { position: relative; display: block; width: 100%; }
.uce-campo > input { width: 100%; padding-right: 42px; }
.uce-marca { position: absolute; right: 12px; top: 50%; transform: translateY(-50%) scale(.6); width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; opacity: 0; transition: opacity .2s, transform .3s cubic-bezier(.34, 1.45, .64, 1); pointer-events: none; }
.uce-campo.is-ok .uce-marca { opacity: 1; transform: translateY(-50%) scale(1); background: var(--ok, #119c72); }
.uce-campo.is-x .uce-marca { opacity: 1; transform: translateY(-50%) scale(1); background: var(--perigo, #d93a55); }
.uce-campo.is-ok > input { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ok, #119c72) 55%, transparent); }
.uce-campo.is-x > input { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--perigo, #d93a55) 60%, transparent); }
.uce-aviso { display: block; min-height: 0; font-size: 14px; font-weight: 600; line-height: 1.4; margin-top: -4px; }
.uce-aviso:empty { display: none; }
.uce-aviso.is-ok { color: var(--ok, #119c72); }
.uce-aviso.is-x { color: var(--perigo, #d93a55); }
.uce-ancora { position: relative; height: 0; z-index: 30; grid-column: 1 / -1; }
.uce-aviso { grid-column: 1 / -1; }
.uce-pop { position: absolute; left: 0; top: 4px; width: 100%; max-width: 420px; padding: 22px 20px 16px; border-radius: 18px;
  background: var(--cartao, var(--superficie, #fff)); color: var(--texto, var(--tinta, #16151b));
  box-shadow: 0 24px 48px -16px rgba(16, 40, 26, .35), 0 0 0 1px var(--borda, rgba(22, 21, 27, .1));
  display: grid; justify-items: center; text-align: center; gap: 8px; animation: uce-entra .28s cubic-bezier(.2, .8, .2, 1) both; }
.uce-pop::before { content: ""; position: absolute; top: -7px; left: 28px; width: 14px; height: 14px; transform: rotate(45deg);
  background: inherit; box-shadow: -1px -1px 0 0 var(--borda, rgba(22, 21, 27, .1)); }
.uce-pop[hidden] { display: none; }
.uce-pop .u026 { min-height: 0; max-width: 100%; }
.uce-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--primaria-suave, rgba(35, 112, 70, .1)); color: var(--primaria, #237046); }
.uce-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.uce-t { margin: 4px 0 0; font-size: 19px; font-weight: 800; }
.uce-s { margin: 0; font-size: 15px; color: var(--suave, #57535f); line-height: 1.45; word-break: break-word; }
.uce-s b { color: var(--texto, var(--tinta, #16151b)); }
.uce-btn { margin-top: 8px; width: 100%; min-height: 48px; border: 0; border-radius: 14px; background: var(--primaria, #237046); color: #fff; font: inherit; font-size: 16px; font-weight: 750; cursor: pointer; }
.uce-btn:disabled { opacity: .7; cursor: progress; }
.uce-btn:focus-visible, .uce-link:focus-visible { outline: 2px solid var(--primaria, #237046); outline-offset: 2px; }
.uce-msg { margin: 0; min-height: 0; font-size: 14px; color: var(--perigo, #d93a55); }
.uce-msg:empty { display: none; }
.uce-msg a { color: inherit; font-weight: 800; }
.uce-link { border: 0; background: none; padding: 6px; font: inherit; font-size: 14px; font-weight: 650; color: var(--suave, #57535f); cursor: pointer; }
@keyframes uce-entra { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .uce-pop { animation: none; } .uce-marca { transition: none; } }