/* wt-mostra — formularul de brief pentru mostra gratuită.
   Folosește tokenii din wt-system.css, deci urmează tema fără reglaje.

   Formularul stă în HTML, nu e construit din JS ca wt-magnet: e piesa de
   conversie a paginii, deci trebuie să existe și pentru un crawler, și pentru
   cineva cu JavaScript blocat. JS-ul adaugă doar trimiterea fără reîncărcare. */

.wt-mostra { position: relative; }

.wt-mostra-card {
  position: relative; overflow: hidden;
  max-width: 760px; margin-inline: auto;
  padding: clamp(1.4rem, 3.5vw, 2.4rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg, 14px);
  box-shadow: 0 18px 50px -28px rgba(19, 17, 28, 0.45);
}

.wt-mostra-eyebrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-bottom: 0.7rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--purple-text);
}
.wt-mostra-eyebrow svg { width: 15px; height: 15px; flex: none; }

.wt-mostra-card h2 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem);
  line-height: 1.2; letter-spacing: -0.02em;
}
.wt-mostra-intro { margin: 0 0 1.5rem; color: var(--text-dim); line-height: 1.65; max-width: 56ch; }

.wt-mostra-grid { display: grid; gap: 0.9rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wt-mostra-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.wt-mostra-field.is-wide { grid-column: 1 / -1; }

.wt-mostra-field label { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.wt-mostra-field .opt { font-weight: 500; color: var(--text-dim); }
.wt-mostra-field .hint { font-size: 0.78rem; line-height: 1.5; color: var(--text-dim); }

.wt-mostra-field input,
.wt-mostra-field select,
.wt-mostra-field textarea {
  width: 100%; min-width: 0;
  padding: 0.72rem 0.85rem;
  font: inherit; font-size: 0.95rem;
  color: var(--text);
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 10px);
  transition: border-color var(--dur-fast, 0.18s), box-shadow var(--dur-fast, 0.18s);
}
.wt-mostra-field textarea { min-height: 84px; resize: vertical; line-height: 1.55; }
.wt-mostra-field input::placeholder,
.wt-mostra-field textarea::placeholder { color: var(--text-dimmer); }
.wt-mostra-field input:focus-visible,
.wt-mostra-field select:focus-visible,
.wt-mostra-field textarea:focus-visible {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(123, 47, 255, 0.18);
}
.wt-mostra-field[data-invalid="da"] input,
.wt-mostra-field[data-invalid="da"] select { border-color: #DC2626; }
[data-theme="dark"] .wt-mostra-field[data-invalid="da"] input,
[data-theme="dark"] .wt-mostra-field[data-invalid="da"] select { border-color: #F87171; }

/* Câmpurile opționale stau strânse: cinci obligatorii se văd ca puțin,
   zece se văd ca mult, iar omul decide din prima privire dacă începe. */
.wt-mostra-extra { grid-column: 1 / -1; margin-top: 0.2rem; }
.wt-mostra-extra > summary {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0; cursor: pointer; list-style: none;
  font-size: 0.88rem; font-weight: 600; color: var(--purple-text);
}
.wt-mostra-extra > summary::-webkit-details-marker { display: none; }
.wt-mostra-extra > summary svg { width: 15px; height: 15px; transition: transform var(--dur, 0.32s) var(--ease-out-quart, ease); }
.wt-mostra-extra[open] > summary svg { transform: rotate(180deg); }
.wt-mostra-extra-body { display: grid; gap: 0.9rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 0.5rem; }

.wt-mostra-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wt-mostra-consent {
  grid-column: 1 / -1;
  display: flex; align-items: flex-start; gap: 0.6rem;
  margin-top: 0.4rem; padding: 0.85rem 1rem;
  background: var(--bg-tint); border: 1px solid var(--border); border-radius: var(--r-md, 10px);
  font-size: 0.82rem; line-height: 1.6; color: var(--text-dim); cursor: pointer;
}
.wt-mostra-consent input { margin-top: 0.22rem; flex: none; width: 16px; height: 16px; accent-color: var(--purple); cursor: pointer; }
.wt-mostra-consent a { color: var(--purple-text); text-decoration: underline; text-underline-offset: 2px; }

.wt-mostra-submit { grid-column: 1 / -1; margin-top: 0.5rem; }
.wt-mostra-submit button { width: 100%; justify-content: center; }
.wt-mostra-under {
  grid-column: 1 / -1;
  margin: 0.8rem 0 0; text-align: center;
  font-size: 0.8rem; line-height: 1.6; color: var(--text-dim);
}

.wt-mostra-msg { grid-column: 1 / -1; margin: 0.9rem 0 0; font-size: 0.9rem; line-height: 1.6; }
.wt-mostra-msg.is-err { color: #B91C1C; font-weight: 600; }
[data-theme="dark"] .wt-mostra-msg.is-err { color: #FCA5A5; }
.wt-mostra-msg.is-ok { color: var(--text); }

/* După trimitere rămân doar confirmarea și pașii următori: câmpurile completate
   nu mai au ce spune, dar instrucțiunea de a deschide emailul are. */
.wt-mostra[data-state="done"] .wt-mostra-grid > *:not(.wt-mostra-msg) { display: none; }
.wt-mostra[data-state="done"] .wt-mostra-intro { display: none; }
.wt-mostra[data-state="done"] .wt-mostra-msg {
  margin: 0; padding: 1.1rem 1.25rem;
  background: var(--bg-tint);
  border: 1px solid var(--lime);
  border-left-width: 3px;
  border-radius: var(--r-md, 10px);
}

@media (max-width: 640px) {
  .wt-mostra-grid,
  .wt-mostra-extra-body { grid-template-columns: minmax(0, 1fr); }
}