section.quiz-section-container {
    position: relative;
}

section.quiz-section-container .hero {
  background-image: url('../img/quiz/banner.jpg'); 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  aspect-ratio: 16 / 8;
  border-radius: 1rem;
}

section.quiz-section-container a.btn.btn-primary.btn-che-adorn {
    text-transform: capitalize;
    min-width: 200px;
    width: max-content;
    padding: 8px 20px;
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
section.quiz-section-container .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: #FFF;
    background-color: #f44379;
    border-color: #f44379;
}

section.quiz-section-container .selectors-frame {
    background-color: #e9f2ff;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 1rem;
    position: relative;
    margin-bottom: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
section.quiz-section-container .selectors-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .2);
  border-radius: 1rem;
}

@media screen and (min-width: 768px) {
    section.quiz-section-container a.btn.btn-primary.btn-che-adorn {
        width: max-content;
    }
}

@media screen and (min-width: 992px) {
    section.quiz-section-container {
        position: relative;
    }
    section.quiz-section-container .hero {
      aspect-ratio: 16 / 4;
    }
}


section.product-hotspot-container .tiny-slider-dots > button.tns-nav-active,


section.product-hotspot-container .hotspot-img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    border-radius: 1rem;
    display: block;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    position: relative;
    background: linear-gradient(to top, #FE75FF 20%, #FFD1FF 20%);
}
section.product-hotspot-container .products h2 {
    position: absolute;
    top: 30px;
}
section.product-hotspot-container .products {
    position: absolute;
    width: 90%;
    height: 90%;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    margin: 0 auto;
}
section.product-hotspot-container .products .hotspot-product {
    overflow: hidden;
    text-align: center;
    position: relative;
    transition: all .15s ease-in-out;
}
section.product-hotspot-container .products .hotspot-product:hover {
    transform: scale(1.1);
}
section.product-hotspot-container .products .hotspot-product img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
}
section.quiz-section-container .reset-btn {
    display: flex;
    justify-content: center;
}
section.quiz-section-container .reset-btn span {
    position: relative;
    width: 40px;
    height: 40px;
    margin: auto;
    border: 1px solid #202020;
    border-radius: 50%;
    padding: 8px;
    margin-left: 8px;
    display: inline-block;
    vertical-align: middle;
}
section.quiz-section-container .reset-btn span i {
    position: absolute;
    font-size: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
}

@media screen and (min-width: 768px) {
    section.product-hotspot-container .products {
        position: absolute;
        top: 30px;
        bottom: 30px;
    }
    section.product-hotspot-container .products .hotspot-product img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: bottom;
    }
    section.product-hotspot-container .hotspot-img {
        aspect-ratio: 16 / 9;
        background: linear-gradient(to top, #FE75FF 15%, #FFD1FF 15%);
    }
}

@media screen and (min-width: 992px) {

    section.product-hotspot-container .products .hotspot-product img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: bottom;
    }
    section.product-hotspot-container .hotspot-img {
        aspect-ratio: 16 / 8;
        background: linear-gradient(to top, #FE75FF 10%, #FFD1FF 10%);
    }
    section.quiz-section-container .reset-btn {
        justify-content: center;
        margin-top: 30px;
    }
}

section.product-hotspot-container .hotspot-button {
    width: 30px;
    height: 30px;
    background: #FFF;
    border: none;
    opacity: 0.5;
    transition: all 0.15s ease-in-out;
    border-radius: 50%;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

section.product-hotspot-container .products .hotspot-product.tns-nav-active .hotspot-button{
    opacity: 1;
}

section.product-hotspot-container .hotspot-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #FFF;
    z-index: -1;
    opacity: 0.33;
}

section.product-hotspot-container .hotspot-button:hover,
section.product-hotspot-container .hotspot-button.tns-nav-active {
    opacity: 1;
}

section.product-hotspot-container #product-nav-xyz.tiny-slider-dots {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

