/* INLOGGNINGENS GLAS — order OTP. Självhostade typsnitt (OFL, licenserna bredvid),
   därefter köpta index.css och GlassyOtp.css, sist Lesters tillägg. Bakgrunden är
   Lesters egen (fond.css): bilden, färgfiltret och vinjetten är borta ur index.css-delen. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/logga-in/fil?namn=plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/logga-in/fil?namn=plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url('/logga-in/fil?namn=space-grotesk-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url('/logga-in/fil?namn=space-grotesk-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: dark;
  color: #ffffff;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
}

#root {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Ultra-Premium Glassmorphic OTP Verification — Sky Blue edition */

:root {
  --sky: #38bdf8;
  --sky-bright: #7dd3fc;
  --sky-ice: #e0f2fe;
  --sky-deep: #0ea5e9;
  --sky-glow: rgba(56, 189, 248, 0.45);
  --sky-glow-soft: rgba(56, 189, 248, 0.18);
  --text-white: #ffffff;
  --text-dim: rgba(225, 240, 255, 0.68);
  --text-muted: rgba(225, 240, 255, 0.42);
  --success: #22c55e;
  --success-bright: #4ade80;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Central Stage containing the sleek card and satellite chips */
/* Static hover area that owns the card's size; the stage inside it tilts */
.tilt-zone {
  position: relative;
  width: 580px;
  max-width: 96vw;
  height: 530px;
  margin: auto;
  flex-shrink: 0;
}

.login-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Floating Corner Chips with frosted glass physics.
   No CSS filter here — a filtered ancestor would switch off the backdrop blur. */
.chip-container {
  position: absolute;
  width: 88px;
  height: 88px;
  pointer-events: none;
  z-index: 4;
  will-change: transform;
}

.chip-tl {
  top: -2px;
  left: -2px;
}

.chip-br {
  bottom: -2px;
  right: -2px;
}

.chip-inner-floater {
  position: relative;
  width: 100%;
  height: 100%;
}

.float-tl {
  animation: floatTL 6s ease-in-out infinite alternate;
}

.float-br {
  animation: floatBR 6s ease-in-out infinite alternate 1.2s;
}

/* Freeze the idle float in place while travelling — no snap back to 0 */
.chip-traveling .chip-inner-floater {
  animation-play-state: paused;
}

@keyframes floatTL {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-3px, -3px, 0);
  }
}

@keyframes floatBR {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(3px, 3px, 0);
  }
}

.chip-body {
  position: absolute;
  inset: 0;
}

.chip-body--flipped {
  transform: rotate(180deg);
}

