/*
 Theme Name:   Koochmarket Child
 Theme URI:    https://koochmarket.ir/
 Description:  Child theme for Koochmarket.ir
 Author:       Your Name
 Author URI:   http://example.com
 Template:     woodmart 
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         child-theme, responsive
 Text Domain:  koochmarket-child
*/

/* Add any custom CSS here */
/* ------------------------------------- */



/* === کدهای CSS بنر متحرک === */



.custom-marquee-container {
  width: 100%;
  overflow: hidden;
  background: #000; /* رنگ پس‌زمینه */
  padding: 10px 0;
  direction: rtl; /* برای اینکه متن‌ها از راست به چپ نمایش داده بشن */
}

.custom-marquee-track {
  display: flex;
  flex-direction: row; /* چیدمان آیتم‌ها به صورت افقی */
  gap: 60px; /* فاصله بین آیتم‌ها - قابل تنظیم */
  white-space: nowrap; /* جلوگیری از رفتن متن به خط بعدی */
  animation: scroll 28s linear infinite; /* نام انیمیشن، مدت زمان، خطی، تکرار بی‌نهایت */
  will-change: transform; /* بهینه‌سازی برای انیمیشن */
}

/* انیمیشن حرکت از راست به چپ */
@keyframes scroll {
  from {
    transform: translateX(0); /* شروع از موقعیت فعلی */
  }
  to {
    /* با تکرار آیتم‌ها، حرکت به اندازه عرض کل آیتم‌ها (حدود 100%) انجام میشه */
    transform: translateX(-100%); 
  }
}

.custom-marquee-item p {
  color: #fff; /* رنگ متن */
  margin: 0;
  padding: 0; /* حذف padding پیش‌فرض پاراگراف */
  font-size: 17px; /* اندازه فونت - قابل تنظیم */
  white-space: nowrap; /* اطمینان از عدم شکست خط */
}

/* تنظیمات برای موبایل */
@media (max-width: 768px) {
  .custom-marquee-track {
    gap: 40px; /* فاصله کمتر در موبایل */
    animation-duration: 32s; /* سرعت کمتر در موبایل */
  }
  .custom-marquee-item p {
    font-size: 15px; /* فونت کوچکتر در موبایل */
  }
}

@media (max-width: 480px) {
  .custom-marquee-track {
    gap: 28px; /* فاصله کمتر در موبایل‌های کوچکتر */
    animation-duration: 36s; /* سرعت کمتر در موبایل‌های کوچکتر */
  }
  .custom-marquee-item p {
    font-size: 13px; /* فونت کوچکتر در موبایل‌های کوچکتر */
  }
}

/* === پایان کدهای CSS بنر متحرک === */


/* === پایان کدهای CSS بنر متحرک ===

=


/* ------------------------------------- */


.search-container {
  display: flex;
  align-items: center;
  border: 1px solid #e0e0e0;
  border-radius: 8px; /* rounded corners */
  overflow: hidden; /* prevent overflow */
  width: 100%;
  max-width: 420px;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.search-icon-button {
  background-color: #f5c542; /* زرد */
  border: none;
  padding: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  /* برای دکمه، گوشه سمت راست باید گرد باشد، گوشه سمت چپ باید صاف باشد تا با input تراز شود */
  border-radius: 0 8px 8px 0;
  flex-shrink: 0; /* از کوچک شدن دکمه جلوگیری می کند */
  height: 100%; /* باعث می شود دکمه هم ارتفاع کانتینر را بگیرد */
}

.search-icon-button svg {
  fill: white;
}

.search-input {
  flex-grow: 1; /* باعث می شود input بقیه فضا را بگیرد */
  border: none;
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
  outline: none;
  text-align: right; /* راست چین کردن متن */
  direction: rtl; /* جهت راست به چپ */
  height: 100%; /* باعث می شود input هم ارتفاع کانتینر را بگیرد */
  box-sizing: border-box; /* برای اطمینان از اینکه padding در محاسبه height/width لحاظ شود */
}

.search-input::placeholder {
  color: #999; /* رنگ متن placeholder */
}


/* پررنگ کردن خط جداکننده بین آیتم‌های دسته‌بندی محصولات */
.wd-dropdown-cats .wd-nav.wd-nav-vertical > li {
    border-bottom: 2px solid #000000; /* ضخامت و رنگ خط جداکننده را اینجا تنظیم کنید */
}

/* اگر می‌خواهید خط جداکننده برای آخرین آیتم حذف شود */
.wd-dropdown-cats .wd-nav.wd-nav-vertical > li:last-child {
    border-bottom: none;
}


/* Adjusting overall page width for full banner display */
@media (min-width: 992px) { /* Apply only on desktop */
    .main-page-wrapper,
    .site-content,
    .page-wrapper,
    .content-wrapper {
        max-width: 100% !important; /* Remove max-width constraint */
        width: 100% !important;     /* Ensure it takes full available width */
    }

    /* Specific targeting for the banner container if needed */
    .whb-top-bar-inner {
        max-width: 100% !important;
        width: 100% !important;
    }
}