/* header.css */

.site-header {
  background-color: #ffffff;
  direction: rtl;
}

/* Accessibility helper */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.header-top-border {
  height: 3px;
  background-color: var(--primary);
}

.header-container-top {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 24px;
}

.header-container-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6px 24px;
  position: relative;
}

.header-bottom,
.header-nav,
.category-menu-wrapper {
  position: static !important;
}

/* Icons */
/* Material Icons */
.icon {
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}


/* Top header row */
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 14px;
  padding: 10px 18px;
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary {
  background-color: var(--primary);
  color: #ffffff;
  box-shadow: -8px 0 20px rgba(230, 0, 18, 0.3);
}

.btn-primary:hover {
  box-shadow: 0 8px 20px rgba(230, 0, 18, 0.3);
}

.btn-ghost {
  background-color: var(--muted-bg);
  color: var(--text-color);
  border: 1px solid #e3e3e3;
}

.btn-ghost:hover {
  background-color: #ececf0;
}

.header-search-logo {
  display: flex;
  flex-direction: row;
  gap: 16px
}

/* Search */
.header-search {
  flex: 1;
  min-width: 240px;
  max-width: 440px;
  background-color: var(--border-color);
  border-radius: 12px;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--muted-bg);
  border-radius: 14px;
  padding: 8px 16px;
  border: 1px solid transparent;
}

.search-field .icon {
  font-size: 20px;
  color: var(--muted-text);
}

.search-field:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px rgba(230, 0, 18, 0.15);
}

.search-field input[type="search"] {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.9rem;
  outline: none;
  color: var(--text-color);
}

.search-field input::placeholder {
  color: var(--muted-text);
}

.search-logo-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

/* Logo */
.header-logo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.logo-img {
  height: 20px;
  width: auto;
}

.header-login-btn {
  padding: 6px;
}

/* Divider between rows */
.header-divider {
  border-top: 1px solid var(--border-color);
}



/* Bottom header row */
.header-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  justify-content: space-between;
  flex-direction: row;
}

.header-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* Category toggle */
.category-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  font-size: 0.8rem;
  color: var(--primary);
  cursor: pointer;
  padding: 6px 8px;
  margin-left: 6px;
  position: relative;
}

.category-btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: var(--border-color);
}

.category-btn .icon {
  width: 18px;
  height: 18px;
}

/* Main nav */
.main-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.nav-list {
  list-style: none;
  display: flex;
  gap: 24px;
  padding: 0;
  margin: 0;
}

.nav-list a {
  text-decoration: none;
  color: #555555;
  font-size: 0.8rem;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}

.nav-list a:hover {
  color: var(--primary);
  border-bottom-color: rgba(230, 0, 18, 0.3);
}

.nav-left {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.nav-left-item {
  display: flex;
  flex-direction: row;
  align-items: center;

  span {
    font-size: 1rem;
    color: #fff;
    background-color: var(--primary);
    border-radius: 60px;
    padding: 4px;
    margin-left: 4px;
  }
}

.nav-left-item a {
  font-size: 0.8rem;
  text-decoration: none;
  color: #000;
  transition: color 0.2s ease-in-out;
}

.nav-left-item a:hover {
  color: var(--primary);
}

.nav-left-item-border {
  position: relative;
}

.nav-left-item-border::before {
  content: '';
  position: absolute;
  right: -10px;
  top: 15%;
  height: 70%;
  width: 1px;
  background: var(--border-color);
}

/* Special links (left side) */
.header-special-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.special-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #555555;
  font-size: 0.85rem;
}

.special-link:hover {
  color: var(--primary);
}

.special-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.badge-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background-color: #ffe5e8;
}

.badge-icon .icon {
  width: 14px;
  height: 14px;
}

.divider-vertical {
  width: 1px;
  height: 20px;
}

.header-actions {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

.header-upper-sticky {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #fff;
  width: 100%;
}

.header-lower-nav {
  position: relative;
  z-index: 999;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

main {
  position: relative;
  z-index: 1;
}

/* ----------------------------------------------------- */
/* NEW MOBILE STYLES (Added for Responsive Redesign)   */
/* ----------------------------------------------------- */

/* --- Mobile Mega Menu Specific Styles --- */

/* 1. Container & Layout */
.mobile-mega-menu-drawer {
  position: fixed;
  top: 105px; /* Adjust based on your header height */
  right: -100%; /* Hidden by default */
  width: 100%;
  height: calc(100vh - 105px); /* Full height minus header */
  background-color: #fff;
  z-index: 1050;
  display: flex; /* Creates the Side-by-Side layout */
  flex-direction: row; /* RTL handles the order */
  transition: right 0.3s ease-in-out;
  overflow: hidden;
  border-top: 1px solid #eee;
}

.mobile-mega-menu-drawer.active {
  right: 0; /* Slide in */
}

/* 2. Right Sidebar (Categories) */
.mobile-menu-sidebar {
  width: 90px; /* Fixed width sidebar */
  background-color: #F7F8FA; /* Light gray bg from design */
  overflow-y: auto;
  flex-shrink: 0;
  border-left: 1px solid #eee;
}

.mobile-side-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-item {
  cursor: pointer;
  padding: 15px 5px;
  text-align: center;
  border-bottom: 1px solid #eee;
  transition: all 0.2s;
  color: #555;
}

.side-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.side-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  /* Optional: Drop shadow for floating effect in design */
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.1));
}

.side-item span {
  font-size: 0.75rem;
  line-height: 1.2;
}

/* Active Sidebar State */
.side-item.active {
  background-color: #fff;
  color: #cf0000; /* Red active color */
  font-weight: bold;
  position: relative;
}

/* 3. Left Content Area */
.mobile-menu-content {
  flex-grow: 1;
  background-color: #fff;
  overflow-y: auto;
  padding: 0 0 40px 0;
}

.mobile-tab-pane {
  display: none;
  animation: fadeIn 0.3s;
}

.mobile-tab-pane.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* "View All" Header */
.mobile-cat-header {
  padding: 30px 15px 0 15px;
  text-align: right; /* Align left as per design usually */
}

.view-all-link {
  color: #cf0000;
  font-size: 0.85rem;
  font-weight: bold;
  text-decoration: none;
}

/* 4. Accordions */
.mobile-accordion {
  border-bottom: 1px solid #f0f0f0;
}

.accordion-header {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 0.9rem;
  color: #333;
  cursor: pointer;
}

.accordion-header .arrow {
  font-size: 20px;
  color: #999;
  transition: transform 0.3s;
}

.mobile-accordion.open .accordion-header .arrow {
  transform: rotate(180deg);
}

.accordion-body {
  display: none;
  padding: 0 10px 15px 10px;
}

.mobile-accordion.open .accordion-body {
  display: block;
}

/* 5. Grid Layout (3 Columns) */
.mobile-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px 10px;
  text-align: center;
}

.grid-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  gap: 8px;
}

.grid-card img {
  width: 100%;
  border-radius: 8px;
  aspect-ratio: 1; /* Makes images square */
  object-fit: contain;
}

.grid-card span {
  font-size: 0.7rem;
  color: #555;
  line-height: 1.3;
}

.grid-card .more-icon-box .material-icons-round {
  font-size: 1.7rem;
}

