/* =========================================
   CUBE AROMA ACCOUNT PANEL
   ========================================= */

#cube-account-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;

    background: rgba(0, 0, 0, 0.4) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    z-index: 999998 !important;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease !important;
}

#cube-account-overlay.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


/* =========================================
   البانل الجانبي
   ========================================= */

#cube-account-panel {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;

    width: 390px !important;
    max-width: 390px !important;
    min-width: 0 !important;
    height: 100vh !important;

    margin: 0 !important;
    padding: 35px 38px 45px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    background: #EAD6C9 !important;
    color: #5C5D60 !important;

    direction: rtl !important;
    text-align: right !important;

    transform: translateX(100%) !important;
    visibility: hidden !important;

    z-index: 999999 !important;

    box-sizing: border-box !important;

    transition:
        transform 0.35s ease,
        visibility 0.35s ease !important;
}

#cube-account-panel.is-open {
    transform: translateX(0) !important;
    visibility: visible !important;
}


/* =========================================
   ضبط كل العناصر داخل البانل
   ========================================= */

#cube-account-panel,
#cube-account-panel *,
#cube-account-panel *::before,
#cube-account-panel *::after {
    box-sizing: border-box !important;
    font-family: inherit !important;
    direction: rtl !important;
}


/* =========================================
   زر الإغلاق
   ========================================= */

#cube-account-panel .cube-account-close {
    position: absolute !important;

    top: 18px !important;
    left: 20px !important;
    right: auto !important;

    width: 30px !important;
    height: 30px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;

    background: transparent !important;
    color: #5C5D60 !important;

    font-size: 24px !important;
    line-height: 30px !important;
    text-align: center !important;

    cursor: pointer !important;
}


/* =========================================
   الشعار
   ========================================= */

#cube-account-panel .cube-account-brand {
    display: block !important;

    width: 100% !important;

    margin: 25px auto 35px !important;
    padding: 0 !important;

    text-align: center !important;
}

#cube-account-panel .cube-account-logo {
    display: inline-block !important;

    width: 185px !important;
    max-width: 185px !important;
    height: auto !important;

    margin: 0 auto !important;

    object-fit: contain !important;
}


/* =========================================
   التبويبات
   ========================================= */

#cube-account-panel .cube-account-tabs {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 25px !important;

    width: 100% !important;

    margin: 0 0 32px !important;
    padding: 0 !important;

    border-bottom: 1px solid rgba(92, 93, 96, 0.25) !important;
}

#cube-account-panel .cube-account-tab {
    position: relative !important;

    width: auto !important;
    min-width: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 0 12px !important;

    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;

    background: transparent !important;
    color: #5C5D60 !important;

    font-size: 16px !important;
    font-weight: 400 !important;
    text-align: right !important;

    cursor: pointer !important;
}

#cube-account-panel .cube-account-tab:hover,
#cube-account-panel .cube-account-tab:focus,
#cube-account-panel .cube-account-tab:active {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #5C5D60 !important;
}

#cube-account-panel .cube-account-tab.is-active::after {
    content: "" !important;

    position: absolute !important;

    right: 0 !important;
    bottom: -1px !important;

    width: 100% !important;
    height: 1px !important;

    background: #5C5D60 !important;
}


/* =========================================
   صفحات تسجيل الدخول وإنشاء الحساب
   ========================================= */

#cube-account-panel .cube-account-view {
    display: none !important;
    width: 100% !important;
}

#cube-account-panel .cube-account-view.is-active {
    display: block !important;
}


/* =========================================
   العناوين والنصوص
   ========================================= */

#cube-account-panel h1,
#cube-account-panel h2,
#cube-account-panel h3,
#cube-account-panel p,
#cube-account-panel label,
#cube-account-panel span {
    color: #5C5D60 !important;
    text-align: right !important;
}

#cube-account-panel h2 {
    margin: 0 0 12px !important;
    padding: 0 !important;

    color: #5C5D60 !important;

    font-size: 30px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

#cube-account-panel p {
    margin: 0 0 25px !important;
    padding: 0 !important;

    color: #5C5D60 !important;

    font-size: 14px !important;
    line-height: 1.9 !important;
}


/* =========================================
   الفورم
   ========================================= */

#cube-account-panel .cube-account-form {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* أسماء الحقول */
#cube-account-panel .cube-account-form label:not(.cube-account-checkbox) {
    display: block !important;

    width: 100% !important;

    margin: 0 0 7px !important;
    padding: 0 !important;

    color: #5C5D60 !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    text-align: right !important;
}


/* النجمة للحقول المطلوبة فقط */
#cube-account-panel .cube-account-form label[for="cube-login-email"]::after,
#cube-account-panel .cube-account-form label[for="cube-login-password"]::after,
#cube-account-panel .cube-account-form label[for="cube-register-first-name"]::after,
#cube-account-panel .cube-account-form label[for="cube-register-last-name"]::after,
#cube-account-panel .cube-account-form label[for="cube-register-email"]::after,
#cube-account-panel .cube-account-form label[for="cube-register-phone"]::after,
#cube-account-panel .cube-account-form label[for="cube-register-password"]::after,
#cube-account-panel .cube-account-form label[for="cube-register-confirm-password"]::after {
    content: " *" !important;

    color: #9A1220 !important;
    font-weight: 500 !important;
}


/* =========================================
   الحقول
   ========================================= */

