@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght=0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Montserrat:wght=200;300;400;500;600;700&display=swap');

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

#nav{
  z-index: 99999;
}

#mobile-menu-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#mobile-menu-panel .mobile-menu-card {
  transform: translateY(16px) scale(0.98);
  transition: transform 300ms ease;
}

#mobile-menu-panel.is-open .mobile-menu-card {
  transform: translateY(0) scale(1);
}

body.menu-open {
  overflow: hidden;
}

@keyframes scale-up {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

body {
  background-color: #000000 !important;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  overflow-x: hidden;
}

.margin-top {
  margin-top: 50vh;
}

/* Custom scrollbar matching professional polish minimal tone */
.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #0a0a0a;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #262626;
  border-radius: 99px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #404040;
}

/* Custom styling for standard date and time selectors */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Animazione dell'anello d'oro */
  @keyframes luxury-fill {
    to {
      stroke-dashoffset: 0;
    }
  }

  /* Stato attivo dell'anello */
  #loading-circle.animate {
    /* 2200ms = 2.2 Secondi esatti richiesti */
    animation: luxury-fill 2200ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  }

  /* Animazione dell'anello d'oro (resta invariata) */
  @keyframes luxury-fill {
    to {
      stroke-dashoffset: 0;
    }
  }

  #loading-circle.animate {
    animation: luxury-fill 2800ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  }

  #beauty-preloader {
    /* Manteniamo il punto di origine perfettamente al centro per l'effetto onda */
    transform-origin: center center;
    
    /* Configurazione della transizione: 1200ms per una sfumatura cinematografica */
    /* Il cubic-bezier simula la fisica del fluido: impatto rapido, stabilizzazione lenta */
    transition: 
      opacity 1400ms cubic-bezier(0.1, 0.8, 0.2, 1),
      transform 1500ms cubic-bezier(0.1, 0.8, 0.2, 1),
      filter 1500ms cubic-bezier(0.1, 0.8, 0.2, 1);
    
    will-change: transform, opacity, filter;
  }

  /* Classi di trigger per lo stato finale (applicate via JS) */
  #beauty-preloader.opacity-0 {
    opacity: 0;
  }
  #beauty-preloader.scale-110 {
    transform: scale(1.18); /* Espande lo schermo intero verso l'esterno, come un'increspatura più marcata */
  }
  #beauty-preloader.blur-md {
    filter: blur(28px); /* Sfoca l'interfaccia nera mentre svela la homepage sotto */
  }

 /* ==========================================================================
   CAROUSEL MOBILE - SOLO SCORRIMENTO SENZA ALTERAZIONI VISIVE
   ========================================================================== */

/* Nasconde la scrollbar di sistema durante lo swipe su smartphone */
#reels-carousel-container::-webkit-scrollbar {
  display: none !important;
}
#reels-carousel-container {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* Annulla i vecchi stili errati per evitare conflitti */
.reel-card-blur, .reel-card-active {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Ripristino forzato e totale per Desktop */
@media (min-width: 768px) {
  #reels-carousel-container {
    display: grid !important;
    overflow: visible !important;
  }
  .instagram-reel-card {
    min-width: 0 !important;
  }
}

/* ==========================================================================
   EFFECT CARD STACK MOBILE - RESET TOTALE SU DESKTOP
   ========================================================================== */
@media (max-width: 767px) {
  #reels-stack-container {
    perspective: 1000px;
    touch-action: pan-y; /* Permette lo scroll verticale della pagina ma intercetta i gesti orizzontali */
  }

  .instagram-reel-card {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.4s ease, 
                z-index 0s linear;
    will-change: transform, opacity;
    cursor: grab;
  }
  
  .instagram-reel-card:active {
    cursor: grabbing;
  }

  /* Nascondi i testi interni dei reel che si trovano "sotto" al mazzo per pulizia visiva */
  .instagram-reel-card[data-stack-index="1"] div,
  .instagram-reel-card[data-stack-index="2"] div,
  .instagram-reel-card[data-stack-index="3"] div {
    opacity: 0 !important;
    pointer-events: none;
  }
  .instagram-reel-card[data-stack-index="0"] div {
    opacity: 1 !important;
  }
}

/* Ripristino assoluto per Desktop - Nessuna modifica visiva */
@media (min-width: 768px) {
  .instagram-reel-card {
    position: relative !important;
    transform: none !important;
    opacity: 1 !important;
    z-index: auto !important;
  }
}

/* ==========================================================================
   CATALOGO SERVIZI — PERCORSO GUIDATO (GENERE → CATEGORIA → TRATTAMENTO)
   ========================================================================== */

/* Scrollbar chiara per l'elenco trattamenti dell'ultimo step, su sfondo bianco */
.custom-scrollbar-light::-webkit-scrollbar {
  width: 5px;
}

.custom-scrollbar-light::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar-light::-webkit-scrollbar-thumb {
  background: #e5e5e5;
  border-radius: 99px;
}

.custom-scrollbar-light::-webkit-scrollbar-thumb:hover {
  background: #cda250;
}

/* Riga trattamento dentro l'ultimo step del percorso guidato / risultati ricerca */
.treatment-row {
  transition: border-color 250ms ease, background-color 250ms ease;
}

/* Le righe categoria/servizi usano solo utility Tailwind già
   generate a runtime dal CDN, nessuna classe custom aggiuntiva necessaria. */

/* ==========================================================================
   SELETTORE GENERE — card unica arrotondata divisa in due (Donna / Uomo)
   ========================================================================== */

.gender-select-card {
  background-color: #0a0a0a;
  box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.6);
}

.gender-card {
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  background-color: #171717; /* fallback se l'immagine non è disponibile */
}

/* Foto di sfondo: parte desaturata e leggermente ingrandita, si "svela" a colori all'hover */
.gender-card-bg {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center;
  filter: grayscale(75%) brightness(0.45) contrast(1.05);
  transform: scale(1.06);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 900ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}

.gender-card:hover .gender-card-bg,
.gender-card:focus-visible .gender-card-bg {
  filter: grayscale(0%) brightness(0.62) contrast(1.05);
  transform: scale(1.14);
}

/* Overlay scuro per garantire leggibilità del testo sopra la foto */
.gender-card-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.55) 100%),
    radial-gradient(120% 100% at 50% 100%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 60%);
  transition: opacity 700ms ease;
  z-index: 1;
}

.gender-card:hover .gender-card-overlay,
.gender-card:focus-visible .gender-card-overlay {
  opacity: 0.85;
}

/* Linea divisoria dorata sottile tra le due metà */
.gender-divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent 0%, rgba(205, 162, 80, 0.5) 20%, rgba(205, 162, 80, 0.5) 80%, transparent 100%);
}

.gender-divider-mobile {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(205, 162, 80, 0.5) 20%, rgba(205, 162, 80, 0.5) 80%, transparent 100%);
}

/* Leggero bordo dorato interno quando si passa il mouse sulla card intera */
.gender-select-card:has(.gender-card:hover) {
  border-color: rgba(205, 162, 80, 0.35);
  transition: border-color 400ms ease;
}