/* 
Theme Name: Duckmaze
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Duckmaze Child is a child theme of Hello Elementor
Author: Webgenius Team
Author URI: https://duckmaze.dev/
Template: hello-elementor
Version: 1.0
Text Domain: duckmaze
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

.elementor-widget-text-editor p {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* ------------------------------------------ */

/* Sfoca il contenuto quando il menu è attivo */
.menu-blur-active {
    position: relative;
}
.menu-blur-active::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: rgba(0, 0, 0, 0.2);
    z-index: 10;
    pointer-events: none;
}

/* Cambia sfondo e bordo della header-bar */
.header-bar.menu-active {
    background-color: #010C17 !important;
    border-radius: 32px 32px 0 0 !important; 
    border: 2px solid #2A333C17 !important; 
    transition: background-color 0.15s ease, border-radius 0.3s ease, border 0.3s ease;
}

/* sfondo blur sezioni*/
.blur-background {
	backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
    background-color: rgba(255, 255, 255, 0.12);
	position: relative;
  	z-index: 1;
}

.blur-table-background {
	backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    background-color: rgba(255, 255, 255, 0.15);
	position: relative;
  	z-index: 9999 !important;
}

.blur-background-hp-iops {
backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    background-color: rgba(35, 72, 40, 0.2);
	position: relative;
  	z-index: 1;
}

.blur-background-ha-iops {
backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    background-color: rgba(66, 107, 150, 0.2);
	position: relative;
  	z-index: 1;
}

.blur-gradient-dedicati {
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    background-color: rgba(120, 40, 110, 0.2);
    position: relative;
    z-index: 1;
}

.blur-background-servizi-aggiuntivi {
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    background-color: rgba(230, 108, 44, 0.2);
    position: relative;
    z-index: 1;
}

.blur-background-reseller {
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  background-color: rgba(160, 180, 200, 0.18);
  position: relative;
  z-index: 1;
}

.blur-background-blu-lightest {
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  background-color: rgba(35, 120, 200, 0.2); /* leggermente più chiaro */
  position: relative;
  z-index: 1;
}

.blur-background-blu-lighter {
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  background-color: rgba(20, 110, 195, 0.2); /* un po' più chiaro */
  position: relative;
  z-index: 1;
}

.blur-background-blu {
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  background-color: rgba(9, 100, 190, 0.2); /* centro */
  position: relative;
  z-index: 1;
}

.blur-background-blu-darker {
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  background-color: rgba(7, 85, 165, 0.2); /* un po' più scuro */
  position: relative;
  z-index: 1;
}

.blur-background-blu-darkest {
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  background-color: rgba(5, 70, 140, 0.2); /* più scuro */
  position: relative;
  z-index: 1;
}

.blur-background-light-green {
	backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    background-color: rgba(200, 245, 215, 0.15);
	position: relative;
  	z-index: 1;
}

.blur-background-green {
	backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    background-color: rgba(120, 220, 170, 0.18);
	position: relative;
  	z-index: 1;
}

.blur-background-prestashop-lightest {
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  background-color: rgba(230, 100, 150, 0.20); /* più chiaro e delicato */
  position: relative;
  z-index: 1;
}

.blur-background-prestashop-lighter {
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  background-color: rgba(200, 70, 130, 0.20); /* tono medio chiaro */
  position: relative;
  z-index: 1;
}

.blur-background-prestashop-darker {
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  background-color: rgba(160, 40, 100, 0.20); /* tono medio scuro */
  position: relative;
  z-index: 1;
}

.blur-background-prestashop-darkest {
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  background-color: rgba(120, 25, 80, 0.20); /* più scuro, quasi bordeaux */
  position: relative;
  z-index: 1;
}

.blur-background-joomla-lightest {
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  background-color: rgba(245, 130, 60, 0.25);
  position: relative;
  z-index: 1;
}

.blur-background-joomla {
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  background-color: rgba(222, 81, 14, 0.25); /* colore Joomla originale */
  position: relative;
  z-index: 1;
}

.blur-background-joomla-darker {
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  background-color: rgba(190, 65, 12, 0.25); /* arancio scuro armonizzato */
  position: relative;
  z-index: 1;
}

.blur-background-magento-lightest {
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  background-color: rgba(255, 155, 90, 0.30); /* arancione medio chiaro */
  position: relative;
  z-index: 1;
}

