/* VIEW ONLY MENU UI - no app.js / no business logic changes */

/* Full page loading when opening item */
body.ez-ui-page-loading::after {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 999998 !important;
    background: rgba(255,255,255,0.42) !important;
    backdrop-filter: blur(1px) !important;
    pointer-events: all !important;
}

body.ez-ui-page-loading::before {
    content: "" !important;
    position: fixed !important;
    z-index: 999999 !important;
    width: 46px !important;
    height: 46px !important;
    top: 50% !important;
    left: 50% !important;
    margin-top: -23px !important;
    margin-left: -23px !important;
    border-radius: 50% !important;
    border: 5px solid rgba(0,0,0,0.14) !important;
    border-top-color: var(--theme-color, #d00000) !important;
    animation: ezUiPageSpin .65s linear infinite !important;
    pointer-events: none !important;
}

@keyframes ezUiPageSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* When popup is open, lock page behind */
body.ez-popup-locked {
    overflow: hidden !important;
    touch-action: none !important;
}

body.ez-popup-locked .popup-overlay {
    z-index: 1000000 !important;
}

.popup-card:focus {
    outline: none !important;
}

/* END VIEW ONLY MENU UI */

/* VIEW ONLY - skeleton card layout must match real product card */
/* الصورة يسار والكلام يمين */
#productsContainer .skeleton-card {
    direction: ltr !important;
    display: grid !important;
    grid-template-columns: 130px 1fr !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
        "image title"
        "image price"
        "image button" !important;
    column-gap: 22px !important;
    align-items: center !important;
}

/* صورة السكلتون في اليسار */
#productsContainer .skeleton-card .skeleton-image {
    grid-area: image !important;
    justify-self: start !important;
    align-self: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    order: 1 !important;
}

/* خطوط النص في اليمين */
#productsContainer .skeleton-card .skeleton-title {
    grid-area: title !important;
    justify-self: stretch !important;
    order: 2 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#productsContainer .skeleton-card .skeleton-price {
    grid-area: price !important;
    justify-self: stretch !important;
    order: 3 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#productsContainer .skeleton-card .skeleton-button {
    grid-area: button !important;
    justify-self: stretch !important;
    order: 4 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* مهم: داخل السكلتون خليه LTR فقط، الصفحة نفسها تظل RTL */
#productsContainer .skeleton-card * {
    direction: ltr !important;
}

/* END VIEW ONLY - skeleton card layout */