/* =========================================================
   AROZ - CUSTOM CSS
   ========================================================= */


/* =========================================================
   1. البنر الرئيسي
   ========================================================= */

.advanced-slider {
    position: relative !important;
    width: calc(100% - 30px) !important;
    margin: 10px auto 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}


/* =========================================================
   2. صور أقسام المناسبات
   ========================================================= */

.s-block.s-block--square-links.square-links-1
.square-links__image-wrap {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border-radius: 16px !important;
}


/* =========================================================
   3. صور الأقسام
   ========================================================= */

.s-block.s-block--square-links.square-links-1
.square-links__image-wrap img {

    display: block !important;

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

    object-fit: fill !important;
    object-position: center !important;

    transform: none !important;
    scale: 1 !important;

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

    border-radius: 16px !important;

    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}


/* =========================================================
   4. إلغاء التكبير القديم للأقسام
   ========================================================= */

.s-block.s-block--square-links.square-links-1
.square-links__item:hover,
.s-block.s-block--square-links.square-links-1
.square-links__item:hover * {

    scale: 1 !important;
}


/* =========================================================
   5. الجوال - أقسام المناسبات
   ========================================================= */

@media (max-width: 768px) {

    .s-block.s-block--square-links.square-links-1 {

        padding-right: 14px !important;
        padding-left: 14px !important;

        box-sizing: border-box !important;
    }


    .s-block.s-block--square-links.square-links-1
    .square-links__grid {

        display: flex !important;

        flex-wrap: nowrap !important;

        gap: 8px !important;

        width: 100% !important;

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

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

        -webkit-overflow-scrolling: touch !important;

        scroll-snap-type: none !important;

        scrollbar-width: none !important;

        overscroll-behavior-x: contain !important;

        box-sizing: border-box !important;
    }


    .s-block.s-block--square-links.square-links-1
    .square-links__grid::-webkit-scrollbar {

        display: none !important;
    }


    .s-block.s-block--square-links.square-links-1
    .square-links__grid > .square-links__item {

        flex: 0 0 calc((100% - 16px) / 3) !important;

        width: calc((100% - 16px) / 3) !important;

        min-width: calc((100% - 16px) / 3) !important;

        max-width: calc((100% - 16px) / 3) !important;

        scroll-snap-align: none !important;

        box-sizing: border-box !important;
    }


    .s-block.s-block--square-links.square-links-1
    .square-links__image-wrap {

        width: 100% !important;

        aspect-ratio: 1 / 1 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;

        border-radius: 14px !important;
    }


    .s-block.s-block--square-links.square-links-1
    .square-links__image-wrap img {

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

        object-fit: fill !important;
        object-position: center !important;

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

        border-radius: 14px !important;
    }


    .advanced-slider {

        width: calc(100% - 20px) !important;

        margin: 10px auto 0 !important;

        border-radius: 14px !important;

        overflow: hidden !important;
    }
}


/* =========================================================
   6. حركة ظهور الأقسام
   ========================================================= */

main .s-block.aroz-pop-section,
.advanced-slider.aroz-pop-section {

    opacity: 0 !important;

    transform:
        translate3d(0, 45px, 0)
        scale(0.96) !important;

    transition:
        opacity 0.75s ease,
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) !important;

    will-change:
        opacity,
        transform !important;
}


main .s-block.aroz-pop-section.aroz-pop-visible,
.advanced-slider.aroz-pop-section.aroz-pop-visible {

    opacity: 1 !important;

    transform:
        translate3d(0, 0, 0)
        scale(1) !important;
}


/* =========================================================
   7. بطاقات المناسبات
   ========================================================= */

.s-block.s-block--square-links.square-links-1
.square-links__item.aroz-card-pop {

    opacity: 0 !important;

    transform:
        translate3d(0, 30px, 0)
        scale(0.94) !important;

    transition:
        opacity 0.65s ease,
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) !important;

    will-change:
        opacity,
        transform !important;
}


.s-block.s-block--square-links.square-links-1
.square-links__item.aroz-card-pop.aroz-card-visible {

    opacity: 1 !important;

    transform:
        translate3d(0, 0, 0)
        scale(1) !important;
}


/* =========================================================
   8. تأخير بطاقات المناسبات
   ========================================================= */

.s-block.s-block--square-links.square-links-1
.square-links__item:nth-child(1) {
    transition-delay: 0s !important;
}

