﻿/* =========================================================
   SWESUND EKONOMI - PREMIUM LOGIN V1
   Visual layer only. Auth logic is unchanged.
   ========================================================= */

.v9-login{
  min-height:100vh;
  width:100%;
  padding:0;
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  background:#f5f8fc;
  color:#0a3153;
}

.v9-login-shell{
  width:100%;
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(500px,1fr) minmax(560px,1fr);
}

/* LEFT BRAND PANEL */

.v9-login-visual{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  color:#fff;
  background:
    linear-gradient(
      90deg,
      rgba(4,38,65,.97) 0%,
      rgba(4,43,73,.92) 55%,
      rgba(4,43,73,.76) 100%
    ),
    url("/sakacc-public-hero-v1.1.7.png")
      center / cover no-repeat;
}

.v9-login-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(52,147,232,.18),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      transparent 60%,
      rgba(255,190,71,.07)
    );
  pointer-events:none;
}

.v9-login-visual::after{
  content:"";
  position:absolute;
  width:440px;
  height:440px;
  left:-285px;
  bottom:-245px;
  border:3px solid rgba(244,185,79,.78);
  border-radius:50%;
  pointer-events:none;
}

.v9-login-visual-inner{
  position:relative;
  z-index:1;
  width:min(660px,calc(100% - 100px));
  margin:0 auto;
}

.v9-login-hero-brand{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:46px;
}

.v9-login-symbol{
  width:64px;
  height:82px;
  object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.18));
}

.v9-login-hero-brand-copy strong{
  display:block;
  font-size:24px;
  line-height:1.15;
  letter-spacing:.01em;
  font-weight:800;
}

.v9-login-hero-brand-copy small{
  display:block;
  margin-top:5px;
  color:#efb84e;
  font-size:15px;
  font-weight:750;
}

.v9-login-services{
  margin:0 0 30px;
  color:#bdcbda;
  font-size:13px;
  line-height:1.5;
  font-weight:750;
  letter-spacing:.20em;
  text-transform:uppercase;
}

.v9-login-visual h2{
  margin:0;
  max-width:610px;
  color:#fff;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(44px,4vw,67px);
  line-height:1.04;
  letter-spacing:-.035em;
  font-weight:500;
}

.v9-login-visual h2 span{
  color:#efbc68;
}

.v9-login-visual-lead{
  max-width:650px;
  margin:28px 0 0;
  color:#d8e2ec;
  font-size:18px;
  line-height:1.65;
}

.v9-login-benefits{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin-top:42px;
  max-width:620px;
}

.v9-login-benefit{
  min-height:60px;
  display:flex;
  align-items:center;
  gap:12px;
  padding-right:22px;
  color:#fff;
  font-size:14px;
  line-height:1.4;
}

.v9-login-benefit + .v9-login-benefit{
  padding-left:24px;
  border-left:1px solid rgba(255,255,255,.18);
}

.v9-login-benefit-icon{
  flex:0 0 38px;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#eeb44e;
}

.v9-login-benefit-icon svg{
  width:31px;
  height:31px;
}

/* RIGHT LOGIN PANEL */

.v9-login-form-side{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px;
  background:
    radial-gradient(
      circle at 85% 6%,
      rgba(216,232,248,.55),
      transparent 27%
    ),
    linear-gradient(
      135deg,
      #fbfdff 0%,
      #f4f8fc 100%
    );
}

.v9-login-form-side::before{
  content:"";
  position:absolute;
  right:-160px;
  top:-270px;
  width:540px;
  height:540px;
  border:2px solid rgba(222,168,68,.45);
  border-radius:50%;
  pointer-events:none;
}

.v9-login-card{
  position:relative;
  z-index:2;
  width:min(100%,520px);
  margin:0;
  padding:48px 52px 42px;
  border:1px solid #dbe5ef;
  border-radius:20px;
  background:rgba(255,255,255,.96);
  box-shadow:
    0 30px 70px rgba(25,53,84,.10),
    0 4px 16px rgba(25,53,84,.04);
}

.v9-login-brand{
  display:flex;
  align-items:center;
  gap:15px;
  margin:0 0 30px;
}

.v9-login-brand .v9-login-symbol{
  width:48px;
  height:62px;
}

.v9-login-brand > div:last-child{
  display:block;
}

