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

body{
    background:#0f0f0f;
    color:white;
    scroll-behavior:smooth;
}


/* GLOBAL BACKGROUND */

body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background:url('/images/bg-dashboard.jpg') center/cover no-repeat fixed;
position:relative;
}

/* DARK BLUR OVERLAY */

body::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.65);
backdrop-filter:blur(8px);
z-index:-1;
}

section{
padding:120px 60px;
position:relative;
z-index:1;
}

/* ================= NAV ================= */

nav{
    position:fixed;
    top:0;
    width:100%;
    background:#000;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 8%;
    z-index:1000;
}

.nav-center{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:40px;
}

.nav-center a{
    color:white;
    text-decoration:none;
    position:relative;
    padding-bottom:5px;
    transition:0.3s;
}

.nav-center a:hover,
.nav-center a.active{
    color:#ff3c3c;
}

.nav-center a.active::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:100%;
    height:2px;
    background:#ff3c3c;
}

/* NAV RIGHT BUTTONS */

.nav-right a{
    text-decoration:none !important;
}

.nav-white{
    background:white;
    color:black !important;
    padding:8px 18px;
    border-radius:6px;
    text-decoration:none !important;
}

.nav-red{
    background:#ff3c3c;
    padding:8px 18px;
    border-radius:6px;
    color:white !important;
    text-decoration:none !important;
}

.nav-red:hover{
    background:#cc0000;
}

.nav-white:hover{
    opacity:0.9;
}

/* ================= SECTIONS ================= */

section{
    min-height:100vh;
    padding:120px 10%;
}

#home{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
}

#home h1{
    font-size:60px;
    margin-bottom:20px;
}

button, .btn{
    padding:12px 25px;
    background:#ff3c3c;
    border:none;
    color:white;
    cursor:pointer;
    border-radius:5px;
    transition:0.3s;
    text-decoration:none;
    display:inline-block;
}

button:hover, .btn:hover{
    background:#cc0000;
}

/* ================= PORTFOLIO ================= */

.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
    justify-content:center;
}

.category{
    position:relative;
    cursor:pointer;
    width:100%;
    max-width:400px;
}

.category img{
    width:100%;
    border-radius:12px;
}

.category h3{
    position:absolute;
    top:10px;
    left:10px;
    background:rgba(0,0,0,0.7);
    padding:5px 10px;
    border-radius:5px;
}


/* SCHEDULE BACKGROUND */

#schedule{
padding:120px 60px;
position:relative;
}

#schedule::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
backdrop-filter:blur(6px);
z-index:0;
}

#schedule *{
position:relative;
z-index:1;
}

.schedule-title{
text-align:center;
font-size:32px;
margin-bottom:30px;
}


/* CALENDAR CONTAINER */

.calendar-wrapper{
max-width:1200px;
margin:auto;
}

.calendar-container{
background:rgba(20,20,20,0.9);
padding:30px;
border-radius:15px;
box-shadow:0 0 25px rgba(0,0,0,0.7);
}

/* CALENDAR HEADER */

.calendar-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.calendar-btn{
background:#ff3b3b;
border:none;
color:white;
padding:8px 12px;
border-radius:6px;
cursor:pointer;
}


/* DAYS LABEL */

.calendar-days{
display:grid;
grid-template-columns:repeat(7,1fr);
margin-bottom:15px;
text-align:center;
color:#aaa;
}


/* CALENDAR GRID */

.calendar-grid{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:15px;
}

.calendar-grid div{
background:#2a2a2a;
padding:18px;
border-radius:10px;
text-align:center;
transition:0.3s;
}

.calendar-grid div:hover{
transform:scale(1.05);
}


/* DAY BOX */

.calendar-grid div{
background:#2a2a2a;
padding:18px;
border-radius:10px;
text-align:center;
transition:0.3s;
}


/* COLORS */

.day.green{
background:#0b8a0b;
color:white;
}

.day.yellow{
background:#b8860b;
color:white;
}

