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


/* ============================================================
   ROOT VARIABLES — THEME 1
============================================================ */

:root {

   /* --------------------------------------------------------
       PALETTE — مبنية على متغيرات البراند (main.css)
    -------------------------------------------------------- */

   --ebmenu1bb1-theme2-color-gold: var(--ebmenu1-primary-color);
   --ebmenu1bb1-theme2-color-gold-soft: #D8BD86;
   --ebmenu1bb1-theme2-color-gold-dim: rgba(168, 137, 79, 0.32);
   --ebmenu1bb1-theme2-color-gold-glow: rgba(168, 137, 79, 0.45);
   --ebmenu1bb1-theme2-color-espresso: var(--ebmenu1-secondary-color);
   --ebmenu1bb1-theme2-color-ink: #241A15;
   --ebmenu1bb1-theme2-color-ink-deep: #170F0C;
   --ebmenu1bb1-theme2-color-ivory: #F6EFE4;
   --ebmenu1bb1-theme2-color-ivory-dim: rgba(246, 239, 228, 0.62);
   --ebmenu1bb1-theme2-color-ivory-faint: rgba(246, 239, 228, 0.1);

   /* --------------------------------------------------------
       WIDTHS / DOCK GEOMETRY
    -------------------------------------------------------- */

   --ebmenu1bb1-theme2-width-full: 100%;
   --ebmenu1bb1-theme2-width-dock-max: 560px;
   --ebmenu1bb1-theme2-width-bottom-bar-item: 20%;

   --ebmenu1bb1-theme2-dock-margin-inline: 14px;
   --ebmenu1bb1-theme2-dock-margin-block-end: 14px;
   --ebmenu1bb1-theme2-dock-radius: 26px;
   --ebmenu1bb1-theme2-dock-padding-inline: 6px;
   --ebmenu1bb1-theme2-dock-padding-block: 8px;

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

   --ebmenu1bb1-theme2-size-icon-shape: 40px;
   --ebmenu1bb1-theme2-radius-icon-shape: 30%;

   --ebmenu1bb1-theme2-size-fab: 56px;
   --ebmenu1bb1-theme2-radius-fab: 30%;
   --ebmenu1bb1-theme2-size-fab-lift: 18px;

   --ebmenu1bb1-theme2-size-cart-badge-min-width: 20px;
   --ebmenu1bb1-theme2-size-cart-badge-height: 20px;

   --ebmenu1bb1-theme2-size-close-button: 26px;
   --ebmenu1bb1-theme2-size-share-icon: 52px;
   --ebmenu1bb1-theme2-size-pagination-item: 24px;

   /* --------------------------------------------------------
       FONT SIZES — كل واحدة clamp لوحدها
    -------------------------------------------------------- */

   --ebmenu1bb1-theme2-fs-bottom-bar-text: clamp(0.62rem, 2.2vw, 0.76rem);
   --ebmenu1bb1-theme2-fs-bottom-bar-icon: clamp(1rem, 4vw, 1.15rem);
   --ebmenu1bb1-theme2-fs-fab-icon: clamp(1.2rem, 4.6vw, 1.4rem);
   --ebmenu1bb1-theme2-fs-panel-title: clamp(1rem, 3.6vw, 1.2rem);
   --ebmenu1bb1-theme2-fs-list-text: clamp(0.88rem, 3.4vw, 1.02rem);
   --ebmenu1bb1-theme2-fs-list-subtext: clamp(0.78rem, 3vw, 0.9rem);
   --ebmenu1bb1-theme2-fs-list-icon: clamp(1rem, 4vw, 1.15rem);
   --ebmenu1bb1-theme2-fs-share-icon: clamp(1.3rem, 4.6vw, 1.55rem);
   --ebmenu1bb1-theme2-fs-cart-badge: clamp(0.78rem, 1.9vw, 0.84rem);
   --ebmenu1bb1-theme2-fs-pagination-number: clamp(0.6rem, 2vw, 0.7rem);
   --ebmenu1bb1-theme2-fs-pagination-dots: clamp(0.95rem, 3vw, 1.1rem);

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

   --ebmenu1bb1-theme2-cart-badge-background: var(--ebmenu1bb1-theme2-color-gold);
   --ebmenu1bb1-theme2-cart-badge-color: var(--ebmenu1bb1-theme2-color-ink);
   --ebmenu1bb1-theme2-cart-badge-font-weight: 800;
   --ebmenu1bb1-theme2-cart-badge-padding: 0 4px;
   --ebmenu1bb1-theme2-cart-badge-radius: 50%;
   --ebmenu1bb1-theme2-cart-badge-offset-top: -3px;
   --ebmenu1bb1-theme2-cart-badge-offset-right: -3px;
   --ebmenu1bb1-theme2-cart-badge-border: 2px solid var(--ebmenu1bb1-theme2-color-ink-deep);

   /* --------------------------------------------------------
       DOCK (البار السفلي نفسه)
    -------------------------------------------------------- */

   --ebmenu1bb1-theme2-dock-background: linear-gradient(180deg, rgba(52, 38, 31, 0.94), rgba(28, 20, 16, 0.97));
   --ebmenu1bb1-theme2-dock-border-color: var(--ebmenu1bb1-theme2-color-gold-dim);
   --ebmenu1bb1-theme2-dock-shadow: 0 16px 34px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(246, 239, 228, 0.03) inset;
   --ebmenu1bb1-theme2-dock-blur: 18px;

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

   --ebmenu1bb1-theme2-bar-btn-background: transparent;
   --ebmenu1bb1-theme2-bar-btn-text-color: var(--ebmenu1bb1-theme2-color-ivory-dim);
   --ebmenu1bb1-theme2-bar-btn-text-color-hover: var(--ebmenu1bb1-theme2-color-gold-soft);
   --ebmenu1bb1-theme2-bar-btn-gap: 6px;
   --ebmenu1bb1-theme2-bar-btn-padding: 6px 4px;

   /* --------------------------------------------------------
       BOTTOM BAR ICON SHAPE (سكويركل بدل الدائرة)
    -------------------------------------------------------- */

   --ebmenu1bb1-theme2-icon-shape-background: rgba(246, 239, 228, 0.05);
   --ebmenu1bb1-theme2-icon-shape-border-color: rgba(246, 239, 228, 0.1);
   --ebmenu1bb1-theme2-icon-shape-color: var(--ebmenu1bb1-theme2-color-gold-soft);
   --ebmenu1bb1-theme2-icon-shape-color-hover: var(--ebmenu1bb1-theme2-color-ink);
   --ebmenu1bb1-theme2-icon-shape-background-hover: var(--ebmenu1bb1-theme2-color-gold);

   /* --------------------------------------------------------
       FAB — ميدالية "طلباتى" البارزة فوق الدوك
    -------------------------------------------------------- */

   --ebmenu1bb1-theme2-fab-background: linear-gradient(155deg, #E7CE93 0%, var(--ebmenu1bb1-theme2-color-gold) 55%, #8C6F3D 100%);
   --ebmenu1bb1-theme2-fab-color: var(--ebmenu1bb1-theme2-color-ink);
   --ebmenu1bb1-theme2-fab-ring-color: var(--ebmenu1bb1-theme2-color-ink-deep);
   --ebmenu1bb1-theme2-fab-ring-width: 3px;
   --ebmenu1bb1-theme2-fab-shadow: 0 6px 18px rgba(168, 137, 79, 0.5), 0 0 0 1px rgba(246, 239, 228, 0.06);
   --ebmenu1bb1-theme2-fab-text-color: var(--ebmenu1bb1-theme2-color-gold-soft);
   --ebmenu1bb1-theme2-fab-text-weight: 800;

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

   --ebmenu1bb1-theme2-panels-wrapper-radius: 32px 32px 0 0;

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

   --ebmenu1bb1-theme2-panel-background: linear-gradient(180deg, rgba(46, 33, 27, 0.97), rgba(24, 17, 14, 0.99));
   --ebmenu1bb1-theme2-panel-border-color: rgba(246, 239, 228, 0.06);
   --ebmenu1bb1-theme2-panel-padding: 22px 20px;
   --ebmenu1bb1-theme2-panel-gap: 18px;
   --ebmenu1bb1-theme2-panel-max-height: 52vh;
   --ebmenu1bb1-theme2-panel-blur: 22px;
   --ebmenu1bb1-theme2-panel-radius: 32px 32px 0 0;
   --ebmenu1bb1-theme2-panel-animation-duration: 0.45s;
   --ebmenu1bb1-theme2-panel-animation-easing: cubic-bezier(0.2, 0.8, 0.2, 1);

   --ebmenu1bb1-theme2-panel-rule-height: 3px;
   --ebmenu1bb1-theme2-panel-rule-color: linear-gradient(90deg, transparent, var(--ebmenu1bb1-theme2-color-gold) 45%, var(--ebmenu1bb1-theme2-color-gold) 55%, transparent);

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

   --ebmenu1bb1-theme2-panel-header-border-color: rgba(246, 239, 228, 0.08);
   --ebmenu1bb1-theme2-panel-header-padding-bottom: 14px;

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

   --ebmenu1bb1-theme2-panel-title-color: var(--ebmenu1bb1-theme2-color-ivory);
   --ebmenu1bb1-theme2-panel-title-font-weight: 700;
   --ebmenu1bb1-theme2-panel-title-underline-width: 28px;
   --ebmenu1bb1-theme2-panel-title-underline-height: 3px;
   --ebmenu1bb1-theme2-panel-title-underline-color: var(--ebmenu1bb1-theme2-color-gold);

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

   --ebmenu1bb1-theme2-close-button-background: transparent;
   --ebmenu1bb1-theme2-close-button-border-color: var(--ebmenu1bb1-theme2-color-gold-dim);
   --ebmenu1bb1-theme2-close-button-icon-color: var(--ebmenu1bb1-theme2-color-ivory-dim);
   --ebmenu1bb1-theme2-close-button-radius: 50%;
   --ebmenu1bb1-theme2-close-button-background-hover: var(--ebmenu1bb1-theme2-color-gold);
   --ebmenu1bb1-theme2-close-button-icon-color-hover: var(--ebmenu1bb1-theme2-color-ink);

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

   --ebmenu1bb1-theme2-panel-content-gap: 12px;

   /* --------------------------------------------------------
       LIST ITEM (الفروع / الواتساب)
    -------------------------------------------------------- */

   --ebmenu1bb1-theme2-list-item-background: rgba(246, 239, 228, 0.03);
   --ebmenu1bb1-theme2-list-item-border-color: rgba(246, 239, 228, 0.07);
   --ebmenu1bb1-theme2-list-item-radius: 16px;
   --ebmenu1bb1-theme2-list-item-padding: 14px 16px;
   --ebmenu1bb1-theme2-list-item-text-color: var(--ebmenu1bb1-theme2-color-ivory);
   --ebmenu1bb1-theme2-list-item-text-font-weight: 600;
   --ebmenu1bb1-theme2-list-item-subtext-color: var(--ebmenu1bb1-theme2-color-ivory-dim);
   --ebmenu1bb1-theme2-list-item-icon-color: var(--ebmenu1bb1-theme2-color-gold-soft);
   --ebmenu1bb1-theme2-list-item-background-hover: rgba(168, 137, 79, 0.1);
   --ebmenu1bb1-theme2-list-item-border-color-hover: var(--ebmenu1bb1-theme2-color-gold-dim);

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

   --ebmenu1bb1-theme2-share-grid-gap: 12px;
   --ebmenu1bb1-theme2-share-icon-color: #ffffff;
   --ebmenu1bb1-theme2-share-icon-radius: 30%;
   --ebmenu1bb1-theme2-share-icon-border-color: rgba(255, 255, 255, 0.14);
   --ebmenu1bb1-theme2-share-icon-shadow: 0 6px 14px rgba(0, 0, 0, 0.32);

   /* --------------------------------------------------------
       SOCIAL — الألوان الأصلية للبراندات محفوظة للتعرف عليها
    -------------------------------------------------------- */

   --ebmenu1bb1-theme2-facebook-background: #1877F2;
   --ebmenu1bb1-theme2-facebook-icon-color: #ffffff;

   --ebmenu1bb1-theme2-instagram-background: radial-gradient(circle at 30% 110%, #f9ce34 0%, #ee2a7b 45%, #6228d7 100%);
   --ebmenu1bb1-theme2-instagram-icon-color: #ffffff;

   --ebmenu1bb1-theme2-whatsapp-background: #25D366;
   --ebmenu1bb1-theme2-whatsapp-icon-color: #ffffff;

   --ebmenu1bb1-theme2-telegram-background: #0088CC;
   --ebmenu1bb1-theme2-telegram-icon-color: #ffffff;

   --ebmenu1bb1-theme2-twitter-background: #1DA1F2;
   --ebmenu1bb1-theme2-twitter-icon-color: #ffffff;

   --ebmenu1bb1-theme2-copy-background: var(--ebmenu1bb1-theme2-color-espresso);
   --ebmenu1bb1-theme2-copy-icon-color: var(--ebmenu1bb1-theme2-color-gold-soft);

   --ebmenu1bb1-theme2-email-background: var(--ebmenu1bb1-theme2-color-espresso);
   --ebmenu1bb1-theme2-email-icon-color: var(--ebmenu1bb1-theme2-color-gold-soft);

   --ebmenu1bb1-theme2-tiktok-background: #000000;
   --ebmenu1bb1-theme2-tiktok-icon-color: #ffffff;

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

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

   --ebmenu1bb1-theme2-pagination-gap: 6px;
   --ebmenu1bb1-theme2-pagination-padding: 14px;
   --ebmenu1bb1-theme2-pagination-max-width: 30%;
   --ebmenu1bb1-theme2-pagination-item-background: rgba(246, 239, 228, 0.06);
   --ebmenu1bb1-theme2-pagination-item-color: var(--ebmenu1bb1-theme2-color-ivory-dim);
   --ebmenu1bb1-theme2-pagination-active-background: var(--ebmenu1bb1-theme2-color-gold);
   --ebmenu1bb1-theme2-pagination-active-color: var(--ebmenu1bb1-theme2-color-ink);
   --ebmenu1bb1-theme2-pagination-dots-color: var(--ebmenu1bb1-theme2-color-ivory-dim);
   --ebmenu1bb1-theme2-pagination-radius: 50%;
}


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

.ebmenu1bb1-menu-container {
   position: fixed;
   bottom: 0;
   left: 0;
   width: var(--ebmenu1bb1-theme2-width-full);
   z-index: 200;
   display: flex;
   flex-direction: column;
   align-items: center;
}


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

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


/* ============================================================
   BOTTOM BAR — الدوك العائم
============================================================ */

.ebmenu1bb1-btm-bar {
   display: flex;
   align-items: flex-end;
   width: auto;
   max-width: var(--ebmenu1bb1-theme2-width-dock-max);
   margin: 0 var(--ebmenu1bb1-theme2-dock-margin-inline) var(--ebmenu1bb1-theme2-dock-margin-block-end);
   padding: var(--ebmenu1bb1-theme2-dock-padding-block) var(--ebmenu1bb1-theme2-dock-padding-inline);
   background: var(--ebmenu1bb1-theme2-dock-background);
   border: 1px solid var(--ebmenu1bb1-theme2-dock-border-color);
   border-radius: var(--ebmenu1bb1-theme2-dock-radius);
   box-shadow: var(--ebmenu1bb1-theme2-dock-shadow);
   backdrop-filter: blur(var(--ebmenu1bb1-theme2-dock-blur));
   -webkit-backdrop-filter: blur(var(--ebmenu1bb1-theme2-dock-blur));
   z-index: 2;
   direction: rtl;
}


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

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

.ebmenu1bb1-btm-bar-btn:hover,
.ebmenu1bb1-btm-bar-btn:focus-visible {
   color: var(--ebmenu1bb1-theme2-bar-btn-text-color-hover);
}

.ebmenu1bb1-btm-bar-btn:focus-visible {
   outline: 2px solid var(--ebmenu1bb1-theme2-color-gold-soft);
   outline-offset: 3px;
   border-radius: 8px;
}


/* ============================================================
   BOTTOM BAR ICON SHAPE (سكويركل بدل الدائرة الكلاسيك)
============================================================ */

.ebmenu1bb1-btm-bar-icon-circle {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: var(--ebmenu1bb1-theme2-size-icon-shape);
   height: var(--ebmenu1bb1-theme2-size-icon-shape);
   background-color: var(--ebmenu1bb1-theme2-icon-shape-background);
   border: 1px solid var(--ebmenu1bb1-theme2-icon-shape-border-color);
   color: var(--ebmenu1bb1-theme2-icon-shape-color);
   border-radius: var(--ebmenu1bb1-theme2-radius-icon-shape);
   font-size: var(--ebmenu1bb1-theme2-fs-bottom-bar-icon);
   transition: 0.25s ease;
}

.ebmenu1bb1-btm-bar-btn:hover .ebmenu1bb1-btm-bar-icon-circle,
.ebmenu1bb1-btm-bar-btn:focus-visible .ebmenu1bb1-btm-bar-icon-circle {
   background-color: var(--ebmenu1bb1-theme2-icon-shape-background-hover);
   color: var(--ebmenu1bb1-theme2-icon-shape-color-hover);
   border-color: transparent;
}


/* ============================================================
   FAB — ميدالية "طلباتى" البارزة (العنصر المميز في التصميم)
============================================================ */

#usd-toggle-aside-ords-btn {
   justify-content: flex-end;
}

#usd-toggle-aside-ords-btn .ebmenu1bb1-btm-bar-icon-circle {
   width: var(--ebmenu1bb1-theme2-size-fab);
   height: var(--ebmenu1bb1-theme2-size-fab);
   margin-top: calc(-1 * var(--ebmenu1bb1-theme2-size-fab-lift));
   background: var(--ebmenu1bb1-theme2-fab-background);
   color: var(--ebmenu1bb1-theme2-fab-color);
   border: var(--ebmenu1bb1-theme2-fab-ring-width) solid var(--ebmenu1bb1-theme2-fab-ring-color);
   border-radius: var(--ebmenu1bb1-theme2-radius-fab);
   box-shadow: var(--ebmenu1bb1-theme2-fab-shadow);
   font-size: var(--ebmenu1bb1-theme2-fs-fab-icon);
}

