:root{
  --yellow:#E5B80B;
  --dark:#222;
}
/* Modern buttons - consistent colors, no hover effects */
.btn-dark-yellow{ 
  background: var(--yellow) !important; 
  color:#000 !important; 
  border:none !important;
  border-radius: 8px;
  font-weight: 500;
  transition: none !important;
  box-shadow: none !important;
}
.btn-dark-yellow:hover,
.btn-dark-yellow:active,
.btn-dark-yellow:focus {
  background: var(--yellow) !important;
  color: #000 !important;
  filter: none !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
}

.btn-outline-dark-yellow{ 
  border:1px solid var(--yellow) !important; 
  color:#000 !important;
  background: #fff !important;
  border-radius: 8px;
  font-weight: 500;
  transition: none !important;
}
.btn-outline-dark-yellow:hover,
.btn-outline-dark-yellow:active,
.btn-outline-dark-yellow:focus {
  background: #fff !important;
  color: #000 !important;
  border:1px solid var(--yellow) !important;
  filter: none !important;
  box-shadow: none !important;
}

.btn-outline-secondary,
.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary:focus {
  background: #f8f9fa !important;
  color: #000 !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 8px;
  font-weight: 500;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  transition: none !important;
  transform: none !important;
}
/* Modern store design - no hover effects */
.product-card { 
  position: relative; 
  border:1px solid #e9ecef; 
  border-radius:12px; 
  overflow:hidden; 
  background:#fff; 
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: none !important;
}
.product-card .card-img-top { 
  width:100%; 
  height:auto; 
  aspect-ratio: 1 / 1; 
  object-fit: cover; 
  display:block;
  transition: none !important;
}
.product-card .card-body { text-align:center; padding: 8px 8px 10px; }
.product-card .card-title { font-weight:600; color:#111; margin-bottom:4px; font-size: .95rem; }
.product-card .price { font-weight:700; font-size:.95rem; letter-spacing:.2px; color:#000; }
.product-card::after { 
  content:""; 
  position:absolute; 
  inset:0; 
  background: linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(0,0,0,0.06) 100%); 
  opacity:0; 
  transition: none !important;
  pointer-events:none; 
}
.product-card:hover { 
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transform: none !important;
}
.product-card:hover::after { 
  opacity:0;
}
.product-card:hover .card-img-top { 
  transform: none !important;
  filter: none !important;
}
/* Category icons - modern flat design */
.category-icon{ 
  width:64px; 
  height:64px; 
  object-fit:cover; 
  border:2px solid #eee;
  border-radius: 8px;
  transition: none !important;
}
.category-icon:hover {
  transform: none !important;
  filter: none !important;
}
body{ background:#fafafa; }
main{ margin: 0; padding: 0; }

/* Modern navbar - clean design */
.navbar-glass {
  background: rgba(255, 255, 255, 0.85) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.navbar-glass {
  /* default logo width used to calculate the search icon offset from center */
  --header-logo-width: 48px;
}
.navbar-glass .container { padding-top: 32px; padding-bottom: 32px; position: relative; }
.navbar-glass .row { align-items: center; }
.navbar-glass .navbar-brand { padding-top: 0; padding-bottom: 0; margin: 0; line-height: 1; }
.navbar-glass .navbar-brand img { display:block; }
.navbar-glass .col-4 > a, .navbar-glass .col-4 .input-group { margin-top: 0; margin-bottom: 0; }

/* Force the logo to be horizontally centered within the navbar container
   by absolutely positioning it relative to the .container. This ensures
   the logo sits exactly in the middle of the header width while left/right
   icons remain in their own grid tracks. */
.navbar-glass .header-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2; /* keep above icon elements */
}
/* header-search/header-cart absolute positioning removed here so later
   rules (which pin search to the left and hide the cart) take effect.
   Keeping only the centered logo definition above. */

/* Unified header grid (all sizes): center logo, equal side tracks */
.navbar-glass .header-grid{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  column-gap: var(--header-gap, 16px);
  align-items: center;
}
.navbar-glass .header-grid > [class*="col-"]{ width: auto !important; flex: initial !important; }
.navbar-glass .header-cart, .navbar-glass .header-search{ text-align: initial !important; min-width: 0; }
.navbar-glass .header-cart{ justify-self: end; }
.navbar-glass .header-search{ justify-self: start; }
.navbar-glass .header-logo{ justify-self: center; }

/* Move cart and search icons a bit farther from the centered logo
   Increase inner padding on the side closest to the logo (RTL-aware):
   - header-cart is visually on the right, so padding-left moves it away from center
   - header-search is visually on the left, so padding-right moves it away from center
*/
/* Desktop: moderate spacing so icons are visible but not too far from logo */
.navbar-glass .header-cart { padding-left: 1.5rem; }
.navbar-glass .header-search { padding-right: 1.5rem; }

/* Keep spacing smaller on narrow screens so the header doesn't feel cramped */
@media (max-width: 575.98px) {
  /* Make fixed left/right gutters so logo is perfectly centered */
  .navbar-glass { --header-logo-width: 40px; }
  .navbar-glass .header-grid{ grid-template-columns: 56px 1fr 56px; }
  .navbar-glass .header-cart { padding-left: 0 !important; width: 56px; text-align: center; position: static !important; left: auto !important; top: auto !important; transform: none !important; }
  .navbar-glass .header-search { padding-right: 0 !important; width: 56px; text-align: center; position: static !important; right: auto !important; top: auto !important; transform: none !important; }
  /* Ensure logo stays centered and appropriately sized on small screens */
  .navbar-glass .header-logo { justify-self: center; }
  .navbar-glass .header-logo img { width: 40px; height: 40px; object-fit: contain; }
  /* Make search icon align to the extreme left and cart to extreme right */
  .navbar-glass .header-search{ justify-self: start; }
  .navbar-glass .header-cart{ justify-self: end; }
  /* When search is opened on mobile, show a small inline input to the right of the icon */
  .navbar-glass .header-search .search-wrap{ position: static !important; display: none; }
  .navbar-glass .header-search .search-wrap.open{ display: inline-flex !important; width: 160px !important; margin-inline-start: 0.5rem !important; vertical-align: middle; }
}

/* Precise centering: logo in the exact middle, icons equidistant */
/* Mobile-only precise centering (desktop remains Bootstrap default) */
@media (max-width: 575.98px){
  .navbar-glass .header-grid{
    display: grid !important; /* override Bootstrap flex row on mobile only */
    grid-template-columns: 1fr auto 1fr; /* equal side tracks, auto center for logo */
    column-gap: var(--header-gap, 16px); /* equal distance from logo on both sides */
    align-items: center;
  }
  /* neutralize Bootstrap column fixed widths inside grid on mobile */
  .navbar-glass .header-grid > [class*="col-"]{ width: auto !important; flex: initial !important; }
  .navbar-glass .header-cart, .navbar-glass .header-search{ min-width: 0; }
  /* neutralize Bootstrap text alignment utilities on mobile grid */
  .navbar-glass .header-cart, .navbar-glass .header-search{ text-align: initial !important; }
  /* Align icons toward logo (inner edges) in RTL-aware way */
  .navbar-glass .header-cart{ justify-self: end; }
  .navbar-glass .header-search{ justify-self: start; }
  .navbar-glass .header-logo{ justify-self: center; }
  /* Ensure inline contents don't stretch unexpectedly */
  .navbar-glass .header-cart > *,
  .navbar-glass .header-search > *,
  .navbar-glass .header-logo > *{ display: inline-flex; align-items: center; }
  /* Avoid inner flex pushing icons outward */
  .navbar-glass .header-search .d-inline-flex{ justify-content: flex-start !important; flex-direction: row !important; gap: 0 !important; }
  .navbar-glass .header-cart a, .navbar-glass .header-search a{ margin: 0 !important; }
  /* On small screens, keep search-wrap hidden by default; inline open behavior handled separately */
  .navbar-glass .header-search .search-wrap{ display: none; }
  /* remove extra padding on small screens so icons align symmetrically */
  .navbar-glass .header-cart { padding-left: 0 !important; }
  .navbar-glass .header-search { padding-right: 0 !important; }
}

/* Cart bump animation */
@keyframes bump {
  0% { transform: scale(1); }
  10% { transform: scale(1.2); }
  30% { transform: scale(0.9); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.cart-bump { animation: bump 450ms ease-in-out; }

/* Subtle flash for floating cart */
@keyframes flashPulse {
  0% { box-shadow: 0 0 0 0 rgba(229,184,11,0.85); }
  50% { box-shadow: 0 0 0 16px rgba(229,184,11,0.20); }
  100% { box-shadow: 0 0 0 0 rgba(229,184,11,0); }
}
.flash-pulse { animation: flashPulse 700ms ease-out; }

/* Nudge floating cart badge closer to the button */
.floating-cart .badge {
  /* Place badge inside the button corner (closer) and ignore translate-middle */
  top: 2px !important;
  inset-inline-end: 2px; /* RTL/LTR aware */
  inset-inline-start: auto !important;
  transform: none !important;
}

/* Header search inline toggle */
.search-wrap { display: none; max-width: 460px; }
.search-wrap.open { display: block; }

/* Ensure search input dropdown does not affect header layout
  Default (desktop): open the search box horizontally beside the search icon
  (RTL-aware using logical `inset-inline-end` so it opens toward the center of the header)
*/
.navbar-glass .header-search{ position: relative; }
@media (min-width: 576px) {
  .navbar-glass .header-search .search-wrap{
    position: absolute !important;
    /* vertically center relative to the icon */
    top: 50%;
    transform: translateY(-50%);
    /* place it to the visual left of the icon in RTL by shifting its inline-end
      by the width of the icon minus a tiny overlap so it sits adjacent */
    inset-inline-end: calc(100% - 0.25rem);
    width: min(360px, 90vw) !important;
    z-index: 1049;
  }

  /* Desktop: when the search is opened, show the input inline beside the icon
     (render inline so it sits immediately next to the icon) */
  .navbar-glass .header-search .search-wrap.open{
    position: static !important;
    display: inline-flex !important;
    transform: none !important;
    top: auto !important;
    inset-inline-end: auto !important;
    margin-inline-start: 0.125rem; /* very small gap between icon and input */
    width: auto !important; /* respect inline width or the inline style width */
    vertical-align: middle !important;
  }
}

/* Floating cart button - modern design */
.floating-cart {
  position: fixed !important;
  width: 56px; height: 56px;
  bottom: 16px;
  inset-inline-start: 16px;
  z-index: 1060;
  overflow: visible;
  border-radius: 16px !important;
}

.floating-cart.btn-dark-yellow,
.floating-cart.btn-dark-yellow:hover,
.floating-cart.btn-dark-yellow:active,
.floating-cart.btn-dark-yellow:focus {
  background: var(--yellow) !important;
  color: #000 !important;
  border: none !important;
  filter: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  transform: none !important;
}

.floating-cart:active { 
  animation: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* Quick add button: fixed color on hover, pulse on press */
/* quick-add styles removed (buttons are no longer present) */

/* Extra visible ring effect on flash */
.floating-cart.flash-pulse::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  border: 3px solid rgba(229,184,11,0.85);
  pointer-events: none;
  animation: ringPulse 600ms ease-out forwards;
}

@keyframes ringPulse {
  0% { opacity: 0.9; transform: scale(0.9); }
  60% { opacity: 0.5; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.3); }
}
/* Floating cart badge positioning */
.floating-cart .badge {
  top: 2px !important;
  inset-inline-end: 2px;
  inset-inline-start: auto !important;
  transform: none !important;
}

/* Header search */
.search-wrap { display: none; max-width: 460px; }
.search-wrap.open { display: block; }

.navbar-glass .header-search{ position: relative; }
@media (min-width: 576px) {
  .navbar-glass .header-search .search-wrap{
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-end: calc(100% - 0.25rem);
    width: min(360px, 90vw) !important;
    z-index: 1049;
  }

  .navbar-glass .header-search .search-wrap.open{
    position: static !important;
    display: inline-flex !important;
    transform: none !important;
    top: auto !important;
    inset-inline-end: auto !important;
    margin-inline-start: 0.125rem;
    width: auto !important;
    vertical-align: middle !important;
  }
}

/* أزرار المنتجات الأحدث والأكثر مبيعاً - modern design */
#btn-latest,
#btn-featured {
  transition: none !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
}

#btn-latest.btn-dark-yellow,
#btn-featured.btn-dark-yellow,
#btn-latest.btn-dark-yellow:hover,
#btn-featured.btn-dark-yellow:hover,
#btn-latest.btn-dark-yellow:focus,
#btn-featured.btn-dark-yellow:focus,
#btn-latest.btn-dark-yellow:active,
#btn-featured.btn-dark-yellow:active {
  background: var(--yellow) !important;
  color: #000 !important;
  border: none !important;
  filter: none !important;
  box-shadow: none !important;
  transform: none !important;
}

#btn-latest.btn-outline-secondary,
#btn-featured.btn-outline-secondary,
#btn-latest.btn-outline-secondary:hover,
#btn-featured.btn-outline-secondary:hover,
#btn-latest.btn-outline-secondary:focus,
#btn-featured.btn-outline-secondary:focus,
#btn-latest.btn-outline-secondary:active,
#btn-featured.btn-outline-secondary:active {
  background: #f8f9fa !important;
  color: #000 !important;
  border: 1px solid #dee2e6 !important;
  filter: none !important;
  box-shadow: none !important;
  transform: none !important;
}

