@import "variables";

.mintmrm {

    %scrollbar-style {
        &::-webkit-scrollbar {
            width: 5px;
        }
        &::-webkit-scrollbar-track {
            background: #f2f5f8;
        }
        &::-webkit-scrollbar-thumb {
            background-color: #c1c1c1;
            border-radius: 20px;
        }
    }

    .mrm-form-group {
        margin: 0;

        &.alignment-center {
            margin-left: auto;
            margin-right: auto;
        }
        &.alignment-right {
            margin-left: auto;
            margin-right: 0;
        }

        label,
        .label {
            font-style: normal;
            font-weight: 500;
            font-size: 15px;
            line-height: 18px;
            color: #344054;
            box-sizing: border-box;
            display: block;
        }

        .mrm-validation-error {
            color: #dd1212;
            font-size: 12px;
            margin-top: 4px;
            display: none;
        }

        &.has-error {
            .mrm-validation-error {
                display: block;
            }

            input[type=date],
            input[type=email],
            input[type=text],
            input[type=number],
            textarea,
            select {
                border-color: #dd1212 !important;
            }
        }

        input[type=date],
        input[type=email],
        input[type=text],
        textarea,
        select {
            font-size: 14px;
            line-height: 1.3;
            color: #7a8b9a;
            padding: 9px 15px;
            width: 100%;
            border-radius: 6px;
            display: block;
            border: 1px solid #e4e6eb;
            min-height: 30px;
            box-sizing: border-box;
            outline: none;
            box-shadow: none;
            max-width: 100%;

            &:active,
            &:focus {
                border-color: #573BFF!important;
                color: #7a8b9a;
                box-shadow: none;
            }
        }
    }

    .mrm-form-wrapper {
        box-sizing: border-box;

        * {
            box-sizing: border-box;
        }

        img{
            border-radius: 0;
        }

        .mrm-form > div{
            width: 100%;
        }

        .required-mark {
            font-weight: 600;
            color: #dd1212;
        }

        .mintmrm-btn {
            display: inline-block;
            border: 1px solid transparent;
            color: #fff;
            font-style: normal;
            font-weight: 600;
            font-size: 14px;
            line-height: 17px;
            letter-spacing: -0.01em;
            padding: 11px 15px;
            cursor: pointer;
            text-align: center;
            border-radius: 6px;
            //text-transform: capitalize;
            background-color: #573BFF;
            min-height: 44px;

            &:hover {
                background-color: #4C25A5;
                color: #fff;
            }

        }

        //----checkbox style----
        .mintmrm-checkbox {
            position: relative;

            input[type="checkbox"] {
                position: absolute;
                top: 7px;
                z-index: -1;
                width: 0;
                padding: 0!important;
                opacity: 0;
            }

            input[type="checkbox"]:active + label::before,
            input[type="checkbox"]:focus + label::before {
                border-color: #573bff;
            }
        }
        .mintmrm-checkbox.no-title label {
            min-height: 20px;
        }
        .mintmrm-checkbox label {
            font-weight: 500;
            font-size: 15px;
            line-height: 1;
            letter-spacing: -0.01em;
            color: #344054;
            position: relative;
            padding-left: 29px;
            display: inline-block;
            //text-transform: capitalize;
            cursor: pointer;
        }
        .mintmrm-checkbox label:before {
            content: "";
            position: absolute;
            left: 0;
            top: -2px;
            width: 20px;
            height: 20px;
            border-radius: 4px;
            border: 1px solid #bdc7eb;
            background-color: #f6f6f8;
            transition: all 0.3s ease;
            box-sizing: border-box;
        }
        .mintmrm-checkbox label:after {
            content: "";
            position: absolute;
            left: 6px;
            top: 4px;
            width: 9px;
            height: 5px;
            transform: rotate(-45deg);
            border-bottom: 2px solid #fff;
            border-left: 2px solid #fff;
            transition: all 0.3s ease;
            opacity: 0;
            visibility: hidden;
            box-sizing: border-box;
        }
        .mintmrm-checkbox input[type="checkbox"]:checked + label::before {
            background-color: #573bff;
            border-color: #573bff;
        }
        .mintmrm-checkbox input[type="checkbox"]:checked + label::after {
            opacity: 1;
            visibility: visible;
        }

        //----radio btn style----
        .mintmrm-radiobtn {
            position: relative;

            input[type="radio"] {
                position: absolute;
                top: 7px;
                z-index: -1;
                width: 0;
                height: auto;
                opacity: 0;
            }

            input[type="radio"]:active + label::before,
            input[type="radio"]:focus + label::before {
                border-color: #573bff;
            }
        }
        .mintmrm-radiobtn.no-title label {
            height: 16px;
        }
        .mintmrm-radiobtn label {
            font-size: 15px;
            line-height: 14px;
            font-weight: 500;
            color: #7a8b9a;
            position: relative;
            padding-left: 29px;
            display: inline-block;
            //text-transform: capitalize;
            cursor: pointer;
        }
        .mintmrm-radiobtn label::before {
            content: "";
            position: absolute;
            left: 0;
            top: -3px;
            width: 20px;
            height: 20px;
            border-radius: 100%;
            background: #f7f7fa;
            border: 1px solid #bdc7eb;
            transition: all 0.3s ease;
            box-sizing: border-box;
        }
        .mintmrm-radiobtn label::after {
            content: "";
            position: absolute;
            left: 5px;
            top: 2px;
            width: 10px;
            height: 10px;
            border-radius: 100%;
            background: #573bff;
            transform: scale(0);
            transition: all 0.3s ease;
        }
        .mintmrm-radiobtn input[type="radio"]:checked + label::before {
            border-color: #573bff;
        }
        .mintmrm-radiobtn input[type="radio"]:checked + label::after {
            transform: scale(1);
        }


        .response {
            font-size: 15px;
            color: #000;

            &.mintmrm-error {
                color: #e71616;
            }
            &.mintmrm-success {
                color: #08c708;
            }
        }


        //----mrm submit button loader----
        .mrm-submit-button {
            position: relative;
        }
        .mrm-submit-button::after {
            content: "";
            border: 2px solid #8265c5;
            border-radius: 50%;
            border-top: 2px solid #fff;
            width: 13px;
            height: 13px;
            animation: spin 0.7s linear infinite;
            margin-left: 7px;
            position: relative;
            top: 2px;
            display: none;
            box-sizing: border-box;
        }
        .mrm-submit-button.show-loader::after {
            display: inline-block;
        }

        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }


        //-------form inner--------
        .mrm-form-wrapper-inner {
            position: relative;

            .mrm-form-close {
                position: absolute;
                right: -12px;
                top: -16px;
                width: 30px;
                height: 30px;
                background: #573bff;
                z-index: 99;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 100%;
                cursor: pointer;
            }

            .mrm-form-overflow {
                @extend %scrollbar-style; //---extend form default.scss---
            }

            &.custom-background {
                background: transparent;
                border-radius: 0;
                padding: 0;

                .mrm-form-overflow {
                    padding: 0;

                    .mrm-form > div{
                        padding: 20px;
                    }

                    .wp-block-columns {
                        margin: 0;
                    }
                }
            }
        }

        .wp-block-column {
            padding: 0.2em;
        }
        .mintmrm-form-preview .wp-block-image.aligncenter {
            text-align: center;
        }
    }
}