#usd-toggle-aside-ords-btn:hover .ebmenu1bb1-btm-bar-icon-circle,
#usd-toggle-aside-ords-btn:focus-visible .ebmenu1bb1-btm-bar-icon-circle {
   background: var(--ebmenu1bb1-theme2-fab-background);
   color: var(--ebmenu1bb1-theme2-fab-color);
   transform: translateY(-2px);
}

#usd-toggle-aside-ords-btn .ebmenu1bb1-btm-bar-text {
   color: var(--ebmenu1bb1-theme2-fab-text-color);
   font-weight: var(--ebmenu1bb1-theme2-fab-text-weight);
}


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

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


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

.ebmenu1bb1-panels-wrapper {
   position: absolute;
   bottom: 100%;
   left: 0;
   width: var(--ebmenu1bb1-theme2-width-full);
   z-index: 1;
   overflow: hidden;
   border-radius: var(--ebmenu1bb1-theme2-panels-wrapper-radius);
}


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

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

.ebmenu1bb1-panel::before {
   content: "";
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 60%;
   height: var(--ebmenu1bb1-theme2-panel-rule-height);
   background: var(--ebmenu1bb1-theme2-panel-rule-color);
   border-radius: 0 0 4px 4px;
}


/* ============================================================
   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-theme2-width-full);
   border-bottom: 1px solid var(--ebmenu1bb1-theme2-panel-header-border-color);
   padding-bottom: var(--ebmenu1bb1-theme2-panel-header-padding-bottom);
}


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

.ebmenu1bb1-panel-title {
   position: relative;
   display: inline-flex;
   flex-direction: column;
   gap: 6px;
   color: var(--ebmenu1bb1-theme2-panel-title-color);
   font-size: var(--ebmenu1bb1-theme2-fs-panel-title);
   font-weight: var(--ebmenu1bb1-theme2-panel-title-font-weight);
}

.ebmenu1bb1-panel-title::after {
   content: "";
   width: var(--ebmenu1bb1-theme2-panel-title-underline-width);
   height: var(--ebmenu1bb1-theme2-panel-title-underline-height);
   border-radius: 3px;
   background: var(--ebmenu1bb1-theme2-panel-title-underline-color);
}


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

.ebmenu1bb1-close-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   width: var(--ebmenu1bb1-theme2-size-close-button);
   height: var(--ebmenu1bb1-theme2-size-close-button);
   background-color: var(--ebmenu1bb1-theme2-close-button-background);
   border: 1px solid var(--ebmenu1bb1-theme2-close-button-border-color);
   color: var(--ebmenu1bb1-theme2-close-button-icon-color);
   border-radius: var(--ebmenu1bb1-theme2-close-button-radius);
   cursor: pointer;
   transition: 0.25s ease;
}

.ebmenu1bb1-close-btn:hover,
.ebmenu1bb1-close-btn:focus-visible {
   background-color: var(--ebmenu1bb1-theme2-close-button-background-hover);
   color: var(--ebmenu1bb1-theme2-close-button-icon-color-hover);
   border-color: transparent;
}

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


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

.ebmenu1bb1-panel-content {
   display: flex;
   flex-direction: column;
   width: var(--ebmenu1bb1-theme2-width-full);
   gap: var(--ebmenu1bb1-theme2-panel-content-gap);
   overflow-y: auto;
}


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

.ebmenu1bb1-list-item {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   width: var(--ebmenu1bb1-theme2-width-full);
   background: var(--ebmenu1bb1-theme2-list-item-background);
   border: 1px solid var(--ebmenu1bb1-theme2-list-item-border-color);
   border-radius: var(--ebmenu1bb1-theme2-list-item-radius);
   padding: var(--ebmenu1bb1-theme2-list-item-padding);
   text-decoration: none;
   transition: 0.25s ease;
}

.ebmenu1bb1-list-item:hover,
.ebmenu1bb1-list-item:focus-visible {
   background: var(--ebmenu1bb1-theme2-list-item-background-hover);
   border-color: var(--ebmenu1bb1-theme2-list-item-border-color-hover);
}


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

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


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

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

.ebmenu1bb1-list-text+.ebmenu1bb1-list-text {
   color: var(--ebmenu1bb1-theme2-list-item-subtext-color);
   font-size: var(--ebmenu1bb1-theme2-fs-list-subtext);
   font-weight: 500;
}


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

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


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

.ebmenu1bb1-share-grid {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
   gap: var(--ebmenu1bb1-theme2-share-grid-gap);
}


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

.ebmenu1bb1-share-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: var(--ebmenu1bb1-theme2-size-share-icon);
   height: var(--ebmenu1bb1-theme2-size-share-icon);
   color: var(--ebmenu1bb1-theme2-share-icon-color);
   font-size: var(--ebmenu1bb1-theme2-fs-share-icon);
   border-radius: var(--ebmenu1bb1-theme2-share-icon-radius);
   border: 1px solid var(--ebmenu1bb1-theme2-share-icon-border-color);
   box-shadow: var(--ebmenu1bb1-theme2-share-icon-shadow);
   text-decoration: none;
   transition: transform 0.25s ease;
}

.ebmenu1bb1-share-icon:hover,
.ebmenu1bb1-share-icon:focus-visible {
   transform: translateY(-3px);
}


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

.ebmenu1bb1-pg-number {
   width: var(--ebmenu1bb1-theme2-size-pagination-item);
   height: var(--ebmenu1bb1-theme2-size-pagination-item);
   flex-shrink: 0;
   border-radius: var(--ebmenu1bb1-theme2-pagination-radius);
   background: var(--ebmenu1bb1-theme2-pagination-item-background);
   color: var(--ebmenu1bb1-theme2-pagination-item-color);
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   font-size: var(--ebmenu1bb1-theme2-fs-pagination-number);
   font-weight: 700;
   letter-spacing: 0.2px;
   transition: 0.25s ease;
}


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

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


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

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


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

.ebmenu1bb1-dots {
   font-size: var(--ebmenu1bb1-theme2-fs-pagination-dots);
   color: var(--ebmenu1bb1-theme2-pagination-dots-color);
}


/* ============================================================
   ACCESSIBILITY / MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

   .ebmenu1bb1-panel,
   .ebmenu1bb1-btm-bar-icon-circle,
   .ebmenu1bb1-share-icon,
   .ebmenu1bb1-btm-bar-btn,
   .ebmenu1bb1-close-btn,
   .ebmenu1bb1-list-item {
      transition: none !important;
   }
}