/* JTechPOS platform auth pages (Login/Register/Forgot/Reset) - standalone, independent of site.css/Bootstrap.
   Same single light palette as home.css so the landing page and the auth flow read as one product. */

:root{
  --font-body: "Inter", "Hind Siliguri", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius-md: 10px;
  --radius-lg: 16px;

  --color-bg: #f4f5fa;
  --color-surface: #fdfdff;
  --color-neutral-200: #e4e6ee;
  --color-neutral-300: #d2d5df;
  --color-neutral-500: #8a8e9b;
  --color-neutral-600: #6a6e7b;
  --color-neutral-700: #50535f;
  --color-neutral-800: #3a3d47;
  --color-neutral-900: #22242a;
  --color-accent-300: #cbc4f1;
  --color-accent-500: #968ae0;
  --color-accent-600: #7468bd;
  --color-accent-700: #5d5294;
  --color-accent-800: #4a4178;

  --color-danger: #9b2c2c; --color-danger-bg: #fdf1f1; --color-danger-border: #f1c9c9;
  --color-success: #23613a; --color-success-bg: #eef7f1; --color-success-border: #c6e3cf;
  --focus-ring: 0 0 0 3px rgba(150,138,224,0.22);
}

*{ box-sizing:border-box; }
body{ margin:0; min-height:100vh; background:var(--color-bg); color:var(--color-neutral-900); font-family:var(--font-body); -webkit-font-smoothing:antialiased; }
a{ color:var(--color-accent-700); text-decoration:none; font-weight:500; }
a:hover{ color:var(--color-accent-600); text-decoration:underline; }
button{ font:inherit; }
input::placeholder{ color:var(--color-neutral-500); }
:focus-visible{ outline:2px solid var(--color-accent-600); outline-offset:2px; }
input:focus-visible{ outline:none; }

.auth-shell{ min-height:100vh; display:flex; flex-wrap:wrap; }

/* ---- left pitch panel ---- */
.auth-aside{
  flex:0.72 1 340px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; gap:40px; padding:40px 44px;
  background:linear-gradient(160deg,#eeecfb 0%,var(--color-bg) 55%,#e9ecf6 100%);
  border-right:1px solid var(--color-neutral-200);
}
.auth-aside-glow{ position:absolute; width:520px; height:520px; border-radius:50%; right:-180px; top:-160px; background:radial-gradient(circle,rgba(150,138,224,0.22),transparent 65%); pointer-events:none; }
.auth-brand{ position:relative; display:flex; align-items:center; gap:10px; color:var(--color-neutral-900); align-self:flex-start; }
.auth-brand:hover{ text-decoration:none; color:var(--color-neutral-900); }
.brand-mark{ width:36px; height:36px; border-radius:var(--radius-md); background:var(--color-accent-700); color:#f5f4ff; display:grid; place-items:center; font-size:20px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-name{ font-weight:600; font-size:16px; letter-spacing:-.01em; }
.brand-sub{ font-size:11px; font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--color-neutral-600); }

.auth-pitch{ position:relative; max-width:440px; display:flex; flex-direction:column; gap:28px; }
.pitch-copy{ display:flex; flex-direction:column; gap:12px; }
.eyebrow{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--color-accent-700); }
.pitch-copy h2{ font-size:38px; line-height:1.12; font-weight:500; letter-spacing:-.02em; margin:0; text-wrap:pretty; }
.pitch-copy p{ margin:0; font-size:15px; line-height:1.6; color:var(--color-neutral-700); text-wrap:pretty; }

.pitch-points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.pitch-points li{ display:flex; gap:12px; align-items:flex-start; }
.pitch-points li > span:last-child{ display:flex; flex-direction:column; }
.pitch-points strong{ font-weight:500; font-size:14px; }
.pitch-points li > span:last-child > span{ font-size:13px; color:var(--color-neutral-600); }
.point-icon{ width:32px; height:32px; flex:none; border-radius:var(--radius-md); background:var(--color-surface); border:1px solid var(--color-neutral-200); display:grid; place-items:center; color:var(--color-accent-700); font-size:17px; }

.pitch-stats{ margin:0; display:flex; flex-direction:column; }
.pitch-stats > div{ display:grid; grid-template-columns:72px 1fr; align-items:baseline; gap:12px; padding:12px 0; border-top:1px solid var(--color-neutral-200); }
.pitch-stats dt{ font-size:20px; font-weight:500; letter-spacing:-.01em; color:var(--color-accent-700); }
.pitch-stats dd{ margin:0; font-size:14px; color:var(--color-neutral-700); }