#home-container-override #btn-latest.btn-dark-yellow,
#home-container-override #btn-featured.btn-dark-yellow,
#home-container-override #btn-latest.btn-dark-yellow:hover,
#home-container-override #btn-featured.btn-dark-yellow:hover {
  background: var(--yellow) !important;
  color: #000 !important;
}

#home-container-override #btn-latest.btn-outline-secondary,
#home-container-override #btn-featured.btn-outline-secondary,
#home-container-override #btn-latest.btn-outline-secondary:hover,
#home-container-override #btn-featured.btn-outline-secondary:hover {
  background: #f8f9fa !important;
  color: #000 !important;
  border: 1px solid #dee2e6 !important;
}

/* Floating WhatsApp button - modern design */
.floating-whatsapp {
  position: fixed !important;
  width: 56px; height: 56px;
  bottom: 16px;
  inset-inline-end: 16px;
  z-index: 1060;
  overflow: visible;
  background: #25D366 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 16px !important;
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}
.floating-whatsapp:hover,
.floating-whatsapp:active,
.floating-whatsapp:focus {
  background: #25D366 !important;
  color: #fff !important;
  filter: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  transform: none !important;
}

.floating-whatsapp i { color: #fff !important; font-size: 1.1rem; }

/* Mobile bottom navigation bar - glass design matching header */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(255, 255, 255, 0.85) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px 8px 0 0;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  height: calc(60px + env(safe-area-inset-bottom));
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #666 !important;
  text-decoration: none !important;
  transition: none !important;
  min-width: 64px;
  padding: 4px 8px;
  border-radius: 8px;
  position: relative;
}