.s-block.s-block--square-links.square-links-1
.square-links__item:nth-child(2) {
    transition-delay: 0.08s !important;
}

.s-block.s-block--square-links.square-links-1
.square-links__item:nth-child(3) {
    transition-delay: 0.16s !important;
}

.s-block.s-block--square-links.square-links-1
.square-links__item:nth-child(4) {
    transition-delay: 0.24s !important;
}


/* =========================================================
   9. حركة المنتجات عند ظهورها
   ========================================================= */

.aroz-product-pop {

    opacity: 0 !important;

    transform:
        translate3d(0, 35px, 0)
        scale(0.97) !important;

    transition:
        opacity 0.65s ease,
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) !important;

    will-change:
        opacity,
        transform !important;
}


.aroz-product-pop.aroz-product-visible {

    opacity: 1 !important;

    transform:
        translate3d(0, 0, 0)
        scale(1) !important;
}


/* =========================================================
   10. تفاعل بطاقات المنتجات - الكمبيوتر
   ========================================================= */

@media (min-width: 769px) {

    .s-product-card,
    .product-card,
    [class*="product-card"] {

        transition:
            transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 0.35s ease !important;

        will-change:
            transform,
            box-shadow !important;
    }


    .s-product-card:hover,
    .product-card:hover,
    [class*="product-card"]:hover {

        transform:
            translateY(-5px) !important;

        box-shadow:
            0 12px 30px rgba(0, 0, 0, 0.08) !important;
    }


    .s-product-card:hover img,
    .product-card:hover img,
    [class*="product-card"]:hover img {

        transform:
            scale(1.025) !important;

        transition:
            transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }
}


/* =========================================================
   11. صور المنتجات
   ========================================================= */

.s-product-card img,
.product-card img,
[class*="product-card"] img {

    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}


/* =========================================================
   12. أزرار وروابط
   ========================================================= */

button,
a {

    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   13. تأثير الضغط على الأزرار
   ========================================================= */

.s-product-card button:active,
.product-card button:active,
[class*="product-card"] button:active {

    transform:
        scale(0.96) !important;

    transition:
        transform 0.12s ease !important;
}


/* =========================================================
   14. زر الإضافة أثناء التنفيذ
   ========================================================= */

.aroz-add-loading {

    pointer-events: none !important;

    opacity: 0.75 !important;

    transform:
        scale(0.97) !important;
}


/* =========================================================
   15. زر تمت الإضافة
   ========================================================= */

.aroz-added {

    animation:
        arozButtonAdded 0.5s ease !important;
}


@keyframes arozButtonAdded {

    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.06);
    }

    100% {
        transform: scale(1);
    }
}


/* =========================================================
   16. حركة أيقونة السلة
   ========================================================= */

.aroz-cart-bounce {

    animation:
        arozCartBounce 0.65s cubic-bezier(0.22, 1, 0.36, 1) !important;
}


