/* Add custom CSS styles below */ 


.top-header .top-header__info li span, .top-header .top-header__info li i {
 visibility: hidden
}

.nav-desktop--horizontal>ul .menu-item>a {
    font-size: 16px;
    font-weight: bold;
    color: #034880;
}


.s-button-element:not(:disabled):not([loading]) {
  pointer-events: auto;
}

.s-button-primary-outline {
  background-color: #034880; /* Default background color is blue */
  color: #FEFEFE; /* Text color is black */
  fill: #000000; /* Fill color for SVG icons, if applicable */
}

.s-button-primary-outline:hover {
  background-color: #034880; /* Keep the background blue on hover */
  color: #000000; /* Keep text color black on hover */
  transform: scale(1.05); /* Add scale effect on hover */
  transition: transform 300ms ease; /* Smooth transition for the scale effect */
}

.s-button-primary-outline:active {
  background-color: #ffffff; /* Change background to white when clicked */
  color: #000000; /* Keep text color black when clicked */
  border: 1px solid #034880; /* Optional: add border to distinguish the active state */
}

.s-button-outline:hover {
  border-color: transparent;
}

.s-button-btn:hover {
  opacity: .8;
}

.s-button-btn, .s-price-range-number-input {
  border-radius: .375rem !important;
}

.s-button-wide {
  width: 100%;
}


.s-button-btn {
  position: relative;
  display: inline-flex;
  flex: 1 1 0%;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: .75rem;
  border-style: solid;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: .625rem;
  padding-top: .5rem;
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 700;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: 300ms;
}

/* زر الشراء */ 
.s-fast-checkout-button.rtl {
  flex-direction: row-reverse;
}

.s-fast-checkout-button.outline {
  background-color: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.s-fast-checkout-button {
  display: flex;
  align-items: center; /* Keep items centered vertically */
  justify-content: space-between; /* Changed to space-between for better spacing */
  height: var(--salla-fast-checkout-button-height); /* Adjusted height */
  width: var(--salla-fast-checkout-button-width);
  border-radius: var(--salla-fast-checkout-button-border-radius);
  font-size: 0.75rem; /* Adjusted font size */
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.3s ease-in-out;
  border-style: none;
  border-image: none;
  font-family: "PingARLT";
  gap: 5px; /* Maintain gap between icon/text */
  direction: ltr;
  border-width: 1px;
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-primary-reverse);
  padding: 0 8px; /* Adjust padding for a more compact look */
}

.hydrated {
  visibility: inherit;
}

salla-mini-checkout-modal,
salla-mini-checkout-widget {
  visibility: hidden;
}

:host {
  font-family: "PingARLT";
  font-weight: normal;
  --salla-fast-checkout-button-height: 2rem; /* Adjusted height */
  --salla-fast-checkout-button-width: 50%; /* Keep width as is */
  --salla-fast-checkout-button-border-radius: 0.375rem; /* Keep border radius as is */
}


/*  الملاحظة */ 

.s-product-card-promotion-title {
  position: absolute;
  top: 0.4rem; /* Move it down a little */
  left: 0;
  z-index: 1;
  max-width: calc(90% - 55px);
  
  /* Rounded corners */
  border-top-left-radius: .75rem; 
  border-bottom-left-radius: .75rem; 
  border-top-right-radius: .75rem; 
  border-bottom-right-radius: .75rem; 
  
  --tw-bg-opacity: 1;

 var(--tw-bg-opacity)); /* Retained background color */
  
  /* Reduced padding for a smaller view */
  padding-left: .5rem; 
  padding-right: .5rem; 
  padding-top: .25rem; 
  padding-bottom: .25rem; 
  
  font-size: .625rem; /* Reduced font size for a smaller view */
  line-height: .875rem; /* Adjusted line height */
  font-weight: 700;
  
  --tw-text-opacity: 1;
  color: #FEFEFE; /* Retained text color */
   /* Retained text color */
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
  --tw-ring-shadow: 0 0 rgba(0,0,0,0);
  --tw-shadow: 0 0 rgba(0,0,0,0);
  --tw-shadow-colored: 0 0 rgba(0,0,0,0);
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
}

*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb; 
}