/* ============================================================
   Net Studio — Modal System (Base)
   File: /public/modal.base.css
   Purpose: shared modal layout + components (theme via vars)
   ============================================================ */

/* Default tokens (can be overridden by portal theme / template CSS) */
:root{
  --ns-modal-overlay: rgba(0,0,0,.72);

  --ns-modal-card-bg: rgba(10,10,14,.92);
  --ns-modal-card-border: rgba(255,255,255,.12);
  --ns-modal-shadow: 0 26px 80px rgba(0,0,0,.70);

  --ns-modal-radius: 18px;
  --ns-modal-pad: 14px;

  --ns-field-bg: rgba(255,255,255,.06);
  --ns-field-border: rgba(255,255,255,.16);
  --ns-field-radius: 12px;

  --ns-btn-radius: 999px;

  /* uses your portal accent if present */
  --ns-accent: var(--accent, #ef4444);

  /* readable defaults */
  --ns-text: #fff;
  --ns-muted: rgba(255,255,255,.72);
  --ns-danger: #ef4444;
}

/* Overlay */
.ns-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--ns-modal-overlay);
  padding: 16px;
}

.ns-modal.is-open{ display:flex; }

/* Card */
.ns-modal__card{
  width: 100%;
  max-width: 520px;
  border-radius: var(--ns-modal-radius);
  border: 1px solid var(--ns-modal-card-border);
  background: var(--ns-modal-card-bg);
  box-shadow: var(--ns-modal-shadow);
  padding: var(--ns-modal-pad);
  color: var(--ns-text);
  font-family: var(--font-body, system-ui, -apple-system, sans-serif);
}

/* Header row */
.ns-modal__top{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.ns-modal__title{
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 900;
  opacity: .92;
}

.ns-modal__x{
  border: none;
  background: transparent;
  color: var(--ns-text);
  font-size: 18px;
  line-height: 1;
  opacity: .85;
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
}
.ns-modal__x:active{ transform: translateY(1px); }

/* Form label */
.ns-modal__label{
  font-size: 11px;
  opacity: .72;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Inputs */
.ns-modal__field{
  width: 100%;
  padding: 12px 10px;
  border-radius: var(--ns-field-radius);
  border: 1px solid var(--ns-field-border);
  background: var(--ns-field-bg);
  color: var(--ns-text);
  outline: none;
  font-family: inherit;
}
.ns-modal__field:focus{
  border-color: rgba(255,255,255,.28);
}

/* Hint text */
.ns-modal__hint{
  margin-top: 6px;
  font-size: 11px;
  color: var(--ns-muted);
}

/* Slots grid (NO internal scroll container) */
.ns-modal__slots{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Slot button */
.ns-slot{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: var(--ns-text);
  font-size: 12px;
  letter-spacing: .06em;
  cursor: pointer;
}

.ns-slot:hover{
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.08);
}

.ns-slot.is-selected{
  background: var(--ns-accent);
  border-color: var(--ns-accent);
  color: #000;
}

/* Message row */
.ns-modal__msg{
  margin-top: 10px;
  font-size: 12px;
  min-height: 18px;
  opacity: .92;
}

/* Actions row */
.ns-modal__actions{
  display:flex;
  gap: 10px;
  margin-top: 10px;
}

/* Buttons */
.ns-modal__btn{
  flex: 1;
  padding: 12px 12px;
  border-radius: var(--ns-btn-radius);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.ns-modal__btn--ghost{
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent;
  color: var(--ns-text);
  font-weight: 800;
}

.ns-modal__btn--primary{
  border: none;
  background: var(--ns-accent);
  color: #000;
}

.ns-modal__btn[disabled]{
  opacity:.6;
  cursor:not-allowed;
}

/* Optional: danger primary (future-ready) */
.ns-modal__btn--danger{
  border: none;
  background: var(--ns-danger);
  color: #000;
}