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


:root {
    --ebmenu1asideord1-theme2-overlay-background:
        rgba(0, 0, 0, 0.5);
    --ebmenu1asideord1-theme2-paper-bg: #EFE4C8;
    --ebmenu1asideord1-theme2-paper-shadow-bg: #dccfa8;
    --ebmenu1asideord1-theme2-ink-color: #2B2318;
    --ebmenu1asideord1-theme2-ink-soft-color: #5b5138;

    --ebmenu1asideord1-theme2-header-border-color: #2B2318;

    --ebmenu1asideord1-theme2-title-font-size: clamp(1.15rem, 4.5vw, 1.4rem);
    --ebmenu1asideord1-theme2-title-letter-spacing: 1px;

    --ebmenu1asideord1-theme2-item-divider-color: #a89568;
    --ebmenu1asideord1-theme2-item-divider-width: 2px;
    --ebmenu1asideord1-theme2-item-padding-block: 14px;

    --ebmenu1asideord1-theme2-img-frame-color: var(--ebmenu1-secondary-color);
    --ebmenu1asideord1-theme2-img-size: 62px;

    --ebmenu1asideord1-theme2-name-font-size: clamp(1rem, 3.6vw, 1.15rem);
    --ebmenu1asideord1-theme2-name-font-weight: 700;

    --ebmenu1asideord1-theme2-price-font-size: clamp(0.95rem, 3.4vw, 1.05rem);
    --ebmenu1asideord1-theme2-price-letter-spacing: 0.5px;

    --ebmenu1asideord1-theme2-delete-color: #a4402f;
    --ebmenu1asideord1-theme2-delete-font-size: 0.95rem;

    --ebmenu1asideord1-theme2-qty-border-color: #2B2318;
    --ebmenu1asideord1-theme2-qty-height: 32px;
    --ebmenu1asideord1-theme2-qty-radius: 3px;
    --ebmenu1asideord1-theme2-qty-value-font-size: 1rem;

    --ebmenu1asideord1-theme2-footer-bg: #E7D9B4;
    --ebmenu1asideord1-theme2-footer-top-color: var(--ebmenu1asideord1-theme2-ink-color);

    --ebmenu1asideord1-theme2-total-label-font-size: clamp(0.95rem, 3.4vw, 1.05rem);
    --ebmenu1asideord1-theme2-total-price-font-size: clamp(1.3rem, 5vw, 1.6rem);

    --ebmenu1asideord1-theme2-checkout-bg: var(--ebmenu1-secondary-color);
    --ebmenu1asideord1-theme2-checkout-color: #F3E9CE;
    --ebmenu1asideord1-theme2-checkout-rotate: -1.4deg;
    --ebmenu1asideord1-theme2-checkout-font-size: clamp(1.05rem, 4vw, 1.25rem);
    --ebmenu1asideord1-theme2-checkout-letter-spacing: 3px;

    --ebmenu1asideord1-theme2-checkout-disabled-bg: #b9ab84;
    --ebmenu1asideord1-theme2-checkout-disabled-color: #6f6650;

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

    --ebmenu1asideord1-theme2-transition: 0.25s ease;
}

.ebmenu1asideord1-overlay {

    position: fixed;

    inset: 0;

    background:
        var(--ebmenu1asideord1-theme2-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;

}

.ebmenu1asideord1-overlay.ebmenu1asideord1-active {

    opacity: 1;

    visibility: visible;

    transform: translateX(0);

}

.ebmenu1asideord1-container {
    width: 85vw;
    max-width: 430px;
    background: var(--ebmenu1asideord1-theme2-paper-bg);
    background-image:
        repeating-linear-gradient(180deg, transparent 0 26px, rgba(43, 35, 24, 0.035) 26px 27px);
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: "El Messiri", sans-serif;
    position: relative;
    clip-path: polygon(0% 12px, 3% 0%, 6% 12px, 9% 0%, 12% 12px, 15% 0%, 18% 12px, 21% 0%, 24% 12px, 27% 0%,
            30% 12px, 33% 0%, 36% 12px, 39% 0%, 42% 12px, 45% 0%, 48% 12px, 51% 0%, 54% 12px, 57% 0%,
            60% 12px, 63% 0%, 66% 12px, 69% 0%, 72% 12px, 75% 0%, 78% 12px, 81% 0%, 84% 12px, 87% 0%,
            90% 12px, 93% 0%, 96% 12px, 99% 0%, 100% 12px,
            100% 100%, 0% 100%);
}



.ebmenu1asideord1-header {
    padding: 26px 18px 12px;
    border-bottom: 2px dashed var(--ebmenu1asideord1-theme2-header-border-color);
}

.ebmenu1asideord1-title {
    color: var(--ebmenu1asideord1-theme2-ink-color);
    font-size: var(--ebmenu1asideord1-theme2-title-font-size);
    letter-spacing: var(--ebmenu1asideord1-theme2-title-letter-spacing);
    font-weight: 700;
}

.ebmenu1asideord1-title::before {
    content: "🧾 ";
}

.ebmenu1asideord1-close {
    color: var(--ebmenu1asideord1-theme2-ink-color);
    font-size: 1.2rem;
}

.ebmenu1asideord1-orders {
    padding-inline: 18px;
    padding-bottom: 110px;
    overflow-y: auto;
    flex: 1;
}

.ebmenu1asideord1-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: var(--ebmenu1asideord1-theme2-item-divider-width) dashed var(--ebmenu1asideord1-theme2-item-divider-color);
    padding-block: var(--ebmenu1asideord1-theme2-item-padding-block);
    direction: ltr;
}

