/*
Theme Name: Frinsa SOLO
Theme URI: https://www.invbit.com
Author: Invbit
Author URI: https://www.invbit.com
Description: Tema WP para Frinsa SOLO - Para Betheme
Template: betheme
Version: 1.0.0
*/
@import './fonts/fonts.css';
@import './css/variables.css';

/*********************************\
              GENERAL
\*********************************/
.validate_email_against_bot,
.otgs-development-site-front-end,
.wpml-ls-statics-footer {
    display: none
}

:root {
    scrollbar-width: thin;
}

html {
    height: auto;
}

.style-simple,
.style-simple .mfn-header-tmpl {
    --mfn-column-gap-bottom: 0;
    --mfn-column-gap-top: 0;
    --mfn-column-gap-right: 0;
    --mfn-column-gap-left: 0;
}

p:empty {
    margin: 0;
    display: none;
    visibility: hidden;
    opacity: 0;
}

.admin-bar .full-screen .section_wrapper {
    min-height: calc( 100vh - 32px );
}

.section.has-video .section_video {
    display: flex;
    align-items: center;
    justify-content: center;
}

.section.has-video .section_video video {
    top: unset;
    left: unset;
    height: 100%;
}

.section.has-video .section_video .mask {
    display: none;
}

.style-simple .responsiveWidth {
    max-width: calc( 2 * var(--halfSection) );
}

.mobile-side-slide {
    overflow-x: clip !important;
}

.section_wrapper, 
.container {
    box-sizing: border-box;
    padding-left: 33px;
    padding-right: 33px;
}

.slick-list {
    width: 100%;
}

.slick-track {
    display: flex;
}

h1, .size-h1 {
    font-family: var(--font-titles);
    font-size: var(--size-h1);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: 0;
}

h2, .size-h2 {
    font-family: var(--font-titles);
    font-size: var(--size-h2);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0;
}

h3, .size-h3 {
    font-family: var(--font-titles);
    font-size: var(--size-h3);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0;
}

h4, .size-h4 {
    font-family: var(--font-titles);
    font-size: var(--size-h4);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0;
}

h5, .size-h5 {
    font-family: var(--font-titles);
    font-size: var(--size-h5);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0;
}

h6, .size-h6 {
    font-family: var(--font-titles);
    font-size: var(--size-h6);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0;
}

body,
p,
input[type=date],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
select,
textarea {
    font-size: var(--size-p);
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: -0.04em;
    font-variant-numeric: lining-nums proportional-nums;
}

.select-form .wpcf7-form-control-wrap #select-form{
background:var(--color600) url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E) no-repeat right 12px top 55%;
}

.select-form .wpcf7-form-control-wrap #select-form:focus{
	background: var(--color600)
  url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23FFA168%22%2F%3E%3C%2Fsvg%3E")
  no-repeat right 12px top 55% !important;
}


.lead, 
.big {
    font-size: var(--size-plead);
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: -0.04em;
}

.small {
    font-size: var(--size-psmall);
    line-height: 1.4;
    font-weight: 400;
}

a:hover {
    text-decoration: none;
}

.decorative {
    font-family: var(--font-decorative);
}

.principal {
    color: var(--color500);
}

.secundario {
    color: var(--color400);
}

.blanco {
    color: var(--color100);
}

