/* 1. Keep your existing slider tweaks */
.custom_links .salla-slider .container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.custom_links .swiper-slide {
    flex: 1 0 auto !important;
    max-width: none !important;
    margin: 0 !important;
}
.custom_links .swiper-wrapper {
    justify-content: space-evenly !important;
}
.custom_links .s-slider-container {
    padding-inline: 0 !important;
}

/* 2. Neutralize all Tailwind “red” utilities → }

/* 1) Declare your brand‐wide CSS variables */
:root {
  --font-main:       'sky-bold', sans-serif;
  --font-secondary:  'sky', sans-serif;
  --color-primary:       #0980aa; /* new teal */
  --color-primary-dark:  #132b4c; /* deep navy */
  --color-primary-light: #139246; /* accent green */
}

/* 2) Font usage */
body {
  font-family: var(--font-secondary);
}
/* If you need headlines in bold: */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-main);
}

/* 3) Rewire all “primary” utilities to your variable */
/* Buttons */
.btn--primary,
.btn-primary,
.s-button-primary,
.salla-add-to-cart .s-button-primary {
  background-color: var(--color-primary) !important;
  border-color:     var(--color-primary) !important;
  color:            #fff              !important;
}

/* Text */
.text-primary,
a.text-primary,
.fix-align.text-primary,
.title,
.coupon-title.text-primary {
  color: var(--color-primary) !important;
}

/* Backgrounds */
.bg-primary {
  background-color: var(--color-primary) !important;
}

/* Borders */
.border-primary {
  border-color: var(--color-primary) !important;
}

/* SVG strokes/fills if needed */
svg .stroke-current,
svg .fill-current {
  stroke: var(--color-primary) !important;
  fill:   var(--color-primary) !important;
}


element.style {
    width: 100%;
    background-color: rgb(9 128 170);
}

.angel-discountcoupon {
    border-color: rgb(9 128 170);
}


/* === Keep “Buy with” fast-checkout button in Accent Red === 
.s-fast-checkout-button {
  color: #bd202e !important;
}
.s-fast-checkout-button svg path {
  fill: #bd202e !important;
} */

/* === Override Salla “Add to Cart” buttons back to Accent Red === */
button.s-button-element.s-button-btn.s-button-primary,
button.s-button-element.s-button-btn.s-button-solid.s-button-primary,
button.s-button-wide.s-button-primary,
button.s-button-loader-center.s-button-primary {
  background-color: #bd202e !important;
  border-color:     #bd202e !important;
  color:            #ffffff !important;
}



/* === 1. Keep the “إرسال” solid primary button outside the sticky bar in Teal === */
:not(.sticky-product-bar) button.s-button-element.s-button-btn.s-button-solid.s-button-primary {
  background-color: var(--color-primary) !important;
  border-color:     var(--color-primary) !important;
  color:            #ffffff           !important;
}

/* === 2. Ensure the review progress bar stays Teal (overrides inline red style) === */
.s-progress-bar-progress {
  background-color: var(--color-primary) !important;
}

/* Review Average */

.s-reviews-summary-average {
    font-size: 2rem;
    text-align: center;
    line-height: 1;
    --tw-text-opacity: 1;
    color: rgba(31, 41, 55, 1);
    color: rgba(31, 41, 55, var(--tw-text-opacity, 1));
}

/* === 3. Scope red overrides ONLY to the two buttons inside the sticky-product-bar === */
/* a) “Add to Cart” button */
.sticky-product-bar button.s-button-element.s-button-btn.s-button-solid.s-button-primary {
  background-color: #bd202e !important;
  border-color:     #bd202e !important;
  color:            #ffffff !important;
}

/* b) “اشتري الآن” mini-checkout widget */
.sticky-product-bar .s-add-product-button-mini-checkout-content {
  color: #bd202e !important;
}
.sticky-product-bar .s-add-product-button-mini-checkout-content svg path {
  fill: #bd202e !important;
}


/* NEW July Edits */

/* A.1 “Add to Cart” buttons → Accent Red; hover darker red; plus-icon white */
button.s-button-element.s-button-btn.s-button-solid.s-button-primary:not(.s-fast-checkout-button) {
    background-color: #bd202e !important; /* accent red */
    border-color:     #bd202e !important;
    color:            #ffffff !important;
}
button.s-button-element.s-button-btn.s-button-solid.s-button-primary:not(.s-fast-checkout-button):hover {
    background-color: #990008 !important; /* darker red on hover */
}
button.s-button-element.s-button-btn.s-button-solid.s-button-primary:not(.s-fast-checkout-button) .sicon-add {
    color: #ffffff !important;            /* plus icon white */
}

/* A.2 “Buy Now” / fast-checkout → white text on black */
button.s-fast-checkout-button {
    background-color: #000000 !important; /* black bg */
    border-color:     #000000 !important;
    color:            #ffffff !important; /* white text */
}
button.s-fast-checkout-button svg path {
    fill: #ffffff !important;             /* white icon */ 
}

