/*=========================================================================================
  File Name: login-redesign.css
  Description: Standalone design for the admin login page (resources/views/admin/auth/login.blade.php).
  Self-contained — does not depend on Bootstrap/vendor CSS.
==========================================================================================*/

:root{
  --lr-bg-1:#0f1120;
  --lr-bg-2:#181b2e;
  --lr-card:rgba(255,255,255,0.045);
  --lr-card-border:rgba(255,255,255,0.09);
  --lr-text:#f3f1ec;
  --lr-text-dim:#a9a7bb;
  --lr-text-faint:#7d7b93;
  --lr-accent-1:#e2a53f;
  --lr-accent-2:#c9723c;
  --lr-accent-3:#7c6cf0;
  --lr-danger:#e85a5a;
  --lr-danger-bg:rgba(232,90,90,0.12);
  --lr-success:#4bbf85;
  --lr-success-bg:rgba(75,191,133,0.12);
  --lr-radius-lg:22px;
  --lr-radius-md:14px;
  --lr-font-display:'Playfair Display', serif;
  --lr-font-body:'DM Sans', sans-serif;
}

.page-login,
.page-login *{
  box-sizing:border-box;
}

.page-login{
  margin:0;
  min-height:100vh;
  font-family:var(--lr-font-body);
  color:var(--lr-text);
  background:radial-gradient(circle at 15% 20%, var(--lr-bg-2), var(--lr-bg-1) 60%);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ===== animated background ===== */
.bg-layer{
  position:fixed;
  inset:0;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}

.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:0.45;
  animation:lr-float 14s ease-in-out infinite;
}

.orb-1{
  width:420px;
  height:420px;
  top:-10%;
  left:-8%;
  background:radial-gradient(circle, var(--lr-accent-1), transparent 70%);
  animation-delay:0s;
}

.orb-2{
  width:380px;
  height:380px;
  bottom:-12%;
  right:-6%;
  background:radial-gradient(circle, var(--lr-accent-3), transparent 70%);
  animation-delay:-4s;
}

.orb-3{
  width:300px;
  height:300px;
  bottom:20%;
  left:35%;
  background:radial-gradient(circle, var(--lr-accent-2), transparent 70%);
  animation-delay:-8s;
  opacity:0.3;
}

@keyframes lr-float{
  0%, 100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(3%, -4%) scale(1.08); }
}

/* ===== layout ===== */
.page-wrapper{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem 1.25rem;
}

.login-card{
  width:100%;
  max-width:430px;
  background:var(--lr-card);
  border:1px solid var(--lr-card-border);
  border-radius:var(--lr-radius-lg);
  padding:2.75rem 2.5rem 2.25rem;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.02) inset;
  animation:lr-rise .5s ease;
}

