@font-face {
          font-family: pershein;
          src: url('/fonts/IranSans/Sans a4fran3.woff2');
          font-display: swap;
}

@font-face {
          font-family: BStrap;
          src: url('/fonts/Bootstrap/bootstrap-icons.woff2')format('woff2');
          font-display: swap;
}

body {
          padding: 0;
          margin: 0;
          overflow: hidden;
}

.BootIcon {
          font-family: BStrap;
          font-style: normal;
}

* {
          font-family: pershein;
}

select {
          font-size: 12px;
}

:root {
          --bg: #f9fafb;
          --text: #1f2937;
          --muted: #6b7280;
          --primary: #2563eb;
          --secondary: #10b981;
          --border: #e5e7eb;
          --card: #ffffff;
          --bg-f: #0f172a;
          --bg-soft: #111827;
          --text: #e5e7eb;
          --muted: #9ca3af;
          --border-f: #1f2937;
}

.btn {
          text-decoration: none;
          white-space: nowrap;
}

.panel {
          display: flex;
          gap: 5px;
          height: calc(100vh - 120px);
}

.settings {
          min-width: 120px;
          padding: 10px;
          transition: min-width .5s ease;
          z-index: 20;
          background: white;
          border: 1px #e3e3e3 solid;
}

.settings:hover {
          min-width: 230px;
          transition: min-width .7s ease;
}

.list-view {
          display: flex;
          flex-wrap: wrap;
          overflow: auto;
          width: 100%;
          gap: 10px;
          align-content: flex-start;
          justify-content: center;
          padding-top: 20px;
}

.discount {
          min-width: 50px;
          background-color: #ff4a4a;
          border-bottom-left-radius: 15px;
          border-top-right-radius: 15px;
          color: #ffffff;
          font-size: 12px;
          letter-spacing: 1px;
          text-align: center;
          height: 25px;
          position: absolute;
          top: 0;
          right: 0;

}

.product {

          overflow: hidden;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          justify-content: space-between;
          max-width: 150px;
          padding: 10px;
          background: #f0f0f0;
          border-radius: 15px;
          position: relative;
}

.product .titer {
          font-size: 12px;
          color: #1f2937;
          text-align: right;
          line-height: 22px;
          height: 100%;
          width: 100%;
}

.product img {
          border-radius: 5px;
          width: 100%;
}

.product p {

          text-align: start;
}

.slider-container {
          max-width: 500px;
          margin: auto;
          background: #fff;
          border-radius: 12px;
}

h3 {
          margin-top: 20px;
          color: #007bff;
          font-size: 12px
}

.range-slider {
          position: relative;
          width: 100%;
          height: 6px;
          direction: ltr;
          /* اسلایدر باید LTR باشد */
}

.range-slider input[type=range] {
          position: absolute;
          pointer-events: none;
          -webkit-appearance: none;
          width: 100%;
          height: 6px;
          background: transparent;
}

.range-slider input[type=range]::-webkit-slider-thumb {
          pointer-events: all;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: #007bff;
          border: 2px solid #fff;
          cursor: pointer;
          -webkit-appearance: none;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
          transition: 0.3s;
}

.range-slider input[type=range]::-webkit-slider-thumb:hover {
          background: #0056b3;
}

.slider-track {
          position: absolute;
          height: 6px;
          background: #ddd;
          border-radius: 3px;
          width: 100%;
          top: 50%;
          transform: translateY(-50%);
}

.slider-range {
          position: absolute;
          height: 6px;
          background: #007bff;
          border-radius: 3px;
          top: 50%;
          transform: translateY(-50%);
}

.values {
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          font-weight: bold;
          font-size: 10px;
          color: #333;
}

.toman {
          font-size: 8px;
}

.container {
          background: white;
          position: sticky;
          display: flex;
          top: 0;
          padding-top: 10px;
          width: 100%;
          z-index: 50;
          flex-direction: column;
          align-items: center;
          box-shadow: #c8c8c8 0px 4px 4px 0px;
}

.searchbox {
          max-width: 700px;
          width: 100%;
          position: relative;
          background: var(--card);
          border: 1px solid var(--border);
          border-radius: 14px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
          transition: box-shadow .2s ease, border-color .2s ease;
}

.field {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 12px 14px;
}

.icon {
          width: 22px;
          height: 22px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          color: var(--muted);
}

.input {
          flex: 1;
          background: transparent;
          border: 0;
          color: var(--text);
          font-size: 1rem;
          outline: none;
          caret-color: var(--accent);
}

.input::placeholder {
          color: #9ca3af;
}

.clear {
          width: 24px;
          height: 24px;
          border: 0;
          outline: 0;
          cursor: pointer;
          border-radius: 8px;
          background: transparent;
          color: var(--muted);
          display: inline-flex;
          align-items: center;
          justify-content: center;
}

.clear:hover {
          background: rgba(0, 0, 0, .05);
          color: var(--text);
}

.clear:active {
          transform: translateY(1px);
}

.searchbox:focus-within {
          border-color: var(--accent);
          box-shadow: 0 0 0 4px var(--ring);
}

/* پیشنهادات */
.suggestions {
          position: absolute;
          inset-inline-start: 0;
          top: 100%;
          width: 100%;
          background: var(--card);
          border: 1px solid var(--border);
          border-radius: 12px;
          margin-top: 8px;
          overflow: hidden;
          z-index: 20;
          box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
          opacity: 0;
          visibility: hidden;
          translate: 0 -6px;
          scale: .98;
          transition: opacity .16s ease, visibility .16s ease, translate .16s ease, scale .16s ease;
}

