/*
 * Mobile Booking Bar Styles
 *
 * A fixed-bottom "Book Now!" bar shown only on mobile (< 768px).
 * Lifts above the footer via --bookbar-lift CSS custom property (set by mobile-bar.js).
 * HTML output and booking URL: inc/mobile-bar.php (wcwp_render_mobile_booking_bar)
 * Enqueued by: functions.php via wcwp_render_mobile_booking_bar()
 */

@media (min-width: 768px) {
    .mobile-bookbar--floating {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .mobile-bookbar--floating {
        display: block;
    }
    .site-footer, #colophon {
        padding-top: 90px;
        background-color: #1b2340; /* match footer sections; prevents white gap above bar */
    }
}

.mobile-bookbar--floating {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    background: var(--global-palette3);
    bottom: 0;
    padding-top: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    transform: translateY(calc(-1px * var(--bookbar-lift, 0)));
}

.mobile-bookbar__inner {
    display: flex;
    justify-content: center;
}

.mobile-bookbar__button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 200px;
    max-width: 240px;
    background: var(--global-palette13);
    border: 4px solid var(--global-palette13);
    border-radius: 14px;
    padding: 14px 22px;
    color: var(--global-palette9);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
}

.book-now-btn-pink {
    position: relative;
    z-index: 1;
}

.book-now-btn-pink::before {
    content: "";
    position: absolute;
    top: -14%;
    bottom: -14%;
    left: -10%;
    right: -16%;
    background: var(--global-palette13);
    clip-path: polygon(
        0% 0%,
        98% 6%,
        100% 94%,
        2% 100%
    );
    transition: clip-path 0.25s ease;
    z-index: -1;
}

.book-now-btn-pink:hover::before {
    clip-path: polygon(
        0% 10%,
        100% 0%,
        98% 100%,
        0% 90%
    );
}