/* ==========================================================================
   AutoCheckView — Login UI (Production)
   File: /public/assets/css/login.css
   Notes:
   - This CSS is for the NEW production layout used in login.php:
     .auth-page / .auth-shell / .auth-side / .auth-main / .auth-card / etc.
   - Remove/avoid mixing with old ".login-container" styles.
   ========================================================================== */


/* ==========================================================================
   1) Reset / Base
   ========================================================================== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}


/* ==========================================================================
   2) Design tokens (colors, radii, shadows)
   ========================================================================== */
:root{
  --acv-bg1:#0b2b4a;
  --acv-bg2:#0f5aa8;
  --acv-accent:#19c1a5;
  --acv-primary:#1777ff;

  --card-radius:18px;
  --shadow: 0 18px 60px rgba(0,0,0,.20);
  --text-soft: rgba(255,255,255,.82);
}


/* ==========================================================================
   3) Page background / typography
   ========================================================================== */
body{
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  min-height:100vh;

  /* Deep “automotive” night-blue background with soft accent glows */
  background:
    radial-gradient(900px 600px at 15% 15%, rgba(25,193,165,.30), transparent 55%),
    radial-gradient(900px 600px at 85% 25%, rgba(23,119,255,.35), transparent 60%),
    linear-gradient(135deg, var(--acv-bg1) 0%, var(--acv-bg2) 55%, #0a3f7a 100%);
}


/* ==========================================================================
   4) Auth layout wrapper
   ========================================================================== */
.auth-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 28px 16px;
}

/* Main container: left info + right form */
.auth-shell{
  width:100%;
  max-width: 1120px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  overflow:hidden;

  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
}

/* Mobile/tablet: stack columns */
@media (max-width: 992px){
  .auth-shell{ grid-template-columns: 1fr; }
}


/* ==========================================================================
   5) LEFT side (brand, benefits, legal note)
   ========================================================================== */
.auth-side{
  padding: 44px 44px;
  color:#fff;
  position:relative;
}

@media (max-width: 992px){
  .auth-side{ padding: 28px 20px; }
}

/* Brand badge: icon + name/tagline */
.brand-badge{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom: 28px;
}

.brand-icon{
  width:52px;
  height:52px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 25px rgba(0,0,0,.18);

  font-size:22px;
  color:#fff;
}

.brand-name{
  font-family: Montserrat, Poppins, sans-serif;
  font-weight:800;
  font-size: 1.25rem;
  line-height: 1.1;
}

.brand-tagline{
  color: var(--text-soft);
  font-size:.95rem;
  margin-top:2px;
}

/* Big title on the left */
.side-title{
  font-family: Montserrat, Poppins, sans-serif;
  font-weight:800;
  font-size: 2.15rem;
  margin: 18px 0 10px;
  letter-spacing:-0.5px;
}

/* Supporting text */
.side-subtitle{
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height:1.6;
  max-width: 520px;
}

/* Bullet points */
.side-points{
  margin-top: 22px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.side-point{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color: rgba(255,255,255,.92);
  font-size: 1rem;
}

.side-point i{
  margin-top:3px;
  color: var(--acv-accent);
}

/* Legal line (safe positioning statement) */
.side-legal{
  margin-top: 22px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
  font-size: .92rem;
  max-width: 560px;
}


/* ==========================================================================
   6) RIGHT side (form card)
   ========================================================================== */
.auth-main{
  background: rgba(255,255,255,.94);
  padding: 34px 28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

@media (max-width: 992px){
  .auth-main{ padding: 24px 16px; }
}

/* Inner white card */
.auth-card{
  background:#fff;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  padding: 26px 24px;
}

/* Small logo row: dot + label */
.auth-logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  color:#0b2b4a;
  margin-bottom: 8px;
}

.logo-dot{
  width:10px;
  height:10px;
  border-radius:99px;
  background: var(--acv-accent);
  box-shadow: 0 0 0 4px rgba(25,193,165,.18);
}

.auth-title{
  font-family: Montserrat, Poppins, sans-serif;
  font-weight:800;
  margin: 2px 0 4px;
  font-size: 1.65rem;
}

.auth-subtitle{
  color: rgba(0,0,0,.60);
  margin-bottom: 12px;
}


/* ==========================================================================
   7) Info notice / helpers
   ========================================================================== */
.notice{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background: #eef6ff;
  border: 1px solid #cfe3ff;
  border-radius: 12px;
  padding: 12px 12px;
  color:#12406d;
  font-size: .95rem;
}
.notice i{ margin-top:3px; }

/* Labels and inputs (Bootstrap compatible) */
.form-label{ font-weight:600; }

.form-control-lg{
  border-radius: 12px;
  padding-top:14px;
  padding-bottom:14px;
}

.input-group-lg > .form-control{
  border-radius: 12px 0 0 12px;
  padding-top:14px;
  padding-bottom:14px;
}

.input-group-lg > .btn{
  border-radius: 0 12px 12px 0;
}


/* ==========================================================================
   8) Google button (UI stub only for now)
   ========================================================================== */
.btn-google{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  border-radius: 12px;
  padding: 12px 14px;
  font-weight:700;

  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  color:#111;
  text-decoration:none;
}

.btn-google:hover{
  background:#f6f7f9;
  text-decoration:none;
}

/* Small Google icon block */
.g-icon{
  width:18px;
  height:18px;
  border-radius:4px;
  background:
    conic-gradient(from 220deg, #4285F4 0 25%, #34A853 0 50%, #FBBC05 0 75%, #EA4335 0 100%);
}


/* ==========================================================================
   9) Divider line "or"
   ========================================================================== */
.divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin: 14px 0;
  color: rgba(0,0,0,.45);
  font-weight:600;
  font-size:.9rem;
}

.divider::before,
.divider::after{
  content:"";
  height:1px;
  background: rgba(0,0,0,.12);
  flex:1;
}


/* ==========================================================================
   10) Links / muted text
   ========================================================================== */
.small-muted{ color: rgba(0,0,0,.60); }

.auth-links a{ text-decoration:none; }
.auth-links a:hover{ text-decoration:underline; }


/* ==========================================================================
   11) Primary buttons
   ========================================================================== */
.btn-signin{
  background: linear-gradient(135deg, var(--acv-primary) 0%, #0b5ed7 100%);
  border: none;
  border-radius: 12px;
  padding: 14px 16px;
  font-weight: 800;
}

.btn-signin:hover{ filter: brightness(.97); }

/* "New client" CTA — make it very visible */
.btn-create{
  border-radius: 12px;
  padding: 14px 16px;
  font-weight: 900;

  background: linear-gradient(135deg, var(--acv-accent) 0%, #12a38a 100%);
  border:none;
  color:#06221d;

  box-shadow: 0 10px 24px rgba(25,193,165,.32);
  text-decoration:none;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.btn-create:hover{
  filter: brightness(.98);
  text-decoration:none;
}


/* ==========================================================================
   12) Footer under the card (right column)
   ========================================================================== */
.auth-footer{
  margin-top: 12px;
  color: rgba(0,0,0,.55);
  font-size: .9rem;
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding: 0 6px;
}