/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Segoe UI", Arial, sans-serif;
}



/* SFONDO */

body{

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    background:
    linear-gradient(135deg,#fffaf2,#ead7bb);

    overflow:hidden;

}



/* SFERE ANIMATE */

body::before{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    background:#d8c1a0;

    border-radius:50%;

    top:-180px;
    left:-150px;

    opacity:.35;

    filter:blur(5px);

    animation:onda 10s infinite alternate;

}



body::after{

    content:"";

    position:absolute;

    width:400px;
    height:400px;

    background:#c8aa7d;

    border-radius:50%;

    bottom:-150px;
    right:-150px;

    opacity:.25;

    filter:blur(10px);

    animation:onda2 12s infinite alternate;

}



@keyframes onda{

from{
transform:translate(0,0) rotate(0deg);
}

to{
transform:translate(80px,100px) rotate(180deg);
}

}



@keyframes onda2{

from{
transform:translate(0,0);
}

to{
transform:translate(-80px,-60px);
}

}



/* BOX LOGIN */

.login{


position:relative;

z-index:2;


width:420px;

padding:45px;


background:rgba(255,255,255,.75);


border-radius:30px;


backdrop-filter:blur(20px);



box-shadow:

0 25px 60px rgba(0,0,0,.18);



animation:

entrata .8s ease;

}



/* ENTRATA */

@keyframes entrata{


from{

opacity:0;

transform:

translateY(60px)
scale(.85);

}


to{

opacity:1;

transform:

translateY(0)
scale(1);

}


}



/* TITOLO */


.login h2{


text-align:center;


font-size:34px;


color:#5b4630;


margin-bottom:35px;


letter-spacing:2px;


}



/* INPUT */


.login input{


width:100%;


padding:16px 20px;


margin-bottom:20px;


border:none;


outline:none;


border-radius:18px;


background:#fffaf4;


font-size:16px;



color:#5b4630;



box-shadow:

0 5px 15px rgba(0,0,0,.08);



transition:.35s;

}




.login input:hover{

transform:translateY(-2px);

}



.login input:focus{


background:white;


transform:scale(1.04);



box-shadow:

0 0 0 4px rgba(200,170,125,.35);


}



/* BUTTON */


.login button{


width:100%;


padding:16px;


border:none;


border-radius:20px;


cursor:pointer;


font-size:18px;


font-weight:bold;



color:white;



background:

linear-gradient(
135deg,
#c8aa7d,
#a9875b
);



box-shadow:

0 12px 25px rgba(169,135,91,.4);



transition:.35s;



}



.login button:hover{


transform:

translateY(-5px)
scale(1.03);



box-shadow:

0 20px 35px rgba(169,135,91,.55);



}



.login button:active{


transform:scale(.95);


}



/* DASHBOARD */

.dashboard{


position:relative;

z-index:2;


width:900px;


padding:40px;


background:white;


border-radius:30px;


box-shadow:

0 25px 60px rgba(0,0,0,.15);



animation:entrata .8s ease;


}



/* TABELLA */


table{


width:100%;

border-collapse:collapse;

margin-top:25px;


border-radius:20px;

overflow:hidden;

}



th{


background:#c8aa7d;

color:white;

padding:15px;


}



td{


padding:15px;

text-align:center;


border-bottom:1px solid #eee;


}



tr{


transition:.3s;

}



tr:hover{


background:#faf3e8;

transform:scale(1.01);


}
/* FRECCIA INDIETRO SOPRA HEADER */

.back-button{

    position:fixed;

    top:90px;
    left:25px;


    width:70px;
    height:70px;


    display:flex;

    justify-content:center;

    align-items:center;


    background:

    linear-gradient(
        135deg,
        #c8aa7d,
        #9b7748
    );


    border-radius:50%;


    cursor:pointer;


    z-index:99999;


    box-shadow:

    0 15px 35px rgba(0,0,0,.35);


    transition:.35s;


    animation:backIn .8s ease;

}



/* freccia disegnata */

.back-button span{


    width:28px;

    height:28px;


    border-left:5px solid white;

    border-bottom:5px solid white;


    transform:

    rotate(45deg)

    translate(5px,-5px);


}




.back-button:hover{


    transform:

    translateX(-8px)
    scale(1.12);


    box-shadow:

    0 20px 45px rgba(0,0,0,.45);


}



.back-button:active{


    transform:scale(.85);


}




@keyframes backIn{


from{

opacity:0;

transform:

translateX(-80px)
rotate(-180deg);

}


to{

opacity:1;

transform:

translateX(0)
rotate(0);

}


}





@media(max-width:600px){


.back-button{


    top:85px;

    left:20px;


    width:65px;

    height:65px;


}


}
#adminBox{


display:none;


position:fixed;


top:20px;

right:25px;


background:#111;


color:white;


padding:12px 25px;


border-radius:12px;


font-family:Poppins;


font-weight:600;


cursor:pointer;


z-index:99999;


}