/* B.1 Product title → a bit larger */
.product-single h1,
.product-single h2.da-tm,
.sticky-product-bar h2.da-tm {
    font-size: 1.2rem !important;            /* increase title size */ 
}

/* B.2 Description headings → slightly smaller */
.product-description h2,
.product-description h3,
.s-product-detail__description h2,
.s-product-detail__description h3 {
    font-size: 1rem !important;            /* reduce heading size */ 
}

/* C. “باقة التوفير” badge → black text & border; hide extra icons */
.angel-discountcoupon {
    color:        #000000 !important;      /* text black */ 
    border-color: #000000 !important;      /* frame black */
}
.angel-discountcoupon svg,
.angel-discountcoupon i {
    display: none !important;              /* remove all icons */ 
}
.angel-discountcoupon svg:nth-of-type(1),
.angel-discountcoupon i:nth-of-type(1) {
    display: inline !important;            /* keep only first */ 
}

/* D.1 Review-submit (“إرسال”) button → black */
.salla-comment-form button.s-button-solid.s-button-primary {
    background-color: #000000 !important;
    border-color:     #000000 !important;
    color:            #ffffff !important;
}

/* D.2 Star icons → gold */
.s-rating-stars-selected path,
.salla-review-card .sicon-star path {
    fill: gold !important;                 /* filled stars gold */ 
}
.salla-review-card .sicon-star {
    color: gold !important;                /* icon font fallback */ 
}

/* D.3 Review bars → black */
.s-progress-bar-progress {
    background-color: #000000 !important;  /* black fill */ 
    border-color:     #000000 !important;
}

/* E.1 Breadcrumb links (all but last) → gray */
nav.breadcrumbs ol li a.fix-align.text-primary {
    color: gray !important;
}
/* E.2 Final crumb → black & bold */
nav.breadcrumbs ol li:last-child span,
nav.breadcrumbs ol li:last-child a {
    color:      #000000 !important;
    font-weight: bold    !important;
}

/* F. Discount/coupon styling → black text & border; coupon button inverted */
.price_is_on_sale .total-price,
.s-product-card-discount .off-ratio,
.angel-discountcoupon,
.coupon-wrapper,
.coupon-wrapper .coupon-title {
    color:        #000000 !important;
    border-color: #000000 !important;
}
input#copydiscountCode {
    background-color: #000000 !important;
    color:            #ffffff !important;
    border-color:     #000000 !important;
}

/* G. Prevent product-card hover from changing text color */
.s-product-card-vertical:hover .da-tm,
.s-product-card:hover          .da-tm,
.s-product-card-vertical:hover .s-product-card__title,
.s-product-card:hover          .s-product-card__title {
    color: inherit !important;             /* keep original on hover */ 
}



/* 1. Review form “إرسال” button → black background & white text */
/* Targets the primary solid button inside the comment form action container */
.s-comment-form-action button.s-button-element.s-button-btn.s-button-solid.s-button-primary {
    background-color: #000000 !important;  /* sets button background to black */
    border-color:     #000000 !important;  /* ensures any border is also black */
    color:            #ffffff !important;  /* makes the button text white */
}


h1.text-xl.md\:text-3xl.text-primary {
    color: black !important;
}


/* 1. ONLY style the “المزيد” link inside the special-products-btn container */
.special-products-btn > a.btn--primary.font-primary {
    display: inline-flex !important;          /* keep icon + text aligned */
    align-items: center;
    justify-content: center;
    background-color: #ffffff !important;    /* white background */
    border: 1px solid #ffffff !important;    /* white border */
    color: #000000 !important;                /* black text */
    text-decoration: none !important;         /* remove any underline */
}
/* 1a. Prevent hover from changing any of the above */
.special-products-btn > a.btn--primary.font-primary:hover,
.special-products-btn > a.btn--primary.font-primary:focus {
    background-color: #ffffff !important;
    border-color:     #ffffff !important;
    color:            #000000 !important;
}

/* 2. Disable any hover color change on product‐card titles */
/* Always keep the link in .s-product-card-content-title at its base color */
.s-product-card-content-title a {
    color: inherit            !important; /* use the parent’s text color */
    text-decoration: none     !important; /* no underline on normal state */
}
.s-product-card-content-title a:hover,
.s-product-card-content-title a:focus {
    color: inherit            !important; /* keep same color on hover/focus */
    text-decoration: none     !important; /* no underline on hover/focus */
}


.s-product-options-grid-mode input:checked+div {
    background-color: #414042;
    background-color: #bd202e;
    color: var(--text-btn);
}

.s-product-options-grid-mode input:checked + div {
    border-color: #414042;
    border-color: #bd202e;
    background-color: #bd202e;
    color: #ffffff;
}


div#wa-angel {
    display: none;
}