/* =============================================================
   forms.css  -  Zoyel shared modal & form styles
   Include this on every page with:
     <link rel="stylesheet" href="/assets/style/forms.css" />
   ============================================================= */

/* ── MODAL OVERLAY ────────────────────────────────────────────
   Used by .modal-overlay (all pages) AND .mov (news-detail)    */
.modal-overlay,
.mov {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.modal-overlay.active,
.mov.open {
  display: flex;
  animation: zModalIn 0.25s ease;
}

@keyframes zModalIn {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── MODAL CONTAINER ─────────────────────────────────────────── */
.modal {
  background: var(--ink, #0d1117);
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-radius: 4px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

/* ── CLOSE BUTTON ────────────────────────────────────────────── */
.modal-close,
.mx {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  color: var(--muted, rgba(245, 244, 240, 0.45));
  font-size: 1.5rem;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
  line-height: 1;
}

.modal-close:hover,
.mx:hover {
  color: var(--white, #f5f4f0);
  background: rgba(255, 255, 255, 0.05);
}

/* ── MODAL BODY ──────────────────────────────────────────────── */
/* Standard pages use .modal-body; ZBS uses .mb; news-detail uses .mbd */
.modal-body,
.mb,
.mbd {
  padding: 2.5rem;
}

.modal-body .eyebrow,
.mb .eyebrow,
.mey {
  font-family: var(--fm, "JetBrains Mono", monospace);
  font-size: 0.62rem;
  color: var(--teal, #2563eb);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.modal-body h2,
.mb h2,
.mbd h2 {
  font-family: var(--fd, "DM Serif Display", serif);
  font-size: 1.6rem;
  font-weight: 400;
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.modal-body .desc,
.mb .desc,
.mbd .md {
  font-size: 0.88rem;
  color: rgba(245, 244, 240, 0.6);
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

/* ── FORM ROWS ───────────────────────────────────────────────── */
/* Standard pages use .form-row; ZBS uses .fr; news-detail uses .fr inside .fr2 */
.form-row,
.fr {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.fr2 {
  display: flex;
  gap: 1rem;
  margin-bottom: 0;
}

.fr2 .fr {
  flex: 1;
  margin-bottom: 1rem;
}

.form-row label,
.fr label {
  font-family: var(--fm, "JetBrains Mono", monospace);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 244, 240, 0.6);
  font-weight: 500;
}

.form-row input,
.form-row select,
.form-row textarea,
.fr input,
.fr select,
.fr textarea {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border, rgba(245, 244, 240, 0.12));
  border-radius: 2px;
  padding: 0.7rem 0.9rem;
  color: var(--white, #f5f4f0);
  font-family: var(--fb, "DM Sans", sans-serif);
  font-size: 0.88rem;
  transition: border-color 0.2s, background 0.2s;
  width: 100%;
}
.form-row select option {
  background: var(--ink, #0d1117);
  color: var(--white, #f5f4f0);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus,
.fr input:focus,
.fr select:focus,
.fr textarea:focus {
  outline: none;
  border-color: var(--teal, #2563eb);
  background: rgba(37, 99, 235, 0.05);
}

.form-row textarea,
.fr textarea {
  min-height: 5rem;
  resize: vertical;
  font-family: var(--fb, "DM Sans", sans-serif);
}

/* Two-column row variant */
.form-row.row {
  flex-direction: row;
  gap: 1rem;
}

.form-row.row > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.fr.row {
  flex-direction: row;
  gap: 1rem;
}

.fr.row > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* ── SUBMIT BUTTON ───────────────────────────────────────────── */
/* Standard pages use .modal-submit; ZBS & news-detail use .msub */
.modal-submit,
.msub {
  width: 100%;
  background: var(--teal, #2563eb);
  color: var(--black, #000);
  font-family: var(--fb, "DM Sans", sans-serif);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.85rem;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: background 0.2s;
  letter-spacing: 0.02em;
  display: block;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
  box-sizing: border-box;
}

.modal-submit:hover,
.msub:hover {
  background: var(--teal-dark, #1d4ed8);
}

/* ── NOTE BELOW SUBMIT ───────────────────────────────────────── */
.modal-note,
.mnote {
  font-size: 0.72rem;
  color: var(--muted, rgba(245, 244, 240, 0.45));
  margin-top: 1rem;
  line-height: 1.6;
  text-align: center;
}

/* ── SUCCESS ICON CIRCLE ─────────────────────────────────────── */
.z-success-icon {
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--teal, #2563eb);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: var(--teal, #2563eb);
  font-size: 1.5rem;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  .modal-overlay,
  .mov {
    padding: 1rem;
    align-items: flex-end;
  }

  .modal {
    max-height: 95vh;
    border-radius: 8px 8px 0 0;
  }

  .form-row.row,
  .fr.row,
  .fr2 {
    flex-direction: column;
    gap: 0;
  }

  .fr2 .fr {
    flex: unset;
  }

  .modal-body,
  .mb,
  .mbd {
    padding: 1.75rem 1.5rem;
  }
}

/* =============================================================
      VALIDATION STYLES
      ============================================================= */

/* ── PER-FIELD ERROR MESSAGE - always single line ────────────── */
.z-field-error {
  display: block;
  font-size: 0.68rem;
  color: #e05252;
  margin-top: 0.28rem;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--fb, "DM Sans", sans-serif);
  animation: zErrIn 0.18s ease;
}

@keyframes zErrIn {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── INVALID INPUT / SELECT / TEXTAREA - red outline ────────── */
/* Class-based so it wins over every :focus override             */
.form-row input.z-invalid,
.form-row select.z-invalid,
.form-row textarea.z-invalid,
.fr input.z-invalid,
.fr select.z-invalid,
.fr textarea.z-invalid {
  border-color: #e05252 !important;
  background: rgba(224, 82, 82, 0.06) !important;
  outline: none;
}

/* Keep red even while focused */
.form-row input.z-invalid:focus,
.form-row select.z-invalid:focus,
.form-row textarea.z-invalid:focus,
.fr input.z-invalid:focus,
.fr select.z-invalid:focus,
.fr textarea.z-invalid:focus {
  border-color: #e05252 !important;
  background: rgba(224, 82, 82, 0.06) !important;
  outline: none;
}

/* ── VALID FIELD STATE (after error is fixed) ────────────────── */
.form-row input.z-valid,
.form-row select.z-valid,
.form-row textarea.z-valid,
.fr input.z-valid,
.fr select.z-valid,
.fr textarea.z-valid {
  border-color: var(--teal, #2563eb) !important;
  background: rgba(37, 99, 235, 0.05) !important;
}

/* ── TOP-OF-FORM ERROR BANNER (free-email blocking) ─────────── */
.z-form-banner {
  background: rgba(224, 82, 82, 0.1);
  border: 1px solid rgba(224, 82, 82, 0.35);
  border-radius: 2px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #e05252;
  font-family: var(--fb, "DM Sans", sans-serif);
  animation: zErrIn 0.18s ease;
}

/* ── REQUIRED FIELD MARKER ───────────────────────────────────── */
.form-row label sup,
.fr label sup {
  color: #e05252;
  font-size: 0.7em;
  vertical-align: super;
  margin-left: 1px;
}