/* =========================================================
   MATCHA HOUSE - CUSTOM CSS
   ========================================================= */


/* =========================================================
   1. GENERAL
   تنسيقات عامة بسيطة في المتجر
   ========================================================= */


/* تغيير لون إطار حقول الإدخال */
.form-input {
    border-color: #32372830 !important;
}


/* تغيير اللون الأحمر الافتراضي في بعض عناصر سلة */
.text-red-400 {
    color: #b43c3c !important;
}


/* لون زر الإغلاق داخل قائمة حساب العميل */
.s-user-menu-dropdown-header-close svg {
    fill: #b43c3c !important;
}


/* تغيير الخلفيات التي تستخدم اللون الأحمر الافتراضي */
.bg-red-400 {
    background-color: #b43c3c !important;
}


/* رفع السلايدر المتقدم مسافة صغيرة جدًا */
.advanced-slider {
    margin-top: -2px !important;
}


/* إخفاء زخرفة العناوين المحسنة في بعض أقسام الثيم */
span.enhanced-title-border {
    display: none;
}


/* استبدال الخلفية الرمادية بدرجة شفافة من لون الهوية */
.bg-gray-200 {
    background-color: #32372830;
}



/* =========================================================
   2. FEATURES / CIRCLE LINKS
   قسم الروابط الدائرية في الصفحة الرئيسية
   ========================================================= */


/* إخفاء الزخرفة تحت عنوان القسم */
.s-block.s-block--circle-links.circle-links-1 .enhanced-title-border {
    display: none !important;
}


