/* Disabilita highlight su mobile (iOS Safari) */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Rimuove outline/border/box-shadow su link/bottone in focus/hover/active */
.nav-item,
.nav-item:hover,
.nav-item:focus,
.nav-item:active,
.cta-button,
.cta-button:hover,
.cta-button:focus,
.cta-button:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Base reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* BODY */
body {
  font-family: "Poppins", sans-serif;
  margin: 0;
  background-color: #000;
}

/* PAGE container generico */
.page {
  width: 100%;
  min-height: 100vh;
  background-color: #000;
  position: relative; 
}

/* Header fisso con gradient singolo */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;

  display: flex;
  align-items: center;
  height: 96px;
  padding: 0 32px;

  background: linear-gradient(90deg, #f9f295 0%, #e0aa3e 100%);
}

/* Logo a sinistra */
.logo {
  width: 96px;
  height: 96px;
  cursor: pointer;
}

/* Menu centrato */
.nav-links {
  margin: 0 auto;
  display: flex;
  gap: 30px;
}

/* Voci menu */
.nav-item {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: #1e1e1e;
  padding: 8px 16px;
  text-decoration: none;
  cursor: pointer;
  border-radius: 9999px;
  transition: background-color 0.2s, transform 0.2s, color 0.2s;
}

/* Hover => sfondo bianco, testo nero */
.nav-item:hover {
  background-color: #fff;
  color: #1e1e1e;
}

/* Link attivo => sfondo bianco */
.nav-item.active {
  background-color: #fff !important;
  color: #1e1e1e !important;
}

.home-content {
  padding-top: 96px;
  min-height: calc(100vh - 96px);
  /* Unico background – immagine Figma */
  background:
    linear-gradient(rgba(0,0,0,.60), rgba(0,0,0,.60)),
    url("https://odryeivy.top/wp-content/uploads/2025/04/ChatGPT-Image-15-apr-2025-19_24_41.png")
      center/cover no-repeat;
  background-color: #000;
  position: relative;
}

/* Hero => centrato orizz+vert */
.hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 96px);
  padding: 20px;
}

.title {
  font-size: 64px;
  color: #fff;
  margin-bottom: 14px;
  font-weight: 400;
}

.subtitle {
  font-size: 32px;
  font-weight: 275;
  color: #fff;
  margin-bottom: 60px;
  opacity: 0;
  transition: opacity 0.5s;
}

.description {
  font-size: 24px;
  color: #fff;
  max-width: 745px;
  margin-bottom: 60px;
  line-height: 1.5;
}

/* Bottone CTA => gradient singolo, grande */
.cta-button {
  display: inline-block;
  font-size: 28px;
  font-weight: 500;
  color: #000;
  padding: 30px 100px;
  border-radius: 28px;
  background: linear-gradient(90deg, #f9f295 0%, #e0aa3e 100%);
  transition: transform 0.2s;
  text-decoration: none !important;
}
.cta-button:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}


/* Responsive breakpoints */
@media (max-width: 991px) {
  .title {
    font-size: 48px;
  }
  .subtitle {
    font-size: 28px;
  }
  .description {
    font-size: 20px;
  }
  .cta-button {
    font-size: 28px;
    padding: 15px 60px;
  }
}

@media (max-width: 640px) {
  .header {
    height: 70px;
    padding: 0 16px;
  }
  .logo {
    width: 70px;
    height: 70px;
  }
  .nav-links {
    display: none;
  }
  .title {
    font-size: 36px;
  }
  .subtitle {
    font-size: 24px;
    margin-bottom: 40px;
  }
  .description {
    font-size: 18px;
    margin-bottom: 40px;
  }
  .cta-button {
    display: block;          /* occupa tutta la riga */
    width: 80%;
    max-width: 320px;
    margin: 0 auto;          /* centrato */
    font-size: 24px;
    padding: 16px 40px;
  }
}

/* ================================
   INTRO PAGE – layout e animazioni
================================ */

