/* RESET & BASE */
* {margin: 0; padding: 0; box-sizing: border-box;}
/* Overlay di caricamento */
#ci-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #202020; z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; transition: opacity 1.0s ease, visibility 0.6s ease;}
.spinner { border: 3px solid rgba(255,255,255,0.2); border-top-color: #fff; border-radius: 50%; width: 40px; height: 40px; animation: spin 0.8s linear infinite;}
@keyframes spin { to { transform: rotate(360deg); }}
#ci-loader.loaded { opacity: 0; visibility: hidden; }
/* BODY STANDARD */
html, body {margin: 0; padding: 0; min-height: 100vh;}
body {display: flex; flex-direction: column; min-height: 100%;}
main {flex: 1;}
html {scroll-behavior: smooth;}
body {font-family: Roboto Condensed, roboto, Microsoft JhengHei, sans-serif; background-color: #000; color: #fff; text-decoration: none;}

/* CONTAINER */
.container {width: 100%; max-width: 1200px; margin: 0 auto;}

/* NAVBAR PRINCIPALE */
.main-navbar { position: sticky; top: 0; width: 100%; z-index: 999; text-transform: uppercase; background-color: rgba(0, 0, 0, 0.9); backdrop-filter: blur(6px); transition: background-color 0.3s ease; 
overflow: hidden; /* < da eliminare in caso di problemi */}
/* BORDO ROSSO SCURO FISSO */
.main-navbar::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: #b40000; animation: custominfo-border-pulse 4s ease-in-out infinite; box-shadow: 0 0 6px rgba(255, 0, 0, 0.2); opacity: 0.9; z-index: 1000; pointer-events: none;}
/* RIFLESSO IN MOVIMENTO SOPRA IL BORDO */
.main-navbar::before { content: ""; position: absolute; bottom: 0; left: -60%; width: 60%; height: 5px; background: linear-gradient(   to right,   transparent 0%,   #ff0000 20%,   #ff0000 80%,   transparent 100% ); opacity: 0.7; animation: custominfo-scan-light 16s linear infinite; z-index: 1001; pointer-events: none;}
/* GLOW SOFT */
@keyframes custominfo-border-pulse {0%, 100% {  opacity: 1;  box-shadow: 0 0 8px rgba(255, 0, 0, 0.377);}50% {  opacity: 1;  box-shadow: 0 0 18px rgba(255, 0, 0, 0.678);}}
/* MOVIMENTO DEL GRADIENTE */
@keyframes custominfo-scan-light {0% {  left: -60%;}100% {  left: 100%;}}
.navbar-container {display: flex; align-items: center; justify-content: space-between; max-width: 1520px; width: 100%; height: 70px; margin: 0 auto; padding: 0 30px;}
.navbar-container svg,
.nav-drawer svg {width: 28px;height: 28px;}

/* SEZIONE SINISTRA: LOGO & ICONE (Hamburger e User) */
.navbar-left {display: flex; align-items: center; gap: 10px;}
.navbar-logo img {max-height: 25px; height: auto; display: block; margin: 0; padding: 0;}
.menu-icon, .icon-link {color: #ccc; font-size: 1.4rem;}
.menu-icon {display: none;}
  
/* SEZIONE CENTRO: MENU */
.navbar-center {display: flex; justify-content: center; flex: 1;}
.nav-menu {display: flex;gap: 30px;list-style: none;margin: 0;padding: 0;}
.nav-menu li a {position: relative; display: inline-block; overflow: hidden; color: #ccc; text-decoration: none; font-weight: 700; padding: 10px; border-radius: 50px; transition: color 0.9s ease;}
.nav-menu li a:hover, .nav-menu li a.active {color: #f00;}
.nav-menu li a::after {content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.281), transparent); transform: skewX(-25deg); opacity: 0; pointer-events: none; transition: opacity 0.2s;}
.nav-menu li a:hover::after {opacity: 1; animation: shine 0.9s forwards;}
@keyframes shine {0% {  left: -75%;}100% {  left: 125%;}}

/* SEZIONE DESTRA: ICONE (ricerca e user per desktop) */
.navbar-left, .navbar-right {flex: 0 0 auto; display: flex; align-items: center;}
.navbar-right {display: flex; align-items: center; gap: 15px;}
/* compensatore sinistro per bilanciare icone adestra coe logo a sinistra */
.navbar-spacer {
/*   width: 133.15px; */ /* o quello che ti serve per compensare */
  height: 1px;
  visibility: hidden;}
.icon-link {color: #ccc; font-size: 1.2rem; text-decoration: none; transition: color 0.3s ease;}
.icon-link:hover {color: #f00;}
.user-desktop {display: inline-block;}

/* SIDE DRAWER (MENU MOBILE) */
#nav-drawer-toggle {display: none;}
.nav-drawer {position: fixed; top: 0; left: 0; width: 280px; min-height: 100vh; height: auto; background-color: #000; transform: translateX(-100%); transition: transform 0.3s ease; z-index: 1000; display: flex; flex-direction: column; justify-content: flex-start; border-right: 2px solid #f00;}
#nav-drawer-toggle:checked + .main-navbar + .nav-drawer {transform: translateX(0);}
.drawer-header {display: flex; align-items: center; justify-content: space-between; padding: 15px; margin-bottom: 20px;}
.close-drawer {color: #ccc; font-size: 1.4rem; cursor: pointer;}
.close-drawer:hover {color: #f00;}
.drawer-user {color: #ccc; font-size: 1.4rem;}
.drawer-user:hover {color: #f00;}
.drawer-menu {list-style: none; padding: 0 15px; flex: none; display: flex; flex-direction: column; justify-content: start; gap: 30px;}
.drawer-menu li a {color: #ccc; text-decoration: none; text-transform: uppercase; font-weight: 700; font-size: 1rem; transition: color 0.3s ease;}
.drawer-menu li a:hover {color: #f00;}
.drawer-bottom {text-align: center; padding: 15px; border-top: 1px solid #333; margin-top: 20px;}
.drawer-bottom span {color: #f00; font-size: 1rem; font-weight: 700;}

/* HERO SECTION */
.hero {width: 100%; background-color: #111; padding: 40px 0; margin-top: 0;}
.hero-content {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;}
.hero-text {flex: 1; margin-right: 20px;}
.hero-text h1 {font-size: 2.5rem; color: #f00; margin-bottom: 10px;}
.hero-text h1 span {color: #fff;}
.subtitle {font-size: 1.5rem; margin-bottom: 20px;}
.hero-text p {font-size: 1rem; line-height: 1.5; margin-bottom: 20px;}
.btn {display: inline-block; padding: 10px 20px; background: #f00; color: #fff; text-decoration: none; transition: background 0.3s ease;}
.btn:hover {background: #ff4a4a;}
.hero-image {flex: 1; text-align: center;}
.hero-image img {max-width: 100%; height: auto;}

/* SEZIONE PRODOTTI */
.prodotti {padding: 60px 0; text-align: center;}
.section-title {font-size: 2rem; color: #fff; margin-bottom: 30px;}
.prodotti-carousel {display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;}
.card {background: #1c1c1c; padding: 20px; width: 220px; text-align: center; border-radius: 5px; transition: transform 0.3s ease;}
.card:hover {transform: scale(1.05);}
.card img {width: 100%; height: auto; margin-bottom: 10px;}
.card h3 {font-size: 1.2rem; color: #fff;}

/* NOVITÀ */
.novita {background: #111; padding: 60px 0;}
.novita-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;}
.novita-item {background: #1c1c1c; padding: 20px; border-radius: 5px;}
.novita-item h3 {color: #f00; margin-bottom: 10px;}
.novita-item p {color: #ccc;}
  
/* CUSTOMINFO IN ACTION */
.CustomInfo-action {padding: 60px 0; text-align: center;}
.CustomInfo-action .subtitle {margin-bottom: 20px;}
.video-container {margin-top: 20px; display: flex; justify-content: center;}
.video-container iframe {max-width: 100%;}

/* SCOPRI L'UNIVERSO CUSTOMINFO */
.CustomInfo-universo {background: #111; padding: 60px 0;}
.CustomInfo-universo-grid {display: flex; flex-wrap: wrap; align-items: center; gap: 20px;}
.CustomInfo-text {flex: 1;}
.CustomInfo-logo-big {flex: 1; text-align: center;}
.CustomInfo-logo-big img {max-width: 80%; height: auto;}

/* FOOTER */
footer{background-color: #000;}
.main-footer .container {max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important;}
.main-footer {background: #000; color: #ccc; padding: 30px 0px 0px 0px; /* ⬆️➡️⬇️⬅️ (top, right, bottom, left) */ font-size:0.9rem; width: 80%; margin: 0 auto;}
.footer-top, .footer-bottom {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 30px; max-width: 1520px;}
.footer-links-contact {display: flex; flex-direction: column; align-items: flex-start; gap: 10px;}
.footer-links {display: flex; gap: 30px; list-style: none; padding: 0; margin: 0;}
/* ✅ Effetto sottolineatura su link */
.footer-links li a, .footer-legal a {color: #ccc; text-decoration: none; font-weight: bold; position: relative; transition: color 0.3s ease;}
.footer-links li a::after, .footer-legal a::after {content: ""; display: block; width: 0; height: 2px; background: #ff0f0f; position: absolute; left: 0; bottom: -5px; transition: width 0.3s ease-in-out;}
.footer-links li a:hover::after, .footer-legal a:hover::after {width: 100%;}
.footer-links li a:hover, .footer-legal a:hover {color: #ff0f0f;}
/* ✅ Icone contact sotto "A PROPOSITO DI CUSTOMINFO" e "HOME" */
.footer-contact {display: flex; gap: 20px; list-style: none; margin-top: 10px; width: 100%; align-items: flex-start;}
.footer-contact li a {color: #ccc; font-size: 1.3rem; transition: color 0.3s;}
.footer-contact li a:hover {color: #ff0f0f;}
/* ✅ Newsletter */
.footer-newsletter {flex-direction: column; align-items: flex-start;}
.footer-newsletter label {display: block; margin-bottom: 10px; font-weight: bold; font-size: 14px;}
.newsletter-form {display: flex; gap: 10px; position: relative;}
/* 🎯 Input con bordino e focus visivo */
.newsletter-form input {padding: 8px 10px; background: #222; color: #fff; border: 1px solid #444; outline: none; transition: border 0.3s ease; width: 240px;}
.newsletter-form input:focus {border: 1px solid #bdbdbd !important;}
/* 🎯 Bottone con angoli personalizzati + animazione a tenda */
.newsletter-form button {font-family: Arial, Helvetica, sans-serif; position: relative; overflow: hidden; padding: 8px 15px; border: none; background: #f00; color: #fff; cursor: pointer; font-weight: bold; transition: color 0.3s ease; border-bottom-left-radius: 12px; border-top-right-radius: 12px;}
.newsletter-form button::before {content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: #c00000; transition: left 0.4s ease; z-index: 1;}
.newsletter-form button::after {content: ""; position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; background: radial-gradient(circle, #800 0%, transparent 80%); transform: translate(-50%, -50%) scale(0); opacity: 0; transition: transform 0.4s ease-out, opacity 0.4s ease-out; z-index: 1; pointer-events: none;}
.newsletter-form button:active::after {transform: translate(-50%, -50%) scale(1); opacity: 1;}
.newsletter-form button:hover::before {left: 0;}
/* .newsletter-form button {z-index: 2;}  da ripristinare in caso di errori*/
.newsletter-form button span {position: relative; z-index: 2;}
/* Messaggio di errore nascosto di default (o vuoto) */
.error-message {position: absolute; top: 105%; left: 0; margin-top: 5px; font-size: 14px; color: #ff4500; text-transform: none !important; display: flex; align-items: center; gap: 1px;}
/* Stile di errore (assegnato dinamicamente via JS) */
#email-newsletter.error {border-color:  #ff4500;}
.error-message svg {width: 12px;height: 12px;vertical-align: middle;margin-right: 5px;}
/* ✅ Divisore con poligoni  */
.footer-divider {position: relative; width: 100%; height: 16px; overflow: hidden;}
/* LINEA CENTRALE */
.divider-line { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); background: #4d4d4d; height: 1px; z-index: 1; overflow: hidden;}
.divider-line::before { content: ""; position: absolute; top: 0; left: -50%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, #c2c2c2, transparent); opacity: 0.8; overflow: hidden; pointer-events: none; z-index: 2;}
/* POLIGONO SINISTRO */
.divider-left { position: absolute; top: 2.5px; left: 0; width: 60px; height: 6px; background: #4d4d4d; clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%); z-index: 2;}
.divider-left::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(to right, transparent, #929292, transparent); opacity: 0.8; overflow: hidden; pointer-events: none; z-index: 2;}
/* POLIGONO DESTRO */
.divider-right { position: absolute; bottom: 2.5px; right: 0; width: 60px; height: 6px; background: #4d4d4d; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 20% 100%); z-index: 1; overflow: hidden;}
.divider-right::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(to right, transparent, #929292, transparent); opacity: 0.8; overflow: hidden; pointer-events: none; z-index: 2;}
/* ===========================
   ANIMAZIONI KEYFRAMES
   =========================== */
@keyframes scanLaserLeft {0%   { left: -100%; }100% { left:  100%; }}
@keyframes scanLaserCenter {0%   { left: -50%; }100% { left: 100%; }}
@keyframes scanLaserRight {0%   { left: -100%; }100% { left: 100%; }}
/* ===========================
   CLASSI DI TRIGGER via JS
   =========================== */
.animate-left::before {animation: scanLaserLeft 3s linear infinite;}
.animate-center::before {animation: scanLaserCenter 7s linear infinite;}
.animate-right::before {animation: scanLaserRight 3s linear infinite;}

/* ✅ Footer Bottom */
/* ----- Parte BOTTOM: Lingua + Link legali + Copyright ----- */
.footer-bottom {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 35px;}
/* Lingua */
.lang-button { display: flex; align-items: center; gap: 8px; border: none; background: transparent; font: inherit; cursor: pointer;}
.lang-button .lang-icon svg { width: 18px; height: 18px; display: block; fill: currentColor;}
.footer-language button {background: none;border: none;color: #ccc; font-family: inherit; font-size: inherit; cursor: pointer; position: relative; padding: 0; transition: color 0.3s ease;}
.footer-language button::after {content: ""; display: block; position: absolute; left: 0; bottom: -5px; width: 0; height: 2px; background: #fa2a2a; transition: width 0.3s ease-in-out;}
.footer-language button:hover::after {width: 100%;}  
.footer-language button:hover {color: #ff0f0f;}
/* Link legali */
.footer-legal {display: flex; flex-wrap: wrap; gap: 15px;}
.footer-legal a {color: #ccc; text-decoration: none; font-weight: bold; text-transform: uppercase; position: relative; transition: color 0.3s ease;}
/* Stessa sottolineatura rossa in hover */
.footer-legal a::after {content: ""; display: block; width: 0; height: 2px; background: #ff0f0f; position: absolute; left: 0; bottom: -4px; transition: width 0.3s ease-in-out;}
.footer-legal a:hover::after {width: 100%;}.footer-legal a:hover {color: #ff0f0f;}
/* Copyright (span) stesso colore */
.footer-legal span {color: #ccc;}
/* ✅ Logo */
.footer-logo {text-align: center;}
.footer-logo img {max-width: 310px; height: auto; margin-bottom: 24px;}
/* tasto cookie */
#open-cookie-settings { background: none; border: none; color: #ccc; text-decoration: none; font-weight: bold; font-size: 0.9rem; text-transform: uppercase; position: relative; transition: color 0.3s ease; cursor: pointer; font-family: inherit; padding: 0; margin: 0;}
/* Effetto sottolineatura rossa in hover, identico a .footer-legal a */
#open-cookie-settings::after { content: ""; display: block; width: 0; height: 2px; background: #ff0f0f; position: absolute; left: 0; bottom: -4px; transition: width 0.3s ease-in-out;}
#open-cookie-settings:hover {color: #ff0f0f;}
#open-cookie-settings:hover::after {width: 100%;}

/* ############################ SILI PERSONALI GENERALI */
/* ===== Stile Bottone CustomInfo con effetto a tendina ===== */
.custominfo_button_style { font-family: Arial, Helvetica, sans-serif; position: relative; overflow: hidden; padding: 12px 30px; border: none; background: #f00; color: #fff; font-weight: bold; cursor: pointer; transition: color 0.3s ease; border-radius: 8px;}
.custominfo_button_style::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: #c00000; transition: left 0.4s ease; z-index: 1; border-radius: 8px;}
.custominfo_button_style::after { content: ""; position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; background: radial-gradient(circle, #800 0%, transparent 80%); transform: translate(-50%, -50%) scale(0); opacity: 0; transition: transform 0.4s ease-out, opacity 0.4s ease-out; z-index: 1; pointer-events: none;}
.custominfo_button_style:active::after { transform: translate(-50%, -50%) scale(1); opacity: 1;}
.custominfo_button_style:hover::before { left: 0;}
.custominfo_button_style span { position: relative; z-index: 2;}
/* ===== Stile Bottone CustomInfo con effetto a tendina ===== */

/* MEDIA QUERIES (MOBILE) */
@media (max-width: 1450px) {
.nav-menu {gap: 0;}
}

/* (fino a 1210px) */
@media (max-width: 1210px) {
  .desktop-menu {display: none;}
  .menu-icon {display: block;}
  .user-desktop {display: none;}
  .navbar-logo {opacity: 0;}
  .navbar-logo.mobile-active {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10;}
  .navbar-logo img {max-width: 100%; max-height: 45px; display: block;}
  .navbar-left {width: 40px; justify-content: flex-start; padding-left: 10px;}
  .navbar-right {width: 40px; justify-content: flex-end; padding-right: 10px;}
  .navbar-container {padding: 0 0;}
  .main-footer{width: 95%;}
  .footer-bottom{ gap: 15px;}

}

/* MEDIA QUERIES (MOBILE) */
/* (fino a 768px) */
@media (max-width: 768px) {
  .navbar-container {padding: 0 10px;}
  .hero-content {flex-direction: column;}
  .hero-image img {max-width: 80%;}
  .prodotti-carousel {flex-direction: column; align-items: center;}
  .novita-grid {grid-template-columns: 1fr;}
  .video-container iframe {width: 100%; height: auto;}
  .CustomInfo-universo-grid {flex-direction: column;}
  .CustomInfo-logo-big img {max-width: 60%;}
  .main-footer {padding: 15px; padding-top: 55px; width: 100%;}
  .footer-divider{margin-top: 40px;}
  .footer-links {display: block; text-align: left; width: 100%; max-width: 100%;}
  .footer-links li {display: block; width: 100%; margin-bottom: 20px;}
  .footer-links li a {display: block; position: relative; width: 100%; padding-bottom: 10px; text-decoration: none; color: #ccc; font-weight: bold;}
  .footer-links li a::before {content: ""; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background: #666;}
  .footer-links li a::after {content: ""; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: #ff0f0f; transition: width 0.4s ease-in-out;}
  .footer-links li a:hover::after {width: 100%;}
  .footer-contact {-webkit-box-pack: center; justify-content: center; width: 100%;}
  .footer-links-contact {width: 100%;}
  .newsletter-form .input-wrapper {flex-grow: 1;flex-shrink: 1;flex-basis: 0;}
  .footer-newsletter {width: 100%; margin-top: 20px; flex-direction: column; align-items: flex-start;}
  .footer-newsletter label {margin-bottom: 0px ; font-weight: bold; }
  .newsletter-form {display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; gap: 10px; margin-top: 10px;}
  .newsletter-form input {flex: 1; min-width: 0; padding: 10px;  width: 100%; box-sizing: border-box;}
  .newsletter-form button {position: relative; overflow: hidden; padding: 10px 16px; border: none; background: #f00; color: #fff; cursor: pointer; font-weight: bold; border-bottom-left-radius: 12px; border-top-right-radius: 12px; transition: background 0.3s ease; -webkit-tap-highlight-color: transparent;}
  .footer-bottom {flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 30px;}
  .footer-legal {flex-direction: column; align-items: flex-start;}
  .footer-logo img {display: none;}
  .main-navbar::before {height: 4px; animation: custominfo-scan-light 8s linear infinite;}
  .footer-language{margin-bottom: 15px;}
}
/* fix menù hamburgher risoluzione orizzontale */
@media (max-height: 500px) {
.drawer-menu {gap: 6px; font-size: 0.9rem;}
.drawer-header{margin-bottom: 0px;padding: 10px 15px 5px 15px;}  
.drawer-bottom {margin-top: 8px;}
}