/*
Theme Name: 	MFM Digital
Theme URI: 		http://themes.muffingroup.com/betheme
Author: 		MFM Digital
Author URI: 	http://mfmdigital.com.com
Description:	MFM Digital Child Theme
Template:		betheme
Version: 		1.0.0
*/

/* Theme customization starts here
-------------------------------------------------------------- */

.column_heading.heading-underline h1{
    display:inline-block;
    position:relative;
    &::after{
        content:'';
        display:block;
        width:60%;
        height:1px;
        background-color: #000;
        position:absolute;
        bottom:-0.4em;
        left:20%
    }
}
.column_button .button{text-transform:uppercase;letter-spacing:0.15em}

.section.full-width .wrap.one .column_map.one .google-map-contact-wrapper{
	left:4vw;
	margin-left:0px;
	background-color:transparent;
	.get_in_touch{
		width:initial;
		max-width:400px;
		border-radius:16px;
		padding:30px
	}

	li.address{
		padding:0px;
		&>.icon{display:none}
		ul,li{
			list-style-type: disc;
      list-style-position: inside;
    }
		ul{margin-bottom:20px}
	}

	/* a[href^="tel:"]::before{
		display:inline-block;
		content:'';
		width:1em;
		height:1em;
		background-image:url(https://spa.mfmdigital.ovh/wp-content/uploads/2025/04/icon-phone.svg);
		background-repeat:no-repeat;
		background-size:contain;
		background-position:center;
		vertical-align:middle;
	} */
	p{margin-bottom:8px}

	li{padding:0}
	li::after{display:none}
}

#floating-whatsapp{
    position:fixed;
    bottom:10px;
    right:10px;
    img{
        width:60px;
        height:auto;
        display:block;
    }
}

.atouts-wraps{
	.wrap{
	padding:10px;
		&>div{

			padding:20px;
			.mcb-wrap-background-overlay{
				background-color:#ffffffd1;


			}
			.column:last-child{
				position:absolute;
				inset:0;
				backdrop-filter:blur(2px);
				background-color:#ffffffd1;
				.mcb-column-inner{display:grid;place-items:center;}
				transition:all ease-in-out .2s;
                padding:20px

			}
			&:not(:hover) .column:last-child{
					opacity:0
				}
		}

	}
}

#installations .side-installation{display:none}
#installations .question .answer img{ margin-top:20px;}
@media(min-width:768px){
#installations .side-installation{display:block}
#installations .question .answer img{display:none}

}
.faq .faq_wrapper{
	.question::before,.question::after{display:none}
	.question{
		background-color:transparent;
		padding-bottom:30px;
		border-bottom:solid 1px #333333;
		margin-top:40px;
		&>.title{
			padding: 0px;
			color:#000!important;
			font-family:"Baskervville",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
			font-size:50px;
			line-height:1.2em;
            &>.acc-icon-plus{
                &&::before{
                    content:'';
                    display:inline-block;
                    width:30px;
                    height:30px;
                    background-image: url(dist/img/icon-plus.svg);
                    background-repeat: no-repeat;
                    background-size:contain;
                    background-position: center;
                }
            }
            &>.acc-icon-minus{
                color:#333333;
                font-size:40px;
            }
		}
		.answer{padding:10px 0px 0px 10px}
		.num{display:none}
	}
}

section:has(.slider-formule-container){
    overflow:hidden
}
section.section:has(.sbr-owl-stage-outer){
    overflow:hidden
}
.sbr-owl-stage-outer{overflow:visible}
.sbr-owl-nav > div{top:100%;}
.sbr-owl-nav .sbr-owl-next{right:initial;left:50px}

.sb-post-item{
	display:grid;
	gap:10px;
	.sb-item-text{order:-1}
	.sb-item-provider-icon{display:none}
}

#spa-tarifs{

    .tabs-tarifs{
        display:flex;
        justify-content: center;
        gap:15px;
        flex-wrap:wrap;
        margin-bottom: 30px;
        button{
            display:inline-block;
            background-color:#fff;
            border:solid 1px #7C7C7C;
            color:#7C7C7C;
            border-radius:40px;
            font-size:16px;
            font-size:clamp(12px,1.6vw,18px);
            padding:0.8em 1.2em;
            &.active{
                color:#fff;
                background-color:#7C7C7C;
            }

        }
    }
    .spa-table{
        border-radius:10px;

        background-color:#33333380;
        border:solid 1px #fff;
        overflow:hidden;
        .spa-table_heading,
        .spa-table-row{
            display:grid;
            gap:1px;
            grid-template-columns:repeat(5,1fr);
            span{
                text-align:center;
                font-size:18px;
                line-height:80px;

            }
        }

        &>div{
            overflow:auto;
            &>div{
                min-width:680px;
            }
        }
        .spa-table-row{
            margin-top: 1px;
        }
        .spa-table-row span{
            background-color:#fff;
        }
        .spa-table_heading>span,
        .spa-table-row>span:first-child
        {
            background-color:#7C7C7C;
            color:#fff;
        }
    }
}


