/* =========================================================
   QVUNGTAU CUSTOM
   ========================================================= */


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

.booking-form-container {
    max-width: 700px;

    margin: 30px auto;
    padding: 25px;

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.25);

    box-shadow:
        0 8px 32px rgba(31, 38, 135, 0.37);

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

    border: 1px solid rgba(255, 255, 255, 0.18);

    box-sizing: border-box;
}


/* Booking grid */

.booking-form-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;
}


/* Field */

.booking-form-field {
    width: 100%;
}


/* Label */

.booking-form-container label {
    display: block;

    margin-bottom: 6px;

    font-weight: bold;

    color: #0070C0;

    font-size: 14px;
}


/* Inputs */

.booking-form-container input,
.booking-form-container select {
    width: 100%;

    box-sizing: border-box;

    padding: 8px 12px;

    margin-bottom: 12px;

    border: 1px solid #ccc;

    border-radius: 6px;

    background: #ffffff;

    color: #333;

    font-size: 15px;
}


/* Focus */

.booking-form-container input:focus,
.booking-form-container select:focus {
    outline: none;

    border-color: #0070C0;

    box-shadow:
        0 0 0 2px rgba(0, 112, 192, 0.12);
}


/* Submit */

.booking-form-submit {
    display: block;

    margin: 10px auto 0;

    padding: 12px 28px;

    border: none;

    border-radius: 8px;

    background: #FF6600;

    color: #ffffff;

    font-weight: bold;

    font-size: 15px;

    cursor: pointer;

    transition:
        background 0.3s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* Submit hover */

.booking-form-submit:hover {
    background: #e65c00;

    transform: translateY(-1px);

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   FACEBOOK ALBUM BUTTON
   ========================================================= */

/*
 * Product Gallery phải có position relative
 * để nút Facebook định vị theo Gallery.
 */

.woocommerce-product-gallery {
    position: relative !important;
}


/*
 * Facebook button
 */

.villa-facebook-album {
    position: absolute !important;

    right: 20px !important;
    bottom: 20px !important;

    z-index: 99999 !important;

    display: inline-flex !important;

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

    gap: 10px;

    max-width: calc(100% - 40px);

    padding: 13px 20px;

    background: #ffffff !important;

    color: #26344a !important;

    border-radius: 12px;

    box-shadow:
        0 5px 22px rgba(0, 0, 0, 0.28);

    font-size: 16px;

    font-weight: 600;

    line-height: 1.3;

    text-decoration: none !important;

    box-sizing: border-box;

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


/*
 * Hover
 */

.villa-facebook-album:hover {
    color: #1877f2 !important;

    transform: translateY(-2px);

    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.35);

    text-decoration: none !important;
}


/*
 * Facebook icon
 */

.villa-facebook-icon {
    display: inline-flex;

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

    flex: 0 0 24px;

    width: 24px;
    height: 24px;

    background: #1877f2;

    color: #ffffff;

    border-radius: 50%;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 18px;

    font-weight: bold;

    line-height: 1;
}


/*
 * Text
 */

.villa-facebook-text {
    display: inline-block;

    white-space: nowrap;
}


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

@media (max-width: 549px) {

    /*
     * Booking form
     */

    .booking-form-container {
        margin: 20px 10px;

        padding: 18px;
    }


    .booking-form-grid {
        grid-template-columns: 1fr;

        gap: 5px;
    }


    /*
     * Facebook button
     */

    .villa-facebook-album {
        right: 10px !important;

        bottom: 10px !important;

        max-width: calc(100% - 20px);

        padding: 10px 13px;

        gap: 8px;

        font-size: 13px;
    }


    .villa-facebook-icon {
        flex: 0 0 22px;

        width: 22px;

        height: 22px;

        font-size: 16px;
    }


    .villa-facebook-text {
        white-space: normal;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .villa-facebook-album {
        right: 7px !important;

        bottom: 7px !important;

        max-width: calc(100% - 14px);

        padding: 9px 11px;

        font-size: 12px;
    }


    .villa-facebook-icon {
        flex: 0 0 20px;

        width: 20px;

        height: 20px;

        font-size: 15px;
    }
}

/* =========================================================
   FACEBOOK ALBUM - SAFE INITIAL STATE
   ========================================================= */

#villa-facebook-album.villa-facebook-album {
    display: none !important;
}

#villa-facebook-album.villa-facebook-album.is-ready {
    display: inline-flex !important;
}

#villa-facebook-album.villa-facebook-album:hover {
    text-decoration: none !important;
}