/* ================================
   WRAPPER
================================ */

.luxury-booking-wrapper{

    max-width:1200px;

    margin:70px auto;

    padding:55px;

    background:#fff;

    border-radius:22px;

}

/* ================================
   TOP SECTION
================================ */

.luxury-booking-top{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    margin-bottom:70px;

}

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

.luxury-calendar-nav{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:30px;

}

.luxury-month{

    font-size:26px;

    font-weight:500;

    color:#111;

}

.luxury-nav{

    cursor:pointer;

    font-size:24px;

    color:#888;

    transition:.3s ease;

}

.luxury-nav:hover{
    color:#111;
}

.luxury-calendar-grid{

    display:grid;

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

    gap:14px;

}
/* WEEK DAYS */

.luxury-weekdays{

    display:grid;

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

    margin-bottom:16px;

    gap:14px;

}

.luxury-weekdays span{

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:12px;

    font-weight:700;

    color:#666;

    text-transform:uppercase;

    letter-spacing:1px;

}

.luxury-day{

    width:48px;
    height:48px;

    border-radius:50%;

    display:flex;

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

    cursor:pointer;

    font-size:14px;

    transition:.25s ease;

}

.luxury-day:hover,
.luxury-day.active{

    background:#2f3c56;

    color:#fff;

}

.luxury-day.disabled{

    opacity:.18;

    pointer-events:none;

}

/* ================================
   TIMES
================================ */

.luxury-times{

    display:grid;

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

    gap:16px;

}

.luxury-time{

    height:52px;

    border:1px solid #e7e7e7;

    background:#fff;

    border-radius:8px;

    font-size:14px;

    cursor:pointer;

    transition:.25s ease;

}

.luxury-time:hover,
.luxury-time.active{

    background:#2f3c56;

    border-color:#2f3c56;

    color:#fff;

}

.luxury-time.disabled{

    opacity:.28;

    pointer-events:none;

}

/* ================================
   SECTION TITLES
================================ */

.luxury-section-title{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:35px;

    font-size:14px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    color:#111;

}

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

.luxury-form-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:26px 40px;

}

/* ================================
   GROUP
================================ */

.luxury-group{

    position:relative;

}

.luxury-group.full{
    grid-column:1/3;
}

/* ================================
   LABELS
================================ */

.luxury-group label{

    display:block;

    margin-bottom:10px;

    font-size:14px;

    font-weight:600;

    color:#111;

}

/* ================================
   INPUTS
================================ */

.luxury-group input,
.luxury-group textarea,
.luxury-group select{

    width:100%;

    border:none;

    background:#f5f5f5;

    border-radius:6px;

    padding:16px 18px;

    min-height:10px;

    font-size:15px;

    color:#111;

    transition:.25s ease;

    appearance:none;

}

/* ================================
   SELECT ARROW
================================ */

.luxury-group select{
    background-repeat:no-repeat;

    background-position:right 16px center;

    background-size:16px;

    padding-right:45px;

}

/* ================================
   TEXTAREA
================================ */

.luxury-group textarea{

    min-height:120px;

    resize:none;

    padding-top:16px;

}

/* ================================
   PLACEHOLDER
================================ */

.luxury-group input::placeholder,
.luxury-group textarea::placeholder{

    color:#999;

}

/* ================================
   FOCUS
================================ */

.luxury-group input:focus,
.luxury-group textarea:focus,
.luxury-group select:focus{

    outline:none;

    background:#fff;

    box-shadow:0 0 0 1px #2f3c56;

}

/* ================================
   BUTTON
================================ */

.luxury-submit{

    margin-top:45px;

    width:240px;

    height:56px;

    border:none;

    background:#2f3c56;

    color:#fff;

    border-radius:6px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.3s ease;

}

.luxury-submit:hover{

    opacity:.92;

    transform:translateY(-1px);

}

/* ================================
   RESPONSE
================================ */

.luxury-response{

    margin-top:20px;

    font-size:14px;

    font-weight:600;

    color:#c0392b;

}

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

@media(max-width:768px){

    .luxury-booking-wrapper{
        padding:25px;
    }

    .luxury-booking-top,
    .luxury-form-grid{

        grid-template-columns:1fr;

    }

    .luxury-group.full{
        grid-column:auto;
    }

    .luxury-times{
        grid-template-columns:1fr 1fr;
    }

}
/* EMPTY GRID CELLS */

.luxury-empty{

    width:48px;

    height:48px;

}