/* Usa lo stesso sfondo della Home */
.page.intro-page {
  background:
    linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
    url("https://odryeivy.top/wp-content/uploads/2025/04/ChatGPT-Image-15-apr-2025-19_24_41.png")
      center/cover no-repeat;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Contenitore interno che si anima in fade-in */
.intro-content {
  text-align: center;
  color: #fff;
  opacity: 0;             /* parte nascosto */
  transition: opacity 1.5s ease;
  max-width: 800px;
  width: 90%;
  margin: 0 auto;
  padding: 40px 20px;
}

/* Titolo */
.intro-title {
  font-size: 48px;
  margin-bottom: 40px;
  font-family: "Poppins", sans-serif;
}

/* Logo circolare normale (all’inizio, fermo) */
.intro-logo {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0;                /* fade-in separato dal testo */
  transform: scale(0.8);
  transition: opacity 1.5s ease, transform 1.5s ease;
  margin-bottom: 50px;
}

/* Contenitore pulsanti */
.intro-buttons {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

/* Pulsanti leggermente più piccoli rispetto a prima */
.intro-btn {
  font-size: 20px;
  padding: 14px 32px;
  cursor: pointer;
  transition: transform 0.3s;
}

/* Quando un pulsante entra in loading, disabilita il click */
.intro-btn.loading {
  pointer-events: none;
  opacity: 0.7;
}

/* ----------------------------------
   Fase: sparisci il resto del contenuto
----------------------------------- */
.intro-content.hide-others {
  opacity: 0; 
  pointer-events: none; 
  transition: opacity 0.5s;
}

/* Logo “grande” => prendi il controllo dello schermo */
.intro-logo.big-mode {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  margin-bottom: 0;
  z-index: 9999;
}

/* Animazione ingrandimento + rotazione */
@keyframes spinEnlarge {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(3) rotate(360deg);
  }
}

.rotate-and-enlarge {
  animation: spinEnlarge 1.2s forwards ease-in-out;
}

/* TV OFF overlay */
.tv-off-overlay {
  position: fixed;
  inset: 0; /* top, right, bottom, left = 0 */
  background: #000;
  opacity: 0;
  pointer-events: none;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.5s ease, opacity 0.5s ease;
  z-index: 999999; /* in cima a tutto */
}

.tv-off-overlay.active {
  transform: scaleY(1);
  opacity: 1;
}


/*****************************************
   HOME LANDING – NERO/ORO, SFONDO EDERA
*****************************************/
.landing-home {
  /* Sfondo a edera su tutta la Home */
  background:
    url("https://odryeivy.top/wp-content/uploads/2025/04/Progetto-senza-titolo-42-7.png")
      left top no-repeat,
    #000; /* colore di base */
  background-size: 300px auto, cover;
  color: #fff;
  font-family: "Poppins", sans-serif;
}

/* 1) HERO + overlay */
.hero-landing {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("https://odryeivy.top/wp-content/uploads/2025/04/ChatGPT-Image-15-apr-2025-19_24_41.png")
      center/cover no-repeat;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  max-width: 800px;
  padding: 40px 20px;
}
.hero-title {
  font-size: 3rem;
  margin-bottom: 20px;
  font-weight: 600;
  color: #fff;
}
.hero-title small {
  font-size: 1rem;
  font-weight: 400;
  display: block;
  margin-top: 8px;
  color: #ddd;
}
.hero-subtitle {
  font-size: 1.2rem;
  margin-bottom: 30px;
  line-height: 1.4;
}
.hero-cta-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px; /* Per avvicinare la freccia */
}

/* FRECCIA grande “chi siamo” */
.arrow-link {
  position: absolute !important;
  bottom: 30px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 999 !important;
  cursor: pointer;
}

.arrow-down {
  display: block;
  width: 150px;  /* regolate dimensioni */
  height: 200px;
}
.bounce {
  animation: arrowBounce 1.5s infinite;
}
.bounce:hover {
  animation-play-state: paused;
}
@keyframes arrowBounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(10px); }
}

