/* ==========================================================================
   DTC HIDDEN MARKET · CREATIVE STRATEGIST intake · Deftform Custom CSS · v5-CS
   --------------------------------------------------------------------------
   Dizajn = preview v2 (uski 540px stub, mono labele, veliki beli naslov,
   kartice koje se invertuju u belo), prenet 1:1 na živi Deftform DOM.
   Isti dizajn sistem kao editor forma (v5). Selektori su testirani na živom
   Deftform DOM-u — isti nalog, isti rendering, pa važe i ovde.

   ⚠ NAJVAŽNIJE — HERO SE CRTA IZ CSS-a
   Deftform ceo intro renderuje kao JEDAN <p class="mb-7"> sa <br> prelomima.
   CSS ne ume da razdvoji tekstualne čvorove, pa se originalni <p> gasi
   (font-size:0) a hero se ponovo iscrtava kroz ::before/::after sa tekstom
   u `content`. Posledica: kopija živi OVDE, ne u Deftformu.

   → Ako menjaš tekst introa, menjaj ga u sekciji 3 ovog fajla.
   → Originalni tekst OSTAVI u Deftformu (ne briši ga) — nevidljiv je, ali
     ostaje u DOM-u za screen-readere i za slučaj da neko skine CSS.
   → Apostrof u `content` mora biti \' ili tipografski ' (ovde je korišćen ').
   ========================================================================== */

:root {
  --hm-bg:          #060608;
  --hm-field:       rgba(255,255,255,.025);
  --hm-field-hover: rgba(255,255,255,.05);
  --hm-surface:     #101014;
  --hm-ink:         #ececf1;
  --hm-head:        #ffffff;
  --hm-muted:       #8a8f98;
  --hm-faint:       #55585f;
  --hm-line:        #1e1e24;
  --hm-line-strong: #33333b;
  --hm-glow:        rgba(255,255,255,.08);
  --hm-live:        #4ade80;
  --hm-error:       #ff6166;
  --hm-radius:      10px;
  --hm-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI',
             Inter, Roboto, 'Helvetica Neue', sans-serif;
  --hm-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
}

/* ---------- 1. Stranica -------------------------------------------------- */

html, body,
body.cs_body,
body.cs_bodycolor {
  background: var(--hm-bg) !important;
  color: var(--hm-ink) !important;
  font-family: var(--hm-font) !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
}

body {
  background-image: radial-gradient(640px 300px at 50% -80px,
    rgba(255,255,255,.05), transparent 70%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* jedina "hrome" na stranici: hairline na vrhu */
body::before {
  content: "";
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 50;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,.30) 22%, rgba(255,255,255,.30) 78%, transparent);
  pointer-events: none;
}