.more-icon-box {
  width: 100%;
  aspect-ratio: 1;
  background: #f5f5f5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Desktop Hide */
@media (min-width: 993px) {
  .mobile-mega-menu-drawer {
    display: none !important;
  }
}

/* Default / Desktop Styles for new elements */
.mobile-menu-trigger,
.mobile-call-btn {
  display: none;
  /* Hidden on desktop */
}

/* Helper class to hide desktop elements */
.desktop-only {
  display: flex;
}

/* --- Mobile Responsive Styles --- */
@media (max-width: 992px) {
  .desktop-only {
    display: none !important;
  }

  .search-logo-wrapper {
    display: contents;
    /* This makes the wrapper invisible to the layout */
  }

  .mega-menu {
    position: fixed;
    top: 0;
    right: -100%;
    /* Hide off-screen to the right initially */
    width: 85%;
    /* Width of the mobile drawer */
    max-width: 400px;
    height: 100vh;
    background-color: #ffffff;
    z-index: 1200;
    /* Ensure it's above the header (z-index 1000) */
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    /* Allow scrolling inside the menu */
    padding-bottom: 40px;
  }

  .mega-menu.menu-open {
    right: 0;
    /* Slide into view */
  }

  .mega-menu::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
  }

  .mega-menu.menu-open::before {
    opacity: 1;
    visibility: visible;
    left: -100vw;
    /* Push backdrop to cover the rest of the screen */
  }

  .header-lower-nav {
    display: block;
    /* Must be block to render children */
    height: 0;
    /* Take up no vertical space in the layout */
    padding: 0;
    /* Remove padding */
    visibility: visible;
    /* Make visible */
    overflow: visible;
    /* Allow the menu to spill out of this container */
  }

  .header-container-bottom {
    padding: 0;
    /* Remove inner padding */
    height: 0;
  }

  /* 1. Header Grid Layout */
  .header-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  /* 2. Menu Button (Right) */
  .mobile-menu-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    order: 1;
    /* First item in RTL */
    cursor: pointer;
    padding: 0;
  }

  .mobile-menu-trigger span {
    font-size: 0.8rem;
    color: #333;
    /* Text color */
  }



  .mobile-menu-trigger .icon {
    font-size: 28px;
    color: var(--primary);
    /* Red Hamburger Icon */
  }

  .menu-state-open, .menu-state-close  {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 58px;
  }

  /* 3. Logo (Center) */
  .header-logo {
    order: 2;
    flex-grow: 1;
    display: flex;
    justify-content: center;
  }

  .logo-img {
    height: 28px;
    /* Slightly larger on mobile */
  }

  /* 4. Actions (Left) */
  .header-actions {
    order: 3;
    gap: 12px;
    align-items: center;
  }

  /* Phone Icon */
  .mobile-call-btn {
    display: flex;
    color: var(--primary);
    /* Red phone icon */
    text-decoration: none;
  }

  .mobile-call-btn .icon {
    font-size: 26px;
  }

  /* Login/Profile Button (Icon Only) */
  .header-login-btn {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: #333 !important;
    /* Black user icon */
    width: auto;
    height: auto;
  }

  .header-login-btn .btn-text {
    display: none;
    /* Hide text "Login/Register" */
  }

  .header-login-btn .icon {
    font-size: 28px;
    margin: 0;
  }

  /* 5. Search Bar (Bottom Row) */
  .header-search {
    order: 4;
    width: 100%;
    margin-top: 8px;
    min-width: unset;
    /* Remove desktop min-width */
    max-width: unset;
  }

  .search-field {
    background-color: #F5F6F8;
    /* Light gray background */
    border-radius: 12px;
    height: 48px;
  }

  .search-field input::placeholder {
    font-size: 0.85rem;
    color: #999;
  }

  /* Fix container padding */
  .header-container-top {
    padding: 16px 12px 0 12px;
  }
}

/* story slider */

/* Container */
.story-slider {
  width: 100%;
  margin-top: 10px;
}

