/* Login page — frame `Prisijungimas` (347:11071), canvas 1728x1070, and
   `Prisijungimas mobile` (347:11076), canvas 360x1505 (status bar 0-43 excluded).
   Offsets are frame-absolute values from design/figma-cache/frames/; the section starts at
   the header bottom (desktop y72, mobile y98). Text tops are ink tops (Figma cap-trims). */

.login { position: relative; height: 638px; }         /* 72 -> footer at 710 */

.login__hero {                                        /* Rectangle 16 @863,72 — 865x638 */
  position: absolute; left: 863px; top: 0; width: 865px; height: 638px; object-fit: cover;
}

.login__title {                                       /* 369:5411 @294,176 — 32/41.7 ls3.2 UPPER */
  position: absolute; left: 294px; top: 95.4px; width: 364px; margin: 0;
  text-transform: uppercase; color: var(--accent);
  font-weight: 200; font-size: 32px; line-height: 41.66px; letter-spacing: 3.2px;
}

/* ---- Social sign-in: Frame 35 @294,222 and Frame 85 @484,222 — 174x45 r40 ---- */
.login__social { position: absolute; left: 294px; top: 150px; display: flex; gap: 16px; }
.login__oauth {
  width: 174px; height: 45px; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; border: 1px solid var(--accent); border-radius: 40px; color: #403632;
  text-transform: uppercase; font-weight: 500; font-size: 14px; line-height: 18.23px;
  transition: background-color var(--t-tint) var(--ease-out), color var(--t-tint) var(--ease-out);
}
.login__oauth:hover, .login__oauth:focus-visible { background: var(--white); }
.login__oauth img { width: 16px; height: 16px; flex: none; }
.login__oauth[data-oauth="apple"] img { width: 13px; margin-inline: 1.5px; }  /* 16px slot, 13px glyph */

/* ---- "arba" divider: Group 4467 @294,291 — rules at y295, 155 wide ---- */
.login__or {
  position: absolute; left: 294px; top: 213px; width: 364px; height: 16px; margin: 0;
  text-align: center; line-height: 16px;
}
.login__or::before, .login__or::after {
  content: ""; position: absolute; top: 8px; width: 155px; height: 1px; background: var(--muted);
}
.login__or::before { left: 0; }
.login__or::after { right: 0; }
.login__or span {
  color: var(--muted); font-weight: 500; font-size: 10px; line-height: 16px;
}

/* ---- Fields: Frame 82 @294,322 and Frame 83 @294,388 — 364x50 r40 ---- */
.login__field { position: absolute; left: 294px; width: 364px; height: 50px; margin: 0; }
.login__field--email { top: 250px; }
.login__field--password { top: 316px; }
.login__eye {                                         /* Group 5538 @619,407 — 18.5x12 */
  position: absolute; left: 325px; top: 19px; width: 18.5px; height: 12px; padding: 0;
  transition: opacity var(--t-tint) var(--ease-out);
}
.login__eye:hover { opacity: .65; }
.login__eye img { width: 18.5px; height: 12px; }
/* The painted eye stays 18.5x12; an invisible 40x40 box around it is what a finger hits. */
.login__eye::before { content: ""; position: absolute; inset: -14px -11px; }

/* The pills are the shared ASSETS input (`.fld`, css/app.css). An errored field's message
   takes a 24px line under it (369:5252 — the forgot frame's error state moves its button
   down 24), so every row below an errored field moves down by it. */
.login { --e1: 0px; --e2: 0px; --e3: 0px; }
.login:has(.login__field--email.fld--error) { --e1: 24px; }
.login:has(.login__field--password.fld--error) { --e2: 24px; }
.login:has(.login__field--repeat.fld--error) { --e3: 24px; }
.login__field--password { margin-top: var(--e1); }
.login__field--repeat { margin-top: calc(var(--e1) + var(--e2)); }
.login__remember, .login__forgot, .login__submit, .login__register {
  margin-top: calc(var(--e1) + var(--e2) + var(--e3));
}

/* ---- Remember + forgot: Group 5536 @294,454 · 369:5432 @557,459 ---- */
.login__remember {
  position: absolute; left: 294px; top: 375.4px; display: flex; align-items: flex-start; gap: 8px;
  color: var(--muted); font-weight: 300; font-size: 12px; line-height: 32px; cursor: pointer;
}
.login__remember input {
  position: absolute; left: 0; top: 5.1px; 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);
}
.login__remember input:hover { border-color: var(--accent); }
/* Comments 43/44/16/53: checked box — 468:4362, accent fill + white tick scaled to the 17px box */
.login__remember input:checked { background: var(--accent) url("../img/icons/icon-check-white.svg") no-repeat 4.5px 5.5px / 10px 7px; border-color: var(--accent); }
.login__remember span { margin-left: 25px; }          /* label ink at x319 — the box grew into the gap */
.login__remember::before, .login__forgot::before {    /* 32px rows -> a 40px hit box, unpainted */
  content: ""; position: absolute; inset: -4px;
}
.login__forgot {
  position: absolute; right: 1070px; top: 375.4px; text-align: right; white-space: nowrap;
  color: var(--muted); font-weight: 300; font-size: 12px; line-height: 32px;
  transition: color var(--t-tint) var(--ease-out);
}
.login__forgot:hover { color: var(--accent); }

/* ---- Submit + register: Frame 4 @294,495 · Frame 84 @294,558 — 364x47 r40 ---- */
.login__submit, .login__register {
  position: absolute; left: 294px; width: 364px; height: 47px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 40px;
  text-transform: uppercase; font-weight: 500; font-size: 14px; line-height: 18.23px;
  font-family: var(--font-body);
  /* Fractional glyph advances, as Figma lays them out: Chromium on Linux rounds every advance
     to a whole pixel otherwise, which made REGISTRUOTIS 97px against the comp's 95. */
  text-rendering: geometricPrecision;
  transition: background-color var(--t-tint) var(--ease-out), color var(--t-tint) var(--ease-out),
    border-color var(--t-tint) var(--ease-out);
}
.login__submit { top: 423px; background: var(--ink); color: var(--cream); border: 0; }
.login__submit:hover, .login__submit:focus-visible { background: var(--ink-hover); }   /* ASSETS 452:4464 */
.login__register { top: 486px; border: 1px solid var(--accent); color: var(--accent); }
.login__register:hover, .login__register:focus-visible { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--cream); }

/* ---- Mobile: `Prisijungimas mobile` 347:11076, gutter 16, content 328 ---- */
@media (max-width: 767px) {
  .login { height: 664px; }                           /* 98 -> footer at 762 */
  .login__hero { display: none; }
  .login__title {
    left: 16px; top: 112.8px; width: calc(100% - 32px);
    font-size: 24px; line-height: 31.25px; letter-spacing: 2.4px;
  }
  .login__social { left: 16px; top: 161px; right: 16px; gap: 17px; }
  .login__oauth { width: 155px; flex: 1; }
  .login__or { left: 16px; top: 224px; width: calc(100% - 32px); }
  .login__or::before, .login__or::after { width: 137px; }
  .login__field { left: 16px; width: calc(100% - 32px); }
  .login__field--email { top: 261px; }
  .login__field--password { top: 327px; }
  .login__eye { left: auto; right: 21px; }
  .login__remember { left: 16px; top: 386.4px; }
  .login__forgot { right: 16px; top: 386.4px; }
  .login__submit, .login__register { left: 16px; width: calc(100% - 32px); }
  .login__submit { top: 434px; }
  .login__register { top: 497px; }
}