/* Skandimafia — Login CSS (mobile-consistent, hero-first on mobile) */
:root{
  color-scheme: dark;
  --brand:#745D55; --brand-2:#BAAAA4;
  --bg:#0b0d10; --surface:rgba(19,18,17,.78); --surface-solid:#151413;
  --text:#E9E6E4; --muted:#CFC7C4; --outline:#3a2f2a; --focus:#BAAAA4; --error:#ff6b6b;
  --shadow-1:0 10px 30px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
  --radius:18px; --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body.loginbody{margin:0;font-family:var(--font);color:var(--text);background:var(--bg);display:grid;place-items:center;overflow-x:hidden}

/* Background */
.scene{position:fixed;inset:0;overflow:hidden;z-index:-1;
  background:
    image-set(url('../img/SkandiBGNew.png') type('image/png'));
  background-repeat:no-repeat; background-position:left center,left top,right top,left center; background-size:cover,auto,auto,cover; filter:saturate(105%);
}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay}

/* Layout */
.card-wrap{width:min(980px,92vw);display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:stretch}
@media (max-width:880px){
  .card-wrap{grid-template-columns:1fr;gap:16px}
  .hero{order:1} /* hero first */
  .card[aria-label="Logg inn"], .card[aria-label="Autentisering"]{order:2}
  .features{display:none}            /* hide text modules */
  .hero .brand{display:none}         /* hide copyright in hero */
  .brand-mobile{display:block;margin-top:10px;color:var(--muted);font-size:13px}
  .hero .logo{width:min(90vw,460px);height:auto;margin-inline:auto;display:block}
}
.brand-mobile{display:none}

/* Card */
.card{opacity:0.8;position:relative;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-1);padding:26px;backdrop-filter:blur(12px) saturate(120%)}
@supports not (backdrop-filter: blur(12px)){ .card{background:var(--surface-solid)} }
.card{border:1px solid var(--outline)}
.card::before{content:"";position:absolute;inset:-1px;border-radius:calc(var(--radius) + 2px);padding:1px;background:linear-gradient(135deg, rgba(186,170,164,.7), rgba(116,93,85,.6));-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* Hero */
.hero{position:relative;overflow:hidden;min-height:460px;display:grid;align-content:space-between}
.logo{width:220px;height:auto;display:block;opacity:.95;filter:drop-shadow(0 6px 20px rgba(0,0,0,.45))}
.subtitle{color:var(--muted);margin:0 0 16px;max-width:45ch}
.features{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.feature{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--outline);border-radius:12px;background:rgba(255,255,255,.02)}
.feature svg{flex:none;width:20px;height:20px}
.footnote{color:var(--muted);font-size:12px;margin-top:12px;opacity:.9}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}

/* Form */
.form{display:grid;gap:14px}
.form h2{margin:0 0 4px;font-size:18px;font-weight:600;letter-spacing:.2px;color:#eae3e0}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.control{position:relative}
.TextBox, .input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea{
  -webkit-appearance:none; appearance:none; width:100%; padding:14px 14px; border:1px solid var(--outline);
  background:rgba(20,19,18,.7); color:var(--text); border-radius:12px; outline:none; transition:border-color .2s, box-shadow .2s, background .2s;
}
.input::placeholder, .TextBox::placeholder, input::placeholder{color:#9b8f88}
.input:focus-visible, .TextBox:focus-visible, input:focus-visible, select:focus-visible{border-color:var(--focus); box-shadow:0 0 0 3px rgba(186,170,164,.22)}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
input[type="number"]{ -moz-appearance: textfield; }
input:-webkit-autofill{ -webkit-text-fill-color: var(--text); transition: background-color 10000s ease-in-out 0s; }
input:-webkit-autofill::first-line{ font-family: var(--font); font-size: 16px; }

/* Buttons */
.button, .btn, button[type="button"], input[type="submit"], input[type="button"]{
  -webkit-appearance:none; appearance:none; border:none; cursor:pointer; border-radius:12px; padding:12px 16px;
  background:linear-gradient(135deg, var(--brand-2), #e0d6d2); color:#221f1d; font-weight:700; letter-spacing:.2px; box-shadow:0 6px 18px rgba(186,170,164,.35);
  transition:transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
.button:hover, .btn:hover{ transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 12px 26px rgba(186,170,164,.45) }
.button.ghost, .button.alt{ background:transparent; color:var(--text); border:1px solid var(--outline); box-shadow:none }

/* Misc */
.buttons-primary, .buttons-secondary{ display:flex; align-items:center; justify-content:flex-start; gap:10px; flex-wrap:wrap }
.checkbox{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted) }
.checkbox input{ width:16px; height:16px; accent-color: var(--brand-2) }

/* Terms */
.terms-row{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; margin-top:10px }
.CheckContain{ position:relative; display:flex; align-items:center; justify-content:center; width:22px; height:22px; flex:0 0 22px; padding:0; margin:0 }
.CheckContain input{ position:absolute; inset:0; opacity:0; cursor:pointer }
.CheckContain .checkmark{ position:absolute; left:0; top:50%; transform:translateY(-50%) }
.terms-text, .terms-text .link{ font-family:inherit; font-size:13px; line-height:1.5 }

/* Toast */
.toast{ background:#1a1614; border:1px solid #2c2420; color:var(--text); box-shadow:var(--shadow-1); border-radius:12px; padding:12px 14px; display:none; max-width:520px; margin-bottom:12px }
.toast[aria-hidden='false']{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center }
.toast .dot{ width:10px; height:10px; border-radius:50%; background:var(--error); box-shadow:0 0 10px rgba(255,107,107,.8) }