:root {
    /* ============================================================================
     * Khattar Store - SEMANTIC UI VARIABLES (Best Practice)
 /*============================================================================ */


body, * {
  font-family: "camelYear", Arial, sans-serif;
  font-weight: bold !important;
}

/*=============================================*/

.s-product-card-content button {
  background-color: var(--success) !important;
  color: var(--general-button-text) !important;
  border: none;
  border-radius: 0.375rem;
  padding: 0.5rem 1.25rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  position: relative; /* مهم عشان ::after يتمركز */
  overflow: visible;  /* يسمح للـ pulse يطلع خارج الزر */
}


/* طبقة الـ pulse */
.s-product-card-content button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--success);
  opacity: 0; /* مخفي افتراضياً */
  z-index: -1; /* خلف الزر */
  transition: opacity 0.3s;
}

/* عند hover يبدأ الـ pulse */
.s-product-card-content button:hover::after {
  animation: pulseGlow 1.5s ease-out infinite;
}

@keyframes pulseGlow {
  0% {
    transform: scale(1);
    opacity: 0.4; /* أوضح */
  }
  70% {
    transform: scale(1.6); /* يخرج برة حدود الزر */
    opacity: 0; /* يتلاشى */
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}



/*=============================================*/

/* Colors */ 
    --main-label: #1f2e1eff;           /* Main label color (Dark Green) */
    --secondary-label: #c27100ff;      /* Secondary label color (Ochre) */
    --main-background: #f0efef;        /* Main background (Linen) */
    --header-background: #A4A59A;    /* Header background (Battleship Gray) */
    --footer-background: #A4A59A;    /* Footer background (Battleship Gray) */
    --general-button-bg: #939081ff;    /* General button background (Battleship Gray) */
    --general-button-text: #ffffff;    /* General button text (White) */
    --surface: #ffffff;                /* Card/Surface background (White) */
    --muted: #a4a59aff;                /* Muted/Disabled text (Ash Gray) */
    --neutral: #939081ff;              /* Neutral/Secondary text (Battleship Gray) */
    --categories-bg: #dfdede;              /* Neutral/Secondary text (Battleship Gray) */
    --success: #1f2e1eff;              /* Success/Action (Dark Green) */
    --danger: #760000;                 /* Danger/Error (Red, only for errors) */
    --white: #ffffff;
    --black: #000000;
  
    /* Border Colors */
    --main-border: #1f2e1eff;         /* Main border color (Dark Green) */
    --secondary-border: #c27100ff;    /* Secondary border color (Ochre) */
    --muted-border: #a4a59aff;        /* Muted border color (Ash Gray) */
    --neutral-border: #939081ff;      /* Neutral border color (Battleship Gray) */
  
    /* Alpha Variants */
    --main-label-alpha-10: rgba(147, 144, 129, 0.10);
    --main-label-alpha-25: rgba(147, 144, 129, 0.25);
    --main-label-alpha-50: rgba(147, 144, 129, 0.50);
    --neutral-alpha-44: rgba(147, 144, 129, 0.44);
  }
  
  
  /* ============================================================================
   * GLOBAL & LAYOUT
   * ============================================================================ */
  body {
    background-color: var(--main-background) !important;
    color: var(--main-label) !important;
  }
  
  .app-inner {
    background-color: var(--main-background) !important;
  }
  
  /* ============================================================================
   * HEADER & NAVIGATION
   * ============================================================================ */
  
   #app > div.app-inner.flex.flex-col.min-h-full > footer > div.store-footer__inner > div > div.lg\:col-span-2.rtl\:lg\:pl-20.ltr\:lg\:pr-20 > p.ql-direction-rtl.ql-align-right > strong {
  margin-bottom: 10px!important;
   
   }
  .header-background,
  .main-nav-container {
    background-color: var(--header-background) !important;
    color: var(--general-button-text) !important;
    width: 100%!important;
  }
  
  /* Menu Specifics from old css.css, adapted to new palette */
  /* Menu Items with Children Indicator */
  li.has-children > a::after {
    content: "▶";
    color: var(--general-button-text); /* Was --primary-purple, now matches nav text */
    margin-right: 6px; /* Adjust as needed */
    font-size: 14px;
    float: left; /* Adjust float based on RTL/LTR if necessary */
  }
  
  /* Specific Menu Item Text Colors (IDs from old CSS) */
  /* Consider using classes for these if HTML structure allows for better maintainability */
  #\31 390953573 > ul > li > a,
  #\31 57583983 > span,
  #\35 82817140 > span,
  #\32 110510543 > span {
    color: var(--general-button-text) !important; /* Was --very-light-purple, now matches nav text */
  }
  
  /* Specific text color for #1390953573 > a > span within .mobile-menu */
  .mobile-menu span {
    color: var(--main-label) !important;
  }
  
  /* Submenu Styling */
  .sub-menu {
    color: var(--general-button-text) !important; /* Text color, was --very-light-purple */
    border: 1px solid var(--muted-border) !important; /* Border, was --primary-purple, now uses muted for subtle distinction */
    background: var(--header-background) !important; /* Background, was --primary-purple, now matches main nav */
  }
  
  .general-button {
    background-color: var(--success) !important;
    color: var(--general-button-text) !important;
    border: none;
    border-radius: 0.375rem;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
  }
  .general-button:hover,
  .general-button:focus,
  .s-product-card-content button:hover,
  .s-product-card-content button:focus {
    background-color: var(--main-label) !important;
    color: var(--main-background) !important;
  }
  
  #app > div.app-inner.flex.flex-col.min-h-full > footer > div.store-footer__inner > div > div.lg\:col-span-2.rtl\:lg\:pl-20.ltr\:lg\:pr-20 > p.max-w-sm.leading-6.mb-6 {
      display: none !important;
  }
  
  #app > div.app-inner.flex.flex-col.min-h-full > footer > div.store-footer__inner > div > div.lg\:col-span-2.rtl\:lg\:pl-20.ltr\:lg\:pr-20 > p.max-w-sm.leading-6.mb-6 {
      display: none!important;
  }
  /* ============================================================================
   * MAIN CONTENT & CARDS
   * ============================================================================ */
  .main-background {
    background-color: var(--main-background) !important;
  }
  
  .surface {
    background-color: var(--surface) !important;
  }
  
  .product-entry,
  .cart-item {
    background-color: var(--main-label-alpha-10) !important;
    padding: 1rem;
    border-radius: 0.5rem;
    color: var(--main-label) !important;
  }
  
  .product-entry * {
    color: var(--main-label) !important;
    fill: var(--main-label) !important;
  }
  
  .s-product-card-content-title a,
  #page-main-title > span,
  .main-content h1,
  .product-entry h1,
  .product-entry h2,
  .product-entry h3,
  .product-entry__sub-title {
    color: var(--main-label) !important;
  }
  
  .s-product-card-price,
  .item-price {
    color: var(--danger) !important;
  }
  .s-product-card-promotion-title,
  .promotion-title {
    background-color: var(--secondary-label) !important;
    color: var(--main-background) !important;
    opacity: 0.7 !important;
  
  }
  
  .slide--cat-entry {
    position: relative;
    background-color: var(--categories-bg) !important;
    border: 1px dotted var(--main-label) !important;
    overflow: hidden;
  }
  
  .s-product-card-content button {
    position: relative; /* Ensure the button is positioned for the pseudo-element */
    overflow: hidden;   /* Clip the pattern to the button */
    z-index: 1;         /* Ensure stacking context */
  }
  
  /* Lighter pattern overlay for dark button */
  .s-product-card-content button::before, quick-buy {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("https://i.ibb.co/SwkR4cv4/categories-pattern.png");
    background-repeat: repeat;
    background-size: 120px; /* Increased for a more zoomed-in effect */
    opacity: 0.10;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: lighten;
    border-radius: inherit;
  }
  .slide--cat-entry::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("https://i.ibb.co/SwkR4cv4/categories-pattern.png");
    background-repeat: repeat;
    background-size: 100px; /* More refined — smaller, tighter pattern */
    opacity: 0.10; /* Less contrast to avoid noise */
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: multiply; /* Optional: better blending with base bg */
  }
  
  .slide--cat-entry > * {
    position: relative;
    z-index: 1;
  }
  .slide--cat-entry img {
    margin-bottom: 0 !important;
  }
  
  .product-entry__sub-title {
  color : var(--secondary-label)!important;
  }
  
