/* Design tokens live in assets/tokens.css — a single :root for the
   whole app. This file used to carry its own copy; five copies had
   already drifted apart before they were merged. Do not reintroduce
   one here. */
/* ===========================================================
   iTumbuh — Auth pages (Login / Register) shared stylesheet
   Design tokens mirrored 1:1 from the marketing site (index.html)
   =========================================================== */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Outfit',sans-serif;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-0.02em;line-height:1.15;}
p{margin:0;line-height:1.6;}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:4px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:52px;padding:0 28px;border-radius:var(--radius-md);
  font-weight:600;font-size:16px;white-space:nowrap;
  transition:all .2s ease;
}
.btn-primary{background:var(--primary-dark);color:var(--on-primary);}
.btn-primary:hover{background:var(--primary-ink);transform:scale(1.02);}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none;}
.btn-block{width:100%;}

/* ---------- Top utility bar ---------- */
.auth-topbar{
  position:absolute;top:0;left:0;right:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 32px;
}
.back-home{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;
  color:var(--fg);padding:8px 10px;border-radius:var(--radius-md);transition:background .2s;
}
.back-home:hover{background:var(--muted);}
.back-home svg{width:18px;height:18px;flex-shrink:0;}
.lang-switch{display:flex;background:var(--muted);border-radius:999px;padding:4px;gap:2px;}
.lang-switch button{padding:7px 13px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.03em;color: var(--fg-muted);transition:all .2s;}
.lang-switch button.active{background:var(--primary-dark);color:var(--on-primary);}

/* ---------- Shell: split screen ---------- */
.auth-shell{min-height:100vh;display:grid;grid-template-columns:47% 53%;}

