/* ============================================================
   EBMENU1ASIDEORD1 — Orders Aside
   Namespace : ebmenu1asideord1
============================================================ */


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

:root {

    /* --------------------------------------------------------
       OVERLAY
    -------------------------------------------------------- */

    --ebmenu1asideord1-overlay-background:
        rgba(0, 0, 0, 0.5);


    /* --------------------------------------------------------
       ASIDE CONTAINER
    -------------------------------------------------------- */

    --ebmenu1asideord1-container-background:
        #ffffff;

    --ebmenu1asideord1-container-border-color:
        #e0e0e0;

    --ebmenu1asideord1-container-width:
        85vw;

    --ebmenu1asideord1-container-max-width:
        450px;

    --ebmenu1asideord1-container-gap:
        12px;


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

    --ebmenu1asideord1-header-padding:
        15px;

    --ebmenu1asideord1-header-title-color:
        #000000;

    --ebmenu1asideord1-header-title-font-size:
        clamp(1.1rem, 4vw, 1.3rem);

    --ebmenu1asideord1-header-title-font-weight:
        700;

    --ebmenu1asideord1-header-icon-color:
        #000000;

    --ebmenu1asideord1-header-icon-font-size:
        clamp(1.1rem, 4vw, 1.3rem);


    /* --------------------------------------------------------
       ORDERS LIST
    -------------------------------------------------------- */

    --ebmenu1asideord1-orders-padding-inline:
        15px;

    --ebmenu1asideord1-orders-padding-bottom:
        120px;


    /* --------------------------------------------------------
       ORDER ITEM
    -------------------------------------------------------- */

    --ebmenu1asideord1-item-border-color:
        #555555;

    --ebmenu1asideord1-item-border-width:
        1px;

    --ebmenu1asideord1-item-border-style:
        dashed;

    --ebmenu1asideord1-item-padding-block:
        12px;


    /* --------------------------------------------------------
       PRODUCT IMAGE
    -------------------------------------------------------- */

    --ebmenu1asideord1-product-image-size:
        70px;


    /* --------------------------------------------------------
       PRODUCT INFO
    -------------------------------------------------------- */

    --ebmenu1asideord1-item-info-gap:
        8px;


    /* --------------------------------------------------------
       PRODUCT TEXT CONTAINER
    -------------------------------------------------------- */

    --ebmenu1asideord1-text-gap:
        4px;


    /* --------------------------------------------------------
       PRODUCT NAME
    -------------------------------------------------------- */

    --ebmenu1asideord1-name-color:
        #000000;

    --ebmenu1asideord1-name-font-size:
        clamp(1.1rem, 4vw, 1.3rem);

    --ebmenu1asideord1-name-font-weight:
        400;


    /* --------------------------------------------------------
       PRODUCT PRICE
    -------------------------------------------------------- */

    --ebmenu1asideord1-price-color:
        #000000;

    --ebmenu1asideord1-price-font-size:
        clamp(1.1rem, 4vw, 1.3rem);

    --ebmenu1asideord1-price-font-weight:
        400;


    /* --------------------------------------------------------
       PRODUCT ACTIONS
    -------------------------------------------------------- */

    --ebmenu1asideord1-actions-gap:
        8px;


    /* --------------------------------------------------------
       DELETE BUTTON
    -------------------------------------------------------- */

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

    --ebmenu1asideord1-delete-color:
        #ffffff;

    --ebmenu1asideord1-delete-padding:
        2px;

    --ebmenu1asideord1-delete-radius:
        5px;

    --ebmenu1asideord1-delete-font-size:
        clamp(0.75rem, 2.5vw, 0.9rem);

    --ebmenu1asideord1-delete-font-weight:
        700;


    /* --------------------------------------------------------
       QUANTITY CONTROLLER
    -------------------------------------------------------- */

    --ebmenu1asideord1-qty-height:
        35px;

    --ebmenu1asideord1-qty-border-width:
        1.5px;

    --ebmenu1asideord1-qty-border-color:
        #000000;

    --ebmenu1asideord1-qty-radius:
        50px;

    --ebmenu1asideord1-qty-button-padding-inline:
        8px;

    --ebmenu1asideord1-qty-button-color:
        #000000;

    --ebmenu1asideord1-qty-value-color:
        #000000;

    --ebmenu1asideord1-qty-value-border-color:
        #000000;

    --ebmenu1asideord1-qty-value-font-size:
        clamp(0.9rem, 3vw, 1.1rem);

    --ebmenu1asideord1-qty-value-font-weight:
        600;


    /* --------------------------------------------------------
       FOOTER
    -------------------------------------------------------- */

    --ebmenu1asideord1-footer-background:
        #ffffff;

    --ebmenu1asideord1-footer-border-color:
        #e0e0e0;

    --ebmenu1asideord1-footer-border-width:
        1px;

    --ebmenu1asideord1-footer-radius:
        8px 8px 0 0;

    --ebmenu1asideord1-footer-padding-top:
        4px;


    /* --------------------------------------------------------
       TOTAL
    -------------------------------------------------------- */

    --ebmenu1asideord1-total-gap:
        8px;

    --ebmenu1asideord1-total-padding-inline:
        15px;

    --ebmenu1asideord1-total-margin-bottom:
        12px;


    /* --------------------------------------------------------
       TOTAL LABEL
    -------------------------------------------------------- */

    --ebmenu1asideord1-total-label-color:
        #000000;

    --ebmenu1asideord1-total-label-font-size:
        clamp(1.1rem, 4vw, 1.3rem);

    --ebmenu1asideord1-total-label-font-weight:
        400;


    /* --------------------------------------------------------
       TOTAL PRICE
    -------------------------------------------------------- */

    --ebmenu1asideord1-total-price-color:
        #000000;

    --ebmenu1asideord1-total-price-font-size:
        clamp(1.1rem, 4vw, 1.3rem);

    --ebmenu1asideord1-total-price-font-weight:
        700;


    /* --------------------------------------------------------
       CHECKOUT BUTTON
    -------------------------------------------------------- */

    --ebmenu1asideord1-checkout-background:
        var(--ebmenu1-secondary-color);

    --ebmenu1asideord1-checkout-color:
        #ffffff;

    --ebmenu1asideord1-checkout-height:
        40px;

    --ebmenu1asideord1-checkout-radius:
        8px 8px 0 0;

    --ebmenu1asideord1-checkout-font-size:
        clamp(1.1rem, 4vw, 1.3rem);

    --ebmenu1asideord1-checkout-font-weight:
        600;


    /* --------------------------------------------------------
       CHECKOUT DISABLED
    -------------------------------------------------------- */

    --ebmenu1asideord1-checkout-disabled-background:
        #999999;

    --ebmenu1asideord1-checkout-disabled-color:
        #fd4f4f;

    --ebmenu1asideord1-checkout-disabled-opacity:
        0.6;


    /* --------------------------------------------------------
       EMPTY CART BUTTON
    -------------------------------------------------------- */

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

    --ebmenu1asideord1-empty-color:
        #ffffff;

    --ebmenu1asideord1-empty-height:
        40px;

    --ebmenu1asideord1-empty-radius:
        0;

    --ebmenu1asideord1-empty-font-size:
        clamp(1.1rem, 4vw, 1.3rem);

    --ebmenu1asideord1-empty-font-weight:
        600;


    /* --------------------------------------------------------
       ANIMATION
    -------------------------------------------------------- */

    --ebmenu1asideord1-transition-duration:
        0.3s;

    --ebmenu1asideord1-transition-easing:
        ease;

}


