@import "./ebmenu1-main.css";
/* ============================================================
   EBMENU1BB1 — Bottom Bar
   Namespace : ebmenu1bb1
============================================================ */


/* ============================================================
   ROOT VARIABLES
============================================================ */

:root {

    /* --------------------------------------------------------
       WIDTHS
    -------------------------------------------------------- */

    --ebmenu1bb1-width-full: 100%;

    --ebmenu1bb1-width-bottom-bar-item: 20%;


    /* --------------------------------------------------------
       SIZES
    -------------------------------------------------------- */

    --ebmenu1bb1-size-bottom-bar-icon: 38px;

    --ebmenu1bb1-size-cart-badge-min-width: 18px;

    --ebmenu1bb1-size-cart-badge-height: 18px;

    --ebmenu1bb1-size-close-button: 24px;

    --ebmenu1bb1-size-share-icon: 50px;

    --ebmenu1bb1-size-pagination-item: 25px;


    /* --------------------------------------------------------
       FONT SIZES
       All values use clamp()
    -------------------------------------------------------- */

    --ebmenu1bb1-fs-bottom-bar-text:
        clamp(0.7rem, 2.5vw, 0.85rem);

    --ebmenu1bb1-fs-bottom-bar-icon:
        clamp(1.1rem, 4.5vw, 1.3rem);

    --ebmenu1bb1-fs-panel-title:
        clamp(0.9rem, 3.5vw, 1.1rem);

    --ebmenu1bb1-fs-list-text:
        clamp(0.9rem, 3.5vw, 1.1rem);

    --ebmenu1bb1-fs-list-icon:
        clamp(1.1rem, 4.5vw, 1.3rem);

    --ebmenu1bb1-fs-share-icon:
        clamp(1.5rem, 5vw, 1.8rem);

    --ebmenu1bb1-fs-cart-badge:
        clamp(0.65rem, 2vw, 0.7rem);

    --ebmenu1bb1-fs-pagination-number:
        clamp(0.65rem, 2vw, 0.75rem);

    --ebmenu1bb1-fs-pagination-dots:
        clamp(1rem, 3vw, 1.15rem);


    /* --------------------------------------------------------
       BOTTOM BAR
    -------------------------------------------------------- */

    --ebmenu1bb1-bottom-bar-background:
        #ffffff;

    --ebmenu1bb1-bottom-bar-border-color:
        #eeeeee;

    --ebmenu1bb1-bottom-bar-icon-background:
        var(--ebmenu1-primary-color);

    --ebmenu1bb1-bottom-bar-icon-color:
        #ffffff;

    --ebmenu1bb1-bottom-bar-text-color:
        var(--ebmenu1-primary-color);


    /* --------------------------------------------------------
       BOTTOM BAR BUTTON
    -------------------------------------------------------- */

    --ebmenu1bb1-bottom-bar-button-background:
        transparent;

    --ebmenu1bb1-bottom-bar-button-text-color:
        var(--ebmenu1-primary-color);

    --ebmenu1bb1-bottom-bar-button-gap:
        5px;

    --ebmenu1bb1-bottom-bar-button-padding:
        5px 0;


    /* --------------------------------------------------------
       CART BADGE
    -------------------------------------------------------- */

    --ebmenu1bb1-cart-badge-background:
        var(--ebmenu1-secondary-color);

    --ebmenu1bb1-cart-badge-color:
        #ffffff;

    --ebmenu1bb1-cart-badge-font-weight:
        700;

    --ebmenu1bb1-cart-badge-padding:
        0 5px;

    --ebmenu1bb1-cart-badge-radius:
        50%;

    --ebmenu1bb1-cart-badge-offset:
        -6px;


    /* --------------------------------------------------------
       PANELS WRAPPER
    -------------------------------------------------------- */

    --ebmenu1bb1-panels-wrapper-radius:
        40px 40px 0 0;

    --ebmenu1bb1-panels-wrapper-shadow:
        4px 4px 4px 8px #eeeeee;


    /* --------------------------------------------------------
       PANEL
    -------------------------------------------------------- */

    --ebmenu1bb1-panel-background:
        rgba(255, 255, 255, 0.85);

    --ebmenu1bb1-panel-border-color:
        #eeeeee;

    --ebmenu1bb1-panel-padding:
        20px;

    --ebmenu1bb1-panel-gap:
        20px;

    --ebmenu1bb1-panel-max-height:
        50vh;

    --ebmenu1bb1-panel-blur:
        15px;

    --ebmenu1bb1-panel-animation-duration:
        0.4s;

    --ebmenu1bb1-panel-animation-easing:
        ease;


    /* --------------------------------------------------------
       PANEL HEADER
    -------------------------------------------------------- */

    --ebmenu1bb1-panel-header-border-color:
        #eeeeee;

    --ebmenu1bb1-panel-header-padding-bottom:
        15px;

    --ebmenu1bb1-panel-title-color:
        #000000;

    --ebmenu1bb1-panel-title-font-weight:
        700;


    /* --------------------------------------------------------
       CLOSE BUTTON
    -------------------------------------------------------- */

    --ebmenu1bb1-close-button-background:
        #cccccc;

    --ebmenu1bb1-close-button-icon-color:
        #ffffff;

    --ebmenu1bb1-close-button-radius:
        50%;


    /* --------------------------------------------------------
       PANEL CONTENT
    -------------------------------------------------------- */

    --ebmenu1bb1-panel-content-gap:
        15px;


    /* --------------------------------------------------------
       LIST ITEM
    -------------------------------------------------------- */

    --ebmenu1bb1-list-item-text-color:
        #333333;

    --ebmenu1bb1-list-item-text-font-weight:
        600;

    --ebmenu1bb1-list-item-icon-color:
        #000000;


    /* --------------------------------------------------------
       SHARE GRID
    -------------------------------------------------------- */

    --ebmenu1bb1-share-grid-gap:
        10px;


    /* --------------------------------------------------------
       SHARE ICON
    -------------------------------------------------------- */

    --ebmenu1bb1-share-icon-color:
        #ffffff;

    --ebmenu1bb1-share-icon-radius:
        8px;


    /* --------------------------------------------------------
       SOCIAL — FACEBOOK
    -------------------------------------------------------- */

    --ebmenu1bb1-facebook-background:
        #1877f2;

    --ebmenu1bb1-facebook-icon-color:
        #ffffff;


    /* --------------------------------------------------------
       SOCIAL — INSTAGRAM
    -------------------------------------------------------- */

    --ebmenu1bb1-instagram-background:
        linear-gradient(45deg,
            #f09433 0%,
            #e6683c 25%,
            #dc2743 50%,
            #cc2366 75%,
            #bc1888 100%);

    --ebmenu1bb1-instagram-icon-color:
        #ffffff;


    /* --------------------------------------------------------
       SOCIAL — WHATSAPP
    -------------------------------------------------------- */

    --ebmenu1bb1-whatsapp-background:
        #25d366;

    --ebmenu1bb1-whatsapp-icon-color:
        #ffffff;


    /* --------------------------------------------------------
       SOCIAL — TELEGRAM
    -------------------------------------------------------- */

    --ebmenu1bb1-telegram-background:
        #0088cc;

    --ebmenu1bb1-telegram-icon-color:
        #ffffff;


    /* --------------------------------------------------------
       SOCIAL — TWITTER
    -------------------------------------------------------- */

    --ebmenu1bb1-twitter-background:
        #1da1f2;

    --ebmenu1bb1-twitter-icon-color:
        #ffffff;


    /* --------------------------------------------------------
       SOCIAL — FACEBOOK ALT
    -------------------------------------------------------- */

    --ebmenu1bb1-fb-background:
        #1877f2;

    --ebmenu1bb1-fb-icon-color:
        #ffffff;


    /* --------------------------------------------------------
       SOCIAL — COPY
    -------------------------------------------------------- */

    --ebmenu1bb1-copy-background:
        #888888;

    --ebmenu1bb1-copy-icon-color:
        #ffffff;


    /* --------------------------------------------------------
       SOCIAL — EMAIL
    -------------------------------------------------------- */

    --ebmenu1bb1-email-background:
        #888888;

    --ebmenu1bb1-email-icon-color:
        #ffffff;


    /* --------------------------------------------------------
       SOCIAL — TIKTOK
    -------------------------------------------------------- */

    --ebmenu1bb1-tiktok-background:
        #000000;

    --ebmenu1bb1-tiktok-icon-color:
        #ffffff;


    /* --------------------------------------------------------
       SOCIAL — MESSENGER
    -------------------------------------------------------- */

    --ebmenu1bb1-messenger-background:
        linear-gradient(135deg,
            #0084ff 0%,
            #a13da6 50%,
            #ff5274 100%);

    --ebmenu1bb1-messenger-icon-color:
        #ffffff;


    /* --------------------------------------------------------
       PAGINATION
    -------------------------------------------------------- */

    --ebmenu1bb1-pagination-gap:
        5px;

    --ebmenu1bb1-pagination-padding:
        15px;

    --ebmenu1bb1-pagination-max-width:
        25%;

    --ebmenu1bb1-pagination-item-background:
        var(--ebmenu1-primary-color);

    --ebmenu1bb1-pagination-item-color:
        #ffffff;

    --ebmenu1bb1-pagination-active-background:
        var(--ebmenu1-secondary-color);

    --ebmenu1bb1-pagination-dots-color:
        #999999;

    --ebmenu1bb1-pagination-radius:
        50%;
}


/* ============================================================
   MAIN WRAPPER
============================================================ */

.ebmenu1bb1-menu-container {

    position: fixed;

    bottom: 0;

    left: 0;

    width: var(--ebmenu1bb1-width-full);

    z-index: 200;

    display: flex;

    flex-direction: column;

}


/* ============================================================
   CART BADGE
============================================================ */

.ebmenu1bb1-cart-badge {

    position: absolute;

    top: var(--ebmenu1bb1-cart-badge-offset);

    right: var(--ebmenu1bb1-cart-badge-offset);

    background-color:
        var(--ebmenu1bb1-cart-badge-background);

    color:
        var(--ebmenu1bb1-cart-badge-color);

    min-width:
        var(--ebmenu1bb1-size-cart-badge-min-width);

    height:
        var(--ebmenu1bb1-size-cart-badge-height);

    padding:
        var(--ebmenu1bb1-cart-badge-padding);

    border-radius:
        var(--ebmenu1bb1-cart-badge-radius);

    font-size:
        var(--ebmenu1bb1-fs-cart-badge);

    font-weight:
        var(--ebmenu1bb1-cart-badge-font-weight);

    display: flex;

    align-items: center;

    justify-content: center;

    line-height: 1;

}


/* ============================================================
   BOTTOM BAR
============================================================ */

.ebmenu1bb1-btm-bar {

    display: flex;

    width:
        var(--ebmenu1bb1-width-full);

    background-color:
        var(--ebmenu1bb1-bottom-bar-background);

    border-top:
        1px solid var(--ebmenu1bb1-bottom-bar-border-color);

    z-index: 2;

    direction: rtl;

}


/* ============================================================
   BOTTOM BAR BUTTON
============================================================ */

.ebmenu1bb1-btm-bar-btn {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width:
        var(--ebmenu1bb1-width-bottom-bar-item);

    background:
        var(--ebmenu1bb1-bottom-bar-button-background);

    color:
        var(--ebmenu1bb1-bottom-bar-button-text-color);

    border: none;

    cursor: pointer;

    gap:
        var(--ebmenu1bb1-bottom-bar-button-gap);

    padding:
        var(--ebmenu1bb1-bottom-bar-button-padding);

}


/* ============================================================
   BOTTOM BAR ICON CIRCLE
============================================================ */

.ebmenu1bb1-btm-bar-icon-circle {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width:
        var(--ebmenu1bb1-size-bottom-bar-icon);

    height:
        var(--ebmenu1bb1-size-bottom-bar-icon);

    background-color:
        var(--ebmenu1bb1-bottom-bar-icon-background);

    color:
        var(--ebmenu1bb1-bottom-bar-icon-color);

    border-radius: 50%;

    font-size:
        var(--ebmenu1bb1-fs-bottom-bar-icon);

}


/* ============================================================
   BOTTOM BAR TEXT
============================================================ */

.ebmenu1bb1-btm-bar-text {

    color:
        var(--ebmenu1bb1-bottom-bar-text-color);

    font-size:
        var(--ebmenu1bb1-fs-bottom-bar-text);

    font-weight: 700;

}


/* ============================================================
   PANELS WRAPPER
============================================================ */

.ebmenu1bb1-panels-wrapper {

    position: absolute;

    bottom: 100%;

    left: 0;

    width:
        var(--ebmenu1bb1-width-full);

    z-index: 1;

    overflow: hidden;

    border-radius:
        var(--ebmenu1bb1-panels-wrapper-radius);

    box-shadow:
        var(--ebmenu1bb1-panels-wrapper-shadow);

}


/* ============================================================
   PANEL
============================================================ */

.ebmenu1bb1-panel {

    display: flex;

    flex-direction: column;

    width:
        var(--ebmenu1bb1-width-full);

    background:
        var(--ebmenu1bb1-panel-background);

    backdrop-filter:
        blur(var(--ebmenu1bb1-panel-blur));

    -webkit-backdrop-filter:
        blur(var(--ebmenu1bb1-panel-blur));

    border-top:
        1px solid var(--ebmenu1bb1-panel-border-color);

    padding:
        var(--ebmenu1bb1-panel-padding);

    gap:
        var(--ebmenu1bb1-panel-gap);

    height: fit-content;

    max-height:
        var(--ebmenu1bb1-panel-max-height);

    position: absolute;

    bottom: 0;

    transform: translateY(100%);

    opacity: 0;

    transition:
        transform var(--ebmenu1bb1-panel-animation-duration) var(--ebmenu1bb1-panel-animation-easing),

        opacity var(--ebmenu1bb1-panel-animation-duration) var(--ebmenu1bb1-panel-animation-easing);

    direction: rtl;

}


/* ============================================================
   ACTIVE PANEL
============================================================ */

.ebmenu1bb1-panel.ebmenu1bb1-active {

    position: relative;

    transform: translateY(0);

    opacity: 1;

}


/* ============================================================
   PANEL HEADER
============================================================ */

.ebmenu1bb1-panel-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    width:
        var(--ebmenu1bb1-width-full);

    border-bottom:
        1px solid var(--ebmenu1bb1-panel-header-border-color);

    padding-bottom:
        var(--ebmenu1bb1-panel-header-padding-bottom);

}


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

.ebmenu1bb1-panel-title {

    color:
        var(--ebmenu1bb1-panel-title-color);

    font-size:
        var(--ebmenu1bb1-fs-panel-title);

    font-weight:
        var(--ebmenu1bb1-panel-title-font-weight);

}


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

.ebmenu1bb1-close-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    width:
        var(--ebmenu1bb1-size-close-button);

    height:
        var(--ebmenu1bb1-size-close-button);

    background-color:
        var(--ebmenu1bb1-close-button-background);

    color:
        var(--ebmenu1bb1-close-button-icon-color);

    border-radius:
        var(--ebmenu1bb1-close-button-radius);

    border: none;

    cursor: pointer;

}


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

