/* Consolidated styles: toast, default-form visibility, login nav, and offset */

/* Theme variables for auth cards (light by default) */
:root{
  --ssl-card-bg: #ffffff;
  --ssl-card-fg: #111827;
  --ssl-input-bg: #ffffff;
  --ssl-input-fg: #111827;
  --ssl-input-border: #d1d5db; /* gray-300 */
  --ssl-toggle-bg: #f3f4f6; /* gray-100 */
  --ssl-toggle-bg-hover: #e5e7eb; /* gray-200 */
  --ssl-toggle-fg: #111827;
  --ssl-toggle-border: #e5e7eb;
  --ssl-accent: #2563eb; /* blue-600 */
  --ssl-head-bg: linear-gradient(180deg, rgba(249,250,251,0.85), rgba(249,250,251,0.65));
  --ssl-head-border: #e5e7eb;
}
@media (prefers-color-scheme: dark){
  :root{
    --ssl-card-bg: #111827; /* gray-900 */
    --ssl-card-fg: #F9FAFB;
    --ssl-input-bg: #1f2937; /* gray-800 */
    --ssl-input-fg: #F9FAFB;
    --ssl-input-border: #374151; /* gray-700 */
    --ssl-toggle-bg: #1f2937;
    --ssl-toggle-bg-hover: #111827;
    --ssl-toggle-fg: #F9FAFB;
    --ssl-toggle-border: #374151;
    --ssl-accent: #22d3ee; /* cyan-400 */
    --ssl-head-bg: linear-gradient(180deg, rgba(17,24,39,0.85), rgba(17,24,39,0.65));
    --ssl-head-border: #374151;
  }
}
/* Optional explicit dark override via attribute/class if a theme toggle is present */
[data-theme="dark"], .ssl-dark{
  --ssl-card-bg: #111827;
  --ssl-card-fg: #F9FAFB;
  --ssl-input-bg: #1f2937;
  --ssl-input-fg: #F9FAFB;
  --ssl-input-border: #374151;
  --ssl-toggle-bg: #1f2937;
  --ssl-toggle-bg-hover: #111827;
  --ssl-toggle-fg: #F9FAFB;
  --ssl-toggle-border: #374151;
}

/* Auth card overrides (modal iframe and login screen) */
.ssl-auth-card{ background: var(--ssl-card-bg) !important; color: var(--ssl-card-fg) !important; }
.ssl-auth-card h1, .ssl-auth-card h2, .ssl-auth-card h3, .ssl-auth-card p, .ssl-auth-card label{ color: var(--ssl-card-fg) !important; }
.ssl-auth-card .text-gray-600, .ssl-auth-card .text-gray-700, .ssl-auth-card .text-gray-800 { color: var(--ssl-card-fg) !important; }
.ssl-auth-card input[type="text"],
.ssl-auth-card input[type="email"],
.ssl-auth-card input[type="password"],
.ssl-auth-card textarea,
.ssl-auth-card select{
  background: var(--ssl-input-bg) !important;
  color: var(--ssl-input-fg) !important;
  border-color: var(--ssl-input-border) !important;
}
.ssl-auth-card input:focus,
.ssl-auth-card textarea:focus,
.ssl-auth-card select:focus{
  outline: none !important;
  border-color: var(--ssl-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ssl-accent) 28%, transparent) !important;
}
.ssl-auth-card ::placeholder{ color: color-mix(in oklab, var(--ssl-input-fg) 60%, transparent) !important; opacity: .8; }
/* Placeholder cross-browser */
.ssl-auth-card ::-webkit-input-placeholder{ color: color-mix(in oklab, var(--ssl-input-fg) 60%, transparent) !important; opacity: .8; }
.ssl-auth-card :-ms-input-placeholder{ color: color-mix(in oklab, var(--ssl-input-fg) 60%, transparent) !important; opacity: .8; }
.ssl-auth-card ::-ms-input-placeholder{ color: color-mix(in oklab, var(--ssl-input-fg) 60%, transparent) !important; opacity: .8; }
.ssl-auth-card a{ color: var(--ssl-accent); }
.ssl-auth-card #ssl-more-logins-toggle,
.ssl-auth-card #ssl-more-signups-toggle{
  background: var(--ssl-toggle-bg) !important;
  color: var(--ssl-toggle-fg) !important;
  border: 1px solid var(--ssl-toggle-border) !important;
}
.ssl-auth-card #ssl-more-logins-toggle:hover,
.ssl-auth-card #ssl-more-signups-toggle:hover{
  background: var(--ssl-toggle-bg-hover) !important;
}
/* Tabs (login / signup) */
.ssl-auth-card [role="tab"]{
  background: var(--ssl-toggle-bg) !important;
  color: var(--ssl-toggle-fg) !important;
  border: 1px solid var(--ssl-toggle-border) !important;
}
.ssl-auth-card [role="tab"][aria-selected="true"]{
  background: var(--ssl-toggle-bg-hover) !important;
  color: var(--ssl-card-fg) !important;
}