.blur-background-magento-lighter {
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  background-color: rgba(245, 140, 80, 0.30); /* tono medio chiaro */
  position: relative;
  z-index: 1;
}

.blur-background-magento-darker {
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  background-color: rgba(220, 100, 50, 0.30); /* tono medio scuro */
  position: relative;
  z-index: 1;
}

.blur-background-magento-darkest {
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  background-color: rgba(170, 60, 30, 0.30); /* arancione scuro, quasi mattone */
  position: relative;
  z-index: 1;
}

.blur-test-background {
  backdrop-filter: blur(45px);
  -webkit-backdrop-filter: blur(45px);
  background-color: rgba(88, 90, 90, 0.60); /* grigione */
  position: relative;
  z-index: 1;
}

.blur-price-above {
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    background-color: rgba(40, 40, 40, 0.3);
}

/* Colore secondario titoli */
.second-color {
color: var(--e-global-color-secondary);
}

/* Scroll orizzontale effetto sticky */
.scroll-container-parent {
    overflow-x: hidden;
}

.scroll-container-parent .scroll-container {
    overflow: visible;
    will-change: transform;
    transition: transform 0.2s ease;
}

.scroll-container-parent .panel {
    will-change: transform;
    aspect-ratio: 1.5;
    transition: background-size 0.2s ease;
}

.scroll-container-parent .panel:hover {
    background-size: 130% !important;
    transition: 0.2s;
}

.scroll-container-parent .overflow-hidden {
    overflow: hidden;
}

.scroll-container-parent .sticky-section {
    transition: position 0.2s ease;
}

/* Box CTA menu */
.cta-menu .elementor-cta,
.cta-menu .elementor-cta__bg-wrapper,
.cta-menu .elementor-cta__bg {
  border-radius: 24px;
  overflow: hidden;
}

.cta-menu .elementor-cta__bg {
  background-position: top center !important;
  background-size: cover !important;
}

.table-row.opacizzata {
    /*opacity: 0.3;*/
    filter: blur(14px);
    /*transition: opacity 0.3s ease, filter 0.3s ease;*/
}

.section-price-column {
    max-width: max-content;
}

/* Bottone chat Whatsapp */
.whatsapp-button {
	z-index: 999
}

.whatsapp-button .e-contact-buttons__chat-button:hover {
    box-shadow: 0px 9px 81px 9px rgba(7, 94, 84, 0.6);
    transition: box-shadow 0.3s ease;
}

/* Sezione click-to-reveal */
.reveal-click {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.8s ease, opacity 0.6s ease;
  margin-top: -3rem;
}
.reveal-click.show {
  max-height: 5000px;
  opacity: 1;
}

/* Tooltip Custom */
body .tooltip-custom .e-hotspot__tooltip {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
  min-width: 150px;
}

@media (min-width: 1024px) {
  body .tooltip-custom .e-hotspot__tooltip {
    min-width: 200px;
  }
}

//* Barra Trasferimento e Registrazione dominio */
.domain-searchbar-input {
  display: block;
  width: 100%;
  padding: 5px 14px;
  background: transparent;
}

.domain-searchbar-input input {
  width: 100%;
  border: none !important;
  outline: none;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 22px;
  background: transparent;
  color: #AAB8C6;
}

.domain-searchbar-input input::placeholder {
  color: #C6D0DA;
  opacity: 1;
}

/* Bottone Skip to content*/
.screen-reader-text:focus {
    position: absolute;
    top: 10px;
    left: 10px;
    clip: auto;
    height: auto;
    width: auto;
    padding: 0.5rem 1rem;
    background-color: #000;
    color: #fff;
    z-index: 99999;
}

/* Caratteristiche Titolo categoria piano */
.plan-title {
	font-family: var( --e-global-typography-secondary-font-family ), Sans-serif;
	font-size: var( --e-global-typography-secondary-font-size );
	font-weight: var( --e-global-typography-secondary-font-weight );
	line-height: var( --e-global-typography-secondary-line-height );
	letter-spacing: var( --e-global-typography-secondary-letter-spacing );
	color: var( --e-global-color-primary );
	display: block;
}

/* Effetto Luminance verde sul testo del bottone Promo */
.menu-badge .elementor-button {
  background: none !important;
  filter: none !important;
}
.menu-badge .elementor-button::before,
.menu-badge .elementor-button::after,
.menu-badge .elementor-button .elementor-button-content-wrapper::before,
.menu-badge .elementor-button .elementor-button-content-wrapper::after {
  content: none !important;
  background: none !important;
  animation: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  box-shadow: none !important;
}