.story-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Scrollable row */
.story-list {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.story-list::-webkit-scrollbar {
  display: none;
}

/* Item */
.story-item {
  text-align: center;
  width: 70px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.story-title {
  margin-top: 8px;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Thumbnail design */
.story-thumb {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  padding: 4px;
  background-color: #fff;
  border: 3px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.story-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Buttons */
.slider-btn {
  background: #fff;
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s;
}

.slider-btn:hover {
  background: #f5f5f5;
}

.slider-btn .material-icons-outlined {
  font-size: 24px;
}

/* Position buttons */
.prev-btn {
  margin-right: 4px;
}

.next-btn {
  margin-left: 4px;
}

/* Responsive */
@media (max-width: 600px) {
  .story-item {
    width: 70px;
  }

  .story-thumb {
    width: 50px;
    height: 50px;
    padding: 2px;
    border-width: 2px;
  }

  .story-list {
    gap: 10px;
  }

  .story-title {
    font-size: 0.70rem;
  }
}

/* hero carousel */

.hero-carousel {
  direction: rtl;
  padding-top: 12px;
  padding-bottom: 24px;
}

.hero-carousel-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

/* Slides wrapper */
.hero-slides {
  display: grid;
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  /* Ensure the container has height based on content */
  grid-template-areas: "stack";
}

/* Each slide */
.hero-slide {
  grid-area: stack;
  /* Stacks them on top of each other */
  background: linear-gradient(45deg, var(--primary) 0%, var(--bg-offer) 75%);
  color: #fff;

  /* Layout inside the slide */
  display: flex;
  /* Always display flex, we control visibility via opacity */
  align-items: center;
  justify-content: space-between;
  padding: 40px 72px;
  min-height: 380px;

  /* Animation properties */
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.hero-slide .hero-slide-content,
.hero-slide .hero-slide-media {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out 0.2s;
  /* 0.2s delay */
}

.hero-slide.active .hero-slide-content,
.hero-slide.active .hero-slide-media {
  opacity: 1;
  transform: translateY(0);
}

/* Image */
.hero-slide-media {
  flex: 0 0 35%;
}

.hero-slide-media img {
  max-height: 280px;
  width: auto;
  display: block;
  border-radius: 24px;
}

/* Content */
.hero-slide-content {
  flex: 1;
  text-align: right;
  margin-right: 40px;
}

.hero-title {
  font-size: 2.2rem;
  margin: 0 0 12px;
  color: #fff;
}

.hero-subtitle {
  font-size: 1rem;
  margin: 0 0 24px;
  color: #f0f0f0;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 999px;
  background-color: #ffffff;
  color: var(--primary);
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  z-index: 3;
}

.hero-cta:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Nav arrows (custom SVG capsule) */
.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 3;

  span {
    font-weight: 800 !important;
  }
}

.hero-nav-prev {
  right: calc(50% + 600px/2 - 54px);
  /* تقریبی، برای چسبیدن به لبه کارت */
}

.hero-nav-next {
  left: calc(50% + 600px/2 - 54px);
}

/* اگر مقدار بالا بهم خورد، ساده‌تر: */
@media (max-width: 1400px) {
  .hero-nav-prev {
    right: 22px;
  }

  .hero-nav-next {
    left: 22px;
  }
}

.hero-nav-shape {
  height: 220px;
  width: auto;
}

.hero-nav-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: var(--primary);
}

.hero-nav-prev .hero-nav-icon {
  right: 16px;
}

.hero-nav-next .hero-nav-icon {
  left: 16px;
}

/* Dots */
.hero-dots {
  position: absolute;
  bottom: 18px;
  right: 56px;
  display: flex;
  gap: 8px;
}

.hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: none;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.hero-dot.active {
  width: 28px;
  background-color: #ffffff;
}

/* Responsive */
@media (max-width: 992px) {
  .hero-slide {
    padding: 32px 24px;
    flex-direction: column-reverse;
    text-align: center;
  }

  .hero-slide-content {
    text-align: center;
    margin-right: 0;
  }

  .hero-title {
    font-size: 1.8rem;
  }

  .hero-subtitle {
    margin-bottom: 8px;
  }

  .hero-dots {
    right: 20%;
    transform: translateX(50%);
  }

  .hero-nav-shape {
    height: 180px;
  }
}

@media (max-width: 600px) {
  .hero-slide {
    padding: 24px 18px;
  }

  .hero-title {
    font-size: 1.4rem;
  }

  .hero-subtitle {
    font-size: 0.9rem;
  }

  .hero-nav {
    display: none;
  }

  .slider-btn {
    display: none;
  }

  .hero-slide-media img {
    width: 250px;
  }
}


/* offers-slider.css */

.offers-section {
  padding: 40px 0;
  direction: rtl;
}

.offers-container {
  max-width: 1200px;
  margin: 0 auto;
  /* Red Background Styling */
  background-color: var(--primary);
  background: linear-gradient(135deg, var(--primary) 0%, var(--bg-offer) 100%);
  border-radius: 32px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: visible;
  /* Allows image to pop out if needed */
  height: 380px;
  /* Fixed height for consistency */
}

/* --- Right Side: Banner --- */
.offers-banner {
  flex: 0 0 200px;
  /* Fixed width for banner */
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 20px;
  color: #ffffff;
  z-index: 2;
}

.offers-title {
  font-size: 2.2rem;
  line-height: 1.3;
  margin: 0 30px 10px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.offers-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.95rem;
  transition: opacity 0.2s;
  margin-right: 30px;
  margin-bottom: 20px;
}

.offers-view-all:hover {
  opacity: 0.8;
}

.offers-view-all .arrow-icon {
  font-size: 16px;
}

.offers-decor-img {
  bottom: -24px;
  /* Slight overlap at bottom */
  right: -20px;
  width: 240px;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  /* Let clicks pass through */
  z-index: 1;
}

/* --- Middle: Nav Button --- */
.offer-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
  z-index: 5;
  flex-shrink: 0;
}

.offer-nav-btn:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* --- Left Side: Scrollable List --- */
.offers-scroll-area {
  flex: 1;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  /* Smooth scrolling for JS */
  padding: 10px 0;
  /* Space for shadows */
  height: 100%;

  /* Hide Scrollbar (Firefox) */
  scrollbar-width: none;
  width: 100%;
  /* Force it to fill the parent, not the content */
  min-width: 0;
  /* The "Magic" fix: Allows flex item to shrink smaller than content */
  white-space: nowrap;
}

/* Hide Scrollbar (Chrome/Safari/Edge) */
.offers-scroll-area::-webkit-scrollbar {
  display: none;
}

.offers-scroll-area.active {
  cursor: grabbing;
  /* نشانگر دست مشت شده موقع کشیدن */
  user-select: none;
  /* جلوگیری از انتخاب شدن متن‌ها موقع کشیدن */
}

/* --- Product Card --- */
.offer-card {
  flex: 0 0 240px;
  /* Fixed width per card */
  background: #ffffff;
  border-radius: 20px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s;
  height: 100%;
  flex-shrink: 0;
  width: 240px;
}

.offer-card:hover {
  transform: translateY(-5px);
}

.offer-img-box {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.offer-img-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.offer-card-title {
  font-size: 0.95rem;
  margin: 0 0 12px;
  color: #333;
  line-height: 1.5;
  /* Limit lines to 2 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.offer-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

/* Actions (Cart/Fav) */
.offer-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.action-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s;
}

.btn-add-cart {
  background-color: var(--primary);
  color: #fff;
  box-shadow: 0 4px 10px rgba(230, 0, 18, 0.3);
}

.btn-add-cart:hover {
  background-color: #c4000f;
}

.btn-fav {
  background-color: transparent;
  color: #aaa;
}

.btn-fav:hover {
  color: var(--primary);
}

/* Prices */
.offer-prices {
  text-align: left;
  /* Prices align left in design */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.old-price {
  color: #bbb;
  font-size: 0.85rem;
  text-decoration: line-through;
}

.new-price {
  color: #333;
  font-size: 1.1rem;
  margin-top: 4px;
}

.currency {
  font-size: 0.7rem;
  font-weight: 400;
}

.offers-banner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Responsive --- */
@media (max-width: 768px) {

  .offers-section {
    padding: 10px 0;
  }

  /* --- 1. Container Styling (Red Background) --- */
  .offers-container {
    /* تغییر گرادینت به رنگ قرمز خالص یا پترن */
    background: #ef394e;
    /* رنگ قرمز دیجی‌کالایی */

    /* اگر فایل پترن (اون طرح‌های چرخشی) رو داری، این خط رو آنکامنت کن */
    /* background-image: url('/assets/images/red-pattern.png'); */

    border-radius: 0;
    /* در موبایل معمولا گوشه‌ها تیز یا با ردایوس کم هستن */
    padding: 20px 0;
    margin: 0 10px;
    border-radius: 16px;
    flex-direction: column;
    height: auto;
    overflow: hidden;
    position: relative;
  }

  /* --- 2. Header (Title & Link) --- */
  .offers-banner {
    width: 100%;
    flex: unset;
    height: auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px 15px 20px;
    margin: 0;
  }

  .offers-banner-content {
    width: 100%;
    flex-direction: row;
    /* چیدمان افقی */
    justify-content: space-between;
    align-items: center;
  }

  /* حذف عکس تزیینی فرش در هدر برای شلوغ نشدن */
  .offers-decor-img {
    display: none;
  }

  /* استایل تیتر "شگفت انگیزان" */
  .offers-title {
    font-size: 1rem;
    color: #fff;
    margin: 0;
    text-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
  }

  .offers-title br {
    display: none;
  }

  /* اضافه کردن آیکون درصد فرضی با CSS (اختیاری) */

  /* لینک "مشاهده همه" */
  .offers-view-all {
    margin: 0;
    font-size: 0.85rem;
    color: #fff;
    opacity: 0.9;
  }

  /* حذف دکمه اسکرول وسط */
  .offer-nav-btn {
    display: none;
  }

  /* --- 3. Scroll Area & Cards --- */
  .offers-scroll-area {
    padding: 0 20px;
    /* پدینگ کناری */
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    cursor: grab;
    /* نشانگر دست باز */
    width: 100%;
    /* Force it to fill the parent, not the content */
    min-width: 0;
    /* The "Magic" fix: Allows flex item to shrink smaller than content */
    white-space: nowrap;
  }

  .offers-scroll-area.active {
    cursor: grabbing;
    /* نشانگر دست مشت شده موقع کشیدن */
    user-select: none;
    /* جلوگیری از انتخاب شدن متن‌ها موقع کشیدن */
  }

  .offer-card {
    /* عرض کارت رو طوری تنظیم میکنیم که گوشه کارت بعدی معلوم باشه */
    flex: 0 0 190px;
    width: 190px;
    max-width: 190px;
    padding: 12px;
    border-radius: 16px;
    position: relative;
    /* برای پوزیشن ابسولوت دکمه قلب */
    overflow: visible;
    /* برای اینکه سایه‌ها بریده نشن */

  }

  /* --- 4. Image Section & Heart Icon --- */
  .offer-img-box {
    background-color: #f1f2f4;
    /* رنگ طوسی روشن پشت فرش */
    border-radius: 12px;
    height: 150px;
    margin-bottom: 10px;
    position: relative;
    /* اگر بخوایم قلب رو نسبت به باکس عکس تنظیم کنیم */
  }

  .offer-img-box img {
    width: 80%;
    height: 80%;
    /* اگر بخوایم قلب رو نسبت به باکس عکس تنظیم کنیم */
  }

  /* تغییر مهم: دکمه قلب میره بالا سمت چپ */
  .btn-fav {
    position: absolute;
    top: 15px;
    /* تنظیم فاصله از بالا */
    right: 15px;
    /* تنظیم فاصله از چپ */
    width: 28px;
    height: 28px;
    color: #9e9e9e;
    /* رنگ طوسی آیکون */
    background: transparent;
    z-index: 10;
  }

  .btn-fav .material-icons-outlined {
    font-size: 24px;
  }

  /* --- 5. Footer Layout (Price & Cart Button) --- */
  .offer-card-footer {
    flex-direction: row-reverse;
    /* برعکس کردن جهت تا دکمه بیاد چپ، قیمت راست */
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
    /* چسباندن به پایین کارت */
  }

  /* دکمه سبد خرید (قرمز بزرگ) */
  .offer-actions {
    margin: 0;
    gap: 0;
  }

  /* ما دکمه قلب رو بردیم بالا، پس اینجا مخفیش میکنیم که دو تا نشه (تکنیک CSS) 
     اما چون پوزیشن ابسولوت دادیم خودش از جریان خارج شده، فقط باید مطمئن شیم روی دکمه خرید اثر نمیذاره */

  .btn-add-cart {
    width: 42px;
    height: 42px;
    background-color: #ef394e;
    border-radius: 12px;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn-add-cart .material-icons-outlined {
    font-size: 24px;
  }

  /* --- 6. Typography (Prices & Title) --- */
  .offer-card-title {
    font-size: 0.85rem;
    font-weight: bold;
    color: #424750;
    margin-bottom: 15px;
    height: 40px;
    /* ارتفاع ثابت برای نظم */
    line-height: 20px;
    text-align: right;
  }

  .offer-prices {
    align-items: flex-end;
    /* راست‌چین کردن قیمت‌ها */
  }

  .old-price {
    font-size: 0.75rem;
    color: #a1a3a8;
    margin-bottom: 4px;
    text-decoration: line-through;
  }

  .new-price {
    font-size: 1rem;
    color: #000;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .currency {
    font-size: 0.7rem;
    font-weight: 400;
  }
}

/* single-category-slider.css */

.single-category-section {
  padding: 40px 0;
  direction: rtl;
  background-color: #ffffff;
}

.category-slider-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 16px;
}

.section-header {
  display: flex;
  align-items: center;
  /* Vertically center everything */
  margin-bottom: 24px;
  padding-bottom: 0;
  /* Removed padding */
  border-bottom: none;
  /* REMOVED the old bottom border */
  gap: 16px;
  /* Spacing between elements */
}

.section-title {
  font-size: 1.5rem;
  color: var(--primary);
  margin: 0;
  white-space: nowrap;
  /* Prevents title from breaking lines */
}

/* THE NEW LINE */
.header-line {
  flex-grow: 1;
  /* This makes the line stretch to fill all available space */
  height: 1px;
  background-color: var(--border-color);
  /* Light gray color */
  margin-top: 4px;
  /* Optical alignment */
}

.view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--primary);
  font-size: 0.9rem;
  transition: color 0.2s;
  white-space: nowrap;
  /* Prevents link from breaking */
}

.view-all-link:hover {
  color: var(--primary);
}

.view-all-link .icon {
  font-size: 18px;
}

/* Slider Wrapper */
.product-slider-wrapper {
  position: relative;
  /* Wrapper handles the arrows positioning */
}

/* Scroll Track */
.product-scroll-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 10px 4px;
  /* Slight padding for shadows */
  scroll-behavior: smooth;

  /* Hide scrollbar */
  scrollbar-width: none;
}

.product-scroll-track::-webkit-scrollbar {
  display: none;
}

/* Navigation Buttons */
.slider-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 1px solid #eee;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: all 0.2s;
}