/* ============================================================
   OVERLAY
============================================================ */

.ebmenu1asideord1-overlay {

    position: fixed;

    inset: 0;

    background:
        var(--ebmenu1asideord1-overlay-background);

    z-index: 2000;

    min-height: 90vh;

    max-height: 100vh;

    display: flex;

    justify-content: flex-start;

    transform: translateX(100%);

    transition:
        transform var(--ebmenu1asideord1-transition-duration) var(--ebmenu1asideord1-transition-easing),

        opacity var(--ebmenu1asideord1-transition-duration) var(--ebmenu1asideord1-transition-easing);

    opacity: 0;

    visibility: hidden;

}


/* ============================================================
   ASIDE CONTAINER
============================================================ */

.ebmenu1asideord1-container {

    width:
        var(--ebmenu1asideord1-container-width);

    max-width:
        var(--ebmenu1asideord1-container-max-width);

    background:
        var(--ebmenu1asideord1-container-background);

    display: flex;

    justify-content: flex-start;

    flex-direction: column;

    gap:
        var(--ebmenu1asideord1-container-gap);

    transition:
        transform var(--ebmenu1asideord1-transition-duration) var(--ebmenu1asideord1-transition-easing);

    z-index: 1000;

}


/* ============================================================
   ACTIVE OVERLAY
============================================================ */

