/* =========================
   BEACH VIEW CALENDAR
========================= */

*{
    box-sizing:border-box;
}

.bv-calendar{

    width:100%;
    margin:30px auto;

}


/* =========================
   PAGE TITLE
========================= */

.bv-page-title{

    text-align:center;

    margin-bottom:30px;

}

.bv-page-title h1{

    margin:0;

    font-size:38px;

    font-weight:700;

    color:#2563EB;

}

.bv-page-title p{

    margin-top:8px;

    color:#64748b;

    font-size:15px;

}

/* =========================
   DASHBOARD
========================= */

.bv-dashboard{

    display:grid;

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

    gap:20px;

    margin-bottom:30px;

}

.bv-card{

    background:#fff;

    border-radius:14px;

    padding:22px;

    text-align:center;

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

    transition:.25s;

}

.bv-card:hover{

    transform:translateY(-4px);

}

.bv-card-value{

    font-size:34px;

    font-weight:bold;

    color:#2563EB;

}

.bv-card-label{

    margin-top:10px;

    color:#64748b;

}

.booked-text{

    color:#ef4444;

}

.available-text{

    color:#16a34a;

}

.today-text{

    color:#f59e0b;

}

/* =========================
   HEADER
========================= */

.bv-header{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;

    margin-bottom:25px;

}

.bv-header h2{

    margin:0;
    font-size:34px;
    font-weight:700;
    color:#2c3e50;

}

.bv-header button{

    width:46px;
    height:46px;

    border:none;
    border-radius:10px;

    background:#f3f5f7;

    cursor:pointer;

    font-size:18px;

    transition:.25s;

}

.bv-header button:hover{

    background:#2563EB;
    color:#fff;

}

/* =========================
   CALENDAR
========================= */

.bv-calendar-wrapper{

    width:100%;

    overflow-x:auto;
    overflow-y:hidden;

    border-radius:14px;

    background:#fff;

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

    -webkit-overflow-scrolling:touch;

}

#bv-calendar-table{

    border-collapse:collapse;

    width:max-content;

    min-width:100%;

}

#bv-calendar-table th,
#bv-calendar-table td{

    width:46px;
    height:42px;

    text-align:center;

    border:1px solid #ececec;

}

/* =========================
   HEADER DAY
========================= */

#bv-calendar-table th.day{

    background:#2563EB;

    color:#fff;

    font-weight:bold;

    position:sticky;

    top:0;

    z-index:30;

}

/* =========================
   ROOM COLUMN
========================= */

#bv-calendar-table td.room{

    width:120px;
    min-width:120px;

    background:#2563EB;

    color:#fff;

    font-weight:600;

    position:sticky;

    left:0;

    z-index:20;

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

}

/* =========================
   ROOM LINK
========================= */

#bv-calendar-table td.room a{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:100%;

    height:100%;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.2s;

}

#bv-calendar-table td.room a:hover{

    background:#ffffff;

    color:#2563EB !important;

    text-decoration:none;

}

#bv-calendar-table td.room small{

    font-size:10px;

    font-weight:400;

    line-height:1.2;

    margin-top:3px;

    opacity:.9;

    text-align:center;

}

/* =========================
   ROOM HOVER
========================= */

#bv-calendar-table td.room:hover{

    background:#ffffff !important;

}

#bv-calendar-table td.room:hover a{

    color:#2563EB !important;

}

/* =========================
   AVAILABLE
========================= */

#bv-calendar-table td{

    background:#fff;

    transition:.2s;

}

#bv-calendar-table td:hover{

    background:#f6f8fb;

}

/* =========================
   BOOKED
========================= */

#bv-calendar-table td.booked{

    background:#ef4444 !important;

    cursor:pointer;

}

#bv-calendar-table td.booked:hover{

    background:#dc2626 !important;

}

/* =========================
   TODAY
========================= */

#bv-calendar-table td.today{

    background:#fde047 !important;

}

/* =========================
   LEGEND
========================= */

.bv-legend{

    display:flex;

    gap:25px;

    margin-top:15px;

    align-items:center;

}

.legend-item{

    display:flex;

    align-items:center;

    gap:8px;

}

.legend-color{

    width:18px;

    height:18px;

    border-radius:5px;

    border:1px solid #ddd;

}

.booked-box{

    background:#ef4444;

}

.today-box{

    background:#fde047;

}

.available-box{

    background:#fff;

}

/* =========================
   POPUP
========================= */

.bv-popup{

    display:none;

    position:fixed;

    inset:0;

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

    z-index:99999;

}

.bv-popup-box{

    width:430px;

    max-width:94%;

    margin:80px auto;

    background:#fff;

    border-radius:14px;

    padding:25px;

    box-shadow:0 18px 40px rgba(0,0,0,.2);

}

.bv-popup-box h2{

    margin-top:0;

    color:#2563EB;

}

.bv-popup-box button{

    width:100%;

    height:46px;

    border:none;

    border-radius:8px;

    margin-top:20px;

    background:#2563EB;

    color:#fff;

    cursor:pointer;

}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

.bv-header{

    gap:12px;

}

.bv-header h2{

    font-size:24px;

}

.bv-header button{

    width:38px;

    height:38px;

}

#bv-calendar-table th,
#bv-calendar-table td{

    width:34px;

    height:34px;

    font-size:12px;

}

#bv-calendar-table td.room{

    width:90px;

    min-width:90px;

    font-size:12px;

}

.bv-legend{

    flex-wrap:wrap;

    gap:12px;

    font-size:13px;

}

.bv-dashboard{

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

    gap:12px;

}

.bv-card{

    padding:16px;

}

.bv-card-value{

    font-size:24px;

}

}