.main{
    article{
        padding: 8rem 0 !important;

        @media only screen and (max-width: 1260px) {

            padding: 5rem 0 !important;
		}

        @media only screen and (max-width: 980px) {

            padding: 2.5rem 0 !important;
		}
    }


    &::before{
        content: "";
        position: absolute;
        display: block;
        width: 336px;
        height: 100%;
        background-image: url('/css/images/bgrighe.png');
        background-size: 128px 1px;
        z-index: 0;

        filter: brightness(1.3);
        opacity: .1;
    }

    &::before{
        top: 0;
        left: -1px;
        transform: scaleX(-1);
    }


}


.sticky-cont{
    position: relative;
    overflow: visible;
    min-height: 100%;

    .sticky{
        position: sticky;
        top: 140px;

        @media only screen and (max-width: 850px) {
            position: relative;
            margin-bottom: 0rem;
            top: 0;
		}
    }
}


#mappa{
    min-height: 100%;
    height: 60svh;
}

.STILE_contattibox{
    display: flex;
    flex-direction: column;
    gap: .5rem;

    p{
        margin: 0;
    }
}
    

.grid-min{
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: min-content;
}

.validation-message{
    line-height: 1.4em;
    margin-top: .5rem 0;
}

.field-label{
    line-height: 1.3rem;
    margin-bottom: .6rem;
}

.toggle-option, .radio-option, .footer-form-checkbox{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px;
    height: min-content;
    align-items: center;
    margin: 4px 0;
    
    label{
        line-height: 1.2rem;
    }
}

.footer-form-checkbox{
    align-items: flex-start;
    gap: 1rem;
}



.toggle-input:focus + .toggle-label {
  box-shadow: 0 0 0 2px rgba(var(--color-secondary-rgb), 0.3);
}

.footer-form-field:has(.validation-message) .custom-toggle-group {
  /* margin-bottom: 12px; */
}

.validation-message {
  color: #e74c3c;
  font-size: 0.85rem;
  min-height: 20px;
}

.validation-message:empty {
  display: none;
}

.contact-method-group {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}


.radio-label{
    display: flex;
    align-items: center;
    gap: 4px;

    .radio-icon{
        width: 18px;
        height: 18px;
        display: block;
    }
  }



@media (max-width: 600px) {
  .custom-toggle-group {
    flex-direction: column;
    gap: 8px;
  }
  
  .contact-method-group {
    /* flex-direction: column; */
    gap: 8px;
  }
  
  .toggle-label, .radio-label {
    width: 100%;
  }

  
}