/*------------------------------------------
   Global Typography
-------------------------------------------*/
*,
.s-add-product-button-mini-checkout-content,
.s-button-text,
.s-comment-form-input,
button,
span,
p,
a,
div,
h1, h2, h3, h4, h5, h6 {
    font-family: 'BrokenBox', sans-serif !important;
}

@media screen and (max-width: 768px) {
    body {
        font-family: 'BrokenBox', sans-serif !important;
    }
    .s-button-text, 
    .s-comment-form-input, 
        .s-add-product-button-mini-checkout-content {

        font-family: 'BrokenBox', sans-serif !important;
    }
}

/*------------------------------------------
   Buttons Styling
-------------------------------------------*/
/* Global button style */
.s-button-element {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 5px !important;
    cursor: pointer;
}

/* Wishlist Button */
.btn--wishlist.s-button-element {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;

}

/* Add to Cart Button – Solid Version */
.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
    font-weight: bold;
    padding: 12px 20px;
    font-size: 16px;
    cursor: pointer;
    position: relative !important;
    z-index: 5 !important;
    
}
.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary .s-button-text {
    color: #000000 !important;
}

salla-mini-checkout-widget .s-add-product-button-mini-checkout-content,
salla-mini-checkout-widget .s-add-product-button-mini-checkout-content span {
    color: #000000 !important;
    font-weight: bold !important;
}

/* Submit Button inside salla-button */
salla-button .s-button-element.s-button-btn.s-button-solid.s-button-primary .s-button-text {
    color: #000000 !important;
    font-weight: bold !important;
}

/* Price Text Styling */
h4.text-\[var\(--color-primary\)\] {
    color: #ff0000 !important;
    font-weight: bold !important;
}
.total-price {
    color: #000000 !important;
    font-weight: bold !important;
}
h3.text-\[var\(--color-primary-reverse\)\] {
    color: White !important;
    text-shadow: 1.5px 1.5px 5px rgba(0,0,0,0.7) !important;
    font-weight: bold !important;
}

/* Heart Icon in Button Text */
.s-button-text svg {
    fill: #000000 !important;
    color: #000000 !important;
}
                                                                                  
/*------------------------------------------
   Additional Elements Styling
-------------------------------------------*/
/* Promotion Title (e.g., "30%") */
.art-promotion-title {
    border-radius: 5px !important;
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, 0.1);
}

/* Sticky Product Bar */
.sticky-product-bar {
    position: default; /* قيمة غير صحيحة، موجودة في النسخة الأصلية */
}
.is-sticky-product-bar .sticky-product-bar {
    z-index: 10 !important;
}

/* Localization Modal Input */
.s-localization-modal-input:checked {
    background-color: #000000 !important;
    accent-color: #000000 !important;
}

/* Modal Close Icon */
.s-modal-close svg path {
    fill: #000000 !important;
}

/* Form Controls */
.art-main-content .art-product-form salla-product-options .s-form-control {

}
.s-form-control {
    border: 1.5px solid #ccc !important;
    padding: 10px;
    font-size: 16px;
    color: #000;
    position: relative;
}

/* Remove Shadows */
.shadow-md {
    --tw-shadow: none !important;
    box-shadow: none !important;
}

/* Close Button */
.btn--close {
    color: black !important;
    background-color: transparent !important;
    border: none !important;
}

/* Comments Section */
.s-comments-product {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Hide Product Grid (إذا لزم الأمر) */
.grid.grid-cols-1.lg\:grid-cols-3 {
    display: none !important;
}

/* Page Main Title Margin */
#page-main-title {
    margin: 5px;
}

/* Loader/ Button Centering (Force Center) */
#force-center {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
#force-center img {
    display: block;
    margin: 0 auto;
}

/* Removing Shadow from Loader Center Button */
.s-button-element.s-button-btn.s-button-solid.s-button-primary.s-button-loader-center {
    background-color: transparent !important;
}

.undefined.s-button-element.s-button-btn.s-button-solid.s-button-primary.s-button-loader-center {
    z-index: 5 !important;
    }    
    
.s-modal-body.s-modal-align-middle.s-modal-xs.s-modal-padding.s-modal-entering {
  z-index: 1000 !important;
}


.s-comment-form-content {
    display: none !important;
}

.s-button-element.s-button-link.s-button-solid.s-button-primary-link.s-button-loader-after {
    padding: 10px !important;
}


.art-text-button {
 border-radius: 5px !important;
}

.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center.s-button-text {
    color: #000 !important;
}

.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center {
 border-radius: 5px !important;
    background-color: #000 !important; /* لون الزر الأساسي */
    border: 1px solid #000 !important;   /* بوردر أسود */
    color: #000 !important;              /* لون النص الأساسي */
    animation: none !important;
    transition: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center .s-button-text {
    color: #fff;
}


.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center {
  position: relative;
  overflow: hidden;
}


/* الطبقة التي ستظهر عند hover لتغيير الخلفية */
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000; /* لون خلفية الطبقة */
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.5s ease;
  border-radius: 5px
    z-index: 7;
}

