/*
Theme Name: Réservation de bus - ST FLOUR CO
Author: Anthony & Solène, Les Imageurs
Description: Template créé pour le site de Saint Flour Communauté
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: saint-flour

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/*####################
##### VARIABLES ########
######################*/

:root {
    /* Colors */
    --cl-white: #fff;
    --cl-blue: #312783;
    --cl-lightblue: #D2E1E7;
    --cl-green: #009d91;
    --cl-gray: #d2e1e7;
    --cl-darkgray: #6E6A89;

}

/* Reset */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-size: 16px;
    font-family: "Heebo", sans-serif;
    color: #293133;
    padding-bottom:87px;
    background-color:#fff;
    position:relative;
    min-height:100vh;
}

body.no-scroll{overflow:hidden;}


h1, h2{font-family:"Heebo";}


.hidden{display:none;}


.has-blue-color{color:var(--cl-blue);}
.has-darkgray-color{color:var(--cl-darkgray);}

.page-int{width:100%; margin:0 auto; max-width:100%; overflow:hidden;}

.home-banner-desktop{display:none;}


#main_nav{position:fixed; bottom:0; left:0; width:100%; background-color:var(--cl-blue); color:var(--cl-white); border-radius:25px 25px 0 0; overflow:hidden; padding:10px;}
#main_nav ul{display:flex; list-style:none; text-align:center; gap:1px;}
#main_nav li{flex-basis:20%; border-radius:15px; flex-shrink:0;}
#main_nav li.active, #main_nav li:hover{background-color:#fff; color:#312783;}
#main_nav li.active a, #main_nav li:hover a{color:#312783;}
#main_nav li a{color:var(--cl-white); text-decoration:none;}
#main_nav li a, #main_nav li span{display:block; padding:10px; font-size:90%;}
#main_nav li a:before, #main_nav li span:before{content:""; display:block; width:24px; height:24px; margin:0 auto 5px; background-repeat:no-repeat; background-attachment:scroll; background-position:center;}
#main_nav li a.main_nav__resa:before{background-image:url(images/bus_white.svg);}
#main_nav li.active a.main_nav__resa:before, #main_nav li:hover a.main_nav__resa:before{background-image:url(images/bus_blue.svg);}
#main_nav li a.main_nav__compte:before{background-image:url(images/account_white.svg);}
#main_nav li.active a.main_nav__compte:before, #main_nav li:hover a.main_nav__compte:before{background-image:url(images/account_blue.svg);}
#main_nav li a.main_nav__aide:before{background-image:url(images/aide_white.svg);}
#main_nav li.active a.main_nav__aide:before, #main_nav li:hover a.main_nav__aide:before{background-image:url(images/aide_blue.svg);}
#main_nav li a.main_nav__cgv:before{background-image:url(images/cgv_white.svg);}
#main_nav li:hover a.main_nav__cgv:before, #main_nav li.active a.main_nav__cgv:before{background-image:url(images/cgv_blue.svg);}
#main_nav li span.cart-opener{position:relative;}
#main_nav li span.cart-opener sup{position:absolute; top:0; right:5px; height:20px; width:20px; display:flex; justify-content:center; align-items:center; background-color:var(--cl-green); color:#fff; border-radius:50%;}
#main_nav li span.cart-opener:before{background-image:url(images/cart_white.svg);}
#main_nav li:hover span.cart-opener:before{background-image:url(images/cart_blue.svg);}

@media all and (max-width:350px){
    #main_nav li a, #main_nav li span{padding:7px; font-size:75%;}
}