.slider-nav-btn:hover {
  background-color: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

.nav-btn-right {
  right: -20px;
  /* Pull outside container slightly */
}

.nav-btn-left {
  left: -20px;
}

/* Card Styling */
.simple-product-card {
  flex: 0 0 260px;
  /* Fixed width */
  background: #ffffff;
  border-radius: 24px;
  /* Slightly more rounded to match image */
  padding: 12px;
  /* Less padding to let image be bigger */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Softer shadow like the reference */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

.simple-product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.product-img-box {
  width: 100%;
  height: 220px;
  /* Taller image area */
  background-color: #f9f9f9;
  /* Very light gray background */
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  position: relative;
  /* Essential for absolute positioning of heart */
  overflow: hidden;
}

.product-img-box img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05));
}

.btn-fav-absolute {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* Circle */
  background: rgba(255, 255, 255, 0.8);
  /* Semi-transparent white */
  border: none;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: 0.2s;
}

.btn-fav-absolute:hover {
  background: #fff;
  color: #ef394e;
  /* Red on hover */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-fav-absolute .material-icons-outlined {
  font-size: 20px;
}

.product-title {
  font-size: 0.9rem;
  color: #333;
  margin: 0 0 12px;
  line-height: 1.5;
  height: 42px;
  /* Limit to 2 lines */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: right;
  /* Ensure RTL alignment */
}

/* Footer (Actions + Price) */
.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  /* Align bottom */
  padding-top: 8px;
}

/* Buttons */
.product-actions {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.action-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s;
}

.btn-cart-red {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  /* Squircle shape */
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s;
  background-color: #ef394e;
  /* Digikala Red */
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(239, 57, 78, 0.25);
}

.btn-cart-red:hover {
  background-color: #d61f35;
  transform: scale(1.05);
}

.btn-fav-outline {
  background-color: transparent;
  border: 1px solid #eee;
  color: #999;
}

.btn-fav-outline:hover {
  color: var(--primary);
  border-color: var(--primary);
}

/* Prices */
.product-prices {
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.old-price {
  font-size: 0.8rem;
  color: #bbb;
  text-decoration: line-through;
  margin-bottom: 2px;
}

.new-price {
  font-size: 1.1rem;
  color: #333;
  font-weight: 800;
  /* Extra bold for price */
}

.currency {
  font-size: 0.75rem;
  font-weight: 400;
}


/* --- Responsive --- */
@media (max-width: 992px) {
  .slider-nav-btn {
    display: none;
    /* Hide arrows on touch devices */
  }

  .nav-btn-right {
    right: 0;
  }

  .nav-btn-left {
    left: 0;
  }

  .btn-fav-outline {
    display: none;
  }
}

@media (max-width: 600px) {
  .section-header {
    flex-direction: row;
    /* Keep title and link on same row */
  }

  .section-title {
    font-size: 1.2rem;
  }

  .simple-product-card {
    flex: 0 0 220px;
    /* Smaller cards on mobile */
  }

  .product-img-box {
    height: 160px;
  }
}

/* most-sold.css */

.most-sold-section {
  padding: 40px 0;
  direction: rtl;
  background-color: #ffffff;
}

.most-sold-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Header --- */
.section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.section-title {
  font-size: 1.6rem;
  color: #ef394e;
  /* Using Red explicitly based on image */
  margin: 0;
  white-space: nowrap;
}

.header-line {
  flex-grow: 1;
  height: 1px;
  background-color: #eee;
  margin-top: 4px;
}

.view-all-link:hover {
  color: #ef394e;
}

/* --- Grid Layout --- */
.most-sold-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 3 Columns */
  gap: 16px;
  /* Ensure padding for shadows if needed */
  padding: 4px;
}

/* --- Card Styles --- */
.most-sold-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 12px 16px;
  text-decoration: none;
  transition: all 0.2s ease;
  min-height: 110px;

  /* IMPORTANT for Mobile Scroll: Prevent card from squashing */
  width: 100%;
  box-sizing: border-box;
}

.most-sold-card:hover {
  border-color: #e0e0e0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

/* 1. Rank Number (Big Red Number) */
.rank-number {
  font-size: 2.2rem;
  /* Larger font */
  font-weight: 800;
  /* Extra Bold */
  color: #ef394e;
  /* Digikala Red */
  width: 40px;
  text-align: center;
  flex-shrink: 0;
  margin-left: 12px;
  /* Space between number and text */
  line-height: 1;
}

/* 2. Text Info (Middle) */
.product-info {
  flex: 1;
  /* Take up remaining space */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 12px;
  /* Space from image */
}

.product-name {
  font-size: 0.95rem;
  color: #333;
  margin: 0 0 8px 0;
  line-height: 1.6;
  font-weight: 500;
  /* Limit to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-code {
  font-size: 0.85rem;
  color: #9e9e9e;
  /* Muted gray */
}

/* 3. Image (Left Side) */
.product-thumb {
  width: 86px;
  height: 86px;
  background-color: #f5f5f5;
  /* Light gray bg behind rug */
  border-radius: 12px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Use cover if image fills box, or contain if transparent */
  object-fit: contain;
}



/* --- Responsive --- */


@media (max-width: 600px) {
  .most-sold-grid {
    grid-template-columns: 1fr;
    /* 1 Column Mobile */
    gap: 12px;
  }

  .most-sold-card {
    padding: 10px;
  }

  .rank-number {
    font-size: 1.8rem;
    width: 30px;
  }
}

/* components/css/mega-menu.css */

/* 1. Make the Main Nav Bar the reference point for positioning */
.header-nav {
  position: relative;
}

/* 2. Wrapper is static so positioning passes through to .header-nav */
.category-menu-wrapper {
  position: static;
}

/* 3. MEGA MENU BASE STYLES */
.mega-menu {
  position: absolute;

  /* Position it right below the container */
  top: 100%;

  /* Stretch it to fill the 1200px container */
  right: 0;
  left: 0;
  width: 100%;

  background-color: #ffffff;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 60px 40px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 100;

  /* Animation & Visibility State */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s ease;

  /* Optional: Add a small margin if you want a gap, or 0 to touch the bar */
  margin-top: 0px;
}

.mega-content-pane {
  display: none; /* Hide all by default */
  width: 100%;
  animation: fadeIn 0.3s ease;
}

.mega-content-pane.active {
  display: block; /* Show only the active one */
}

/* Optional: Animation for smooth switching */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}


/* 4. ACTIVE CLASS (Toggled by JS) */
.mega-menu.menu-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mega-menu-content-wrapper {
  display: flex;
}

.mega-menu-divider {
  top: -10px;
  height: 10px;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 5px 5px rgb(0, 0, 0, 0.03);
  position: relative;
}

/* --- SIDEBAR --- */
.mega-sidebar {
  width: 220px;
  background-color: #F7F7F7;
  flex-shrink: 0;
}

.mega-sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mega-sidebar-list li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  color: #555;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.2s;
  border-right: 3px solid transparent;
}

.menu-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.mega-sidebar-list li.active a,
.mega-sidebar-list li a:hover {
  background-color: #ffffff;
  color: var(--primary);
  font-weight: 700;
  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.02);
}

/* --- CONTENT AREA --- */
.mega-content {
  flex: 1;
  padding: 24px 32px;
  background-color: #ffffff;
}

.mega-content-header {
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
  text-align: right;
}

.view-all-cat {
  color: #444;
  text-decoration: none;
  font-size: 0.95rem;
}

.view-all-cat:hover {
  color: var(--primary);
}

