/* ============================================================
   Lead form — Supabase submit, rental-period calendar, feedback
   Scoped to .js-supabase-form so the legacy form-handler.php
   forms on the other pages are untouched.
   ============================================================ */

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* Prefix + number share one row, prefix stays narrow. */
.field-phone { display: grid; grid-template-columns: 104px 1fr; gap: 10px; }

/* ---------- Small helper text under a field (e.g. referente hint on /fornitori/) ---------- */
.field-hint { font-size: .76rem; color: rgba(255,255,255,.5); margin: -8px 0 14px; }

/* ---------- Checkbox group (e.g. categorie offerte on /fornitori/) ---------- */
.categorie-label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin: 0 0 8px;
}
.categorie-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: rgba(255,255,255,.03);
}
.categorie-group .field-check.chip {
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.categorie-group .field-check.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.categorie-group .field-check.chip span { color: rgba(255,255,255,.8); }
.categorie-group .field-check.chip:hover { border-color: rgba(255,255,255,.4); }
.categorie-group .field-check.chip:has(input:checked) {
  background: rgba(249,188,7,.18);
  border-color: var(--yellow);
}
.categorie-group .field-check.chip:has(input:checked) span { color: var(--white); font-weight: 600; }
.categorie-group .field-check.chip:has(input:focus-visible) { outline: 2px solid var(--yellow); outline-offset: 2px; }
/* JS fallback for browsers without :has() support (main.js toggles this on change) */
.categorie-group .field-check.chip.is-checked {
  background: rgba(249,188,7,.18);
  border-color: var(--yellow);
}
.categorie-group .field-check.chip.is-checked span { color: var(--white); font-weight: 600; }

/* ---------- Calendar section ---------- */
.calendar-section {
  margin: 18px 0 16px;
  padding: 16px 16px 18px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(255,255,255,.04);
}
.calendar-section h3 {
  font-size: .95rem;
  color: var(--white);
  margin: 0 0 4px;
}
.calendar-section .calendar-hint {
  font-size: .78rem;
  color: rgba(255,255,255,.55);
  margin: 0 0 12px;
}
.calendar-section #rental-range-display {
  width: 100%;
  padding: 13px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--white);
  font-family: var(--font-body);
  font-size: .92rem;
  cursor: pointer;
}
.calendar-section #rental-range-display::placeholder { color: rgba(255,255,255,.4); }
.calendar-section #rental-range-display:focus {
  outline: 2px solid var(--yellow);
  background: rgba(255,255,255,.1);
}

/* Flatpickr sits on a light card so the default theme stays legible
   against the navy panel; only the selection colours are re-skinned. */
.flatpickr-calendar { font-family: var(--font-body); }
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--navy);
  font-weight: 600;
}
.flatpickr-day.inRange {
  background: rgba(249,188,7,.22);
  border-color: rgba(249,188,7,.22);
  box-shadow: -5px 0 0 rgba(249,188,7,.22), 5px 0 0 rgba(249,188,7,.22);
  color: var(--navy);
}
.flatpickr-day.today { border-color: var(--yellow); }

/* ---------- Submit feedback ---------- */
.form-feedback {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: .86rem;
  line-height: 1.45;
}
.form-feedback.is-visible { display: block; }
.form-feedback.is-success {
  background: rgba(46,125,79,.18);
  border: 1px solid rgba(46,125,79,.55);
  color: #9BE3B8;
}
.form-feedback.is-error {
  background: rgba(200,50,50,.15);
  border: 1px solid rgba(200,50,50,.5);
  color: #F2A3A3;
}

/* Spinner on the submit button while the request is in flight. */
.js-supabase-form button[type="submit"][disabled] {
  opacity: .72;
  cursor: not-allowed;
}
.btn-spinner {
  display: none;
  width: 15px; height: 15px;
  margin-right: 8px;
  border: 2px solid rgba(4,21,34,.35);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}
.is-submitting .btn-spinner { display: inline-block; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation-duration: 2s; }
}