/* Toast */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    border-radius: 5px;
    color: white;
    z-index: 9999;
}
.toast.info { background-color: #3498db; }
.toast.error { background-color: #e74c3c; }
.toast.success { background-color: #2ecc71; }

/* Hide default WP login form when plugin setting requires */
body.login.ssl-hide-default #loginform,
body.login.ssl-hide-default .wp-login-logo {
    display: none !important;
}

/* Hide Register / Lost password links for a cleaner look */
body.login.ssl-hide-login-nav #nav,
body.login.ssl-hide-login-nav .wp-login-register,
body.login.ssl-hide-login-nav .wp-login-lost-password {
  display: none !important;
}

/* Keep the small form, just move it down a bit */
body.login.ssl-offset #login {
  margin-top: clamp(48px, 12vh, 180px);
}

/* Turnstile container sizing + centering */
.cf-turnstile {
  display: flex;
  justify-content: center;
  margin: 8px 0;
  width: 100%;
}
.sgl-custom-form .cf-turnstile {
  max-width: 100%;
}

/* Smooth collapsible transitions for dropdowns */
.ssl-collapsible {
  will-change: max-height, opacity, transform;
  transition: max-height 260ms ease, opacity 180ms ease, transform 180ms ease;
  transform-origin: top center;
}

/* Modal (built-in login modal) */
.ssl-modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(0,0,0,0.55);
  z-index: 10000;
}
.ssl-dialog {
  border: none;
  padding: 0;
  width: min(92vw, 720px);
  max-height: 88vh;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ssl-modal-bg, #ffffff);
  color: var(--ssl-modal-fg, #111827);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.ssl-dialog::backdrop {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
}
@media (prefers-color-scheme: dark){
  :root{ --ssl-modal-bg: #111827; --ssl-modal-fg: #F9FAFB; }
}
.ssl-modal-overlay.open { display: flex; align-items: center; justify-content: center; }
.ssl-modal { background: #fff; color: #111; width: min(92vw, 720px); max-height: 88vh; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); display: flex; flex-direction: column; overflow: hidden; }
.ssl-modal-header { display:flex; align-items:center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--ssl-head-border); background: var(--ssl-head-bg); backdrop-filter: blur(6px); }
.ssl-modal-title-wrap { display:flex; align-items:center; gap:10px; flex: 1; min-width: 0; }
.ssl-modal-title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: .2px; }
.ssl-modal-close { background: transparent; border: 0; line-height: 1; cursor: pointer; border-radius: 9999px; padding: 6px; transition: background-color .18s ease; }
.ssl-modal-close:hover { background: rgba(0,0,0,0.06); }
.ssl-modal-body { padding: 0; }
.ssl-modal-body iframe { width: 100%; height: min(80vh, 640px); border: 0; display: block; }

/* User menu (logged-in header control) */
.ssl-user-menu { position: relative; display: inline-block; }
/* Invisible hover bridge to prevent collapse when moving from toggle to dropdown */
.ssl-user-menu::after { content:""; position:absolute; left:0; right:0; top:100%; height:10px; }
.ssl-user-toggle { background: var(--ssl-um-btn-bg, rgba(255,255,255,0.9)); border: 1px solid var(--ssl-um-btn-border, #e5e7eb); padding: 6px 12px; border-radius: 9999px; cursor: pointer; font-weight: 600; color: var(--ssl-um-btn-fg, #111827); transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
.ssl-user-toggle:hover { background: var(--ssl-um-btn-bg-hover, #f9fafb); }
.ssl-user-dropdown { position: absolute; right: 0; top: 100%; margin-top: 8px; min-width: 200px; background: #fff; color: #111; border: 1px solid #e5e7eb; border-radius: 10px; padding: 6px 0; display: none; box-shadow: 0 12px 28px rgba(0,0,0,0.12); z-index: 10001; opacity: 0; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease; }
.ssl-user-dropdown a { display: block; padding: 10px 14px; color: inherit; text-decoration: none; }
.ssl-user-dropdown a:hover { background: #f3f4f6; }
.ssl-user-menu.open .ssl-user-dropdown,
.ssl-user-menu:hover .ssl-user-dropdown,
.ssl-user-menu:focus-within .ssl-user-dropdown { display: block; opacity: 1; transform: translateY(0); }
/* Popover API state */
.ssl-user-dropdown:popover-open { display: block; opacity: 1; transform: translateY(0); }
/* Icon font spacing */
.ssl-ico-fa { margin-right: 8px; }
/* Login button look (light/dark adaptable) */
.ssl-login-btn { background: var(--ssl-um-btn-bg, rgba(255,255,255,0.95)); border: 1px solid var(--ssl-um-btn-border, #e5e7eb); padding: 6px 12px; border-radius: 9999px; font-weight: 700; color: var(--ssl-um-btn-fg, #111827); transition: background-color .18s ease, border-color .18s ease, color .18s ease; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.ssl-login-btn:hover { background: var(--ssl-um-btn-bg-hover, #f3f4f6); }
@media (prefers-color-scheme: dark){
  :root{
    --ssl-um-btn-bg: rgba(17,24,39,0.8);
    --ssl-um-btn-bg-hover: rgba(31,41,55,0.85);
    --ssl-um-btn-border: #374151;
    --ssl-um-btn-fg: #F9FAFB;
  }
  .ssl-user-dropdown { background:#111827; color:#F9FAFB; border-color:#374151; }
  .ssl-user-dropdown a:hover { background:#1f2937; }
}
.ssl-collapsible[aria-hidden="true"] {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}
.ssl-collapsible[aria-hidden="false"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .ssl-collapsible {
    transition: none;
  }
}