.ebmenu1asideord1-overlay.ebmenu1asideord1-active {

    opacity: 1;

    visibility: visible;

    transform: translateX(0);

}


/* ============================================================
   ACTIVE ASIDE
============================================================ */

.ebmenu1asideord1-container.ebmenu1asideord1-active {

    transform: translateX(0);

}


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

.ebmenu1asideord1-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding:
        var(--ebmenu1asideord1-header-padding);

}


/* ============================================================
   HEADER TITLE
============================================================ */

.ebmenu1asideord1-title {

    font-size:
        var(--ebmenu1asideord1-header-title-font-size);

    color:
        var(--ebmenu1asideord1-header-title-color);

    font-weight:
        var(--ebmenu1asideord1-header-title-font-weight);

}


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

.ebmenu1asideord1-close {

    background: none;

    border: none;

    font-size:
        var(--ebmenu1asideord1-header-icon-font-size);

    color:
        var(--ebmenu1asideord1-header-icon-color);

    cursor: pointer;

}


/* ============================================================
   ORDERS LIST
============================================================ */

.ebmenu1asideord1-orders {

    overflow-y: auto;

    flex: 1;

    padding-inline:
        var(--ebmenu1asideord1-orders-padding-inline);

    padding-bottom:
        var(--ebmenu1asideord1-orders-padding-bottom);

}


/* ============================================================
   SINGLE ORDER ITEM
============================================================ */

.ebmenu1asideord1-item {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    border-bottom:
        var(--ebmenu1asideord1-item-border-width) var(--ebmenu1asideord1-item-border-style) var(--ebmenu1asideord1-item-border-color);

    padding-block:
        var(--ebmenu1asideord1-item-padding-block);

    direction: ltr;

}


/* ============================================================
   ITEM INFO
============================================================ */

.ebmenu1asideord1-item-info {

    display: flex;

    gap:
        var(--ebmenu1asideord1-item-info-gap);

    align-items: flex-start;

}


/* ============================================================
   PRODUCT IMAGE
============================================================ */

.ebmenu1asideord1-img {

    width:
        var(--ebmenu1asideord1-product-image-size);

    aspect-ratio: 1 / 1;

    object-fit: cover;

}


/* ============================================================
   PRODUCT TEXT
============================================================ */

.ebmenu1asideord1-text {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    direction: rtl;

    gap:
        var(--ebmenu1asideord1-text-gap);

}


/* ============================================================
   PRODUCT NAME
============================================================ */

.ebmenu1asideord1-name {

    font-size:
        var(--ebmenu1asideord1-name-font-size);

    color:
        var(--ebmenu1asideord1-name-color);

    font-weight:
        var(--ebmenu1asideord1-name-font-weight);

}


/* ============================================================
   PRODUCT PRICE
============================================================ */