/* --- COLUMNS --- */
.mega-columns {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.mega-col {
  flex: 1;
}

.mega-col-title {
  font-size: 0.9rem;
  color: var(--primary);
  margin: 0 0 16px 0;
  position: relative;
  padding-right: 10px;
}

.mega-col-title::before {
  content: '';
  position: absolute;
  right: 0;
  top: 2px;
  height: 14px;
  width: 2px;
  background-color: var(--primary);
}

.mega-sub-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.thumb-box img {
  width: 40px;
}

.mega-sub-list li {
  margin-bottom: 10px;
}

.mega-sub-list a {
  text-decoration: none;
  color: #777;
  font-size: 0.85rem;
  transition: color 0.2s;
}

.mega-sub-list a:hover {
  color: var(--primary);
  padding-right: 4px;
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  /* White with 80% opacity */
  backdrop-filter: blur(5px);
  /* Optional: adds a nice blur effect */
  z-index: 990;
  /* High, but lower than header (which is usually 999 or 1000) */

  /* Hidden State */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Allows clicks to pass through when hidden */
  transition: all 0.3s ease;
}

/* Active State */
.menu-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* Blocks clicks on the page content when menu is open */
}

@media (max-width: 1200px) {
  .mega-menu {
    width: 900px;
    right: auto;
    left: 0;
  }
}

/* blog-section.css */

.blog-section {
  padding: 10px 0;
  direction: rtl;
  background-color: #ffffff;
}

.blog-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Header (Centered) --- */
.blog-header {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

/* Decoration (Reuse or Redefine) */
.header-decoration {
  width: 2px;
  height: 40px;
  background: linear-gradient(to top, var(--primary), #fff);
  margin: 0 auto 10px;
  position: relative;
}

.header-decoration::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background-color: var(--primary);
  border-radius: 50%;
  border: 2px solid #fff;
}

.section-title {
  font-size: 1.5rem;
  color: var(--text-color);
  margin: 0;
}

.text-primary {
  color: var(--primary);
}

/* --- Blog Scroll Track Fix --- */
/* We need to ensure the track handles the wider blog cards correctly */
.blog-scroll-track {
  padding: 20px 4px;
  /* Add vertical padding for shadows */
}

/* --- Blog Card --- */
.blog-card {
  flex: 0 0 280px;
  /* Fixed width for blog cards */
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* Image Area */
.blog-img-box {
  width: 100%;
  height: 180px;
  position: relative;
  overflow: hidden;
}

.blog-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog-card:hover .blog-img-box img {
  transform: scale(1.1);
  /* Zoom effect on hover */
}

/* Optional Red Overlay for specific cards or hover */
.img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(230, 0, 18, 0.4), transparent);
  opacity: 0;
  z-index: 1;
  transition: opacity 0.3s;
}

/* .blog-card:hover .img-overlay { opacity: 1; } */
/* Uncomment above if you want the red overlay on ALL cards on hover */

/* Content Area */
.blog-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-title {
  font-size: 1rem;
  margin: 0 0 12px 0;
  line-height: 1.5;
  color: var(--text-color);
}

.blog-excerpt {
  font-size: 0.85rem;
  color: #888;
  line-height: 1.8;
  margin: 0 0 20px 0;
  /* Limit text to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer */
.blog-footer {
  margin-top: auto;
  /* Pushes footer to bottom */
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f0f0f0;
  padding-top: 12px;
}

/* Read More Button */
.read-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #FFF0F0;
  /* Pale Pink */
  color: var(--primary);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  text-decoration: none;
  transition: background-color 0.2s;
}

.read-more-btn:hover {
  background-color: #FFE5E5;
}

.read-more-btn .icon {
  font-size: 16px;
}

/* Date */
.blog-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #999;
  font-size: 0.8rem;
}

.blog-date .icon {
  font-size: 16px;
}

/* --- Responsive --- */
@media (max-width: 992px) {
  .blog-card {
    flex: 0 0 260px;
  }
}

@media (max-width: 600px) {
  .blog-card {
    flex: 0 0 240px;
  }

  .section-title {
    font-size: 1.2rem;
  }
}

/* footer.css */

