/* ============================================================================
 * wb-auth-min.css — minimalist auth UI (login/register)
 * Single centered card, no split panel. Loads AFTER wb-auth.css to override.
 * ============================================================================ */

:root{
  --m-bg-1:#f8fafc;
  --m-bg-2:#eef2f7;
  --m-card:#ffffff;
  --m-ink-1:#0f172a;
  --m-ink-2:#475569;
  --m-ink-3:#94a3b8;
  --m-line:#e2e8f0;
  --m-line-2:#cbd5e1;
  --m-primary:#0d9488;
  --m-primary-2:#0f766e;
  --m-primary-soft:rgba(13,148,136,.10);
  --m-danger:#ef4444;
  --m-radius:14px;
  --m-shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.10);
}

/* ---------- Page background ---------- */
.login-page-container{
  min-height:100vh !important;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(13,148,136,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(56,189,248,.08), transparent 60%),
    linear-gradient(180deg, var(--m-bg-1) 0%, var(--m-bg-2) 100%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:32px 16px !important;
}
.login-page-container > .container-fluid{
  max-width:none !important;
  width:100% !important;
  padding:0 !important;
}

/* ---------- Hide the right "welcome" panel completely ---------- */
.login-page-container .login-right-section,
.login-page-container .row > .col-xl-7,
.login-page-container .row > .d-none.d-lg-block{
  display:none !important;
}

/* ---------- Reset the row to a centered single-card layout ---------- */
.login-page-container .row{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  border-radius:0 !important;
  min-height:0 !important;
  margin:0 auto !important;
  width:100% !important;
  max-width:460px !important;
  display:flex !important;
  justify-content:center !important;
}
.login-page-container .row > .col-xl-5,
.login-page-container .row > .col-lg-6,
.login-page-container .row > [class*="col-"]:first-child{
  flex:1 1 100% !important;
  width:100% !important;
  max-width:100% !important;
  padding:0 !important;
}

/* ---------- Card (was .login-left-section) ---------- */
.login-left-section{
  background:var(--m-card) !important;
  border:1px solid var(--m-line) !important;
  border-radius:var(--m-radius) !important;
  box-shadow:var(--m-shadow) !important;
  padding:36px 36px !important;
  min-height:0 !important;
  display:block !important;
}
.login-left-section::before,
.login-left-section::after{display:none !important; content:none !important;}

/* ---------- Form container ---------- */
.form-container{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

/* ---------- Header (logo + title) ---------- */
.form-container .mb-5{
  text-align:center !important;
  margin-bottom:26px !important;
}
.form-container .site-logo{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  width:54px; height:54px;
  background:var(--m-primary-soft) !important;
  border-radius:14px !important;
  padding:0 !important; margin-bottom:14px !important;
  box-shadow:none !important;
}
.form-container .site-logo img{
  width:30px !important; height:30px !important; object-fit:contain !important;
  filter:none !important;
}
.form-container h4,
.login-page-container .form-container h4{
  font-size:22px !important;
  font-weight:700 !important;
  color:var(--m-ink-1) !important;
  margin:0 0 4px !important;
  letter-spacing:-.01em !important;
}
.form-container .site--title{ color:var(--m-primary) !important; }
.form-container h4 + p,
.form-container .mb-5 p{
  color:var(--m-ink-2) !important;
  font-size:13px !important;
  margin:0 !important;
}

/* ---------- Form spacing ---------- */
.form-container form .my-3,
.form-container form .mb-4,
.form-container form .mb-3{
  margin:0 0 14px !important;
}

/* Two-col row for register (Email + Phone) */
.form-container form .wba-row-2{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:12px !important;
  margin-bottom:14px !important;
}
.form-container form .wba-row-2 > .mb-4,
.form-container form .wba-row-2 > .mb-3{margin-bottom:0 !important;}
@media (max-width:480px){
  .form-container form .wba-row-2{grid-template-columns:1fr !important;}
}

/* ---------- Labels ---------- */
.form-container .form-label,
.login-page-container .form-container .form-label{
  display:block !important;
  font-size:13px !important;
  font-weight:600 !important;
  color:var(--m-ink-1) !important;
  margin-bottom:6px !important;
  letter-spacing:0 !important;
}

/* ---------- Inputs: clean flat, no icon box ---------- */
.form-container .input-field{
  position:relative !important;
  display:block !important;
  background:var(--m-card) !important;
  border:1px solid var(--m-line) !important;
  border-radius:10px !important;
  padding:0 !important;
  height:auto !important;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
  overflow:visible !important;
}
.form-container .input-field span{
  position:absolute !important;
  left:12px !important; top:50% !important;
  transform:translateY(-50%) !important;
  width:20px !important; height:20px !important;
  display:inline-flex !important; align-items:center; justify-content:center;
  background:transparent !important; border:0 !important;
  color:var(--m-ink-3) !important;
  font-size:16px !important;
  pointer-events:none !important;
}
.form-container .input-field input{
  width:100% !important;
  height:44px !important;
  border:0 !important;
  background:transparent !important;
  padding:0 14px 0 40px !important;
  font-size:14px !important;
  color:var(--m-ink-1) !important;
  outline:none !important;
  border-radius:10px !important;
}
.form-container .input-field input::placeholder{
  color:var(--m-ink-3) !important;
  font-size:14px !important;
  opacity:1 !important;
}
.form-container .input-field:focus-within{
  border-color:var(--m-primary) !important;
  box-shadow:0 0 0 3px var(--m-primary-soft) !important;
  background:#fff !important;
}
.form-container .input-field:focus-within span{ color:var(--m-primary) !important; }

/* ---------- Forgot password link row ---------- */
.form-container form a,
.form-container a{
  color:var(--m-primary) !important;
  font-size:13px !important;
  font-weight:600 !important;
  text-decoration:none !important;
}
.form-container form a:hover{ color:var(--m-primary-2) !important; text-decoration:underline !important; }

/* ---------- Buttons ---------- */
.form-container .btn,
.form-container .btn--primary,
.form-container button[type=submit]{
  width:100% !important;
  height:46px !important;
  border-radius:10px !important;
  font-weight:600 !important;
  font-size:14px !important;
  letter-spacing:.01em !important;
  background:var(--m-primary) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 4px 12px -4px rgba(13,148,136,.45) !important;
  transition:transform .08s ease, background .15s ease, box-shadow .15s ease !important;
  margin-top:6px !important;
}
.form-container .btn:hover,
.form-container button[type=submit]:hover{
  background:var(--m-primary-2) !important;
  transform:translateY(-1px) !important;
}
.form-container .btn:active{ transform:translateY(0) !important; }

/* ---------- "Already have account" / "Or" ---------- */
.form-container > p.text-center,
.form-container .mt-4.text-center,
.form-container p.text-center.mt-4{
  text-align:center !important;
  font-size:13px !important;
  color:var(--m-ink-2) !important;
  margin:18px 0 0 !important;
}

/* ---------- "Or" divider ---------- */
.form-container .or{
  position:relative !important;
  text-align:center !important;
  margin:18px 0 14px !important;
}
.form-container .or p{
  display:inline-block !important;
  background:var(--m-card) !important;
  padding:0 12px !important;
  position:relative !important;
  z-index:1 !important;
  color:var(--m-ink-3) !important;
  font-size:12px !important;
  font-weight:500 !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
  margin:0 !important;
}
.form-container .or::before{
  content:"" !important;
  position:absolute !important;
  left:0; right:0; top:50% !important;
  height:1px !important;
  background:var(--m-line) !important;
  z-index:0 !important;
}

/* ---------- Google button ---------- */
.form-container .google--login,
.form-container .btn--danger{
  background:#fff !important;
  color:var(--m-ink-1) !important;
  border:1px solid var(--m-line) !important;
  box-shadow:none !important;
  font-weight:600 !important;
  height:46px !important;
}
.form-container .google--login:hover,
.form-container .btn--danger:hover{
  background:#f8fafc !important;
  border-color:var(--m-line-2) !important;
  color:var(--m-ink-1) !important;
}
.form-container .google--login i.fa-google{
  color:#ea4335 !important;
}

/* ---------- Hide the floating WhatsApp on auth pages (cleaner look) ---------- */
.login-page-container ~ #link-was,
body > #link-was{ display:none !important; }

/* ---------- Mobile ---------- */
@media (max-width:575.98px){
  .login-left-section{ padding:28px 22px !important; }
  .form-container h4{ font-size:20px !important; }
}

/* === v2 patch === */
.form-container .site-logo{
  width:auto !important;
  height:auto !important;
  background:transparent !important;
  border-radius:0 !important;
  padding:0 !important;
  margin-bottom:14px !important;
}
.form-container .site-logo img{
  width:auto !important;
  height:40px !important;
  max-width:160px !important;
  object-fit:contain !important;
}
/* Hide WA float on auth pages */
body:has(.login-page-container) #link-was,
body:has(.login-page-container) .floating{ display:none !important; }

/* === v3: vibrant gradient bg + logo container === */
.login-page-container{
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(168,85,247,.35), transparent 55%),
    radial-gradient(1100px 600px at -10% 110%, rgba(45,212,191,.45), transparent 55%),
    radial-gradient(900px 500px at 50% 50%, rgba(56,189,248,.18), transparent 60%),
    linear-gradient(135deg, #0f172a 0%, #1e1b4b 35%, #134e4a 70%, #0d9488 100%) !important;
  background-attachment: fixed !important;
  position:relative !important;
}
/* Subtle animated mesh overlay */
.login-page-container::before{
  content:"" !important;
  position:absolute !important; inset:0 !important;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.5), transparent 50%),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,.4), transparent 50%),
    radial-gradient(2px 2px at 80% 20%, rgba(255,255,255,.3), transparent 50%),
    radial-gradient(1px 1px at 35% 80%, rgba(255,255,255,.4), transparent 50%);
  background-size: 250px 250px, 200px 200px, 300px 300px, 180px 180px !important;
  opacity:.5 !important;
  pointer-events:none !important;
  z-index:0 !important;
}
.login-page-container > .container-fluid{ position:relative !important; z-index:1 !important; }