.ebmenu1asideord1-item-info {
    display: flex;
    gap: 10px;
}

.ebmenu1asideord1-img {
    width: var(--ebmenu1asideord1-theme2-img-size);
    aspect-ratio: 1/1;
    object-fit: cover;
    border: 2px solid var(--ebmenu1asideord1-theme2-img-frame-color);
    filter: sepia(0.25) contrast(1.02);
}

.ebmenu1asideord1-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    direction: rtl;
    gap: 6px;
}

.ebmenu1asideord1-actions {
    display: flex;
    gap: 10px;
    direction: ltr;
}

.ebmenu1asideord1-name {
    color: var(--ebmenu1asideord1-theme2-ink-color);
    font-size: var(--ebmenu1asideord1-theme2-name-font-size);
    font-weight: var(--ebmenu1asideord1-theme2-name-font-weight);
}

.ebmenu1asideord1-price {
    color: var(--ebmenu1asideord1-theme2-ink-soft-color);
    font-size: var(--ebmenu1asideord1-theme2-price-font-size);
    letter-spacing: var(--ebmenu1asideord1-theme2-price-letter-spacing);
}

.ebmenu1asideord1-delete {
    background: none;
    color: var(--ebmenu1asideord1-theme2-delete-color);
    font-size: var(--ebmenu1asideord1-theme2-delete-font-size);
    font-weight: 700;
    padding: 0;
}

.ebmenu1asideord1-qty {
    display: flex;
    align-items: center;
    width: fit-content;
    height: var(--ebmenu1asideord1-theme2-qty-height);
    border: 1.5px solid var(--ebmenu1asideord1-theme2-qty-border-color);
    border-radius: var(--ebmenu1asideord1-theme2-qty-radius);
    overflow: hidden;
}

.ebmenu1asideord1-qty-btn {
    padding-inline: 9px;
    height: 100%;
    color: var(--ebmenu1asideord1-theme2-ink-color);
    font-weight: 700;
}

.ebmenu1asideord1-qty>span {
    padding-inline: 9px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-inline: 1.5px solid var(--ebmenu1asideord1-theme2-qty-border-color);
    font-size: var(--ebmenu1asideord1-theme2-qty-value-font-size);
    font-weight: 700;
    color: var(--ebmenu1asideord1-theme2-ink-color);
}

.ebmenu1asideord1-footer {
    background: var(--ebmenu1asideord1-theme2-footer-bg);
    border-top: 2px dashed var(--ebmenu1asideord1-theme2-footer-top-color);
    padding-top: 16px;
    padding-bottom: 14px;
}

.ebmenu1asideord1-total {
    justify-content: space-between;
    direction: rtl;
    padding-inline: 18px;
    margin-bottom: 14px;
}

.ebmenu1asideord1-total-label {
    color: var(--ebmenu1asideord1-theme2-ink-soft-color);
    font-size: var(--ebmenu1asideord1-theme2-total-label-font-size);
}

.ebmenu1asideord1-total-price {
    color: var(--ebmenu1asideord1-theme2-ink-color);
    font-size: var(--ebmenu1asideord1-theme2-total-price-font-size);
    font-weight: 700;
}

.ebmenu1asideord1-checkout {
    margin-inline: 18px;
    width: calc(100% - 36px);
    background: var(--ebmenu1asideord1-theme2-checkout-bg);
    color: var(--ebmenu1asideord1-theme2-checkout-color);
    height: 44px;
    border: 2px solid var(--ebmenu1asideord1-theme2-checkout-color);
    border-radius: 4px;
    font-size: var(--ebmenu1asideord1-theme2-checkout-font-size);
    letter-spacing: var(--ebmenu1asideord1-theme2-checkout-letter-spacing);
    font-weight: 700;
    transform: rotate(var(--ebmenu1asideord1-theme2-checkout-rotate));
    outline: 2px solid var(--ebmenu1asideord1-theme2-checkout-bg);
    outline-offset: 3px;
}

.ebmenu1asideord1-checkout:disabled {
    background: var(--ebmenu1asideord1-theme2-checkout-disabled-bg);
    color: var(--ebmenu1asideord1-theme2-checkout-disabled-color);
    outline-color: var(--ebmenu1asideord1-theme2-checkout-disabled-bg);
    cursor: not-allowed;
}

.ebmenu1asideord1-empty {
    display: block;
    margin: 12px auto 0;
    background: none;
    color: var(--ebmenu1asideord1-theme2-empty-color);
    font-size: 0.9rem;
    text-decoration: underline;
    height: auto;
}

/* 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:var(--ebmenu1asideord1-theme2-paper-bg);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-theme2-checkout-bg);color:var(--ebmenu1asideord1-theme2-checkout-color);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}

/* ============================================================
   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;
}