/* Shadow layer: 228/88 of the chip, centred on it, with a chip-shaped hole */
.chip-fx {
  position: absolute;
  left: -79.545%;
  top: -79.545%;
  width: 259.09%;
  height: 259.09%;
  pointer-events: none;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* The chip's own box inside the 228-unit fx layer (70/228, 88/228) */
.chip-shadow {
  position: absolute;
  left: 30.702%;
  top: 30.702%;
  width: 38.596%;
  height: 38.596%;
  filter: blur(16px);
}

.chip-shape {
  position: absolute;
  inset: 0;
  clip-path: url(#chip-clip);
  background: rgba(0, 10, 25, 0.75);
}

.chip-glow {
  position: absolute;
  inset: 0;
  filter: blur(14px);
  pointer-events: none;
}

.chip-shape--glow {
  background: #38bdf8;
}

.chip-blur-panel {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(30px) saturate(180%) brightness(1.06);
  -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.06);
  clip-path: url(#chip-clip);
  background: linear-gradient(135deg,
      rgba(224, 242, 254, 0.24) 0%,
      rgba(20, 44, 66, 0.42) 50%,
      rgba(8, 20, 34, 0.6) 100%);
}

.chip-svg-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Specular sweep across each chip, starting from the contact seam */
.chip-sheen {
  position: absolute;
  inset: 0;
  clip-path: url(#chip-clip);
  overflow: hidden;
  pointer-events: none;
}

.chip-sheen-band {
  position: absolute;
  inset: -50%;
  background: linear-gradient(135deg,
      transparent 40%,
      rgba(186, 230, 253, 0.18) 46%,
      rgba(255, 255, 255, 0.7) 50%,
      rgba(186, 230, 253, 0.22) 54%,
      transparent 60%);
  animation: chipSheen 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes chipSheen {
  from {
    transform: translate(55%, 55%);
  }

  to {
    transform: translate(-60%, -60%);
  }
}

/* ========================================================
   DOCKING FX — when the two glass chips touch
   ======================================================== */
.dock-fx {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Soft light under the chips; their frosted glass diffuses it */
.dock-bloom {
  position: absolute;
  z-index: 45;
  width: 300px;
  height: 300px;
  left: -150px;
  top: -150px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(186, 230, 253, 0.5) 0%,
      rgba(56, 189, 248, 0.26) 30%,
      rgba(14, 165, 233, 0.08) 55%,
      transparent 70%);
  animation: dockBloom 0.95s var(--ease-out) both;
}

@keyframes dockBloom {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }

  22% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}

/* Refraction ripple: a ring that bends & brightens the glass it passes */
.dock-ripple {
  position: absolute;
  z-index: 45;
  width: 240px;
  height: 240px;
  left: -120px;
  top: -120px;
  border-radius: 50%;
  backdrop-filter: blur(1.5px) brightness(1.35) saturate(1.6);
  -webkit-backdrop-filter: blur(1.5px) brightness(1.35) saturate(1.6);
  background: radial-gradient(circle,
      transparent 56%,
      rgba(224, 242, 254, 0.08) 62%,
      rgba(255, 255, 255, 0.2) 66%,
      rgba(224, 242, 254, 0.06) 70%,
      transparent 75%);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 61%, #000 71%, transparent 77%);
  mask: radial-gradient(circle, transparent 54%, #000 61%, #000 71%, transparent 77%);
  animation: dockRipple 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.dock-ripple--late {
  animation-delay: 0.1s;
  animation-duration: 1.1s;
}

@keyframes dockRipple {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }

  12% {
    opacity: 1;
  }

  /* --ripple-max keeps the ring inside the card at any card size */
  100% {
    opacity: 0;
    transform: scale(var(--ripple-max, 2.1));
  }
}

/* Light catching the edge where the two glass pieces meet */
.dock-seam {
  position: absolute;
  z-index: 55;
  width: 130px;
  height: 2px;
  left: -65px;
  top: -1px;
  border-radius: 2px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(125, 211, 252, 0.55) 22%,
      #ffffff 50%,
      rgba(125, 211, 252, 0.55) 78%,
      transparent 100%);
  box-shadow: 0 0 10px rgba(125, 211, 252, 0.85), 0 0 24px rgba(56, 189, 248, 0.5);
  animation: dockSeam 0.42s var(--ease-out) both;
}

/* Short-lived: gone by the time the chips have pulled apart */
@keyframes dockSeam {
  0% {
    opacity: 0;
    transform: rotate(-45deg) scaleX(0.3);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: rotate(-45deg) scaleX(1.2);
  }
}

/* Main Card Wrapper — shadow lives in .card-shadows, never a filter here */
.glass-card-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  will-change: transform;
}

/* Padded layer holding the blurred shadows, masked so they only show
   outside the card (they must never sit under the frosted glass) */
.card-shadows {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.card-shadow-drift {
  position: absolute;
  inset: 0;
}

/* Each shadow is a card-sized copy, offset & blurred */
.card-shadow {
  position: absolute;
  inset: 160px;
}

.card-shape {
  position: absolute;
  inset: 0;
  clip-path: url(#card-clip);
  background: rgba(0, 8, 20, 0.85);
}

.card-shadow--far {
  transform: translateY(34px);
  filter: blur(34px);
}

.card-shadow--near {
  transform: translateY(14px);
  filter: blur(14px);
}

.card-shadow--near .card-shape {
  background: rgba(0, 8, 20, 0.5);
}

.card-glow {
  filter: blur(20px);
  opacity: 0.16;
  transition: opacity 0.6s var(--ease-out);
}

.card-glow .card-shape {
  background: #38bdf8;
}

.glass-card-wrapper:hover .card-glow {
  opacity: 0.32;
}

/* Every layer fades in on its own (opacity on a parent would pause the blur) */
.fade-in-layer {
  animation: layerIn 0.9s var(--ease-out) both;
}

@keyframes layerIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Frosted glass blur background clipped to rounded chamfer polygon */
.glass-blur-panel {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(36px) saturate(185%) brightness(1.05);
  -webkit-backdrop-filter: blur(36px) saturate(185%) brightness(1.05);
  clip-path: url(#card-clip);
  z-index: 0;
}

/* Multi-layered light refraction & sky specular reflection */
.glass-surface-overlay {
  position: absolute;
  inset: 0;
  clip-path: url(#card-clip);
  background:
    linear-gradient(135deg, rgba(224, 242, 254, 0.16) 0%, rgba(14, 30, 46, 0.46) 35%, rgba(6, 14, 26, 0.7) 100%),
    radial-gradient(ellipse at 85% 70%, rgba(56, 189, 248, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 15% 15%, rgba(255, 255, 255, 0.14) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}

/* Specular sheen — a soft diagonal band of light sweeping across the glass */
.card-sheen {
  position: absolute;
  inset: 0;
  clip-path: url(#card-clip);
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.card-sheen-band {
  position: absolute;
  top: -30%;
  left: 0;
  width: 190px;
  height: 160%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(224, 242, 254, 0.05) 28%,
      rgba(255, 255, 255, 0.14) 50%,
      rgba(224, 242, 254, 0.05) 72%,
      transparent 100%);
  animation: cardSheen 1.5s cubic-bezier(0.45, 0, 0.2, 1) both;
}

@keyframes cardSheen {
  from {
    transform: translateX(-280px) rotate(18deg);
  }

  to {
    transform: translateX(calc(var(--card-w) + 90px)) rotate(18deg);
  }
}

/* Vector SVG Border ensuring pixel-perfect glossy edge */
.card-svg-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

/* Rim light — one ice-blue comet pair orbiting the outline.
   The mask shows only the border; the conic gradient behind it spins on
   the GPU, so the motion stays perfectly smooth. */
.rim-light {
  position: absolute;
  inset: -8px;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Cursor-following highlight: on the glass, and on the rim (same outline mask) */
.card-glare {
  position: absolute;
  inset: 0;
  clip-path: url(#card-clip);
  pointer-events: none;
  z-index: 2;
}

.rim-spot {
  position: absolute;
  inset: -8px;
  pointer-events: none;
  z-index: 2;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.rim-light-spin {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
      rgba(186, 230, 253, 0) 0deg,
      rgba(186, 230, 253, 0) 95deg,
      rgba(186, 230, 253, 0.35) 140deg,
      rgba(224, 242, 254, 0.85) 170deg,
      rgba(240, 249, 255, 1) 178deg,
      rgba(186, 230, 253, 0) 184deg,
      rgba(186, 230, 253, 0) 275deg,
      rgba(186, 230, 253, 0.35) 320deg,
      rgba(224, 242, 254, 0.85) 350deg,
      rgba(240, 249, 255, 1) 358deg,
      rgba(186, 230, 253, 0) 360deg);
  animation: rimSpin 10s linear infinite;
  will-change: transform;
}

@keyframes rimSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Card Content inside */
.card-content {
  position: relative;
  z-index: 3;
  padding: 30px 42px 24px 42px;
  height: 100%;
  box-sizing: border-box;
  will-change: opacity, filter, transform;
}

.view {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.login-title {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  font-size: 32px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.8px;
  margin-bottom: 3px;
}

.title-white {
  color: #ffffff;
}

.title-accent {
  background: linear-gradient(120deg, var(--sky-ice) 0%, var(--sky-bright) 40%, var(--sky) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(56, 189, 248, 0.45));
}

.subtitle {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.4;
  font-weight: 400;
}

.signup-link {
  background: none;
  border: none;
  color: var(--sky-bright);
  text-decoration: none;
  font-weight: 600;
  margin-left: 5px;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  padding: 0;
  transition: color 0.25s var(--ease-out), text-shadow 0.25s var(--ease-out);
}

.signup-link:hover {
  text-decoration: underline;
  color: var(--sky-ice);
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
}

.signup-link:disabled {
  cursor: default;
}


/* ========================================================
   OTP VERIFICATION — v7 merge animation in sky glass
   ======================================================== */
.otp-view {
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Glass badge above the title; turns green as the boxes merge */
.otp-badge {
  width: 54px;
  height: 54px;
  margin-bottom: 18px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sky-bright);
  background: linear-gradient(135deg, rgba(224, 242, 254, 0.16) 0%, rgba(14, 30, 46, 0.4) 100%);
  border: 1px solid rgba(224, 242, 254, 0.22);
  box-shadow:
    0 8px 24px rgba(0, 8, 20, 0.35),
    0 0 22px rgba(56, 189, 248, 0.18),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
  transition:
    color 0.5s var(--ease-out),
    border-color 0.5s var(--ease-out),
    box-shadow 0.5s var(--ease-out);
}

.is-complete .otp-badge {
  color: var(--success-bright);
  border-color: rgba(74, 222, 128, 0.4);
  box-shadow:
    0 8px 24px rgba(0, 8, 20, 0.35),
    0 0 26px rgba(34, 197, 94, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
  transition-delay: 2.1s;
}

.otp-badge-icon {
  display: flex;
}

.otp-header {
  margin-bottom: 78px;
}

.otp-header .login-title {
  margin-bottom: 10px;
}

.otp-header .subtitle {
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-line;
  min-height: 42px;
}

.title-success {
  background: linear-gradient(120deg, #dcfce7 0%, var(--success-bright) 45%, var(--success) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(34, 197, 94, 0.45));
}

.otp-inputs {
  position: relative;
  display: flex;
  gap: 16px;
  min-height: 64px;
  margin-bottom: 72px;
  align-items: center;
  justify-content: center;
}

/* Framer drives the slot's transform; the cell inside owns focus scale */
.otp-slot {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  will-change: transform;
}

/* The cell's background is the 2.5px ring around the input */
.otp-cell {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(224, 242, 254, 0.18);
  box-shadow:
    0 8px 20px rgba(0, 8, 20, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
  transition:
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.otp-cell:hover {
  background: rgba(224, 242, 254, 0.28);
}

.otp-cell:focus-within {
  background: var(--sky);
  transform: scale(1.1);
  box-shadow:
    0 8px 24px rgba(56, 189, 248, 0.38),
    0 0 0 4px rgba(56, 189, 248, 0.14);
}

.otp-slot:focus-within {
  z-index: 10 !important;
}

/* Comet of light that runs round each ring once the code is complete */
.otp-cell::before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: transparent;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}

.is-complete .otp-cell::before {
  opacity: 1;
  background: conic-gradient(from 0deg,
      transparent 0%,
      transparent 55%,
      rgba(56, 189, 248, 0.15) 70%,
      var(--sky) 92%,
      var(--sky-ice) 100%);
  animation:
    rotate-gradient 1.25s linear 2,
    morph-border-green 0.5s ease-in-out 2.5s forwards;
}

@keyframes rotate-gradient {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes morph-border-green {
  0% {
    background: conic-gradient(from 0deg, var(--sky) 0%, var(--sky-bright) 50%, var(--sky) 100%);
  }

  32% {
    background: conic-gradient(from 0deg, var(--sky) 0%, var(--sky-bright) 50%, var(--sky) 100%);
  }

  33% {
    background: conic-gradient(from 0deg, var(--success) 0%, #16a34a 50%, var(--success) 100%);
  }

  100% {
    background: conic-gradient(from 0deg, var(--success) 0%, #16a34a 50%, var(--success) 100%);
  }
}

.otp-input {
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  background: linear-gradient(160deg, #15304a 0%, #0a1828 100%);
  border: none;
  border-radius: 13.5px;
  color: #ffffff;
  caret-color: var(--sky-bright);
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  outline: none;
  z-index: 1;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

.is-complete .otp-input {
  animation: fade-text 0.2s ease 1.8s forwards;
}

@keyframes fade-text {
  to {
    color: transparent;
  }
}

/* The merged box pulses green... */
.is-complete .otp-slot--lead .otp-cell {
  animation: glow-pulse-green 1.5s infinite alternate 3s;
}

@keyframes glow-pulse-green {
  0% {
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
  }

  100% {
    box-shadow: 0 0 24px rgba(34, 197, 94, 1);
  }
}

/* ...and a glass shimmer sweeps across it */
.otp-cell::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-25deg);
  z-index: 5;
  pointer-events: none;
}

.is-complete .otp-slot--lead .otp-cell::after {
  animation: sweep-shimmer 3s cubic-bezier(0.4, 0, 0.2, 1) infinite 3.5s;
}

@keyframes sweep-shimmer {
  0% {
    left: -150%;
  }

  25% {
    left: 200%;
  }

  100% {
    left: 200%;
  }
}

.final-tick {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  z-index: 10;
  pointer-events: none;
}

/* Dotted square, shockwave & confetti — all centred on the inputs */
.otp-trace {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  z-index: 0;
  pointer-events: none;
}

.otp-shockwave {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  border: 1px solid var(--success);
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.35);
  z-index: 0;
  pointer-events: none;
}

.otp-confetti {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 15;
  pointer-events: none;
}

/* Footer */
.footer-area {
  position: relative;
  width: 100%;
  height: 52px;
  display: flex;
  justify-content: center;
}

.otp-footer {
  position: absolute;
  top: 0;
  font-size: 13.5px;
  color: var(--text-dim);
}

.otp-success {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.otp-success-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--success-bright);
  font-size: 17px;
  font-weight: 600;
  text-shadow: 0 2px 12px rgba(34, 197, 94, 0.45);
}

.otp-replay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.25s var(--ease-out);
}

.otp-replay:hover {
  color: var(--sky-bright);
}

.otp-replay:disabled {
  cursor: default;
}

/* Responsive adjust */
@media (max-width: 620px) {
  .card-content {
    padding: 30px 22px 22px 22px;
  }

  .chip-container {
    width: 70px;
    height: 70px;
  }

  .login-title {
    font-size: 27px;
  }

  .otp-header {
    margin-bottom: 70px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .float-tl,
  .float-br {
    animation: none;
  }

  .rim-light,
  .card-sheen,
  .chip-sheen,
  .dock-ripple {
    display: none;
  }
}


/* ========================================================
   LESTERS TILLÄGG — allt ovanför är originalet, ordagrant.
   ======================================================== */

/* Framer ritar startläget i första renderingen; här står det i stilmallen. */
.login-stage {
  transform: perspective(1200px) translateY(24px) scale(0.97);
}

.card-content {
  opacity: 0;
}

[data-rad] {
  opacity: 0;
}

/* En egen display kräver en egen [hidden]-regel (REGELBOK). */
.view[hidden],
.otp-inputs[hidden],
.reserv-rad[hidden],
.otp-footer-rad[hidden],
.otp-badge-icon[hidden],
.otp-rubrik[hidden] {
  display: none;
}

.svg-defs {
  position: absolute;
}

.noscript-rad {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 24px;
  z-index: 5;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
}

/* --------- Steg 1, i Glassy Login Form V3:s stil --------- */
.inloggning-view {
  justify-content: center;
}

.inloggning-header {
  margin-left: 54px;
  margin-bottom: 40px;
}

.inloggning-header .subtitle {
  margin-top: 6px;
}

.falt {
  display: block;
  margin-bottom: 18px;
}

.falt-namn {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}

.falt-ruta {
  position: relative;
  display: flex;
  align-items: center;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(21, 48, 74, 0.5) 0%, rgba(10, 24, 40, 0.5) 100%);
  border: 1px solid rgba(224, 242, 254, 0.14);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.falt-ruta:hover {
  border-color: rgba(224, 242, 254, 0.28);
}

.falt-ruta:focus-within {
  border-color: var(--sky);
  box-shadow:
    0 8px 24px rgba(56, 189, 248, 0.2),
    0 0 0 4px rgba(56, 189, 248, 0.14);
}

.falt-ikon {
  display: flex;
  flex-shrink: 0;
  margin-left: 16px;
  color: var(--text-muted);
}

.falt-ruta:focus-within .falt-ikon {
  color: var(--sky-bright);
}

.falt-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 14px;
  background: none;
  border: none;
  outline: none;
  color: #ffffff;
  caret-color: var(--sky-bright);
  font-family: inherit;
  font-size: 14px;
}

.falt-input::placeholder {
  color: var(--text-muted);
}

/* Webbläsarens autofyll får inte måla över glaset. */
.falt-input:-webkit-autofill,
.falt-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  caret-color: var(--sky-bright);
  transition: background-color 9999s ease-out 0s;
}

.falt-oga {
  display: flex;
  flex-shrink: 0;
  margin-right: 12px;
  padding: 4px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.25s var(--ease-out);
}

.falt-oga:hover,
.falt-oga:focus-visible {
  color: var(--sky-bright);
  outline: none;
}

.logga-in-knapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 54px;
  margin-top: 8px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--sky-bright) 0%, var(--sky) 45%, var(--sky-deep) 100%);
  box-shadow:
    0 10px 30px rgba(56, 189, 248, 0.32),
    inset 0 1px 1px rgba(255, 255, 255, 0.5);
  color: #06202f;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.logga-in-knapp:hover {
  transform: translateY(-1px);
  box-shadow:
    0 14px 36px rgba(56, 189, 248, 0.45),
    inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.logga-in-knapp:focus-visible {
  outline: 2px solid var(--sky-ice);
  outline-offset: 3px;
}

.logga-in-knapp:disabled {
  opacity: 0.7;
  cursor: default;
  transform: none;
}

.inloggning-meddelande {
  min-height: 20px;
  margin-top: 12px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.4;
}

/* --------- Steg 2: fel, reservkod, sidfot --------- */
.otp-meddelande {
  position: absolute;
  left: 50%;
  top: 76px;
  width: 460px;
  max-width: 100%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 13.5px;
  line-height: 1.35;
  pointer-events: none;
}

.ton-fel {
  color: #fca5a5;
  text-shadow: 0 2px 12px rgba(239, 68, 68, 0.45);
}

.ton-ok {
  color: var(--text-dim);
}

.otp-inputs-row {
  position: relative;
}

.reserv-rad {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 64px;
  margin-bottom: 72px;
}

.reserv-cell {
  width: 304px;
  height: 64px;
  max-width: 100%;
}

.reserv-input {
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 22px;
}

.otp-footer-rad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.otp-footer-lankar {
  display: inline-flex;
  gap: 14px;
}

/* Kort röd glöd i kanten när koden är fel: samma konturmask som rim-ljuset. */
.rim-fel {
  position: absolute;
  inset: -8px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  background: #f87171;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.card-glow-fel {
  filter: blur(20px);
  opacity: 0;
}

.card-glow-fel .card-shape {
  background: #ef4444;
}

@media (max-width: 620px) {
  .inloggning-header {
    margin-left: 44px;
    margin-bottom: 28px;
  }

  /* iOS zoomar in på fält under 16 px. */
  .falt-input {
    font-size: 16px;
  }
}

.otp-success[hidden],
.otp-footer[hidden],
.login-stage [hidden] {
  display: none;
}