#offers > a > span {
  color: #760000 !important;
  animation: attention-bounce 2s ease-in-out infinite;
  display: inline-block;
  transform-origin: center;
  text-shadow: 0 0 8px rgba(118, 0, 0, 0.3);
  position: relative;
}

@keyframes attention-bounce {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  75% {
    transform: scale(0.95);
    opacity: 0.9;
  }
}

#offers > a > span::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #760000;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

#offers > a > span:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
  /* ============================================================================
   * FORMS & INPUTS
   * ============================================================================ */
  .form-input,
  .s-datetime-picker-input,
  .s-tel-input-control,
  select.form-input {
    background-color: var(--main-label-alpha-10) !important;
    color: var(--main-label) !important;
    border: 1px solid var(--main-label-alpha-25) !important;
  }
  
  .form-input::placeholder,
  .s-datetime-picker-input::placeholder,
  .s-tel-input-control::placeholder,
  select.form-input::placeholder {
    color: var(--main-label) !important;
    opacity: 0.7;
  }
  
  .s-user-profile-field-label {
    color: var(--main-label) !important;
  }
  

  /* ============================================================================
   * UTILITY CLASSES
   * ============================================================================ */
  .text-main { color: var(--main-label) !important; }
  .text-secondary { color: var(--secondary-label) !important; }
  .bg-main { background-color: var(--main-background) !important; }
  .bg-header { background-color: var(--header-background) !important; }
  .store-footer__inner { background-color: var(--footer-background) !important; }
  .border-main { border-color: var(--main-label) !important; }
  .success-label { color: var(--success) !important; }
  .danger-label { color: var(--danger) !important; }
  .neutral-label { color: var(--neutral) !important; }
  
  /* Social Media Link Styling */
  .s-social-link,
  .s-social-link i,
  .s-social-link svg,
  .s-social-link *,
  .s-social-link ::before,
  .s-social-link ::after,
  .s-contacts-icon,
  .s-contacts-icon i,
  .s-contacts-icon svg,
  .s-contacts-icon *,
  .s-contacts-icon ::before,
  .s-contacts-icon ::after {
    border-color: var(--danger) !important;
    fill: var(--danger) !important;
    background-color: transparent !important;
    /* border: none !important; */
  }
  
  .s-social-link:hover,
  .s-social-link:hover i,
  .s-social-link:hover svg,
  .s-social-link:hover *,
  .s-social-link:hover ::before,
  .s-social-link:hover ::after,
  .s-contacts-icon:hover,
  .s-contacts-icon:hover i,
  .s-contacts-icon:hover svg,
  .s-contacts-icon:hover *,
  .s-contacts-icon:hover ::before,
  .s-contacts-icon:hover ::after {
    color: var(--danger) !important; /* Use secondary color on hover for accent */
    fill: var(--danger) !important;
  }
  
  #app > div.app-inner.flex.flex-col.min-h-full > footer > div.store-footer__inner > div > div.lg\:col-span-2.rtl\:lg\:pl-20.ltr\:lg\:pr-20 > a > h3,
  #app > div.app-inner.flex.flex-col.min-h-full > footer > div.store-footer__inner > div > div:nth-child(2) > h3,
  .s-contacts-title,
  .mobile-menu > span {
    color: var(--main-label)!important;
  }
  
  /* Target navbar brand image and center it in container */
  .navbar-brand img,
  .navbar-brand > img {
    max-width: 40% !important;
    max-height: 40% !important;
    width: 40% !important; 
    height: 40% !important;
    object-fit: contain !important;
    margin-top : 10px !important;
    margin-bottom : 10px !important;
  
  }
  
  .s-user-menu-trigger { 
  background: transparent !important;
  }
  
  /* ===============LOADERS=============== */
  /* 1) Hide SVG and internal content */
  /* .loader-init > * {
    display: none !important;
  } */
  
  /* 2) Display GIF as background */
  .loader-init {
    background: url('https://i.ibb.co/vp6DT6v/Animation-1747484688321.gif') no-repeat center center !important;
    background-size: contain !important;
    width: 48px !important;
    height: 48px !important;
    display: block !important; /* Ensure loader is visible */
    opacity: 1 !important; /* Ensure full visibility */
    position: fixed !important; /* Fixed positioning for overlay effect */
    top: 50% !important; /* Center vertically */
    left: 50% !important; /* Center horizontally */
    transform: translate(-50%, -50%) !important; /* Perfect centering */
    z-index: 9999 !important; /* Ensure loader appears above other elements */
    background-color: var(--white) !important;
    border-radius: 8px !important; /* Added rounded corners */
    border: 1px dotted var(--black) !important; /* Added black dotted border */
  }
  
  .s-advertisement-content {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.s-advertisement-content h2 {
  position: absolute;
  display: inline-block;
  white-space: nowrap;
  animation: khttar-marquee 25s linear infinite;
}

@keyframes khttar-marquee {
  0% {
    right: 100%;
  }
  100% {
    right: -100%;
  }
}

.s-advertisement-content:hover h2 {
  animation-play-state: paused;
}