/* Card: glassy elevated card on top of gradient */
.login-left-section{
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  border:1px solid rgba(255,255,255,.6) !important;
  border-radius:18px !important;
  box-shadow:
    0 20px 60px -20px rgba(0,0,0,.45),
    0 8px 24px -8px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.8) !important;
  padding:38px 36px !important;
}

/* Logo: put it inside a tosca gradient pill (works for white logos too) */
.form-container .site-logo{
  display:inline-flex !important;
  align-items:center !important; justify-content:center !important;
  width:auto !important;
  min-width:64px !important;
  height:64px !important;
  padding:0 18px !important;
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 50%, #134e4a 100%) !important;
  border-radius:16px !important;
  margin-bottom:16px !important;
  box-shadow:
    0 8px 20px -8px rgba(13,148,136,.6),
    0 2px 6px rgba(13,148,136,.25),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
  border:1px solid rgba(255,255,255,.15) !important;
}
.form-container .site-logo img{
  width:auto !important;
  height:36px !important;
  max-width:140px !important;
  object-fit:contain !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)) !important;
}

/* Title becomes warmer */
.form-container h4,
.login-page-container .form-container h4{
  background: linear-gradient(135deg, #0f172a 0%, #0d9488 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.form-container .site--title{
  -webkit-text-fill-color: initial !important;
  color:#0d9488 !important;
}

/* Submit button: gradient */
.form-container .btn,
.form-container .btn--primary,
.form-container button[type=submit]{
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
  box-shadow:
    0 8px 20px -6px rgba(13,148,136,.55),
    0 2px 6px rgba(13,148,136,.25),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.form-container .btn:hover,
.form-container button[type=submit]:hover{
  background: linear-gradient(135deg, #0f766e 0%, #134e4a 100%) !important;
  box-shadow:
    0 12px 28px -8px rgba(13,148,136,.65),
    0 4px 8px rgba(13,148,136,.35) !important;
}