/* ═══════════════════════════════════════════════════════════
   SHEINPROXY — Auth Pages (Login / Register)
   ═══════════════════════════════════════════════════════════ */

.auth-body { min-height:100vh; background:var(--clr-bg); }

/* ─── SPLIT LAYOUT ─── */
.auth-layout {
  display:grid;
  grid-template-columns:420px 1fr;
  min-height:100vh;
}

/* ─── LEFT PANEL (coral gradient) ─── */
.auth-panel {
  background:linear-gradient(160deg, var(--clr-accent) 0%, #c9a55a 100%);
  color:#fff;
  padding:var(--sp-7) var(--sp-6);
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.auth-panel::before {
  content:''; position:absolute;
  width:320px; height:320px; border-radius:50%;
  background:rgba(255,255,255,.07);
  bottom:-100px; right:-80px;
  pointer-events:none;
}
.auth-panel::after {
  content:''; position:absolute;
  width:180px; height:180px; border-radius:50%;
  background:rgba(255,255,255,.05);
  top:60px; left:-60px;
  pointer-events:none;
}
.auth-panel .logo { color:#fff; font-size:24px; position:relative; z-index:1; }
.auth-panel .logo span { color:rgba(255,255,255,.75); }

.auth-panel-content { position:relative; z-index:1; }
.auth-panel-content h2 {
  font-family:var(--font-display); font-size:38px; font-weight:800;
  line-height:1.1; margin-bottom:var(--sp-3);
}
.auth-panel-content p { font-size:15px; opacity:.82; line-height:1.55; max-width:300px; }

/* Checklist (register panel) */
.auth-panel-checklist { position:relative; z-index:1; display:flex; flex-direction:column; gap:14px; }
.apc-item { display:flex; align-items:center; gap:10px; font-size:15px; }
.apc-check {
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
  flex-shrink:0;
}

/* Stats (login panel) */
.auth-panel-stats { position:relative; z-index:1; display:flex; gap:var(--sp-6); }
.ap-stat .ap-num { font-family:var(--font-display); font-size:22px; font-weight:800; display:block; }
.ap-stat .ap-label { font-size:12px; opacity:.7; display:block; margin-top:2px; }

/* ─── RIGHT FORM AREA ─── */
.auth-form-wrap {
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-7) var(--sp-6);
  background:var(--clr-bg);
}
.auth-form-box { width:100%; max-width:420px; }

.auth-form-header { margin-bottom:var(--sp-6); }
.auth-form-header h1 {
  font-family:var(--font-display); font-size:30px; font-weight:800;
  margin-bottom:6px; color:var(--clr-text);
}
.auth-form-header p { font-size:14px; color:var(--clr-text-muted); }
.link-accent { color:var(--clr-accent); font-weight:600; transition:color var(--trans-fast); }
.link-accent:hover { color:var(--clr-accent-hover); }
.link-sm { font-size:13px; }

/* ─── ROLE SWITCH ─── */
.role-switch {
  display:flex; gap:8px;
  background:var(--clr-bg); border-radius:var(--radius-md);
  padding:5px; margin-bottom:var(--sp-5);
}
.role-btn {
  flex:1;
  padding:10px 14px;
  border-radius:var(--radius-sm);
  font-size:14px; font-weight:500;
  color:var(--clr-text-muted);
  background:transparent;
  transition:background var(--trans-fast), color var(--trans-fast), box-shadow var(--trans-fast);
}
.role-btn.active {
  background:#fff;
  color:var(--clr-text);
  box-shadow:var(--shadow-sm);
  font-weight:600;
}
.role-btn:hover:not(.active) { color:var(--clr-text); }

/* ─── FORM ─── */
.auth-form { display:flex; flex-direction:column; gap:var(--sp-4); }
.form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }

/* Remember / forgot row */
.auth-row {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:-4px;
}
.checkbox-label {
  display:flex; align-items:center; gap:8px;
  font-size:14px; color:var(--clr-text-muted); cursor:pointer;
}
.checkbox-label input[type="checkbox"] {
  width:18px; height:18px;
  border:2px solid var(--clr-border);
  border-radius:4px;
  appearance:none; -webkit-appearance:none;
  background:#fff;
  cursor:pointer;
  transition:background var(--trans-fast), border-color var(--trans-fast);
}
.checkbox-label input[type="checkbox"]:checked {
  background:var(--clr-accent);
  border-color:var(--clr-accent);
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
}

.checkbox-cgu { margin-top:4px; }
.checkbox-cgu span { font-size:13px; line-height:1.4; }

/* ─── PASSWORD TOGGLE ─── */
.input-password-wrap { position:relative; }
.input-password-wrap .form-input { padding-right:46px; }
.toggle-password {
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  color:var(--clr-text-muted);
  transition:color var(--trans-fast);
  padding:4px;
}
.toggle-password:hover, .toggle-password.active { color:var(--clr-accent); }

/* ─── PHONE PREFIX ─── */
.input-phone-wrap { display:flex; align-items:center; }
.phone-prefix {
  background:var(--clr-bg); border-radius:var(--radius-md) 0 0 var(--radius-md);
  border:1.5px solid var(--clr-border); border-right:none;
  padding:13px 12px;
  font-size:14px; font-weight:600;
  color:var(--clr-text); white-space:nowrap;
  height:48px; display:flex; align-items:center;
}
.input-phone-wrap .form-input {
  border-radius:0 var(--radius-md) var(--radius-md) 0;
}

/* ─── PASSWORD STRENGTH ─── */
.pw-strength-bar {
  margin-top:8px; height:4px; background:var(--clr-border);
  border-radius:2px; overflow:hidden;
}
.pw-strength-fill {
  height:100%; width:0%; border-radius:2px;
  transition:width .35s var(--ease), background .35s;
  background:var(--clr-border);
}
.pw-strength-fill.weak        { background:var(--clr-danger); }
.pw-strength-fill.medium      { background:var(--clr-warning); }
.pw-strength-fill.strong      { background:var(--clr-info); }
.pw-strength-fill.very-strong { background:var(--clr-success); }

/* ─── FULL WIDTH BUTTON ─── */
.btn-full { width:100%; justify-content:center; }

/* ─── DEMO LINKS ─── */
.auth-demo {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:var(--sp-5);
  padding-top:var(--sp-4);
  border-top:1px solid var(--clr-border);
}
.auth-demo span { font-size:13px; color:var(--clr-text-muted); }
.demo-btn {
  font-size:12px; font-weight:600;
  color:var(--clr-accent);
  border:1px solid var(--clr-accent-soft);
  background:var(--clr-accent-soft);
  padding:5px 14px; border-radius:var(--radius-pill);
  transition:background var(--trans-fast);
}
.demo-btn:hover { background:rgba(232,85,61,.22); }

/* ─── CGU MODAL ─── */
.cgu-overlay {
  position:fixed; inset:0; z-index:500;
  background:rgba(44,36,32,.65);
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-5);
  opacity:0; pointer-events:none;
  transition:opacity var(--trans-med);
}
.cgu-overlay.open { opacity:1; pointer-events:all; }