/* 2) SEZIONE ISTRUZIONI / CARDS */
.instructions-section {
  padding: 80px 20px;
  text-align: center;
}
.section-title-card {
  max-width: 800px;
  margin: 0 auto 40px;
}
.section-title-card h2 {
  font-size: 2rem;
  margin-bottom: 8px;
  color: #e0aa3e;
}
.cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  gap: 30px;
}
.oi-card {
  background: #1e1e1e;
  padding: 24px;
  border-radius: 8px;
  border: 2px solid #e0aa3e;  /* bordo oro */
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  text-align: left;
  color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.oi-card:hover {
  transform: perspective(600px) rotateX(2deg);
  box-shadow: 0 12px 28px rgba(0,0,0,0.5);
}
.big-step-number {
  display: block;
  font-size: 5rem;
  font-weight: 700;
  margin-bottom: 10px;
  background: linear-gradient(90deg, rgba(224,170,62,1) 0%, rgba(224,170,62,0.3) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.oi-card h3 {
  color: #e0aa3e;
  margin-bottom: 10px;
}

/* 3) SEZIONE PERCHE' SCEGLIERCI */
.why-choose-us-section {
  padding: 80px 20px;
  text-align: center;
}
.why-choose-us-section .section-title {
  font-size: 2rem;
  margin-bottom: 40px;
  color: #e0aa3e;
}
.why-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(270px,1fr));
  gap: 30px;
}
.big-card {
  background: linear-gradient(135deg, rgba(30,30,30,0.85), rgba(30,30,30,1));
}

/* 4) GALLERIA IMMAGINI */
.gallery-section {
  padding: 80px 20px;
  text-align: center;
}
.gallery-section .section-title {
  font-size: 2rem;
  color: #e0aa3e;
  margin-bottom: 40px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width:1024px){
  .gallery-grid{
    /* aumenta la larghezza minima di ogni colonna */
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  }
}

.image-card {
  background: #1e1e1e;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.image-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* 5) CTA FINALE */
.final-cta {
  padding: 80px 20px;
  text-align: center;
  background: #111;
}
.final-cta h2 {
  font-size: 2rem;
  color: #e0aa3e;
  margin-bottom: 16px;
}
.final-cta-desc {
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto 24px;
  line-height: 1.5;
  color: #fff;
}
.final-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* FADE-IN */
.fade-on-load,
.fade-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 991px) {
  .hero-title {
    font-size: 2.2rem;
  }
  .hero-subtitle {
    font-size: 1rem;
  }
}
@media (max-width: 640px) {
  .hero-title {
    font-size: 1.8rem;
  }
  .big-step-number {
    font-size: 3.5rem;
  }
  .arrow-link .arrow-down {
    width: 100px;
    height: 130px;
  }
}


/***************************************************
  FOOTER CARD STYLES – Elegante, 3 carte, bordo oro
****************************************************/
.card-footer {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  gap: 24px;
  padding: 40px 20px;
  background: #111;
  border-top: 2px solid #e0aa3e; /* linea oro in alto */
}
.footer-card {
  background: #1e1e1e;
  border: 2px solid #e0aa3e;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  text-align: left;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
}
.footer-title {
  margin: 0;
  font-size: 1.2rem;
  color: #e0aa3e;
  border-bottom: 1px solid #e0aa3e;
  padding-bottom: 8px;
}
.social-card p {
  margin: 0;
  line-height: 1.4;
}
.footer-social-icons {
  display: flex; 
  gap: 16px;
  margin-top: 12px;
}
.footer-social-icons a svg {
  width: 30px; 
  height: 30px;
}
.links-card ul {
  list-style: none; 
  margin: 0; 
  padding: 0;
}
.links-card li {
  margin-bottom: 8px;
}
.links-card a {
  text-decoration: none;
  color: #fff;
  transition: color 0.2s;
}
.links-card a:hover {
  color: #e0aa3e;
}

.footer-contact-link {
  text-decoration: none;
  color: #fff;
  transition: color 0.2s;
}
.footer-contact-link:hover {
  color: #e0aa3e;
}

.footer-credits {
  margin-top: 12px;
  border-top: 1px solid #e0aa3e;
  padding-top: 8px;
}

/* Responsivo */
@media (max-width: 640px) {
  .card-footer {
    padding: 30px 16px;
    gap: 16px;
  }
  .footer-card {
    padding: 20px;
  }
  .footer-title {
    font-size: 1.1rem;
  }
  .footer-social-icons a svg {
    width: 24px; 
    height: 24px;
  }
}


.richieste-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  gap: 20px;
  margin-top: 20px;
}
.richiesta-card {
  background: #1e1e1e;
  border: 2px solid #e0aa3e;
  border-radius: 8px;
  padding: 20px;
  color: #fff;
  transition: background 0.3s;
}
.richiesta-card.card-evasa {
  background: #2a4f2a !important;
  border-color: #5ba55b !important;
}

.toggle-evasa-btn {
  margin-top: 12px;
  background: #e0aa3e;
  color: #1e1e1e;
  border: none;
  border-radius: 4px;
  padding: 8px 14px;
  cursor: pointer;
}
.toggle-evasa-btn:hover {
  background: #f0d977;
}