.menu-badge .elementor-button .elementor-button-text {
  position: relative;
  display: inline-block;
  z-index: 2;

  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;

  background-image:
    linear-gradient(#2ECC71, #2ECC71),
    radial-gradient(ellipse at 50% 95%, rgba(46,204,113,1) 0%, rgba(46,204,113,0) 70%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 240% 240%;
  background-position: 50% 50%, 50% 100%;

  text-shadow:
    0 0 12px rgba(46,204,113,0.95),
    0 0 28px rgba(46,204,113,0.75),
    0 0 60px rgba(46,204,113,0.55),
    0 0 110px rgba(46,204,113,0.35);

  animation: promo-glow 6.8s ease-in-out infinite;
  transition:
    background-image 1.2s ease-in-out,
    text-shadow 1.2s ease-in-out;
}

.menu-badge .elementor-button .elementor-button-text::before,
.menu-badge .elementor-button .elementor-button-text::after {
  z-index: 4;
}

.menu-badge .elementor-button .elementor-button-text::after {
  content: "";
  position: absolute;
  inset: -8px;          
  pointer-events: none;
  z-index: 1;              
  opacity: 0;            
  filter: blur(9px);         
  border-radius: 12px;        

  background:
    radial-gradient(circle at 50% 60%,
      rgba(93,255,154,0.85) 0 35%,
      rgba(93,255,154,0.55) 55%,
      rgba(93,255,154,0) 75%);
  box-shadow:
    0 0 81px rgba(93,255,154,0.85),
    0 0 180px rgba(93,255,154,0.55),
    0 0 260px rgba(93,255,154,0.35);

  transition:
    opacity 1.5s cubic-bezier(.22,.61,.36,1),
    filter  1.5s cubic-bezier(.22,.61,.36,1),
    box-shadow 1.5s cubic-bezier(.22,.61,.36,1);
}

.menu-badge .elementor-button:hover .elementor-button-text,
.menu-badge .elementor-button:focus .elementor-button-text,
.menu-badge .elementor-button:focus-visible .elementor-button-text {
  background-image:
    linear-gradient(#5DFF9A, #5DFF9A),
    radial-gradient(ellipse at 50% 95%, rgba(93,255,154,1) 0%, rgba(93,255,154,0) 70%);

}

.menu-badge .elementor-button:hover .elementor-button-text::after,
.menu-badge .elementor-button:focus .elementor-button-text::after,
.menu-badge .elementor-button:focus-visible .elementor-button-text::after {
  opacity: .1;               
  box-shadow:
    0 0 100px rgba(93,255,154,0.5),
    0 0 200px rgba(93,255,154,0.42),
    0 0 300px rgba(93,255,154,0.30);
}

.menu-badge .elementor-button:not(:hover) .elementor-button-text,
.menu-badge .elementor-button:not(:hover) .elementor-button-text::after {
  transition-duration: 1.8s;
}

@keyframes promo-glow {
  0% {
    text-shadow:
      0 0 10px rgba(46,204,113,0.8),
      0 0 22px rgba(46,204,113,0.6),
      0 0 38px rgba(46,204,113,0.4);
  }
  8% {
    text-shadow:
      0 0 14px rgba(46,204,113,0.95),
      0 0 35px rgba(46,204,113,0.75),
      0 0 65px rgba(46,204,113,0.45);
  }
  17% {
    text-shadow:
      0 0 9px rgba(46,204,113,0.7),
      0 0 18px rgba(46,204,113,0.5),
      0 0 30px rgba(46,204,113,0.3);
  }
  26% {
    text-shadow:
      0 0 20px rgba(46,204,113,1),
      0 0 45px rgba(46,204,113,0.9),
      0 0 80px rgba(46,204,113,0.6);
  }
  39% {
    text-shadow:
      0 0 13px rgba(46,204,113,0.8),
      0 0 28px rgba(46,204,113,0.6),
      0 0 50px rgba(46,204,113,0.4);
  }
  53% {
    text-shadow:
      0 0 17px rgba(46,204,113,0.9),
      0 0 40px rgba(46,204,113,0.8),
      0 0 75px rgba(46,204,113,0.5);
  }
  67% {
    text-shadow:
      0 0 11px rgba(46,204,113,0.7),
      0 0 22px rgba(46,204,113,0.55),
      0 0 40px rgba(46,204,113,0.35);
  }
  82% {
    text-shadow:
      0 0 21px rgba(46,204,113,1),
      0 0 48px rgba(46,204,113,0.95),
      0 0 85px rgba(46,204,113,0.65);
  }
  100% {
    text-shadow:
      0 0 10px rgba(46,204,113,0.8),
      0 0 22px rgba(46,204,113,0.6),
      0 0 38px rgba(46,204,113,0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-badge .elementor-button .elementor-button-text {
    animation: none !important;
  }
}

/* Badge notifica sul bottone Promo */
.elementor-element.menu-badge,
.elementor-element.menu-badge .elementor-widget-container,
.elementor-element.menu-badge .elementor-button-wrapper,
.elementor-element.menu-badge .elementor-button {
  overflow: visible;
}

.elementor-element.menu-badge {
  --badge-delay: 2s;        
  --badge-size: 0.3rem;    
  --badge-color: #2ECC71;    
}

.elementor-element.menu-badge .elementor-button-text {
  position: relative;
  display: inline-block;
  padding-right: 0.3rem;
}

.elementor-element.menu-badge .elementor-button-text::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0.2rem;
  width: var(--badge-size);
  height: var(--badge-size);
  transform: translateY(-35%) scale(0.2);
  transform-origin: center;
  border-radius: 50%;
  background: var(--badge-color);

  box-shadow: 0 0 4px 1px rgba(46,204,113,0.45);
  opacity: 0;
  z-index: 5;
  pointer-events: none;
  will-change: transform, opacity, box-shadow;

  animation:
    badgePopIn     720ms cubic-bezier(.22,.9,.24,1.35) 2s forwards,
    badgePingGlow  900ms ease-out 2.76s both,
    badgePingGlow  900ms ease-out 3.08s both,
    badgePulse     6.4s  ease-in-out 3.12s infinite;
}

@keyframes badgePopIn {
  0%   { opacity: 0; transform: translateY(-35%) scale(0.2); }
  12%  { opacity: 1; transform: translateY(-35%) scale(0.55); }
  60%  { opacity: 1; transform: translateY(-35%) scale(1.25); }
  85%  { transform: translateY(-35%) scale(0.92); }
  100% { opacity: 1; transform: translateY(-35%) scale(1); }
}

@keyframes badgePingGlow {
  0% {
    box-shadow:
      0 0 4px 1px rgba(46,204,113,0.45),
      0 0 0 0 rgba(46,204,113,0);
  }
  45% {
    box-shadow:
      0 0 6px 2px rgba(46,204,113,0.55),
      0 0 10px 5px rgba(46,204,113,0.25);
  }
  100% {
    box-shadow:
      0 0 4px 1px rgba(46,204,113,0.45),
      0 0 14px 8px rgba(46,204,113,0);
  }
}

@keyframes badgePulse {
  0% {
    transform: translateY(-35%) scale(0.95);
    box-shadow: 0 0 4px 1px rgba(46,204,113,0.45);
  }
  9% {
    transform: translateY(-35%) scale(1.02);
    box-shadow: 0 0 6px 2px rgba(46,204,113,0.5);
  }
  18% {
    transform: translateY(-35%) scale(0.99);
    box-shadow: 0 0 5px 1px rgba(46,204,113,0.4);
  }
  31% {
    transform: translateY(-35%) scale(1.01);
    box-shadow: 0 0 8px 3px rgba(46,204,113,0.55);
  }
  47% {
    transform: translateY(-35%) scale(0.9);
    box-shadow: 0 0 6px 2px rgba(46,204,113,0.5);
  }
  63% {
    transform: translateY(-35%) scale(0.985);
    box-shadow: 0 0 5px 1px rgba(46,204,113,0.4);
  }
  78% {
    transform: translateY(-35%) scale(0.9);
    box-shadow: 0 0 9px 4px rgba(46,204,113,0.55);
  }
  100% {
    transform: translateY(-35%) scale(0.95);
    box-shadow: 0 0 4px 1px rgba(46,204,113,0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-element.menu-badge .elementor-button-text::before {
    animation: none !important;
    opacity: 1;
    transform: translateY(-35%) scale(1);
  }
}

/* testo effetto neon glitch */
:root{
  --glow-main: #FF9E9E;          
  --glow-light:#ffffff;          
  --split-cyan:#1bc7fb;        
  --split-mag:#e0287d;          
  --glow-light-soft: rgba(255,255,255,0.50);
  --glow-main-soft:  rgba(255,158,158,0.48); 
}

.neon-glitch{
  color:#fff;
  display:inline-block;
  letter-spacing:.06em;
  position:relative;
  filter: drop-shadow(0 0 6px rgba(255,158,158,0.15));
  animation: neonPulse 2600ms ease-in-out infinite;
  will-change: text-shadow, filter, transform, letter-spacing;
}

.neon-glitch.layers::before,
.neon-glitch.layers::after{
  content: attr(aria-label);
  position:absolute;
  inset:0;
  width:110%;
  pointer-events:none;
  z-index:-1;
  mix-blend-mode:screen; 
  will-change: clip-path, transform, opacity, filter, color;
}

.neon-glitch.layers::before{
  color: var(--split-mag);
  top: 6px;
  left: 10px;
  animation:
    clipPaths     12000ms step-end infinite,
    layerOpacity  12000ms step-end infinite,
    layerFont     18000ms step-end infinite,
    layerMove     20000ms step-end infinite;
}

.neon-glitch.layers::after{
  color: var(--split-cyan);
  top: 3px;
  left:-8px;
  animation:
    clipPaths     12000ms step-end infinite,
    layerOpacity  12000ms step-end infinite,
    layerFont     17000ms step-end infinite,
    layerMove     19000ms step-end infinite;
}

@keyframes neonPulse{
  0%,100%{
    text-shadow:
      0 0 2px  var(--glow-light-soft),
      0 0 8px  var(--glow-light-soft),
      0 0 18px var(--glow-main-soft),
      0 0 42px var(--glow-main-soft);
    filter: drop-shadow(0 0 6px rgba(255,158,158,0.12));
  }
  50%{
    text-shadow:
      0 0 3px  var(--glow-light-soft),
      0 0 10px var(--glow-light-soft),
      0 0 24px var(--glow-main-soft),
      0 0 56px var(--glow-main-soft);
    filter: drop-shadow(0 0 8px rgba(255,158,158,0.16));
  }
}

@keyframes clipPaths{
  0%  { clip-path: polygon(0% 35%, 85% 35%, 85% 25%, 20% 25%, 20% 80%, 90% 80%, 90% 60%, 10% 60%, 10% 90%, 0% 90%); }
  8%  { clip-path: polygon(0% 55%, 95% 55%, 95% 65%, 60% 65%, 60% 40%, 98% 40%, 98% 85%, 5% 85%, 5% 50%, 0% 50%); }
  30% { clip-path: polygon(0% 20%, 70% 20%, 70% 15%, 15% 15%, 15% 70%, 80% 70%, 80% 30%, 5% 30%, 5% 85%, 0% 85%); }
  46% { clip-path: polygon(0% 48%, 92% 48%, 92% 78%, 25% 78%, 25% 26%, 85% 26%, 85% 60%, 12% 60%, 12% 88%, 0% 88%); }
  76% { clip-path: polygon(0% 28%, 60% 28%, 60% 34%, 28% 34%, 28% 82%, 75% 82%, 75% 42%, 8% 42%, 8% 90%, 0% 90%); }
  90% { clip-path: polygon(0% 44%, 88% 44%, 88% 12%, 10% 12%, 10% 92%, 94% 92%, 94% 58%, 6% 58%, 6% 82%, 0% 82%); }
  1%,7%,33%,47%,78%,93% { clip-path: none; } /* finestre “pulite” */
}

@keyframes layerMove{
  0%   { transform: translate(0,0); }
  15%  { transform: translate(2px,1px); }
  60%  { transform: translate(-2px,-1px); }
  75%  { transform: translate(1px,-2px); }
  100% { transform: translate(0,0); }
}

@keyframes layerOpacity{
  0%   { opacity:.15; }
  5%   { opacity:.7; }
  30%  { opacity:.35; }
  45%  { opacity:.6; }
  76%  { opacity:.4; }
  90%  { opacity:.8; }
  1%,7%,33%,47%,78%,93% { opacity:0; }
}

@keyframes layerFont{
  0%   { filter: blur(3px); }
  20%  { filter: blur(0); }
  50%  { filter: blur(2px) contrast(1.05); }
  60%  { filter: blur(0); }
  90%  { filter: blur(4px) contrast(1.12); }
}