/* The modal carries its own tokens rather than borrowing the theme's, so it
   still renders correctly on pages that don't load the StockFlipper theme
   CSS. Defaults are the dark set; [data-theme="light"] on <html> swaps them. */
.sfa-overlay{
  --sfa-scrim:            rgba(5,8,22,0.7);
  --sfa-panel:            #060916eb;
  --sfa-border:           rgba(255,255,255,0.1);
  --sfa-shadow:           rgba(0,0,0,0.5);
  --sfa-logo-bg:          #ffffff0a;
  --sfa-text:             #fff;
  --sfa-text-muted:       rgba(255,255,255,0.72);
  --sfa-text-dim:         rgba(255,255,255,0.64);
  --sfa-text-faint:       rgba(255,255,255,0.56);
  --sfa-placeholder:      rgba(255,255,255,0.32);
  --sfa-close:            rgba(255,255,255,0.22);
  --sfa-eye:              rgba(255,255,255,0.4);
  --sfa-field-bg:         rgba(255,255,255,0.05);
  --sfa-field-bg-focus:   rgba(255,255,255,0.08);
  --sfa-field-border:     rgba(255,255,255,0.12);
  --sfa-field-border-focus: rgba(255,255,255,0.4);
  --sfa-btn-bg:           #fff;
  --sfa-btn-fg:           #0a0e1a;
  --sfa-accent:           #fff;
  --sfa-danger:           #f87171;
  --sfa-danger-text:      #fca5a5;
  --sfa-danger-bg:        rgba(239,68,68,0.1);
  --sfa-danger-border:    rgba(239,68,68,0.3);

  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--sfa-scrim);
  backdrop-filter:blur(6px);
  padding:20px;
  font-family:'Montserrat', sans-serif;
}

[data-theme="light"] .sfa-overlay{
  --sfa-scrim:            rgba(15,23,42,0.35);
  --sfa-panel:            #ffffffeb;
  --sfa-border:           rgba(15,23,42,0.10);
  --sfa-shadow:           rgba(15,23,42,0.22);
  --sfa-logo-bg:          rgba(15,23,42,0.04);
  --sfa-text:             #0b1020;
  --sfa-text-muted:       rgba(11,16,32,0.70);
  --sfa-text-dim:         rgba(11,16,32,0.62);
  --sfa-text-faint:       rgba(11,16,32,0.56);
  --sfa-placeholder:      rgba(11,16,32,0.36);
  --sfa-close:            rgba(11,16,32,0.28);
  --sfa-eye:              rgba(11,16,32,0.45);
  --sfa-field-bg:         rgba(15,23,42,0.03);
  --sfa-field-bg-focus:   rgba(15,23,42,0.06);
  --sfa-field-border:     rgba(15,23,42,0.14);
  --sfa-field-border-focus: rgba(15,23,42,0.42);
  --sfa-btn-bg:           #0b1020;
  --sfa-btn-fg:           #ffffff;
  --sfa-accent:           #0b1020;
  --sfa-danger:           #dc2626;
  --sfa-danger-text:      #b91c1c;
  --sfa-danger-bg:        rgba(220,38,38,0.08);
  --sfa-danger-border:    rgba(220,38,38,0.25);
}

.sfa-overlay[hidden]{ display:none; }

