/* assets/css/login-modal.css */
/* ─────────────────────────────────────────────────────────────
   Clean modal: centered, no scroll, scoped styles only
   ───────────────────────────────────────────────────────────── */

/* Modal size & centering */
#mobileLoginModal .modal-dialog {
  max-width: 540px;
}

/* Remove outer white sheet/look and inner scrollbars */
#mobileLoginModal .auth-modal-content {
  background: transparent;
  border: 0;
  box-shadow: none;
}
#mobileLoginModal .modal-body {
  padding: 0;
  max-height: none;
  overflow: visible;
}

/* Optional: backdrop opacity (must NOT be scoped under the modal id) */
.modal-backdrop.show {
  opacity: 0.5;
}

/* Mobile adjustments (no bottom-sheet animation) */
@media (max-width: 575.98px) {
  #mobileLoginModal .modal-dialog {
    margin: 1.25rem auto !important;
    width: auto !important;
  }
  #mobileLoginModal .modal-content {
    border-radius: 12px;
    box-shadow: 0 8px 26px rgba(0,0,0,.18);
  }
}

/* ── Scoped variables (do NOT use :root) ───────────────────── */
#mobileLoginModal.auth-scope {
  --auth-primary: #235c39;
  --auth-primary-hover: #1f6d3d;
  --auth-text: #111;
  --auth-input-bg: #fff;
  --auth-input-border: #cfd4da;
  --auth-input-placeholder: #6c757d;
}
[data-theme="dark"] #mobileLoginModal.auth-scope {
  --auth-primary: #84b591;
  --auth-primary-hover: #6a8f6a;
  --auth-text: #e9ecef;
  --auth-input-bg: #1f1f1f;
  --auth-input-border: #3a3a3a;
  --auth-input-placeholder: #9aa0a6;
}

/* ── Card & container (no gradient) ─────────────────────────── */
#mobileLoginModal.auth-scope .login-container {
  background: transparent !important;
  padding: 0;
  display: flex;
  justify-content: center;
}
#mobileLoginModal.auth-scope .login-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
  padding: 2rem;              /* comfortable padding */
  max-width: 460px;           /* inner card width */
  width: 100%;
  min-height: 520px;          /* taller, like your reference */
}

/* Text & logos */
#mobileLoginModal.auth-scope .login-card .text-muted { color: rgba(0,0,0,.6); }
[data-theme="dark"] #mobileLoginModal.auth-scope .login-card .text-muted { color: var(--auth-text) !important; }
#mobileLoginModal.auth-scope .login-card h4 { font-size: 1rem; color: var(--auth-text) !important; }
#mobileLoginModal.auth-scope .logo-dark { display: none; }
[data-theme="dark"] #mobileLoginModal.auth-scope .logo-light { display: none; }
[data-theme="dark"] #mobileLoginModal.auth-scope .logo-dark { display: inline-block; }

/* Form controls */
#mobileLoginModal.auth-scope .form-group { position: relative; margin-bottom: 1.2rem; }
#mobileLoginModal.auth-scope .form-control {
  width: 100%;
  padding: 0.75rem 0.75rem 0.75rem 2.2rem;
  background: var(--auth-input-bg);
  border: 1px solid var(--auth-input-border);
  border-radius: 6px;
  color: var(--auth-text);
}
#mobileLoginModal.auth-scope .form-control::placeholder { color: var(--auth-input-placeholder); }
#mobileLoginModal.auth-scope .form-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 1rem; color: var(--auth-input-placeholder);
  transition: transform .3s ease, color .3s ease;
}
#mobileLoginModal.auth-scope .form-icon-end {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 1rem; color: var(--auth-input-placeholder); cursor: pointer;
  transition: transform .3s ease, color .3s ease;
}
#mobileLoginModal.auth-scope .form-icon:hover,
#mobileLoginModal.auth-scope .form-icon-end:hover {
  transform: translateY(-50%) scale(1.2); color: var(--auth-primary);
}

/* Buttons (scoped) */
#mobileLoginModal.auth-scope .btn-primary {
  background: var(--auth-primary); border-color: var(--auth-primary); color: #fff;
}
#mobileLoginModal.auth-scope .btn-primary:hover {
  background: var(--auth-primary-hover); border-color: var(--auth-primary-hover);
}
#mobileLoginModal.auth-scope .btn-google {
  background: #f5f5f5; border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0,0,0,.1); color: #000;
}
#mobileLoginModal.auth-scope .btn-google:hover { background: #e0e0e0; }
#mobileLoginModal.auth-scope .btn-facebook { background: #1877f2; border: none; color: #fff; }
#mobileLoginModal.auth-scope .btn-facebook:hover { background: #155db2; }
#mobileLoginModal.auth-scope .social-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: .5rem; font-size: .9rem;
}

/* (Optional) Google Translate tweaks ONLY if the widget is inside the modal */
#mobileLoginModal #google_translate_element select {
  padding: 6px 12px; border-radius: 6px; border: 1px solid #ccc; font-size: 14px; background-color: #fff;
}
#mobileLoginModal .goog-logo-link, #mobileLoginModal .goog-te-gadget span { display: none !important; }
#mobileLoginModal .goog-te-gadget { font-size: 0; color: transparent; }

/* Reuse auth styles on standalone page too (not only inside the modal) */
.auth-scope {
  --auth-primary: #235c39;
  --auth-primary-hover: #1f6d3d;
  --auth-text: #111;
  --auth-input-bg: #fff;
  --auth-input-border: #cfd4da;
  --auth-input-placeholder: #6c757d;
}
[data-theme="dark"] .auth-scope {
  --auth-primary: #84b591;
  --auth-primary-hover: #6a8f6a;
  --auth-text: #e9ecef;
  --auth-input-bg: #1f1f1f;
  --auth-input-border: #3a3a3a;
  --auth-input-placeholder: #9aa0a6;
}

/* Same look as in the modal */
.auth-scope .login-container {
  background: transparent !important;
  padding: 0;
  display: flex;
  justify-content: center;
}
.auth-scope .login-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
  padding: 2rem;
  max-width: 460px;
  width: 100%;
  min-height: 520px;
}

/* Fix huge logo (override any global img rules) */
.brand-logo {
  height: 40px !important;
  width: auto !important;
}

/* Inputs / buttons */
.auth-scope .form-group { position: relative; margin-bottom: 1.2rem; }
.auth-scope .form-control {
  background: var(--auth-input-bg);
  border-color: var(--auth-input-border);
  color: var(--auth-text);
  padding: 0.75rem 0.75rem 0.75rem 2.2rem;
}
.auth-scope .form-control::placeholder { color: var(--auth-input-placeholder); }

.auth-scope .form-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 1rem; color: var(--auth-input-placeholder);
  transition: transform .3s ease, color .3s ease;
}
.auth-scope .form-icon-end {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 1rem; color: var(--auth-input-placeholder); cursor: pointer;
  transition: transform .3s ease, color .3s ease;
}
.auth-scope .form-icon:hover,
.auth-scope .form-icon-end:hover { transform: translateY(-50%) scale(1.2); color: var(--auth-primary); }

.auth-scope .btn-primary { background: var(--auth-primary); border-color: var(--auth-primary); color:#fff; }
.auth-scope .btn-primary:hover { background: var(--auth-primary-hover); border-color: var(--auth-primary-hover); }

/* Logo toggles for dark mode */
.auth-scope .logo-dark { display: none; }
[data-theme="dark"] .auth-scope .logo-light { display: none; }
[data-theme="dark"] .auth-scope .logo-dark { display: inline-block; }