a {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

.overflow-hidden {
    overflow: hidden;
}

body,
.mfn-header-tmpl-fixed {
    width: 100vw;
}

label {
    margin: 0;
}

.the_content_wrapper {
    width: 100%;
    margin: 0;
}

.has_content .the_content_wrapper {
    margin-bottom: 0;
}

.section.left-boxed-section.full-width > .section_wrapper {
    padding-left: calc(50vw - var(--halfSection)) !important;

    @media only screen and (max-width: 959px) {
        padding-right: calc(50vw - var(--halfSection)) !important;
    }

    @media only screen and (max-width: 767px) {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

.wrap.fit-content-wrap {
    width: fit-content;

    &>.mcb-wrap-inner {
        flex-direction: column;
    }
}

.outlined-text {
    display: block;
    color: transparent;
    -webkit-text-stroke: 0.015em var(--color100);
}


/*********************************\
              BUTTONS
\*********************************/
.button, 
.wc-block-components-button:not(.is-link), 
.woocommerce a.added_to_cart, 
.wp-block-button__link, 
button, 
input[type=button], 
input[type=reset], 
input[type=submit],
#add_payment_method .wc-proceed-to-checkout a.checkout-button, 
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button, 
.woocommerce-checkout .wc-proceed-to-checkout a.checkout-button {
    font-size: var(--size-button);
    line-height: 1.4;
    font-weight: 600;
    padding: 0.625em 1.5em;
    gap: .5em;
    text-transform: uppercase;
    transition: all .4s ease;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;

    .button_icon {
        font-size: 1.125em;
        line-height: 1;
    }

    &.line-button {
        .button_label_hover {
            left: 0;
        }

        &:hover {
            box-shadow: none !important;
        }
    }

    .frinsasolo-up-right-arrow {
        display: inline-block;
        transition: all .4s ease;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        -ms-transition: all .4s ease;
        -o-transition: all .4s ease;
    }

    .button_label {
        transition: all .4s ease;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        -ms-transition: all .4s ease;
        -o-transition: all .4s ease;
    }

    .button_label_hover {
        position: absolute;
        width: max-content;
        opacity: 0;
        left: 1.5em;
        transform: translateY(100%);
        -webkit-transform: translateY(100%);
        -moz-transform: translateY(100%);
        -ms-transform: translateY(100%);
        -o-transform: translateY(100%);
        transition: all .4s ease;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        -ms-transition: all .4s ease;
        -o-transition: all .4s ease;
    }

    &.single_add_to_cart_button {
        .button_label_hover {
            left: 50%;
            transform: translate(-50%, 100%);
            -webkit-transform: translate(-50%, 100%);
            -moz-transform: translate(-50%, 100%);
            -ms-transform: translate(-50%, 100%);
            -o-transform: translate(-50%, 100%);
        }

        &:hover .button_label_hover {
            transform: translate(-50%, 0);
            -webkit-transform: translate(-50%, 0);
            -moz-transform: translate(-50%, 0);
            -ms-transform: translate(-50%, 0);
            -o-transform: translate(-50%, 0);
        }
    }

    &.button_left {
        .button_label_hover {
            right: 1.5em;
            left: auto;
        }
    }
    
    &:hover {
        .frinsasolo-up-right-arrow {
            transform: rotate(405deg);
            -webkit-transform: rotate(405deg);
            -moz-transform: rotate(405deg);
            -ms-transform: rotate(405deg);
            -o-transform: rotate(405deg);
        }

        .button_label {
            opacity: 0;
            transform: translateY(-100%);
            -webkit-transform: translateY(-100%);
            -moz-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
            -o-transform: translateY(-100%);
        }

        .button_label_hover {
            opacity: 1;
            transform: translateY(0);
            -webkit-transform: translateY(0);
            -moz-transform: translateY(0);
            -ms-transform: translateY(0);
            -o-transform: translateY(0);
        }
    }
}


/*********************************\
            COMPLIANZ
\*********************************/
/* Cookies button */
body #cmplz-manage-consent .cmplz-manage-consent {
    right: unset !important;
    left: 10px;
    font-size: 0px;
    bottom: 10px !important;
    padding: 0 !important;
    min-width: 1px;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;

    &:before {
        content: "";
        width: 60%;
        height: 60%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.8s ease;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -webkit-transition: all 0.8s ease;
        -moz-transition: all 0.8s ease;
        -ms-transition: all 0.8s ease;
        -o-transition: all 0.8s ease;
    }

    &:hover:before {
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
    }
}

/* Cookies banner */
#cmplz-cookiebanner-container {
    .cmplz-body {
        scrollbar-width: none;

        p {
            font-size: var(--size-psmall);
            line-height: 1.6;
        }
    }

    .cmplz-cookiebanner {
        grid-row-gap: 5px;
        padding: 20px;
    }

    .cmplz-header {
        display: none;
    }   

    p {
        margin: 0;
    }   
    
    .cmplz-buttons .cmplz-btn {
        letter-spacing: 0;
        font-size: var(--size-psmall) !important;
        line-height: 1.2 !important;
        text-transform: none;
        justify-content: center;
        height: auto;
    }
    
    .cmplz-categories .cmplz-category {
        &:not(:last-child) {
            margin-bottom: 5px;
        }

        .cmplz-category-header .cmplz-category-title,
        .cmplz-description > span { 
            font-size: var(--size-psmall);
            line-height: 1; 
        }

        .cmplz-category-header .cmplz-always-active {
            font-size: 10px;
            line-height: 1;
        }
    }
}


/*********************************\
              HEADER
\*********************************/
/* WPML */
.wpml-ls-legacy-list-horizontal {
    display: block;

    .wpml-ls-native {
        margin: 0 !important;
    }

    .wpml-ls-display {
        display: none !important;
    }
}

/* Megamenu */
.mfn-megamenu-tmpl-builder {
    --mfn-column-gap-right: 0px;
    --mfn-column-gap-left: 0px;
    --mfn-column-gap-bottom: 0px;
    --mfn-column-gap-top: 0px;
}

.mfn-header-menu li.mfn-menu-item-has-megamenu {
    .mfn-menu-item-megamenu {
        display: none !important;
        transition: display .6s ease allow-discrete;
        -webkit-transition: display .6s ease allow-discrete;
        -moz-transition: display .6s ease allow-discrete;
        -ms-transition: display .6s ease allow-discrete;
        -o-transition: display .6s ease allow-discrete;
                                        
        .mfn-megamenu-tmpl-builder {
            padding: 0;
            opacity: 0;
            transition: opacity .6s ease, display .6s ease allow-discrete;
            -webkit-transition: opacity .6s ease, display .6s ease allow-discrete;
            -moz-transition: opacity .6s ease, display .6s ease allow-discrete;
            -ms-transition: opacity .6s ease, display .6s ease allow-discrete;
            -o-transition: opacity .6s ease, display .6s ease allow-discrete;
        }
    
        .mfn-megamenu-overlay {
            position: absolute;
            height: 100vh;
            width: 100%;
            backdrop-filter: blur(0px);
            top: 100%;
            left: 0;
            transition: backdrop-filter .6s ease, background .6s ease, display .6s ease allow-discrete;
            -webkit-transition: backdrop-filter .6s ease, background .6s ease, display .6s ease allow-discrete;
            -moz-transition: backdrop-filter .6s ease, background .6s ease, display .6s ease allow-discrete;
            -ms-transition: backdrop-filter .6s ease, background .6s ease, display .6s ease allow-discrete;
            -o-transition: backdrop-filter .6s ease, background .6s ease, display .6s ease allow-discrete;
        }
    }

    &.hover-megamenu {
        .mfn-menu-item-megamenu {
            display: block !important;

            .mfn-megamenu-tmpl-builder {
                opacity: 1;

                @starting-style {
                    opacity: 0;
                }   
            }
    
            .mfn-megamenu-overlay {
                backdrop-filter: blur(8px);
            }
        } 
    }
}

.mfn-global-section {
    .mfn-header-menu li.mfn-menu-item-has-megamenu {
        .mfn-menu-item-megamenu {
            padding-top: 6px !important;
        }
    }
}


/*********************************\
              FOOTER
\*********************************/
/* Footer template */
.mfn-footer-tmpl {
    .mcb-section:not(.full-width) {
        max-width: 100%;
    }
}

/* Footer icon box */
.mfn-icon-box {
    .link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: var(--size-button);
        line-height: 1.4;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: -0.02em;
        color: var(--color600);
        transition: all .4s ease;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        -ms-transition: all .4s ease;
        -o-transition: all .4s ease;
        
        .link-icon {
            font-size: round(calc( var(--size-p) * 1.17 ), 1px);
            line-height: 1;
            transition: transform .5s ease;
            -webkit-transition: transform .5s ease;
            -moz-transition: transform .5s ease;
            -ms-transition: transform .5s ease;
            -o-transition: transform .5s ease;
        }
    }

    &:hover {
        .link {
            color: var(--orange);
            
            .link-icon {
                transform: rotate(405deg);
                -webkit-transform: rotate(405deg);
                -moz-transform: rotate(405deg);
                -ms-transform: rotate(405deg);
                -o-transform: rotate(405deg);
            }
        }
    }
}