.sfa-modal{
  position:relative;
  width:100%;
  max-width:400px;
  max-height:90vh;
  overflow-y:auto;
  background:var(--sfa-panel);
  border:1px solid var(--sfa-border);
  border-radius:16px;
  padding:32px;
  box-shadow:0 30px 80px var(--sfa-shadow);
  animation:sfa-pop .18s ease-out;
  backdrop-filter:blur(20px);
}
@keyframes sfa-pop{
  from{ opacity:0; transform:translateY(8px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.sfa-close{
  position:absolute;
  top:16px;
  right:16px;
  width:32px;
  height:32px;
  border-radius:999px;
  border:none;
  background:none;
  color:var(--sfa-close);
  font-size:32px;
  line-height:1;
  cursor:pointer;
  z-index:1;
  font-weight:300;
}
.sfa-close:hover{ color:var(--sfa-text); }

.sfa-brand{
  text-align:center;
  margin-bottom:24px;
}
.sfa-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  margin:0 auto 16px;
  border-radius:999px;
  background:var(--sfa-logo-bg);
  border:1px solid var(--sfa-border);
}
.sfa-logo img{ width:28px; height:auto; }
/* The bull mark is a white SVG — flip it when the panel goes light. */
[data-theme="light"] .sfa-logo img{ filter:invert(1); }
.sfa-brand h2{
  margin:0 0 6px;
  font-size:20px;
  font-weight:700;
  color:var(--sfa-text);
}
.sfa-brand p{
  margin:0;
  font-size:13px;
  color:var(--sfa-text-faint);
}

.sfa-form[hidden]{ display:none; }

.sfa-field{
  display:block;
  margin-bottom:16px;
}
.sfa-field > span:first-child{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--sfa-text);
  margin-bottom:8px;
}
.sfa-field > span:first-child b{
  color:var(--sfa-danger);
  font-weight:700;
}
.sfa-input-wrap{ position:relative; display:flex; align-items:center; }
.sfa-field input{
  width:100%;
  height:46px;
  padding:0 16px;
  background:var(--sfa-field-bg);
  border:1px solid var(--sfa-field-border);
  border-radius:10px;
  color:var(--sfa-text);
  font-family:inherit;
  font-size:14px;
}
.sfa-input-wrap input{ padding-right:44px; }
.sfa-field input::placeholder{ color:var(--sfa-placeholder); }
.sfa-field input:focus{
  outline:none;
  border-color:var(--sfa-field-border-focus);
  background:var(--sfa-field-bg-focus);
}
.sfa-eye{
  position:absolute;
  right:14px;
  width:18px;
  height:18px;
  padding:0;
  background:none;
  border:none;
  color:var(--sfa-eye);
  cursor:pointer;
}
.sfa-eye:hover{ color:var(--sfa-text-muted); }
.sfa-eye svg{ display:block; width:100%; height:100%; }

.sfa-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px;
  font-size:13px;
}
.sfa-checkbox{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--sfa-text-dim);
  cursor:pointer;
}
.sfa-checkbox input{ accent-color:var(--sfa-accent); }
.sfa-link{ color:var(--sfa-text-muted); text-decoration:underline; }
.sfa-link:hover{ color:var(--sfa-text); }

.sfa-submit{
  width:100%;
  height:50px;
  border:none;
  border-radius:999px;
  background:var(--sfa-btn-bg);
  color:var(--sfa-btn-fg);
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:opacity .15s ease;
}
.sfa-submit:hover{ opacity:.85; }
.sfa-submit:disabled{ opacity:.6; cursor:default; }

.sfa-switch{
  margin:20px 0 0;
  text-align:center;
  font-size:13px;
  color:var(--sfa-text-faint);
}
.sfa-switch a{ color:var(--sfa-text); font-weight:600; text-decoration:underline; }

.sfa-consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:16px;
  cursor:pointer;
}
.sfa-consent input{
  flex:none;
  width:16px;
  height:16px;
  margin-top:2px;
  accent-color:var(--sfa-accent);
}
.sfa-consent span{
  font-size:11px;
  line-height:1.4;
  color:var(--sfa-text-faint);
}
.sfa-consent a{ color:var(--sfa-text-muted); text-decoration:underline; }
.sfa-consent a:hover{ color:var(--sfa-text); }

.sfa-error{
  background:var(--sfa-danger-bg);
  border:1px solid var(--sfa-danger-border);
  color:var(--sfa-danger-text);
  font-size:13px;
  padding:10px 12px;
  border-radius:8px;
  margin-bottom:16px;
}
.sfa-error[hidden]{ display:none; }