.configurator-sticla-container,
.configurator-container {
    flex-wrap: wrap;
    gap: 20px;
}
span#configurator-form-sticla h1 {
    font-size: 42px !important;
}
.configurator-section h3{
    text-transform: uppercase;
    margin-bottom: 0;
}
a#reset-selection {
    color: #252B37;
}
button.configurator-product,
button.configurator-collection,
button.configurator-shape {
    background: #E8E8E8 0% 0% no-repeat padding-box !important;
    border-radius: 9px !important;
    border: 0 !important;
}

.configurator-sticla-image, .configurator-sticla-form,
.configurator-image, .configurator-form {
    flex: 1;
    min-width: 300px;
}
.image-option,
.model-option {
    display: inline-block;
    width: 30%;
    margin: 1%;
    text-align: center;
}

span.group_input {
    margin-bottom: 10px;
    display: flex;
    gap: 21px;
    /* justify-content: center; */
    align-items: center;
    font-size: 20px;
}

textarea {
    background-color: #E8E8E8;
    height: 103px;
    border: 0 !important;
}
span.group_input input {
    background-color: #E8E8E8;
    border: 0;
    max-width: 125px;
    font-family: 'Nunito Sans' !important;
    font-weight: bold !important;
}
.configurator-section > label, .configurator-section .sub-section > label, .group_input label {
    font-family: 'Nunito Sans' !important;
    font-weight: bold !important;
}
#configurator-form #other-details-box {
    display: none;
}
.sub-section {
    margin: 25px 0;
}
.checkbox_div label{
    font-family: 'Nunito Sans' !important;
}
span.group_input label {
    width: 90px;
}
.image-option img,
.model-option img {
    width: 100%;
    height: auto;
    cursor: pointer;
    border: 2px solid transparent;
}
.configurator-section .image-option img,
.configurator-section .model-option img {
    border-radius: 9px;
}

.image-option img.selected,
.model-option img.selected {
    border: 2px solid #252B37;
}
.configurator-shape:hover{
    background-color: #252B37 !important;
}
.configurator-section{
    margin-bottom: 30px;
}
div#image-options,
div#model-options, .group_input.first{
    margin-top: 20px;
}
#configurator-form span.button_box {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    list-style: none;
    padding-left: 0;
}

button.selected-product,
button.selected-collection,
.configurator-shape.selected-shape {
    background-color: #252B37 !important; /* sau orice altă culoare dorită */
    color: white !important; /* schimba culoarea textului dacă este necesar */
}
.wpcf7-validation-errors {
    color: red;
    margin-top: 10px;
}
.error-message {
    color: red;
    margin-bottom: 20px;
    display: block;
}
/* Limit the height of the model options and make it scrollable */
#image-options,
#model-options {
    max-height: 320px; /* Adjust this height to fit 2 rows of images */
    overflow-y: scroll; /* Ensure scrollbar is always visible */
}
#image-options::-webkit-scrollbar,
#model-options::-webkit-scrollbar {
    background-color: #fff;
    width: 16px;
    border-radius: 16px;
    border: 1px solid #252B37;
}

/* background of the scrollbar except button or resizer */

#image-options::-webkit-scrollbar-track,
#model-options::-webkit-scrollbar-track {
    background-color: #fff;
}

/* scrollbar itself */
#image-options::-webkit-scrollbar-thumb,
#model-options::-webkit-scrollbar-thumb {
    background-color: #F7B892;
    border-radius: 16px;
    border: 4px solid #fff;
}

/* set button(top and bottom of the scrollbar) */
#image-options::-webkit-scrollbar-button,
#model-options::-webkit-scrollbar-button {
    display:none;
}
/* Customize scrollbar for WebKit browsers */
/* #model-options::-webkit-scrollbar {
    width: 12px;
}

#model-options::-webkit-scrollbar-track {
    background: #252B37;
    border-radius: 12px;
}

#model-options::-webkit-scrollbar-thumb {
    background-color: #F7B892;
    border-radius: 12px;
} */