.ebmenu1bb1-close-btn svg {

    width: 60%;

    height: 60%;

}


/* ============================================================
   PANEL CONTENT
============================================================ */

.ebmenu1bb1-panel-content {

    display: flex;

    flex-direction: column;

    width:
        var(--ebmenu1bb1-width-full);

    gap:
        var(--ebmenu1bb1-panel-content-gap);

    overflow-y: auto;

}


/* ============================================================
   LIST ITEM
============================================================ */

.ebmenu1bb1-list-item {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    width:
        var(--ebmenu1bb1-width-full);

    text-decoration: none;

}


/* ============================================================
   FLEX BETWEEN
============================================================ */

.ebmenu1bb1-flex-between {

    justify-content: space-between;

}


/* ============================================================
   LIST TEXT
============================================================ */

.ebmenu1bb1-list-text {

    color:
        var(--ebmenu1bb1-list-item-text-color);

    font-size:
        var(--ebmenu1bb1-fs-list-text);

    font-weight:
        var(--ebmenu1bb1-list-item-text-font-weight);

}


/* ============================================================
   LIST ICON
============================================================ */

.ebmenu1bb1-list-icon {

    color:
        var(--ebmenu1bb1-list-item-icon-color);

    font-size:
        var(--ebmenu1bb1-fs-list-icon);

}