/* عند hover أو focus أو active، تظهر الطبقة وتتحول الخلفية للنص الأبيض */
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:hover::after,
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:focus::after,
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:active::after {
    transform: scaleX(0);
}

/* النص داخل الزر */
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center .s-button-text {
    position: relative;
    z-index: 8;
    transition: color 0.3s ease;
}

/* عند hover، يتحول لون النص إلى أبيض */
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:hover .s-button-text,
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:focus .s-button-text,
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:active .s-button-text {
    color: #fff !important;
}


////////////////////////

/* تنسيق الزر الأساسي الذي يحمل الأصناف التالية:
   s-button-element s-button-btn s-button-solid s-button-wide s-button-primary s-button-loader-center */
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center {
  border-radius: 5px !important;
  background-color: #000 !important;      /* خلفية الزر أسود */
  border: 1px solid #000 !important;        /* بوردر أسود */
  color: #000 !important;                   /* لون النص الأساسي (يمكن تغييره إذا أردت) */
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
  transform: none !important;
  position: relative;
  overflow: hidden;
}

/* تنسيق النص داخل الزر */
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center .s-button-text {
  color: #fff !important;                   /* لون النص داخل الزر يكون أبيض */
  position: relative;
  z-index: 8;
  transition: color 0.3s ease;
}

/* الطبقة التي تظهر عند hover وتغطي الزر */
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000 !important;        /* خلفية الطبقة أسود */
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.5s ease;
  border-radius: 5px;
  z-index: 7;
}

/* عند hover أو focus أو active، تختفي الطبقة وتصبح النصوص (داخل الزر) بيضاء */
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:hover::after,
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:focus::after,
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:active::after {
  transform: scaleX(0);
}

.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:hover .s-button-text,
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:focus .s-button-text,
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:active .s-button-text {
  color: #fff !important;
}

/* First image */
body > div.app-inner.flex.flex-col.min-h-full > section.art-text-with-photo.h-full.w-full.relative.overflow-hidden.lg\:px-10.md\:px-5.px-1.lg\:py-20.md\:py-10.py-5.block > div > div > div.grid.w-full.h-full.grid-cols-8.grid-rows-3.items-center.justify-center.order-last > div.col-span-4.row-span-3.md\:rtl\:-translate-x-10.rtl\:-translate-x-2.md\:ltr\:translate-x-10.ltr\:translate-x-2.relative.z-20 > img {
  border-radius: 9px;
}

/* Second image */
body > div.app-inner.flex.flex-col.min-h-full > section.art-text-with-photo.h-full.w-full.relative.overflow-hidden.lg\:px-10.md\:px-5.px-1.lg\:py-20.md\:py-10.py-5.block > div > div > div.grid.w-full.h-full.grid-cols-8.grid-rows-3.items-center.justify-center.order-last > div.col-span-4.row-span-2.relative.z-10.rtl\:translate-x-2.ltr\:-translate-x-2 > img {
  border-radius: 9px;
}

/* شكل كل الأزرار الافتراضية */
label > .s-product-options-grid-mode-span {
  background-color: #fff !important;
  border: 1px solid #ccc !important;
  color: #000 !important;
  padding: 8px 12px;
  border-radius: 4px;
  transition: none !important;
  display: inline-block;
}

/* شكل الزر لما يكون input محدد */
label:has(input:checked) > .s-product-options-grid-mode-span {
  background-color: #000 !important;
  border: 1px solid #888 !important;
  color: #fff !important;
}

#mainnav {
  background-color: var(--color-header-main, #fff) !important;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1) !important;
  z-index: 99 !important;
}

.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary {
  border-radius: 5px !important;
}

.art-main-content .art-single-btns .s-button-icon {
  border-radius: 5px !important;
}

.s-social-share-btn button,
.s-social-share-btn.s-button-element {
  background-color: black !important;
  color: white !important;
  border: 1px solid black !important;
}

.s-social-share-btn svg path {
  fill: Black !important;
}

.s-social-share-btn:hover button,
.s-social-share-btn:hover.s-button-element {
  background-color: #000 !important;
}

.s-social-share-btn:hover svg path {
  fill: white !important;
}

.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:hover .s-button-text,
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:focus .s-button-text,
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:active svg {
    fill: #fff;
}

.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center svg {
    fill: #000 !important ; ;
}

button.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center svg {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* نحف البوردر للصورة المختارة في الشريط */
.swiper-slide-thumb-active {
  border: 1px solid #2b2b2b !important; /* غيّر اللون حسب ما تريد */
  box-shadow: none !important;
}

/* إزالة أي ظل أو بوردر إضافي محيط بالصورة */
.swiper-slide-thumb-active::before,
.swiper-slide-thumb-active::after {
  display: none !important;
  box-shadow: none !important;
  border: none !important;
}

.art-banner-header {
  display: none !important;
}


@media (max-width: 768px) {
  .art-banner-2 {
    height: 50vh !important; /* بدل h-screen، نخليها 50% من الشاشة */
    background-size: cover !important;
    background-position: center center !important;
  }

  .art-banner-header {
    transform: scale(0.85); /* تصغير المحتوى الداخلي */
  }
}