/* =========================================================
   TARAF STORE - CUSTOM CSS
   هوية ترف
   ========================================================= */


/* =========================================================
   ألوان وهوية المتجر
   ========================================================= */

:root {
    --main-color: #74111F;
    --main-color-dark: #4E0712;
    --second-color: #F7F1E5;
    --three-color: #C9A24D;
    --gold-light: #E3C36A;
    --body-color: #3A0B12;

    --main-rgb: 116, 17, 31;
    --gold-rgb: 201, 162, 77;
    --cream-rgb: 247, 241, 229;

    /* رابط شعار ترف */
    --logo: url('https://cdn.files.salla.network/other/70698666/bab3359b-7295-4ac2-ad64-91647ef38aeb-original.webp');
}


/* =========================================================
   القوائم
   ========================================================= */

.mm-spn li a,
.mm-spn li > span {
    color: #fff !important;
}

.mm-spn ul.main-menu li:before {
    color: var(--gold-light) !important;
}

.mm-spn.mm-spn--navbar ul {
    background: var(--main-color-dark) !important;
}

.mm-spn li {
    color: var(--second-color) !important;
}

.main-menu li > a {
    color: #222 !important;
    background: #fff !important;
    transition: color .25s ease, background .25s ease;
}

.main-menu li > a:hover {
    color: var(--main-color) !important;
    background: #fff !important;
}


/* =========================================================
   الصور العامة
   ========================================================= */

.lazy__bg.loaded {
    background-size: contain;
}

.swiper .swiper-wrapper a img {
    width: 100%;
    height: 100%;
    border-radius: 14px !important;
    object-fit: cover;
}


/* =========================================================
   الأزرار العامة
   ========================================================= */

