@import "./ebmenu1-main.css";

/* ============================================================
   EBMENU1BB1 — THEME 2 : "Floating Dark Dock"
   Namespace : --ebmenu1bb1-theme3-
   Concept   : الـ bottom bar بيتحول لـ "دوك" عائم غامق بحواف
               دائرية بالكامل، شايل نفسه شوية عن حرف الشاشة،
               مع أيقونات دائرية بحلقة توهج بلون الـ primary،
               والـ panels بتبقى Dark Glass شفافة بحدود مضيئة.
============================================================ */

:root {

   /* --------------------------------------------------------
       WIDTHS / GEOMETRY
    -------------------------------------------------------- */
   --ebmenu1bb1-theme3-width-full: 100%;
   --ebmenu1bb1-theme3-width-dock-max: 620px;
   --ebmenu1bb1-theme3-width-bottom-bar-item: 20%;
   --ebmenu1bb1-theme3-dock-side-margin: 14px;
   --ebmenu1bb1-theme3-dock-bottom-margin: 14px;
   --ebmenu1bb1-theme3-dock-radius: 28px;

   /* --------------------------------------------------------
       SIZES
    -------------------------------------------------------- */
   --ebmenu1bb1-theme3-size-bottom-bar-icon: 42px;
   --ebmenu1bb1-theme3-size-cart-badge-min-width: 18px;
   --ebmenu1bb1-theme3-size-cart-badge-height: 18px;
   --ebmenu1bb1-theme3-size-close-button: 26px;
   --ebmenu1bb1-theme3-size-share-icon: 52px;
   --ebmenu1bb1-theme3-size-pagination-item: 25px;

   /* --------------------------------------------------------
       FONT SIZES
    -------------------------------------------------------- */
   --ebmenu1bb1-theme3-fs-bottom-bar-text: clamp(0.68rem, 2.4vw, 0.8rem);
   --ebmenu1bb1-theme3-fs-bottom-bar-icon: clamp(1.15rem, 4.5vw, 1.35rem);
   --ebmenu1bb1-theme3-fs-panel-title: clamp(0.95rem, 3.5vw, 1.15rem);
   --ebmenu1bb1-theme3-fs-list-text: clamp(0.9rem, 3.5vw, 1.05rem);
   --ebmenu1bb1-theme3-fs-list-icon: clamp(1.1rem, 4.5vw, 1.3rem);
   --ebmenu1bb1-theme3-fs-share-icon: clamp(1.4rem, 5vw, 1.7rem);
   --ebmenu1bb1-theme3-fs-cart-badge: clamp(0.65rem, 2vw, 0.7rem);
   --ebmenu1bb1-theme3-fs-pagination-number: clamp(0.65rem, 2vw, 0.75rem);
   --ebmenu1bb1-theme3-fs-pagination-dots: clamp(1rem, 3vw, 1.15rem);

   /* --------------------------------------------------------
       BOTTOM BAR (DOCK)
    -------------------------------------------------------- */
   --ebmenu1bb1-theme3-bottom-bar-background: #14110f;
   --ebmenu1bb1-theme3-bottom-bar-border-color: rgba(168, 137, 79, 0.35);
   --ebmenu1bb1-theme3-bottom-bar-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
   --ebmenu1bb1-theme3-bottom-bar-icon-background: transparent;
   --ebmenu1bb1-theme3-bottom-bar-icon-border-color: var(--ebmenu1-primary-color);
   --ebmenu1bb1-theme3-bottom-bar-icon-color: var(--ebmenu1-primary-color);
   --ebmenu1bb1-theme3-bottom-bar-icon-glow: 0 0 0 4px rgba(168, 137, 79, 0.12);
   --ebmenu1bb1-theme3-bottom-bar-text-color: #efe6d8;

   /* --------------------------------------------------------
       BOTTOM BAR BUTTON
    -------------------------------------------------------- */
   --ebmenu1bb1-theme3-bottom-bar-button-background: transparent;
   --ebmenu1bb1-theme3-bottom-bar-button-text-color: #efe6d8;
   --ebmenu1bb1-theme3-bottom-bar-button-gap: 6px;
   --ebmenu1bb1-theme3-bottom-bar-button-padding: 10px 0;

   /* --------------------------------------------------------
       CART BADGE
    -------------------------------------------------------- */
   --ebmenu1bb1-theme3-cart-badge-background: #e2b857;
   --ebmenu1bb1-theme3-cart-badge-color: #1a1410;
   --ebmenu1bb1-theme3-cart-badge-font-weight: 700;
   --ebmenu1bb1-theme3-cart-badge-padding: 0 5px;
   --ebmenu1bb1-theme3-cart-badge-radius: 50%;
   --ebmenu1bb1-theme3-cart-badge-offset: -6px;
   --ebmenu1bb1-theme3-cart-badge-ring: 2px solid #14110f;

   /* --------------------------------------------------------
       PANELS WRAPPER
    -------------------------------------------------------- */
   --ebmenu1bb1-theme3-panels-wrapper-radius: 32px 32px 0 0;
   --ebmenu1bb1-theme3-panels-wrapper-shadow: none;

   /* --------------------------------------------------------
       PANEL (DARK GLASS)
    -------------------------------------------------------- */
   --ebmenu1bb1-theme3-panel-background: rgba(20, 17, 15, 0.86);
   --ebmenu1bb1-theme3-panel-border-color: rgba(168, 137, 79, 0.3);
   --ebmenu1bb1-theme3-panel-padding: 22px;
   --ebmenu1bb1-theme3-panel-gap: 18px;
   --ebmenu1bb1-theme3-panel-max-height: 55vh;
   --ebmenu1bb1-theme3-panel-blur: 22px;
   --ebmenu1bb1-theme3-panel-animation-duration: 0.45s;
   --ebmenu1bb1-theme3-panel-animation-easing: cubic-bezier(.22, 1, .36, 1);

   /* --------------------------------------------------------
       PANEL HEADER
    -------------------------------------------------------- */
   --ebmenu1bb1-theme3-panel-header-border-color: rgba(168, 137, 79, 0.3);
   --ebmenu1bb1-theme3-panel-header-padding-bottom: 16px;
   --ebmenu1bb1-theme3-panel-title-color: #f4ecdd;
   --ebmenu1bb1-theme3-panel-title-font-weight: 700;
   --ebmenu1bb1-theme3-panel-title-accent-color: var(--ebmenu1-primary-color);

   /* --------------------------------------------------------
       CLOSE BUTTON
    -------------------------------------------------------- */
   --ebmenu1bb1-theme3-close-button-background: rgba(168, 137, 79, 0.15);
   --ebmenu1bb1-theme3-close-button-icon-color: var(--ebmenu1-primary-color);
   --ebmenu1bb1-theme3-close-button-radius: 50%;
   --ebmenu1bb1-theme3-close-button-border: 1px solid rgba(168, 137, 79, 0.4);

   /* --------------------------------------------------------
       PANEL CONTENT
    -------------------------------------------------------- */
   --ebmenu1bb1-theme3-panel-content-gap: 15px;

   /* --------------------------------------------------------
       LIST ITEM
    -------------------------------------------------------- */
   --ebmenu1bb1-theme3-list-item-background: rgba(255, 255, 255, 0.04);
   --ebmenu1bb1-theme3-list-item-radius: 14px;
   --ebmenu1bb1-theme3-list-item-padding: 12px 14px;
   --ebmenu1bb1-theme3-list-item-text-color: #efe6d8;
   --ebmenu1bb1-theme3-list-item-text-font-weight: 600;
   --ebmenu1bb1-theme3-list-item-icon-color: var(--ebmenu1-primary-color);

   /* --------------------------------------------------------
       SHARE GRID
    -------------------------------------------------------- */
   --ebmenu1bb1-theme3-share-grid-gap: 12px;

   /* --------------------------------------------------------
       SHARE ICON — BASE (SQUIRCLE)
    -------------------------------------------------------- */
   --ebmenu1bb1-theme3-share-icon-color: #ffffff;
   --ebmenu1bb1-theme3-share-icon-radius: 16px;
   --ebmenu1bb1-theme3-share-icon-border: 1px solid rgba(255, 255, 255, 0.08);

   /* --------------------------------------------------------
       SOCIAL — FACEBOOK
    -------------------------------------------------------- */
   --ebmenu1bb1-theme3-facebook-background: #14324f;
   --ebmenu1bb1-theme3-facebook-icon-color: #4e9fef;

   /* --------------------------------------------------------
       SOCIAL — INSTAGRAM
    -------------------------------------------------------- */
   --ebmenu1bb1-theme3-instagram-background: #2a1720;
   --ebmenu1bb1-theme3-instagram-icon-color: #e6683c;

   /* --------------------------------------------------------
       SOCIAL — WHATSAPP
    -------------------------------------------------------- */
   --ebmenu1bb1-theme3-whatsapp-background: #103322;
   --ebmenu1bb1-theme3-whatsapp-icon-color: #34d17c;

   /* --------------------------------------------------------
       SOCIAL — TELEGRAM
    -------------------------------------------------------- */
   --ebmenu1bb1-theme3-telegram-background: #0f2d3d;
   --ebmenu1bb1-theme3-telegram-icon-color: #3db8ee;

   /* --------------------------------------------------------
       SOCIAL — TWITTER
    -------------------------------------------------------- */
   --ebmenu1bb1-theme3-twitter-background: #102838;
   --ebmenu1bb1-theme3-twitter-icon-color: #4cb8ef;

   /* --------------------------------------------------------
       SOCIAL — COPY
    -------------------------------------------------------- */
   --ebmenu1bb1-theme3-copy-background: #262220;
   --ebmenu1bb1-theme3-copy-icon-color: #cfc6b8;

   /* --------------------------------------------------------
       SOCIAL — EMAIL
    -------------------------------------------------------- */
   --ebmenu1bb1-theme3-email-background: #262220;
   --ebmenu1bb1-theme3-email-icon-color: #cfc6b8;

   /* --------------------------------------------------------
       SOCIAL — TIKTOK
    -------------------------------------------------------- */
   --ebmenu1bb1-theme3-tiktok-background: #1a1a1a;
   --ebmenu1bb1-theme3-tiktok-icon-color: #ffffff;

   /* --------------------------------------------------------
       SOCIAL — MESSENGER
    -------------------------------------------------------- */
   --ebmenu1bb1-theme3-messenger-background: #241a33;
   --ebmenu1bb1-theme3-messenger-icon-color: #b98cf0;

   /* --------------------------------------------------------
       PAGINATION
    -------------------------------------------------------- */
   --ebmenu1bb1-theme3-pagination-gap: 6px;
   --ebmenu1bb1-theme3-pagination-padding: 15px;
   --ebmenu1bb1-theme3-pagination-max-width: 25%;
   --ebmenu1bb1-theme3-pagination-item-background: transparent;
   --ebmenu1bb1-theme3-pagination-item-border: 1px solid rgba(168, 137, 79, 0.5);
   --ebmenu1bb1-theme3-pagination-item-color: var(--ebmenu1-primary-color);
   --ebmenu1bb1-theme3-pagination-active-background: var(--ebmenu1-primary-color);
   --ebmenu1bb1-theme3-pagination-active-color: #14110f;
   --ebmenu1bb1-theme3-pagination-dots-color: #8a7c68;
   --ebmenu1bb1-theme3-pagination-radius: 50%;
}