.column.be_icon_box_2_gu91e51 .title {
    font-family: var(--font-titles);
    font-size: var(--size-h4);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0;
}

/* Footer menu */
.footer-menu {
    flex: 1;

    .mfn-footer-menu {
        width: fit-content;
    }
}

/* Popup */
.mfn-popup-tmpl {
    .section_wrapper {
        padding: 0;
    }

    &.mfn-popup-animate-zoom-in.mfn-popup-active {
        animation-duration: 1s;
    }

    .mfn-popup-tmpl-content-wrapper {
        scrollbar-width: thin;
    }
}


/*********************************\
           FORMULARIOS
\*********************************/
.wpcf7-form {
    input[name="politica"] + span {
        font-weight: 500;

        a {
            color: inherit;
            text-decoration: underline;

            &:hover {
                color: var(--orange);
                text-decoration: none;
            }
        }
    }

    input[type="checkbox"] {
        min-height: 0px;
    }

    .wpcf7-list-item {
        margin: 0;
    }

    .wpcf7-spinner {
        margin: 5px 0 0 -12px;
        left: 50%;
    }

    .form-legal {
        padding: 24px 0 0;

        p {
            font-size: var(--size-psmall);
            line-height: 1.4;
            margin: 0;
        }
    }

    .form-row {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 0 18px;

        .full-width {
            grid-column: auto / span 6;
        }

        .half-width {
            grid-column: auto / span 3;

            @media only screen and (max-width: 540px) {
                grid-column: auto / span 6;
            }
        }

        .third-width {
            grid-column: auto / span 2;

            @media only screen and (max-width: 540px) {
                grid-column: auto / span 6;
            }
        }
    }
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--orange);
}