/* تنسيق خلفية ومسافات قسم الروابط الدائرية */
.s-block.s-block--circle-links.circle-links-1 {
    background-color: transparent;
    margin-top: 0;
    padding: 1.5rem 2rem;

    /* خلفية مخصصة للقسم */
    background-image: url(https://i.ibb.co/378dFhr/website-size.png);
    background-repeat: repeat-x;
    background-position: center;
}


/* إخفاء الخط الافتراضي الموجود أسفل عنوان القسم */
.s-block.s-block--circle-links.circle-links-1
.my-2.mx-auto.w-28.h-0.border-2.border-primary {
    display: none;
}


/* عرض الروابط في 3 أعمدة متساوية */
.s-block.s-block--circle-links.circle-links-1 ul {
    grid-template-columns: repeat(3, 1fr);
    margin-top: .8rem;
}


/* توحيد سماكة النصوص داخل القسم */
.s-block.s-block--circle-links.circle-links-1 h2,
.s-block.s-block--circle-links.circle-links-1 h3,
.s-block.s-block--circle-links.circle-links-1 p {
    font-weight: 400;
}


/* تنسيق عناوين الروابط */
.s-block.s-block--circle-links.circle-links-1 h3 {
    margin: .5rem auto;
    color: #323728;
}


/* تحديد حجم صور الروابط الدائرية */
.s-block.s-block--circle-links.circle-links-1 img.w-24.h-24 {
    width: 5rem !important;
    height: 5rem !important;
}


/* إعدادات القسم في الكمبيوتر */
@media (min-width: 992px) {

    /* تصغير عرض مجموعة الروابط وتوسيطها */
    .s-block.s-block--circle-links.circle-links-1 ul {
        width: 30%;
        margin: 1.5rem auto 0;
    }

    /* تكبير عنوان كل رابط قليلًا */
    .s-block.s-block--circle-links.circle-links-1 h3 {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }

    /* حجم وصف الرابط */
    .s-block.s-block--circle-links.circle-links-1 p {
        font-size: 1rem;
    }

}



/* =========================================================
   3. PRODUCT CARDS
   بطاقات المنتجات
   ========================================================= */


/* تقليل المسافة أعلى قسم المنتجات الثابتة */
.s-block.container.fixed-products--2 {
    padding-top: 0;
    margin-top: 1rem;
}


/* تخفيف سماكة عنوان قسم المنتجات */
.s-block.container.fixed-products--2 h2 {
    font-weight: 400;
}


/* إخفاء الخط الموجود أسفل عنوان قسم المنتجات */
.s-block.container.fixed-products--2
.my-2.mx-auto.w-28.h-0.border-2.border-primary {
    display: none;
}


/* إضافة إطار وحواف دائرية لبطاقات المنتجات */
body.products-has-border .product-card {
    border: 1px solid #32372830;
    border-radius: 10px !important;
}


/* تنسيق زر المنتجات التي عليها تخفيض */
salla-button .s-button-btn[product-status="sale"] {
    background: var(--product-enhanced-btn-bg) !important;
    color: var(--product-enhanced-btn-color) !important;

    /* تدوير الزوايا السفلية فقط */
    border-radius: 0 0 10px 10px;
}


/* جعل نجوم تقييم المنتج ذهبية */
.s-product-card-rating span svg {
    fill: #eeb521;
}


/* إطار بطاقة المنتج المصغرة */
.products-has-border .product-entry--minimal {
    border: 1px solid #32372860;
}


/* ترتيب السعر الحالي والسعر القديم بجانب بعض */
.product-card__price {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 7px;
    margin-top: 13px;
}


/* لون السعر الحالي */
.product-card__price h4.text-red-400 {
    color: #323728 !important;
}


/* لون السعر القديم المشطوب */
.product-card__price span.line-through {
    color: #b43c3c !important;
}


/* خلفية بعض أزرار بطاقة المنتج */
.product-card__actions div button {
    background: #e2dbd1;
}


/* محاذاة بعض محتويات البطاقة إلى بداية السطر */
.product-entry__content
div.flex.items-center.gap-2.justify-center.mt-auto {
    justify-content: flex-start;
}


/* ترتيب السعر في نوع آخر من بطاقات المنتجات */
.product-entry__content >
.w-full.center-between.mb-4
.whitespace-nowrap {
    display: flex;
    flex-direction: row-reverse;
    gap: 7px;
    margin-top: 13px;
}


/* السعر الحالي في بطاقة المنتج البديلة */
.product-entry__content h4.text-red-400 {
    color: #323728 !important;
}


/* السعر القديم في بطاقة المنتج البديلة */
.product-entry__content span.line-through {
    color: #b43c3c !important;
}



/* =========================================================
   ADD TO CART BUTTON
   زر أضف إلى السلة - الشكل السابق
   ========================================================= */

/* إخفاء أيقونة السلة */
.product-card__enhanced-mini-cart
button.s-button-element i {
    display: none !important;
}

/* توسيط عبارة أضف إلى السلة داخل الزر */
.product-card__enhanced-mini-cart
button.s-button-element span {
    margin: auto;
}



/* =========================================================
   5. FEATURED PRODUCTS
   المنتجات المميزة ذات الصورة الكاملة
   ========================================================= */


/* لون السعر والنصوص الموجودة فوق الصورة */
.s-block.s-block--features-products
.absolute.bottom-0
.w-full.flex.justify-center.mb-3 h4,

.s-block.s-block--features-products
.absolute.bottom-0
.w-full.flex.justify-center.mb-3 span {
    color: #e2dbd1 !important;
}


/* عنوان المنتج فوق الصورة */
.s-block.s-block--features-products
.product-entry--full-image
.product-entry__title a {
    color: #e2dbd1 !important;
    font-size: 1.2rem;
    line-height: 2;
}


/* خلفية أزرار الإضافة للسلة والمفضلة */
.s-block.s-block--features-products
.product-entry--full-image
.addToCart button,

.s-block.s-block--features-products
.product-entry--full-image
.wishlist button {
    background-color: #e2dbd1 !important;
    border-color: #e2dbd1 !important;
}


/* لون أيقونات الأزرار */
.s-block.s-block--features-products
.product-card--primary-buttons button i,

.s-block.s-block--features-products
.product-card--primary-buttons salla-button i {
    fill: #323728 !important;
}



/* =========================================================
   6. QUICK VIEW
   نافذة العرض السريع للمنتج
   ========================================================= */


/* توحيد ألوان الحدود داخل نافذة العرض السريع */
.quickview__content
.quickview-single-info
.product-quickview__price
.price-container,

.quickview__content .details-list,

.quickview__content .border-gray-200 {
    border-bottom: 1px solid #32372830 !important;
    border-color: #32372830 !important;
}



/* =========================================================
   7. TESTIMONIALS
   آراء العملاء
   ========================================================= */


/*
   إخفاء عنوان "آراء العملاء" الأصلي بصريًا
   بدون حذف عنصر H2 نفسه
*/
.s-block--testimonials h2 {
    font-size: 0 !important;
    line-height: normal;
    text-align: center;
}


/* العنوان الصغير الأول */
.s-block--testimonials h2::before {
    content: 'لماذا ماتشا هاوس';

    font-size: 1.1rem !important;
    display: block;
    width: 100%;

    color: #323728;
    font-weight: 400;
}


/* العنوان الرئيسي الثاني */
.s-block--testimonials h2::after {
    content: 'خيارك الأمثل للماتشا؟';

    font-size: 1.5rem !important;
    display: block;
    width: 100%;

    color: #323728;
    font-weight: 900;

    margin-top: 7px;
}


/* العناوين عند استخدام المتجر باللغة الإنجليزية */
body.ltr .s-block--testimonials h2::before,
html[dir="ltr"] .s-block--testimonials h2::before {
    content: 'Why Matcha House';
}


body.ltr .s-block--testimonials h2::after,
html[dir="ltr"] .s-block--testimonials h2::after {
    content: 'Your best choice for matcha?';
}


/* =========================================================
   TESTIMONIAL CARDS
   توحيد ارتفاع بطاقات آراء العملاء
   ========================================================= */

/* جعل Swiper يسمح للبطاقات بالتمدد بنفس الارتفاع */
.s-block--testimonials .swiper-wrapper {
    align-items: stretch;
}

/* كل تقييم يتمدد إلى نفس ارتفاع بقية التقييمات */
.s-block--testimonials .review.swiper-slide {
    height: auto !important;
    display: flex;
}

/* جعل صندوق التقييم يملأ كامل ارتفاع الـ Slide */
.s-block--testimonials .review.swiper-slide > div {
    width: 100%;
    height: 100% !important;
    display: flex;
    flex-direction: column;
}


/* =========================================================
   8. PARTNERS
   قسم الشعارات / شركاء النجاح
   ========================================================= */


/* عرض الشعار كاملًا بدون قص */
.s-block.s-block--square-links.square-links-12
img.object-cover {
    object-fit: contain !important;
}


/* إلغاء تأثير التكبير عند المرور على الشعار */
.s-block.s-block--square-links.square-links-12
img.object-cover:hover {
    transform: none !important;
}


/* إعدادات الجوال */
@media (max-width: 991px) {

    /*
       جعل كل شعار يأخذ 25% من العرض
       وبالتالي يظهر تقريبًا 4 شعارات في الشاشة
    */
    .s-block.s-block--square-links.square-links-12
    salla-slider .slide--one-sixth {
        width: 25%;
    }

    /* مسافة أعلى قسم الشعارات */
    .s-block.s-block--square-links.square-links-12
    .container {
        margin-top: 2rem;
    }

}



/* =========================================================
   9. PRODUCT PAGE
   صفحة تفاصيل المنتج
   ========================================================= */


/* خط أسفل عناوين سلايدرات المنتجات */
.s-block--best-offers .s-slider-block__title,
salla-products-slider .s-slider-block__title {
    border-bottom: 1px solid #32372830;
}


/* مسافة أسفل المنتجات المبسطة */
.product-single
.simplified-products.fit-slider-products {
    margin-bottom: 3rem;
}


/* خلفية شريط التقدم */
.s-progress-bar-wrapper {
    background-color: #32372810;
}


/* تنسيق حدود تعليقات المنتج */
.s-comments-item {
    border-color: #32372830;
    padding-bottom: 1rem;
}


/* خلفية النوافذ المنبثقة */
.s-modal-body {
    background-color: var(--bg-primary);
}


/* إزالة خلفية زر إغلاق النافذة */
.s-modal-close {
    background-color: transparent;
}


/* خلفية خيارات العروض داخل النافذة */
.s-offer-modal-cat-item.swiper-slide {
    border-color: transparent;
    background-color: #00000010;
}


/* لون العنوان الفرعي داخل نافذة العروض */
.s-modal-sub-title {
    color: #323728;
    margin-top: 8px;
}


/* لون نصوص العرض وتاريخ انتهائه */
.s-offer-modal-badge-text,
.s-offer-modal-expiry {
    color: #323728 !important;
}


/* خلفية أيقونة نافذة العرض */
.s-offer-modal-header-icon {
    background-color: #323728;
    border-color: transparent;
}


/* لون SVG داخل أيقونة العرض */
.s-offer-modal-header-icon svg {
    fill: var(--bg-primary);
}


/* لون علامة X */
.s-modal-close svg {
    fill: #b43c3c;
}



/* =========================================================
   10. PRODUCT INFO ON MOBILE
   معلومات المنتج على الجوال
   ========================================================= */

@media (max-width: 991px) {

    /*
       عرض جميع محتويات تبويبات معلومات المنتج
       بدل إظهار تبويب واحد فقط
    */
    .product-more-info
    .tab-content
    .tab-pane {
        display: block !important;
    }


    /*
       إزالة العلامة أو الخط الذي يظهر
       بجانب التبويب النشط
    */
    .product-more-info
    .more-tab-container
    .more-info-tabs__nav-link::after,

    .product-more-info
    .more-tab-container
    .more-info-tabs__nav-link.active::after {
        display: none;
    }

}



/* =========================================================
   11. TABBY & TAMARA
   خدمات التقسيط
   ========================================================= */


/* إزالة خلفية حاوية Tabby */
#tabbyPromoWrapper {
    background: none !important;
}