.s-button-element:not(:disabled):not([loading]),
.s-add-product-button-main .s-add-product-button-mini-checkout {
    background: #fff !important;
    border: 1.5px solid var(--main-color) !important;
    color: var(--main-color) !important;
    border-radius: 12px !important;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

.s-button-element:not(:disabled):not([loading]):hover,
.s-add-product-button-main .s-add-product-button-mini-checkout:hover {
    background: linear-gradient(
        135deg,
        var(--main-color),
        var(--main-color-dark)
    ) !important;

    border-color: var(--three-color) !important;
    color: #fff !important;

    box-shadow:
        0 6px 16px rgba(116, 17, 31, .20);

    transform: translateY(-1px);
}


/* =========================================================
   تبويبات المنتجات
   ========================================================= */

.s-block--tabs-produtcs .tab-trigger.is-active button {
    color: var(--three-color) !important;
}


/* =========================================================
   خيارات المنتج
   ========================================================= */

.s-product-options-wrapper {
    background: #fff !important;
    border-radius: 12px;
}

.p-5 {
    background: #fff !important;
}


/* =========================================================
   عناوين الأقسام
   ========================================================= */

.s-block__title h2,
.s-slider-block_display-all,
.s-slider-block_title h2:where([dir="rtl"], [dir="rtl"] *),
.s-reviews-testimonial__name_wrapper,
.s-reviews-container .swiper-slide-active .s-reviews-testimonial__rating,
.s-reviews-container .swiper-slide-active .s-reviews-testimonial__text p {
    color: var(--main-color) !important;
}

.s-slider-block_display-all,
.s-slider-block_title h2:where([dir="rtl"], [dir="rtl"] *) {
    font-size: 20px;
}

.s-slider-block__display-all,
.s-slider-block_title h2:where([dir="rtl"], [dir="rtl"] *),
.s-block_title h2 {
    padding: 8px 16px;

    border: 1.5px solid rgba(var(--gold-rgb), .55);

    border-radius: 12px;

    background: rgba(var(--cream-rgb), .65);

    color: var(--main-color) !important;

    font-weight: 700;
    font-size: 18px;

    text-align: center;
}


/* =========================================================
   الكاتيجوري
   ========================================================= */

.slide--cat-entry {
    background: transparent !important;
    color: var(--main-color) !important;

    transition:
        color .25s ease,
        transform .25s ease;
}

.slide--cat-entry:hover {
    color: var(--three-color) !important;
    transform: translateY(-2px);
}


/* =========================================================
   العناصر النصية
   ========================================================= */

.flex-col {
    color: var(--main-color);
}

.s-contacts-icon svg {
    color: var(--three-color) !important;
}


/* =========================================================
   عناصر المميزات
   ========================================================= */

.s-block--features__item {
    background: linear-gradient(
        135deg,
        var(--main-color),
        var(--main-color-dark)
    ) !important;

    color: #fff;

    padding: 14px;

    border-radius: 14px;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.s-block--features__item p {
    color: #fff !important;
}

.s-block--features__item .feature-icon {
    background: var(--three-color) !important;
    color: var(--main-color) !important;
}

.s-block--features__item .feature-icon i {
    color: var(--main-color) !important;
}

.s-block--features__item:hover {
    transform: translateY(-5px);

    background: linear-gradient(
        135deg,
        var(--main-color-dark),
        var(--main-color)
    ) !important;

    box-shadow:
        0 10px 24px rgba(116, 17, 31, .20),
        0 0 0 1px rgba(var(--gold-rgb), .30);
}


/* عنوان المميزات */

section[data-testid="store-home-features"]
.s-block--features__item h2 {
    color: #E3C36A !important;
}


/* =========================================================
   بانرات الأقسام
   ========================================================= */

.banner-entry {
    perspective: 1000px;

    background: transparent !important;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        filter .35s ease;
}

.banner-entry:hover {
    transform: translateY(-6px) scale(1.015);

    box-shadow:
        0 12px 28px rgba(116, 17, 31, .18),
        0 0 0 1px rgba(var(--gold-rgb), .35);

    filter: brightness(1.03);
}


/* =========================================================
   إعلانات المتجر
   ========================================================= */

.s-advertisement-content {
    background: var(--second-color) !important;
}


/* =========================================================
   الصور المتحركة
   ========================================================= */

.s-block--photos-slider {
    margin-top: 0 !important;
}

.swiper {
    padding-left: 0 !important;
}

salla-slider.photos-slider .swiper-slide {
    position: relative;

    margin-left: 1.1rem;
    margin-right: .5rem;

    height: auto;
    width: 100%;

    overflow: hidden;

    padding-left: 0;
    padding-right: 0;
}


/* =========================================================
   عناوين السلايدر
   ========================================================= */

.s-block__title .right-side,
.s-slider-block__title-right {
    flex: 1;

    text-align: center;

    font-weight: 700;

    width: fit-content;

    font-size: 20px !important;

    font-family: sans-serif !important;

    color: var(--main-color) !important;
}


/* =========================================================
   كروت المنتجات
   ========================================================= */

.s-products-slider-card,
.s-product-card {
    position: relative;

    overflow: hidden;

    background: #fff;

    border: 1px solid rgba(var(--main-rgb), .08);

    border-radius: 16px;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


/* =========================================================
   Hover الكارت
   ========================================================= */

.s-products-slider-card:hover,
.s-product-card:hover {
    transform: translateY(-6px);

    border-color: rgba(var(--gold-rgb), .75);

    box-shadow:
        0 10px 25px rgba(78, 7, 18, .12),
        0 0 0 1px rgba(var(--gold-rgb), .10);
}


/* =========================================================
   منع أي Animation قديم للكارت
   ========================================================= */

.s-products-slider-card:hover {
    animation: none !important;
}


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

.s-products-slider-card img,
.s-product-card img,
.s-product-card-image img.loaded {
    display: block;

    width: 100%;
    height: auto;

    transition:
        transform .45s ease,
        filter .45s ease;
}

.s-products-slider-card:hover img,
.s-product-card:hover img {
    transform: scale(1.04);

    filter: brightness(1.03);
}


/* =========================================================
   إزالة تأثير الدائرة القديم
   ========================================================= */

img.lazy.loaded {
    border-radius: 14px !important;

    transition:
        border-radius .3s ease,
        transform .3s ease,
        box-shadow .3s ease,
        filter .3s ease !important;
}

img.lazy.loaded:hover {
    border-radius: 14px !important;
}


/* =========================================================
   سعر المنتج
   ========================================================= */

.s-product-card-price {
    font-size: .875rem;

    line-height: 1.25rem;

    font-weight: 700;

    background: transparent !important;

    padding: 0 !important;

    border-radius: 0 !important;

    color: var(--main-color) !important;
}

.s-product-card-price del {
    color: #999 !important;
}

.s-product-card-price span {
    color: var(--main-color) !important;
}


/* =========================================================
   زر أضف إلى السلة داخل كرت المنتج
   ========================================================= */

.s-products-slider-card .s-button-element,
.s-product-card .s-button-element {
    background: #fff !important;

    color: var(--main-color) !important;

    border: 1.5px solid var(--main-color) !important;

    border-radius: 12px !important;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

.s-products-slider-card .s-button-element:hover,
.s-product-card .s-button-element:hover {
    background: linear-gradient(
        135deg,
        var(--main-color),
        var(--main-color-dark)
    ) !important;

    color: #fff !important;

    border-color: var(--three-color) !important;

    box-shadow:
        0 5px 14px rgba(116, 17, 31, .22);

    transform: translateY(-1px);
}


/* =========================================================
   القلب والمفضلة
   ========================================================= */

.s-products-slider-card .s-product-card-wishlist,
.s-product-card .s-product-card-wishlist {
    transition:
        transform .3s ease,
        color .3s ease,
        background .3s ease;
}

.s-products-slider-card .s-product-card-wishlist:hover,
.s-product-card .s-product-card-wishlist:hover {
    transform: scale(1.08);

    color: var(--three-color) !important;
}


/* =========================================================
   خيارات المنتج
   ========================================================= */

.s-quantity-input-button {
    width: 2.75rem;

    background: var(--main-color) !important;

    color: #fff !important;

    transition:
        color .3s ease,
        background .3s ease,
        border-color .3s ease;
}

.s-quantity-input-button:hover {
    background: var(--three-color) !important;

    color: var(--main-color) !important;
}

.s-product-options-wrapper {
    margin-bottom: 1.25rem;

    display: block;

    border-radius: 12px;

    padding: 1.25rem;

    background: #fff !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer-is-light .store-footer {
    background:
        linear-gradient(
            135deg,
            var(--main-color-dark),
            var(--main-color)
        ) !important;

    color: #fff;

    padding: 30px;

    border-radius: 20px;
}

.footer-is-light .store-footer .store-footer__inner {
    position: relative;

    overflow: hidden;

    padding-top: 120px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.02)
        ) !important;

    border-radius: 20px;

    border: 1px solid rgba(255,255,255,.14);

    box-shadow:
        0 8px 32px rgba(0,0,0,.22);
}


/* =========================================================
   عناوين الفوتر
   ========================================================= */

.store-footer h3 {
    margin-bottom: .75rem;

    font-size: 1.125rem;

    line-height: 1.75rem;

    font-weight: 700;

    background: rgba(0,0,0,.15);

    padding: 8px;

    border-radius: 8px;

    text-align: center;

    width: 100%;

    color: #fff !important;
}

.s-contacts-icon:where([dir=rtl],[dir=rtl] *) {
    margin-left: .625rem;

    color: var(--gold-light) !important;
}


/* =========================================================
   رابط برمجة وتطوير ALZaiem
   ========================================================= */

.alzaiem-copy-rights {
    width: 100%;

    display: flex;

    justify-content: center;

    text-align: center;

    margin-top: 15px;
}

.alzaiem-footer-link {
    display: inline-block;

    background:
        linear-gradient(
            135deg,
            var(--main-color),
            var(--three-color)
        );

    background-size: 200% 200%;

    color: #fff;

    font-weight: 700;

    font-size: 16px;

    padding: 12px 30px;

    border-radius: 50px;

    opacity: .95;

    text-decoration: none;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background-position .4s ease;

    animation:
        gradientMove 4s ease infinite;
}

.alzaiem-footer-link:hover {
    transform: scale(1.03);

    box-shadow:
        0 8px 20px rgba(0,0,0,.18);
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* =========================================================
   واتساب
   ========================================================= */

.whatsapp-me {
    position: fixed;

    bottom: 10px;
    right: 15px;

    width: 50px;
    height: 50px;

    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    box-shadow:
        0 0 12px rgba(37, 211, 102, .45);

    animation:
        float 3s ease-in-out infinite;

    z-index: 9999;
}

.whatsapp-me div {
    background-color: #25D366;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;
}

.whatsapp-me img {
    width: 30px;
    height: 30px;
}


/* =========================================================
   البانرات الثابتة
   ========================================================= */

.banner--fixed img {
    display: block;

    width: 100%;

    background: transparent;

    border-radius: 16px;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.banner--fixed img:hover {
    transform: scale(1.015);

    box-shadow:
        0 8px 20px rgba(78, 7, 18, .14);
}


/* =========================================================
   تعليقات المنتجات
   ========================================================= */

.s-comments-product {
    margin-bottom: 1rem;

    padding-top: 1rem;
    padding-bottom: 1rem;

    background:
        linear-gradient(
            135deg,
            var(--main-color-dark),
            var(--main-color)
        ) !important;
}


/* =========================================================
   شاشة تحميل ترف
   Blur + Logo منفصلين
   ========================================================= */


/* طبقة الـBlur */

body::before {
    content: "";

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 999998;

    background: rgba(255, 255, 255, 0.38);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    pointer-events: none;

    animation:
        tarafLoaderBlur 2.5s ease forwards;
}


/* شعار ترف في المنتصف */

body::after {
    content: "";

    position: fixed;

    top: 50%;
    left: 50%;

    width: 260px;
    height: 260px;

    transform:
        translate(-50%, -50%)
        scale(1);

    z-index: 999999;

    background-image: var(--logo);

    background-repeat: no-repeat;

    background-position: center;

    background-size: contain;

    pointer-events: none;

    animation:
        tarafLoaderLogo 2.5s ease forwards;
}


/* حركة الـBlur */

@keyframes tarafLoaderBlur {

    0% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}


/* حركة الشعار */

@keyframes tarafLoaderLogo {

    0% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(.75);
    }

    20% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }

    70% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(1.05);
    }
}


/* =========================================================
   شعار متحرك داخل الفوتر
   ========================================================= */

.footer-is-light .store-footer .store-footer__inner:before {
    content: "";

    display: block;

    height: 110px;
    width: 140px;

    background-image: var(--logo);

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;

    position: absolute;

    top: 0;
    left: -15%;

    z-index: 2;

    animation:
        swoop-snake 20s ease-in-out infinite;
}

@keyframes swoop-snake {

    0% {
        left: -15%;
        transform: translateY(0);
    }

    25% {
        left: 25%;
        transform: translateY(-15px);
    }

    50% {
        left: 50%;
        transform: translateY(0);
    }

    75% {
        left: 75%;
        transform: translateY(15px);
    }

    100% {
        left: 110%;
        transform: translateY(0);
    }
}


/* =========================================================
   خلفية واضحة وراء الشعار المتحرك
   ========================================================= */

.footer-is-light .store-footer .store-footer__inner::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 120px;

    background:
        linear-gradient(
            90deg,
            rgba(247, 241, 229, .96),
            rgba(227, 195, 106, .92),
            rgba(247, 241, 229, .96)
        );

    border-bottom:
        1px solid rgba(201, 162, 77, .45);

    box-shadow:
        0 3px 15px rgba(0, 0, 0, .10);

    z-index: 1;

    pointer-events: none;
}