.cart-container{position:fixed; top:100%; left:0; width:100%; height:100%; transition:0.5s all ease 0s; background-color:rgba(0,0,0,0.7); padding:15px; z-index:1;}
.cart-container.on{top:0;}
.close-cart{display:block; margin-bottom:10px; color:#fff; font-size:130%; text-align:right;}
.widget_shopping_cart{display:block; width:400px; max-width:100%; max-height:calc(90vh - 30px); overflow-y:scroll; background-color:#fff; border-radius:15px; margin:0 auto;}
.widget-title{background-color:var(--cl-lightblue); padding:15px; border-radius:15px 15px 0 0;}
.widget_shopping_cart_content{padding:30px 15px 15px;}

.woocommerce.widget_shopping_cart .cart_list li.mini_cart_item{margin-bottom:30px; border:1px solid var(--cl-lightblue); border-radius:10px; padding:0;}
.mini_cart_item img{display:none;}
.woocommerce.widget_shopping_cart .cart_list li a.remove{left:auto; top:20px; right:10px; font-size:100%;}
.woocommerce.widget_shopping_cart .cart_list li a.remove:hover{background-color:#fff; color:var(--cl-blue) !important;}
.cart__infos{padding:15px;}
.cart__resa-date{color:var(--cl-blue); font-size:120%; font-weight:bold;}
.cart__resa-date i{display:inline-block; margin-right:7px; font-weight:400;}
.cart__resa-title{color:var(--cl-blue);  margin-bottom:15px;}
.cart__resa-title:before{content:""; margin-right:7px; display:inline-block; width:15px; height:15px; background:url(images/bus_blue.svg) scroll no-repeat center / contain;}
.cart__columns{display:flex; gap:2em; margin-bottom:10px; border-top:1px solid var(--cl-lightblue); padding-top:10px;}
.cart__column{flex-basis:50%; flex-shrink:0; color:var(--cl-darkgray);}
.cart__heure{font-size:110%; color:#000;}
.cart__arret_name{font-size:80%;}
.cart__arret_name i{font-size:80%; display:inline-block; margin-right:5px;}
.cart__details{background-color:var(--cl-lightblue); color:#000; padding:15px; border-radius:0 0 10px 10px; display:flex; justify-content:space-between;}

.woocommerce.widget_shopping_cart .total{border-top:1px solid var(--cl-lightblue); padding-top:15px; margin-bottom:15px;}
.woocommerce-mini-cart__buttons a.checkout{display:block; width:100%; border-radius:15px; background-color:var(--cl-green); color:#fff; border:1px solid var(--cl-green); text-align:center; padding:15px;}
.woocommerce.widget_shopping_cart .buttons a{margin-bottom:50px;}
.woocommerce-mini-cart__buttons a.checkout:hover{background-color:#fff; color:var(--cl-green);}

footer{display:none;}

@media all and (min-width:782px){

    .page-int{width:400px; margin:0 auto; max-width:100%; overflow:hidden;}

    #main_nav{display:none;}
    
    .home-banner-desktop{display:flex; padding:30px 30px 0; background-color:var(--cl-blue); color:#fff; border-radius:0 0 50px 50px; justify-content:space-between; flex-wrap:wrap; gap:2em 1em; margin-bottom:30px; font-size:80%;}
    .home-banner-desktop.logout{justify-content:center;}
    .home-banner-desktop .logo-mobilite, .home-banner-desktop .logo-region{height:35px; width:auto;}
    .home-banner-desktop .deco{flex-basis:100%; text-align:center;}
    .home-banner-desktop .deco img{display:block; margin:0 auto;}

    /* Menu */
    .home-banner-desktop ul li{display:inline-block; margin-right:0;}
    .home-banner-desktop ul li a, .home-banner-desktop ul li span{color:#fff; text-decoration:none; padding:5px 10px 5px 25px; border-radius:10px;} 
    .home-banner-desktop ul li span{padding:5px 10px; cursor:pointer;} 
    .home-banner-desktop ul li:last-child span{padding-left:8px;} 
    .home-banner-desktop ul li.active a, .home-banner-desktop ul li.active span, .home-banner-desktop ul li a:hover, .home-banner-desktop ul li span:hover{background-color:#fff; color:var(--cl-blue);}
   
    .desktop_menu__resa{background:url(images/bus_white.svg) no-repeat 7px center / auto 13px;}
    li.active .desktop_menu__resa, .desktop_menu__resa:hover{background-image:url(images/bus_blue.svg)}

    .desktop_menu__aide{background:url(images/aide_white.svg) no-repeat 7px center / auto 13px;}
    li.active .desktop_menu__aide, .desktop_menu__aide:hover{background-image:url(images/aide_blue.svg)}

    .desktop_menu__cgv{background:url(images/cgv_white.svg) no-repeat 7px center / auto 13px;}
    li.active .desktop_menu__cgv, .desktop_menu__cgv:hover{background-image:url(images/cgv_blue.svg)}

    .desktop_menu__compte{background:url(images/account_white.svg) no-repeat 7px center / auto 13px;}
    li.active .desktop_menu__compte, .desktop_menu__compte:hover{background-image:url(images/account_blue.svg)}

    .home-banner-desktop .cart-opener{position:relative;}    
    .home-banner-desktop .cart-opener:before{content:""; display:inline-block; width:16px; height:16px; margin:0 5px 0 0; background:url(images/cart_white.svg) no-repeat scroll center / contain;}
    .home-banner-desktop .cart-opener:hover:before{background-image:url(images/cart_blue.svg);}
    .home-banner-desktop .cart-opener sup{position:absolute; top:-5px; left:18px; height:16px; width:16px; font-size:60%; display:flex; justify-content:center; align-items:center; background-color:var(--cl-green); color:#fff; border-radius:50%;}

    .home-banner-desktop__logo{position:relative; display:flex; gap:4em;}
    .home-banner-desktop__logo:before{content:""; position:absolute; top:0; left:44%; translate:-50% 0; height:100%; width:1px; background-color:#fff;}

    .widget_shopping_cart_content{font-size:80%;}

    footer{position:absolute; left:0; bottom:0; width:100%; display:flex; padding:0 10vw; justify-content:space-between;}
} 

@media all and (min-width:992px){
    .home-banner-desktop{padding:30px 50px 0;}
    .home-banner-desktop .logo-mobilite, .home-banner-desktop .logo-region{height:40px;}

    .home-banner-desktop ul li{margin-right:10px;}
    .home-banner-desktop ul li a, .home-banner-desktop ul li span{padding:5px 10px 5px 35px;} 
    .desktop_menu__resa, .desktop_menu__aide, .desktop_menu__cgv, .desktop_menu__compte{background-position:10px center; background-size:auto 18px;}

}

@media all and (min-width:1200px){
    .home-banner-desktop{padding:30px 80px 0;}
    .home-banner-desktop ul li{margin-right:20px;}
}

@media all and (min-width:1300px){
    .home-banner-desktop{padding:30px 120px 0;}
}