.auth-copy{ position:relative; font-size:12px; color:var(--color-neutral-600); }

/* ---- right form panel ---- */
.auth-main{ flex:1.28 1 520px; display:flex; align-items:center; justify-content:center; padding:24px 32px; }
.auth-form-col{ width:100%; max-width:440px; display:flex; flex-direction:column; gap:18px; }
.auth-form-col.auth-form-wide{ max-width:600px; }

.seg{ display:inline-flex; align-self:flex-start; padding:3px; gap:2px; border-radius:999px; background:var(--color-neutral-200); border:1px solid var(--color-neutral-300); }
.seg a{ display:inline-flex; align-items:center; height:32px; padding:0 16px; border-radius:999px; font-size:13px; font-weight:500; color:var(--color-neutral-600); }
.seg a:hover{ text-decoration:none; color:var(--color-neutral-900); }
.seg a.active{ background:var(--color-surface); color:var(--color-neutral-900); box-shadow:0 1px 2px rgba(41,43,49,0.12); }

.auth-heading{ font-size:28px; font-weight:500; letter-spacing:-.02em; margin:0; }
.auth-form-wide .auth-heading{ font-size:24px; }
.auth-heading + .auth-sub{ margin-top:-12px; }
.auth-sub{ margin:0; font-size:14px; line-height:1.5; color:var(--color-neutral-600); }

.auth-form{ display:flex; flex-direction:column; gap:16px; margin-top:4px; }
.auth-form-wide .auth-form{ gap:16px; }
.form-section{ display:flex; flex-direction:column; gap:8px; }
.form-section-title{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--color-neutral-600); }

.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.auth-form-wide .field{ gap:5px; }
.field label, .field-label{ font-size:13px; font-weight:500; color:var(--color-neutral-800); }
.label-row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.label-row a{ font-size:13px; white-space:nowrap; }
.optional{ font-weight:400; color:var(--color-neutral-500); }
.field-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px; }

