/* ============================================================
   Multiuser — Landing Pulizia Profonda Climatizzatori
   Custom CSS in aggiunta a Tailwind (CDN).
   Palette: verde #9ccb3e + navy #24485e + footer #0e1e28.
   ============================================================ */

/* ---------- Smooth scroll con offset header sticky ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  background-color: #ffffff;
}

/* ---------- Before/After slider (hero) ---------- */
.ba-slider {
  touch-action: none;
}
.ba-before {
  clip-path: inset(0 50% 0 0);
  will-change: clip-path;
}

/* ---------- Text balance sui titoli (evita a-capo brutti) ---------- */
h1, h2, h3,
.text-balance {
  text-wrap: balance;
}

/* ---------- Selezione testo brandizzata ---------- */
::selection {
  background-color: #9ccb3e;
  color: #0e1e28;
}

/* ---------- Scrollbar dark theme (Webkit) ---------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #24485e;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #345772;
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ---------- FAQ accordion: rotazione icona ---------- */
.faq-item.is-open .faq-icon {
  transform: rotate(180deg);
}

/* ---------- Accent text underline (hero) ---------- */
.accent-underline {
  text-decoration: underline;
  text-decoration-color: #ffcb05;
  text-decoration-thickness: 4px;
  text-underline-offset: 4px;
}

/* ---------- Pulsanti CTA: no tap highlight ---------- */
a, button {
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Glow pulsato per CTA hero (attrattore) ---------- */
@keyframes ctaGlow {
  0%, 100% {
    box-shadow: 0 15px 35px -5px rgba(26, 220, 255, 0.5),
                0 0 0 0 rgba(26, 220, 255, 0);
  }
  50% {
    box-shadow: 0 15px 45px -5px rgba(26, 220, 255, 0.7),
                0 0 0 8px rgba(26, 220, 255, 0.1);
  }
}
.cta-pulse {
  animation: ctaGlow 2.8s ease-in-out infinite;
}

/* ---------- Marquee duplicato per loop infinito senza salti ---------- */
.animate-marquee {
  animation-duration: 35s;
}

/* ---------- Sticky mobile bottom: safe-area iOS ---------- */
@supports (padding: max(0px)) {
  .fixed.bottom-0 {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

/* ---------- Form loading state ---------- */
.form-loading button[type="submit"] {
  opacity: 0.6;
  pointer-events: none;
}
.form-loading button[type="submit"]::after {
  content: " ...";
}

/* ---------- Print friendly: nascondi sticky / form ---------- */
@media print {
  header,
  .fixed.bottom-0,
  #contatti form,
  [class*="bg-navy-950"] {
    color-adjust: economy;
  }
  .fixed.bottom-0 {
    display: none !important;
  }
}

/* ---------- Focus visibile per accessibilità ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #1adcff;
  outline-offset: 2px;
}

/* ---------- Bento hover lift ---------- */
[id="benefici"] [class*="bg-gradient"]:hover,
[id="benefici"] [class*="bg-navy"]:hover,
[id="benefici"] [class*="bg-amber"]:hover {
  transform: translateY(-4px);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Shimmer overlay (per loading placeholder foto) ---------- */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(26, 220, 255, 0.08) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
}

/* ---------- Hero number counter glow ---------- */
.stat-number {
  background: linear-gradient(135deg, #4de4ff 0%, #00c8ee 50%, #1adcff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(26, 220, 255, 0.3);
}

/* ---------- Marquee gradient mask edges (logo partner) ---------- */
section .animate-marquee {
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}

/* ---------- Selettore radio B2C/B2B custom ---------- */
input[type="radio"]:checked + div {
  box-shadow: 0 4px 12px -2px rgba(1, 6, 26, 0.3);
}

/* ---------- Responsive: mobile + tablet fixes ---------- */
@media (max-width: 640px) {
  /* Sezioni: meno padding verticale su mobile */
  section[id] {
    scroll-margin-top: 70px;
  }
  /* Headline hero: evita overflow del tratto SVG sotto "bomba" */
  h1 svg {
    max-width: 100%;
  }
  /* Card confronto: badge etichetta non deve essere troppo grande */
  .faq-q {
    font-size: 0.95rem;
  }
}

/* Tablet: riduci il marquee speed */
@media (max-width: 1024px) {
  .animate-marquee {
    animation-duration: 25s;
  }
}

/* Evita overflow orizzontale su mobile causato da elementi rotated/absolute */
body {
  overflow-x: hidden;
}

/* ---------- Disabilita float animation su utenti con reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .animate-float,
  .animate-gradient,
  .animate-marquee,
  .animate-pulse2,
  .cta-pulse {
    animation: none !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   Open/Closed state — show/hide CTA in base all'orario di Roma
   Il body riceve mu-open o mu-closed (server-side + JS).
   Le classi .mu-when-open / .mu-when-closed sui blocchi target.
   Logica: nascondiamo SOLO quando il body NON corrisponde,
   così Tailwind gestisce il display normalmente quando visibili.
   ============================================================ */
body.mu-open .mu-when-closed,
body.mu-closed .mu-when-open {
  display: none !important;
}

/* ============================================================
   Contact Form 7 — styling coerente con la landing
   ============================================================ */
.mu-form .wpcf7 { font-size: 1rem; }

/* Spaziatura verticale tra i blocchi del form */
.mu-form .wpcf7-form > div,
.mu-form .wpcf7-form > label,
.mu-form .wpcf7-form > p {
  margin-bottom: 1rem;
}
.mu-form .wpcf7-form > p:last-child { margin-bottom: 0; }

/* Campi input/select/textarea */
.mu-field {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  background-color: #fff;
  color: #222;
  font-size: 1rem;
  line-height: 1.4;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.mu-field::placeholder { color: #94a3b8; }
.mu-field:focus {
  border-color: transparent;
  box-shadow: 0 0 0 2px #9ccb3e;
}
.mu-form textarea.mu-field { resize: none; min-height: 64px; }

/* CF7 wrappa ogni controllo in <span class="wpcf7-form-control-wrap">: deve riempire la cella */
.mu-form .wpcf7-form-control-wrap { display: block; width: 100%; }

/* Checkbox privacy */
.mu-acceptance { display: flex; align-items: flex-start; gap: 0.5rem; }
.mu-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.mu-form .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: 0.5rem; }
.mu-form .wpcf7-acceptance input[type="checkbox"] { margin-top: 0.2rem; width: 1rem; height: 1rem; accent-color: #82ab32; }

/* Pulsante submit */
.mu-submit {
  width: 100%;
  background-color: #9ccb3e;
  color: #0e1e28;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.95rem 1.5rem;
  border: none;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: background-color .15s, transform .15s;
}
.mu-submit:hover { background-color: #a9d358; transform: translateY(-2px); }

/* Messaggi di risposta / validazione */
.mu-form .wpcf7-response-output {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.mu-form .wpcf7-not-valid-tip {
  color: #dc2626;
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 0.25rem;
}
.mu-form .wpcf7-spinner { margin: 0 0 0 0.5rem; }