.suggestions.open {
          opacity: 1;
          visibility: visible;
          translate: 0 0;
          scale: 1;
}

.suggestion-item {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 10px 14px;
          cursor: pointer;
          color: var(--text);
}

.suggestion-item:hover,
.suggestion-item[aria-selected="true"] {
          background: rgba(59, 130, 246, .08);
}

.hint {
          color: var(--muted);
          font-size: .86rem;
}

/* متن راهنما */
.label {
          margin-bottom: 10px;
          font-weight: 700;
          font-size: 1.05rem;
}

.desc {
          color: var(--muted);
          margin-bottom: 12px;
}

.checkbox-wrapper-16 {
          display: flex;
          justify-content: center;
          gap: 10px;
          background: white;
          overflow: auto;
          user-select: none;
          padding-bottom: 10px;
          width: 100%;
}

.top {
          padding: 10px 0;
}

.rtl {
          flex-wrap: wrap;
}


.checkbox-wrapper-16::-webkit-scrollbar {
          display: none;
          /* کروم، سافاری */
}

.checkbox-wrapper-16 .checkbox-input {
          clip: rect(0 0 0 0);
          -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
          margin-top: 5px;
          overflow: hidden;
          white-space: nowrap;
          position: absolute;
}

.checkbox-wrapper-16 .checkbox-input:checked+.checkbox-tile {
          border-color: #2260ff;
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
          color: #2260ff;
}

.checkbox-wrapper-16 .checkbox-input:checked+.checkbox-tile:before {
          transform: scale(1);
          opacity: 1;
          background-color: #2260ff;
          border-color: #2260ff;
}

.checkbox-wrapper-16 .checkbox-input:checked+.checkbox-tile .checkbox-label {
          color: #2260ff;
}

.checkbox-wrapper-16 .checkbox-input:focus+.checkbox-tile:before {
          transform: scale(1);
          opacity: 1;
}

.checkbox-wrapper-16 .checkbox-tile {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 5px;
          border-radius: 0.5rem;
          border: 2px solid #b5bfd9;
          background-color: #fff;
          transition: 0.15s ease;
          cursor: pointer;
          font-size: 10px;
}

.checkbox-wrapper-16 .checkbox-tile:hover {
          border-color: #2260ff;
}

.checkbox-wrapper-16 .checkbox-tile:hover:before {
          transform: scale(1);
          opacity: 1;
}

.checkbox-wrapper-16 .checkbox-label {
          color: #707070;
          transition: 0.375s ease;
          text-align: center;
          white-space: nowrap;
}

.selector-dropdown {
          display: inline-block;
          width: 100%;
          margin-bottom: 10px;
          background-color: #ffffff;
          border: 1px solid #d4e0ea;
          border-radius: 8px;
          transition: all 0.3s ease;
          font-size: 10px
}

/* ---------------------------------------------------------------- */
/* 2. استایل‌دهی به بخش عنوان (summary) */
/* ---------------------------------------------------------------- */

.selector-dropdown summary {
          display: flex;
          justify-content: space-between;
          /* محتوا و آیکون را از هم جدا می‌کند */
          align-items: center;
          padding: 12px 15px;
          font-weight: bold;
          cursor: pointer;
          list-style: none;
          /* حذف نشانگر پیش‌فرض مرورگر */
          outline: none;
          /* برای فوکوس */
          color: #333;
          border-radius: 8px;
}

/* افزودن آیکون فلش با استفاده از شبه عنصر ::after */
.selector-dropdown summary::after {
          content: '▼';
          /* آیکون فلش رو به پایین */
          font-size: 10px;
          transition: transform 0.2s;
}

/* چرخاندن آیکون فلش هنگام باز شدن */
.selector-dropdown[open] summary::after {
          transform: rotate(180deg);
          /* آیکون فلش رو به بالا */
}

/* ---------------------------------------------------------------- */
/* 3. استایل‌دهی به محتوای کشویی (Dropdown Content) */
/* ---------------------------------------------------------------- */

.dropdown-content {
          border-top: 1px solid #d4e0ea;
          padding: 10px 15px;
          /* اضافه کردن یک انیمیشن ساده برای نرمی باز شدن */
          animation: fadeIn 0.3s ease-in-out;
}

/* ---------------------------------------------------------------- */
/* 4. استایل‌دهی به گزینه‌های رادیویی */
/* ---------------------------------------------------------------- */

.filter-option {
          display: block;
          /* هر گزینه در یک خط جداگانه */
          padding: 8px 5px;
          margin-bottom: 5px;
          cursor: pointer;
          border-radius: 4px;
          transition: background-color 0.1s;
}

.filter-option:hover {
          background-color: #f6f9fc;
}

/* مخفی کردن رادیوباتن پیش‌فرض و استفاده از استایل سفارشی */
.filter-option input[type="radio"] {
          display: none;
}

/* استایل‌دهی به متنی که انتخاب شده است */
.filter-option input[type="radio"]:checked+span {
          font-weight: bold;
          color: #007bff;
}

/* ---------------------------------------------------------------- */
/* 5. محتوای زیرین (برای نمایش جابجایی) */
/* ---------------------------------------------------------------- */
.product-list {
          padding: 15px;
          background-color: #e0eaf3;
          border-radius: 8px;
}

/* انیمیشن برای باز شدن نرم محتوا */
@keyframes fadeIn {
          from {
                    opacity: 0;
                    transform: translateY(-10px);
          }

          to {
                    opacity: 1;
                    transform: translateY(0);
          }
}