/*!
Theme Name:   Hello Elementor - Miss Flamingo Theme
Template:     hello-elementor
Version:      1.0.0

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

IMPORTANT:
Read the instructions in https://github.com/webmandesign/child-theme/blob/master/readme.md

Child theme CSS styles:
*/

#cmplz-manage-consent {
    opacity: 0 !important;
}

header {
    z-index: 2 !important;
}

footer{
    z-index: 1 !important;
}

body.modal-open header { display: none; }

.ms-fl-header {
    height: 100px !important;
}

[data-elementor-type="product"],
[data-elementor-type="product"]  *:not(.elementor-sticky):not(.ms-fl-sticky-box):not(.ms-fl-sticky-box *):not(.ms-fl-fixed-booking) {
    z-index: 1 !important;

}

div[data-element_type="container"]:has(.ms-fl-sticky-box) {
    gap: 0px 40px;
}

.ms-fl-sticky-box {
    position: sticky !important;
    top: 132px;
    max-height: calc(100svh - 132px - 32px);
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-gutter: stable;

    [data-widget_type="nested-accordion.default"],
    details,
    details > div[role="region"],
    [data-widget_type="woocommerce-product-add-to-cart.default"] {
        position: unset !important;
    }

    .ms-fl-sticky-button-parent {
        display: flow-root !important; /* clears floats without extra markup */
        position: sticky !important;
        bottom: -30px;
        left: 0;           
        padding:  16px 30px !important;
        z-index: 1;
        background: white;
        margin:  0px -30px -60px -30px;

    }

    .ms-fl-sticky-button-parent::before {
        content: '';
        position: absolute;
        top: -16px;
        left: 0;
        right: 0;
        height: 16px;
        background: linear-gradient(to top, rgba(0,0,0,0.04), transparent);
        pointer-events: none;
    }

    summary.e-n-accordion-item-title[aria-expanded="true"] {
        background-color: transparent !important;
        color:  var(--n-accordion-border-color) !important;
    }

    svg.e-fas-chevron-up{
        fill: var(--n-accordion-border-color) !important;
    }
}

.wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle:after {
    content: "";
    vertical-align: middle;
    display: inline-block;
    border: .25em solid transparent;
    border-top: .4em solid;
    position: relative;
    top: 4px;
    margin-left: 4px;
    right: unset;
}

.ms-fl-switcher {
    .wpml-ls-legacy-dropdown-click .wpml-ls-item,
    .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle {
        background: transparent;
        border: none;
        color: white;
    }
}


/* Mobile styles */

@media (max-width: 1024px) {

    .ms-fl-header {
        height: 80px !important;
    }

    /* Sticky box modal */
    .ms-fl-sticky-box { 
        position: fixed !important;
        background: white;
        inset: 0;
        max-height: none;
        height: 100svh !important;
        opacity: 0;
        z-index: 0 !important; 
        pointer-events: none;;
        flex-wrap: nowrap !important;

        &.ms-fl-sticky-box--open {
            opacity: 1;
            z-index: 99 !important;
            pointer-events: auto;

            .yith-wcbk-booking-form{
                max-width: unset !important;
            }
        }

        .ms-fl-sticky-header {
            position: sticky !important;
            top: 0;
            padding: 16px 30px !important;
            z-index: 90 !important;
            background: white;
            margin: 0px -30px -10px -30px;
            width: 100vw;
        }

        summary.e-n-accordion-item-title[aria-expanded="true"] {
            display: none;
        }
    }

    .ms-fl-fixed-booking {
        position: fixed !important;
        background: white;
        padding: 16px 24px !important;
        width: 100vw !important;
        inset: auto 0 0 0;
        z-index: 98 !important;
    }

    /* Accordion styles */
    .ms-fl-extra-info {
        .inactive {
            display: none;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, opacity 0.3s ease;
            opacity: 0;
        }

        .active {
            display: block;
            max-height: 1000px;
            opacity: 1;
        }

        h3 {        
            cursor: pointer;
            user-select: none;
            padding: 10px;
            transition: background-color 0.4s ease;
            position: relative;
            padding-left: 30px;

            strong {
                pointer-events: none;
            }

            &::before {
                content: '▶';
                position: absolute;
                left: 10px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 12px;
                transition: transform 0.3s ease;
            }

            &.active::before {
                transform: translateY(-50%) rotate(90deg);
            }
        }

        h3:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }
    }
}