/* ============================================================
   OTROTL Auth Modal - Shared Styles
   Used across all domains for standardized login/register modals.
   Configure accent color via CSS custom properties on :root or body:
     --otrotl-accent: #10B981;
     --otrotl-accent-hover: #059669;
     --otrotl-accent-glow: rgba(16,185,129,0.4);
   ============================================================ */

/* --- Defaults --- */
:root {
  --otrotl-accent: #10B981;
  --otrotl-accent-hover: #059669;
  --otrotl-accent-glow: rgba(16,185,129,0.4);
}

/* --- Auth Modal Base Styles --- */
.otrotl-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.25s ease;
}
.otrotl-modal-overlay.active {
  display: flex; opacity: 1;
}
.otrotl-modal-card {
  position: relative; width: 92%; max-width: 420px;
  max-height: 90vh; overflow-y: auto;
  background: #1e1e2e; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1rem; padding: 2rem;
  box-shadow: 0 25px 60px rgba(0,0,0,0.5);
  transform: translateY(20px) scale(0.97); opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.otrotl-modal-overlay.active .otrotl-modal-card {
  transform: translateY(0) scale(1); opacity: 1;
}
.otrotl-modal-close {
  position: absolute; top: 0.75rem; right: 0.75rem;
  width: 2rem; height: 2rem; border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05); color: #999;
  border: none; cursor: pointer; font-size: 1.1rem;
  transition: background 0.2s, color 0.2s;
}
.otrotl-modal-close:hover { background: rgba(255,255,255,0.12); color: #fff; }
.otrotl-modal-title {
  font-size: 1.35rem; font-weight: 700; color: #fff; margin-bottom: 0.25rem;
}
.otrotl-modal-subtitle {
  font-size: 0.85rem; color: #888; margin-bottom: 1.5rem;
}

/* SSO Button */
.otrotl-sso-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 100%; padding: 0.75rem 1rem; border-radius: 0.6rem;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff; font-weight: 600; font-size: 0.95rem;
  border: none; cursor: pointer;
  transition: box-shadow 0.2s, transform 0.15s;
}
.otrotl-sso-btn:hover {
  box-shadow: 0 4px 20px rgba(34,197,94,0.4); transform: translateY(-1px);
}
.otrotl-sso-btn:disabled {
  opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none;
}
.otrotl-sso-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,0.5);
}
.otrotl-sso-dot.offline { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.5); }
.otrotl-sso-notice {
  display: none; font-size: 0.75rem; color: #ef4444; margin-top: 0.35rem; text-align: center;
}

/* Divider */
.otrotl-divider {
  display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0;
  font-size: 0.8rem; color: #666;
}
.otrotl-divider::before, .otrotl-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.08);
}

/* Form fields */
.otrotl-field { margin-bottom: 1rem; }
.otrotl-field label {
  display: block; font-size: 0.8rem; font-weight: 500; color: #bbb; margin-bottom: 0.35rem;
}
.otrotl-field input {
  width: 100%; padding: 0.7rem 0.85rem; border-radius: 0.5rem;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  color: #fff; font-size: 0.9rem; outline: none;
  transition: border-color 0.2s; box-sizing: border-box;
}
.otrotl-field input:focus {
  border-color: var(--otrotl-accent);
}
.otrotl-field input::placeholder { color: #555; }

/* Submit button */
.otrotl-submit {
  width: 100%; padding: 0.75rem 1rem; border-radius: 0.6rem;
  background: var(--otrotl-accent); color: #fff; font-weight: 600; font-size: 0.95rem;
  border: none; cursor: pointer; transition: opacity 0.2s, transform 0.15s;
}
.otrotl-submit:hover { opacity: 0.9; transform: translateY(-1px); }

/* Links */
.otrotl-link {
  color: var(--otrotl-accent); cursor: pointer; text-decoration: none; font-weight: 500;
}
.otrotl-link:hover { text-decoration: underline; }

/* Toggle + misc */
.otrotl-toggle { text-align: center; font-size: 0.85rem; color: #888; margin-top: 1.25rem; }
.otrotl-forgot { display: block; text-align: right; font-size: 0.8rem; margin-top: -0.5rem; margin-bottom: 1rem; }
.otrotl-terms { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8rem; color: #888; margin-bottom: 1rem; }
.otrotl-terms input[type="checkbox"] { margin-top: 0.2rem; accent-color: var(--otrotl-accent); }
.otrotl-error {
  display: none; padding: 0.6rem 0.85rem; border-radius: 0.5rem;
  background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3);
  color: #f87171; font-size: 0.8rem; margin-bottom: 1rem;
}

/* Body scroll lock */
body.otrotl-modal-open { overflow: hidden; }