/* Style your div here!
    
  Hi! This is a short guide on how to use this plugin –

What you see below are preloader presets – so if you know what you're doing, you can easily change them :D
The color, the spinning speed of the circle, or anything else.

Regarding button styling and the offcanvas menu:
The close button will always have the class: close_[your custom class name]

The open button will always have the class: open_[your custom class name]

Regarding popup styling:
The popup body will always have the class: offcanvas_body_[your custom class name]

The wrapper itself will always have the class: .offcanvas_wrap[your custom class name]

CSS is already included at the bottom, and you’re free to change the animations, colors, paddings, etc.

P.S.
hidebefore is a class that hides the preloader. Don’t touch it!

⚠️ Very important note:
Please keep in mind that your original class will be removed from the element after the popup is generated.
So, make sure to assign a separate, unused class for popup initialization – one that you haven’t used before for styling the element!
    
    */

    @media (max-width: 768px) {
        .mobile-off-canvas-custom {
            position: relative;
            max-height: 60px !important;
            overflow: hidden !important;
             border-radius: 20px !important;
          padding:0px!important;
          margin:0px!important;
        }
        .mobile-off-canvas-custom::before {
            content: ''!important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 60px !important;
            backdrop-filter: blur(15px) !important;
            -webkit-backdrop-filter: blur(5px) !important;
            background-color: rgba(255, 255, 255, 0.85) !important;
            z-index: 9999 !important;
            pointer-events: all !important;
            border-radius: 20px !important;
        }
        .mobile-off-canvas-custom::after {
            content: '';
            position: absolute;
            top: calc(50% - 20px);
            left: calc(50% - 20px);
            width: 40px;
            height: 40px;
            border: 4px solid #ccc;
            border-top: 4px solid #333;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            z-index: 10000;
        }
        .offcanvas_wrap_mobile-off-canvas-custom[aria-hidden="true"] {
            position: fixed;
            left: -100%; /* całkowicie poza ekranem */
            top: 0px!important;
            width: 90vw;
            height: 100vh;
             z-index: 9999;
            pointer-events: none;
            background-color:white!important; /* popup background */
            transition: 0.7s ease!important;
            overflow-y:auto!important;
        }

        .offcanvas_wrap_mobile-off-canvas-custom[aria-hidden="false"] {
            position: fixed;
            top: 0px!important;
            left: 0;
            width: 90vw;
            height: 100vh;
            transition:  0.7s ease!important;
            z-index: 9999;
            background-color: white; /* popup background */
             overflow-y:auto!important;
        }
        .hide-before::before {
        content:none!important;
        }
         .hide-before::after {
        content:none!important;
        }

         @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
}