.site-footer {
  direction: rtl;
  padding: 30px 0;
  margin: 20px;
  background-color: var(--muted-bg);
  border-radius: 30px;
  position: relative;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* نوار رنگی بالای فوتر */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(to bottom, var(--primary) 0%, transparent 40%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.5;
}

.footer-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Top Links Section --- */
.footer-top-links {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 40px;
}

.footer-col {
  flex: 1;
  min-width: 160px;
}

.footer-col--wide {
  flex: 1.5;
}

.footer-col-title {
  color: var(--text-color);
  /* در تصویر دسکتاپ قرمز بود اما در موبایل مشکی است، اینجا پیش‌فرض را تیره می‌گیریم */
  font-size: 1rem;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: default;
}

/* آیکون فلش برای موبایل */
.footer-col-title .toggle-icon {
  display: none;
  font-size: 24px;
  color: #888;
  transition: transform 0.3s ease;
}

.footer-link-list,
.footer-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-link-list li {
  margin-bottom: 12px;
}

.footer-link-list a {
  text-decoration: none;
  color: var(--muted-text);
  font-size: 0.9rem;
  transition: all 0.2s;
}

.footer-link-list a:hover {
  color: var(--primary);
  transform: translateX(-5px);
}

.footer-info-list li {
  display: flex;
  align-items: baseline;
  color: var(--muted-text);
  font-size: 0.9rem;
  margin-bottom: 14px;
  line-height: 1.8;
}

/* --- Bottom Cards Section --- */
.footer-bottom-cards {
  display: flex;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 30px;
}

.footer-card {
  background-color: #eef0f4;
  /* رنگ خاکستری روشن طبق تصویر */
  border-radius: var(--border-radius);
  padding: 24px;
  border: none;
  border-radius: 20px;
}

/* Card: Description */
.footer-desc-card {
  flex: 2.5;
  background-color: #eef0f4;
}

.footer-card-title {
  color: var(--primary);
  font-size: 1rem;
  margin: 0 0 12px 0;
}

.footer-desc-text {
  color: #555;
  font-size: 0.85rem;
  line-height: 2;
  text-align: justify;
  margin: 0;
}

/* دکمه مشاهده همه (فقط نمایشی) */
.read-more-btn {
  display: none;
  /* پیش فرض مخفی */
  color: #888;
  font-size: 0.8rem;
  margin-top: 10px;
  text-align: center;
  cursor: pointer;
}

/* Card: Symbols */
.footer-symbols-card {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #eef0f4;
}

.symbols-wrapper {
  display: flex;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
}

.symbol-item {
  width: 70px;
  height: 70px;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.symbol-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Card: Socials */
.footer-social-card {
  flex: 0 0 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  background-color: #eef0f4;
  /* خاکستری */
}

.social-link {
  color: #555;
  text-decoration: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}

.social-link span {
  font-size: 28px;
}

.social-link:hover {
  color: var(--primary);
}

/* Card: Contact (Red) */
.footer-contact-card {
  width: 250px;
  background-color: var(--primary);
  color: white;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* پخش شدن محتوا */
  padding: 0 20px;
  box-shadow: 0 10px 25px -5px rgba(239, 57, 78, 0.4);
}

.contact-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 2;
}

.contact-icon-wrapper {
  z-index: 2;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-phone {
  font-size: 1.4rem;
  letter-spacing: 1px;
  direction: ltr;
  font-weight: 700;
}

.contact-subtitle {
  font-size: 0.9rem;
  opacity: 0.95;
  margin-top: 4px;
}

.decorative-circle {
  position: absolute;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  pointer-events: none;
  top: 50%;
  /* تغییر مکان دایره‌ها برای هماهنگی با طرح افقی جدید */
  right: -20px;
  transform: translateY(-50%);
}

.decorative-circle.c1 {
  width: 100px;
  height: 100px;
}

.decorative-circle.c2 {
  width: 140px;
  height: 140px;
}

.decorative-circle.c3 {
  width: 180px;
  height: 180px;
}

/* --- Copyright --- */
.footer-copyright-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #888;
  font-size: 0.8rem;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.footer-col-title .arrow {
  display: none !important;
}

/* ---------------------------------------------------- */
/* MOBILE RESPONSIVE                    */
/* ---------------------------------------------------- */
@media (max-width: 992px) {
  .site-footer {
    padding: 20px 0;
    margin: 0 10px;
    border-radius: 20px 20px 0 0;
  }

  .footer-container {
    padding: 0 16px;
  }

  /* 1. Accordion Style for Links */
  .footer-top-links {
    flex-direction: column;
    gap: 0;
    /* فاصله صفر برای چسبیدن لیست‌ها */
    margin-bottom: 20px;
  }

  .footer-col {
    border-bottom: 1px solid #eef0f4;
  }

  .footer-col:last-child {
    border-bottom: none;
  }

  .footer-col-title {
    margin: 0;
    padding: 18px 0;
    font-size: 0.95rem;
    cursor: pointer;
    color: #555;
  }

  .footer-col-title .arrow {
    display: block !important;
  }

  /* رنگ قرمز برای عنوان فقط در دسکتاپ بود، اینجا طبق عکس خاکستری تیره */
  .footer-col-title.active {
    color: var(--text-color);
    font-weight: 700;
  }

  .footer-col-title .toggle-icon {
    display: block;
    /* نمایش فلش در موبایل */
  }

  .footer-col.active .toggle-icon {
    transform: rotate(180deg);
  }

  /* مخفی کردن لیست‌ها در حالت بسته */
  .footer-link-list,
  .footer-info-list {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease-out;
  }

  .footer-col.active .footer-link-list,
  .footer-col.active .footer-info-list {
    max-height: 500px;
    /* ارتفاع حداکثری برای انیمیشن */
    opacity: 1;
    padding-bottom: 20px;
  }

  .footer-info-list li {
    margin-bottom: 10px;
    font-size: 0.85rem;
  }

  /* 2. Grid Layout for Bottom Cards */
  .footer-bottom-cards {
    display: grid;
    grid-template-columns: 70px 1fr;
    grid-template-areas:
      "desc desc"
      "contact contact"
      "social symbols";
    gap: 16px;
    margin-right: -10px;
  }

  /* جایگذاری المان‌ها در شبکه */
  .footer-desc-card {
    grid-area: desc;
    padding: 20px;
    border-radius: 12px;
  }

  .footer-card-title {
    font-size: 0.95rem;
  }

  .read-more-btn {
    display: block;
    margin-top: 5px;
  }

  /* نمایش دکمه + */

  .footer-contact-card {
    grid-area: contact;
    width: 100%;
    /* تمام عرض */
    box-sizing: border-box;
    border-radius: 12px;
    padding: 15px 20px;
    justify-content: center;
    /* مرکز چین کردن محتوا */
    gap: 20px;
  }

  /* در حالت موبایل آیکون هدفون سمت راست و متن وسط */
  .contact-icon-wrapper {
    position: absolute;
    right: 20px;
  }

  .contact-content-wrapper {
    align-items: center;
    margin-right: 40px;
    /* جا برای آیکون */
  }

  .footer-social-card {
    grid-area: social;
    border-radius: 12px;
    width: 100%;
    height: 100%;
    /* پر کردن ارتفاع سطر */
    gap: 20px;
  }

  .footer-symbols-card {
    grid-area: symbols;
    border-radius: 12px;
    width: 100%;
    flex-direction: row;
    /* در موبایل نمادها افقی */
    padding: 15px;
  }

  .footer-card-title--center {
    display: none;
    /* مخفی کردن تیتر "نمادها" در موبایل طبق عکس */
  }

  .symbol-item {
    width: 60px;
    height: 60px;
    border-radius: 10px;
  }

  .footer-copyright-row {
    flex-direction: column-reverse;
    gap: 15px;
    text-align: center;
    font-size: 0.75rem;
  }
}

/* features-bar.css */

.features-bar {
  background-color: #ffffff;
  padding: 32px 0;
  border-bottom: 2px solid;
  border-image: linear-gradient(to right, #fff 20%, #e2e2e2 50%, #fff 80%) 1;
}

.features-bar-bottom {
  background-color: #ffffff;
  padding: 32px 0;
  border-top: 2px solid;
  border-image: linear-gradient(to right, #fff 20%, #e2e2e2 50%, #fff 80%) 1;
}

.features-container {
  width: 100%;
  /* Matches your standard container width */
  padding: 0 64px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Space between icon and text */
  /* flex: 1; */
  min-width: 220px;
  /* Ensures items wrap nicely on smaller screens */
  /* In RTL: Icon is on the Right, Text flows to the Left */
}

/* Icon Styling */
.feature-icon {
  width: 48px;
  /* Adjust based on your actual png size */
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Content Styling */
.feature-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feature-title {
  margin: 0 0 6px 0;
  font-size: 1rem;
  color: var(--primary);
  /* Red color per design */
  line-height: 1.2;
}

.feature-subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted-text, #777);
  /* Fallback to #777 if variable missing */
}

/* --- Responsive Design --- */

/* --- Responsive Design (Mobile & Tablet) --- */
@media (max-width: 992px) {

  /* تنظیم کانتینر برای تبدیل شدن به گرید */
  .features-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* گرید ۲ در ۲ */
    gap: 10px;
    /* فاصله بین آیتم‌ها */
    padding: 0 12px;
    /* پدینگ کناری مطابق درخواست */
    width: 100%;
    box-sizing: border-box;
  }

  /* تنظیم هر آیتم ویژگی */
  .feature-item {
    /* حذف محدودیت‌های فلکس باکس قبلی */
    min-width: 0;
    width: 100%;
    flex: unset;

    /* چیدمان عمودی برای موبایل (آیکون بالا، متن پایین) */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    /* استایل کارت */
    padding: 15px 10px;
    background-color: #00000005;
    /* رنگ پس‌زمینه ملایم برای دیده شدن گرید */
    border-radius: 12px;
    /* کمی گرد کردن گوشه‌ها */
    gap: 8px;
    /* فاصله بین آیکون و متن */
  }

  /* اصلاح سایز آیکون برای موبایل */
  .feature-icon {
    width: 40px;
    /* کمی کوچکتر برای تعادل بهتر */
    height: 40px;
    margin: 0;
    /* حذف مارجین‌های احتمالی */
  }

  /* اصلاح فونت‌ها برای موبایل */
  .feature-title {
    font-size: 0.9rem;
    margin-bottom: 4px;
  }

  .feature-subtitle {
    font-size: 0.75rem;
  }

  /* تنظیم پدینگ سکشن اصلی */
  .features-bar {
    padding: 20px 0;
  }
}

/* category-puzzle.css */



.category-puzzle-section {
  padding: 60px 0;
  /* More spacing for this section */
  direction: rtl;
  background-color: #ffffff;
}

.category-puzzle-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;

  display: flex;
  justify-content: space-between;
}

/* --- Column Layout --- */
.puzzle-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  /* Divider Line on the Left side for RTL layout */
}

/* Remove border from the last column on the left */
.puzzle-col:last-child {
  border-left: none;
}

/* --- Header --- */
.puzzle-header {
  text-align: center;
  margin-bottom: 30px;
}

.puzzle-title {
  font-size: 1.1rem;
  color: var(--primary);
  margin: 0 0 8px 0;
}

.puzzle-subtitle {
  font-size: 0.85rem;
  color: var(--muted-text);
  margin: 0;
}

/* --- 2x2 Grid --- */
.puzzle-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  /* REMOVED GAP to allow borders to touch */
  width: 100%;
  margin-bottom: 24px;
  /* Optional: If you want a border around the WHOLE grid, uncomment below */
  /* border: 1px solid var(--border-color); */
  /* border-radius: 12px; */
  /* overflow: hidden; */
}

.puzzle-item {
  display: block;
  width: 100%;
  height: 120px;
  /* Create a placeholder aspect ratio to prevent layout shifts */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  padding: 6px;
}

.puzzle-item:nth-child(1) {
  border-left: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

/* Item 2 (Top Left in RTL): Needs Bottom border only */
.puzzle-item:nth-child(2) {
  border-bottom: 1px solid var(--border-color);
}

/* Item 3 (Bottom Right in RTL): Needs Left border only */
.puzzle-item:nth-child(3) {
  border-left: 1px solid var(--border-color);
}

/* Item 4 (Bottom Left in RTL): No borders needed */
.puzzle-item:nth-child(4) {
  border: none;
}

/* Hover Effect */
.puzzle-item:hover {
  transform: scale(1.05);
  /* Zoom slightly instead of moving up, looks better in a grid */
  z-index: 2;
  /* Bring to front so it goes over borders */
}

.puzzle-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
}

/* --- Footer Link --- */
.puzzle-view-all {
  margin-top: auto;
  /* Pushes link to bottom if heights differ */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #777;
  font-size: 0.9rem;
  transition: color 0.2s;
}

.puzzle-view-all:hover {
  color: var(--primary);
}

.puzzle-view-all .icon {
  font-size: 18px;
}

/* --- Responsive --- */
@media (max-width: 992px) {
  .category-puzzle-container {
    flex-wrap: wrap;
    gap: 20px 0;
    /* Vertical gap when wrapping */
  }

  .puzzle-col {
    flex: 0 0 50%;
    /* 2 columns per row */
    border-left: none;
    /* Remove default borders */
  }

  .puzzle-title, .puzzle-subtitle {
    text-align: right;
  }

  .puzzle-header {
    width: 100%;
  }

  .puzzle-col {
    flex: 0 0 100%;
    /* 1 column per row */
    border-left: none !important;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 40px;
    padding-top: 20px;
    border-radius: 20px;
    background-color: var(--bg-card);
  }

  .puzzle-col:last-child {
    border-bottom: none;
  }

  .category-puzzle-section {
    padding-bottom: 10px;
  }
}

