/** (PREGNORF ✅) DMX Contact AI — form.css (card success + summary + polished toasts)
 * File: dmx-contact-ai/modules/form/ui/form.css
 * Version: 1.8.0
 */

/* ---------- core form ---------- */
.dmxai-form{ --gap:16px; --ok:#137333; --err:#b00020; --ink:#0b1220; --muted:#6b7280; }
.dmxai-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap); }
@media (max-width:768px){ .dmxai-grid{ grid-template-columns:1fr } }

.dmxai-input,.dmxai .input,.dmxai-textarea,.dmxai .textarea,
.field .input,.field .text,.field .textarea{
  width:100%; border:1px solid #d1d5db; border-radius:12px; padding:.75rem .9rem;
  font-size:1rem; background:#fff; color:var(--ink);
}
.dmxai-input:focus,.dmxai-textarea:focus,.field .input:focus,.field .textarea:focus{
  outline:none; border-color:#0b1220; box-shadow:0 0 0 3px rgba(11,18,32,.08);
}

.dmxai-label,.field>label{ display:block; font-weight:600; margin:0 0 .4rem; color:var(--ink) }
.dmxai-field.has-error .dmxai-input,.dmxai-field.has-error .dmxai-textarea,
.field.has-error .input,.field.has-error .textarea{ border-color:var(--err) }
.dmxai-error{ color:var(--err); font-size:.92rem; margin-top:.35rem }

.actions{ display:flex; align-items:center; gap:.8rem; margin-top:1.1rem; min-height:2rem; flex-wrap:wrap }
.actions .btn{
  border-radius:999px; padding:.7rem 1.1rem; border:1px solid #0b1220; background:#0b1220; color:#fff; font-weight:600;
}
.actions .btn.is-loading{ position:relative; opacity:.85 }
.actions .btn.is-loading::after{
  content:""; position:absolute; right:.9rem; top:50%; width:.9rem; height:.9rem; margin-top:-.45rem;
  border-radius:50%; border:2px solid currentColor; border-top-color:transparent; animation:dmxspin .8s linear infinite;
}
@keyframes dmxspin{ to{ transform:rotate(360deg) } }

.dmxai-status{ font-size:.95rem; color:var(--muted) }
.dmxai-status[data-kind="ok"]{ color:var(--ok); font-weight:600 }
.dmxai-status[data-kind="error"]{ color:var(--err); font-weight:600 }

/* Smooth collapse when replacing the form with a success card */
#dmx-contact-form.is-collapsing{ overflow:hidden; transition:max-height .34s ease }

/* ---------- success panel (as card, inserted above form) ---------- */
.dmxai-success.as-card{
  display:flex; gap:.9rem; align-items:flex-start; position:relative;
  background:#f6f9fc; border:1px solid #e5e7eb; border-radius:14px;
  padding:1rem 1.1rem; color:var(--ink);
  box-shadow:0 10px 24px rgba(0,0,0,.04);
  transition:opacity .28s ease,max-height .34s ease,transform .28s ease;
  transform:translateY(4px); opacity:0.001;
}
.dmxai-success.as-card.in{ transform:translateY(0); opacity:1 }

.dmxai-success.as-card .ico{
  flex:0 0 28px; height:28px; width:28px; border-radius:999px; line-height:28px; text-align:center;
  background:#e8f5ee; color:var(--ok); font-weight:700; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.dmxai-success.as-card h3{ margin:0 0 .2rem; font-weight:800; font-size:1.05rem }
.dmxai-success.as-card .lead{ margin:.1rem 0 .6rem; color:#0b1220 }
.dmxai-success.as-card .summary{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; margin:.2rem 0 .6rem;
}
@media (max-width:640px){ .dmxai-success.as-card .summary{ grid-template-columns:1fr } }
.dmxai-success.as-card .summary > div{
  background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:.55rem .7rem;
}
.dmxai-success.as-card .summary span{ display:block; font-size:.78rem; color:var(--muted); margin-bottom:.1rem }
.dmxai-success.as-card .summary b{ font-weight:700; color:#0b1220; word-break:break-word }

.dmxai-success.as-card details.preview{
  margin:.2rem 0 .6rem;
}
.dmxai-success.as-card details.preview summary{
  cursor:pointer; user-select:none; font-weight:600; color:#0b1220;
}
.dmxai-success.as-card details.preview pre{
  margin:.4rem 0 0; padding:.65rem .8rem; background:#0b1220; color:#fff; border-radius:10px; overflow:auto;
  max-height:240px; font-size:.9rem; line-height:1.35rem;
}

.dmxai-success.as-card .next{ display:flex; gap:.6rem; flex-wrap:wrap }
.dmxai-success.as-card .btn{
  display:inline-flex; align-items:center; gap:.4rem; border-radius:999px; padding:.55rem .95rem; font-weight:600; text-decoration:none;
}
.dmxai-success.as-card .btn.ghost{
  background:#fff; color:#0b1220; border:1px solid #0b1220;
}
.dmxai-success.as-card .btn.link{
  background:transparent; color:#0b1220; border:1px dashed #0b1220;
}

/* ---------- toasts ---------- */
#dmx-toasts{
  position:fixed; right:20px; bottom:20px; z-index:9999;
  display:flex; flex-direction:column; gap:10px; pointer-events:none;
}
@media (max-width:820px){ #dmx-toasts{ right:50%; transform:translateX(50%); bottom:16px } }
.dmx-toast{
  min-width:240px; max-width:min(92vw, 420px);
  background:#111827; color:#fff; border-radius:12px; padding:.72rem .9rem;
  box-shadow:0 18px 44px rgba(0,0,0,.25); opacity:0; transform:translateY(10px) scale(.98);
  transition:opacity .24s ease, transform .24s ease; pointer-events:auto;
  font-size:.95rem; line-height:1.25rem; display:flex; align-items:flex-start; gap:.6rem;
}
.dmx-toast .ico{ width:1.1rem; height:1.1rem; margin-top:.1rem; border-radius:50%; background:#374151 }
.dmx-toast.in{ opacity:1; transform:translateY(0) scale(1) }
.dmx-toast.ok{ background:#0f5132 }
.dmx-toast.ok .ico{ background:#198754 }
.dmx-toast.info{ background:#1f2937 }
.dmx-toast.error{ background:#7f1d1d }
.dmx-toast.error .ico{ background:#dc3545 }


/* Toast icons + stronger error contrast */
.dmx-toast .ico{ display:inline-block; width:1rem; height:1rem; margin-right:.5rem; border-radius:50%; background:currentColor; opacity:.25; vertical-align:-2px; }
.dmx-toast.error{ background:#7f1d1d; }
.dmx-toast.ok{ background:#0f5132; }