/* Customize scrollbar for Firefox */
#image-options,
#model-options {
    scrollbar-width: thin;
    scrollbar-color: #F7B892 #252B37;
}

/* General scrollbar customization for all browsers */

#image-options,
#model-options {
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: #F7B892 #252B37;
}
/* 
#model-options::-webkit-scrollbar {
    width: 12px;
}

#model-options::-webkit-scrollbar-thumb {
    background-color: #F7B892;
    border-radius: 12px;
    border: 3px solid #252B37;
}


#model-options::-webkit-scrollbar-track {
    background: #252B37;
    border-radius: 12px;
} */
/* Selected model option styling */

.image-option.selected,
.model-option.selected {
    position: relative;
}
.image-option.selected img,
.model-option.selected img {
    border: 2px solid #F7B892;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.image-option.selected img,
.model-option.selected img {
    opacity: 0.8;
}
.image-option.selected::after,
.model-option.selected::after {
    content: '';
    position: absolute;
    bottom: 15px;
    right: 5px;
    font-size: 34px;
    background: url(/wp-content/uploads/2024/06/64px-checkmark.svg-1.webp);
    width: 35px;
    height: 35px;
    background-size: contain;
}
/* Ensure images are displayed in a grid with 2 rows max */
.image-option,
.model-option {
    display: inline-block;
    margin: 5px;
    width: calc(33.33% - 10px); /* Adjust width as necessary for your layout */
    box-sizing: border-box;
}

@media (max-width: 768px) {
    #image-options,
    #model-options {
        padding-right: 0px; /* To avoid content being hidden behind the scrollbar */
    }
    .image-option,
    .model-option {
        width: calc(50% - 10px); /* Two columns on smaller screens */
    }
}

@media (min-width: 768px) {
    .configurator-sticla-container .wpcf7-form p,
    .configurator-container .wpcf7-form p {
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 20px;
        list-style: none;
        padding-left: 0;
    }

    #configurator-form-sticla span.button_box {
        margin-top: 20px;
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        gap: 10px;
        list-style: none;
        padding-left: 0;
    }
    .checkbox_div {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
    .configurator-section .image-option, 
    .configurator-section .model-option {
        max-width: 33%;
        height: auto;
        border-radius: 9px;
    }
    #configurator-form span.button_box {
        max-width: 380px;
    }  
    #image-options,
    #model-options {
        padding-right: 15px; /* To avoid content being hidden behind the scrollbar */
    }
}
@media (max-width: 768px) {

    #configurator-form-sticla span.button_box {
        margin-top: 20px;
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 10px;
        list-style: none;
        padding-left: 0;
    }
    .configurator-sticla-container .wpcf7-form p,
    .configurator-container .wpcf7-form p {
        display: grid;
        grid-template-columns: auto;
        gap: 20px;
        list-style: none;
        padding-left: 0;
    }
    .checkbox_div {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
    .configurator-section .image-option, 
    .configurator-section .model-option {
        max-width: 30%;
        height: auto;
        border-radius: 9px;
    }
    .image-option,
    .model-option {
        width: 45%;
    }
}

@media (max-width: 480px) {
    .image-option,
    .model-option {
        width: 100%;
    }
}

@media (min-width: 992px) {
    
    .configurator-sticla-container ,
    .configurator-container {
        display: flex;
    }
    .configurator-sticla-image, 
    .configurator-image {
        flex: 1;
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 0;
        height: 100vh; /* Full height */
        overflow: hidden; /* Ensure the image doesn't overflow */
    }
    
    .configurator-sticla-image img,
    .configurator-image img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Cover the entire container without distortion */
    }
    
    .configurator-sticla-form, 
    .configurator-form {
        flex: 1;
        padding: 20px;
        overflow-y: auto;
    }
}