.forminator-ui.forminator-design--material.forminator-custom-form[data-design="material"]{
    input.forminator-input,
    textarea.forminator-textarea{
        background-color:#333333!important;
        padding-left:10px;
        color:#fff;
        border-radius:8px;
    }
    .forminator-field-text,
    .forminator-field-email,
    .forminator-field-name,
    .forminator-field-phone{
        .forminator-label{
            color:#fff;
            position:relative;
            z-index:4;
            left:10px;
            margin-bottom: 0;
        font-family: "Baskervville", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif!important;

        }
        .forminator-is_active .forminator-label,
        .forminator-is_filled .forminator-label
        {
            color:#333333;
            left:0px;
        }
    }

    .forminator-field-textarea{
        .forminator-label{
            color:#fff;
        font-family: "Baskervville", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif!important;

        }
    }

    .forminator-row:not(:last-child){
        margin-bottom:5px
    }
    .forminator-row-last{
        text-align:center
    }

    button.forminator-button-submit{
        background-color: var(--mfn-button-theme-bg);
        border-color: var(--mfn-button-theme-border-color);
        color: var(--mfn-button-theme-color);
        box-shadow: var(--mfn-button-theme-box-shadow);
        font-family: var(--mfn-button-font-family);
        font-size: var(--mfn-button-font-size);
        font-weight: var(--mfn-button-font-weight);
        font-style: var(--mfn-button-font-style);
        letter-spacing: var(--mfn-button-letter-spacing);
        line-height: 1.2;
        padding: var(--mfn-button-padding);
        border-width: var(--mfn-button-border-width);
        border-style: var(--mfn-button-border-style);
        border-radius: var(--mfn-button-border-radius);
    }
}

.button{
    .button_icon:has(.icon-right-thin){
        .icon-right-thin{display:none}
        width:23px;
        height:1em;
        background-image:url(dist/img/arrow-right-light.svg);
        background-size:contain;
        background-repeat: no-repeat;
        background-position:center left;
        display:inline-block;
        flex-shrink:0;

    }
    &.button_theme .button_icon:has(.icon-right-thin){
        background-image:url(dist/img/arrow-right-dark.svg);

    }
}

.social-sc{
    display:flex;
    justify-content: center;
    gap:8px;
    flex-wrap: wrap;
}

ul.reservation-list{
    li a{
        color:#000;
        text-decoration:underline
    }
    li:has(a[href*="maps"]),
    li:has(a[href*="mailto:"]),
    li:has(a[href*="tel:"]){
        padding-left:24px;
        background-image:url(dist/img/icon-map.png);
        background-size:17px;
        background-repeat: no-repeat;
        background-position:top 8px left;
        &:has(a[href*="mailto:"]){
         background-image:url(dist/img/icon-mail.png);
        }
        &:has(a[href*="tel:"]){
            background-image:url(dist/img/icon-phone.png);
           }
    }
}


.slider-formule-container{
    position:relative;
    &::after{
        content:'';
        display:block;
        height:100%;
        width:100vw;
        position:absolute;
        top:0;
        right:100%;
        background-color:#fcfcfc;
        z-index:4;
    }
    .swiper{
        width:100%;
        overflow:visible;


        .swiper-slide{
            width:300px;
            user-select: none;
            img{
                display:block;
                max-width:100%;
            }

            &>div:nth-child(2){
                opacity:1;
                transition:opacity ease-in-out 0.2s;
                /* position:absolute;
                inset:0;
                background-color:#ffffff8c; */
                padding:20px;
                /* text-align:center; */
                color:#000;
                display:flex;
                flex-direction: column;
                &p.lead{
                    text-transform: uppercase;
                }
                h4{
                    font-size: 24px;
                    font-weight: 400;
                }
                p{
                    line-height: 1.2em;;
                }
                .formule-desc{
                    /* margin-top:20px; */
                    margin-bottom:auto
                }
                p.price{
                    /* margin-bottom: 40px; */
                    font-weight:600;
                    font-size:16px;

                }


            }
            /* &:not(:hover)>div:nth-child(2){
                opacity:0
            } */
        }

    }
}

.spa-gallery{
   .swiper-slide img{
    display:block;
    width:100%;
    aspect-ratio:1;
    object-fit: cover;
    border-radius:8px;


   }
   .gallery-item{
    padding:0;
   }
   .swiper{
        width:100%;
    }
   .swiper-main{
    margin-bottom:20px
   }
   .swiper-thumbs .swiper-slide{
    padding:4px;
   }

}

#home-galleries{
    display:grid;
    gap:40px;
    &>div{
        min-width:0;
        position:relative;
        &>div:nth-child(1){
            position:absolute;
            inset:0;
            .swiper,.swiper-home-container{
                height:100%;
                img{
                    width:100%;
                    height:100%;
                    object-fit: cover;
                    object-position: center;
                    border-radius:16px;
                }
            }
        }
        &>div:nth-child(2){
            border-radius:16px;
            background-color:#00000030;
            padding:40px;
            padding-bottom:60px;
            min-height:350px;
            position:relative;
            z-index:2;
            color:#fff;
            font-size: 15px;
            font-weight:300;
            h3{
                color:#fff;
                font-size:52px;
                line-height:1.1em;
            }
            .content{
                margin-bottom: 20px;
            }

            .pagination{
                position:absolute;
                bottom:20px;
                right:20px;
                button{
                    background-color:#ffffffa4;
                    color:#000;
                    padding:8px;
                    border-radius:0px;
                    width:30px;
                    background-image:url(dist/img/arrow-right-dark.svg);
                    background-repeat: no-repeat;
                    background-size: 60%;
                    background-position:center;
                    &.prev{
                        transform:rotate(180deg)
                    }
                    &:hover{
                        background-color:#fff;
                    }
                }
            }

        }

        &:has(.swiper-slide:nth-child(1).swiper-slide-active) button.prev{opacity:0.2;pointer-events: none;}
        &:has(.swiper-slide:last-child.swiper-slide-active) button.next{opacity:0.2;pointer-events: none;}
    }
    .swiper{
        width:100%;
    }
    @media(min-width:1240px){
        grid-template-columns: 1fr 1fr;
    }
}