#adminBox:hover{


background:#333;


transform:scale(1.05);


transition:0.3s;


}
/* IMPORT FONT */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');


.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 75px;

    background: #ffffff;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 60px;
    box-sizing: border-box;

    z-index: 1000;

    animation: scendi 0.8s ease;
}


/* ANIMAZIONE ENTRATA */
@keyframes scendi {

    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }

}



/* LOGO */

.logo-bar img {

    height: 45px;

    transition: 0.4s ease;

}


.logo-bar img:hover {

    transform: scale(1.08);

}



/* MENU */

nav {

    display: flex;
    gap: 45px;

}


nav a {

    position: relative;

    text-decoration: none;

    color: #333333;

    font-family: 'Montserrat', sans-serif;

    font-size: 15px;

    font-weight: 500;

    letter-spacing: 0.5px;

    transition: 0.3s ease;

}



/* LINEA SOTTO AL PASSAGGIO */

nav a::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -8px;

    width: 0%;

    height: 2px;

    background: #b99a6b;

    transform: translateX(-50%);

    transition: 0.4s ease;

}


nav a:hover {

    color: #b99a6b;

}


nav a:hover::after {

    width: 100%;

}



/* SPAZIO PER NON COPRIRE IL LOGIN */

.login {

    margin-top: 120px;

}
/* BOX ADMIN DOPO LOGIN */

.admin-box{

    background: linear-gradient(
        135deg,
        #c8aa7d,
        #9b7748
    ) !important;


    color:white !important;


    padding:10px 28px;


    border-radius:30px;


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


    transition:.35s ease;


    display:inline-flex;

    align-items:center;

    justify-content:center;

}




.admin-box:hover{


    transform:translateY(-4px) scale(1.05);


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


}
/* BOX ADMIN + ESCI */

.admin-area{
    display:flex;
    align-items:center;
    gap:10px;
}


.admin-box{

    background:#c8aa7d;

    color:white !important;

    padding:12px 25px;

    border-radius:30px;

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

    transition:.3s;

}


.admin-box:hover{

    transform:translateY(-3px);

}



/* BOX ROSSO ESCI */

#logoutBtn{

    display:none;

    border:none;

    background:#d9534f;

    color:white;

    padding:12px 25px;

    border-radius:30px;

    font-family:'Poppins';

    font-size:15px;

    cursor:pointer;

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

    transition:.3s;

}


#logoutBtn:hover{

    background:#b52b27;

    transform:translateY(-3px);

}
/* IMPORT FONT */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');


/* NAVBAR */

.navbar {

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:75px;

    background:#ffffff;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 60px;

    box-sizing:border-box;

    z-index:1000;

    animation:scendi .8s ease;

}



/* ANIMAZIONE */

@keyframes scendi {

    from{

        transform:translateY(-100%);

        opacity:0;

    }


    to{

        transform:translateY(0);

        opacity:1;

    }

}