::selection { background: #ffffff; color: #060608; }

/* ---------- 2. Kolona ---------------------------------------------------- */
/* Beli card nestaje; sadržaj se sužava na 540px kao u preview-u. */

.cs_formbg {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  max-width: none !important;
}
.cs_formbg > div {
  max-width: 580px !important;   /* 540 sadržaj + 2×20 padding */
  margin: 0 auto !important;
  padding: 96px 20px 110px !important;
}

/* .page nosi Tailwind -mx-3 -mt-3, polja nose p-3 → gasi se oboje zajedno */
form .page { margin: 0 !important; }

.formfield {
  padding: 0 0 46px !important;   /* vazduh kao u preview-u */
  width: 100% !important;
}

hr.my-5 {
  border: none !important;
  border-top: 1px solid var(--hm-line) !important;
  margin: 0 0 46px !important;
  opacity: 1 !important;
}
.formfield:has(> hr) { padding-bottom: 0 !important; }

/* Prvi element forme je prazan .formfield sa samo <hr> unutra — suvišan je
   ispod hero-a i pravi duplu prazninu. Ostali hr-ovi (između sekcija) ostaju. */
form .page > .formfield:first-child:has(> hr) { display: none !important; }

/* ---------- 3. HERO (tekst se crta odavde) ------------------------------ */

/* gasi originalni intro tekst, zadržava element kao kontejner */
main > p,
p.mb-7 {
  font-size: 0 !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
main > p br { display: none !important; }

/* 3a. brand linija */
main > p::before {
  content: "DTC HIDDEN MARKET";
  display: block;
  font-family: var(--hm-mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--hm-muted);
}

/* 3b. naslov — jedina glasna linija na stranici */
main > p::after {
  content: "Brands don't need more creatives. They need someone who knows why the ad worked.";
  display: block;
  color: var(--hm-head);
  font-family: var(--hm-font);
  font-weight: 700;
  font-size: clamp(27px, 4.6vw, 35px);
  letter-spacing: -.03em;
  line-height: 1.08;
  margin: 22px 0 14px;
}

/* 3c. podnaslov */
form::before {
  content: "We place creative strategists straight into DTC brands doing 7-9 figures. No agency in the middle, no markup on your rate, no free strategy decks to win the work. You talk to the operator, you name your number, we take $0.";
  display: block;
  color: var(--hm-muted);
  font-family: var(--hm-font);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 44ch;
  margin-bottom: 14px;
}

/* 3d. status linija sa live tačkom */
form .page::before {
  content: "PRIVATE INTAKE · $0 FEES · PAID TESTS ONLY · HUMAN REVIEW IN 7 DAYS";
  display: block;
  width: 100%;
  font-family: var(--hm-mono);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: .1em;
  color: var(--hm-faint);
  margin-bottom: 72px;
  padding-left: 14px;
  /* zelena tačka je background, ne element — mora imati eksplicitan
     transparent stop, inače boja curi preko cele linije */
  background-image: radial-gradient(circle at 4px 50%, var(--hm-live) 0 2.5px, transparent 2.6px);
  background-repeat: no-repeat;
  animation: hm-pulse 2.2s ease-in-out infinite;
}
@keyframes hm-pulse {
  0%, 100% { background-image: radial-gradient(circle at 4px 50%, rgba(74,222,128,1) 0 2.5px, transparent 2.6px); }
  50%      { background-image: radial-gradient(circle at 4px 50%, rgba(74,222,128,.22) 0 2.5px, transparent 2.6px); }
}

/* ---------- 4. Labela pitanja ------------------------------------------- */

.formfield > label {
  display: block !important;
  font-family: var(--hm-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--hm-muted) !important;
  line-height: 1.5 !important;
  margin-bottom: 10px !important;
}
.formfield > label span { color: var(--hm-faint) !important; font-style: normal !important; }

/* opis polja, ako ga ikad dodaš u Deftformu */
.formfield > label + p,
.formfield .text-xs,
.formfield .text-stone-500 {
  color: var(--hm-faint) !important;
  font-family: var(--hm-font) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  max-width: 52ch !important;
  margin: -4px 0 12px !important;
}

/* ---------- 5. Text polja ------------------------------------------------ */

input.field.cs_field,
textarea.field.cs_field {
  width: 100% !important;
  background: var(--hm-field) !important;
  border: 1px solid var(--hm-line) !important;
  border-radius: var(--hm-radius) !important;
  color: var(--hm-ink) !important;
  font-family: var(--hm-font) !important;
  font-size: 15.5px !important;
  line-height: 1.5 !important;
  padding: 14px 16px !important;
  box-shadow: none !important;
  outline: none !important;
  caret-color: #ffffff !important;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
}
textarea.field.cs_field { min-height: 104px !important; line-height: 1.6 !important; resize: vertical !important; }

input.field.cs_field::placeholder,
textarea.field.cs_field::placeholder { color: var(--hm-faint) !important; opacity: 1 !important; }

input.field.cs_field:hover,
textarea.field.cs_field:hover {
  border-color: var(--hm-line-strong) !important;
  background: var(--hm-field-hover) !important;
}
input.field.cs_field:focus,
textarea.field.cs_field:focus {
  border-color: #ffffff !important;
  background: var(--hm-field-hover) !important;
  box-shadow: 0 0 0 3px var(--hm-glow), 0 0 32px rgba(255,255,255,.05) !important;
}

/* Chrome autofill bi prefarbao polje u belo */
input.cs_field:-webkit-autofill,
input.cs_field:-webkit-autofill:hover,
input.cs_field:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--hm-ink) !important;
  -webkit-box-shadow: 0 0 0 1000px #0d0d11 inset !important;
  caret-color: #ffffff !important;
}

/* ---------- 6. Kartice opcija -------------------------------------------- */

fieldset > div { display: grid !important; gap: 8px !important; }

