/* ==========================================================================
   Feedback (modal + toast) — a lightweight SweetAlert-style component.
   Reuses the host page's --bg-surface / --gold / --green / --red / etc.
   CSS variables when present (see style.css), and falls back to sane
   defaults otherwise so this file also works dropped into any project.
   ========================================================================== */

:root{
  --fm-bg:        var(--bg-surface, #14172c);
  --fm-border:    var(--border-glass, rgba(255,255,255,0.08));
  --fm-text:      var(--text-primary, #f4f5fb);
  --fm-text-dim:  var(--text-secondary, #a7acc4);
  --fm-radius:    var(--radius-md, 16px);
  --fm-shadow:    var(--shadow-glass, 0 20px 60px -20px rgba(0,0,0,0.6));
  --fm-font:      var(--font-body, 'Inter', -apple-system, sans-serif);

  --fm-success:      var(--green, #34c778);
  --fm-success-glow: var(--green-glow, rgba(52,199,120,0.20));
  --fm-error:        var(--red, #ff5c6b);
  --fm-error-glow:   var(--red-glow, rgba(255,92,107,0.18));
  --fm-warning:      var(--gold, #e8b84b);
  --fm-warning-glow: var(--gold-glow, rgba(232,184,75,0.25));
  --fm-info:         #4ea1ff;
  --fm-info-glow:    rgba(78,161,255,0.18);
}
[data-theme="light"]{
  --fm-info:      #1266c9;
  --fm-info-glow: rgba(18,102,201,0.14);
}

/* ---------- shared ---------- */
.fm-icon svg{ width:100%; height:100%; }
.fm-state-success{ --fm-accent:var(--fm-success); --fm-accent-glow:var(--fm-success-glow); }
.fm-state-error{   --fm-accent:var(--fm-error);   --fm-accent-glow:var(--fm-error-glow); }
.fm-state-warning{ --fm-accent:var(--fm-warning); --fm-accent-glow:var(--fm-warning-glow); }
.fm-state-info{    --fm-accent:var(--fm-info);    --fm-accent-glow:var(--fm-info-glow); }

.fm-text{ margin:0; line-height:1.5; color:var(--fm-text); }
.fm-list{ margin:0; padding-left:1.1em; color:var(--fm-text); line-height:1.6; }
.fm-list li{ margin-bottom:4px; }
.fm-kv{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; }
.fm-kv dt{ color:var(--fm-text-dim); font-weight:600; }
.fm-kv dd{ margin:0; color:var(--fm-text); word-break:break-word; }

/* ==========================================================================
   Modal
   ========================================================================== */
.fm-backdrop{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(4,5,12,0.55); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .2s ease;
  font-family:var(--fm-font);
}
.fm-backdrop.is-open{ opacity:1; }

.fm-modal{
  position:relative; width:100%; max-width:400px;
  background:var(--fm-bg); border:1px solid var(--fm-border); border-radius:var(--fm-radius);
  box-shadow:var(--fm-shadow); padding:32px 28px 24px; text-align:center;
  transform:translateY(12px) scale(0.97); transition:transform .25s ease;
}
.fm-backdrop.is-open .fm-modal{ transform:translateY(0) scale(1); }

.fm-close{
  position:absolute; top:12px; right:12px; width:28px; height:28px; border:none;
  background:transparent; color:var(--fm-text-dim); font-size:20px; line-height:1;
  cursor:pointer; border-radius:50%;
}
.fm-close:hover{ background:rgba(255,255,255,0.06); color:var(--fm-text); }

.fm-modal .fm-icon{
  width:56px; height:56px; margin:0 auto 16px; color:var(--fm-accent);
  background:var(--fm-accent-glow); border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding:12px;
}
.fm-title{ margin:0 0 8px; font-family:var(--font-display,'Sora',sans-serif); font-size:19px; font-weight:700; color:var(--fm-text); }
.fm-body{ font-size:14.5px; }

.fm-actions{ margin-top:22px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.fm-btn{
  appearance:none; border:none; cursor:pointer; padding:10px 26px; border-radius:999px;
  font-family:var(--fm-font); font-weight:600; font-size:14px; color:#fff;
  background:var(--fm-accent); transition:filter .15s ease, transform .15s ease;
}
.fm-btn:hover{ filter:brightness(1.1); }
.fm-btn:active{ transform:scale(0.97); }
.fm-state-warning .fm-btn:not(.fm-btn-cancel){ color:#241a04; }

.fm-btn-cancel{
  background:transparent; color:var(--fm-text-dim); border:1px solid var(--fm-border);
}
.fm-btn-cancel:hover{ filter:none; background:rgba(255,255,255,0.05); color:var(--fm-text); }

/* ==========================================================================
   Toast
   ========================================================================== */
.fm-toast-container{
  position:fixed; z-index:1100; display:flex; flex-direction:column; gap:10px;
  padding:16px; max-width:360px; width:calc(100% - 32px);
  pointer-events:none; font-family:var(--fm-font);
}
.fm-toast-container[data-position="top-right"]{ top:0; right:0; align-items:flex-end; }
.fm-toast-container[data-position="top-left"]{ top:0; left:0; align-items:flex-start; }
.fm-toast-container[data-position="top-center"]{ top:0; left:50%; transform:translateX(-50%); align-items:center; }
.fm-toast-container[data-position="bottom-right"]{ bottom:0; right:0; align-items:flex-end; flex-direction:column-reverse; }
.fm-toast-container[data-position="bottom-left"]{ bottom:0; left:0; align-items:flex-start; flex-direction:column-reverse; }
.fm-toast-container[data-position="bottom-center"]{ bottom:0; left:50%; transform:translateX(-50%); align-items:center; flex-direction:column-reverse; }

.fm-toast{
  pointer-events:auto; display:flex; gap:12px; width:100%;
  background:var(--fm-bg); border:1px solid var(--fm-border); border-left:3px solid var(--fm-accent);
  border-radius:12px; box-shadow:var(--fm-shadow); padding:14px 14px;
  opacity:0; transition:opacity .2s ease, transform .25s ease;
}
[data-position^="top"] .fm-toast{ transform:translateY(-10px); }
[data-position^="bottom"] .fm-toast{ transform:translateY(10px); }
.fm-toast.is-open{ opacity:1; transform:translateY(0); }
.fm-toast.is-closing{ opacity:0; }

.fm-toast-icon{ flex-shrink:0; width:22px; height:22px; color:var(--fm-accent); margin-top:1px; }
.fm-toast-body{ flex:1; min-width:0; }
.fm-toast-title{ margin:0 0 2px; font-weight:700; font-size:13.5px; color:var(--fm-text); }
.fm-toast-content{ font-size:13.5px; color:var(--fm-text-dim); }
.fm-toast-content .fm-text{ color:inherit; font-size:inherit; }
.fm-toast-close{
  flex-shrink:0; border:none; background:transparent; color:var(--fm-text-dim);
  font-size:16px; line-height:1; cursor:pointer; padding:0; height:fit-content;
}
.fm-toast-close:hover{ color:var(--fm-text); }

@media (max-width:480px){
  .fm-toast-container{ max-width:none; width:100%; padding:10px; }
}