@keyframes arozCartBounce {

    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.18) rotate(-5deg);
    }

    55% {
        transform: scale(0.94) rotate(4deg);
    }

    75% {
        transform: scale(1.06) rotate(-2deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}


/* =========================================================
   17. تنبيه تمت الإضافة
   ========================================================= */

.aroz-add-notice {

    position: fixed !important;

    bottom: 24px !important;
    right: 24px !important;

    z-index: 999999 !important;

    display: flex !important;

    align-items: center !important;

    gap: 9px !important;

    padding:
        12px 17px !important;

    border-radius:
        12px !important;

    background:
        #800020 !important;

    color:
        #ffffff !important;

    font-size:
        14px !important;

    font-weight:
        600 !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.15) !important;

    opacity:
        0 !important;

    transform:
        translateY(15px) !important;

    pointer-events:
        none !important;

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


.aroz-add-notice.aroz-show {

    opacity:
        1 !important;

    transform:
        translateY(0) !important;
}


.aroz-add-notice-icon {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        20px !important;

    height:
        20px !important;

    border-radius:
        50% !important;

    background:
        rgba(255,255,255,0.18) !important;
}


/* =========================================================
   18. العناوين
   ========================================================= */

.home-block-title {

    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
}


/* =========================================================
   19. الخط الفاصل للعناوين
   ========================================================= */

.home-block-line {

    transition:
        width 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
}


/* =========================================================
   20. لون المجموع والريال
   ========================================================= */

.inline-block.item-total,
.inline-block.item-total i,
.inline-block.item-total .sicon-sar,
.text-primary .item-total,
.text-primary .item-total i,
.text-primary .sicon-sar {

    color:
        #800020 !important;
}


/* =========================================================
   21. حواف بطاقة المنتج داخل السلة
   ========================================================= */

.cart-item.border.border-primary {

    border-color:
        #800020 !important;
}


/* =========================================================
   22. حواف ملخص الطلب
   ========================================================= */

.s-cart-summary-card.s-cart-summary-card--desktop {

    border:
        1px solid #800020 !important;

    outline:
        1px solid #800020 !important;

    outline-offset:
        0 !important;

    border-radius:
        8px !important;
}


/* =========================================================
   23. البنر المخصص
   ========================================================= */

.advanced-slider.advanced-slider--3.auto-height .custom-banner {

    width:
        100% !important;

    aspect-ratio:
        1580 / 588 !important;

    background-image:
        url("ضع-رابط-الصورة-هنا") !important;

    background-size:
        contain !important;

    background-position:
        center !important;

    background-repeat:
        no-repeat !important;

    border-radius:
        32px !important;

    overflow:
        hidden !important;
}


/* =========================================================
   24. الجوال - الحركات
   ========================================================= */

@media (max-width: 768px) {

    main .s-block.aroz-pop-section,
    .advanced-slider.aroz-pop-section {

        transform:
            translate3d(0, 35px, 0)
            scale(0.97) !important;

        transition:
            opacity 0.65s ease,
            transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }


    main .s-block.aroz-pop-section.aroz-pop-visible,
    .advanced-slider.aroz-pop-section.aroz-pop-visible {

        transform:
            translate3d(0, 0, 0)
            scale(1) !important;
    }


    .s-block.s-block--square-links.square-links-1
    .square-links__grid {

        scroll-behavior:
            smooth !important;

        scroll-snap-type:
            none !important;
    }


    .aroz-add-notice {

        right:
            14px !important;

        left:
            14px !important;

        bottom:
            18px !important;

        justify-content:
            center !important;

        text-align:
            center !important;
    }


    .aroz-product-pop {

        transform:
            translate3d(0, 28px, 0)
            scale(0.98) !important;
    }
}


/* =========================================================
   25. تقليل الحركة
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;
    }
}


/* =========================================================
   26. إطار الكمية (+ / الرقم / -)
   ========================================================= */

.cart-item .s-quantity-input-container {

    border:
        1px solid #800020 !important;

    border-radius:
        8px !important;

    overflow:
        hidden !important;

    box-sizing:
        border-box !important;
}


/* =========================================================
   27. أزرار + و -
   ========================================================= */

.cart-item .s-quantity-input-button {

    color:
        #800020 !important;

    border-color:
        #800020 !important;

    background:
        transparent !important;
}


.cart-item .s-quantity-input-button svg,
.cart-item .s-quantity-input-button svg path {

    fill:
        #800020 !important;
}


/* =========================================================
   28. رقم الكمية
   ========================================================= */

.cart-item .s-quantity-input-input {

    color:
        #800020 !important;

    border-color:
        #800020 !important;

    background:
        transparent !important;

    font-weight:
        600 !important;
}


/* =========================================================
   29. الفواصل داخل إطار الكمية
   ========================================================= */

.cart-item .s-quantity-input-container
.s-quantity-input-button:first-child {

    border-left:
        1px solid #800020 !important;
}


.cart-item .s-quantity-input-container
.s-quantity-input-button:last-child {

    border-right:
        1px solid #800020 !important;
}


/* =========================================================
   30. صور المنتجات داخل السلة
   ========================================================= */

.cart-item > div > div:first-child > a.relative {

    width:
        120px !important;

    height:
        100px !important;

    flex:
        0 0 120px !important;

    display:
        block !important;

    overflow:
        hidden !important;
}


.cart-item > div > div:first-child > a.relative img {

    width:
        120px !important;

    height:
        100px !important;

    max-width:
        none !important;

    object-fit:
        cover !important;

    object-position:
        center !important;

    border-radius:
        8px !important;

    display:
        block !important;
}


/* =========================================================
   31. المجموع داخل المنتج
   ========================================================= */

.cart-item p.text-primary {

    color:
        #800020 !important;
}


.cart-item p.text-primary .item-total,
.cart-item p.text-primary .item-total i,
.cart-item p.text-primary .sicon-sar {

    color:
        #800020 !important;
}


/* =========================================================
   32. الجوال - صور السلة
   ========================================================= */

@media (max-width: 768px) {

    .cart-item > div > div:first-child > a.relative {

        width:
            105px !important;

        height:
            88px !important;

        flex:
            0 0 105px !important;
    }


    .cart-item > div > div:first-child > a.relative img {

        width:
            105px !important;

        height:
            88px !important;
    }


    .cart-item .s-quantity-input-container {

        border-radius:
            7px !important;
    }
}


/* =========================================================
   33. الفوتر - أيقونات التواصل الاجتماعي
   ========================================================= */

.store-footer salla-social a,
.store-footer salla-social li a,
.store-footer salla-social ul li a {

    border:
        1px solid #800020 !important;

    border-color:
        #800020 !important;

    border-radius:
        50% !important;

    color:
        #800020 !important;

    background:
        transparent !important;
}


/* لون الأيقونات */

.store-footer salla-social a svg,
.store-footer salla-social a svg path,
.store-footer salla-social li svg,
.store-footer salla-social li svg path {

    color:
        #800020 !important;

    fill:
        #800020 !important;
}


/* =========================================================
   34. الخطوط العمودية في الفوتر
   متساوية تمامًا
   ========================================================= */

.store-footer__grid > div {

    position:
        relative !important;

    border-inline-start:
        none !important;

    border-inline-end:
        none !important;
}


/* الخط الأول */

.store-footer__grid > div:nth-child(2)::before {

    content:
        "" !important;

    position:
        absolute !important;

    top:
        50% !important;

    transform:
        translateY(-50%) !important;

    inset-inline-start:
        0 !important;

    width:
        1px !important;

    height:
        260px !important;

    background:
        #800020 !important;

    opacity:
        1 !important;

    pointer-events:
        none !important;
}


/* الخط الثاني */

.store-footer__grid > div:nth-child(2)::after {

    content:
        "" !important;

    position:
        absolute !important;

    top:
        50% !important;

    transform:
        translateY(-50%) !important;

    inset-inline-end:
        0 !important;

    width:
        1px !important;

    height:
        260px !important;

    background:
        #800020 !important;

    opacity:
        1 !important;

    pointer-events:
        none !important;
}


/* =========================================================
   35. الخط الأفقي أسفل الجزء العلوي
   ========================================================= */

.store-footer__contacts-row {

    border-top:
        1px solid #800020 !important;

    padding-top:
        22px !important;
}


/* =========================================================
   36. أيقونات الدفع - إزالة الخلفية البيضاء
   ========================================================= */

.store-footer .s-payments-list {

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        8px !important;
}


.store-footer .s-payments-list-item {

    background:
        transparent !important;

    border:
        none !important;

    box-shadow:
        none !important;

    padding:
        0 !important;
}


.store-footer .s-payments-list-item img {

    background:
        transparent !important;

    border:
        none !important;

    box-shadow:
        none !important;

    mix-blend-mode:
        multiply !important;

    border-radius:
        0 !important;
}


/* =========================================================
   37. إزالة الخلفيات من حاويات الدفع
   ========================================================= */

.store-footer salla-payments,
.store-footer .s-payments-list-wrap,
.store-footer .s-payments-list,
.store-footer .s-payments-list-item {

    background:
        transparent !important;
}


/* =========================================================
   38. ألوان أيقونات التواصل داخل الفوتر
   ========================================================= */

.store-footer__contacts-row .contact-icon {

    border-color:
        #800020 !important;

    color:
        #800020 !important;

    background:
        transparent !important;
}


.store-footer__contacts-row .contact-icon::before {

    color:
        #800020 !important;
}


/* =========================================================
   39. الجوال - الفوتر
   ========================================================= */

@media (max-width: 768px) {

    .store-footer__grid > div:nth-child(2)::before,
    .store-footer__grid > div:nth-child(2)::after {

        display:
            none !important;
    }


    .store-footer__contacts-row {

        border-top:
            1px solid #800020 !important;

        padding-top:
            18px !important;
    }


    .store-footer .s-payments-list {

        justify-content:
            center !important;

        flex-wrap:
            wrap !important;
    }
}


/* =========================================================
   40. القائمة الرئيسية - Hover
   ========================================================= */

header nav a,
header .navbar a,
header .main-menu a,
header .main-menu__item > a,
header .menu-item > a {

    background:
        transparent !important;

    transition:
        color 0.25s ease !important;
}


header nav a:hover,
header .navbar a:hover,
header .main-menu li:hover > a,
header .main-menu__item:hover > a,
header .menu-item:hover > a {

    background:
        transparent !important;

    color:
        #800020 !important;

    opacity:
        1 !important;

    text-decoration:
        underline !important;

    text-decoration-color:
        #800020 !important;

    text-decoration-thickness:
        1px !important;

    text-underline-offset:
        6px !important;
}


/* =========================================================
   41. القائمة المنسدلة - حركة الظهور
   ========================================================= */

header .dropdown-menu,
header .sub-menu {

    animation:
        arozDropdownIn 0.25s ease-out !important;

    transform-origin:
        top center !important;
}


@keyframes arozDropdownIn {

    0% {

        opacity:
            0;

        transform:
            translateY(-8px)
            scale(0.98);
    }

    100% {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   42. أصناف القائمة المنسدلة
   ========================================================= */

header .dropdown-menu a,
header .sub-menu a {

    position:
        relative !important;

    display:
        block !important;

    background:
        transparent !important;

    color:
        #800020 !important;

    transition:
        color 0.2s ease,
        padding-right 0.2s ease !important;
}


/* =========================================================
   43. Hover داخل القائمة المنسدلة
   ========================================================= */

header .dropdown-menu a:hover,
header .sub-menu a:hover {

    background:
        transparent !important;

    color:
        #800020 !important;

    padding-right:
        8px !important;
}


/* =========================================================
   44. الخط الجانبي داخل القائمة المنسدلة
   ========================================================= */

header .dropdown-menu a::before,
header .sub-menu a::before {

    content:
        "" !important;

    position:
        absolute !important;

    right:
        0 !important;

    top:
        50% !important;

    width:
        3px !important;

    height:
        0 !important;

    border-radius:
        10px !important;

    background:
        #800020 !important;

    transform:
        translateY(-50%) !important;

    transition:
        height 0.2s ease !important;
}


header .dropdown-menu a:hover::before,
header .sub-menu a:hover::before {

    height:
        20px !important;
}


/* =========================================================
   45. الأسهم عند Hover
   ========================================================= */

header nav li:hover > a svg,
header nav li:hover > a svg path,
header .navbar li:hover > a svg,
header .navbar li:hover > a svg path,
header .main-menu li:hover > a svg,
header .main-menu li:hover > a svg path {

    color:
        #800020 !important;

    fill:
        #800020 !important;

    stroke:
        #800020 !important;
}


/* =========================================================
   46. الجوال - القائمة المنسدلة
   ========================================================= */

@media (max-width: 768px) {

    header .dropdown-menu,
    header .sub-menu {

        animation:
            arozDropdownMobile 0.3s ease-out !important;
    }


    @keyframes arozDropdownMobile {

        0% {

            opacity:
                0;

            transform:
                translateY(-6px);
        }

        100% {

            opacity:
                1;

            transform:
                translateY(0);
        }
    }


    header .dropdown-menu a,
    header .sub-menu a {

        transition:
            color 0.2s ease,
            padding-right 0.2s ease !important;
    }


    header .dropdown-menu a:hover,
    header .sub-menu a:hover {

        padding-right:
            8px !important;

        color:
            #800020 !important;

        background:
            transparent !important;
    }


    header .dropdown-menu a::before,
    header .sub-menu a::before {

        height:
            0 !important;

        transition:
            height 0.2s ease !important;
    }


    header .dropdown-menu a:hover::before,
    header .sub-menu a:hover::before {

        height:
            18px !important;
    }
}

/* =========================================================
   47. عرض سريع - الحواف وتأثير الماوس
   الكلاس المطلوب فقط: flex align-items-center
   ========================================================= */

.flex.align-items-center {
    border-radius: 18px !important;
    overflow: hidden !important;
    border: 1px solid #800020 !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease !important;

    box-shadow:
        0 10px 30px rgba(128, 0, 32, 0.12) !important;
}


/* عند مرور الماوس */

.flex.align-items-center:hover {
    transform:
        translateY(-2px) !important;

    border-color:
        #800020 !important;

    box-shadow:
        0 16px 38px rgba(128, 0, 32, 0.20) !important;
}