fieldset label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  background: var(--hm-field) !important;
  border: 1px solid var(--hm-line) !important;
  border-radius: var(--hm-radius) !important;
  padding: 13px 16px !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease !important;
}
fieldset label:hover { border-color: var(--hm-line-strong) !important; background: var(--hm-field-hover) !important; }

fieldset label span {
  color: var(--hm-ink) !important;
  font-family: var(--hm-font) !important;
  font-size: 14.5px !important;
  font-weight: 450 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-inline-start: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* @tailwindcss/forms crta tačku/kvačicu preko currentColor, a markup nosi
   dark:text-orange-500 → mora da se gazi `color`, ne accent-color. */
input.cs_check_radio {
  color: #ffffff !important;
  background-color: transparent !important;
  border-color: var(--hm-line-strong) !important;
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 auto !important;
  margin: 3px 0 0 !important;
  transform: none !important;
  box-shadow: none !important;
}
input.cs_check_radio:checked { background-color: currentColor !important; }  /* bez ovoga je kružić prazan */
input.cs_check_radio:focus { outline: none !important; box-shadow: 0 0 0 3px var(--hm-glow) !important; }

/* SELECTED = inverzija u belo */
fieldset label:has(input.cs_check_radio:checked) {
  background: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 28px rgba(255,255,255,.10) !important;
}
fieldset label:has(input.cs_check_radio:checked) span { color: #060608 !important; font-weight: 550 !important; }
fieldset label:has(input.cs_check_radio:checked) input.cs_check_radio {
  color: #060608 !important; border-color: #060608 !important;
}

/* ---------- 7. Country dropdown (nice-select) ---------------------------- */

.nice-select {
  width: 100% !important;
  background: var(--hm-field) !important;
  border: 1px solid var(--hm-line) !important;
  border-radius: var(--hm-radius) !important;
  color: var(--hm-ink) !important;
  font-family: var(--hm-font) !important;
  font-size: 15.5px !important;
  height: auto !important;
  line-height: 1.5 !important;
  padding: 14px 40px 14px 16px !important;
  transition: border-color .18s ease, background .18s ease !important;
}
.nice-select:hover { border-color: var(--hm-line-strong) !important; background: var(--hm-field-hover) !important; }
.nice-select.open  { border-color: #ffffff !important; box-shadow: 0 0 0 3px var(--hm-glow) !important; }

.nice-select::after {
  border-bottom: 1.5px solid var(--hm-muted) !important;
  border-right:  1.5px solid var(--hm-muted) !important;
  height: 7px !important; width: 7px !important;
  right: 16px !important; margin-top: -5px !important;
}
.nice-select .current { color: var(--hm-faint) !important; }
.nice-select.selected .current { color: var(--hm-ink) !important; }

.nice-select .nice-select-dropdown {
  background: var(--hm-surface) !important;
  border: 1px solid var(--hm-line) !important;
  border-radius: var(--hm-radius) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,.65) !important;
  margin-top: 6px !important;
}
.nice-select .nice-select-search-box { background: transparent !important; padding: 8px !important; }
.nice-select .nice-select-search {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--hm-line) !important;
  border-radius: 8px !important;
  color: var(--hm-ink) !important;
  font-family: var(--hm-font) !important;
  font-size: 14px !important;
  padding: 9px 12px !important;
  width: 100% !important;
  min-height: 0 !important;
}
.nice-select .nice-select-search::placeholder { color: var(--hm-faint) !important; }
.nice-select .nice-select-search:focus { border-color: #ffffff !important; outline: none !important; }

.nice-select .list { background: transparent !important; max-height: 260px !important; }
.nice-select .option {
  color: var(--hm-ink) !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  min-height: 0 !important;
  padding: 9px 14px !important;
  background: transparent !important;
}
.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
  background: rgba(255,255,255,.07) !important; color: #ffffff !important;
}

/* ---------- 8. Phone (intl-tel-input) ----------------------------------- */
/* NE dirati padding-left na .iti__tel-input — iti ga postavlja inline. */

.iti { width: 100% !important; display: block !important; }
.iti__country-container { padding: 1px !important; }

.iti__selected-country {
  background: transparent !important;
  border: none !important;
  border-right: 1px solid var(--hm-line) !important;
  border-radius: var(--hm-radius) 0 0 var(--hm-radius) !important;
  padding: 0 !important;
  width: auto !important;
  font-family: var(--hm-font) !important;
}
.iti__selected-country:hover { background: rgba(255,255,255,.05) !important; }
.iti__selected-country-primary { border: none !important; padding: 0 8px 0 15px !important; }
.iti__selected-dial-code { color: var(--hm-muted) !important; font-size: 14px !important; padding-right: 8px !important; }
.iti__globe-svg path, .iti__globe path { fill: var(--hm-muted) !important; }
.iti__arrow { border-top-color: var(--hm-muted) !important; }

.iti__dropdown-content {
  background: var(--hm-surface) !important;
  border: 1px solid var(--hm-line) !important;
  border-radius: var(--hm-radius) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,.65) !important;
  color: var(--hm-ink) !important;
}
.iti__search-input {
  background: rgba(255,255,255,.04) !important;
  border: none !important;
  border-bottom: 1px solid var(--hm-line) !important;
  color: var(--hm-ink) !important;
  font-family: var(--hm-font) !important;
}
.iti__search-input::placeholder { color: var(--hm-faint) !important; }
.iti__country { background: transparent !important; color: var(--hm-ink) !important; }
.iti__country:hover, .iti__country.iti__highlight { background: rgba(255,255,255,.07) !important; }
.iti__dial-code { color: var(--hm-faint) !important; }
.iti__no-results { color: var(--hm-faint) !important; }

