/* Accounts — frames `Registracija` (347:11208, canvas 1728x1152), `Sėkminga registracija`
   (367:5017, 1728x1199) and `Patvirtinimo kodas` (347:11609, 1728x1199).
   Registration is the login family: it loads `login.css` first and only the rows below it
   differ. Offsets are frame-absolute values minus the header (72); text tops are ink tops. */

/* ---------- Registration: the rows login does not have ---------- */
.login--register { height: 720px; }                   /* 72 -> footer at 792 */
.login--register .login__hero { height: 720px; }      /* Rectangle 16 @863,72 — 865x720 */
.login--register .login__field--repeat { top: 382px; }/* Frame 90 @294,454 */
.login--register .login__submit { top: 535px; }       /* Frame 91 @294,607 */

.reg__check {                                         /* Group 5536 @294,520 · 5537 @294,553 */
  position: absolute; left: 294px; width: 364px; display: block; cursor: pointer;
  color: var(--ink); font-weight: 400; font-size: 13px; line-height: 16.9px;
}
.reg__check--news { top: 448px; }
.reg__check { margin-top: calc(var(--e1) + var(--e2) + var(--e3)); }   /* errors above */
.reg__check--terms { top: 481px; }
.reg__check input {                                   /* Rectangle 2988 — the one checkbox, on the 17px box's centre */
  position: absolute; left: 0; top: -1.5px; width: var(--check); height: var(--check); margin: 0;
  appearance: none; border: 1px solid var(--sand); border-radius: var(--r-check);
  background: var(--white); cursor: pointer;
  transition: background-color var(--t-tint) var(--ease-out), border-color var(--t-tint) var(--ease-out);
}
.reg__check input:hover { border-color: var(--accent); }
.reg__check input:checked { background: var(--accent) url("../img/icons/icon-check-white.svg") no-repeat 4.5px 5.5px / 10px 7px; border-color: var(--accent); }  /* checked box — 468:4362, comment 44 */
.reg__check span { display: block; margin-left: 25px; }   /* label ink at x319 — the box grew into the gap */
/* An unpainted hit box 7px above and below each row: the two rows are 14px apart, so this is
   as far as they grow without touching (the 17px box + label stay the comp's). */
.reg__check::before { content: ""; position: absolute; inset: -7px 0; }
.reg__check--news span { margin-top: 2.1px; }             /* ink at y525 */
.reg__check--terms span { margin-top: 1.1px; width: 339px; }  /* ink at y557, wraps to 2 lines */
.reg__error { display: block; margin-left: 25px; color: var(--danger); font-size: 12px; }

.reg__have {                                          /* 375:7355 @294,678 — 13/16.9 */
  position: absolute; left: 294px; top: 603.1px;
  margin: calc(var(--e1) + var(--e2) + var(--e3)) 0 0;   /* errors above */
  font-weight: 400; font-size: 13px; line-height: 16.9px;
}
.reg__have a { color: var(--ink); transition: color var(--t-tint) var(--ease-out); }
.reg__have a:hover { color: var(--accent); }

/* ---------- Password reset: the request form and the new password ----------
   Frames `Pamirštas slaptažodis` 347:11345 / 369:5252 (error) and `Naujas slaptažodis`
   347:11545 — the login family with 461px rows instead of 364px. */
.login--forgot, .login--reset { height: 767px; }      /* 72 -> footer at 839 */
.login--forgot .login__hero, .login--reset .login__hero { height: 767px; }

.login--forgot .login__title,                         /* 367:5233 @294,351 */
.login--reset .login__title { width: 461px; }
.login--forgot .login__title { top: 270.4px; }
.login--reset .login__title { top: 250.4px; }         /* 367:5222 @294,331 */

.login--forgot .login__field, .login--reset .login__field { width: 461px; }
.login--forgot .login__field--email { top: 367px; }   /* Frame 82 @294,439 */
.login--reset .login__field--password { top: 321px; } /* Frame 82 @294,393 */
.login--reset .login__field--repeat { top: 387px; }   /* Frame 83 @294,459 */
.login--reset .login__eye { left: 422px; }            /* 461px row, same 19px inset as login */

.login--forgot .login__submit, .login--reset .login__submit { width: 461px; }
.login--forgot .login__submit { top: 441px; }         /* Frame 4 @294,513 */
.login--reset .login__submit { top: 461px; }          /* Frame 4 @294,533 */

.fp__lead {                                           /* 367:5235 @294,405 — 461x10, 14/24 */
  position: absolute; left: 294px; top: 325.9px; width: 461px; margin: 0;
  color: var(--ink); font-weight: 400; font-size: 14px; line-height: 24px;
}
/* The request form runs in FLOW at the comp's gaps (title box 312.06 -> lead 325.9 -> field
   367 -> button 441), so the EN title's second line and a two-line lead push the rows below
   them instead of running under them (quirk 36). The section keeps its 767: footer @839. */