.cgu-modal {
  background:#fff;
  border-radius:var(--radius-xl);
  width:100%; max-width:620px;
  max-height:88vh;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-lg);
  transform:translateY(16px);
  transition:transform var(--trans-med);
}
.cgu-overlay.open .cgu-modal { transform:translateY(0); }

.cgu-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-5) var(--sp-6);
  border-bottom:1px solid var(--clr-border);
  flex-shrink:0;
}
.cgu-header h2 {
  font-family:var(--font-display); font-weight:800; font-size:18px;
  color:var(--clr-text);
}
.cgu-close {
  width:34px; height:34px; border-radius:50%;
  background:var(--clr-bg); color:var(--clr-text-muted);
  font-size:22px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--trans-fast), color var(--trans-fast);
}
.cgu-close:hover { background:var(--clr-danger-soft); color:var(--clr-danger); }

.cgu-body {
  flex:1; overflow-y:auto;
  padding:var(--sp-6);
  scroll-behavior:smooth;
}
.cgu-date { font-size:12px; color:var(--clr-text-muted); margin-bottom:var(--sp-5); font-style:italic; }
.cgu-body h3 {
  font-family:var(--font-display); font-weight:700; font-size:14px;
  color:var(--clr-accent); text-transform:uppercase; letter-spacing:.4px;
  margin-top:var(--sp-5); margin-bottom:var(--sp-2);
}
.cgu-body h3:first-of-type { margin-top:0; }
.cgu-body p { font-size:14px; color:var(--clr-text-muted); line-height:1.7; }

.cgu-footer {
  display:flex; gap:var(--sp-3); justify-content:flex-end;
  padding:var(--sp-4) var(--sp-6);
  border-top:1px solid var(--clr-border);
  flex-shrink:0;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width:860px) {
  .auth-layout { grid-template-columns:1fr; }
  .auth-panel {
    padding:var(--sp-6);
    min-height:auto;
  }
  .auth-panel-content h2 { font-size:28px; }
  .auth-form-wrap { padding:var(--sp-6) var(--sp-5); }
}

@media (max-width:480px) {
  .form-row-2 { grid-template-columns:1fr; }
  .auth-form-wrap { padding:var(--sp-5) var(--sp-4); }
  .auth-panel { padding:var(--sp-5); }
  .auth-panel-stats { flex-direction:column; gap:var(--sp-3); }
}