/* =====================================
   CocktailHUBGH Booking Page
===================================== */

/* ==========================
        BRAND / LOGO
========================== */

.brand {

    display:flex;

    align-items:center;

    gap:10px;

}


.brand img {

    width:48px;

    height:48px;

    max-width:48px;

    max-height:48px;

    object-fit:contain;

    display:block;

    flex-shrink:0;

}


.logo {

    font-family:'Playfair Display',serif;

    font-size:28px;

    letter-spacing:2px;

    display:flex;

    align-items:center;

}


.logo span {

    color:white;

}


.logo strong {

    color:var(--pink);

}

/* HERO */

.booking-hero {

    min-height:420px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:140px 20px 80px;


    background:

    linear-gradient(
        rgba(7,16,24,.75),
        rgba(7,16,24,.95)
    ),

    url("../assets/images/signature-cocktail-2.jpeg");


    background-size:cover;

    background-position:center;

}



.booking-hero h1 {

    font-family:'Playfair Display',serif;

    font-size:55px;

    max-width:900px;


    background:

    linear-gradient(
        90deg,
        var(--pink),
        var(--yellow),
        var(--lime)
    );


    -webkit-background-clip:text;

    color:transparent;


    margin-bottom:20px;

}

.booking-hero p {

    color:#ddd;

    font-size:18px;

    max-width:650px;

    line-height:1.8;

}

/* BOOKING AREA */

.booking-section {

    padding:100px 8%;

}

.booking-wrapper {

    display:grid;

    grid-template-columns:0.8fr 1.2fr;

    gap:40px;

    max-width:1200px;

    margin:auto;

}

/* LEFT INFORMATION */

.booking-info {


    background:

    rgba(255,255,255,.08);


    backdrop-filter:blur(15px);


    padding:40px;


    border-radius:30px;


    border:

    1px solid rgba(255,255,255,.15);


    height:fit-content;


}



.booking-info h2 {


    font-family:'Playfair Display',serif;

    font-size:35px;

    margin-bottom:35px;


}

.info-item {


    display:flex;


    gap:20px;


    align-items:flex-start;


    margin-bottom:30px;


    font-size:30px;


}

.info-item h3 {


    font-size:18px;


    margin-bottom:8px;


}

.info-item p {


    color:#ccc;


    font-size:14px;


    line-height:1.6;


}

/* FORM CONTAINER */


.booking-form-container {


    background:

    rgba(255,255,255,.08);


    backdrop-filter:blur(20px);



    padding:45px;


    border-radius:30px;


    border:

    1px solid rgba(255,255,255,.15);


}



.booking-form-container h2 {


    font-family:'Playfair Display',serif;


    font-size:35px;


    margin-bottom:35px;


}

/* FORM */


.form-row {


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:25px;


}

.form-group {


    margin-bottom:25px;

}

.form-group label {


    display:block;


    margin-bottom:10px;


    color:var(--yellow);


    font-weight:500;


}



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


    width:100%;


    padding:16px;


    border-radius:15px;


    border:none;


    outline:none;



    background:

    rgba(255,255,255,.12);


    color:white;


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


}



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


    color:#bbb;


}



.form-group select option {


    color:#111;


}



.form-group textarea {


    resize:none;


}

/* CHECKBOXES */


.checkbox-group {


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:15px;


}



.checkbox-group label {


    color:white;


    background:

    rgba(255,255,255,.08);


    padding:12px;


    border-radius:12px;


}



.checkbox-group input {


    width:auto;

    margin-right:8px;

}

/* BUTTON */

.booking-form .btn {

    width:100%;

    border:none;

    cursor:pointer;

    font-size:16px;

}

/* MOBILE */

@media(max-width:1000px){

.booking-wrapper {

    grid-template-columns:1fr;

}

.booking-hero h1 {

    font-size:38px;

}

.form-row {

    grid-template-columns:1fr;

}

.checkbox-group {

    grid-template-columns:1fr;

}

}

/* =====================================
   BOOKING MESSAGE MODAL
===================================== */

.booking-message-overlay {

    position: fixed;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.78);

    backdrop-filter:
        blur(6px);

    -webkit-backdrop-filter:
        blur(6px);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    z-index: 9999;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;

}


.booking-message-overlay.show {

    opacity: 1;

    visibility: visible;

}


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

.booking-message-modal {

    position: relative;

    width: 100%;

    max-width: 500px;

    background: #ffffff;

    border-radius: 20px;

    padding: 45px 40px 40px;

    text-align: center;

    box-shadow:
        0 25px 80px
        rgba(0, 0, 0, 0.35);

    transform:
        translateY(25px)
        scale(0.96);

    transition:
        transform 0.3s ease;

}


.booking-message-overlay.show
.booking-message-modal {

    transform:
        translateY(0)
        scale(1);

}


.booking-message-overlay.closing {

    opacity: 0;

}


.booking-message-overlay.closing
.booking-message-modal {

    transform:
        translateY(20px)
        scale(0.96);

}


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

.booking-message-close {

    position: absolute;

    top: 15px;

    right: 18px;

    width: 36px;

    height: 36px;

    border: none;

    background: transparent;

    font-size: 28px;

    line-height: 1;

    color: #777;

    cursor: pointer;

    transition:
        color 0.2s ease,
        transform 0.2s ease;

}


.booking-message-close:hover {

    color: #000;

    transform:
        rotate(90deg);

}


/* =====================================
   SUCCESS / ERROR ICON
===================================== */

.booking-message-icon {

    width: 72px;

    height: 72px;

    margin:
        0 auto 20px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 36px;

    font-weight: 600;

}


/* SUCCESS */

.booking-message-overlay.success
.booking-message-icon {

    background:
        rgba(46, 204, 113, 0.12);

    color:
        #27ae60;

}


/* ERROR */

.booking-message-overlay.error
.booking-message-icon {

    background:
        rgba(231, 76, 60, 0.12);

    color:
        #e74c3c;

}


/* =====================================
   BRAND
===================================== */

.booking-message-brand {

    margin: 0 0 8px;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: #e91e63;

}


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

.booking-message-content h2 {

    margin: 0;

    font-family:
        "Playfair Display",
        serif;

    font-size: 30px;

    color: #111;

}


/* =====================================
   HEADING
===================================== */

.booking-message-content h3 {

    margin:
        12px 0 12px;

    font-size: 17px;

    font-weight: 500;

    color: #333;

}


/* =====================================
   MESSAGE
===================================== */

.booking-message-text {

    margin:
        0 auto 28px;

    max-width: 400px;

    font-size: 14px;

    line-height: 1.7;

    color: #666;

}


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

.booking-message-button {

    border: none;

    border-radius: 30px;

    padding:
        13px 32px;

    background:
        #e91e63;

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.booking-message-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(233, 30, 99, 0.3);

}


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

@media (max-width: 600px) {

    .booking-message-modal {

        padding:
            40px 25px 30px;

        border-radius: 16px;

    }


    .booking-message-content h2 {

        font-size: 25px;

    }


    .booking-message-content h3 {

        font-size: 16px;

    }


    .booking-message-text {

        font-size: 13px;

    }

}