/* VORTEX GROUP — BROWSE CSS */

/* ---------- شريط التحكم ---------- */
.bbar { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.bbar-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 150px auto; gap: 10px; align-items: center; }
.bbar-row input, .bbar-row select { margin: 0; }

.pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pills::-webkit-scrollbar { display: none; }
.pill { flex-shrink: 0; padding: 8px 18px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--vortex-white); font-size: 14px; font-weight: 800; cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition); }
.pill small { color: var(--vortex-gray); font-weight: 600; margin-inline-start: 4px; }
.pill:hover { border-color: rgba(19, 171, 210, 0.5); }
.pill.on { background: linear-gradient(135deg, var(--vortex-cyan-light), var(--vortex-cyan)); border-color: transparent; color: #041015; }
.pill.on small { color: rgba(4, 16, 21, 0.7); }

.seg { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.03); }
.seg button { padding: 8px 14px; border-radius: 6px; background: transparent; color: var(--vortex-gray); font-size: 13px; font-weight: 800; cursor: pointer; }
.seg button.on { background: rgba(19, 171, 210, 0.2); color: var(--vortex-cyan-light); }

/* ---------- القفز بين الأقسام ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-top: 16px; padding-bottom: 4px; }
.chips::-webkit-scrollbar { display: none; }
.chips:empty { display: none; }
.chip { flex-shrink: 0; padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 700; transition: border-color var(--transition), color var(--transition); }
.chip small { color: var(--vortex-gray); margin-inline-start: 4px; }
.chip:hover { color: var(--vortex-cyan-light); border-color: rgba(19, 171, 210, 0.5); }

.results-header { margin: 22px 0 6px; }
.results-side { display: flex; align-items: center; gap: 14px; }
.active-filter:empty { display: none; }
.active-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px 5px 14px; border-radius: 999px; background: rgba(19, 171, 210, 0.15); border: 1px solid rgba(118, 229, 253, 0.35); color: var(--vortex-cyan-light); font-size: 13px; font-weight: 800; }
.active-pill button { width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; line-height: 1; cursor: pointer; }

/* ---------- الأقسام (صفوف أفقية) ---------- */
.bsec { margin-top: 38px; scroll-margin-top: 100px; }
.bsec .section-head { margin-bottom: 14px; }
.bsec h2 { display: flex; align-items: center; gap: 10px; font-size: 22px; }
.bsec h2 small { color: var(--vortex-gray); font-size: 13px; font-weight: 600; }
.bcount { color: var(--vortex-gray); font-size: 12px; }
.linkbtn { background: transparent; color: var(--vortex-cyan-light); font-size: 13px; font-weight: 800; cursor: pointer; }
.linkbtn:hover { color: #fff; }

.rail { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(118, 229, 253, 0.35) transparent; }
.rail-item { flex: 0 0 158px; scroll-snap-align: start; }

.manga-tag { position: absolute; z-index: 2; top: 10px; right: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(8, 9, 11, 0.75); border: 1px solid rgba(118, 229, 253, 0.4); color: var(--vortex-cyan-light); font-size: 11px; font-weight: 800; backdrop-filter: blur(6px); }

.more-wrap { display: flex; justify-content: center; margin-top: 32px; }

/* ---------- Skeleton ---------- */
.skeleton { pointer-events: none; }
.skeleton .manga-cover, .sk-line { background: linear-gradient(100deg, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 70%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.sk-line { height: 12px; margin: 8px 0; border-radius: 6px; }
.sk-line.short { width: 55%; }
@keyframes shimmer { to { background-position: -200% 0; } }

@media (max-width: 1000px) {
    .bbar-row { grid-template-columns: 1fr 1fr; }
    .bbar-row input { grid-column: 1 / -1; }
    .seg { grid-column: 1 / -1; width: 100%; }
    .seg button { flex: 1; }
}

@media (max-width: 720px) {
    .rail-item { flex-basis: 132px; }
    .bsec h2 { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton .manga-cover, .sk-line { animation: none; }
}


/* ===== REFINEMENT ===== */
.bbar { border-radius: var(--radius-lg); background: var(--vortex-black-2); }
.pill { border-radius: 6px; font-weight: 600; font-size: 13.5px; padding: 8px 16px; }
.pill:hover { border-color: rgba(118, 229, 253, 0.45); }
.pill.on { background: var(--vortex-cyan); border-color: var(--vortex-cyan); color: #031116; }
.seg { border-radius: 8px; }
.seg button { font-weight: 600; border-radius: 5px; }
.seg button.on { background: rgba(19, 171, 210, 0.18); }
.chip { border-radius: 6px; font-weight: 500; }
.active-pill { border-radius: 6px; font-weight: 600; background: rgba(19, 171, 210, 0.12); }
.bsec h2 { font-size: 21px; font-weight: 700; }
.manga-tag { border-radius: 4px; background: rgba(7, 9, 12, 0.85); backdrop-filter: none; border: 1px solid var(--border-strong); font-weight: 600; }
.rail-item { flex-basis: 164px; }
.skeleton .manga-cover, .sk-line { background-color: rgba(255, 255, 255, 0.04); }