.day.red{
background:#b30000;
color:white;
}

/* ================= FORM ================= */

.form-container{
    width:400px;
    margin:150px auto;
    background:#1a1a1a;
    padding:40px;
    border-radius:10px;
    box-shadow:0 0 15px rgba(0,0,0,0.5);
}

.form-container input{
    width:100%;
    padding:10px;
    margin-bottom:15px;
    border:none;
    border-radius:5px;
}

/* ===== LOGIN FIX ===== */

.login-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:15px;
}

.show-pass{
    font-size:14px;
    display:flex;
    align-items:center;
    gap:6px;
}

.show-pass input{
    width:auto;
}

.form-container button{
    width:auto;
    padding:10px 22px;
}


body.login-page,
body.booking-page{
background:url('/images/bg-dashboard.jpg') center/cover no-repeat fixed;
}

/* ================= MODAL ================= */

.modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.9);
    justify-content:center;
    align-items:center;
    z-index:1000;
}

.modal-content{
width:90%;
max-width:1300px;
background:#111;
padding:40px;
border-radius:14px;
position:relative;
max-height:85vh;
overflow-y:auto;
}

#galleryImages{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    max-height:70vh;
    overflow-y:auto;
    padding-right:10px;
}

#galleryImages img{
    width:100%;
    height:250px;
    object-fit:cover;
    border-radius:10px;
    cursor:pointer;
    transition:0.3s;
}

#galleryImages img:hover{
    transform:scale(1.05);
}

.gallery-grid img:hover{
    transform:scale(1.05);
}

.modal-back{
position:fixed;
top:110px;
right:40px;
background:#ff3c3c;
padding:10px 18px;
border-radius:8px;
color:white;
font-weight:bold;
text-decoration:none;
font-size:14px;
z-index:2000;
transition:0.2s;
box-shadow:0 0 10px rgba(0,0,0,0.6);
}

.modal-back:hover{
background:#cc0000;
transform:scale(1.05);
}

/* CANCEL MODAL */

.cancel-modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
align-items:center;
justify-content:center;
z-index:9999;
}

.cancel-box{
background:#111;
padding:30px;
border-radius:10px;
width:320px;
text-align:center;
box-shadow:0 0 25px rgba(0,0,0,0.6);
}

.cancel-actions{
display:flex;
justify-content:center;
gap:15px;
margin-top:15px;
}

.cancel-no{
background:#333;
border:none;
color:white;
padding:8px 15px;
border-radius:6px;
cursor:pointer;
}

.cancel-yes{
background:#ff3c3c;
border:none;
color:white;
padding:8px 15px;
border-radius:6px;
cursor:pointer;
}

.cancel-yes:hover{
background:#ff1f1f;
}

.cancel-box button{
pointer-events:auto;
cursor:pointer;
}

.toast{
position:fixed;
bottom:30px;
left:50%;
transform:translateX(-50%);
background:#2ecc71;
color:white;
padding:12px 20px;
border-radius:8px;
font-weight:bold;
opacity:0;
transition:0.3s;
z-index:99999;
}

.toast.show{
opacity:1;
}

@keyframes fadeIn{
from{transform:scale(.9);opacity:0}
to{transform:scale(1);opacity:1}
}

/* ================= ZOOM ================= */

.zoom-modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background:black;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.zoom-modal img{
    height:95vh;
    width:auto;
    object-fit:contain;
    border-radius:10px;
}

.zoom-close{
    position:absolute;
    top:30px;
    right:40px;
    background:#ff3c3c;
    padding:8px 12px;
    border-radius:6px;
    cursor:pointer;
}

.zoom-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:40px;
    cursor:pointer;
    padding:10px 15px;
    background:rgba(0,0,0,0.5);
    border-radius:50%;
}

.zoom-arrow.left{ left:30px; }
.zoom-arrow.right{ right:30px; }

/* ===== BOOKING CARD ===== */