/* ============================================================
   MAIN WRAPPER
============================================================ */
.ebmenu1bb1-menu-container {
   position: fixed;
   bottom: 0;
   left: 0;
   width: var(--ebmenu1bb1-theme3-width-full);
   z-index: 200;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background-color: var(--ebmenu1bb1-theme3-bottom-bar-background);

}

/* ============================================================
   CART BADGE
============================================================ */
.ebmenu1bb1-cart-badge {
   position: absolute;
   top: var(--ebmenu1bb1-theme3-cart-badge-offset);
   right: var(--ebmenu1bb1-theme3-cart-badge-offset);
   background-color: var(--ebmenu1bb1-theme3-cart-badge-background);
   color: var(--ebmenu1bb1-theme3-cart-badge-color);
   min-width: var(--ebmenu1bb1-theme3-size-cart-badge-min-width);
   height: var(--ebmenu1bb1-theme3-size-cart-badge-height);
   padding: var(--ebmenu1bb1-theme3-cart-badge-padding);
   border-radius: var(--ebmenu1bb1-theme3-cart-badge-radius);
   border: var(--ebmenu1bb1-theme3-cart-badge-ring);
   font-size: var(--ebmenu1bb1-theme3-fs-cart-badge);
   font-weight: var(--ebmenu1bb1-theme3-cart-badge-font-weight);
   display: flex;
   align-items: center;
   justify-content: center;
   line-height: 1;
}

