/* ===========================
   G&F BarberStreet - Prenota
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background:#f7f3ed;
    color:#222;
}

/* HEADER */

header{
    width:100%;
    background:#fff;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
    position:sticky;
    top:0;
    z-index:999;
}

.container{
    width:95%;
    max-width:1400px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:80px;
}

.logo{
    display:flex;
    align-items:center;
    gap:15px;
}

.logo img{
    width:55px;
}

.logo h2{
    color:#b88b4a;
    font-size:28px;
}

nav{
    display:flex;
    gap:30px;
}

nav a{
    text-decoration:none;
    color:#333;
    font-weight:600;
    transition:.3s;
}

nav a:hover,
nav .active{
    color:#b88b4a;
}

/* PAGINA */

.booking{

    width:95%;

    max-width:1450px;

    margin:40px auto;

    display:grid;

    grid-template-columns:1.4fr .8fr;

    gap:35px;

}

/* CALENDARIO */

.calendar-box{

    background:#fff;

    border-radius:20px;

    padding:35px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

}

.calendar-box h1{

    margin-bottom:25px;

}

.calendar-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.calendar-header button{

    width:45px;

    height:45px;

    border:none;

    border-radius:12px;

    background:#c8a87b;

    color:white;

    cursor:pointer;

    font-size:22px;

    transition:.3s;

}

.calendar-header button:hover{

    transform:scale(1.08);

}

.weekdays{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    text-align:center;

    margin-bottom:15px;

    font-weight:600;

}

#calendar{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    gap:10px;

}

.day{

    height:70px;

    border-radius:15px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#f5f2ec;

    cursor:pointer;

    transition:.3s;

    font-weight:600;

}

.day:hover{

    background:#c8a87b;

    color:white;

}

.selected{

    background:#b88b4a !important;

    color:white;

}

.disabled{

    background:#ececec;

    color:#999;

    pointer-events:none;

}

/* ORARI */

.hour-title{

    margin-top:40px;

    margin-bottom:20px;

}

#hours{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:12px;

}

.hour{

    padding:15px;

    border-radius:12px;

    border:none;

    background:#f5f2ec;

    cursor:pointer;

    font-weight:600;

    transition:.3s;

}

.hour:hover{

    background:#c8a87b;

    color:white;

}

.hour.active{

    background:#b88b4a;

    color:white;

}

/* FORM */

.form-box{

    background:#fff;

    border-radius:20px;

    padding:35px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

}

.form-box h1{

    margin-bottom:30px;

}

.form-box label{

    display:block;

    margin-top:18px;

    margin-bottom:8px;

    font-weight:600;

}

.form-box input,

.form-box select{

    width:100%;

    padding:15px;

    border-radius:10px;

    border:1px solid #ddd;

    font-size:15px;

}

.price{

    text-align:center;

    margin:35px 0;

}

.price h1{

    color:#b88b4a;

    font-size:50px;

}

.form-box button{

    width:100%;

    padding:18px;

    border:none;

    border-radius:12px;

    background:#b88b4a;

    color:white;

    font-size:18px;

    cursor:pointer;

    transition:.3s;

}

.form-box button:hover{

    transform:translateY(-2px);

    background:#a6793d;

}

/* MOBILE */

@media(max-width:1100px){

.booking{

grid-template-columns:1fr;

}

}
#successPopup{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.6);

display:flex;

align-items:center;

justify-content:center;


opacity:0;

visibility:hidden;

transition:.4s;

z-index:9999;

}



#successPopup.show{

opacity:1;

visibility:visible;

}



.successBox{


background:white;

padding:40px;

border-radius:20px;

text-align:center;

width:350px;


transform:scale(.5);

}



#successPopup.show .successBox{


animation:popup .4s forwards;


}



.successIcon{


width:70px;

height:70px;


background:#16a34a;


color:white;


font-size:45px;


border-radius:50%;


display:flex;

justify-content:center;

align-items:center;


margin:auto;


}



@keyframes popup{


0%{

transform:scale(.5);

}


70%{

transform:scale(1.1);

}


100%{

transform:scale(1);

}


}
/* ===========================
   POPUP SUCCESSO
=========================== */


#successPopup{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;


background:rgba(0,0,0,.55);


display:flex;

align-items:center;

justify-content:center;


opacity:0;

visibility:hidden;


z-index:9999;


transition:.4s;


}



#successPopup.show{

opacity:1;

visibility:visible;

}





.successBox{


background:white;


width:450px;


padding:45px;


border-radius:25px;


text-align:center;


box-shadow:
0 25px 60px rgba(0,0,0,.35);



transform:scale(.3) translateY(100px);


}




#successPopup.show .successBox{


animation:popupSuccess .7s cubic-bezier(.17,.89,.32,1.49) forwards;


}





.successBox h2{


font-size:30px;


font-weight:700;


color:#b88b4a;


line-height:1.3;


}




.line{


width:90px;

height:3px;


background:#b88b4a;


margin:25px auto;


border-radius:20px;


}




.successBox p{


font-size:16px;


color:#666;


}





@keyframes popupSuccess{


0%{

transform:scale(.3) translateY(100px);

opacity:0;

}



60%{

transform:scale(1.15) translateY(-10px);

opacity:1;

}



100%{

transform:scale(1) translateY(0);

opacity:1;

}


}
#logoutBtn{

display:none;

background:#d9534f;

color:white;

border:none;

padding:9px 22px;

border-radius:25px;

font-family:'Poppins';

font-size:16px;

cursor:pointer;

box-shadow:0 8px 20px rgba(0,0,0,.25);

}
/* =================================
   FIX IPHONE / ANDROID DEFINITIVO
================================= */


*{
box-sizing:border-box;
}



html,body{

width:100%;
max-width:100%;
overflow-x:hidden;

}



@media(max-width:768px){



.navbar{

width:100% !important;

height:70px;

padding:0 15px !important;

display:flex;

justify-content:space-between;

}



.logo-bar span{

font-size:18px !important;

}



.logo-bar img{

height:28px !important;

}




.navbar nav{

gap:10px !important;

}



.navbar nav a{

font-size:12px !important;

}





.booking{


display:flex !important;

flex-direction:column !important;

width:100% !important;

padding:15px !important;

margin:0 !important;


}




.calendar-box,
.form-box{


width:100% !important;

max-width:100% !important;

margin:0 !important;

padding:20px !important;


}






.calendar-header{


width:100%;

display:flex;

justify-content:space-between;


}



.calendar-header h2{

font-size:20px;

}




.weekdays,
#calendar{


width:100%;

}



#calendar{


display:grid !important;

grid-template-columns:repeat(7,1fr) !important;

gap:5px !important;

}



#calendar button{


width:100% !important;

height:40px !important;

padding:0 !important;


}





#hours{


display:grid !important;

grid-template-columns:repeat(2,1fr) !important;

gap:10px;


}



#hours button{


width:100% !important;

height:45px;


}





.form-box input,
.form-box select{


width:100% !important;

}



.form-box button{


width:100% !important;


}



}