/* ============================================================
   SHARE GRID
============================================================ */

.ebmenu1bb1-share-grid {

    display: flex;

    flex-wrap: wrap;

    justify-content: flex-start;

    gap:
        var(--ebmenu1bb1-share-grid-gap);

}


/* ============================================================
   SHARE ICON — BASE
============================================================ */

.ebmenu1bb1-share-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width:
        var(--ebmenu1bb1-size-share-icon);

    height:
        var(--ebmenu1bb1-size-share-icon);

    color:
        var(--ebmenu1bb1-share-icon-color);

    font-size:
        var(--ebmenu1bb1-fs-share-icon);

    border-radius:
        var(--ebmenu1bb1-share-icon-radius);

    text-decoration: none;

}


/* ============================================================
   FACEBOOK
============================================================ */

.ebmenu1bb1-share-icon.ebmenu1bb1-facebook {

    background:
        var(--ebmenu1bb1-facebook-background);

    color:
        var(--ebmenu1bb1-facebook-icon-color);

}


/* ============================================================
   INSTAGRAM
============================================================ */

.ebmenu1bb1-share-icon.ebmenu1bb1-instagram {

    background:
        var(--ebmenu1bb1-instagram-background);

    color:
        var(--ebmenu1bb1-instagram-icon-color);

}


