/* =========================================
   ✅ FOREXANALYSIS AUTH CSS (FINAL)
   ✅ Login + Register | Dark/Light | Mobile
   ========================================= */

:root {
  --bg-main: #f8fafc;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --accent: #0ea5e9;
  --accent-hover: #0284c7;
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(14, 165, 233, 0.2);
  --radius: 12px;
  --bg-gradient-start: #dbeafe;
  --bg-gradient-end: #bfdbfe;
  --left-bg: rgba(239, 246, 255, 0.6);
}

html.dark {
  --bg-main: #0b1120;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --accent: #38bdf8;
  --accent-hover: #0ea5e9;
  --glass-bg: rgba(15, 23, 42, 0.7);
  --glass-border: rgba(56, 189, 248, 0.15);
  --bg-gradient-start: #0f172a;
  --bg-gradient-end: #1e3a5f;
  --left-bg: rgba(15, 23, 42, 0.5);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }

body {
  background: var(--bg-main);
  color: var(--text-primary);
  transition: background 0.3s, color 0.3s;
}

/* ===== ANIMATED BACKGROUND ===== */
.page-background {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.animated-bg {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
}

.circle {
  position: absolute;
  border-radius: 50%;
  background: var(--circle-color, rgba(14, 165, 233, 0.15));
  animation: float 25s infinite ease-in-out;
  pointer-events: none;
}
.circle-1 { width: 500px; height: 500px; top: -150px; left: -150px; }
.circle-2 { width: 400px; height: 400px; bottom: -100px; right: -100px; animation-delay: 6s; }
.circle-3 { width: 350px; height: 350px; top: 50%; left: 60%; animation-delay: 12s; }
.circle-4 { width: 300px; height: 300px; bottom: 10%; left: 20%; animation-delay: 18s; }

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  25% { transform: translate(40px, -40px) scale(1.08) rotate(5deg); }
  50% { transform: translate(-30px, 30px) scale(0.95) rotate(-3deg); }
  75% { transform: translate(25px, 40px) scale(1.05) rotate(4deg); }
}

/* ===== AUTH CONTAINER ===== */
.auth-container {
  width: 100%;
  max-width: 1100px;
  position: relative;
  z-index: 1;
  animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.auth-wrapper {
  display: flex;
  background: var(--glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 24px;
  border: 1px solid var(--glass-border);
  overflow: hidden;
  min-height: 650px;
}

/* ===== LEFT PANEL ===== */
.auth-left {
  flex: 1;
  padding: 48px;
  background: var(--left-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
}
.brand-logo img { height: 42px; width: auto; border-radius: 8px; }

.auth-left h1 {
  font-size: 2.2rem;
  line-height: 1.2;
  margin-bottom: 12px;
  color: var(--text-primary);
  font-weight: 800;
}

.auth-left > p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 90%;
}

.features-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 8px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.feature-item:hover .feature-icon { transform: translateX(8px) scale(1.05); }

.feature-item h3 {
  font-size: 1rem;
  margin-bottom: 4px;
  font-weight: 700;
  color: var(--text-primary);
}

.feature-item p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.auth-left .btn-outline {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius);
  background: rgba(14, 165, 233, 0.1);
  color: var(--text-primary);
  font-weight: 600;
  border: 1px solid rgba(14, 165, 233, 0.3);
  cursor: pointer;
  transition: all 0.2s;
}
.auth-left .btn-outline:hover {
  background: rgba(14, 165, 233, 0.2);
  transform: translateY(-2px);
}

/* ===== RIGHT PANEL ===== */
.auth-right {
  flex: 1;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-left: 1px solid var(--glass-border);
  position: relative;
  background: rgba(255, 255, 255, 0.3);
}
html.dark .auth-right { background: rgba(15, 23, 42, 0.3); }

.auth-form-wrapper {
  width: 100%;
  max-width: 380px;
  text-align: center;
}

.auth-form-wrapper h2 {
  font-size: 1.8rem;
  margin-bottom: 8px;
  color: var(--text-primary);
  font-weight: 800;
}

.auth-form-wrapper .subtitle {
  color: var(--text-secondary);
  margin-bottom: 24px;
  font-size: 0.95rem;
}

/* ===== FORM ELEMENTS ===== */
.form-group {
  text-align: left;
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-primary);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ✅ INPUT WRAPPER - Icons ke liye */
.input-wrapper {
  position: relative;
  width: 100%;
}

.input-wrapper input {
  width: 100%;
  padding: 14px 16px 14px 46px;
  border-radius: var(--radius);
  border: 1px solid rgba(14, 165, 233, 0.25);
  background: rgba(255, 255, 255, 0.95);
  color: var(--text-primary);
  font-size: 0.95rem;
  outline: none;
  position: relative;
  z-index: 2;
  transition: all 0.2s ease;
}

html.dark .input-wrapper input {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(56, 189, 248, 0.25);
  color: var(--text-primary);
}

.input-wrapper input:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
html.dark .input-wrapper input:focus { background: #0b1120; }

/* ✅ INPUT ICONS - FIXED VISIBILITY & CONTRAST */
.input-wrapper .input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #334155; /* ✅ Light Mode: Darker, clearly visible */
  font-size: 1rem;
  pointer-events: none;
  z-index: 10; /* ✅ Input background ke upar rahega */
  transition: color 0.2s ease;
}

html.dark .input-wrapper .input-icon {
  color: #e2e8f0; /* ✅ Dark Mode: Bright white-gray, bilkul clear */
}

/* ✨ Focus par icon ka color accent ho jaye */
.input-wrapper input:focus + .input-icon {
  color: var(--accent) !important;
}
/* Input validation states */
input.valid { border-color: #22c55e !important; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15) !important; }
input.invalid { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important; }

/* Form Options */
.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 12px 0 20px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.checkbox-label input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 16px 0;
}
.checkbox-group input { width: 16px; height: 16px; accent-color: var(--accent); }
.checkbox-group a { color: var(--accent); text-decoration: none; font-weight: 600; }

.forgot-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.forgot-link:hover { text-decoration: underline; }

/* ===== BUTTONS ===== */
.btn-primary {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: white;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.4);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(14, 165, 233, 0.5);
}
.btn-primary:active { transform: translateY(0); }