/* ============================================================
   BOTTOM BAR — FLOATING DOCK
============================================================ */
.ebmenu1bb1-btm-bar {
   display: flex;
    align-items: flex-end;
    gap: 10px;
    padding-inline: 10px;
   /* width: calc(100% - (var(--ebmenu1bb1-theme3-dock-side-margin) * 2)); */
   margin:  var(--ebmenu1bb1-theme3-dock-side-margin) var(--ebmenu1bb1-theme3-dock-bottom-margin);

   border-radius: var(--ebmenu1bb1-theme3-dock-radius);
   box-shadow: var(--ebmenu1bb1-theme3-bottom-bar-shadow);
   z-index: 2;
   direction: rtl;
   width: auto;
   max-width: var(--ebmenu1bb1-theme3-width-dock-max);
   /* margin-inline: auto; */
   border: 1px solid var(--ebmenu1bb1-theme3-bottom-bar-border-color);
}

.ebmenu1bb1-btm-bar-btn {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: var(--ebmenu1bb1-theme3-width-bottom-bar-item);
   background: var(--ebmenu1bb1-theme3-bottom-bar-button-background);
   color: var(--ebmenu1bb1-theme3-bottom-bar-button-text-color);
   border: none;
   cursor: pointer;
   gap: var(--ebmenu1bb1-theme3-bottom-bar-button-gap);
   padding: var(--ebmenu1bb1-theme3-bottom-bar-button-padding);
}