/* category-section.css */

.category-section {
  padding: 40px 0;
  direction: rtl;
  background-color: #fff;
}

.category-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Header & Decoration --- */
.category-header {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

/* The vertical line and dot above the text */
.header-decoration {
  width: 2px;
  height: 40px;
  background: linear-gradient(to top, var(--primary), #fff);
  margin: 0 auto 10px;
  position: relative;
}

.header-decoration::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background-color: var(--primary);
  border-radius: 50%;
  border: 2px solid #fff;
}

.category-section-title {
  font-size: 1.5rem;
  color: var(--text-color);
  margin: 0;
}

.text-primary {
  color: var(--primary);
}


/* --- Grid Layout --- */
.category-content-wrapper {
  position: relative;
  padding: 0 40px;
  /* Space for arrows */
}

.category-grid {
  display: grid;
  /* Create exactly 6 columns as shown in design */
  grid-template-columns: repeat(6, 1fr);
  gap: 24px 20px;
  /* Row gap 24px, Column gap 20px */
}

/* --- Card Style --- */
.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--text-color);
  transition: transform 0.2s ease;
}

.category-card:hover {
  transform: translateY(-5px);
}

.category-img-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  /* Square shape */
  background-color: var(--bg-card);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  padding: 16px;
  position: relative;
  overflow: hidden;
  /* Ensures image stays within rounded corners if needed, though designs often have pop-out */
}

/* To achieve the "pop-out" look if your images have transparent backgrounds:
   You might want to remove 'overflow: hidden' above and let the image scale slightly larger.
*/

.category-img-box img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
  /* Adds depth to the rug */
}

.category-label {
  font-size: 0.9rem;
  color: var(--primary);
  text-align: center;
}


/* --- Navigation Arrows --- */
.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  padding: 0;
}

.nav-arrow:hover {
  color: var(--primary);
}

.nav-arrow .material-icons-outlined {
  font-size: 28px;
  font-weight: bold;
}

.nav-arrow-prev {
  right: 0;
}

.nav-arrow-next {
  left: 0;
}


/* --- Mobile Horizontal Scroll (Touch Friendly) --- */
@media (max-width: 768px) {
  .category-section {
    padding: 10px 0;
  }

  /* تنظیمات کانتینر اصلی */
  .category-container {
    padding: 0;
    /* حذف پدینگ‌های اضافه کانتینر برای استفاده از کل عرض */
    overflow: hidden;
    /* جلوگیری از اسکرول افقی کل صفحه */
  }

  .category-content-wrapper {
    padding: 0;
    /* حذف فاصله فلش‌ها */
  }

  /* تبدیل گرید به نوار اسکرولی */
  .category-grid {
    display: flex;
    /* چینش خطی */
    flex-wrap: nowrap;
    /* جلوگیری از شکستن خط */
    overflow-x: auto;
    /* فعال کردن اسکرول افقی */
    gap: 12px;
    /* فاصله بین آیتم‌ها */
    padding: 10px 24px 30px 24px;
    /* پدینگ اطراف (پایین بیشتر برای سایه) */

    /* تنظیمات نرمی اسکرول در iOS و Android */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;

    /* مخفی کردن اسکرول‌بار برای زیبایی */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
  }

  /* مخفی کردن اسکرول‌بار در Chrome/Safari */
  .category-grid::-webkit-scrollbar {
    display: none;
  }

  /* تنظیمات کارت‌ها */
  .category-card {
    /* عرض ثابت برای اینکه 3 تا آیتم و نصفی دیده بشه (مثل عکس) */
    flex: 0 0 36%;
    min-width: 100px;
    /* جلوگیری از خیلی کوچک شدن در گوشی‌های قدیمی */
    max-width: 130px;

    /* وسط‌چین کردن محتوا */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  /* باکس عکس */
  .category-img-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* باکس مربعی */
    border-radius: 20px;
    /* گردی گوشه‌ها */
    background-color: #f2f6fa;
    /* رنگ پس‌زمینه باکس */

    /* نکته کلیدی ۱: اجازه میدیم عکس از کادر بزنه بیرون */
    overflow: visible;

    /* برای اینکه عکس رو بتونیم وسط‌چین و کنترل کنیم */
    display: flex;
    align-items: center;
    /* تراز عمودی */
    justify-content: center;
    /* تراز افقی */

    margin-bottom: 12px;
    /* فاصله باکس تا متن پایین */
    position: relative;
    z-index: 1;
    /* مطمئن میشیم زیر بقیه المنت‌ها نمیره */
  }

  .category-img-box img {
    /* نکته کلیدی ۲: عکس رو بزرگتر از باکس میکنیم */
    width: 115%;
    height: auto;

    /* نکته کلیدی ۳: با مارجین منفی میکشیمش بالا تا از سر باکس بزنه بیرون */
    margin-top: -25%;

    /* سایه برای اینکه جدا از باکس به نظر بیاد */
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.2));

    transition: transform 0.3s ease;
  }

  /* (اختیاری) افکت انیمیشن نرم وقتی صفحه لود میشه */
  .category-card:hover .category-img-box img {
    transform: translateY(-5px) scale(1.02);
  }

  /* فونت‌ها در موبایل */
  .category-label {
    font-size: 0.8rem;
    font-weight: bold;
    color: #444;
    /* رنگ متن تیره‌تر برای خوانایی */
    white-space: nowrap;
    /* جلوگیری از دو خطی شدن متن */
  }

  /* مخفی کردن فلش‌ها در موبایل */
  .nav-arrow {
    display: none;
  }

  /* تنظیم هدر */
  .category-header {
    margin-bottom: 20px;
    padding: 0 24px;
  }
}

/* brands-section.css */

.brands-section {
  padding: 40px 0;
  direction: rtl;
  background-color: #ffffff;
}

.brands-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header Styles (Consistent with previous sections) */
.section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.section-title {
  font-size: 1.5rem;
  color: var(--primary);
  margin: 0;
  white-space: nowrap;
}

.header-line {
  flex-grow: 1;
  height: 1px;
  background-color: #F0F0F0;
  margin-top: 4px;
}

.view-all-link:hover {
  color: var(--primary);
}


/* --- Grid Layout --- */
.brands-grid {
  display: grid;
  /* Create 6 columns for large screens */
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}

/* --- Card Styles --- */
.brand-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.brand-logo-box {
  width: 100%;
  height: 120px;
  background-color: var(--bg-brand-box);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin-bottom: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.brand-card:hover .brand-logo-box {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.brand-logo-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Optional: Mix-blend-mode helps if logos have white backgrounds to blend into the grey box */
  mix-blend-mode: multiply;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.brand-card:hover img {
  opacity: 1;
}

.brand-name {
  color: #555;
  font-size: 0.95rem;
  text-align: center;
  transition: color 0.2s;
}

.brand-card:hover .brand-name {
  color: var(--primary);
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  .brands-grid {
    grid-template-columns: repeat(4, 1fr);
    /* 4 per row */
  }
}

@media (max-width: 768px) {
  .brands-grid {
    grid-template-columns: repeat(3, 1fr);
    /* 3 per row */
    gap: 16px;
  }
}

@media (max-width: 500px) {
  .brands-grid {
    grid-template-columns: repeat(2, 1fr);
    /* 2 per row mobile */
  }

  .section-title {
    font-size: 1.2rem;
  }
}

/* --- Responsive --- */

/* Tablet & Mobile (Max Width 992px or 768px depending on preference) */
@media (max-width: 992px) {
  .brands-grid {
    /* 1. Switch to Flexbox for a single row */
    display: flex;
    flex-wrap: nowrap;
    /* Crucial: Prevents items from dropping to next line */

    /* 2. Enable Scrolling */
    overflow-x: auto;
    gap: 16px;
    padding-bottom: 12px;
    /* Space for touch interaction */

    /* 3. Hide Scrollbar & Smooth Feel */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }

  .brands-grid::-webkit-scrollbar {
    display: none;
  }

  /* 4. Fix Card Size for Mobile */
  .brand-card {
    /* 'flex: 0 0 auto' means: Don't grow, Don't shrink, Auto basis */
    flex: 0 0 130px;
    /* Set your desired width for brand cards here */
    scroll-snap-align: center;
    /* Snaps the card to center when scrolling stops */
  }

  /* Optional: Adjust logo box size for mobile if 120px is too big */
  .brand-logo-box {
    height: 100px;
    padding: 16px;
  }

  .section-title {
    font-size: 1.2rem;
  }
}

/* stacks-section.css */

.stack-1-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  padding: 0 60px;
}

.stack-banner-link img {
  height: 160px;
  transition: all 0.3s ease;
}

.stack-banner-link img:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);

}