/* توحيد شكل Tabby وTamara */
.tamara-product-widget,
#tabbyPromo > [class*="styles__tabby"] {
    overflow: hidden !important;

    border-color: #29292950 !important;
    border-radius: 5px !important;
}



/* =========================================================
   12. PRODUCT PAGE BOXES
   صناديق المحتوى داخل صفحة المنتج
   ========================================================= */


/* خلفية وحدود بعض صناديق معلومات المنتج */
.product-single
.bg-storeBG.p-5.rounded-md.mb-5,

.product-single
.bg-storeBG.p-5.rounded-md.rounded-b-none.flex {
    background-color: #29292909;
    border-radius: 5px !important;
}


/* تغيير لون عنصر محدد داخل صفحة المنتج فقط */
.product-single
.flex.flex-grow.shrink-0 {
    color: #b43c3c !important;
}



/* =========================================================
   13. SHARE & WISHLIST
   المشاركة والمفضلة
   ========================================================= */


/* إضافة إطار دائري لأزرار المشاركة والمفضلة */
.product-single
.product-single__info
button.s-social-share-btn,

.product-single
.product-single__info
button.btn--wishlist {
    border: 1px solid #29292970 !important;
    border-radius: 50px !important;
}



/* =========================================================
   14. PRODUCT CARD SHAPE
   شكل بطاقات المنتجات
   ========================================================= */


