/* ============================================================
   روشن پلی — استایل تکمیلی (ویوهای صفحات، پنل، جداول، FAQ)
   این فایل بعد از app.css و pages.css بارگذاری می‌شود.
   ============================================================ */

/* ---------------- عمومی ---------------- */
.section { padding-block: 44px; }
.section--tight { padding-block: 24px; }
.center { text-align: center; }
.mb-0 { margin-bottom: 0 !important; }
.small { font-size: .82rem; }
.muted-2 { color: var(--muted-2); }
.t-pos { color: #6ee7b7; white-space: nowrap; }
.t-neg { color: #fca5a5; white-space: nowrap; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  background: rgba(124, 92, 255, .14); border: 1px solid rgba(124, 92, 255, .28);
  color: #cfd8f0; font-size: .76rem;
}
.chip.is-active { background: var(--grad); color: #0a0f22; border-color: transparent; font-weight: 700; }
.chip--ghost { background: #0d1428; border-color: var(--line-2); }
.ordered { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ordered li {
  counter-increment: step; position: relative; padding: 10px 46px 10px 14px; border-radius: 12px;
  background: #0b1126; border: 1px solid var(--line); font-size: .86rem; color: #c7d1ea;
}
.ordered li::before {
  content: counter(step); position: absolute; inset-inline-start: 12px; top: 10px;
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad); color: #080c1c; font-size: .76rem; font-weight: 700;
}
.trust-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 7px; }
.trust-list li { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); }
.trust-list .icon { color: var(--green); flex: 0 0 auto; }
.form-note { font-size: .76rem; color: var(--muted-2); margin: 10px 0 0; }
.card__sub { font-size: .92rem; color: var(--muted); margin: 0 0 10px; }
.row--between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.check { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: #c3cde6; padding: 7px 0; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--violet); }

/* ---------------- هدر فروشگاه ---------------- */
.shop-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin: 14px 0 22px; }
.shop-head h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 6px 0 6px; }
.shop-head .lead { max-width: 720px; margin: 0; color: var(--muted); font-size: .9rem; }
.shop-layout { display: grid; grid-template-columns: 258px 1fr; gap: 22px; align-items: start; margin-bottom: 50px; }
.shop-side { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 3px; padding: 16px; }
.shop-side__title { font-size: .92rem; margin: 0 0 8px; color: var(--muted); }
.shop-side__link {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 11px;
  font-size: .85rem; color: #c3cde6; border: 1px solid transparent;
}
.shop-side__link:hover { background: var(--panel-2); color: #fff; }
.shop-side__link.is-active { background: rgba(124, 92, 255, .16); border-color: rgba(124, 92, 255, .32); color: #fff; }
.shop-side__link .icon { color: var(--muted); }
.shop-side__link.is-active .icon { color: var(--violet-2); }
.shop-side__box {
  margin-top: 14px; padding: 14px; border-radius: 14px; border: 1px dashed var(--line-2);
  background: #0a1024; display: grid; gap: 8px;
}
.shop-side__box strong { font-size: .86rem; }
.shop-main { min-width: 0; }
.cat-banner {
  display: flex; align-items: center; gap: 16px; padding: 14px 18px; margin-bottom: 16px;
  border-radius: var(--radius); border: 1px solid var(--line-2);
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent, #7C5CFF) 22%, transparent), #0b1024 70%);
}
.cat-banner img { width: 150px; height: 96px; object-fit: cover; border-radius: 12px; }
.cat-banner h2 { margin: 0 0 4px; font-size: 1.1rem; }
.cat-banner p { margin: 0; font-size: .82rem; }
.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filters--wide { margin-bottom: 20px; }
.filters__form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filters__search {
  display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px;
  border: 1px solid var(--line-2); background: #0b1126; min-width: 260px;
}
.filters__search input { border: 0; background: transparent; padding: 10px 0; width: 100%; color: var(--text); font-family: inherit; font-size: .86rem; outline: none; }
.filters__search .icon { color: var(--muted); }
.filters select, .inline-form select, .inline-form input {
  padding: 9px 12px; border-radius: 11px; border: 1px solid var(--line-2);
  background: #0b1126; color: var(--text); font-family: inherit; font-size: .84rem;
}
.inline-form { display: inline-flex; align-items: center; gap: 8px; }

/* ---------------- صفحه محصول ---------------- */
.product-body { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; margin-top: 26px; }
.product-side { display: grid; gap: 14px; }
.buy-form { display: grid; gap: 12px; }
.plan__price small { font-size: .68rem; font-weight: 400; color: var(--muted); }
.plan__label { font-size: .86rem; }
.product-cover { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.product-cover img { width: 100%; display: block; aspect-ratio: 16/10; object-fit: cover; }
.buybox__price { font-size: 1.5rem; font-weight: 700; margin: 10px 0 12px; }
.buybox__price .price-old { font-size: .9rem; }
.tabs__nav { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tab-btn { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); padding: 10px 14px; font-family: inherit; font-size: .87rem; cursor: pointer; }
.tab-btn.is-active { color: #fff; border-bottom-color: var(--violet-2); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }
.review-list { display: grid; gap: 12px; }
.review__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.review__head small { margin-inline-start: auto; }
.review__avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #080c1c; font-weight: 700; }
.stars { display: inline-flex; align-items: center; gap: 2px; font-size: .82rem; }
.stars .is-on { color: var(--gold); }
.stars .is-off { color: #37415f; }
.feature-list--2 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ---------------- بازار اکانت ---------------- */
.escrow-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px;
  padding: 14px; border-radius: var(--radius); border: 1px solid var(--line-2);
  background: linear-gradient(120deg, rgba(52, 211, 153, .1), rgba(124, 92, 255, .1)); margin-bottom: 18px;
}
.escrow-strip__item { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: #cfd8f0; }
.escrow-strip__item .icon { color: var(--green); flex: 0 0 auto; }
.escrow-box { margin-top: 14px; padding: 14px; border-radius: 13px; background: #0a1024; border: 1px dashed var(--line-2); }
.escrow-box strong { display: flex; align-items: center; gap: 6px; font-size: .86rem; margin-bottom: 6px; color: #b7f7dd; }
.escrow-box ul { margin: 0; padding-inline-start: 18px; font-size: .8rem; color: var(--muted); line-height: 1.9; }
.listing-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 14px; }
.listing-specs__item { padding: 10px 12px; border-radius: 11px; background: #0b1126; border: 1px solid var(--line); }
.listing-specs__item span { display: block; font-size: .72rem; color: var(--muted-2); }
.listing-specs__item strong { font-size: .84rem; }

/* ---------------- سبد و تسویه ---------------- */
.checkout-grid { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; }
.summary { display: grid; gap: 6px; }
.summary__row { display: flex; justify-content: space-between; gap: 10px; font-size: .86rem; padding: 7px 0; border-bottom: 1px dashed rgba(33, 42, 74, .8); }
.summary__row span { color: var(--muted); }
.summary__row--off strong { color: var(--green); }
.summary__row--total { border-bottom: 0; border-top: 1px solid var(--line-2); margin-top: 6px; padding-top: 12px; font-size: 1rem; }
.summary__row--total strong { color: #fff; }
.mini-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed rgba(33, 42, 74, .7); font-size: .86rem; }
.mini-item:last-child { border-bottom: 0; }
.mini-item img { border-radius: 9px; object-fit: cover; }
.mini-item > div { flex: 1; min-width: 0; }
.mini-item strong { display: block; font-size: .85rem; font-weight: 500; }
.mini-item small { display: block; }
.mini-item span { white-space: nowrap; font-size: .82rem; }
.card-info { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: #0a1024; border: 1px dashed var(--line-2); margin-bottom: 10px; }
.card-info__row { display: flex; justify-content: space-between; font-size: .84rem; }
.card-info__row span { color: var(--muted); }
.coupon-form { display: flex; gap: 8px; margin: 8px 0; }
.coupon-form input { flex: 1; padding: 9px 12px; border-radius: 11px; border: 1px solid var(--line-2); background: #0b1126; color: var(--text); font-family: inherit; font-size: .85rem; }
.cart-line { display: grid; grid-template-columns: 108px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px dashed rgba(33, 42, 74, .8); align-items: center; }
.cart-line:last-child { border-bottom: 0; }
.cart-line__img img { width: 108px; height: 78px; object-fit: cover; border-radius: 11px; }
.cart-line__title { font-size: .93rem; margin: 0 0 3px; }
.cart-line__side { display: grid; gap: 8px; justify-items: end; }
.cart-line__remove { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; color: #fca5a5; font-family: inherit; font-size: .78rem; cursor: pointer; }

/* ---------------- FAQ / آکاردئون ---------------- */
.faq { display: grid; gap: 8px; }
.faq__item { border: 1px solid var(--line); border-radius: 13px; background: var(--panel); overflow: hidden; }
.faq__item[open] { border-color: var(--line-2); background: #0b1126; }
.faq__item summary {
  cursor: pointer; padding: 13px 16px; font-size: .88rem; font-weight: 500; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; color: var(--violet-2); font-size: 1.1rem; }
.faq__item[open] summary::after { content: '−'; }
.faq__item p { margin: 0; padding: 0 16px 14px; font-size: .84rem; color: var(--muted); }

/* ---------------- جداول ---------------- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 10px 10px; text-align: right; border-bottom: 1px solid rgba(33, 42, 74, .75); vertical-align: middle; }
.table th { font-size: .75rem; color: var(--muted-2); font-weight: 500; letter-spacing: .02em; }
.table td { font-size: .84rem; }
.table tbody tr:hover { background: rgba(124, 92, 255, .05); }
.table--tight th, .table--tight td { padding: 7px 8px; font-size: .8rem; }
.table a { color: var(--violet-2); }

/* ---------------- پنل مدیریت ---------------- */
.admin-body { background: #060912; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; align-items: start; }
.admin-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.admin-crumbs { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--muted); }
.admin-crumbs a { color: var(--muted-2); }
.t-actions { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.t-actions form { display: inline-flex; gap: 4px; align-items: center; }
.t-actions .btn { padding: 5px 9px; font-size: .76rem; }
.seo-score { display: grid; grid-template-columns: 130px 1fr; gap: 18px; align-items: center; }
.seo-score__ring {
  width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--violet) calc(var(--p, 0) * 1%), #131b38 0);
  position: relative;
}
.seo-score__ring::after { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: #0b1024; }
.seo-score__ring span { position: relative; z-index: 1; font-size: 1.5rem; font-weight: 700; }
.seo-score__ring small { font-size: .8rem; }
.audit-item { display: flex; gap: 9px; padding: 9px 0; border-bottom: 1px dashed rgba(33, 42, 74, .7); }
.audit-item:last-child { border-bottom: 0; }
.dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 8px; flex: 0 0 auto; }
.dot--ok { background: var(--green); box-shadow: 0 0 0 3px rgba(52, 211, 153, .15); }
.dot--warn { background: var(--gold); box-shadow: 0 0 0 3px rgba(255, 200, 87, .15); }
.dot--bad { background: var(--red); box-shadow: 0 0 0 3px rgba(248, 113, 113, .15); }
.msg-item, .log-item { border: 1px solid var(--line); border-radius: 12px; padding: 10px 13px; margin-bottom: 8px; background: #0a1024; }
.msg-item summary, .log-item summary { cursor: pointer; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; list-style: none; }
.msg-item summary::-webkit-details-marker, .log-item summary::-webkit-details-marker { display: none; }
.msg-body { padding-top: 10px; }
.code { background: #060a18; border: 1px solid var(--line); border-radius: 9px; padding: 10px; font-size: .74rem; overflow-x: auto; white-space: pre-wrap; word-break: break-all; color: #9fb0d0; }
.review-toggle summary { cursor: pointer; font-size: .8rem; color: var(--violet-2); }
.review-form { margin-top: 10px; padding: 12px; border-radius: 12px; background: #0a1024; border: 1px solid var(--line); }
.review-form .form-grid { margin-top: 8px; }

/* ---------------- کدهای وضعیت ---------------- */
.badge--info { background: rgba(96, 165, 250, .16); color: #93c5fd; border: 1px solid rgba(96, 165, 250, .3); }

/* ---------------- ریسپانسیو ---------------- */
@media (max-width: 1024px) {
  .shop-layout { grid-template-columns: 1fr; }
  .shop-side { position: static; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .shop-side__title, .shop-side__box { grid-column: 1 / -1; }
  .product-body, .checkout-grid { grid-template-columns: 1fr; }
  .cart-line { grid-template-columns: 84px 1fr; }
  .cart-line__side { grid-column: 1 / -1; justify-items: stretch; }
  .cart-line__img img { width: 84px; height: 64px; }
}
@media (max-width: 640px) {
  .shop-head { flex-direction: column; align-items: flex-start; }
  .filters__search { min-width: 100%; }
  .seo-score { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .table th, .table td { padding: 8px 6px; font-size: .76rem; }
  .section { padding-block: 30px; }
}

/* ---------------- کارت محصول: چیدمان قیمت و دکمه ---------------- */
.product-card__foot { flex-wrap: wrap; align-items: center; gap: 8px; }
.product-card__foot .product-card__price { flex: 1 1 100%; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.product-card__foot form { flex: 1 1 100%; }
.product-card__foot .btn { width: 100%; justify-content: center; }
.product-grid { align-items: stretch; }

/* ---------------- نوار فیلتر فروشگاه ---------------- */
.shop-toolbar {
  display: flex; justify-content: flex-end; margin-bottom: 18px;
  padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: #0a1024;
}
.shop-toolbar .filters__form { width: 100%; justify-content: flex-end; }
.shop-toolbar .filters__search { flex: 1 1 260px; max-width: 420px; }
@media (max-width: 640px) {
  .shop-toolbar .filters__form { justify-content: stretch; }
  .shop-toolbar .filters__search { max-width: none; flex-basis: 100%; }
}

/* ---------------- رفع چیدمان فیلترها ---------------- */
.filters__form { align-items: center; }
.filters__form select { min-width: 170px; max-width: 220px; }
.filters--wide .filters__form { width: 100%; }
.filters--wide .filters__search { flex: 1 1 320px; max-width: 460px; }
@media (max-width: 640px) {
  .filters__form { width: 100%; }
  .filters__form select, .filters__search { max-width: none; flex-basis: 100%; }
}

/* ستون عریض در گرید پنل مدیریت */
.admin-grid .span-2 { grid-column: span 2; }
@media (max-width: 1100px) { .admin-grid .span-2 { grid-column: auto; } }

/* ---------------- کارت آگهی: تصویر بالای کارت ---------------- */
.listing-card__top {
  position: relative; display: block; padding: 0; aspect-ratio: 16 / 10; overflow: hidden; background: #0a0f22;
}
.listing-card__top img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.listing-card:hover .listing-card__top img { transform: scale(1.04); }
.listing-card__top .listing-card__game {
  position: absolute; top: 10px; right: 10px; backdrop-filter: blur(8px);
  background: rgba(6, 12, 26, .72); border-color: rgba(34, 211, 238, .35);
}
.listing-card__top .badge { position: absolute; top: 10px; left: 10px; }
.listing-card__foot .price { font-size: .92rem; }

/* ---------------- پدینگ کارت محصول ---------------- */
.product-card__foot { padding: 4px 17px 16px; margin-top: 0; }
.product-card__body { padding-bottom: 8px; }

/* ---------------- نشان‌های کارت محصول ---------------- */
.pc-badges {
  position: absolute; top: 10px; inset-inline-start: 10px;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start; z-index: 2;
}
.pc-badges .badge { position: static; }
.product-card__body .product-card__tags {
  position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 2px;
}
.product-card__body .product-card__tags .chip { font-size: .7rem; padding: 3px 9px; }

/* ---------------- روش پرداخت ---------------- */
.pay-method.is-selected { border-color: var(--violet); background: linear-gradient(150deg, rgba(124,92,255,.14), rgba(34,211,238,.05)); box-shadow: 0 0 0 1px rgba(124,92,255,.35) inset; }
.pay-method__extra[hidden] { display: none !important; }
.pay-method__extra.is-open { display: block; }

/* ---------------- شبکه فیلدهای فرم ---------------- */
.form-card .form-grid,
.review-form .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  align-items: start;
}
.form-card .form-grid .field--full,
.review-form .form-grid .field--full { grid-column: 1 / -1; }
.form-card .field { margin-bottom: 14px; }
.form-card .field textarea { min-height: 84px; resize: vertical; }
@media (max-width: 760px) {
  .form-card .form-grid, .review-form .form-grid { grid-template-columns: 1fr; }
}

/* ---------------- چیدمان فرم‌های دو ستونی پنل ---------------- */
.admin-grid.form-split { grid-template-columns: 1.15fr .85fr; align-items: start; }
@media (max-width: 1100px) { .admin-grid.form-split { grid-template-columns: 1fr; } }

/* ---------------- تکمیلی: هیرو و حالت‌های خالی ---------------- */
.empty--sm { padding: 22px 14px; }
.empty--sm .icon { width: 34px; height: 34px; color: var(--muted-2); margin-bottom: 8px; }
.wallet-hero__side { display: grid; gap: 8px; align-content: center; }
.bonus-math { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.bonus-math > div { padding: 9px 11px; border-radius: 12px; background: #0a1024; border: 1px solid var(--line); }
.bonus-math span { display: block; font-size: .72rem; color: var(--muted); }
.bonus-math strong { font-size: 1rem; }
.bonus-math .is-hi { border-color: rgba(255, 200, 87, .45); background: rgba(255, 200, 87, .1); }
.bonus-math .is-hi strong { color: var(--gold); }
.sell-calc__bonus strong { color: var(--gold); }