.mobile-nav-item i {
  font-size: 1.25rem;
  color: #666;
}

.mobile-nav-item span {
  font-size: 0.7rem;
  font-weight: 500;
  color: #666;
}

.mobile-nav-item:hover,
.mobile-nav-item:active,
.mobile-nav-item:focus {
  color: var(--yellow) !important;
  background: rgba(229, 184, 11, 0.08);
  text-decoration: none !important;
}

.mobile-nav-item:hover i,
.mobile-nav-item:active i,
.mobile-nav-item:focus i,
.mobile-nav-item:hover span,
.mobile-nav-item:active span,
.mobile-nav-item:focus span {
  color: var(--yellow);
}

/* Active state for current page */
.mobile-nav-item.active {
  color: var(--yellow) !important;
  background: rgba(229, 184, 11, 0.08);
}

.mobile-nav-item.active i,
.mobile-nav-item.active span {
  color: var(--yellow);
}

/* Mobile nav cart badge positioning */
.mobile-nav-item .badge {
  position: absolute !important;
  top: 6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  background: #dc3545 !important;
  color: #fff !important;
  border-radius: 10px !important;
  z-index: 1;
}

/* Mobile nav cart counter integrated with icon */
.mobile-nav-item .cart-counter {
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  background: #dc3545;
  color: #fff;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  z-index: 1;
  line-height: 1;
}