.ebmenu1bb1-btm-bar-icon-circle {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: var(--ebmenu1bb1-theme3-size-bottom-bar-icon);
   height: var(--ebmenu1bb1-theme3-size-bottom-bar-icon);
   background-color: var(--ebmenu1bb1-theme3-bottom-bar-icon-background);
   color: var(--ebmenu1bb1-theme3-bottom-bar-icon-color);
   border: 1px solid var(--ebmenu1bb1-theme3-bottom-bar-icon-border-color);
   box-shadow: var(--ebmenu1bb1-theme3-bottom-bar-icon-glow);
   border-radius: 50%;
   font-size: var(--ebmenu1bb1-theme3-fs-bottom-bar-icon);
}

.ebmenu1bb1-btm-bar-text {
   color: var(--ebmenu1bb1-theme3-bottom-bar-text-color);
   font-size: var(--ebmenu1bb1-theme3-fs-bottom-bar-text);
   font-weight: 700;
}

/* ============================================================
   PANELS WRAPPER
============================================================ */
.ebmenu1bb1-panels-wrapper {
   position: absolute;
   bottom: 100%;
   left: 0;
   width: var(--ebmenu1bb1-theme3-width-full);
   z-index: 1;
   overflow: hidden;
   border-radius: var(--ebmenu1bb1-theme3-panels-wrapper-radius);
   box-shadow: var(--ebmenu1bb1-theme3-panels-wrapper-shadow);
}

/* ============================================================
   PANEL
============================================================ */
.ebmenu1bb1-panel {
   display: flex;
   flex-direction: column;
   width: var(--ebmenu1bb1-theme3-width-full);
   background: var(--ebmenu1bb1-theme3-panel-background);
   backdrop-filter: blur(var(--ebmenu1bb1-theme3-panel-blur));
   -webkit-backdrop-filter: blur(var(--ebmenu1bb1-theme3-panel-blur));
   border-top: 1px solid var(--ebmenu1bb1-theme3-panel-border-color);
   padding: var(--ebmenu1bb1-theme3-panel-padding);
   gap: var(--ebmenu1bb1-theme3-panel-gap);
   height: fit-content;
   max-height: var(--ebmenu1bb1-theme3-panel-max-height);
   position: absolute;
   bottom: 0;
   transform: translateY(100%);
   opacity: 0;
   transition:
      transform var(--ebmenu1bb1-theme3-panel-animation-duration) var(--ebmenu1bb1-theme3-panel-animation-easing),
      opacity var(--ebmenu1bb1-theme3-panel-animation-duration) var(--ebmenu1bb1-theme3-panel-animation-easing);
   direction: rtl;
}