/* ============================================================
   WHATSAPP
============================================================ */

.ebmenu1bb1-share-icon.ebmenu1bb1-whatsapp {

    background:
        var(--ebmenu1bb1-whatsapp-background);

    color:
        var(--ebmenu1bb1-whatsapp-icon-color);

}


/* ============================================================
   TELEGRAM
============================================================ */

.ebmenu1bb1-share-icon.ebmenu1bb1-telegram {

    background:
        var(--ebmenu1bb1-telegram-background);

    color:
        var(--ebmenu1bb1-telegram-icon-color);

}


/* ============================================================
   TWITTER
============================================================ */

.ebmenu1bb1-share-icon.ebmenu1bb1-twitter {

    background:
        var(--ebmenu1bb1-twitter-background);

    color:
        var(--ebmenu1bb1-twitter-icon-color);

}


/* ============================================================
   COPY LINK
============================================================ */

.ebmenu1bb1-share-icon.ebmenu1bb1-copy-link {

    background:
        var(--ebmenu1bb1-copy-background);

    color:
        var(--ebmenu1bb1-copy-icon-color);

}


/* ============================================================
   EMAIL
============================================================ */

.ebmenu1bb1-share-icon.ebmenu1bb1-mailto {

    background:
        var(--ebmenu1bb1-email-background);

    color:
        var(--ebmenu1bb1-email-icon-color);

}