/* حواف البطاقة العمودية */
.product-card--vertical {
    border-radius: 5px !important;
}


/* حواف صورة المنتج من الأعلى */
.product-card--rounded .product-card__image {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}


/* إزالة خلفية بعض أزرار بطاقة المنتج */
.product-card--primary-buttons button,
.product-card--primary-buttons
salla-button[product-status="out"] {
    background-color: transparent;
}



/* =========================================================
   15. PRODUCT INFO DESKTOP
   معلومات المنتج على الكمبيوتر
   ========================================================= */

@media (min-width: 992px) {

    /* خط علوي لمنطقة معلومات المنتج */
    .product-more-info.vertical {
        border-top: 1px solid #29292950;
    }


    /* خط فاصل بجانب قائمة التبويبات في العربية */
    [dir="rtl"]
    .product-more-info.vertical
    .content-ul-tab
    .more-info-tabs__nav {
        border-left: 3px solid #29292920;
    }

}



/* =========================================================
   16. USER PROFILE
   حساب العميل
   ========================================================= */


/* خط أسفل رأس قائمة العميل */
.s-user-menu-dropdown-header {
    border-bottom-color: #32372860;
}


/* لون النص داخل قائمة العميل */
.s-user-menu-dropdown-header-content span {
    color: #323728;
}


/* خلفية افتراضية لغلاف الحساب */
.profile__cover--placeholder {
    background: none;
    background-color: #323728;
}


/* بطاقات الإشعارات */
.notification-item {
    border: 1px solid #32372860;
    margin-bottom: 1rem;
}