#cube-account-panel .cube-account-form input[type="text"],
#cube-account-panel .cube-account-form input[type="email"],
#cube-account-panel .cube-account-form input[type="tel"],
#cube-account-panel .cube-account-form input[type="password"] {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    height: 48px !important;

    margin: 0 0 18px !important;
    padding: 0 13px !important;

    border: 1px solid #5C5D60 !important;
    border-radius: 0 !important;

    background: transparent !important;
    color: #5C5D60 !important;

    font-size: 14px !important;
    line-height: 48px !important;
    text-align: right !important;

    outline: none !important;
    box-shadow: none !important;
}

#cube-account-panel .cube-account-form input:focus {
    border-color: #5C5D60 !important;
    outline: none !important;
    box-shadow: none !important;
}


/* =========================================
   الخيارات
   ========================================= */

#cube-account-panel .cube-account-options {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;

    gap: 10px !important;

    width: 100% !important;

    margin: 0 0 20px !important;
    padding: 0 !important;
}

#cube-account-panel .cube-account-checkbox {
    display: inline-flex !important;
    align-items: center !important;

    gap: 7px !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #5C5D60 !important;

    font-size: 13px !important;
    text-align: right !important;
}

#cube-account-panel .cube-account-checkbox input {
    width: 15px !important;
    height: 15px !important;

    margin: 0 !important;
}


/* =========================================
   الروابط
   ========================================= */

#cube-account-panel a,
#cube-account-panel .cube-account-lost-password,
#cube-account-panel .cube-account-switch {
    color: #5C5D60 !important;
    text-decoration: underline !important;
}

#cube-account-panel .cube-account-switch {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

#cube-account-panel .cube-account-switch:hover,
#cube-account-panel .cube-account-switch:focus,
#cube-account-panel .cube-account-switch:active {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #5C5D60 !important;
}


/* =========================================
   زر تسجيل الدخول / إنشاء الحساب
   ========================================= */

#cube-account-panel .cube-account-submit,
#cube-account-panel button[type="submit"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 50px !important;

    margin: 8px 0 0 !important;
    padding: 0 20px !important;

    border: 1px solid #5C5D60 !important;
    border-radius: 0 !important;

    background: #5C5D60 !important;
    color: #EAD6C9 !important;

    font-size: 15px !important;
    font-weight: 400 !important;
    text-align: center !important;

    cursor: pointer !important;
}

#cube-account-panel .cube-account-submit:hover,
#cube-account-panel .cube-account-submit:focus,
#cube-account-panel .cube-account-submit:active,
#cube-account-panel button[type="submit"]:hover,
#cube-account-panel button[type="submit"]:focus,
#cube-account-panel button[type="submit"]:active {
    border-color: #5C5D60 !important;
    background: #5C5D60 !important;
    color: #EAD6C9 !important;
    outline: none !important;
    box-shadow: none !important;
}


/* =========================================
   النص السفلي
   ========================================= */

#cube-account-panel .cube-account-bottom-text {
    margin-top: 25px !important;

    color: #5C5D60 !important;

    font-size: 14px !important;
    text-align: right !important;
}


/* =========================================
   الرسائل
   ========================================= */

#cube-account-panel .cube-account-message {
    display: none !important;

    width: 100% !important;

    margin: 15px 0 0 !important;
    padding: 10px 12px !important;

    border: 1px solid #5C5D60 !important;

    color: #5C5D60 !important;

    font-size: 13px !important;
    line-height: 1.8 !important;
    text-align: right !important;
}

#cube-account-panel .cube-account-message.is-visible {
    display: block !important;
}


/* =========================================
   الموبايل
   ========================================= */

@media (max-width: 767px) {

    #cube-account-panel {
        width: 100% !important;
        max-width: 100% !important;

        padding: 30px 22px 35px !important;
    }

    #cube-account-panel .cube-account-logo {
        width: 155px !important;
        max-width: 155px !important;
    }

    #cube-account-panel h2 {
        font-size: 27px !important;
    }

    #cube-account-panel .cube-account-tab {
        font-size: 15px !important;
    }

    #cube-account-panel .cube-account-form input[type="text"],
    #cube-account-panel .cube-account-form input[type="email"],
    #cube-account-panel .cube-account-form input[type="tel"],
    #cube-account-panel .cube-account-form input[type="password"] {
        height: 46px !important;
        line-height: 46px !important;
    }

    #cube-account-panel .cube-account-submit,
    #cube-account-panel button[type="submit"] {
        height: 48px !important;
    }
}


/* =========================================
   موبايل صغير
   ========================================= */

@media (max-width: 380px) {

    #cube-account-panel {
        padding-right: 18px !important;
        padding-left: 18px !important;
    }

    #cube-account-panel .cube-account-logo {
        width: 140px !important;
        max-width: 140px !important;
    }
}/* إجبار البانل على الفتح من اليمين */
html body #cube-account-panel {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    transform: translateX(100%) !important;
}

html body #cube-account-panel.is-open {
    right: 0 !important;
    left: auto !important;

    transform: translateX(0) !important;
}

/* Account menu item - Mobile only */
.mobile-account-only {
    display: none !important;
}
@media (max-width: 767px) {
    .mobile-account-only {
        display: block !important;
    }
}


/* Mobile account drawer */
@media (max-width: 767px) {
    html body #cube-account-panel {
        width: 85vw !important;
        max-width: 85vw !important;
        height: 100dvh !important;
        padding: 30px 20px 35px !important;
    }
    body.cube-account-panel-open { overflow: hidden; }
}