.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-theme3-width-full);
   border-bottom: 1px solid var(--ebmenu1bb1-theme3-panel-header-border-color);
   padding-bottom: var(--ebmenu1bb1-theme3-panel-header-padding-bottom);
   position: relative;
}

.ebmenu1bb1-panel-header::before {
   content: "";
   position: absolute;
   right: 0;
   bottom: -1px;
   width: 46px;
   height: 2px;
   background: var(--ebmenu1bb1-theme3-panel-title-accent-color);
}

/* ============================================================
   PANEL TITLE
============================================================ */
.ebmenu1bb1-panel-title {
   color: var(--ebmenu1bb1-theme3-panel-title-color);
   font-size: var(--ebmenu1bb1-theme3-fs-panel-title);
   font-weight: var(--ebmenu1bb1-theme3-panel-title-font-weight);
}

/* ============================================================
   CLOSE BUTTON
============================================================ */
.ebmenu1bb1-close-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   width: var(--ebmenu1bb1-theme3-size-close-button);
   height: var(--ebmenu1bb1-theme3-size-close-button);
   background-color: var(--ebmenu1bb1-theme3-close-button-background);
   color: var(--ebmenu1bb1-theme3-close-button-icon-color);
   border-radius: var(--ebmenu1bb1-theme3-close-button-radius);
   border: var(--ebmenu1bb1-theme3-close-button-border);
   cursor: pointer;
}

.ebmenu1bb1-close-btn svg {
   width: 55%;
   height: 55%;
}

/* ============================================================
   PANEL CONTENT
============================================================ */
.ebmenu1bb1-panel-content {
   display: flex;
   flex-direction: column;
   width: var(--ebmenu1bb1-theme3-width-full);
   gap: var(--ebmenu1bb1-theme3-panel-content-gap);
   overflow-y: auto;
}

/* ============================================================
   LIST ITEM
============================================================ */
.ebmenu1bb1-list-item {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   width: var(--ebmenu1bb1-theme3-width-full);
   background: var(--ebmenu1bb1-theme3-list-item-background);
   border-radius: var(--ebmenu1bb1-theme3-list-item-radius);
   padding: var(--ebmenu1bb1-theme3-list-item-padding);
   text-decoration: none;
}

.ebmenu1bb1-flex-between {
   justify-content: space-between;
}

.ebmenu1bb1-list-text {
   color: var(--ebmenu1bb1-theme3-list-item-text-color);
   font-size: var(--ebmenu1bb1-theme3-fs-list-text);
   font-weight: var(--ebmenu1bb1-theme3-list-item-text-font-weight);
}

.ebmenu1bb1-list-icon {
   color: var(--ebmenu1bb1-theme3-list-item-icon-color);
   font-size: var(--ebmenu1bb1-theme3-fs-list-icon);
}

/* ============================================================
   SHARE GRID
============================================================ */
.ebmenu1bb1-share-grid {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
   gap: var(--ebmenu1bb1-theme3-share-grid-gap);
}

/* ============================================================
   SHARE ICON — BASE
============================================================ */
.ebmenu1bb1-share-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: var(--ebmenu1bb1-theme3-size-share-icon);
   height: var(--ebmenu1bb1-theme3-size-share-icon);
   color: var(--ebmenu1bb1-theme3-share-icon-color);
   font-size: var(--ebmenu1bb1-theme3-fs-share-icon);
   border-radius: var(--ebmenu1bb1-theme3-share-icon-radius);
   border: var(--ebmenu1bb1-theme3-share-icon-border);
   text-decoration: none;
}

.ebmenu1bb1-share-icon.ebmenu1bb1-facebook {
   background: var(--ebmenu1bb1-theme3-facebook-background);
   color: var(--ebmenu1bb1-theme3-facebook-icon-color);
}

.ebmenu1bb1-share-icon.ebmenu1bb1-instagram {
   background: var(--ebmenu1bb1-theme3-instagram-background);
   color: var(--ebmenu1bb1-theme3-instagram-icon-color);
}

.ebmenu1bb1-share-icon.ebmenu1bb1-whatsapp {
   background: var(--ebmenu1bb1-theme3-whatsapp-background);
   color: var(--ebmenu1bb1-theme3-whatsapp-icon-color);
}