.form-container{
max-width:480px;
margin:120px auto;
padding:40px;
background:linear-gradient(145deg,#1a1a1a,#141414);
border-radius:20px;
box-shadow:
0 0 40px rgba(0,0,0,0.8),
0 0 25px rgba(139,0,0,0.15);
transition:0.4s ease;
}

.form-container:hover{
box-shadow:
0 0 60px rgba(0,0,0,1),
0 0 35px rgba(139,0,0,0.25);
}

.form-container h2{
font-size:26px;
margin-bottom:25px;
text-align:center;
letter-spacing:1px;
}

.booking-top{
display:flex;
justify-content:space-between;
align-items:center;
}

.cancel-btn{
background:#ff3c3c;
border:none;
color:white;
width:28px;
height:28px;
border-radius:50%;
cursor:pointer;
font-size:14px;
display:flex;
align-items:center;
justify-content:center;
transition:0.2s;
}

.cancel-btn:hover{
background:#cc0000;
transform:scale(1.1);
}

/* ===== TOAST NOTIFICATION ===== */

.toast{
position:fixed;
bottom:30px;
left:50%;
transform:translateX(-50%) translateY(100px);
background:#1a1a1a;
color:white;
padding:14px 24px;
border-radius:8px;
font-size:14px;
box-shadow:0 5px 20px rgba(0,0,0,0.5);
opacity:0;
transition:all 0.4s ease;
z-index:9999;
border-left:4px solid #ff3c3c;
}

.toast.show{
opacity:1;
transform:translateX(-50%) translateY(0);
}

/* Inputs */

.form-container input,
.form-container select{
width:100%;
padding:14px;
margin-bottom:18px;
border-radius:10px;
border:none;
background:#222;
color:white;
font-size:14px;
transition:0.3s;
}

.form-container input:focus,
.form-container select:focus{
outline:none;
background:#2a2a2a;
box-shadow:0 0 10px rgba(139,0,0,0.4);
}

/* File upload spacing */
.form-container label{
font-size:14px;
margin-bottom:5px;
display:block;
opacity:0.8;
}

/* Button */

.form-container button{
width:100%;
padding:14px;
border:none;
border-radius:10px;
background:#ff3c3c;
color:white;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:0.3s;
}

.form-container button:hover{
background:#cc0000;
transform:translateY(-2px);
}


/* ===== MY BOOKINGS ===== */

.booking-card{
background:linear-gradient(145deg,#1a1a1a,#141414);
padding:25px;
margin-bottom:20px;
border-radius:16px;
box-shadow:
0 0 25px rgba(0,0,0,0.7);
transition:0.3s ease;
}

.booking-card:hover{
transform:translateY(-4px);
box-shadow:
0 0 40px rgba(0,0,0,1),
0 0 20px rgba(139,0,0,0.2);
}

/* Booking Title */
.booking-title{
font-weight:600;
margin-bottom:10px;
}

/* Status Badge */

.status-badge{
display:inline-block;
padding:6px 14px;
border-radius:30px;
font-size:12px;
font-weight:600;
margin-top:10px;
}

.status-accepted{
background:#1e7e34;
color:white;
}

.status-denied{
background:#c82333;
color:white;
}

.status-pending{
background:#ffc107;
color:black;
}


/* Para sa Smooth Desktop */

@media (min-width:1200px){
    .portfolio-grid{
        grid-template-columns:repeat(4,1fr);
        align-items:stretch;
    }

    .category{
        display:flex;
        flex-direction:column;
    }

    .category img{
        height:380px;
        object-fit:cover;
    }
}



/* BOOKING PAGE BACK BUTTON */
.back-btn{
    position:fixed;
    top:25px;
    right:30px;
    background:#ff3c3c;
    color:white;
    padding:8px 16px;
    border-radius:6px;
    text-decoration:none;
    font-weight:bold;
    transition:0.3s;
}

.back-btn:hover{
    background:#cc0000;
}

/* ===== Para sa Show Password ===== */

.login-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:15px;
}

.show-pass{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
}

.show-pass input{
    width:16px;
    height:16px;
    margin:0;
    cursor:pointer;
}

/* ===== LOGO STYLE ===== */

.nav-left{
    position:relative;
    width:120px;   
}

.logo img{
    height:95px;               
    width:auto;
    position:absolute;
    top:50%;
    left:-70px;                
    transform:translateY(-50%);
    
}

/* ===== PAGE LOGO (Booking & Login) ===== */

.page-logo{
    position:fixed;
    top:20px;
    left:30px;
    z-index:1000;
}

.page-logo img{
    height:95px;
    width:auto;

    /* Dark red tattoo glow */
    box-shadow:
        0 0 8px #8b0000,
        0 0 15px #5c0000,
        0 0 25px rgba(139,0,0,0.6);

    border-radius:8px;
}


/* ===== Para Smooth ===== */

@media(max-width:768px){

.form-container{
margin:100px 20px;
padding:30px;
}

.booking-card{
padding:20px;
}

.nav{
padding:0 5%;
}

}


/* CHAT MODAL */

.chat-modal{
display:none;
position:fixed;
bottom:20px;
left:20px;
width:360px;
height:420px;
background:#0f0f0f;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.6);
z-index:9999;
overflow:hidden;
}

.chat-box{
width:100%;
height:100%;
display:flex;
flex-direction:column;
}

.chat-header{
background:#111;
color:white;
padding:12px;
display:flex;
justify-content:space-between;
align-items:center;
cursor:move;
border-bottom:1px solid #222;
}

.chat-header button{
background:#ff3b3b;
border:none;
color:white;
padding:4px 10px;
border-radius:6px;
cursor:pointer;
}

.admin-msg{
background:#1c1c1c;
color:white;
padding:8px 12px;
border-radius:10px;
max-width:70%;
align-self:flex-start;
font-size:14px;
}

.client-msg{
background:#ff3b3b;
color:white;
padding:8px 12px;
border-radius:10px;
max-width:70%;
align-self:flex-end;
font-size:14px;
}

.chat-messages{
display:flex;
flex-direction:column;
gap:8px;
padding:10px;
overflow-y:auto;
flex:1;
}

.chat-input{
display:flex;
gap:8px;
padding:10px;
background:#111;
border-top:1px solid #222;
}

.chat-input textarea{
flex:1;
height:38px;
resize:none;
background:#0f0f0f;
border:1px solid #333;
color:white;
padding:6px;
border-radius:6px;
}

.chat-input button{
background:#ff3b3b;
border:none;
padding:6px 14px;
color:white;
border-radius:6px;
cursor:pointer;
}

.chat-input textarea{
flex:1;
resize:none;
height:40px;
border-radius:8px;
border:1px solid #333;
background:#0f0f0f;
color:white;
padding:8px;
}

.chat-input button{
background:#ff3b3b;
border:none;
color:white;
padding:8px 16px;
border-radius:8px;
cursor:pointer;
}

.msg-icon{
cursor:pointer;
font-size:18px;
margin-right:6px;
position:relative;
}

.msg-icon:hover{
transform:scale(1.15);
}

.msg-badge{
position:absolute;
top:-6px;
right:-6px;
background:#ff3b3b;
color:white;
font-size:10px;
padding:2px 6px;
border-radius:50%;
}

.msg-count{
position:absolute;
top:-6px;
right:-6px;
background:red;
color:white;
font-size:10px;
padding:2px 5px;
border-radius:50%;
}

.chat-header button{
background:#ff3b3b;
border:none;
color:white;
cursor:pointer;
padding:5px 10px;
border-radius:5px;
}

.date-modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
justify-content:center;
align-items:center;
z-index:9999;
}

.date-box{
background:#1a1a1a;
padding:30px;
border-radius:10px;
width:300px;
text-align:center;
color:white;
}

.date-box button{
margin-top:15px;
padding:8px 20px;
background:#ff3b3b;
border:none;
color:white;
border-radius:5px;
cursor:pointer;
}