/* Adjust main content padding to account for bottom nav on mobile */
@media (max-width: 991.98px) {
  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }
}

/* Keep only the logo visible, but re-enable a search icon pinned to the left.
   This rule appears after the hide rules and uses !important so it overrides
   the earlier 'display: none' on .header-search. The search input (search-wrap)
   will open to the right of the icon when `.open` is applied by JS. */
.navbar-glass .header-search {
  display: inline-flex !important;
  position: absolute !important;
  left: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1002 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.navbar-glass .header-search .search-wrap {
  position: absolute !important;
  left: calc(100% + 8px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: min(320px, 88vw) !important;
  display: none !important;
  z-index: 1003 !important;
}
.navbar-glass .header-search .search-wrap.open { display: block !important; }

/* =========================
   Minimal header: show only the logo and center it on any device
   This block intentionally uses high specificity and !important to
   override earlier header rules so the header contains only the logo.
   ========================= */
.navbar-glass .header-grid > *:not(.header-logo):not(.header-search) {
  display: none !important;
}
.navbar-glass .header-cart,
.navbar-glass .header-grid > .col-4:not(.header-logo) {
  display: none !important;
}
/* Ensure the container is the positioning context (should already be set) */
.navbar-glass .container { position: relative !important; }
/* Center the logo absolutely within the header container */
.navbar-glass .header-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  z-index: 999 !important;
}
.navbar-glass .header-logo img { display: block !important; margin: 0 !important; }

/* Header search button - modern design */
.navbar-glass .header-search a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  transition: none !important;
  text-decoration: none !important;
}

