/*
 * Nexus GSLB — Star Storm dark theme for DeftForm
 * Paste into: Form → Style → Custom CSS
 * ─────────────────────────────────────────────────
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

/* ── TOKENS ──────────────────────────────────────────────── */
:root {
  --ns-void:        #050610;
  --ns-deep-space:  #090b18;
  --ns-surface:     #161a30;
  --ns-surface-2:   #1e2238;
  --ns-surface-3:   #252a42;
  --ns-border:      #242840;
  --ns-border-h:    #333860;
  --ns-nebula-600:  #a31b3d;
  --ns-nebula-500:  #c41e3a;
  --ns-nebula-400:  #e8294a;
  --ns-nebula-300:  #f05470;
  --ns-fg:          #f0ead8;
  --ns-fg-warm:     #d8ceb8;
  --ns-fg-muted:    #8a8faa;
  --ns-fg-dim:      #4a4f6a;
  --ns-font-body:   'IBM Plex Sans', sans-serif;
  --ns-font-head:   'Space Grotesk', sans-serif;
  --ns-font-mono:   'Space Mono', monospace;
}

/* ── FORCE DARK ──────────────────────────────────────────── */
html { color-scheme: dark; }

/* ── BODY ────────────────────────────────────────────────── */
.cs_body {
  background-color: var(--ns-void) !important;
  color: var(--ns-fg) !important;
  font-family: var(--ns-font-body) !important;
  -webkit-font-smoothing: antialiased;
}

/* ── FORM CARD ───────────────────────────────────────────── */
.cs_formbg {
  background-color: var(--ns-surface) !important;
  border: 1px solid var(--ns-border);
  box-shadow: 0 0 0 1px var(--ns-border), 0 24px 64px rgba(0,0,0,0.6);
}

