/* ============================================================
   EasyUsenet - login.css
   Page-specific rules. Extends and overrides base.css, so ALWAYS
   load it after base.css.
   ============================================================ */

/* --- Page frame --- */
.lg{background:var(--plansbg,#FDF4D8);padding:64px 0 96px}
.lg .head-c{max-width:640px;margin:0 auto 38px;text-align:center}
.lg h1{font-weight:800;line-height:1.05}
.lg .lead{font-size:17px;color:var(--muted);line-height:1.65;max-width:560px;margin:14px auto 0}

/* --- Karte --- */
.lg-card{max-width:480px;margin:0 auto;background:var(--white);border:var(--bd);border-radius:var(--r);box-shadow:8px 8px 0 0 var(--black);padding:36px 38px 34px;text-align:center}

/* Notice above the card, e.g. an expired link */
.lg-warn{display:flex;align-items:flex-start;gap:11px;text-align:left;background:var(--orange-soft);border:var(--bd);border-radius:var(--r);padding:13px 15px;margin-bottom:26px}
.lg-warn .ic{width:26px;height:26px;flex:none;border:none;background:none}
.lg-warn p{font-size:14px;font-weight:600;line-height:1.5}

/* --- Schritte --- */
.lg-step .ic--lg{width:66px;height:66px;background:var(--white);border-radius:12px;margin-bottom:20px}
.lg-step .lg-check{background:var(--green)}
.lg-step h2{font-size:24px;font-weight:800;letter-spacing:-.5px;line-height:1.2}
.lg-lead{font-size:15px;color:var(--muted);line-height:1.6;margin-top:9px}
.lg-mail-anz{color:var(--text);font-weight:800;overflow-wrap:anywhere}

/* --- Formular --- */
.lg-form{margin-top:22px;text-align:left}
.fld{display:block}
.lb{display:block;font-family:'Sora','Sora Fallback',sans-serif;font-size:12px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.fin{width:100%;border:2px solid #E3DED0;border-radius:var(--r);background:var(--white);padding:14px 15px;font-family:'Inter','Inter Fallback',sans-serif;font-size:16px;font-weight:600;color:var(--text);transition:border-color .16s ease}
.fin:focus{border-color:var(--black)}
.fin::placeholder{color:#9A9C90;font-weight:500}
.lg-form .btn{margin-top:18px}
/* Disabled is only greyed out, NOT offset - otherwise the button jumps by 2px as
   soon as the last digit is in place. */
.lg-form .btn[disabled]{opacity:.45;cursor:not-allowed}

/* The six code fields: equal width, sharing the line.
   min-width:0 is needed, otherwise the last box tips out of the card. */
.lg-otp{display:flex;gap:8px}
.lg-otp input{flex:1 1 0;min-width:0;aspect-ratio:1/1.18;border:var(--bd);border-radius:var(--r);background:var(--ground);text-align:center;font-family:'Sora','Sora Fallback',sans-serif;font-size:24px;font-weight:800;color:var(--text);padding:0;transition:background .16s ease}
.lg-otp input:focus{outline:none;background:var(--white);box-shadow:3px 3px 0 0 var(--black)}

/* --- Nebenwege --- */
.lg-old{font-size:14px;font-weight:600;color:var(--muted);line-height:1.6;margin-top:20px}
.lg-old a,.lg-link{color:var(--text);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px}
.lg-old a:hover,.lg-link:hover{color:var(--green)}
.lg-link{border:none;background:none;padding:0;font:inherit;font-weight:700;cursor:pointer}
.lg-link[disabled]{color:var(--muted);cursor:default;text-decoration:none;font-weight:600}
.lg-link[disabled]:hover{color:var(--muted)}
.lg-back{display:inline-flex;align-items:center;gap:7px;margin-top:22px;padding:0;border:none;background:none;cursor:pointer;font-family:'Sora','Sora Fallback',sans-serif;font-size:14px;font-weight:800;color:var(--text)}
.lg-back:hover{color:var(--green)}

.lg-help{text-align:center;font-size:14px;font-weight:600;color:var(--muted);margin-top:26px}
.lg-help a{color:var(--text);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px}

/* [hidden] would otherwise lose against display:flex - hence stated explicitly */
.lg-step[hidden],.lg-warn[hidden]{display:none}

/* ============================================================
   Responsive - these rules come AFTER the components, otherwise
   the component wins (a media query does not raise specificity).
   ============================================================ */
@media (max-width:1000px){
.lg{padding:48px 0 72px}
}
@media (max-width:720px){
.lg{padding:38px 0 56px}
.lg-card{padding:28px 24px 26px}
.lg-otp{gap:6px}
.lg-otp input{font-size:21px}
}
@media (max-width:430px){
.lg-card{padding:24px 18px 22px}
.lg-step h2{font-size:21px}
.lg-otp{gap:5px}
.lg-otp input{font-size:19px}
}