:root {
    /* --- WIDTHS --- */
    --ebmenu1bb-width-full: 100%;
    --ebmenu1bb-width-btm-bar-item: 25%;
    --ebmenu1bb-size-btm-bar-icon: 40px;
    --ebmenu1bb-size-close-btn: 24px;
    --ebmenu1bb-size-share-icon: 50px;

    /* --- FONT SIZES (Clamped) --- */
    --ebmenu1bb-fs-small: clamp(0.7rem, 2.5vw, 0.85rem);
    --ebmenu1bb-fs-medium: clamp(0.9rem, 3.5vw, 1.1rem);
    --ebmenu1bb-fs-large: clamp(1.1rem, 4.5vw, 1.3rem);
    --ebmenu1bb-fs-xlarge: clamp(1.5rem, 5vw, 1.8rem);

    /* --- COLORS --- */
    /* btm-bar Bar Colors */
    --ebmenu1bb-btm-bar-bg: #ffffff;
    --ebmenu1bb-btm-bar-icon-bg: #E02310;
    --ebmenu1bb-btm-bar-icon-color: #ffffff;
    --ebmenu1bb-btm-bar-text-color: #E02310;
    --ebmenu1bb-btm-bar-border-top: #eeeeee;

    /* Panel & Glassmorphism Colors */
    --ebmenu1bb-panel-bg: rgba(255, 255, 255, 0.85);
    /* Glass White */
    --ebmenu1bb-panel-border-top: #eeeeee;
    --ebmenu1bb-header-title-color: #000000;
    --ebmenu1bb-header-border-color: #eeeeee;

    /* Close Button Colors */
    --ebmenu1bb-close-bg: #cccccc;
    --ebmenu1bb-close-icon: #ffffff;

    /* List Item Colors */
    --ebmenu1bb-list-text-color: #333333;
    --ebmenu1bb-list-wa-icon: #000000;

    /* Social Share Brands */
    --ebmenu1bb-color-twitter: #1da1f2;
    --ebmenu1bb-color-fb: #1877f2;
    --ebmenu1bb-color-copy: #888888;
    --ebmenu1bb-color-wa-alt: #25d366;
    --ebmenu1bb-color-email: #888888;
    --ebmenu1bb-color-tg: #0088cc;
    --ebmenu1bb-color-li: #0077b5;
}

/* =========================================
   BASE STYLES (No separate margins/padding)
   ========================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* =========================================
   MAIN WRAPPER
   ========================================= */
.ebmenu1bb-menu-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    display: flex;
    flex-direction: column;
    display: flex;
}

.ebmenu1bb-btm-bar-icon-circle {
    position: relative; /* مهم عشان البادج */
}

.ebmenu1bb-cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;

    background-color: #0B2D72; /* أو أحمر لو عايز */
    color: #fff;

    min-width: 18px;
    height: 18px;
    padding: 0 5px;

    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;

    display: flex;
    align-items: center;
    justify-content: center;

    line-height: 1;
}

/* =========================================
   BOTTOM  BAR
   ========================================= */
.ebmenu1bb-btm-bar {
    display: flex;
    width: 100%;
    background-color: var(--ebmenu1bb-btm-bar-bg);
    border-top: 1px solid var(--ebmenu1bb-btm-bar-border-top);
    z-index: 2;
    /* Keeps btm-bar above panels when they slide down */
    direction: rtl;
    /* To order from right to left as per image */
}

.ebmenu1bb-btm-bar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 25%;
    background: none;
    border: none;
    cursor: pointer;
    gap: 8px;
    padding: 12px 0px;
}

.ebmenu1bb-btm-bar-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--ebmenu1bb-btm-bar-icon-bg);
    color: var(--ebmenu1bb-btm-bar-icon-color);
    border-radius: 50%;
    font-size: var(--ebmenu1bb-fs-large);
}

.ebmenu1bb-btm-bar-text {
    color: var(--ebmenu1bb-btm-bar-text-color);
    font-size: var(--ebmenu1bb-fs-small);
    font-weight: bold;
}

/* =========================================
   GLASS PANELS
   ========================================= */
.ebmenu1bb-panels-wrapper {
    position: absolute;
    bottom: 100%;
    /* Sits exactly on top of the btm-bar bar with 0 distance */
    left: 0;
    width: 100%;
    z-index: 1;
    overflow: hidden;
    border-radius: 40px 40px 0px 0px;
    box-shadow: 4px 4px 4px 8px var(--ebmenu1bb-header-border-color);
    /* Hides panels when they slide down */
}

.ebmenu1bb-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--ebmenu1bb-panel-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid var(--ebmenu1bb-panel-border-top);
    padding: 20px;
    /* Equal padding in all directions */
    gap: 20px;
    /* Gap between header and content */

    /* Height restriction to prevent covering hero */
    height: fit-content;
    max-height: 50vh;

    /* Sliding Animation */
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
    direction: rtl;
}

.ebmenu1bb-panel.ebmenu1bb-active {
    position: relative;
    transform: translateY(0);
    opacity: 1;
}

/* =========================================
   PANEL HEADER
   ========================================= */
.ebmenu1bb-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid var(--ebmenu1bb-header-border-color);
    padding-bottom: 15px;
}

.ebmenu1bb-panel-title {
    color: var(--ebmenu1bb-header-title-color);
    font-size: var(--ebmenu1bb-fs-medium);
    font-weight: bold;
}

.ebmenu1bb-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: var(--ebmenu1bb-close-bg);
    color: var(--ebmenu1bb-close-icon);
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

/* =========================================
   PANEL CONTENT & LISTS
   ========================================= */
.ebmenu1bb-panel-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 15px;
    overflow-y: auto;
}

.ebmenu1bb-list-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    text-decoration: none;
}

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

.ebmenu1bb-list-text {
    color: var(--ebmenu1bb-list-text-color);
    font-size: var(--ebmenu1bb-fs-medium);
    font-weight: 600;
}

.ebmenu1bb-list-icon {
    color: var(--ebmenu1bb-list-wa-icon);
    font-size: var(--ebmenu1bb-fs-large);
}

/* Share Icons Grid */
.ebmenu1bb-share-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
}

.ebmenu1bb-share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: #ffffff;
    font-size: var(--ebmenu1bb-fs-xlarge);
    border-radius: 8px;
    text-decoration: none;
}