.ebmenu1asideord1-price {

    font-size:
        var(--ebmenu1asideord1-price-font-size);

    color:
        var(--ebmenu1asideord1-price-color);

    font-weight:
        var(--ebmenu1asideord1-price-font-weight);

}


/* ============================================================
   PRODUCT ACTIONS
============================================================ */

.ebmenu1asideord1-actions {

    display: flex;

    flex-direction: row;

    align-items: flex-start;

    justify-content: flex-start;

    gap:
        var(--ebmenu1asideord1-actions-gap);

    direction: ltr;

}


/* ============================================================
   DELETE BUTTON
============================================================ */

.ebmenu1asideord1-delete {

    color:
        var(--ebmenu1asideord1-delete-color);

    cursor: pointer;

    background:
        var(--ebmenu1asideord1-delete-background);

    padding:
        var(--ebmenu1asideord1-delete-padding);

    border-radius:
        var(--ebmenu1asideord1-delete-radius);

    border: none;

    font-size:
        var(--ebmenu1asideord1-delete-font-size);

    font-weight:
        var(--ebmenu1asideord1-delete-font-weight);

}


/* ============================================================
   QUANTITY CONTROLLER
============================================================ */

.ebmenu1asideord1-qty {

    display: flex;

    align-items: center;

    width: fit-content;

    height:

/* Choice popup (bottom-up) */
.ebmenu1asideord1-choice-overlay{position:fixed;inset:0;display:flex;align-items:flex-end;justify-content:center;z-index:4000;pointer-events:none}
.ebmenu1asideord1-choice-overlay.ebmenu1asideord1-active{pointer-events:auto}
.ebmenu1asideord1-choice-popup{background:#fff;border-radius:10px;padding:12px;margin:16px;width:calc(100% - 40px);max-width:520px;box-shadow:0 8px 30px rgba(0,0,0,0.25);transform:translateY(24px);opacity:0;transition:transform .28s ease,opacity .28s ease}
.ebmenu1asideord1-choice-overlay.ebmenu1asideord1-active .ebmenu1asideord1-choice-popup{transform:translateY(0);opacity:1}
.ebmenu1asideord1-choice-row{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:8px}
.ebmenu1asideord1-choice-btn{flex:1;padding:10px 12px;border-radius:8px;border:none;background:var(--ebmenu1asideord1-checkout);color:#fff;font-weight:700}
.ebmenu1asideord1-choice-help{width:36px;height:36px;border-radius:50%;border:none;background:#f3f3f3}
.ebmenu1asideord1-choice-cancel{background:none;border:1px solid #ddd;padding:8px 12px;border-radius:8px}
        var(--ebmenu1asideord1-qty-height);

    border:
        var(--ebmenu1asideord1-qty-border-width) solid var(--ebmenu1asideord1-qty-border-color);

    border-radius:
        var(--ebmenu1asideord1-qty-radius);

    overflow: hidden;

}


/* ============================================================
   QUANTITY BUTTON
============================================================ */

.ebmenu1asideord1-qty-btn {

    background: none;

    border: none;

    cursor: pointer;

    padding-inline:
        var(--ebmenu1asideord1-qty-button-padding-inline);

    height: 100%;

    color:
        var(--ebmenu1asideord1-qty-button-color);

}


/* ============================================================
   QUANTITY VALUE
============================================================ */

.ebmenu1asideord1-qty-value {

    background: none;

    border: none;

    padding-inline:
        var(--ebmenu1asideord1-qty-button-padding-inline);

    height: 100%;

    color:
        var(--ebmenu1asideord1-qty-value-color);

    text-align: center;

    display: flex;

    align-items: center;

    justify-content: center;

    border-left:
        var(--ebmenu1asideord1-qty-border-width) solid var(--ebmenu1asideord1-qty-value-border-color);

    border-right:
        var(--ebmenu1asideord1-qty-border-width) solid var(--ebmenu1asideord1-qty-value-border-color);

    font-size:
        var(--ebmenu1asideord1-qty-value-font-size);

    font-weight:
        var(--ebmenu1asideord1-qty-value-font-weight);

}


/* ============================================================
   FOOTER
============================================================ */

.ebmenu1asideord1-footer {

    display: flex;

    flex-direction: column;

    gap: 0;

    width:
        100%;

    background-color:
        var(--ebmenu1asideord1-footer-background);

    border-radius:
        var(--ebmenu1asideord1-footer-radius);

    border:
        var(--ebmenu1asideord1-footer-border-width) solid var(--ebmenu1asideord1-footer-border-color);

    padding-top:
        var(--ebmenu1asideord1-footer-padding-top);

}


/* ============================================================
   TOTAL
============================================================ */

.ebmenu1asideord1-total {

    display: flex;

    justify-content: flex-start;

    direction: rtl;

    gap:
        var(--ebmenu1asideord1-total-gap);

    padding-inline:
        var(--ebmenu1asideord1-total-padding-inline);

    margin-bottom:
        var(--ebmenu1asideord1-total-margin-bottom);

}


/* ============================================================
   TOTAL LABEL
============================================================ */

.ebmenu1asideord1-total-label {

    color:
        var(--ebmenu1asideord1-total-label-color);

    font-size:
        var(--ebmenu1asideord1-total-label-font-size);

    font-weight:
        var(--ebmenu1asideord1-total-label-font-weight);

}


/* ============================================================
   TOTAL PRICE
============================================================ */

.ebmenu1asideord1-total-price {

    color:
        var(--ebmenu1asideord1-total-price-color);

    font-size:
        var(--ebmenu1asideord1-total-price-font-size);

    font-weight:
        var(--ebmenu1asideord1-total-price-font-weight);

}


/* ============================================================
   CHECKOUT BUTTON
============================================================ */

.ebmenu1asideord1-checkout {

    background:
        var(--ebmenu1asideord1-checkout-background);

    color:
        var(--ebmenu1asideord1-checkout-color);

    border: none;

    height:
        var(--ebmenu1asideord1-checkout-height);

    border-radius:
        var(--ebmenu1asideord1-checkout-radius);

    cursor: pointer;

    font-size:
        var(--ebmenu1asideord1-checkout-font-size);

    font-weight:
        var(--ebmenu1asideord1-checkout-font-weight);

}


/* ============================================================
   CHECKOUT — DISABLED
============================================================ */

.ebmenu1asideord1-checkout:disabled {

    cursor: not-allowed;

    color:
        var(--ebmenu1asideord1-checkout-disabled-color);

    background-color:
        var(--ebmenu1asideord1-checkout-disabled-background);

    opacity:
        var(--ebmenu1asideord1-checkout-disabled-opacity);

}


/* ============================================================
   EMPTY CART BUTTON
============================================================ */

.ebmenu1asideord1-empty {

    background:
        var(--ebmenu1asideord1-empty-background);

    color:
        var(--ebmenu1asideord1-empty-color);

    border: none;

    height:
        var(--ebmenu1asideord1-empty-height);

    border-radius:
        var(--ebmenu1asideord1-empty-radius);

    cursor: pointer;

    font-size:
        var(--ebmenu1asideord1-empty-font-size);

    font-weight:
        var(--ebmenu1asideord1-empty-font-weight);

}

/* ============================================================
   EDITABLE QUANTITY INPUT  (shares .ebmenu1asideord1-qty-value)
============================================================ */
input.ebmenu1asideord1-qty-value.usd-qty-input {
    width: 3ch;
    background: none;
    border: none;
    padding-inline: var(--ebmenu1asideord1-qty-button-padding-inline);
    height: 100%;
    color: var(--ebmenu1asideord1-qty-value-color);
    font-size: var(--ebmenu1asideord1-qty-value-font-size);
    font-weight: var(--ebmenu1asideord1-qty-value-font-weight);
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}
input.ebmenu1asideord1-qty-value.usd-qty-input::-webkit-outer-spin-button,
input.ebmenu1asideord1-qty-value.usd-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}