/* ============================================================
   listing.css - Styles for pages/shop/listing.html
   ============================================================ */

/* ─── چیدمان کلی: سایدبار چپ + محتوا راست ─── */
    .page-wrap {
      display: grid;
      /* باگ ۱ Fix: سایدبار fixed width، محتوا 1fr — overflow:hidden جلو میگیره */
      grid-template-columns: 260px 1fr;
      gap: 2rem;
      max-width: 1200px;
      margin: 2rem auto;
      padding: 0 2rem;
      align-items: start; /* مهم: سایدبار و محتوا از بالا شروع کنند */
    }

    /* ─── سایدبار ─── */
    .sidebar {
      /* باگ ۱ Fix: min-width و overflow جلو از سرریز را می‌گیرد */
      min-width: 0;
      width: 100%;
      position: sticky;
      top: 76px;
      /* z-index پایین‌تر از مگامنو navbar */
      z-index: 10;
    }

    .sb-card {
      background: var(--dark2);
      border: 1px solid var(--dark4);
      border-radius: var(--r-lg);
      padding: 1.3rem;
      margin-bottom: 1rem;
      /* باگ ۱ Fix: محتوا از کارت خارج نشود */
      overflow: hidden;
      word-break: break-word;
    }

    .sb-title {
      font-size: .9rem; font-weight: 700; color: var(--gold);
      margin-bottom: 1rem; padding-bottom: .7rem;
      border-bottom: 1px solid var(--dark4);
    }

    .sb-group { margin-bottom: 1.2rem; }
    .sb-group:last-of-type { margin-bottom: 0; }

    .sb-group h4 {
      font-size: .78rem; color: var(--text-faint); margin-bottom: .6rem;
      font-weight: 500; text-transform: uppercase; letter-spacing: .5px;
    }

    .sb-item {
      display: flex; align-items: center; gap: 8px;
      padding: .32rem 0; font-size: .88rem; cursor: pointer; transition: color .15s;
    }
    .sb-item:hover { color: var(--gold); }
    .sb-item input[type=checkbox],
    .sb-item input[type=radio] { accent-color: var(--gold); width: 15px; height: 15px; flex-shrink: 0; }
    .sb-count { margin-right: auto; font-size: .72rem; color: var(--text-faint); }

    /* ─── باگ ۱ Fix: فیلد قیمت — width:100% بدون overflow ─── */
    .price-row {
      display: flex;
      gap: .5rem;
      width: 100%; /* پر کردن عرض کامل سایدبار */
    }

    .price-inp {
      /* باگ ۱ Fix: min-width:0 مهم‌ترین fix برای flex children */
      flex: 1;
      min-width: 0;
      background: var(--dark3);
      border: 1px solid var(--dark4);
      color: var(--text);
      border-radius: 8px;
      padding: .45rem .6rem;
      font-family: 'Vazirmatn', sans-serif;
      font-size: .82rem;
      text-align: center;
      direction: ltr;
      width: 100%;
    }
    .price-inp:focus { outline: none; border-color: var(--gold); }

    /* مخفی کردن فلش‌های number input */
    .price-inp::-webkit-inner-spin-button,
    .price-inp::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
    .price-inp[type=number] { -moz-appearance: textfield; }

    /* ستاره‌های فیلتر */
    .star-opts { display: flex; flex-direction: column; gap: .3rem; }
    .star-opt { display: flex; align-items: center; gap: 6px; font-size: .85rem; cursor: pointer; padding: .25rem 0; }
    .star-opt input { accent-color: var(--gold); flex-shrink: 0; }

    /* ─── ناحیه اصلی محصولات ─── */
    .main-area { min-width: 0; } /* باگ ۱ Fix */

    .list-top {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 1rem; gap: 1rem; flex-wrap: wrap;
    }

    .result-info { font-size: .85rem; color: var(--text-muted); }
    .result-info strong { color: var(--text); }
    .top-right { display: flex; gap: .5rem; align-items: center; }

    .sort-sel {
      background: var(--dark2); border: 1px solid var(--dark4);
      color: var(--text); border-radius: 10px; padding: .45rem .9rem;
      font-family: 'Vazirmatn', sans-serif; font-size: .85rem; cursor: pointer;
    }
    .sort-sel:focus { outline: none; border-color: var(--gold); }

    /* ─── باگ ۲ Fix: دکمه‌های گرید/لیست — ترتیب درست RTL ─── */
    .view-btns {
      display: flex;
      /* در RTL border-radius باید برعکس باشد */
      direction: ltr; /* مهم: داخل RTL container، لیست را LTR نگه می‌داریم */
    }

    .view-btn {
      background: var(--dark2); border: 1px solid var(--dark4);
      color: var(--text-muted); padding: .4rem .8rem;
      font-size: 1rem; cursor: pointer; transition: all .15s;
      line-height: 1;
    }

    /* باگ ۲ Fix: border-radius درست در LTR direction */
    .view-btn:first-child { border-radius: 8px 0 0 8px; }
    .view-btn:last-child  { border-radius: 0 8px 8px 0; }
    .view-btn.active      { background: var(--dark3); color: var(--gold); border-color: var(--gold); }
    .view-btn:hover:not(.active) { background: var(--dark3); color: var(--text); }

    /* چیپ‌های فیلتر فعال */
    .active-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; min-height: 0; }
    .chip {
      background: rgba(200,169,110,.14); border: 1px solid rgba(200,169,110,.3);
      color: var(--gold); padding: 3px 10px; border-radius: 20px; font-size: .77rem;
      display: flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap;
    }
    .chip:hover { background: rgba(200,169,110,.25); }

    /* ─── حالت لیست (نمایش افقی) ─── */
    .list-view { display: flex !important; flex-direction: column; gap: .8rem; }

    .list-view .product-card {
      flex-direction: row !important;
      height: auto !important;
      min-height: 100px;
    }

    .list-view .product-card .pc-img {
      width: 100px;
      min-width: 100px;
      height: 100px;
      font-size: 2.5rem;
      flex-shrink: 0;
      aspect-ratio: auto !important;
    }

    .list-view .product-card .pc-body {
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
      gap: .5rem;
    }

    .list-view .product-card .pc-footer {
      margin-top: 0;
      margin-right: auto;
      flex-direction: column;
      align-items: flex-end;
      gap: .4rem;
    }

    /* پیجینیشن */
    .pagination { display: flex; justify-content: center; gap: .4rem; margin-top: 2.5rem; flex-wrap: wrap; }
    .page-btn {
      background: var(--dark2); border: 1px solid var(--dark4); color: var(--text);
      width: 38px; height: 38px; border-radius: 9px; cursor: pointer;
      font-family: 'Vazirmatn', sans-serif; font-size: .88rem;
      display: flex; align-items: center; justify-content: center; transition: all .15s;
    }
    .page-btn:hover, .page-btn.active { background: var(--gold); color: var(--dark); border-color: var(--gold); }

    /* ریسپانسیو */
    @media (max-width: 900px) {
      .page-wrap { grid-template-columns: 220px 1fr; gap: 1.2rem; }
    }
    @media (max-width: 768px) {
      .page-wrap { grid-template-columns: 1fr; }
      .sidebar { position: static; }
    }