input[type=date], 
input[type=email], 
input[type=number], 
input[type=password], 
input[type=search], 
input[type=tel], 
input[type=text], 
input[type=url], 
select, 
textarea {
    width: 100%;
    padding: 10px 16px;
    margin: 0;
    font-family: var(--font-text);
}

.dnd-upload-status {
    align-items: end;

    .dnd-upload-details {
        .name {
            color: var(--color500);
        
            em {
                color: var(--color300);
            }
        }
    
        .remove-file span {
            color: var(--color500);
            border: 1px solid var(--color500);
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--size-psmall);
            width: 1.4em;
            height: 1.4em;
    
            &:after {
                content: "\e90d";
                font-family: 'frinsasolo' !important;
                speak: never;
                font-style: normal;
                font-weight: normal;
                font-variant: normal;
                text-transform: none;
                line-height: 1;
                -webkit-font-smoothing: antialiased;
                background: none;
                width: auto;
                height: auto;
            }
    
            &.deleting {
                width: auto;
                height: auto;
                border: 0;
                border-radius: 0;
                -webkit-border-radius: 0;
                -moz-border-radius: 0;
                -ms-border-radius: 0;
                -o-border-radius: 0;
            }
        }

        .dnd-progress-bar span {
            background: var(--orange);
        }
    }

    .dnd-upload-image span.file {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        height: auto;
        width: auto;
        font-size: var(--size-plead);
        color: var(--color500);

        &:before {
            content: "\e935";
            font-family: 'frinsasolo' !important;
            speak: never;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
        }
    }
}

.wpcf7 form .wpcf7-response-output {
    border: solid 1px var(--orange) !important;
    margin: 24px 0 0;
    background: var(--color600);
    color: var(--orange);
    padding: 10px 16px;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
}


/*********************************\
              OTROS
\*********************************/
/* Full width text banner */
.be_heading_d1d50ax8 {
    .title {
        font-size: min(200px, 16vw);
        text-wrap: balance;
    }
}


/*********************************\
            RESPONSIVE
\*********************************/
@media(max-width: 1239px){

    /*GENERAL*/
    .be_heading_d1d50ax8 {
        .title {
            font-size: min(200px, 14vw);
        }
    }
}
@media only screen and (max-width: 959px) {
    .animate {
        animation-delay: 0ms !important;
    }

    .mfn-header-tmpl-burger-sidebar-opened #pojo-a11y-toolbar { 
        display: none; 
    }
}

@media only screen and (max-width: 767px) {
    .hideMobile {
        display: none !important;
    }

    .style-simple .responsiveWidth {
        max-width: 670px;
        padding: 0 33px;
    }

    .section_wrapper, 
    .container {
        padding-left: 0;
        padding-right: 0;
    }

    .content_wrapper .mcb-column-inner {
        margin: 0;
    }
}