.ebmenu1bb1-share-icon.ebmenu1bb1-telegram {
   background: var(--ebmenu1bb1-theme3-telegram-background);
   color: var(--ebmenu1bb1-theme3-telegram-icon-color);
}

.ebmenu1bb1-share-icon.ebmenu1bb1-twitter {
   background: var(--ebmenu1bb1-theme3-twitter-background);
   color: var(--ebmenu1bb1-theme3-twitter-icon-color);
}

.ebmenu1bb1-share-icon.ebmenu1bb1-copy-link {
   background: var(--ebmenu1bb1-theme3-copy-background);
   color: var(--ebmenu1bb1-theme3-copy-icon-color);
}

.ebmenu1bb1-share-icon.ebmenu1bb1-mailto {
   background: var(--ebmenu1bb1-theme3-email-background);
   color: var(--ebmenu1bb1-theme3-email-icon-color);
}

.ebmenu1bb1-share-icon.ebmenu1bb1-tiktok {
   background: var(--ebmenu1bb1-theme3-tiktok-background);
   color: var(--ebmenu1bb1-theme3-tiktok-icon-color);
}

.ebmenu1bb1-share-icon.ebmenu1bb1-messenger {
   background: var(--ebmenu1bb1-theme3-messenger-background);
   color: var(--ebmenu1bb1-theme3-messenger-icon-color);
}

/* ============================================================
   PAGINATION
============================================================ */
.ebmenu1bb1-pagination {
   display: flex;
   justify-content: center;
   align-items: flex-start;
   gap: var(--ebmenu1bb1-theme3-pagination-gap);
   padding: var(--ebmenu1bb1-theme3-pagination-padding);
   direction: rtl;
   max-width: var(--ebmenu1bb1-theme3-pagination-max-width);
   overflow-x: auto;
   white-space: nowrap;
}

.ebmenu1bb1-pg-number {
   width: var(--ebmenu1bb1-theme3-size-pagination-item);
   height: var(--ebmenu1bb1-theme3-size-pagination-item);
   flex-shrink: 0;
   border-radius: var(--ebmenu1bb1-theme3-pagination-radius);
   background: var(--ebmenu1bb1-theme3-pagination-item-background);
   border: var(--ebmenu1bb1-theme3-pagination-item-border);
   color: var(--ebmenu1bb1-theme3-pagination-item-color);
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   font-size: var(--ebmenu1bb1-theme3-fs-pagination-number);
   font-weight: 700;
}

.ebmenu1bb1-pg-btn {
   width: var(--ebmenu1bb1-theme3-size-pagination-item);
   height: var(--ebmenu1bb1-theme3-size-pagination-item);
   flex-shrink: 0;
   border-radius: var(--ebmenu1bb1-theme3-pagination-radius);
   background: var(--ebmenu1bb1-theme3-pagination-item-background);
   border: var(--ebmenu1bb1-theme3-pagination-item-border);
   color: var(--ebmenu1bb1-theme3-pagination-item-color);
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   font-size: var(--ebmenu1bb1-theme3-fs-pagination-number);
   font-weight: 700;
}

.ebmenu1bb1-pg-number.ebmenu1bb1-active {
   background: var(--ebmenu1bb1-theme3-pagination-active-background);
   color: var(--ebmenu1bb1-theme3-pagination-active-color);
   border-color: var(--ebmenu1bb1-theme3-pagination-active-background);
}

.ebmenu1bb1-dots {
   font-size: var(--ebmenu1bb1-theme3-fs-pagination-dots);
   color: var(--ebmenu1bb1-theme3-pagination-dots-color);
}
/* ============================================================
   QR PANEL
============================================================ */

.ebmenu1bb1-qr-panel {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 16px;

    padding-block: 8px;

}

.ebmenu1bb1-qr-canvas {

    max-width: 100%;

    border-radius: 8px;

    background: #ffffff;

    padding: 8px;

}

.ebmenu1bb1-qr-download-btn {

    border: none;

    cursor: pointer;

    background: var(--ebmenu1-primary-color);

    color: #ffffff;

    padding: 10px 20px;

    border-radius: 8px;

    font-size: 14px;

    font-weight: 600;

    transition: 0.3s;

}

.ebmenu1bb1-qr-download-btn:hover {

    opacity: 0.9;

}