/* Add custom CSS styles below */ 
/* Add custom CSS styles below */
:root {
    --main-color: #002b5b; /* اللون الأزرق الداكن من الشعار */
    --second-color: #a7b2b9; /* اللون الرمادي الفاتح من الشعار */
    --third-color: #eee; /* اللون الأبيض */
    --body-color: #d3d3d3; /* خلفية رمادية للمتجر */
    --button-primary-color: #002b5b; /* لون أزرار رئيسي */
    --button-hover-color: #75b5a0; /* لون عند التمرير */
    --bg-secondary: #f3f4f6; /* لون الخلفية الثانوية */
    --store-text-primary: #414042; /* لون النص الأساسي */
    --store-text-secondary: #7c8082; /* لون النص الثانوي */
    --tw-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* ظل للأشياء */
}

/* قائمة الهاتف المحمول */
.mobile-menu {
    display: none;
    overflow: hidden;
}

@media (max-width: 991px) {
    .mm-ocd-opened .mobile-menu {
        display: block;
    }
}

/* تخصيص الأزرار والقوائم المنسدلة */
.dropdown__trigger {
    height: 2.5rem;
    width: 2.5rem;
    overflow: hidden;
    border-radius: 9999px;
    font-weight: 500;
}

.dropdown__menu {
    visibility: hidden;
    position: absolute;
    top: 100%;
    z-index: 30;
    width: 20rem;
    transform-origin: top right;
    background-color: var(--third-color);
    opacity: 0;
    box-shadow: var(--tw-shadow);
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: 200ms;
}

.dropdown-toggler.is-opened .dropdown__menu {
    visibility: visible;
    opacity: 1;
}

/* تنسيق التنبيهات */
.notification-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: .375rem;
    background-color: var(--bg-secondary);
    padding: 1.25rem;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: 150ms;
}

.notification-item:hover {
    color: var(--store-text-secondary);
    box-shadow: var(--tw-shadow);
}

/* تنسيق الجدول */
.s-table {
    min-width: 100%;
    border-collapse: separate;
}

.s-table thead {
    background-color: var(--bg-secondary);
    color: var(--store-text-primary);
}

.s-table tbody tr {
    background-color: var(--bg-secondary);
    padding: .5rem;
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: 500ms;
}

.s-table tbody tr:hover {
    box-shadow: var(--tw-shadow);
}

/* تنسيق البطاقات */
.s-block--enhanced-features__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: .25rem;
    border-width: 1px;
    background-color: var(--third-color);
    padding: 1.25rem;
    text-align: center;
    box-shadow: var(--tw-shadow);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: 300ms;
}

.s-block--enhanced-features__item:hover {
    transform: scale(1.05);
    box-shadow: var(--tw-shadow);
}

/* الأزرار */
.s-button-element {
    background-color: #fff;
    border: 2px solid var(--main-color);
    color: var(--main-color);
    padding: 8px 16px;
    border-radius: 8px;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.s-button-element:hover {
    background-color: var(--main-color);
    color: #fff;
}

/* الفوتر */
.store-footer {
    background-color: var(--main-color);
    color: #fff;
    padding: 30px;
    text-align: center;
    border-radius: 25px;
    margin-top: 30px;
}

.store-footer a {
    color: #fff;
    transition: all 0.3s ease;
}

.store-footer a:hover {
    background-color: var(--second-color);
    color: var(--main-color);
    padding: 8px 15px;
    border-radius: 50px;
}

/* استجابة الهواتف المحمولة */
@media (max-width: 768px) {
    .s-product-card-vertical {
        width: 100%;
        margin-bottom: 20px;
    }

    .s-button-element {
        width: 100%;
        margin-bottom: 10px;
    }

    .store-footer {
        padding: 20px;
    }

    .store-footer a {
        padding: 5px 10px;
    }
}

/* خلفية الهيدر */
.header {
    background-color: var(--main-color);
    color: #fff;
    padding: 15px;
}

.header a {
    color: #fff;
    transition: color 0.3s ease;
}

.header a:hover {
    color: var(--second-color);
}