/* ======================================
   MIRROR MASTERS MASTER CALENDAR
====================================== */

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

body{
background:#050505;
color:white;
font-family:Arial,Helvetica,sans-serif;
}

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px;
background:#111;
border-bottom:1px solid #333;
position:sticky;
top:0;
z-index:1000;
}

.logo h1{
font-family:'Allura',cursive;
font-size:52px;
font-weight:normal;
}

.logo p{
margin-top:6px;
opacity:.7;
}

.topButtons{
display:flex;
gap:10px;
flex-wrap:wrap;
}

.topButtons button{
background:#1d1d1d;
border:1px solid #555;
color:white;
padding:10px 18px;
border-radius:30px;
cursor:pointer;
font-family:'Cinzel',serif;
transition:.25s;
}

.topButtons button:hover{
background:white;
color:black;
}

.toolbar{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:25px;
padding:20px;
background:#0d0d0d;
border-bottom:1px solid #222;
flex-wrap:wrap;
}

.toolbar label{
display:block;
margin-bottom:8px;
font-family:'Cinzel',serif;
}

.toolbar select,
.toolbar input{
width:260px;
padding:12px;
background:black;
color:white;
border:1px solid #555;
border-radius:12px;
}

.calendarContainer{
padding:20px;
height:calc(100vh - 210px);
overflow:auto;
}

#calendar{
background:#111;
border:1px solid #333;
border-radius:20px;
min-height:900px;
padding:25px;
}

.hidden{
display:none;
}

#floatingButton{
position:fixed;
bottom:95px;
right:25px;
width:72px;
height:72px;
border-radius:50%;
border:none;
background:white;
color:black;
font-size:42px;
cursor:pointer;
box-shadow:0 10px 25px rgba(0,0,0,.5);
z-index:999;
}

#floatingMenu{
position:fixed;
bottom:180px;
right:25px;
background:#111;
border:1px solid #444;
border-radius:18px;
padding:15px;
display:flex;
flex-direction:column;
gap:10px;
min-width:220px;
box-shadow:0 15px 40px rgba(0,0,0,.55);
}

#floatingMenu button{
padding:12px;
border:none;
border-radius:12px;
background:#222;
color:white;
cursor:pointer;
font-size:15px;
}

#floatingMenu button:hover{
background:white;
color:black;
}

.bottomNav{
position:fixed;
bottom:0;
left:0;
right:0;
height:72px;
background:#111;
border-top:1px solid #333;
display:flex;
justify-content:space-evenly;
align-items:center;
}

.bottomNav button{
background:none;
border:none;
color:white;
display:flex;
flex-direction:column;
align-items:center;
font-size:14px;
cursor:pointer;
}

.bottomNav button span{
margin-top:5px;
font-size:12px;
}

@media(max-width:900px){

.logo h1{
font-size:42px;
}

.toolbar{
flex-direction:column;
align-items:flex-start;
}

.toolbar select,
.toolbar input{
width:100%;
}

.topButtons{
width:100%;
justify-content:flex-start;
}

.calendarContainer{
padding:12px;
}

#calendar{
padding:15px;
}

}