/* === ساختار کلی === */

.site-header {

position: fixed;

top: 0;

left: 0;

right: 0;

background: #fff;

padding: 0px 0px;

z-index: 9999;

box-shadow: 0 0px 1px rgba(0,0,0,0.1);

}

.search-bar {

position: relative;

display: flex;

align-items: center;

justify-content: center;

background: #fff;

padding: 6px;

border-bottom: 0px solid #ddd;

}

.search-box {

position: relative;

width: 100%;


max-width: 550px;

border: 1px solid #333;

border-radius: 9px;

display: flex;

align-items: center;

background: #fff;

padding: 1px;

}

.search-icon {

position: absolute;

right: 10px;

font-size: 18px;

color: #ff6600;

/*pointer-events: none;*/

transition: color 0.3s ease;

}

/* input واقعی */

.search-input {

width: 93%;

padding: 4px 50px 9px 9px;

border: none;               /* 🚫 بدون حاشیه */

background: transparent;    /* 🚫 بدون پس‌زمینه */

font-size: 17px;

outline: none;

color: #333;                /* رنگ نوشته هنگام تایپ */

position: relative;

z-index: 9999;

}
/* === دکمه جستجو (آیکون) === */
.search-btn {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.search-btn .search-icon {
  pointer-events: none;
  font-size: 18px;
  color: #ddd;
}

.search-btn:active .search-icon {
  transform: scale(0.92);
}

/* متن چرخشی داخل input */

#rotatingText {

position: absolute;

left: 37px;

font-size: 16px;

color: #333;

white-space: nowrap;

pointer-events: none;

}

/* انیمیشن چرخش */

@keyframes rollIn {

0% {

transform: rotateX(100deg) translateY(10px);

opacity: 0;

}

60% {

transform: rotateX(20deg) translateY(3px);

opacity: 0.6;

}

100% {

transform: rotateX(0deg) translateY(0);

opacity: 1;

}

}

@keyframes rollOut {

0% {

transform: rotateX(0deg) translateY(0);

opacity: 1;

}

60% {

transform: rotateX(-20deg) translateY(-3px);

opacity: 0.6;

}

100% {

transform: rotateX(-100deg) translateY(-10px);

opacity: 0;

}

}

.rotating-text {

display: inline-block;

transform-origin: bottom;

transition: opacity 0.3s ease;

}

.rotating-text.roll-in {

animation: rollIn 0.6s ease forwards;

}

.rotating-text.roll-out {

animation: rollOut 0.5s ease forwards;

}

/* وقتی تایپ می‌کنی، متن پنهان شه */

.search-input:focus ~ #rotatingText,

.search-input:not(:placeholder-shown) ~ #rotatingText {

opacity: 0;

visibility: hidden;

}

/* نوار دسته‌بندی */

.category-bar {

background: #fff;

overflow-x: auto;

white-space: nowrap;

scrollbar-width: none;

padding: 1px 0;
border-bottom: 1px solid #ddd;
}

.category-bar::-webkit-scrollbar { display: none; }

.category-scroll {

display: inline-flex;

gap: 8px;

padding: 0px 12px;

}

.category-scroll a {

color: #333;

text-decoration: none;

font-size: 17px;

padding: 6px 14px;

border-radius: 8px;

transition: 0.3s;

}
/* قبل از اجرای JS، نوار دسته‌ها مخفی است */
.category-scroll {
  visibility: hidden;
  transition: visibility 0s; /* جلوگیری از transition ناخواسته */
}



.category-scroll a.active {
  color: #ff6600;
  font-weight: bold;
}

/*.category-scroll a:hover {

background: #ff6600;

color: #fff;

}*/

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

/* حذف رنگ فوکس روی لینک‌ها و دکمه‌ها */

/* برای دسکتاپ */

a:focus, a:active,

button:focus, button:active {

outline: none;

box-shadow: none;

}

/* برای موبایل: حذف رنگ لمس (blue highlight) */

a, button {

-webkit-tap-highlight-color: transparent;

}

/* اختصاصی برای دسته‌بندی‌ها و کارت محصولات */

.category-scroll a:focus,

.category-scroll a:active,

.product-card a:focus,

.product-card a:active {

outline: none;

box-shadow: none;

}

/* موبایل */

@media (max-width: 600px) {

.search-box { width: 98%; padding: 2px; }

.category-scroll a { font-size: 16px; padding: 5px 10px; }

}