/* ==========================
   LOGIN CUSTOM PAGE STYLES
========================== */
.login-page {
  min-height: 100vh;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.login-wrapper {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  background: #1e1e1e;
  border: 2px solid #e0aa3e;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  padding: 30px;
  text-align: center;
}
.login-wrapper h1 {
  font-size: 1.8rem;
  color: #e0aa3e;
  margin-bottom: 10px;
}
.login-wrapper p {
  font-size: 1rem;
  color: #ccc;
  margin-bottom: 24px;
}
.login-wrapper form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.login-wrapper label {
  font-weight: 500;
  color: #f0d977;
  margin-bottom: 2px;
}
.login-wrapper input[type="text"],
.login-wrapper input[type="password"] {
  width: 100%;
  background: #2e2e2e;
  color: #fff;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 10px;
}
.login-wrapper button {
  align-self: center;
  background: #e0aa3e;
  color: #1e1e1e;
  border: none;
  border-radius: 4px;
  padding: 12px 20px;
  cursor: pointer;
  font-weight: 600;
}
.login-wrapper button:hover {
  background: #f0d977;
  color: #1e1e1e;
}


.footer-social-icons {
  display: flex;             /* Per disporre le icone su una riga */
  align-items: center;       /* Allineamento verticale centrato */
  gap: 10px;                 /* Spazio orizzontale tra le icone */
}

.footer-social-icons img {
  width: 43px;               /* Larghezza icona */
  height: 43px;              /* Altezza icona */
  object-fit: contain;       /* Mantiene proporzioni se le immagini sono più grandi */
  /* Se alcune icone ti sembrano sgranate o troppo grandi, 
     puoi ridurre la dimensione, es: width: 24px; height: 24px; */
}


/* ========================
   RICHIESTE PAGE HEADER
======================== */
.richieste-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* titolo a sinistra, logout a destra */
  margin-bottom: 20px;
}

.richieste-header .page-title {
  font-size: 1.8rem;
  color: #e0aa3e;  /* colore oro in linea col sito */
  margin: 0;       /* rimuove margine di default dell'h1 */
}

.logout-btn {
  display: inline-block;
  background: #e0aa3e;  /* sfondo oro */
  color: #1e1e1e;       /* testo scuro */
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
}

.logout-btn:hover {
  background: #f0d977;  /* variazione più chiara su hover */
}

/* =========================
   Link dorati nelle card
   ========================= */
.home-page .oi-card a,
.home-page .hero-subtitle a {      /* vale anche per il paragrafo sotto l'hero */
  color: #D4AF37;                  /* oro Odry & Ivy */
  text-decoration: none;           /* via la sottolineatura base */
  font-weight: 500;                /* un po' più in evidenza */
  transition: color .2s;
}

.home-page .oi-card a:hover,
.home-page .hero-subtitle a:hover {
  text-decoration: underline;      /* feedback visivo */
  color: #f6df8d;                  /* oro più chiaro in hover (facoltativo) */
}

/* =================================================================
   FIX specifici pagina di login
   ================================================================= */

/* 1) Footer full-width anche se il parent ha align-items:center  */
.login-page .card-footer{
  width:100%;
  align-self:stretch;      /* forza l’allineamento a tutta larghezza */
}

/* ================================================================
   LOGIN – spaziatura esterna + interna del box
   ================================================================ */

/* wrapper generale del modulo di login */
.login-page .login-wrapper{
  /* ------- SPAZIO ESTERNO (sopra/sotto) -------------- */
  margin: 80px auto;        /* 80 px top + bottom, centrato orizzontalmente */

  /* ------- SPAZIO INTERNO (padding) ------------------- */
  padding: 40px 24px;       /* aria fra bordo e campi */

  /* opzionali, solo estetica */
  max-width: 480px;         /* evita che diventi troppo largo su desktop */
  width: 100%;
}

/* ancora più respiro su schermi medi/grandi */
@media (min-width: 768px){
  .login-page .login-wrapper{
    margin: 120px auto;     /* aumenta la distanza esterna */
    padding: 60px 32px;     /* un pelo più di spazio interno */
  }
}


/* ===================== CONTACT UX ===================== */
.hidden{display:none !important;}

/* overlay con spinner ------------------------------------------------ */
.contact-overlay{
  position:fixed; inset:0; z-index:9998;
  background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
}
.spinner{
  width:64px; height:64px;
  border:8px solid #D4AF37;          /* oro brand */
  border-top-color:transparent;
  border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* modal di successo --------------------------------------------------- */
.contact-modal{
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
}
.modal-content{
  background:#fff; color:#222;
  border:4px solid #D4AF37;
  padding:40px 30px; max-width:420px; text-align:center;
  border-radius:12px;
}
.modal-content button{
  margin-top:24px; padding:10px 28px;
  background:#D4AF37; color:#fff; border:0; border-radius:4px;
  font-weight:600; cursor:pointer; transition:background .2s;
}
.modal-content button:hover{background:#f6df8d;}