/*
 Theme Name:   Shoptimizer Child
 Template:     shoptimizer
 Version:      1.0.0
*/

@import url("../shoptimizer/style.css");
@import url("./styles/shoptimizer-child.css");






/* Helper  (using in calculations scripts only at this moment */
.ax-styles-container .w-100{width: 100% !important}
.ax-styles-container .w-50{width: 50% !important}
.ax-styles-container .d-none{display:none !important;}
.ax-styles-container .d-flex-between{display:flex; justify-content: space-between;}
.ax-styles-container .d-flex-column{display:flex; flex-direction:column}
.ax-styles-container .flex-wrap {display:flex; flex-wrap:wrap}
.ax-styles-container  .bg-gray{ background: #F5F5F5;}
.ax-styles-container select{cursor:pointer; text-align:center;}
.ax-styles-container .t-center{text-align:center !important;}

.ax-styles-container #summaryCalculator{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    border:2px solid rgb(119,119,119);
    padding:20px;
}

.ax-styles-container #summaryCalculator .form-field{
    margin-bottom:20px;
}
.ax-styles-container #summaryCalculator .form-field select,
.ax-styles-container #summaryCalculator .form-field input[type="number"]{
    width:100%;
}

/*.ax-form-field {width:100%;}*/
.ax-form-field {width:100%;}

.ax-sectionheader{width:100%; display:flex; justify-content:center; align-items:center; margin-top:35px;}
.ax-sectionheader span{display:block; height:2px; width:40px; background:#326ac3; margin: 0 15px;}


.ax-calc{
    font-family: 'Raleway', 'Arial', sans-serif !important;
    gap:60px;
    display:flex;
    align-items:start;
    position:relative;
}

.ax-calc .i-left{min-width:70%;}
/*.ax-calc .i-right{flex-grow:1;}*/
.ax-calc .i-right .wd-gallery-item img {
    border-radius: var(--wd-brd-radius);
    width: 100% !important;
    aspect-ratio: unset !important;
    object-fit: unset;
    mix-blend-mode: unset;
}

.ax-calc .ax-form-field{
    border-top: 3px solid #326ac3;
    display:flex; align-items:center;
    flex-direction:column; justify-content: space-between;
    padding:20px;
    gap:12px;
    background:#F5F5F5 !important;
    color:#444444 !important;
}


.ax-calc .ax-form-field.v-img{flex-direction: row; padding:0}
.ax-calc .ax-form-field.v-img a {text-align:center; height:190px; width:190px; }
.ax-calc .ax-form-field.v-img img{object-fit:cover; width:100%; height:100%;}
.ax-calc .ax-form-field.v-img > div{
    flex-grow:4;
    /*height:100%;*/
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:20px;
    gap:10px;
}
.ax-calc .ax-form-field.v-img .double-input label{margin-bottom:10px;}
.ax-row{display:flex; gap:30px; flex-wrap:wrap; justify-content: space-between;}
.ax-row .ax-form-field {width:calc(33.3% - 20px);}
.ax-row.duo .ax-form-field{width: calc(50% - 15px)}


.ax-calc select{margin-left:auto; cursor:pointer;}
/*.ax-calc input[type="number"], .ax-calc label {width: 18%;}*/
.ax-calc input[type="checkbox"] {margin-left:auto; width: 25px; height:25px; accent-color: #326ac3}
.ax-calc label{
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    color:#444444 !important;
    margin-bottom:0;
}



.ax-calc .ax-summary{
    display:flex;
    flex-wrap:wrap;
    gap: 30px;
    margin-top: 50px;
    /*text-align:center;*/
}

.ax-calc .ax-summary .ax-summary-item{
    width:calc(50% - 20px) ;
    display:flex;
    flex-direction: column;
}
.ax-calc .ax-summary .ax-summary-item .i-item-title{margin-bottom:10px;}
.ax-calc .ax-summary .ax-summary-item .i-item-title-link{  margin-bottom:10px; color:#326ac3 ; font-size:0.8em;}

.ax-calc .ax-gray-box{
    color:black;
    background:#F5F5F5 !important;
    text-align: center;
    font-size: 25px;
    padding: 10px;
}

.ax-total{
    width:100% ;
    border: 3px solid #4387f4 ;
    /*display:flex ; flex-wrap:wrap ; flex-direction:row;*/
    /*justify-content:space-between;*/
    /*font-weight: bold;*/
    color: #4387f4 !important
}

/*// options*/
.ax-calc .color-options {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    flex-grow: 1;
    justify-content: center;
}

.ax-calc .color-option {
    width: 65px;height: 65px; border: 3px solid transparent;
    transition:border-color .5s;
}

.ax-calc .color-option:hover, .color-option.selected {border-color: #F4BC16; cursor: pointer;}


@media all and (max-width: 991px) {
    .ax-calc{flex-direction:column;}
    .ax-calc .i-right{width:100%;}
    .ax-row{flex-wrap:wrap; gap:20px;}
    .ax-calc .ax-form-field{flex-wrap:wrap;   width:100%;}
    /*.ax-calc .ax-form-field  .i-input{width:100%; order:3;}*/
    .ax-calc .ax-form-field  select{max-width:100%;}
    .ax-calc .ax-form-field  label{width:100%}
    .ax-calc .ax-form-field  .js-selected-color{text-align:left !important;}
    .ax-calc .ax-form-field  input[type="number"]{width:100%;}
    .ax-calc .ax-summary{gap:30px;}
    .ax-calc .ax-summary .ax-summary-item{width:100%}
    .ax-calc .ax-summary .ax-summary-item .i-item-title{margin-bottom: 5px;}
    .ax-calc .ax-gray-box{
        font-size: 30px;
        padding: 10px 20px
    }
    .ax-calc .color-options{width: 100%;justify-content: center;}
    .ax-calc .color-options .color-option {
        width: 45px;
        height: 45px;
    }

    .ax-calc .ax-form-field.v-img{
        flex-direction:column; align-items:center;
        justify-content:end;
    }
    .ax-calc .ax-form-field.v-img a {text-align:center; width:100%;}


    .ax-calc .ax-form-field.v-img > div{
        width:100%;
        justify-content:end;
    }
    .ax-calc .ax-form-field.v-img a{display:block;}
    .ax-calc .ax-form-field.v-img img{max-width:100%;}

}

@media all and (max-width: 500px) {
    .ax-row.duo .ax-form-field{
        width:100%;
    }
}


.page-title-default .container{
    text-align: center;
    align-items: center;
    background: #fff !important;
    bottom: 0;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

.page-title.entry-title .title{color:var(--wd-title-color)}