/* إعداد الخطوط والخصائص العامة */
body, html {
    font-family: var(--font-main), -apple-system, BlinkMacSystemFont;
    position: relative;
}
html {
    -webkit-text-size-adjust: 100%;
    font-feature-settings: normal;
    font-variation-settings: normal;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
    height: 100%;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
}
body {
    color: var(--main-text-color);
    font-weight: 400;
    background: rgba(0,0,0,.25);
    margin: 0;
    font-size: 15px;
    line-height: 26px;
    border: 0;
    font-family: gesstextmedium !important;
}

/* إعادة تعيين الخصائص الافتراضية */
*, ::after, ::before, :after, :before {
    box-sizing: border-box;
    border: 0 solid #e5e7eb;
    font-weight: inherit !important;
}

/* ضبط بعض العناصر الأساسية */
.mm-spn li, body, html {
    position: relative;
}
.mm-spn, html {
    height: 100%;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
}
.mm-spn, body, button, li, ul {
    padding: 0;
}
.mm-spn ul, .mm-spn.mm-spn--navbar.mm-spn--main {
    cursor: default;
}
.mm-spn ul {
    margin: 0;
    -webkit-overflow-scrolling: touch;
}
.swiper, li, ul {
    list-style: none;
}

/* تحسين مظهر النصوص */
html {
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}
body {
    --tw-text-opacity: 1;
}
.text-gray-500 {
    --tw-text-opacity: 1;
}
.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

/* إعدادات الخطوط */
@font-face {
    font-family: gesstextmedium;
    src: url(https://res.cloudinary.com/ddqaxthcm/raw/upload/v1712301188/PingAR_LT-Regular_hqcb8h.otf);
}
@font-face {
    font-family: gesstextmedium;
    src: url(https://res.cloudinary.com/ddqaxthcm/raw/upload/v1712301187/PingAR_LT-Bold_ha9qaq.otf);
    font-weight: 700;
}
@font-face {
    font-family: sallaicons;
    src: url(https://cdn.salla.network/fonts/lib/sallaicons/sallaicons.eot?j893vb);
    src: url(https://cdn.salla.network/fonts/lib/sallaicons/sallaicons.eot?j893vb#iefix) format('embedded-opentype'),
         url(https://cdn.salla.network/fonts/lib/sallaicons/sallaicons.ttf?j893vb) format('truetype'),
         url(https://cdn.salla.network/fonts/lib/sallaicons/sallaicons.woff?j893vb) format('woff'),
         url(https://cdn.salla.network/fonts/lib/sallaicons/sallaicons.svg?j893vb#sallaicons) format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

/* إعدادات متغيرات CSS العامة */
:root {
    --animate-duration: 1s;
    --infinte-color: #c9c9c9;
    --main-text-color: #231f1e;
    --color-primary: #EDA01C;
    --mm-ocd-width: 80%;
    --mm-ocd-min-width: 200px;
    --mm-ocd-max-width: 440px;
    --mm-spn-item-height: 50px;
    --mm-spn-item-indent: 20px;
    --mm-spn-line-height: 24px;
    --mm-spn-panel-offset: 30%;
    --font-main: 'sky-bold';
    --font-secondary: 'sky';
    --dark-bg-main: #0d131e;
    --dark-text-main: #ffffff;
    --dark-grey: #1d2942;
}

/* إعدادات H4 مع حركة نص متدرجة */
h4 {
    font-family: var(--font-main);
    font-weight: 700;
    text-transform: uppercase;
    background-image: linear-gradient(-225deg, #eda01c 0, #fff 29%, #ffdb9d 67%, #a46f14 100%);
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: 2s linear infinite textclip;
    display: inline-block;
    margin: 0;
}
@keyframes textclip {
    100% {
        background-position: 200% center;
    }
}

/* عناصر منسدلة وقائمة الجوال */
.mm-spn {
    display: block;
    overflow: hidden;
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
}
.mobile-menu {
    overflow: hidden;
    display: block;
}
.mm-spn ul {
    display: block;
    position: fixed;
    top: 0;
    left: 100%;
    bottom: 0;
    z-index: 2;
    width: calc(100% + var(--mm-spn-panel-offset));
    padding-right: var(--mm-spn-panel-offset);
    line-height: var(--mm-spn-line-height);
    overflow-y: auto;
    transition: left .3s;
}
.mm-spn ul.mm-spn--open,
.mm-spn > ul {
    left: 0;
}
.mm-spn li {
    display: block;
    padding: 0 .75rem;
    z-index: 0;
    margin: 0;
    cursor: pointer;
}
.mm-spn a, .mm-spn span, .swiper {
    z-index: 1;
    position: relative;
}
.mm-spn a {
    display: block;
    padding: calc((var(--mm-spn-item-height) - var(--mm-spn-line-height))/2) var(--mm-spn-item-indent);
    text-decoration: none;
    background: inherit;
    color: inherit;
}
.mm-spn li a, .mm-spn li span:not(.s-user-menu-dropdown-item-badge) {
    padding: .75rem 1rem;
    background: transparent;
}

/* مؤشرات الأسهم داخل القائمة */
.mm-spn li::before {
    width: 10px;
    border-top: 2px solid;
    opacity: .4;
    content: "";
    position: absolute;
    display: block;
    top: calc(var(--mm-spn-item-height)/2);
    right: calc(var(--mm-spn-item-height)/2);
    z-index: 0;
    height: 10px;
    border-right: 2px solid;
    transform: rotate(45deg) translate(0,-50%);
}
[dir=rtl] .mm-spn li::before {
    width: 6px;
    height: 6px;
    top: 50%;
    left: calc(var(--mm-spn-item-height)/2);
    right: auto;
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-right: none;
    border-top: none;
}

/* تأثير الخلفية عند التفاعل */
.mm-spn li::after {
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    width: 15%;
    background: #eda01c;
    transition: .1s linear;
    left: 0;
    border: 0;
    opacity: 1;
    z-index: -1;
    height: calc(100% - 10px);
    border-radius: 0 20px 20px 0;
}
.mm-spn a:not(:last-child), .mm-spn li:hover::after {
    width: 100%;
}

/* خلفيات صور Lazy */
.lazy__bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition-duration: .5s;
    background-color: var(--dark-bg-main);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.lazy__bg.loaded {
    --tw-translate-y: 0px;
    opacity: 1;
}
.lazy__bg.lazy_menu {
    position: relative;
    height: 1.5rem;
    width: 1.5rem;
    flex-shrink: 0;