/*
 * LeadPi Login Form Styles
 *
 * Scoped under .leadpi-login to isolate from Bootstrap 4 / cps-main.min.css.
 * Uses doubled selector (.leadpi-login.leadpi-login) for specificity over
 * site CSS without resorting to !important.
 *
 * Design tokens prefixed --lpi- for easy customization.
 */

/* ── Design Tokens ── */
:root {
  --lpi-primary: #2563eb;
  --lpi-primary-hover: #1d4ed8;
  --lpi-primary-ring: rgba(37, 99, 235, 0.1);
  --lpi-primary-disabled: #93b4f5;
  --lpi-text-dark: #1a1a2e;
  --lpi-text-body: #333;
  --lpi-text-muted: #666;
  --lpi-text-light: #999;
  --lpi-border: #ddd;
  --lpi-border-light: #e5e5e5;
  --lpi-bg-white: #fff;
  --lpi-bg-hover: #f8f9fa;
  --lpi-error-bg: #fef2f2;
  --lpi-error-border: #fecaca;
  --lpi-error-text: #dc2626;
  --lpi-success-bg: #f0fdf4;
  --lpi-success-border: #bbf7d0;
  --lpi-success-text: #16a34a;
  --lpi-radius: 8px;
  --lpi-radius-lg: 12px;
  --lpi-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  --lpi-font-xs: 13px;
  --lpi-font-sm: 14px;
  --lpi-font-md: 15px;
  --lpi-font-lg: 24px;
}

/* ── Brand (above card) ── */
.lpi-brand {
  text-align: center;
  margin-bottom: 24px;
}

.lpi-brand img {
  display: block;
  margin: 0 auto 8px;
}

.lpi-brand-sub {
  font-size: var(--lpi-font-sm);
  color: var(--lpi-text-muted);
}

/* ── Container ── */
.leadpi-login.leadpi-login {
  background: var(--lpi-bg-white);
  border-radius: var(--lpi-radius-lg);
  box-shadow: var(--lpi-shadow);
  padding: 48px 40px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

/* ── Typography ── */
.leadpi-login.leadpi-login h1 {
  font-size: var(--lpi-font-lg);
  line-height: 1.3;
  color: var(--lpi-text-dark);
  text-align: center;
  margin: 0 0 8px;
}

.leadpi-login .lpi-subtitle {
  color: var(--lpi-text-muted);
  font-size: var(--lpi-font-sm);
  text-align: center;
  margin: 0 0 32px;
}

/* ── Form ── */
.leadpi-login .lpi-form-group {
  margin-bottom: 20px;
}

.leadpi-login .lpi-form-group label {
  display: block;
  font-size: var(--lpi-font-xs);
  font-weight: 600;
  color: var(--lpi-text-body);
  margin-bottom: 6px;
}

.leadpi-login input[type="email"],
.leadpi-login input[type="password"] {
  appearance: none;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--lpi-border);
  border-radius: var(--lpi-radius);
  font-family: inherit;
  font-size: var(--lpi-font-md);
  color: var(--lpi-text-body);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.leadpi-login input:focus {
  outline: none;
  border-color: var(--lpi-primary);
  box-shadow: 0 0 0 3px var(--lpi-primary-ring);
}

/* ── Buttons (shared) ── */
.leadpi-login .lpi-btn-primary,
.leadpi-login .lpi-btn-oauth {
  width: 100%;
  border-radius: var(--lpi-radius);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

/* ── Primary Button ── */
.leadpi-login .lpi-btn-primary {
  padding: 12px;
  background: var(--lpi-primary);
  color: var(--lpi-bg-white);
  border: none;
  font-size: var(--lpi-font-md);
  font-weight: 600;
}

.leadpi-login .lpi-btn-primary:hover {
  background: var(--lpi-primary-hover);
}

.leadpi-login .lpi-btn-primary:disabled {
  background: var(--lpi-primary-disabled);
  cursor: not-allowed;
}

/* ── OAuth Buttons ── */
.leadpi-login .lpi-btn-oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--lpi-border);
  background: var(--lpi-bg-white);
  font-size: var(--lpi-font-sm);
  font-weight: 500;
  color: var(--lpi-text-body);
  margin-bottom: 10px;
}

.leadpi-login .lpi-btn-oauth:hover {
  background: var(--lpi-bg-hover);
  border-color: var(--lpi-border);
}

.leadpi-login .lpi-btn-oauth svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ── Divider ── */
.leadpi-login .lpi-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  color: var(--lpi-text-light);
  font-size: var(--lpi-font-xs);
}

.leadpi-login .lpi-divider::before,
.leadpi-login .lpi-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--lpi-border-light);
}

/* ── Messages (shared base + variants) ── */
.leadpi-login .lpi-error-msg,
.leadpi-login .lpi-success-msg {
  padding: 10px 14px;
  border-radius: var(--lpi-radius);
  font-size: var(--lpi-font-xs);
  margin-bottom: 16px;
  display: none;
}

.leadpi-login .lpi-error-msg {
  background: var(--lpi-error-bg);
  border: 1px solid var(--lpi-error-border);
  color: var(--lpi-error-text);
}

.leadpi-login .lpi-success-msg {
  background: var(--lpi-success-bg);
  border: 1px solid var(--lpi-success-border);
  color: var(--lpi-success-text);
}

/* ── Toggle Link ── */
.leadpi-login .lpi-toggle-link {
  text-align: center;
  margin-top: 20px;
  font-size: var(--lpi-font-xs);
  color: var(--lpi-text-muted);
}

.leadpi-login .lpi-toggle-link a {
  color: var(--lpi-primary);
  text-decoration: none;
  font-weight: 600;
}

.leadpi-login .lpi-toggle-link a:hover {
  text-decoration: underline;
}