/* محتوى الفوتر فوق الخلفية */

.footer-is-light .store-footer .store-footer__inner > * {
    position: relative;

    z-index: 3;
}


/* =========================================================
   AL Zaiem Footer Hover
   ========================================================= */

.store-footer .copyright-text a {
    color: #F7F1E5 !important;

    transition:
        color .3s ease,
        text-shadow .3s ease;
}

.store-footer .copyright-text a:hover,
.store-footer .copyright-text a.hover\:text-primary:hover {
    color: #E3C36A !important;

    text-shadow:
        0 0 8px rgba(227, 195, 106, .45);

    text-decoration: none !important;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 767px) {

    .s-products-slider-card,
    .s-product-card {
        border-radius: 14px;
    }

    .s-products-slider-card:hover,
    .s-product-card:hover {
        transform: translateY(-3px);
    }

    .banner-entry:hover {
        transform: translateY(-3px) scale(1.01);
    }

    .s-block__title h2 {
        font-size: 18px !important;
    }

    .alzaiem-footer-link {
        font-size: 14px;

        padding: 10px 22px;
    }

    /* شعار شاشة التحميل على الموبايل */

    body::after {
        width: 210px;
        height: 210px;
    }
}


/* =========================================================
   نهاية الكود
   ========================================================= */