@media (min-width: 768px) {
  .login--forgot { box-sizing: border-box; padding-top: 270.4px; }
  .login--forgot :is(.login__title, .fp__lead, .login__field, .login__submit) {
    position: relative; top: auto; left: 294px;
  }
  .login--forgot .fp__lead { margin-top: 13.84px; }
  .login--forgot .login__field--email { margin-top: 17.1px; }
  .login--forgot .login__submit { display: flex; margin-top: calc(24px + var(--e1)); }
}

/* ---------- The two notice pages: success and the code ---------- */
.authnote { position: relative; height: 767px; }      /* 72 -> footer at 839 */
.authnote__hero {                                     /* Rectangle 16 — 865x767 */
  position: absolute; top: 0; width: 865px; height: 767px; object-fit: cover;
}
.authnote--code .authnote__hero, .authnote--sent .authnote__hero,
.authnote--updated .authnote__hero { left: 863px; }
.authnote--done .authnote__hero { left: 864px; }

.authnote__mark {                                     /* Group 5539 — 113px circle #e6dace */
  position: absolute; left: 294px; width: 113px; height: 113px; border-radius: 50%;
  background: #e6dace; display: block;
}
.authnote__mark img { position: absolute; left: 28px; top: 36px; width: 57.5px; height: 40.5px; }
.authnote--code .authnote__mark { top: 165px; }       /* @294,237 */
.authnote--done .authnote__mark, .authnote--updated .authnote__mark { top: 232px; }  /* @294,304 */
.authnote--sent .authnote__mark { top: 254px; }       /* @294,326 */

.authnote__title {
  position: absolute; left: 294px; margin: 0; text-transform: uppercase; color: var(--accent);
  font-weight: 200; font-size: 32px; line-height: 41.66px; letter-spacing: 3.2px;
}
.authnote--code .authnote__title { top: 309.4px; width: 364px; }   /* @294,390 */
.authnote--done .authnote__title,
.authnote--updated .authnote__title { top: 376.4px; width: 461px; }/* @294,457 — two lines */
.authnote--sent .authnote__title { top: 398.4px; width: 461px; }   /* @294,479 — two lines */

.authnote__lead {                                     /* 375:7417 @294,436 — 364x26 */
  position: absolute; left: 294px; top: 360.1px; width: 364px; margin: 0;
  color: var(--ink); font-weight: 400; font-size: 13px; line-height: 16.9px;
}

.authnote--sent .authnote__lead {                     /* 367:5245 @294,575 — 461x10, 14/24 */
  top: 495.9px; width: 461px; font-size: 14px; line-height: 24px;
}

.authnote__cta {                                      /* Frame 4 @294,561 — 132x47 r40 */
  position: absolute; left: 294px; top: 489px; width: 132px; height: 47px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 40px;
  background: var(--ink); color: var(--cream);
  text-transform: uppercase; font-weight: 500; font-size: 14px; line-height: 18.23px;
  transition: background-color var(--t-tint) var(--ease-out);
}
.authnote__cta:hover, .authnote__cta:focus-visible { background: var(--ink-hover); }
.authnote__aside {                                    /* declared: the comp has no code link */
  position: absolute; left: 294px; top: 556.1px; margin: 0;
  font-weight: 400; font-size: 13px; line-height: 16.9px;
}
.authnote__aside a { color: var(--ink); transition: color var(--t-tint) var(--ease-out); }
.authnote__aside a:hover { color: var(--accent); }
/* Registration success: title -> CTA -> code link in flow, at the comp's spacing for a two-line
   title (title @457 cap / box 376.4, CTA @489 = title box bottom + 29.28, link @556.1 = CTA
   bottom + 20.1), so a longer title pushes them down instead of running under the CTA. */
.authnote__stack { position: absolute; left: 294px; top: 376.4px; width: 461px; }
.authnote__stack .authnote__title, .authnote__stack .authnote__cta,
.authnote__stack .authnote__aside { position: static; }
.authnote__stack .authnote__cta { display: flex; margin-top: 29.28px; }
.authnote__stack .authnote__aside { margin-top: 20.1px; }

/* ---------- The six-digit code ---------- */
.code__cells {                                        /* Group 5579 @294,486 — 352x84 */
  position: absolute; left: 294px; top: 414px; width: 352px; height: 84px;
}
.code__grid { position: absolute; inset: 0; display: flex; gap: 8px; }
.code__cell {                                         /* 52x84 r40, 1px inside #d4c5b5 */
  width: 52px; height: 84px; border: 1px solid var(--sand); border-radius: 40px;
}
.code__cell:first-child { background: var(--white); }
.code__input {
  position: absolute; inset: 0; width: 100%; height: 84px; border: 0; background: none;
  color: var(--accent); font-family: var(--font-body); font-weight: 600; font-size: 32px;
  line-height: 84px; letter-spacing: 48px; padding-left: 20px;   /* measured: the digit
     advance is exactly 12px, so 48px spacing puts every digit in the centre of its 60px cell */
  caret-color: var(--accent); outline: none;
}
/* The input spans all six cells, so motion.css's global ring drew a stray box round the group
   (V12); frame 347:11609 has none — the accent caret in the cell is the focus cue. */