.comment-form-mint-mail input[type="checkbox"] {
    margin-right: 6px;
}

//-------plugin page template's style------

.mintmrm-container {
    max-width: 1230px;
    padding: 0 15px;
    margin: 0 auto;
    //min-height: 62vh;
    //display: flex;
    //flex-flow: column;
    //align-items: center;
    //justify-content: center;

    .response {
        font-size: 15px;
        font-weight: 500;

        &.mintmrm-success {
            color: #24c329;
        }

        &.mintmrm-error {
            color: #cd2653;
        }
    }
}

.mintmrm-page-template-main {
    padding: 50px 0;
}

.mrm-preferance-form-wrapper {
    .mrm-block-label {
        display: block
    }
}


.mintmrm .mrm-input-group .input-wrapper.checkbox-input-wrapper {
    display:flex;
    align-items: flex-start;
    gap: 6px
}


.mintmrm .mrm-input-group .input-wrapper.checkbox-input-wrapper.custom-checkbox input[type=checkbox] {
    position: relative;
    left: 0;
    top: 9px;
    display: block;
    width: 18px!important;
    height: 18px;
    border-radius: 4px;
    border: 1px solid #b9b9b9;
    transition: all 0.3s ease;
    box-sizing: border-box;
    margin-right: 7px;
    background-color: transparent;
}

.mintmrm .mrm-input-group .input-wrapper.checkbox-input-wrapper.custom-checkbox input[type=checkbox]:checked {
    background-color: #573bff;
    border-color: #573bff;
}



.mintmrm .mrm-input-group .input-wrapper.checkbox-input-wrapper.custom-checkbox input[type=checkbox]::before {
    content: "";
    position: absolute;
    left: 25%;
    top: 30%;
    width: 9px;
    height: 5px;
    transform: rotate(-45deg);
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    box-sizing: border-box;
 }

 .mintmrm .mrm-input-group .input-wrapper.checkbox-input-wrapper.custom-checkbox input[type=checkbox]::after {
    display: none;
 }

 .mintmrm .mrm-input-group .input-wrapper.checkbox-input-wrapper.custom-checkbox input[type=checkbox]:focus {
    outline: none;
  }

 .mintmrm .mrm-input-group .input-wrapper.checkbox-input-wrapper.custom-checkbox input[type=checkbox]:checked::before {
    opacity: 1;
    visibility: visible;
}

.mintmrm .mrm-input-group .input-wrapper.checkbox-input-wrapper.theme-checkbox input[type=checkbox] {
    display: block;
    margin: 0;
}

.mintmrm .mrm-input-group label.mrm-privacy-policy-input-label {
    position: relative;
    margin-bottom: 0px;
    width: calc(100% - 30px);
}


.input-wrapper.checkbox-input-wrapper input[type=checkbox]:checked + label.mrm-privacy-policy-input-label .mailmint-checkbox::after {
    opacity: 1;
    visibility: visible;
}

.mrm-input-group .mrm-privacy-policy-input-label .mrm-privacy-policy {
    margin: 0 !important;
    line-height: 1.5;
    display: inline;
}