/* ---- Left: visual / brand panel ---- */
.auth-visual{
  position:relative;background:var(--primary-dark);color:var(--on-primary);overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:64px 56px;
}
.auth-visual .decor{position:absolute;border-radius:50%;background:#fff;opacity:.08;}
.auth-visual .decor.d1{width:380px;height:380px;top:-140px;right:-130px;}
.auth-visual .decor.d2{width:240px;height:240px;bottom:-110px;left:-90px;}
.auth-visual .decor.d3{width:16px;height:16px;top:18%;left:12%;opacity:.5;border-radius:4px;transform:rotate(20deg);}
.auth-visual .decor.d4{width:120px;height:120px;top:38%;right:8%;opacity:.09;border-radius:var(--radius-lg);transform:rotate(18deg);}
.auth-visual-inner{position:relative;z-index:1;max-width:460px;}
.auth-logo{
  width:72px;height:72px;border-radius:var(--radius-lg);overflow:hidden;
  background:transparent;margin-bottom:40px;
}
.auth-logo img{width:100%;height:100%;object-fit:cover;display:block;}
.auth-visual h1{font-size:42px;color:#fff;margin-bottom:20px;line-height:1.12;}
.auth-visual .lead{font-size:19px;line-height:1.65;color:rgba(255,255,255,.94);margin-bottom:44px;}
.auth-feature-list{display:flex;flex-direction:column;gap:26px;margin-bottom:44px;}
.auth-feature-list li{display:flex;align-items:flex-start;gap:16px;}
.auth-feature-list .ic{
  width:48px;height:48px;border-radius:var(--radius-md);background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.auth-feature-list .ic svg{width:24px;height:24px;}
.auth-feature-list b{display:block;font-size:18px;font-weight:700;margin-bottom:4px;}
.auth-feature-list span{display:block;font-size:15px;line-height:1.5;color:rgba(255,255,255,.88);}
.auth-quote{
  background:rgba(255,255,255,.12);border-radius:var(--radius-lg);padding:26px 28px;
}
.auth-quote p{font-size:17px;line-height:1.55;color:#fff;margin-bottom:16px;font-style:normal;}
.auth-quote .who{display:flex;align-items:center;gap:12px;}
.auth-quote .who-avatar{
  width:42px;height:42px;border-radius:50%;background:#fff;color: var(--primary-ink);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex-shrink:0;
}
.auth-quote .who-name{font-size:15px;font-weight:700;}
.auth-quote .who-role{font-size:13px;color:rgba(255,255,255,.82);}

/* ---- Right: form panel ---- */
.auth-form-side{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:88px 32px 40px;background:#fff;
}
.auth-card{width:100%;max-width:440px;}
.auth-card .eyebrow-tag{
  display:inline-flex;align-items:center;gap:6px;background:#EFF6FF;color: var(--primary-ink);
  font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;margin-bottom:18px;
}
.auth-card h2{font-size:28px;margin-bottom:8px;}
.auth-card .sub{font-size:15px;color:#4B5563;margin-bottom:26px;}
.auth-card .sub a{color: var(--primary-ink);font-weight:600;}
.auth-card .sub a:hover{text-decoration:underline;}

/* ---------- Form elements ---------- */
.form-group{margin-bottom:16px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
label{
  display:block;font-size:13px;font-weight:600;color:var(--fg);margin-bottom:8px;
}
label .opt{font-weight:400;color: var(--fg-muted);}
.input-wrap{position:relative;}
input[type="text"],input[type="email"],input[type="tel"],input[type="password"]{
  width:100%;height:48px;padding:0 16px;border-radius:var(--radius-md);
  background:var(--muted);border:2px solid transparent;color:var(--fg);
  font-family:inherit;font-size:15px;transition:all .15s ease;
}
.input-wrap.has-icon input{padding-right:48px;}
/* Edge/IE inject their own built-in reveal-password eye icon inside
   type="password" fields — left on, it renders right alongside our own
   custom eye button, showing what looks like two overlapping eye icons
   in the same field. Suppress the browser's native one so ours is the
   only control. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear{display:none;}
input::placeholder{color: var(--fg-muted);}
input:hover{background:#ECEDF0;}
input:focus{outline:none;background:#fff;border-color:var(--primary);}
input.invalid{border-color:var(--danger);background:#FEF2F2;}
.field-hint{display:block;margin-top:6px;font-size:12px;color: var(--fg-muted);}
.field-error{display:none;margin-top:6px;font-size:12px;color: var(--danger-ink);font-weight:600;}
.field-error.show{display:block;}
.icon-btn-inline{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;color: var(--fg-muted);
  transition:background .15s;
}
.icon-btn-inline:hover{background:#E5E7EB;color:var(--fg);}
.icon-btn-inline svg{width:20px;height:20px;}

/* Checkbox */
.check-row{display:flex;align-items:flex-start;gap:10px;}
.check-row input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:24px;height:24px;flex-shrink:0;margin-top:1px;
  border:2px solid var(--border);border-radius:6px;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:all .15s;
}
.check-row input[type="checkbox"]:hover{border-color:var(--primary);}
.check-row input[type="checkbox"]:checked{background:var(--primary);border-color:var(--primary);}
.check-row input[type="checkbox"]:checked::after{
  content:"";width:11px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;
  transform:rotate(-45deg) translate(1px,-1px);
}
.check-row label{margin:0;font-size:13px;font-weight:500;color:#4B5563;cursor:pointer;line-height:1.5;}
.check-row label a{color: var(--primary-ink);font-weight:600;}
.check-row label a:hover{text-decoration:underline;}
.row-between{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:10px;}
.row-between .forgot{font-size:13px;font-weight:600;color: var(--primary-ink);
  /* a standalone link, not inline prose — needs a tappable height */
  display:inline-flex;align-items:center;min-height:40px;padding:2px;}
.row-between .forgot:hover{text-decoration:underline;}

/* Divider */
.divider{display:flex;align-items:center;gap:14px;margin:28px 0;}
.divider::before,.divider::after{content:"";flex:1;height:2px;background:var(--border);}
.divider span{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color: var(--fg-muted);}

/* Role badge (register) */
.role-badge{
  display:inline-flex;align-items:center;gap:10px;background:#ECFDF5;border-radius:var(--radius-md);
  padding:12px 16px;margin-bottom:28px;
}
.role-badge .ic{
  width:34px;height:34px;border-radius:50%;background:var(--secondary);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.role-badge .ic svg{width:17px;height:17px;}
.role-badge b{display:block;font-size:13px;font-weight:700;color: var(--secondary-ink);}
.role-badge span{display:block;font-size:12px;color:#065F46;}

/* Alert (mock success/error banner, hidden by default) */
.form-alert{
  display:none;align-items:flex-start;gap:10px;background:#FEF2F2;color:#991B1B;
  border-radius:var(--radius-md);padding:14px 16px;margin-bottom:22px;font-size:13px;font-weight:600;
}
.form-alert.show{display:flex;}
.form-alert svg{width:18px;height:18px;flex-shrink:0;margin-top:1px;}

.auth-footer-note{margin-top:22px;font-size:13px;color:var(--fg-muted);text-align:center;}

/* ---------- Success Modal (shared: register / login / staff-login) ---------- */
.modal-overlay{
  position:fixed;inset:0;z-index:999;
  display:flex;align-items:center;justify-content:center;
  background:rgba(17,24,39,.55);
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
  padding:20px;
}
.modal-overlay.show{opacity:1;pointer-events:auto;}
.modal-box{
  background:#fff;border-radius:var(--radius-lg);
  padding:44px 36px 36px;max-width:380px;width:100%;text-align:center;
  transform:scale(.82) translateY(14px);opacity:0;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
.modal-overlay.show .modal-box{transform:scale(1) translateY(0);opacity:1;}
.modal-icon-circle{
  width:68px;height:68px;border-radius:50%;background:var(--secondary);
  display:flex;align-items:center;justify-content:center;margin:0 auto 22px;
  transform:scale(0);transition:transform .4s cubic-bezier(.34,1.56,.64,1) .1s;
}
.modal-overlay.show .modal-icon-circle{transform:scale(1);}
.modal-icon-circle svg{width:32px;height:32px;}
.modal-box h3{font-size:22px;margin-bottom:10px;}
.modal-box p{font-size:14px;color:#4B5563;margin-bottom:26px;}
.modal-progress{height:4px;border-radius:999px;background:var(--muted);overflow:hidden;}
.modal-progress-bar{height:100%;width:0%;background:var(--primary);border-radius:999px;transition:width 1.6s linear;}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .auth-shell{grid-template-columns:1fr;}
  .auth-visual{order:-1;padding:36px 24px 32px;min-height:auto;}
  .auth-visual-inner{max-width:100%;}
  .auth-logo{width:52px;height:52px;margin-bottom:20px;}
  .auth-visual h1{font-size:26px;margin-bottom:12px;}
  .auth-visual .lead{font-size:15px;margin-bottom:0;}
  .auth-feature-list{display:none;}
  .auth-quote{display:none;}
  .auth-visual .decor.d1{width:220px;height:220px;top:-90px;right:-80px;}
  .auth-visual .decor.d2{width:140px;height:140px;bottom:-60px;left:-50px;}
  .auth-visual .decor.d4{display:none;}

  .auth-form-side{
    display:block;
    padding:0 24px 48px;
  }
  .auth-topbar{
    position:static;
    display:flex;
    padding:16px 0;
    margin-bottom:8px;
  }
  .auth-card{
    max-width:100%;
    margin:0 auto;
  }
  .form-row{grid-template-columns:1fr;gap:0;}
}
@media (max-width:480px){
  .auth-visual{padding:32px 20px 28px;}
  .auth-logo{width:46px;height:46px;margin-bottom:16px;}
  .auth-visual h1{font-size:23px;}
  .auth-visual .lead{font-size:14px;}
  .auth-card h2{font-size:22px;}
  .back-home span{display:none;}
}
/* Desktop content scales up to match the more readable browser-zoom look */
@media (min-width:961px){
  html{zoom:1.1;}
}

/* The remember-me checkbox rendered at the browser default 13px box,
   which is an awkward target on a phone. */
input[type="checkbox"]#remember{width:24px;height:24px;accent-color:var(--primary-dark);cursor:pointer;}
/* 24px is already the WCAG 2.5.8 minimum, so the phone breakpoint no
   longer needs to nudge it up from a smaller default. */