.code__input:focus-visible { outline: none; }
.code__error {
  position: absolute; left: 294px; top: 502px; color: var(--danger);
  font-weight: 400; font-size: 12px; line-height: 15.62px;
}
.code__submit {                                       /* Frame 4 @294,594 — 352x47 r40 */
  position: absolute; left: 294px; top: 522px; width: 352px; height: 47px;
  display: inline-flex; align-items: center; justify-content: center; border: 0;
  border-radius: 40px; background: var(--ink); color: var(--cream);
  text-transform: uppercase; font-weight: 500; font-size: 14px; line-height: 18.23px;
  font-family: var(--font-body);
  transition: background-color var(--t-tint) var(--ease-out);
}
.code__submit:hover, .code__submit:focus-visible { background: var(--ink-hover); }
.code__resend {                                       /* 375:7424 @294,665 — 13/16.9 */
  position: absolute; left: 294px; top: 589.1px; margin: 0;
  color: var(--ink); font-weight: 400; font-size: 13px; line-height: 16.9px;
}
.code__resend button {
  padding: 0; border: 0; background: none; color: var(--accent); cursor: pointer;
  font: inherit; text-decoration: underline;
  transition: opacity var(--t-tint) var(--ease-out);
}
.code__resend button:hover { opacity: .7; }

/* ---------- Mobile (≤767px) ----------
   `Registracija mobile` 423:4980 draws the quick-CHECKOUT flow, not this form, and the two
   notice frames have no 360 comp — so all three reflow on the `Prisijungimas mobile`
   (347:11076) rhythm: 16px gutters, 328 content, 24/31.2 titles (design/DEVIATIONS.md). */
@media (max-width: 767px) {
  .login--register { height: 746px; }
  .login--register .login__field--repeat { top: 393px; }
  .login--register .login__submit { top: 546px; }
  .reg__check { left: 16px; width: calc(100% - 32px); }
  .reg__check--news { top: 459px; }
  .reg__check--terms { top: 492px; }
  .reg__check--terms span { width: calc(100% - 25px); }
  .reg__have { left: 16px; top: 614.1px; }

  .login--forgot, .login--reset { height: 560px; }
  .login--forgot .login__hero, .login--reset .login__hero { display: none; }
  .login--forgot .login__title, .login--reset .login__title { top: 112.8px; width: calc(100% - 32px); }
  .login--forgot .login__field, .login--reset .login__field { width: calc(100% - 32px); }
  .login--forgot .login__field--email { top: 230px; }
  .login--reset .login__field--password { top: 172px; }
  .login--reset .login__field--repeat { top: 238px; }
  .login--reset .login__eye { left: auto; right: 21px; }
  .login--forgot .login__submit, .login--reset .login__submit { width: calc(100% - 32px); }
  .login--forgot .login__submit { top: 304px; }
  .login--reset .login__submit { top: 312px; }
  .fp__lead { left: 16px; top: 172px; width: calc(100% - 32px); }

  .authnote { height: 620px; }
  .authnote__hero { display: none; }
  .authnote__mark { left: 16px; }
  .authnote--code .authnote__mark, .authnote--done .authnote__mark,
  .authnote--sent .authnote__mark, .authnote--updated .authnote__mark { top: 40px; }
  .authnote__title {
    left: 16px; width: calc(100% - 32px);
    font-size: 24px; line-height: 31.25px; letter-spacing: 2.4px;
  }
  .authnote--code .authnote__title { top: 186px; }
  .authnote--done .authnote__title, .authnote--sent .authnote__title,
  .authnote--updated .authnote__title {
    top: 186px; width: calc(100% - 32px);   /* the desktop 461px would overflow 360 */
  }
  .authnote__lead { left: 16px; top: 240px; width: calc(100% - 32px); }
  .authnote--sent .authnote__lead { top: 300px; width: calc(100% - 32px); }
  .authnote__cta { left: 16px; top: 380px; }
  .authnote__aside { left: 16px; top: 447px; }
  .authnote__stack { left: 16px; top: 186px; width: calc(100% - 32px); }

  .code__cells { left: 16px; top: 290px; width: calc(100% - 32px); height: 78px; }
  .code__cell { width: 48px; height: 78px; }
  .code__input { height: 78px; line-height: 78px; letter-spacing: 44px; padding-left: 18px; }
  .code__error { left: 16px; top: 374px; }
  .code__submit { left: 16px; top: 394px; width: calc(100% - 32px); }
  .code__resend { left: 16px; top: 461.1px; }
}