/* ---------- 9. Dugme ----------------------------------------------------- */
/* SAMO .cs_button — `form button` bi pogodio i iti country picker. */

button.cs_button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  background: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  color: #060608 !important;
  font-family: var(--hm-font) !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  padding: 17px 34px !important;
  margin-top: 8px !important;
  cursor: pointer !important;
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease !important;
}
button.cs_button:hover {
  background: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px var(--hm-glow), 0 12px 48px rgba(255,255,255,.14) !important;
}
button.cs_button:active { transform: translateY(0) scale(.99); }
button.cs_button:focus-visible { outline: 2px solid var(--hm-glow) !important; outline-offset: 3px !important; }
button.cs_button svg { color: #060608 !important; }
button.cs_button[disabled] { opacity: .6 !important; }

/* OPCIONO — preimenuj dugme iz CSS-a umesto iz Deftforma.
   Odkomentariši samo ako ti Deftform ne da da promeniš tekst dugmeta.
button.cs_button { font-size: 0 !important; }
button.cs_button::after {
  content: "Send it → never pitch again";
  font-size: 15.5px; font-weight: 600; letter-spacing: -.01em;
}
*/

/* ---------- 10. Greške ---------------------------------------------------- */

.error-message,
.formfield .text-red-600,
.formfield .text-red-500 {
  color: var(--hm-error) !important;
  font-family: var(--hm-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  margin-top: 7px !important;
  display: block !important;
}
.formfield.has_error input.cs_field,
.formfield.has_error textarea.cs_field,
.formfield.has_error .nice-select,
.formfield.has_error .iti__tel-input {
  border-color: var(--hm-error) !important;
  box-shadow: 0 0 0 3px rgba(255,97,102,.12) !important;
}

/* ---------- 11. Footer + thank-you --------------------------------------- */

a { color: var(--hm-ink) !important; text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: #ffffff !important; }

footer, footer * { background: transparent !important; color: var(--hm-faint) !important; }
footer a { text-decoration: none !important; }
footer a:hover { color: var(--hm-muted) !important; }

/* zatvaranje kruga, kao .foot u preview-u */
footer::before {
  content: "[ REVIEWED BY A HUMAN · YOUR RATE IS YOURS · DTC HIDDEN MARKET ]";
  display: block;
  font-family: var(--hm-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--hm-faint);
  text-align: center;
  margin-bottom: 26px;
}

/* Thank-you ekran (nije viđen bez slanja prijave — defanzivno). */
main h1, main h2, main h3 {
  color: var(--hm-head) !important;
  font-family: var(--hm-font) !important;
  font-weight: 700 !important;
  font-size: clamp(26px, 4.6vw, 34px) !important;
  letter-spacing: -.03em !important;
  line-height: 1.1 !important;
}

/* ---------- 12. Mobilno --------------------------------------------------- */

@media (max-width: 560px) {
  .cs_formbg > div { padding: 72px 20px 90px !important; }
  .formfield { padding-bottom: 38px !important; }
  form .page::before { margin-bottom: 56px !important; }
}