/* ── FIELD LABELS ────────────────────────────────────────── */
.formfield > label {
  color: var(--ns-fg) !important;
  font-family: var(--ns-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Required asterisk */
.formfield label span.text-red-700 {
  color: var(--ns-nebula-400) !important;
}

/* ── TEXT/PARAGRAPH BLOCKS ───────────────────────────────── */
.text {
  color: var(--ns-fg-muted);
  font-family: var(--ns-font-body);
  line-height: 1.7;
}
.text h1, .text h2, .text h3 {
  color: var(--ns-fg);
  font-family: var(--ns-font-head);
  font-weight: 600;
  margin-bottom: 8px;
}
.text h1 { font-size: 22px; }
.text h2 { font-size: 18px; }
.text a { color: var(--ns-nebula-400); text-decoration: underline; }
.text a:hover { color: var(--ns-nebula-300); }
.text strong, .text b { color: var(--ns-fg); }

/* ── INPUT / SELECT / TEXTAREA ───────────────────────────── */
input.cs_field,
select.cs_field,
textarea.cs_field {
  background-color: var(--ns-surface-2) !important;
  border: 1px solid var(--ns-border) !important;
  color: var(--ns-fg) !important;
  border-radius: 4px !important;
  font-family: var(--ns-font-body) !important;
  font-size: 14px !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
}

input.cs_field:focus,
select.cs_field:focus,
textarea.cs_field:focus {
  border-color: var(--ns-nebula-400) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(232, 41, 74, 0.15) !important;
}

input.cs_field::placeholder,
textarea.cs_field::placeholder {
  color: var(--ns-fg-dim) !important;
}

select.cs_field option {
  background-color: var(--ns-surface-2);
  color: var(--ns-fg);
}

/* ── CHECKBOX / RADIO OPTION ROWS ────────────────────────── */
label.cs_field {
  background-color: var(--ns-surface-2) !important;
  border: 1px solid var(--ns-border) !important;
  color: var(--ns-fg) !important;
  border-radius: 4px !important;
  transition: border-color 150ms ease, background-color 150ms ease;
}
label.cs_field:hover {
  border-color: var(--ns-border-h) !important;
  background-color: var(--ns-surface-3) !important;
}

/* Option label text spans */
label.cs_field > span.cs_field {
  color: var(--ns-fg-muted) !important;
  background-color: transparent !important;
  border: none !important;
}

/* ── CHECKBOX / RADIO INPUTS ─────────────────────────────── */
.cs_check_radio {
  accent-color: var(--ns-nebula-400) !important;
  border-color: var(--ns-border) !important;
}

/* Checked option row highlight */
input.cs_check_radio:checked + span,
input.cs_check_radio:checked ~ span {
  color: var(--ns-fg) !important;
}
label:has(input.cs_check_radio:checked) {
  border-color: var(--ns-nebula-400) !important;
  background-color: rgba(232, 41, 74, 0.08) !important;
}

/* ── RATING ──────────────────────────────────────────────── */
/* Unchecked rating box label */
.cs_rating + label.cs_field {
  border-color: var(--ns-border) !important;
  color: var(--ns-fg-muted) !important;
  background-color: var(--ns-surface-2) !important;
}
.cs_rating + label.cs_field:hover {
  border-color: var(--ns-border-h) !important;
  color: var(--ns-fg) !important;
}
/* Checked rating box */
.cs_rating:checked + label.cs_field {
  border-color: var(--ns-nebula-400) !important;
  background-color: rgba(232, 41, 74, 0.12) !important;
  color: var(--ns-fg) !important;
  box-shadow: inset 0 0 0 1px var(--ns-nebula-400) !important;
}

/* ── DIVIDER ─────────────────────────────────────────────── */
hr {
  border-color: var(--ns-border) !important;
}

/* ── DATEPICKER ICON ─────────────────────────────────────── */
.cs_datepicker {
  color: var(--ns-fg-dim) !important;
  background-color: var(--ns-surface-2) !important;
  border-left: 1px solid var(--ns-border) !important;
  border-radius: 0 4px 4px 0 !important;
}

/* ── FILE UPLOAD ─────────────────────────────────────────── */
.cs_fileupload {
  background-color: var(--ns-surface-2) !important;
  border-radius: 4px;
}
.cs_fileupload > div {
  border-color: var(--ns-border) !important;
  border-radius: 4px !important;
}
.cs_fileupload label {
  color: var(--ns-fg-muted) !important;
}
.cs_fileupload svg {
  color: var(--ns-fg-dim) !important;
}

/* ── SIGNATURE CANVAS ────────────────────────────────────── */
canvas.cs_field {
  background-color: var(--ns-surface-2) !important;
  border-color: var(--ns-border) !important;
}

/* ── SLIDER ──────────────────────────────────────────────── */
[data-flux-slider-track] > div {
  background-color: var(--ns-surface-3) !important;
}
[data-flux-slider-indicator] {
  background-color: var(--ns-nebula-500) !important;
}
[data-flux-slider-thumb] {
  background-color: var(--ns-fg) !important;
  border: none !important;
}
.cs_secondaryColor {
  color: var(--ns-fg-muted) !important;
  font-family: var(--ns-font-mono) !important;
  font-size: 12px !important;
}

/* ── RANKING DRAG HANDLE ─────────────────────────────────── */
.cs_textcolor {
  color: var(--ns-fg-dim) !important;
}

/* ── CONTINUE / SUBMIT BUTTON ────────────────────────────── */
.cs_button {
  background: var(--ns-nebula-500) !important;
  border: none !important;
  color: var(--ns-fg) !important;
  font-family: var(--ns-font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 10px 24px !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)) !important;
  transition: background-color 150ms ease !important;
  cursor: pointer !important;
}
.cs_button:hover {
  background: var(--ns-nebula-400) !important;
  color: #fff !important;
}
.cs_button:active {
  transform: scale(0.97) !important;
}

/* ── INTL-TEL-INPUT (phone field) ────────────────────────── */
.iti { width: 100%; }
.iti--separate-dial-code .iti__selected-flag {
  background-color: var(--ns-surface-3) !important;
  border-right: 1px solid var(--ns-border) !important;
}
.iti__flag-container:hover .iti__selected-flag {
  background-color: var(--ns-surface-3) !important;
}
.iti__country-list {
  background-color: var(--ns-surface) !important;
  border: 1px solid var(--ns-border) !important;
  color: var(--ns-fg-muted) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
.iti__country.iti__highlight,
.iti__country:hover {
  background-color: var(--ns-surface-2) !important;
  color: var(--ns-fg) !important;
}
.iti__selected-dial-code {
  color: var(--ns-fg-muted) !important;
}
.iti__divider {
  border-bottom-color: var(--ns-border) !important;
}
.iti__search-input {
  background-color: var(--ns-surface-2) !important;
  border-bottom: 1px solid var(--ns-border) !important;
  color: var(--ns-fg) !important;
}

/* ── NICE-SELECT (country dropdown) ─────────────────────── */
.nice-select {
  background-color: var(--ns-surface-2) !important;
  border: 1px solid var(--ns-border) !important;
  color: var(--ns-fg) !important;
  border-radius: 4px !important;
  font-family: var(--ns-font-body) !important;
  font-size: 14px !important;
  height: auto !important;
  line-height: 1.5 !important;
  padding: 10px 40px 10px 12px !important;
}
.nice-select:focus {
  border-color: var(--ns-nebula-400) !important;
  box-shadow: 0 0 0 3px rgba(232, 41, 74, 0.15) !important;
}
.nice-select::after {
  border-bottom: 2px solid var(--ns-fg-dim) !important;
  border-right: 2px solid var(--ns-fg-dim) !important;
  right: 14px !important;
}
.nice-select.open {
  border-color: var(--ns-nebula-400) !important;
}
.nice-select .list {
  background-color: var(--ns-surface) !important;
  border: 1px solid var(--ns-border) !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
  margin-top: 4px !important;
}
.nice-select .option {
  color: var(--ns-fg-muted) !important;
  font-family: var(--ns-font-body) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  min-height: unset !important;
  line-height: 1.4 !important;
}
.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
  background-color: var(--ns-surface-2) !important;
  color: var(--ns-fg) !important;
}
.nice-select .option.selected {
  color: var(--ns-fg) !important;
  font-weight: 500 !important;
}
.nice-select .nice-select-search-box {
  border-bottom: 1px solid var(--ns-border) !important;
  padding: 6px 8px !important;
}
.nice-select .nice-select-search {
  background-color: var(--ns-surface-2) !important;
  border: 1px solid var(--ns-border) !important;
  color: var(--ns-fg) !important;
  border-radius: 3px !important;
  font-family: var(--ns-font-body) !important;
  font-size: 13px !important;
}

/* ── VALIDATION ERRORS ───────────────────────────────────── */
.error-message {
  color: var(--ns-nebula-300) !important;
  font-size: 12px !important;
  font-family: var(--ns-font-body) !important;
  margin-top: 4px;
}
.formfield.has_error input.cs_field,
.formfield.has_error select.cs_field,
.formfield.has_error textarea.cs_field {
  border-color: var(--ns-nebula-400) !important;
  box-shadow: 0 0 0 3px rgba(232, 41, 74, 0.15) !important;
}

/* ── FORM FOOTER ─────────────────────────────────────────── */
footer {
  background-color: transparent !important;
  border-top: 1px solid var(--ns-border) !important;
}
footer svg {
  color: var(--ns-fg-dim) !important;
}