/* ============================================================
   TIKTOK
============================================================ */

.ebmenu1bb1-share-icon.ebmenu1bb1-tiktok {

    background:
        var(--ebmenu1bb1-tiktok-background);

    color:
        var(--ebmenu1bb1-tiktok-icon-color);

}


/* ============================================================
   MESSENGER
============================================================ */

.ebmenu1bb1-share-icon.ebmenu1bb1-messenger {

    background:
        var(--ebmenu1bb1-messenger-background);

    color:
        var(--ebmenu1bb1-messenger-icon-color);

}


/* ============================================================
   PAGINATION
============================================================ */

.ebmenu1bb1-pagination {

    display: flex;

    justify-content: center;

    align-items: flex-start;

    gap:
        var(--ebmenu1bb1-pagination-gap);

    padding:
        var(--ebmenu1bb1-pagination-padding);

    direction: rtl;

    max-width:
        var(--ebmenu1bb1-pagination-max-width);

    overflow-x: auto;

    white-space: nowrap;

}


/* ============================================================
   PAGINATION NUMBER
============================================================ */

.ebmenu1bb1-pg-number {

    width:
        var(--ebmenu1bb1-size-pagination-item);

    height:
        var(--ebmenu1bb1-size-pagination-item);

    flex-shrink: 0;

    border-radius:
        var(--ebmenu1bb1-pagination-radius);

    background:
        var(--ebmenu1bb1-pagination-item-background);

    color:
        var(--ebmenu1bb1-pagination-item-color);

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    font-size:
        var(--ebmenu1bb1-fs-pagination-number);

    font-weight: 700;

}


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

.ebmenu1bb1-pg-btn {

    width:
        var(--ebmenu1bb1-size-pagination-item);

    height:
        var(--ebmenu1bb1-size-pagination-item);

    flex-shrink: 0;

    border-radius:
        var(--ebmenu1bb1-pagination-radius);

    background:
        var(--ebmenu1bb1-pagination-item-background);

    color:
        var(--ebmenu1bb1-pagination-item-color);

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    font-size:
        var(--ebmenu1bb1-fs-pagination-number);

    font-weight: 700;

}


/* ============================================================
   PAGINATION ACTIVE
============================================================ */

.ebmenu1bb1-pg-number.ebmenu1bb1-active {

    background:
        var(--ebmenu1bb1-pagination-active-background);

}


/* ============================================================
   PAGINATION DOTS
============================================================ */

.ebmenu1bb1-dots {

    font-size:
        var(--ebmenu1bb1-fs-pagination-dots);

    color:
        var(--ebmenu1bb1-pagination-dots-color);

}