/* ═══════════════════════════════════════════════
   DIREZIONE13 — Components
   Form, overlay, campi, success state
   ═══════════════════════════════════════════════ */

/* ─── CTA BUTTON (shared base) ─── */
.cta,
.form-submit {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: var(--white);
  cursor: pointer;
}
.cta::before,
.form-submit::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--red);
  flex-shrink: 0;
}

/* ─── FORM EYEBROW & TITLE ─── */
.form-eyebrow {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: var(--red);
}

.form-title {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--white);
}
.form-title span { color: var(--red); }

/* ─── FORM SECTIONS ─── */
.form-section {
  border-bottom: 1px solid var(--white-06);
}
.form-section:last-of-type {
  border-bottom: none;
}

.section-head {
  display: flex;
  align-items: center;
}
.section-num {
  font-weight: 800;
  color: var(--red);
  letter-spacing: 0.1em;
}
.section-title {
  font-weight: 500;
  text-transform: uppercase;
  color: var(--white-52);
}
.section-line {
  flex: 1;
  height: 1px;
  background: var(--white-07);
}

/* ─── FORM FIELDS ─── */
.field label {
  display: block;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--white-52);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--white-13);
  font-family: var(--font);
  font-weight: 300;
  color: var(--white);
  outline: none;
  transition: border-color .3s;
  -webkit-appearance: none;
  border-radius: 0;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23DC3026' opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
.field textarea {
  resize: none;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-bottom-color: var(--red);
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--white-16);
}
.field select option {
  background: #0a0a0a;
  color: var(--white);
}

.field-note {
  font-weight: 300;
  color: var(--white-42);
  letter-spacing: 0.1em;
}

/* ─── FORM CLOSE ─── */
.form-close {
  background: none;
  border: none;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--white-52);
  cursor: pointer;
}

/* ─── FORM DISCLAIMER ─── */
.form-disclaimer {
  font-weight: 300;
  color: var(--white-38);
  line-height: 1.6;
}

/* ─── SUCCESS STATE ─── */
.success-num {
  display: block;
  font-weight: 800;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px var(--red);
  color: transparent;
  line-height: 1;
  letter-spacing: -0.05em;
}
.success-msg {
  font-weight: 300;
  color: var(--white);
}
.success-msg strong {
  font-weight: 800;
  color: var(--red);
}