/* =====================================================================
   auth.css  —  Modern sign-in experience for the members portal
   Self-contained: does not depend on Bootstrap or the admin theme.
   ===================================================================== */

:root{
  --auth-navy:#0B1E3F;
  --auth-navy-2:#12285a;
  --auth-primary:#2C55D4;
  --auth-primary-press:#1f43b3;
  --auth-cyan:#38BDF8;
  --auth-page:#F1F4FA;
  --auth-card:#FFFFFF;
  --auth-ink:#0F1B33;
  --auth-muted:#64748B;
  --auth-line:#E2E8F0;
  --auth-ring:rgba(44,85,212,.28);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body.auth-body{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--auth-ink);
  background:var(--auth-page);
  -webkit-font-smoothing:antialiased;
}

.auth-shell{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}

/* ---------- Brand panel ---------- */
.auth-brand{
  position:relative;overflow:hidden;color:#EAF1FF;
  padding:56px 60px;display:flex;flex-direction:column;
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(56,189,248,.18), transparent 55%),
    radial-gradient(90% 80% at 92% 96%, rgba(44,85,212,.35), transparent 60%),
    linear-gradient(160deg,var(--auth-navy) 0%, var(--auth-navy-2) 100%);
}
.auth-brand::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);
          mask-image:linear-gradient(180deg,#000,transparent 85%);
}
.auth-brand-top{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.auth-brand-logo{max-height:46px;width:auto;border-radius:10px;background:#fff;padding:4px 8px}
.auth-brand-name{font-family:"Sora",system-ui,sans-serif;font-weight:600;font-size:20px;letter-spacing:.2px}

.auth-lead{position:relative;z-index:1;margin-top:auto}
.auth-lead h2{
  font-family:"Sora",system-ui,sans-serif;font-weight:600;
  font-size:30px;line-height:1.25;margin:0 0 14px;max-width:15ch;
}
.auth-lead p{margin:0;color:#A9BEE6;font-size:15px;line-height:1.6;max-width:40ch}

.auth-services{position:relative;z-index:1;margin-top:34px;display:flex;flex-direction:column;gap:14px}
.auth-service{display:flex;align-items:center;gap:14px;font-size:15px;color:#DCE7FF}
.auth-service .ic{
  height:38px;width:38px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:var(--auth-cyan);
}
.auth-brand-foot{
  position:relative;z-index:1;margin-top:40px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12);color:#8CA3CE;font-size:13.5px;
}
.auth-brand-foot a{color:#Bcd3ff;text-decoration:none}

/* ---------- Form pane ---------- */
.auth-pane{display:flex;align-items:center;justify-content:center;padding:48px 32px}
.auth-card{width:100%;max-width:404px}
.auth-card-head{margin-bottom:24px}
.auth-card-head h1{font-family:"Sora",system-ui,sans-serif;font-weight:600;font-size:26px;margin:0 0 8px}
.auth-card-head p{margin:0;color:var(--auth-muted);font-size:14.5px}

.auth-field{position:relative;margin-bottom:16px}
.auth-field input{
  width:100%;height:56px;padding:22px 16px 8px;
  border:1.5px solid var(--auth-line);border-radius:12px;background:#fff;
  font-size:15px;font-family:inherit;color:var(--auth-ink);outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.auth-field input::-webkit-outer-spin-button,
.auth-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.auth-field input[type=number]{-moz-appearance:textfield}
.auth-field label{
  position:absolute;left:16px;top:17px;color:var(--auth-muted);font-size:15px;
  pointer-events:none;transition:.15s ease;
}
.auth-field input:focus{border-color:var(--auth-primary);box-shadow:0 0 0 4px var(--auth-ring)}
.auth-field input:focus + label,
.auth-field input:not(:placeholder-shown) + label{
  top:9px;font-size:11.5px;font-weight:600;color:var(--auth-primary);letter-spacing:.2px;
}
.auth-field input::placeholder{color:transparent}

.auth-btn{
  width:100%;height:54px;border:0;border-radius:12px;cursor:pointer;
  background:var(--auth-primary);color:#fff;
  font-family:"Sora",system-ui,sans-serif;font-weight:600;font-size:15.5px;
  transition:background .15s, transform .05s;box-shadow:0 10px 22px rgba(44,85,212,.28);
}
.auth-btn:hover{background:var(--auth-primary-press)}
.auth-btn:active{transform:translateY(1px)}

.auth-links{margin-top:20px;text-align:center;font-size:14px;color:var(--auth-muted)}
.auth-links a{color:var(--auth-primary);text-decoration:none;font-weight:500}
.auth-links a:hover{text-decoration:underline}
.auth-links .sep{margin:0 8px;color:var(--auth-line)}
.auth-foot{margin-top:34px;text-align:center;color:#9AA6BC;font-size:12.5px}

/* ---------- Alerts (replaces Bootstrap .alert used by alert_msg) ---------- */
.alert{
  border-radius:12px;padding:13px 16px;margin-bottom:18px;font-size:14px;
  display:flex;align-items:center;gap:9px;border:1px solid transparent;line-height:1.4;
}
.alert i{opacity:.85}
.alert-danger{background:#FEF2F2;color:#B42318;border-color:#FECACA}
.alert-success{background:#ECFDF5;color:#067647;border-color:#A7F3D0}
.alert-primary,.alert-info{background:#EFF4FF;color:#1F43B3;border-color:#C7D7FE}
.alert-warning{background:#FFFAEB;color:#B54708;border-color:#FEDF89}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .auth-shell{grid-template-columns:1fr}
  .auth-brand{padding:22px 24px;flex-direction:row;align-items:center;justify-content:space-between}
  .auth-lead,.auth-services,.auth-brand-foot{display:none}
  .auth-pane{align-items:flex-start;padding:40px 22px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* =====================================================================
   Legacy compatibility — modernizes pages that still use the Looper
   theme's .auth / .auth-header markup (e.g. Create Account) when this
   stylesheet is loaded AFTER theme.min.css.
   ===================================================================== */
body{font-family:"Inter",system-ui,sans-serif;background:var(--auth-page);}
main.auth{background:var(--auth-page);}
.auth-header{
  background:linear-gradient(120deg,var(--auth-navy),var(--auth-navy-2)) !important;
  color:#EAF1FF !important;border-radius:0 0 22px 22px;padding-top:34px !important;
}
.auth-header::before{background:transparent !important;}
.auth-header p{color:#Bcd3ff !important;font-family:"Sora",sans-serif;font-weight:600;font-size:20px;}
.auth-header .logo{background:#fff;border-radius:12px;padding:6px 10px;height:auto !important;max-height:74px;}
.auth-form .form-control,
.auth-form .form-select,
.auth-form select.form-control{
  border:1.5px solid var(--auth-line) !important;border-radius:10px !important;
  min-height:46px;color:var(--auth-ink);transition:border-color .15s,box-shadow .15s;
}
.auth-form .form-control:focus,
.auth-form select.form-control:focus{
  border-color:var(--auth-primary) !important;box-shadow:0 0 0 4px var(--auth-ring) !important;
}
.auth-form label{font-weight:500;color:#42506B;margin-bottom:4px;}
.auth-form .btn-primary{
  background:var(--auth-primary) !important;border-color:var(--auth-primary) !important;
  border-radius:12px !important;font-family:"Sora",sans-serif;font-weight:600;
  box-shadow:0 10px 22px rgba(44,85,212,.26);
}
.auth-form .btn-primary:hover{background:var(--auth-primary-press) !important;border-color:var(--auth-primary-press) !important;}
a.link{color:var(--auth-primary);text-decoration:none;font-weight:500;}
a.link:hover{text-decoration:underline;}
.auth-footer{color:#9AA6BC;}

/* =====================================================================
   Registration (wide, labeled grid) — create account page
   ===================================================================== */
.auth-pane.is-wide{align-items:flex-start;padding-top:6vh;padding-bottom:6vh}
.auth-card.is-wide{max-width:720px}
.reg-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.reg-grid .full{grid-column:1 / -1}
.reg-field{display:flex;flex-direction:column;gap:6px}
.reg-field label{font-size:12.5px;font-weight:600;color:#42506B}
.reg-field input,
.reg-field select{
  height:48px;padding:0 14px;width:100%;
  border:1.5px solid var(--auth-line);border-radius:11px;background:#fff;
  font-size:14.5px;font-family:inherit;color:var(--auth-ink);outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.reg-field select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:38px;cursor:pointer;
}
.reg-field input::-webkit-outer-spin-button,
.reg-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.reg-field input[type=number]{-moz-appearance:textfield}
.reg-field input:focus,
.reg-field select:focus{border-color:var(--auth-primary);box-shadow:0 0 0 4px var(--auth-ring)}
.reg-submit{margin-top:22px}
@media (max-width:640px){
  .reg-grid{grid-template-columns:1fr}
  .auth-pane.is-wide{padding-top:28px}
}