@keyframes lr-rise{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ===== brand ===== */
.brand{
  text-align:center;
  margin-bottom:1.5rem;
}

.brand-icon{
  width:56px;
  height:56px;
  margin:0 auto 1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
  border-radius:16px;
  background:linear-gradient(135deg, var(--lr-accent-1), var(--lr-accent-2));
  box-shadow:0 10px 24px -8px rgba(226,165,63,0.55);
}

.brand h1{
  font-family:var(--lr-font-display);
  font-weight:800;
  font-size:1.55rem;
  letter-spacing:.2px;
  margin:0 0 .35rem;
  color:var(--lr-text);
}

.brand-tagline{
  margin:0;
  font-size:.83rem;
  color:var(--lr-text-dim);
  letter-spacing:.2px;
}

.divider-line{
  height:1px;
  margin:1.5rem 0 1.65rem;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
}

/* ===== form ===== */
.form-group{
  margin-bottom:1.25rem;
}

.form-group label{
  display:block;
  font-size:.8rem;
  font-weight:500;
  color:var(--lr-text-dim);
  margin-bottom:.5rem;
}

.input-wrap{
  position:relative;
  display:flex;
  align-items:center;
}

.input-icon{
  position:absolute;
  left:14px;
  display:flex;
  color:var(--lr-text-faint);
  pointer-events:none;
}

.input-wrap input{
  width:100%;
  height:46px;
  padding:0 44px;
  background:rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--lr-radius-md);
  color:var(--lr-text);
  font-family:var(--lr-font-body);
  font-size:.92rem;
  outline:none;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.input-wrap input::placeholder{
  color:var(--lr-text-faint);
}

.input-wrap input:focus{
  border-color:var(--lr-accent-1);
  background:rgba(255,255,255,0.055);
  box-shadow:0 0 0 3px rgba(226,165,63,0.15);
}

.toggle-pw{
  position:absolute;
  right:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  padding:6px;
  color:var(--lr-text-faint);
  cursor:pointer;
  border-radius:8px;
  transition:color .15s ease;
}

.toggle-pw:hover{
  color:var(--lr-text-dim);
}

.field-error{
  display:none;
  margin-top:.45rem;
  font-size:.76rem;
  color:var(--lr-danger);
}

.form-group.has-error .input-wrap input{
  border-color:rgba(232,90,90,0.55);
  background:rgba(232,90,90,0.06);
}

.form-group.has-error .field-error{
  display:block;
}

/* ===== footer row / forgot link ===== */
.form-footer-row{
  display:flex;
  justify-content:flex-end;
  margin:-.5rem 0 1.25rem;
}

.forgot-link{
  font-size:.8rem;
  color:var(--lr-accent-1);
  text-decoration:none;
}

.forgot-link:hover{
  text-decoration:underline;
}

.remember-row{
  justify-content:space-between;
  align-items:center;
}

.remember-check{
  display:flex;
  align-items:center;
  gap:.45rem;
  font-size:.8rem;
  color:var(--lr-text-dim);
  cursor:pointer;
}

.remember-check input[type="checkbox"]{
  width:15px;
  height:15px;
  margin:0;
  accent-color:var(--lr-accent-1);
  cursor:pointer;
}

/* ===== message box (session success / error) ===== */
.msg-box{
  display:none;
  align-items:flex-start;
  gap:.6rem;
  padding:.75rem .9rem;
  border-radius:var(--lr-radius-md);
  font-size:.82rem;
  line-height:1.4;
  margin-bottom:1.25rem;
}

.msg-box.visible{
  display:flex;
}

.msg-box.error{
  background:var(--lr-danger-bg);
  border:1px solid rgba(232,90,90,0.3);
  color:#f3b9b9;
}

.msg-box.success{
  background:var(--lr-success-bg);
  border:1px solid rgba(75,191,133,0.3);
  color:#a9e6c5;
}

/* ===== submit button ===== */
.btn-login{
  width:100%;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border:none;
  border-radius:var(--lr-radius-md);
  background:linear-gradient(135deg, var(--lr-accent-1), var(--lr-accent-2));
  color:#1a1206;
  font-family:var(--lr-font-body);
  font-weight:600;
  font-size:.95rem;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  box-shadow:0 14px 28px -10px rgba(226,165,63,0.45);
}

.btn-login:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 18px 34px -10px rgba(226,165,63,0.55);
}

.btn-login:disabled{
  opacity:.75;
  cursor:default;
  transform:none;
}

.btn-spinner{
  display:none;
  width:17px;
  height:17px;
  border-radius:50%;
  border:2px solid rgba(26,18,6,0.35);
  border-top-color:#1a1206;
  animation:lr-spin .7s linear infinite;
}

@keyframes lr-spin{
  to{ transform:rotate(360deg); }
}

/* ===== bottom note ===== */
.bottom-note{
  margin-top:1.75rem;
  text-align:center;
  font-size:.75rem;
  line-height:1.6;
  color:var(--lr-text-faint);
}

.bottom-note span{
  color:var(--lr-text-dim);
}

/* ===== responsive ===== */
@media (max-width:480px){
  .login-card{
    padding:2.25rem 1.5rem 2rem;
  }
}