.btn-social {
  width: 100%;
  padding: 14px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.95);
  color: var(--text-primary);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-decoration: none;
  margin: 16px 0 8px;
  transition: all 0.3s;
}
html.dark .btn-social {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}
.btn-social:hover {
  transform: translateY(-2px);
}

.btn-google { background: rgba(255, 255, 255, 0.95); }
html.dark .btn-google { background: rgba(255, 255, 255, 0.12); }

.btn-email {
  background: rgba(14, 165, 233, 0.1);
  border-color: rgba(14, 165, 233, 0.3);
  color: var(--text-primary);
}
html.dark .btn-email {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.3);
  color: var(--text-primary);
}
.btn-email:hover {
  background: rgba(14, 165, 233, 0.2);
  border-color: rgba(14, 165, 233, 0.5);
}

/* ===== DIVIDER ===== */
.divider {
  position: relative;
  text-align: center;
  margin: 20px 0;
}
.divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.4), transparent);
}
.divider span {
  background: var(--glass-bg);
  padding: 0 16px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  position: relative;
  z-index: 1;
}
html.dark .divider span { background: rgba(15, 23, 42, 0.8); }

/* ===== TERMS TEXT ===== */
.terms-text {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 20px 0 16px;
  line-height: 1.6;
}
.terms-text a { color: var(--accent); text-decoration: none; font-weight: 600; }
.terms-text a:hover { text-decoration: underline; }

/* ===== THEME TOGGLE ===== */
.theme-toggle {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(14, 165, 233, 0.1);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  color: var(--text-primary);
  z-index: 100;
  pointer-events: all;
}
html.dark .theme-toggle {
  background: rgba(56, 189, 248, 0.15);
  color: var(--text-primary);
}
.theme-toggle:hover {
  transform: scale(1.1) rotate(15deg);
}

/* ===== BACK BUTTON ===== */
.btn-back {
  width: 100%;
  padding: 12px 20px;
  border-radius: var(--radius);
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
html.dark .btn-back { color: #94a3b8; border-color: rgba(255, 255, 255, 0.2); }
.btn-back:hover {
  background: rgba(14, 165, 233, 0.1);
  border-color: rgba(14, 165, 233, 0.3);
  color: var(--text-primary);
  transform: translateX(-2px);
}

/* ===== FOOTER ===== */
.footer-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 20px;
  text-align: center;
}
.footer-text a { color: var(--accent); text-decoration: none; font-weight: 600; }
.footer-text a:hover { text-decoration: underline; }

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 968px) {
  .auth-container { max-width: 100%; }
  .auth-wrapper {
    flex-direction: column;
    min-height: auto;
    border-radius: 20px;
  }
  
  /* ✅ Left panel hide on mobile */
  .auth-left { display: none !important; }
  
  /* ✅ Right panel full width */
  .auth-right {
    width: 100%;
    border-left: none;
    border-top: none;
    padding: 40px 24px 32px !important;
    min-height: auto;
    position: relative;
  }
  
  .auth-form-wrapper { max-width: 100%; width: 100%; }
  
  /* Theme toggle mobile position */
  .theme-toggle {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  /* Form row: 2 columns → 1 column on mobile */
  .form-row { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 375px) {
  .auth-right { padding: 32px 16px 24px !important; }
  .auth-form-wrapper h2 { font-size: 1.5rem; }
  .form-options { flex-direction: column; align-items: flex-start; gap: 8px; }
  .input-wrapper input { padding: 12px 14px 12px 42px; }
  .input-wrapper .input-icon { left: 14px; font-size: 0.9rem; }
  .circle-1, .circle-2 { width: 200px; height: 200px; }
  .circle-3, .circle-4 { width: 150px; height: 150px; }
}

/* ===== SMOOTH TRANSITIONS ===== */
#social-login-view, #email-login-view { animation: fadeIn 0.3s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}