.input{
  width:100%; min-width:0; height:44px; padding:0 12px; font:inherit; font-size:14px; color:var(--color-neutral-900);
  background:var(--color-surface); border:1px solid var(--color-neutral-300); border-radius:var(--radius-md); outline:none;
}
.auth-form-wide .input{ height:40px; }
.input:focus{ border-color:var(--color-accent-600); box-shadow:var(--focus-ring); }
.input.input-validation-error{ border-color:#d88a8a; }

.input-icon{ position:relative; display:flex; align-items:center; }
.input-icon > i{ position:absolute; left:12px; font-size:17px; color:var(--color-neutral-500); pointer-events:none; }
.input-icon > .input{ padding-left:38px; }

.pass-wrap{ position:relative; display:flex; align-items:center; }
.pass-wrap .input{ padding-right:44px; }
.pass-toggle{ position:absolute; right:4px; width:36px; height:36px; border:0; background:transparent; border-radius:6px; cursor:pointer; color:var(--color-neutral-600); display:grid; place-items:center; font-size:17px; }
.auth-form-wide .pass-toggle{ width:34px; height:34px; font-size:16px; }
.pass-toggle:hover{ background:var(--color-neutral-200); }

.input-group{ display:flex; border:1px solid var(--color-neutral-300); border-radius:var(--radius-md); background:var(--color-surface); overflow:hidden; }
.input-group:focus-within{ border-color:var(--color-accent-600); box-shadow:var(--focus-ring); }
.input-group .input{ flex:1; border:0; border-radius:0; background:transparent; box-shadow:none; padding:0 10px; height:38px; }
.input-group-text{ display:flex; align-items:center; padding:0 10px; background:var(--color-neutral-200); color:var(--color-neutral-700); font-size:12px; white-space:nowrap; border-left:1px solid var(--color-neutral-300); }
.input-group:has(.input-validation-error){ border-color:#d88a8a; }

.field-help{ font-size:12px; line-height:1.4; color:var(--color-neutral-500); margin:0; }
.field-help:empty{ display:none; }
.field-help.is-ok{ color:var(--color-success); }
.field-help.is-taken{ color:var(--color-danger); }
.field-error{ font-size:12px; color:var(--color-danger); }
.field-error:empty{ display:none; }

.check-row{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--color-neutral-700); cursor:pointer; }
.check-row input{ width:16px; height:16px; margin:0; accent-color:var(--color-accent-700); }

/* alerts & validation summary */
.alert, .validation-summary-errors{ display:flex; gap:8px; align-items:flex-start; padding:10px 12px; border-radius:var(--radius-md); font-size:13px; line-height:1.45; }
.alert i{ font-size:16px; flex:none; margin-top:1px; }
.alert-success{ background:var(--color-success-bg); border:1px solid var(--color-success-border); color:var(--color-success); }
.validation-summary-valid{ display:none; }
.validation-summary-errors{ background:var(--color-danger-bg); border:1px solid var(--color-danger-border); color:var(--color-danger); }
.validation-summary-errors::before{ content:""; flex:none; width:16px; height:16px; margin-top:1px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm-8-80V80a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0Zm20 36a12 12 0 1 1-12-12 12 12 0 0 1 12 12Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm-8-80V80a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0Zm20 36a12 12 0 1 1-12-12 12 12 0 0 1 12 12Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.validation-summary-errors ul{ margin:0; padding:0; list-style:none; }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 18px; border-radius:var(--radius-md); border:1px solid transparent; font-size:14px; font-weight:500; cursor:pointer; white-space:nowrap; }
.btn:hover{ text-decoration:none; }
.btn-primary{ border:0; background:var(--color-accent-700); color:#f5f4ff; box-shadow:0 1px 2px rgba(41,43,49,0.12),0 4px 12px rgba(93,82,148,0.22); }
.btn-primary:hover{ background:var(--color-accent-600); color:#f5f4ff; }
.btn-primary:active{ background:var(--color-accent-800); }
.btn-primary[disabled]{ opacity:.7; cursor:progress; }
.btn-secondary{ background:var(--color-surface); border-color:var(--color-neutral-300); color:var(--color-neutral-900); }
.btn-secondary:hover{ border-color:var(--color-accent-500); color:var(--color-accent-700); }
.btn-block{ width:100%; }
.auth-form-wide .btn-block{ height:40px; }

.auth-note{ margin:0; text-align:center; font-size:14px; color:var(--color-neutral-600); }

.auth-foot{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px 16px; font-size:12px; color:var(--color-neutral-500); margin-top:4px; }
.auth-foot span{ display:flex; align-items:center; gap:6px; }
.auth-foot i{ font-size:14px; }
.auth-foot a{ font-size:12px; font-weight:400; color:var(--color-neutral-600); }

/* ---- package cards (Register) ---- */
.package-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.package-radio{ position:absolute; opacity:0; pointer-events:none; }
.package-option{
  height:100%; display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:var(--radius-md); cursor:pointer;
  border:1px solid var(--color-neutral-300); background:var(--color-surface); transition:border-color .15s, box-shadow .15s, background .15s;
}
.package-option:hover{ border-color:var(--color-accent-500); }
.package-radio:checked + .package-option{ border:1.5px solid var(--color-accent-600); background:#f5f4ff; box-shadow:0 0 0 3px rgba(150,138,224,0.18); }
.package-radio:focus-visible + .package-option{ outline:2px solid var(--color-accent-600); outline-offset:2px; }
.pkg-top{ display:flex; justify-content:space-between; align-items:center; }
.pkg-name{ font-size:14px; font-weight:600; color:var(--color-neutral-900); }
.pkg-top i{ font-size:16px; color:var(--color-accent-700); }
.pkg-top .pkg-on{ display:none; }
.package-radio:checked + .package-option .pkg-on{ display:inline-block; }
.package-radio:checked + .package-option .pkg-off{ display:none; }
.pkg-price{ font-size:13px; font-weight:500; color:var(--color-accent-700); }
.pkg-desc{ font-size:12px; line-height:1.45; color:var(--color-neutral-600); text-wrap:pretty; }

/* ---- responsive ---- */
@media (max-width:900px){
  .auth-aside{ flex-basis:100%; padding:20px 16px; border-right:0; border-bottom:1px solid var(--color-neutral-200); flex-direction:row; align-items:center; }
  .auth-pitch, .auth-copy, .auth-aside-glow{ display:none; }
  .auth-main{ flex-basis:100%; padding:28px 16px 40px; align-items:flex-start; }
}
@media (max-width:560px){
  .field-row{ grid-template-columns:1fr; }
  .package-grid{ grid-template-columns:1fr; }
}