/* =========================================================
   TARAF - PREMIUM BACKGROUND
   ========================================================= */

/* الخلفية الأساسية */
html {
    background: #F7F1E5 !important;
}

body {
    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(116, 17, 31, 0.10) 0%,
            rgba(116, 17, 31, 0.04) 18%,
            transparent 38%
        ),
        radial-gradient(
            circle at 92% 28%,
            rgba(201, 162, 77, 0.13) 0%,
            rgba(201, 162, 77, 0.04) 18%,
            transparent 40%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(201, 162, 77, 0.08) 0%,
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 78%,
            rgba(116, 17, 31, 0.06) 0%,
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #FCFAF5 0%,
            #F7F1E5 48%,
            #F2E8D8 100%
        ) !important;

    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}


/* =========================================================
   كشف خلفية الموقع خلف الأقسام
   ========================================================= */

#main-content,
main#main-content,
main#main-content > section,
main#main-content > section > .container {
    background-color: transparent !important;
}


/* منع الأقسام من تغطية الخلفية بالأبيض */
#main-content .s-block {
    background-color: transparent !important;
}


/* =========================================================
   الحفاظ على وضوح الكروت
   ========================================================= */

#main-content .s-product-card,
#main-content .s-products-slider-card {
    background: #FFFFFF !important;

    box-shadow:
        0 5px 18px rgba(78, 7, 18, 0.07);
}


/* المميزات */
#main-content .s-block--features__item {
    background: linear-gradient(
        135deg,
        #74111F,
        #4E0712
    ) !important;
}


/* =========================================================
   عناوين الأقسام
   ========================================================= */

#main-content .s-block__title h2,
#main-content .s-slider-block_title h2 {
    color: #74111F !important;
}


/* =========================================================
   الكاتيجوري
   ========================================================= */

#main-content .slide--cat-entry {
    background: transparent !important;
}


/* =========================================================
   تحسين المساحات بين الأقسام
   ========================================================= */

#main-content > section {
    position: relative;
}


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

@media (max-width: 767px) {

    html,
    body {
        background:
            radial-gradient(
                circle at 10% 8%,
                rgba(116, 17, 31, 0.08),
                transparent 32%
            ),
            radial-gradient(
                circle at 90% 35%,
                rgba(201, 162, 77, 0.09),
                transparent 32%
            ),
            linear-gradient(
                135deg,
                #FCFAF5 0%,
                #F7F1E5 100%
            ) !important;

        background-attachment: scroll !important;
    }
}