section.product-hotspot-container .card .secondary-img {
    width: 100%;
    height: 80%;
    object-fit: contain;
    object-position: center;
    border-radius: 1rem;
    opacity: 0;
    position: absolute;
    transition: all 0.15s ease-in-out;
    
}

section.product-hotspot-container .card:hover .secondary-img {
    opacity: 1;
}

section.product-hotspot-container .card:hover .primary-img {
    opacity: 0;
}


#projectHtml .card {
  border: none;
  background-color: transparent;
}

#projectHtml .card .frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 1rem;
  background-color: #FFDFFC;
}
#projectHtml .card .frame img {
  transition: all .15s ease-in-out;
  object-fit: contain;
  position: absolute;
  width: 90%;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

#projectHtml .card:hover .frame img {
  width: 95%;
}

#projectHtml .card svg {
  width: 40px;
  height: 40px;
  margin: auto;
  border: 1px solid #202020;
  border-radius: 50%;
  padding: 8px;
}

#projectHtml .article span {
  position: absolute;
  left: 50%;
  width: max-content;
  transform: translateX(-50%);
  bottom: 30px;
  background-color: #F44379;
  border-color: #F44379;
  color: #FFF;
  border-radius: 999px;
  padding: 8px 20px;
  opacity: 0;
  z-index: 3;
  transition: all 0.15s ease-in-out;
}

#projectHtml .article:hover span {
  opacity: 1;
}

#projectHtml .filters-scrolable .btn.btn-outline-secondary {
  width: max-content;
}

#projectHtml .card h2 {
  font-size: 20px;
}

@media screen and (max-width: 991px) {
  
}
@media screen and (min-width: 768px) {
  #projectHtml .card h2 {
      font-size: 30px;
  }
}

@media screen and (min-width: 1200px) {
  #projectHtml .card h2 {
    font-size: 28px;
  }
}
@media screen and (min-width: 1600px) {
  #projectHtml .card h2 {
    font-size: 34px;
  }
}

@media screen and (min-width: 1200px) {
  #projectHtml .main-article .card .frame {
    aspect-ratio: 16 / 9;
  }
  #projectHtml .main-article .card .card-body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #FFF;
  }
  #projectHtml .main-article .card .card-body svg{
    display: none;
  }

  #projectHtml .article.main-article .card .card-body .card-text {
    font-size: 30px;
    justify-content: center !important;
  }
  #projectHtml .article.main-article .card .card-body .card-text div.arrow{
    display: none;
  } 
  #projectHtml .main-article .main-article-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 1rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, .33) 100%);
  }
}


.visually-hidden{
    visibility: hidden!important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.quiz-grid-container {
    
    gap: 20px; /
    justify-content: center; 
    width: 100%;
    margin: 0 auto;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.quiz-grid-item {
    width: 100%;
    display: flex;
    justify-content: center;
}

@media (min-width: 768px) {
    .quiz-grid-container {
        flex-direction: row;
       .quiz-grid-item { width: 33.33333%; }
    }
}

.social-wall-container{display: none!important;}

#quiz-question{
    margin: 50px 0;
}
#results-heading{
      margin: 50px 0;
  
}
.text-center{
    text-align: center;
}

.btn {
    background-color: #ffddfc;
    color: #000000;
    &:hover{
        background-color: #f44379;
    }
}


/* Impedisce il salto e mantiene lo spazio occupato durante il caricamento */
#quiz-ajax-container {
    min-height: 450px; /* Altezza stimata dello step del quiz */
    transition: min-height 0.3s ease;
}
.noresults{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 450px;
}
/* Quando è in corso il caricamento, preserviamo l'altezza bloccata */
#quiz-ajax-container.is-loading {
    min-height: 450px; 
    cursor: wait;
}

/* Riduciamo il focus outline visivo solo se gestito */
#quiz-question:focus, #results-heading:focus { 
    outline: none; 
}