/* خلفية أيقونة الإشعار */
.notification-item__icon {
    background-color: #32372820;
}


/* تغيير لون بعض الحدود الرمادية */
.bg-store-bg-secondary.border-b.border-gray-100 {
    border-color: #32372860;
}


/* خلفية أيقونة حالة عدم وجود محتوى */
.no-content-placeholder .rounded-icon,
.no-content-placeholder .icon {
    background-color: #32372810;
}


/* لون بعض أيقونات الحالات الفارغة */
.no-content-placeholder .sicon-packed-box::before,
.no-content-placeholder .sicon-heart::before {
    color: #323728;
}


/* لون النص داخل الحالة الفارغة */
.no-content-placeholder p {
    color: #323728;
}



/* =========================================================
   17. CART
   صفحة السلة
   ========================================================= */


/* لون أزرار الحذف والخطر */
.s-button-danger {
    background-color: #b43c3c !important;
    border-color: #b43c3c !important;
}


/* إطار التحكم بالكمية */
.s-quantity-input-container {
    border: 1px solid #32372860;
}


/* حدود حقل الكمية وعنصر السلة */
.s-quantity-input-input,
.cart-item {
    border-color: #32372860;
}


/* زر الحذف */
.btn--danger {
    background-color: #b43c3c;
    border: none;
}


/* سماكة نص أزرار السلة */
.cart salla-button .s-button-btn {
    font-weight: 500;
}


/* إطار زر الطي */
.cart .btn--collapse {
    border-color: #32372860;
}


/*
   تقليل المساحات داخل القسم الذي يحتوي
   على زر فتح/إغلاق التفاصيل
*/
.cart
.cart-item
section.bg-storeBG.p-5.rounded-md.mb-5:has(.btn--collapse) {
    padding: 1.25rem 0;
}


/* إزالة الحواف الدائرية من البانر داخل السلة */
.cart .banner--fixed img {
    border-radius: 0;
}


/* لون أيقونة السلة الفارغة */
.no-content-placeholder .icon {
    color: var(--color-primary);
}



/* =========================================================
   18. THANK YOU PAGE
   صفحة تأكيد الطلب
   ========================================================= */


/* إخفاء شريط التنقل في صفحة الشكر */
.thank-you nav.w-full.py-5 {
    display: none !important;
}


/* إزالة المساحات الداخلية من الصندوق الرئيسي */
.thank-you
.bg-storeBG.p-4.rounded-md.mb-6 {
    padding: 0 !important;
}


/* لون الروابط والأيقونات في مسار التنقل */
.thank-you ol.list-reset a,
.thank-you ol.list-reset i {
    color: #323728 !important;
}


/* إزالة المسافة أعلى منطقة صورة الشكر */
.thank-you
.bg-storeBG >
.flex.flex-col.items-center.pt-16.pb-10 {
    padding-top: 0;
}


/*
   إضافة صورة مخصصة بدل الصورة الافتراضية
   في صفحة تأكيد الطلب
*/
.thank-you
.bg-storeBG >
.flex.flex-col.items-center.pt-16.pb-10 >
div {
    background-image:
        url(https://i.ibb.co/nm672mK/website-size-12.png);

    background-size: 100%;
    background-repeat: no-repeat;

    width: 100%;
    height: 23rem;

    transform: none !important;

    margin-bottom: 1rem;
}


/* إخفاء الصورة الافتراضية الأصلية */
.thank-you
.bg-storeBG >
.flex.flex-col.items-center.pt-16.pb-10 >
div >
img {
    display: none;
}


/* دائرة أيقونة نجاح الطلب */
.thank-you .rounded-icon {
    background: #323728;
    color: #e2dbd1;
}


/* حجم الأيقونة */
.thank-you .rounded-icon i {
    font-size: 1.6rem;
}


/* صناديق بيانات الطلب */
.thank-you .thankyou-block {
    background-color: transparent;
    border: 1px solid #32372830;
}


/* تنسيق أزرار صفحة الشكر فقط */
.thank-you
salla-button
.s-button-btn {
    line-height: 2;
    font-weight: 500;
    color: #e2dbd1;
}


/* =========================================================
   END
   ========================================================= */