.stack-3-banners {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.stack-4-banners {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  padding: 0 60px;
}

.stack-4-img {
  padding: 0 10px;
}

@media (max-width: 768px) {

  .stack-3-banners {
    width: 100%;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .stack-3-img img {
    width: 100%;
  }

  .stack-4-banners {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 0 8px;
  }

  .stack-4-img img {
    width: 100%;
  }

  .stack-4-section {
    width: 100%;
  }

  /* تنظیمات کانتینر اصلی برای گرید ۲ در ۲ */
  .stack-1-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* ایجاد دو ستون مساوی (2x2) */
    gap: 6px;
    /* فضای ۶ پیکسلی بین آیتم‌ها */
    padding: 6px;
    /* پدینگ اطراف کل گرید (اختیاری برای تراز بهتر) */
    width: 100%;
  }

  /* تنظیمات لینک نگهدارنده عکس */
  .stack-banner-link {
    display: block;
    width: 100%;
    /* اشغال کل فضای سلول گرید */
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    /* جلوگیری از بیرون زدگی عکس از گوشه‌های گرد */
  }

  /* افکت هاور */
  .stack-banner-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }

  /* تنظیمات عکس برای داینامیک بودن */
  .stack-banner-link img {
    width: 100%;
    /* عکس کل عرض سلول گرید را پر می‌کند */
    height: auto;
    /* ارتفاع بر اساس نسبت تصویر اتوماتیک تنظیم می‌شود */
    object-fit: cover;
    /* اطمینان از پر شدن فضا بدون دفرمه شدن */
    display: block;
    /* حذف فاصله اضافی زیر عکس‌های inline */
  }

  /* جهت اطمینان از اینکه سکشن اصلی مشکلی ایجاد نمی‌کند */
  .stack-1-section {
    padding: 10px 0;
    direction: ltr;
    /* اگر گرید به هم ریخت، موقتا LTR تست کنید، اما RTL هم باید کار کند */
  }
}

/* --- Auth Modal Styles --- */
.auth-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 2000; /* Higher than header */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.auth-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.auth-modal-box {
  background-color: #ffffff;
  width: 400px;
  max-width: 90%;
  border-radius: 24px;
  padding: 32px;
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.auth-modal-overlay.active .auth-modal-box {
  transform: translateY(0);
}

.auth-close-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #777;
  padding: 5px;
  border-radius: 50%;
  transition: 0.2s;
  display: flex;
}

.auth-close-btn:hover {
  background-color: #f5f5f5;
  color: #000;
}

.auth-header {
  text-align: center;
  margin-bottom: 24px;
}

.auth-logo {
  height: 28px;
  margin-bottom: 12px;
}

/* Tabs */
.auth-tabs {
  display: flex;
  border-bottom: 2px solid #f0f0f0;
  margin-bottom: 24px;
}

.auth-tab {
  flex: 1;
  background: transparent;
  border: none;
  padding: 12px;
  font-size: 1rem;
  color: #777;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.3s;
}

.auth-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 700;
}

/* Forms */
.auth-form {
  display: none;
  animation: fadeIn 0.3s ease;
}

.auth-form.active {
  display: block;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 0.9rem;
  color: #333;
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  background-color: #F5F6F8;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: 0.2s;
}

.form-input:focus {
  background-color: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(230, 0, 18, 0.1);
}

.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  font-size: 0.85rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: #555;
}

.forgot-link {
  color: #777;
  transition: 0.2s;
}

.forgot-link:hover {
  color: var(--primary);
}

.auth-submit-btn {
  width: 100%;
  justify-content: center;
  padding: 14px;
  font-size: 1rem;
}

.auth-terms {
  font-size: 0.8rem;
  color: #777;
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.6;
}

.auth-terms a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px dashed var(--primary);
}

@media (max-width: 993px) {
  .form-footer {
    flex-direction: column;
    gap: 14px;
  }
}
/* --- Modern Cart Wrapper --- */
.cart-wrapper {
  position: relative;
  display: inline-block;
}

/* Badge on the trigger button (Optional) */
.cart-badge-count {
  background-color: #fff;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}

/* --- The Dropdown Container --- */
.cart-dropdown.modern-cart {
  position: absolute;
  top: calc(100% + 16px);
  left: 0; /* Align to left of button */
  width: 360px; /* Slightly wider for better layout */
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12); /* Softer, deeper shadow */
  padding: 0;
  z-index: 1500;
  
  /* Animation State */
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 1px solid rgba(0,0,0,0.04);
  overflow: hidden; /* For rounded corners */
}

/* Arrow pointing up */
.cart-dropdown.modern-cart::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 45px;
  width: 12px;
  height: 12px;
  background-color: #fff;
  transform: rotate(45deg);
  border-left: 1px solid rgba(0,0,0,0.04);
  border-top: 1px solid rgba(0,0,0,0.04);
  z-index: 1;
}

.cart-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* --- Header --- */
.cart-popup-header {
  padding: 16px 20px;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}

.cart-popup-header .title {
  font-size: 0.95rem;
  color: #333;
}

.cart-close-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #999;
  transition: color 0.2s;
  display: flex;
}

.cart-close-btn:hover {
  color: #333;
}

/* --- Items Scroll Area --- */
.cart-items-scroll {
  max-height: 280px;
  overflow-y: auto;
  padding: 10px 0;
}

/* Thin Scrollbar Styling */
.cart-items-scroll::-webkit-scrollbar {
  width: 5px;
}
.cart-items-scroll::-webkit-scrollbar-thumb {
  background-color: #e0e0e0;
  border-radius: 10px;
}

/* --- Item Card --- */
.cart-item-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px dashed #f5f5f5;
  transition: background-color 0.2s;
  position: relative;
}

.cart-item-card:last-child {
  border-bottom: none;
}

.cart-item-card:hover {
  background-color: #fafafa;
}

.cart-thumb {
  width: 70px;
  height: 70px;
  border-radius: 12px;
  background-color: #f9f9f9;
  border: 1px solid #eee;
  overflow: hidden;
  flex-shrink: 0;
}

.cart-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 70px;
}

.cart-title {
  font-size: 0.85rem;
  color: #333;
  margin: 0 0 4px 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.cart-meta {
  font-size: 0.75rem;
  color: #999;
  margin-bottom: auto; /* Pushes price to bottom */
}

.cart-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.quantity-box {
  font-size: 0.75rem;
  background-color: #f0f0f0;
  color: #555;
  padding: 2px 8px;
  border-radius: 6px;
}

.cart-info .price {
  font-size: 0.95rem;
  color: #333;
}

/* Remove Button (Trash Icon) */
.btn-remove-item {
  background: transparent;
  border: none;
  color: #ccc;
  cursor: pointer;
  padding: 4px;
  transition: all 0.2s;
  align-self: flex-start; /* Align to top */
}

.btn-remove-item:hover {
  color: var(--primary); /* Red on hover */
  transform: scale(1.1);
}

.btn-remove-item .material-icons-outlined {
  font-size: 20px;
}

/* --- Footer --- */
.cart-popup-footer {
  background-color: #fafafa;
  padding: 20px;
  border-top: 1px solid #eee;
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.cart-total-row .label {
  color: #555;
  font-size: 0.9rem;
}

.cart-total-row .total-price {
  color: var(--primary); /* Use site red */
  font-size: 1.2rem;
}

.cart-total-row .currency {
  font-size: 0.8rem;
  color: #777;
  font-weight: 400;
}

/* Action Buttons */
.cart-actions-row {
  display: flex;
  gap: 12px;
}

.action-btn {
  flex: 1;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.2s;
}

/* Reusing your .btn-primary, adding .btn-outline */
.btn-outline {
  background-color: transparent;
  border: 1px solid #ddd;
  color: #555;
}

.btn-outline:hover {
  border-color: #aaa;
  color: #333;
  background-color: #fff;
}

/* Checkout button specific adjustments */
.checkout-btn {
  box-shadow: 0 4px 12px rgba(230, 0, 18, 0.2);
}
.checkout-btn:hover {
  box-shadow: 0 6px 15px rgba(230, 0, 18, 0.3);
  transform: translateY(-2px);
}