/* LOGO COMPLETO */

.logo-bar {

    display:flex;

    align-items:center;

    gap:15px;

}



/* IMMAGINE LOGO */

.logo-bar img {

    height:55px;

    width:auto;

    transition:.4s ease;

}



.logo-bar img:hover {

    transform:scale(1.08);

}



/* SCRITTA G&F BarberStreet */

.logo-bar span {

    font-family:'Montserrat', sans-serif;

    font-size:32px;

    font-weight:800;

    letter-spacing:1px;

    color:#d49a4c;

}



/* MENU */

nav {

    display:flex;

    gap:45px;

}



nav a {

    position:relative;

    text-decoration:none;

    color:#333333;

    font-family:'Montserrat',sans-serif;

    font-size:15px;

    font-weight:500;

    letter-spacing:.5px;

    transition:.3s ease;

}



/* LINEA SOTTO */

nav a::after {

    content:"";

    position:absolute;

    left:50%;

    bottom:-8px;

    width:0%;

    height:2px;

    background:#d49a4c;

    transform:translateX(-50%);

    transition:.4s ease;

}



nav a:hover {

    color:#d49a4c;

}



nav a:hover::after {

    width:100%;

}



/* AREA ADMIN */

.admin-area {

    display:flex;

    align-items:center;

    gap:10px;

}



.admin-box {

    background:linear-gradient(
        135deg,
        #c8aa7d,
        #9b7748
    );

    color:white!important;

    padding:12px 25px;

    border-radius:30px;

    font-family:'Montserrat',sans-serif;

    font-weight:600;

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

    transition:.3s;

}



.admin-box:hover {

    transform:translateY(-3px) scale(1.05);

}



/* LOGOUT */

#logoutBtn {

    display:none;

    border:none;

    background:#d9534f;

    color:white;

    padding:12px 25px;

    border-radius:30px;

    font-family:'Montserrat',sans-serif;

    font-size:15px;

    cursor:pointer;

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

    transition:.3s;

}



#logoutBtn:hover {

    background:#b52b27;

    transform:translateY(-3px);

}



/* MOBILE */

@media(max-width:600px){


    .navbar{

        padding:0 20px;

    }


    .logo-bar span{

        font-size:24px;

    }


    .logo-bar img{

        height:45px;

    }


    nav{

        gap:15px;

    }


}
/* FONT */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');



/* NAVBAR */

.navbar {

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:75px;

    background:white;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 60px;

    z-index:1000;

}



/* LOGO AREA */

.logo-bar {

    display:flex;

    align-items:center;

    gap:15px;

}



/* IMMAGINE LOGO */

.logo-bar img {

    height:50px;

    width:auto;

}



/* SCRITTAG&F BarberStreet */

.logo-bar span {

    font-family:'Montserrat',sans-serif;

    font-size:30px;

    font-weight:700;

    color:#c79b62;

    letter-spacing:.5px;

}



/* MENU */

nav {

    display:flex;

    align-items:center;

    gap:45px;

}



nav a {

    text-decoration:none;

    color:#222;

    font-family:'Montserrat',sans-serif;

    font-size:15px;

    font-weight:600;

    letter-spacing:.4px;

}



/* HOVER */

nav a:hover {

    color:#c79b62;

}



/* MOBILE */

@media(max-width:700px){


.navbar{

    padding:0 30px;

}


.logo-bar span{

    font-size:30px;

}


.logo-bar img{

    height:40px;

}


nav{

    gap:30px;

}


nav a{

    font-size:20px;

}

}
/* =================================
   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;


}



}
#notificaBox{

position:fixed;
top:90px;
right:20px;

background:#c9a46b;
color:white;

padding:20px;
border-radius:15px;

box-shadow:0 10px 30px #0003;

display:none;

z-index:9999;

font-family:Poppins;

}