.navbar-glass .header-search a:hover {
  background: rgba(0,0,0,0.04);
  transform: none !important;
}

.navbar-glass .header-search a i {
  transition: none !important;
}

/* Header cart button - modern design */
.navbar-glass .header-cart a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  transition: none !important;
  text-decoration: none !important;
}

.navbar-glass .header-cart a:hover {
  background: rgba(0,0,0,0.04);
  transform: none !important;
}

/* ===================================
   Modern Design System
   =================================== */

/* All buttons - modern flat design */
.btn {
  border-radius: 8px !important;
  font-weight: 500 !important;
  transition: none !important;
  box-shadow: none !important;
}

.btn:hover,
.btn:focus,
.btn:active {
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

/* Form controls - modern design */
.form-control,
.form-select {
  border-radius: 8px !important;
  border: 1px solid #dee2e6 !important;
  transition: none !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--yellow) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Cards - modern design */
.card {
  border-radius: 12px !important;
  border: 1px solid #e9ecef !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
  transition: none !important;
}

/* Links - no hover effects */
a {
  transition: none !important;
}

a:hover {
  transform: none !important;
  filter: none !important;
}

/* Modals - modern design */
.modal-content {
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.15) !important;
}

.modal-header,
.modal-footer {
  border-color: #e9ecef !important;
}

/* Badges - modern design */
.badge {
  border-radius: 6px !important;
  font-weight: 500 !important;
}

/* Alerts - modern design */
.alert {
  border-radius: 12px !important;
  border: none !important;
}