//url
// @url: "https://website.v5.hzstaging.com/ci/public/files/images/";

//background image
.background-image-product{
    background: url(https://marylovescleaning.com/public/images/backgr.jpg) right bottom no-repeat;
    background-size: cover;
}

//global colors
@clr-acs: #1CB3C8;
@clr-acs-brd: #0C393F;

@clr-sec: #214172;
@clr-card: rgb(48 59 118 / 80%);

@clr-dark: #000000;
@clr-gray: #909090;
@clr-light: #FFFFFF;
@clr-error: #CB0D0D;

// font
//options "montserrat" "poppins" "inter"
@fontfamily: "poppins";
@import (css) "fonts/@{fontfamily}/style.css";


//---------------------

// global sizes
@size-xl: ~"(min-width: 1201px)";
@size-lg: ~"(max-width: 1200px)";
@size-md: ~"(max-width: 992px)";
@size-sm: ~"(max-width: 768px)";
@size-xs: ~"(max-width: 480px)";


//global styles
html {
    line-height: 1;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
    font-size: 16px;
    height: -webkit-fill-available;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
footer {
  margin-top: auto;
}



//global titles
.style-heading-01{ // card header
    font-weight:900;
    font-size: 1.3em;
    text-transform: uppercase;
    line-height: 1.2;
}
.style-heading-02{ // main header
    font-weight:900;
    font-size:2em;
    text-transform: uppercase;
}

// card text
.style-text-01{ 
    font-weight:500;
    font-size: 0.9em;
    line-height: 1.4em;
}
.style-text-01b{ 
    font-weight:700;
    font-size: 0.9em;
    line-height: 1.4em;
}

// main text
.style-text-02{ 
    font-weight:400;
    font-size: 1.1em;
    line-height: 1.3em;
}
.style-text-02b{ 
    font-weight:700;
    font-size: 1.1em;
    line-height: 1.3em;
}

// grid text
.style-text-03{ 
    font-weight:400;
    font-size: 0.8em;
}

// footer text
.style-text-04{ 
    font-weight:400;
    font-size: 0.8em;
}

// input text
.style-input-01{ 
    font-weight:400;
    font-size: 1em;
}


//global spacing

.spacing-y-01{
    margin-top:1em;
    margin-bottom:1em;
}
.spacing-y-02{
    margin-top:2em;
    margin-bottom:2em;
}
.spacing-x-01{
    padding-left:1em;
    padding-right:1em;
}
//containers - max width

.container-box-lg{
    width:100%;
    max-width: 1400px;
    margin:0px auto;
    box-sizing: border-box;
}
.container-box-md{
    width:100%;
    max-width: 1240px;
    margin:0px auto;
    box-sizing: border-box;
}

.container-box-m{
    width:100%;
    max-width: 900px;
    margin:0px auto;
    box-sizing: border-box;
}

.container-box-sm{
    width:100%;
    max-width: 600px;
    margin:0px auto;
    box-sizing: border-box;
}

.container-box-form{
    width:100%;
    max-width: 520px;
    margin:0px auto;
    box-sizing: border-box;
}

//-----------------------------


//background header + main
.body-background{
    .background-image-product; 
}

//header style

.header{
    margin-bottom:3em;
    @media @size-md{
        margin-bottom:1em; 
    }
    &__wrapper{
        .container-box-m;
        .spacing-x-01;
        text-align: center;
        padding-top:2em;
        img{
            max-width: 500px;
            width: 100%;
        }
    }
}


//main style
main{
    .container-box-md;
}

.layout{
    &__grid-1{
        display:grid; 
        grid-template-columns: 1fr;
        gap:2em;
    }
    &__grid-2{
        display:grid; 
        grid-template-columns: 1fr 1fr;
        gap:2em;
        @media @size-md{
            grid-template-columns: 1fr;  
        }
    }

    &__col{
        padding:2em;
        @media @size-md{
            padding:1em;
            padding-bottom:0px;
            padding-top:0px;
        }
    }
}



//left column text
.text__column{
    font-size:16px;
    @media @size-md{
        font-size:14px;  
    }
    &-title{
       .style-heading-02;
       color: @clr-dark;
       margin:0px;
    }
    &-tagline{
        .style-heading-01;
        color: @clr-acs;
        display:block;
        .spacing-y-01;
        padding-bottom:0.5em;
    }
    &-text-b{
        .style-text-02b;
        color: @clr-dark;
        .spacing-y-01;
    }
    &-text{
        .style-text-02;
        color: @clr-dark;
        .spacing-y-01;
    }
}


.input{
    border-radius:0.4em;
    padding:0.4em 1em;
    box-sizing: border-box;
    color:@clr-dark;
    background:@clr-light;
    border: 0.15em solid transparent;
    display:block;
    width: 100%;
    margin-bottom: 0.9em;
    line-height: inherit;
    .style-input-01;

    &::placeholder {
        color: @clr-dark;
        .style-input-01;
        line-height: inherit;
    }
    &:focus {
        outline: none !important;
    }
    &::-webkit-outer-spin-button,&::-webkit-inner-spin-button{
        -webkit-appearance: none;
        margin: 0;
    }
    &[type=number]{
        -moz-appearance: textfield;
    }
    &.error{
        border-color:@clr-error;
    }
}
.textarea{
    padding:1em;
    line-height: 1.2em;
}


//right column
.form{
    
    &__column{
        font-size:16px;
        .spacing-y-01;
        .container-box-form;
        text-align:center;
    }
    &__card{
        border-radius: 1em;
        padding:1em 2.5em 2.5em;
        background:@clr-card;
        color:@clr-light;

        &-row1{
   
        }
        &-row2{
            .spacing-y-02;
        }
        &-row3{
            .spacing-y-01;
        }


        &__inner{
    
        }

        &__error{
            display:none;
            .style-text-01b;
            .spacing-y-01;
            background: @clr-error;
            color: @clr-light;
            padding: 1em;
            border-radius: 0.3em;
        }
        &__title{
            .style-heading-01;
            &.--leftalign{
                text-align: left;
            }
        }
        &__text{
        .style-text-01;
            &-link{
                color:inherit;
                text-decoration:none;
                font-weight: 600;
                transition: opacity 0.2s;
                display: inline-block;
                padding: 0.8em;
                &:hover{
                    opacity:0.8;
                }
            }
        }
        &__stars{
            display:flex;
            flex-wrap:nowrap;
            justify-content:center;
            flex-direction: row-reverse;
            svg{
                max-width: 3.5em;
                color:@clr-gray;
                margin-right:0.5em;
                transition: color 0.2s;
                &:last-child{
                    margin-right:0px;
                }
                &:hover,&:hover ~ svg,&.active,&.active ~ svg{
                    color:yellow;  
                }
            }
        }
    
        &__grid{
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-gap: 10px;
            margin-bottom:2em;
            @media @size-xs{
                grid-template-columns: 1fr;
            }
            &-item{
                border-radius:0.5em;
                overflow:hidden;
                text-align:center;
                background:@clr-sec;
                .style-text-03;
                cursor:pointer;
                transition: opacity 0.2s,background 0.2s;
                &:hover{
                    opacity:0.8;
                }
                &.active{
                    background:darken(@clr-acs, 10%)  
                }

                img{
                    width:100%;
                }
                span{
                    padding: 0.5em;
                    display: block;
                    box-sizing: border-box;
                }
            }
        }

        &__form{
            input{
                .input;
                &.--inline{
                    display: inline;
                    width: auto;
                    margin: 0px;
                    margin-right: 7px;
                    margin-top: -2px;
                    margin-left:3px;
                    padding: 0px;
                    transform: scale(1.3);
                }
            }
            .checkbox{
                display:flex;
                align-content:center;
                margin-bottom: 1.5em;
                margin-top: 0.5em;
            }
            select{
                .input;
            }
            textarea{
                .input;
                .textarea;
                resize: vertical;
                &.with-count{
                    min-height: 200px;
                    max-height: 400px;
                    margin-bottom:0px;
                }

                
            }
            .textarea-char{
                padding-top: 0.5em;
                .style-text-03;
                text-align:right;
                display:block;
                color:@clr-light;
                margin-bottom:2em;
                div{display:inline-block;}
            }
            .btn-submit{
                padding:0.6em 0.8em;
                text-transform:uppercase;
                border-radius:0.3em;
                font-weight:900;
                font-size:1.2em;
                line-height:1em;
                color:@clr-light;
                background:@clr-acs;
                white-space: normal;
                border: 0.15em solid @clr-acs-brd;
                transition: background 0.2s, color 0.2s;
                cursor:pointer;

                &:hover{
                    background:darken(@clr-acs,20%);
                    color:@clr-light;
                }
            }

            .btn-copy{
                padding:0.6em 0.8em;
                text-transform:uppercase;
                border:0px;
                border-radius:0.5em;
                font-weight:500;
                font-size:1em;
                line-height:1em;
                color:@clr-light;
                background:@clr-sec;
                white-space: normal;
                transition: background 0.2s;
                cursor:pointer;

                &:hover{
                    background:darken(@clr-sec,20%);
                }
            }

            .grid-3{
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                column-gap:1em;
                @media @size-sm{
                    grid-template-columns: 1fr;
                }
            }
            .grid-2{
                display: grid;
                grid-template-columns: 1fr 1fr;
                column-gap:1em;
                @media @size-sm{
                    grid-template-columns: 1fr;
                }
            }
        }
    }
}

//faq card
.faq{
    
    &__column{
        font-size:16px;
        .spacing-y-01;
        .container-box-form;

    }
    &__card{
        border-radius: 1em;
        padding:1em 2.5em 2.5em;
        background:@clr-light;
        color:@clr-dark;
        text-align:left;

        &-head{
            .style-heading-01;
            text-align: center;
            margin-bottom:1.5em;
        } 


        &__item{
            margin-bottom: 2em;
            display: block;
            &-title{
                .style-text-01b;
                display: block;
                margin-bottom:0.8em;
            }
            &-text{
                .style-text-01;
                margin:0px;
            }
        } 

    }
}


//footer style

.footer{
    background:@clr-light;
    color:@clr-dark;
    &__wrapper{
        .style-text-04;
        .container-box-sm;
        .spacing-x-01;
        .spacing-y-01;
        text-align: center;
    }
    &__title{
        color:@clr-dark;
        display:block;
        
    }
    &__text{
        color:@clr-gray;
    }
}