.v9-login-brand strong{
  display:block;
  color:#082f4f;
  font-size:18px;
  line-height:1.15;
  font-weight:850;
  letter-spacing:.01em;
}

.v9-login-brand small{
  display:block;
  margin-top:4px;
  color:#d59626;
  font-size:12px;
  font-weight:800;
}

.v9-login-eyebrow{
  margin:0 0 9px;
  color:#73869b;
  font-size:11px;
  line-height:1.4;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.v9-login-card h1{
  margin:0;
  color:#082f4f;
  font-family:Georgia,"Times New Roman",serif;
  font-size:45px;
  line-height:1.05;
  letter-spacing:-.035em;
  font-weight:600;
}

.v9-login-subtitle{
  margin:10px 0 28px;
  color:#718399;
  font-size:15px;
  line-height:1.5;
}

.v9-login-form{
  display:grid;
  gap:17px;
}

.v9-login-form label{
  display:grid;
  gap:8px;
  margin:0;
  color:#173c5e;
  font-size:13px;
  line-height:1.3;
  font-weight:800;
}

.v9-login-field{
  position:relative;
}

.v9-login-field-icon{
  position:absolute;
  left:16px;
  top:50%;
  width:20px;
  height:20px;
  transform:translateY(-50%);
  color:#5b748d;
  pointer-events:none;
}

.v9-login-form input{
  box-sizing:border-box;
  width:100%;
  height:56px;
  padding:0 16px 0 49px;
  border:1px solid #cad8e6;
  border-radius:11px;
  background:#fff;
  color:#123653;
  font-size:15px;
  outline:none;
  transition:
    border-color .16s ease,
    box-shadow .16s ease;
}

.v9-login-form input::placeholder{
  color:#9baabd;
}

.v9-login-form input:focus{
  border-color:#3277b7;
  box-shadow:0 0 0 4px rgba(50,119,183,.10);
}

.v9-login .v9-btn{
  height:56px;
  border-radius:11px;
  font-size:15px;
  font-weight:800;
}

.v9-login .v9-btn-primary{
  margin-top:4px;
  border:1px solid #073557;
  background:
    linear-gradient(
      180deg,
      #0d4a75 0%,
      #073656 100%
    );
  color:#fff;
  box-shadow:0 10px 22px rgba(8,56,88,.15);
}

.v9-login .v9-btn-primary:hover{
  filter:brightness(1.05);
}

.v9-login-divider{
  display:flex;
  align-items:center;
  gap:14px;
  margin:20px 0;
  color:#8494a6;
  font-size:13px;
}

.v9-login-divider::before,
.v9-login-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:#dbe3eb;
}

#v9GoogleLogin{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  border:1px solid #cbd9e7;
  background:#fff;
  color:#123653;
}

.v9-google-g{
  width:23px;
  height:23px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:850;
  color:#4285f4;
}

.v9-login-security{
  margin:27px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:#8393a5;
  font-size:12px;
}

.v9-login-security svg{
  width:19px;
  height:19px;
  color:#758ca3;
}

.v9-login .v9-error{
  margin-top:16px;
  min-height:18px;
}

/* RESPONSIVE */

@media(max-width:1100px){
  .v9-login-shell{
    grid-template-columns:43% 57%;
  }

  .v9-login-visual-inner{
    width:calc(100% - 58px);
  }

  .v9-login-benefits{
    grid-template-columns:1fr;
    gap:13px;
  }

  .v9-login-benefit + .v9-login-benefit{
    padding-left:0;
    border-left:0;
  }

  .v9-login-form-side{
    padding:42px;
  }
}

@media(max-width:820px){
  .v9-login{
    min-height:100dvh;
  }

  .v9-login-shell{
    display:block;
    min-height:100dvh;
  }

  .v9-login-visual{
    display:none;
  }

  .v9-login-form-side{
    min-height:100dvh;
    padding:26px 18px;
  }

  .v9-login-card{
    width:min(100%,480px);
    padding:38px 28px 32px;
    border-radius:17px;
  }

  .v9-login-card h1{
    font-size:39px;
  }
}

@media(max-width:480px){
  .v9-login-form-side{
    padding:18px 12px;
  }

  .v9-login-card{
    padding:30px 20px 26px;
  }

  .v9-login-brand{
    margin-bottom:25px;
  }

  .v9-login-card h1{
    font-size:35px;
  }
}
