/* ============================================================
   Tahseeel Affiliate Lounge — auth restyle glue (2026 redesign).
   Loaded after collect.css (tokens + chrome). Two jobs:

   1. Replicate the behavioral visibility rules the old Metronic
      login.css provided: .forget-form / .register-form start hidden
      and are toggled by login.js (#forget-password / #back-btn).
   2. Restyle the legacy hooks that login.js + Metronic.alert still
      generate or depend on (.alert, .help-block, .has-error,
      .form-actions, .form-processing, .input-icon, fileinput).
      Class names and ids are kept — only the look changes.
   ============================================================ */

body.login {
  margin: 0;
  background: var(--canvas);
  font-family: var(--font-latin);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* ---------- behavioral visibility (was .login .content .* rules) ---------- */
.ds-auth .forget-form,
.ds-auth .register-form { display: none; }
.ds-auth .display-hide { display: none; }

/* ---------- card content rhythm ---------- */
.ds-auth__card form { margin: 0; }
.ds-auth__card h3 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 6px;
}
.ds-auth__card p {
  font-size: 14px;
  color: var(--ink-secondary);
  margin: 0 0 12px;
  line-height: 1.5;
}
.ds-auth__card a { color: var(--accent); font-weight: 600; text-decoration: none; }
.ds-auth__card .form-group { margin: 0 0 16px; }
/* icon chrome is gone; wrapper is kept because login.js errorPlacement
   inserts validation messages after .input-icon */
.ds-auth__card .input-icon { display: block; }

.ds-auth .ds-input,
.ds-auth .ds-select { height: 54px; border-radius: 14px; font-size: 14.5px; }
.ds-auth .ds-input[readonly] { background: var(--canvas); color: var(--ink-secondary); }

/* ---------- actions row ---------- */
.ds-auth .form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 0;
}
.ds-auth .login-form .form-actions {
  flex-direction: column;
  align-items: stretch;
}
.ds-auth .ds-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink-secondary);
  cursor: pointer;
}
.ds-auth .ds-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  margin: 0;
  flex: none;
}
/* metronic.js wraps checkboxes with jquery.uniform (div.checker > span > input);
   uniform.default.css is no longer loaded, so neutralize the wrapper and keep
   the native (DS-styled) checkbox visible. */
.ds-auth .checker,
.ds-auth .checker span {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.ds-auth .checker input[type="checkbox"] { opacity: 1; position: static; }

/* under-form link lines (forgot password / create account) */
.ds-auth .forget-password,
.ds-auth .create-account,
.ds-auth .ds-auth__links {
  text-align: center;
  font-size: 14px;
  color: var(--ink-secondary);
  margin-top: 14px;
}
.ds-auth .forget-password p,
.ds-auth .create-account p { margin: 0; }

/* ---------- validation + alerts (markup produced by login.js / PHP) ---------- */
.ds-auth .help-block {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
}
.ds-auth .form-group.has-error .ds-input,
.ds-auth .form-group.has-error .ds-select { border-color: var(--accent); }
.ds-auth .alert {
  position: relative;
  border: 0;
  border-radius: 12px;
  padding: 12px 40px 12px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 14px;
}
.ds-auth .alert-danger,
.ds-auth .alert-warning { background: rgba(240, 83, 107, 0.10); color: #B3243C; }
.ds-auth .alert-success { background: rgba(15, 169, 114, 0.10); color: #0B7A54; }
.ds-auth .alert .close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: none;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
}
.ds-auth .alert .close::before { content: "\00d7"; }

/* ---------- processing state (shown by login.js during the AJAX post) ---------- */
.ds-auth .form-processing { margin-top: 8px; }
.ds-auth .form-processing h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-secondary);
  margin: 0 0 10px;
}
.ds-auth .progress {
  height: 6px;
  background: var(--canvas);
  border-radius: 999px;
  overflow: hidden;
  margin: 0;
}
.ds-auth .progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  animation: dsAuthPulse 1.2s ease-in-out infinite;
}
@keyframes dsAuthPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ---------- register widgets (bootstrap-fileinput markup kept) ---------- */
.ds-auth .btn-file {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.ds-auth .fileinput-filename {
  font-size: 13px;
  color: var(--ink-secondary);
  margin-left: 8px;
}
.ds-auth .fileinput .close { text-decoration: none; color: var(--ink-tertiary); }
.ds-auth .label-danger {
  display: inline-block;
  background: rgba(224, 124, 0, 0.10);
  color: #B36300;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
.ds-auth .margin-top-10 { margin-top: 10px; }
.ds-auth .register-form > p > b { font-size: 13px; color: var(--ink); }

/* ---------- misc ---------- */
.ds-auth .text-center { text-align: center; }
.ds-auth .text-center h3 { font-size: 20px; }

/* ---------- page footer (footer.php .copyright block) ---------- */
body.login .copyright {
  text-align: center;
  padding: 20px 20px 32px;
  font-size: 12.5px;
  color: var(--ink-tertiary);
  background: var(--canvas);
}
body.login .copyright p { margin: 0 0 6px; }
body.login .copyright a {
  color: var(--ink-secondary);
  text-decoration: none;
  font-weight: 600;
}
body.login .copyright img { max-height: 26px; opacity: 0.85; margin-top: 8px; }