/* =========================================================
   REINO MART · Reino Fresh design system
   Login / Register / Forgot
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --brand:#6C4DF6; --brand-600:#5B3BE0; --brand-700:#4A2FC9;
  --grad:linear-gradient(150deg,#5B3BE0 0%,#7C4DF6 55%,#9366FF 100%);
  --ink:#1B1830; --label:#3D3A52; --muted:#726E86; --faint:#A7A3B8;
  --line:#ECEAF4; --line-2:#E6E3F2; --field:#FBFAFF;
  --bg:#F6F5FB; --surface:#FFFFFF;
  --success:#0F9B57; --success-bg:#E7F8EF;
  --warn:#C77A16;   --warn-bg:#FFF4E5;
  --danger:#E5395F; --danger-bg:#FDECF1;
  --radius:20px; --radius-sm:14px; --radius-xs:12px; --pill:100px;
  --shadow:0 16px 34px rgba(76,45,150,.10);
  --shadow-btn:0 10px 24px rgba(108,77,246,.32);
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}

*{ box-sizing:border-box; }
::placeholder{ color:var(--faint); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#DAD6E8; border-radius:20px; border:3px solid var(--bg); }

html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

/* =============== SPLIT AUTH LAYOUT (index.php) =============== */
.auth{ min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr; }

.auth-hero{
  position:relative; overflow:hidden; color:#fff; background:var(--grad);
  padding:56px 60px; display:flex; flex-direction:column; justify-content:space-between;
}
.auth-hero__bubble{ position:absolute; border-radius:50%; }
.auth-hero__bubble--1{ width:520px; height:520px; background:rgba(255,255,255,.09); right:-160px; top:-160px; }
.auth-hero__bubble--2{ width:300px; height:300px; background:rgba(255,255,255,.07); left:-90px; bottom:-90px; }

.auth-brand{ position:relative; display:flex; align-items:center; gap:12px; }
.auth-brand__mark{
  width:44px; height:44px; border-radius:13px; background:#fff; color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:22px;
  box-shadow:0 8px 20px rgba(0,0,0,.18); overflow:hidden;
}
.auth-brand__mark img{ display:none; }
.auth-brand__name{ line-height:1; }
.auth-brand__name b{ font-weight:800; font-size:19px; letter-spacing:.2px; display:block; }
.auth-brand__name span{ font-size:11px; letter-spacing:2px; opacity:.75; font-weight:600; margin-top:3px; display:block; }

.auth-hero__body{ position:relative; max-width:420px; }
.auth-hero__eyebrow{ font-size:13px; font-weight:700; letter-spacing:2px; opacity:.7; margin-bottom:16px; }
.auth-hero__body h1{ font-size:44px; line-height:1.1; font-weight:800; margin:0 0 18px; letter-spacing:-.5px; }
.auth-hero__body p{ font-size:16px; line-height:1.6; opacity:.82; margin:0 0 28px; }
.auth-hero__pills{ display:flex; gap:10px; flex-wrap:wrap; }
.auth-hero__pills span{ background:rgba(255,255,255,.16); padding:9px 15px; border-radius:var(--pill); font-size:13px; font-weight:600; backdrop-filter:blur(4px); }
.auth-hero__foot{ position:relative; font-size:13px; opacity:.6; font-weight:500; }

.auth-panel{ display:flex; align-items:center; justify-content:center; padding:40px; }
.auth-card{ width:100%; max-width:400px; }
.auth-card form{ display:flex; flex-direction:column; }
.auth-card h2{ font-size:30px; font-weight:800; margin:0 0 6px; letter-spacing:-.4px; color:var(--ink); }
.auth-card h2::after{ content:none; }
.auth-sub{ font-size:15px; color:var(--muted); margin:0 0 30px; }

.auth-card label:not(.remember){ display:block; font-size:13px; font-weight:700; margin-bottom:8px; color:var(--label); }

.field{ position:relative; margin-bottom:20px; }
.field__icon{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--faint); font-size:16px; }
.field input{
  width:100%; height:52px; border:1.5px solid var(--line-2); border-radius:var(--radius-sm);
  background:var(--field); padding:0 16px 0 44px; font-size:15px; font-family:inherit; color:var(--ink);
  transition:border-color .15s, box-shadow .15s, background .15s; margin:0;
}
.field input:focus{ outline:none; border-color:var(--brand); background:#fff; box-shadow:0 0 0 4px rgba(108,77,246,.12); }

.auth-row{ display:flex; align-items:center; justify-content:space-between; margin:-2px 0 26px; }
.remember{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); font-weight:500; cursor:pointer; }
.remember input{ width:16px; height:16px; accent-color:var(--brand); }
.auth-row a{ font-size:13.5px; color:var(--brand); font-weight:700; }

.auth-card button, .box button{
  width:100%; height:54px; border:none; border-radius:var(--radius-sm); background:var(--brand); color:#fff;
  font-size:16px; font-weight:700; font-family:inherit; cursor:pointer; margin:0;
  box-shadow:var(--shadow-btn); transition:transform .12s, box-shadow .12s;
}
.auth-card button:hover, .box button:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(108,77,246,.40); }
.auth-card button:active{ transform:translateY(0); }

.auth-switch{ text-align:center; margin-top:22px; font-size:14px; color:var(--muted); }
.auth-switch a{ color:var(--brand); font-weight:700; }

a{ color:var(--brand); font-weight:600; text-decoration:none; }
a:hover{ text-decoration:underline; }

.msg{ color:var(--danger); text-align:center; font-weight:700; font-size:13.5px; margin-top:14px; }
.msgright{ color:var(--success); text-align:center; font-weight:700; font-size:13.5px; margin-top:14px; }

/* =============== CENTERED CARD (forgot.php) =============== */
.box{
  position:relative; width:100%; max-width:400px; background:var(--surface);
  padding:38px 34px 32px; border:1px solid var(--line); border-radius:24px;
  box-shadow:var(--shadow); margin:40px auto;
}
body:has(.box){ display:flex; align-items:center; justify-content:center; padding:24px; }
.box h2{ font-size:26px; font-weight:800; letter-spacing:-.3px; margin:0 0 6px; text-align:center; }
.box form{ display:flex; flex-direction:column; }
.box input{
  width:100%; height:52px; border:1.5px solid var(--line-2); border-radius:var(--radius-sm);
  background:var(--field); padding:0 16px; font-size:15px; font-family:inherit; color:var(--ink);
  margin:8px 0; transition:border-color .15s, box-shadow .15s, background .15s;
}
.box input:focus{ outline:none; border-color:var(--brand); background:#fff; box-shadow:0 0 0 4px rgba(108,77,246,.12); }
.box button{ margin-top:16px; }
.box p{ text-align:center; font-size:13.5px; color:var(--muted); margin:14px 0 0; }

/* =============== RESPONSIVE =============== */
@media (max-width:860px){
  .auth{ grid-template-columns:1fr; }
  .auth-hero{ padding:40px 34px; min-height:auto; }
  .auth-hero__body h1{ font-size:32px; }
  .auth-hero__body{ margin:26px 0; }
  .auth-panel{ padding:34px 24px 48px; }
}
@media (max-width:430px){
  .auth-hero{ padding:32px 24px; }
  .auth-hero__body h1{ font-size:27px; }
  .box{ padding:30px 22px 26px; }
}

/* real logo on purple login panel */
.auth-logo{ height:42px; width:auto; max-width:230px; display:block; }