/* Shared list UI: filter bars, category tabs, active-filter pills, pagination (site + admin). */

/* ---------- pagination ---------- */
.pg-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1.5rem; }
.pg-info { margin: 0; color: var(--text-muted); font-size: 0.86rem; }
.pg { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.pg__num, .pg__step { display: inline-flex; align-items: center; justify-content: center; min-width: 2.35rem; height: 2.35rem; padding: 0 0.7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); text-decoration: none; font-size: 0.9rem; font-weight: 600; transition: border-color .15s, color .15s; }
.pg__num:hover, .pg__step:hover { border-color: var(--brand, #ef4056); color: var(--brand, #ef4056); }
.pg__num.is-active { background: var(--brand, #ef4056); border-color: var(--brand, #ef4056); color: #fff; }
.pg__step.is-disabled { opacity: 0.4; pointer-events: none; }
.pg__gap { padding: 0 0.2rem; color: var(--text-muted); }

/* ---------- tabs (category / status) with counts ---------- */
.lf-tabs { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.9rem; }
.lf-tabs a { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.38rem 0.85rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); text-decoration: none; font-size: 0.86rem; }
.lf-tabs a small { min-width: 1.4rem; padding: 0 0.35rem; border-radius: 999px; background: #f3f4f6; color: #4b5563; text-align: center; font-size: 0.75rem; }
.lf-tabs a:hover { border-color: var(--brand, #ef4056); }
.lf-tabs a.is-active { background: var(--text); border-color: var(--text); color: var(--surface); }
.lf-tabs a.is-active small { background: rgba(255, 255, 255, 0.2); color: inherit; }

/* ---------- filter bar (admin + compact public lists) ---------- */
.lf { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; margin-bottom: 1rem; padding: 0.85rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.lf label { display: grid; gap: 0.25rem; font-size: 0.78rem; color: var(--text-muted); }
.lf select, .lf input:not([type=checkbox]) { min-width: 7.5rem; font: inherit; font-size: 0.9rem; padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); }
.lf input[type=number], .lf .lf-num { width: 8rem; min-width: 0; }
.lf .lf-q { flex: 1 1 14rem; }
.lf .lf-q input { width: 100%; }
.lf .lf-check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.86rem; color: var(--text); padding-bottom: 0.45rem; }
.lf .btn { padding: 0.5rem 1rem; }

/* ---------- active filter pills ---------- */
.lf-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: -0.25rem 0 1rem; }
.lf-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.7rem; border-radius: 999px; background: rgba(239, 64, 86, 0.08); color: var(--brand, #ef4056); font-size: 0.8rem; text-decoration: none; }
.lf-pill span { font-size: 1rem; line-height: 1; }
.lf-pill--clear { background: none; color: var(--text-muted); text-decoration: underline; }

/* ---------- storefront: sidebar filters + sort bar ---------- */
.shop-layout { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.shop-filter { position: sticky; top: 1rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.shop-filter > summary { list-style: none; cursor: pointer; padding: 0.9rem 1rem; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.shop-filter > summary::-webkit-details-marker { display: none; }
.shop-filter > summary small { color: var(--brand, #ef4056); font-weight: 600; }
.shop-filter form { display: grid; gap: 1rem; padding: 0 1rem 1rem; }
.shop-filter h3 { margin: 0 0 0.45rem; font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }
.shop-filter .sf-search { position: relative; }
.shop-filter .sf-search input { width: 100%; padding: 0.6rem 2.3rem 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 10px; font: inherit; background: #f8f9fb; }
.shop-filter .sf-search svg { position: absolute; inset-inline-start: 0.7rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.sf-cats { display: grid; gap: 0.15rem; max-height: 24rem; overflow: auto; margin: 0; padding: 0; list-style: none; }
.sf-cats a { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.55rem; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 0.9rem; }
.sf-cats a small { color: var(--text-muted); }
.sf-cats a:hover { background: #f5f6f8; }
.sf-cats a.is-active { background: rgba(239, 64, 86, 0.08); color: var(--brand, #ef4056); font-weight: 700; }
.shop-filter select, .sf-select {
  width: 100%; appearance: none; -webkit-appearance: none; cursor: pointer;
  padding: 0.62rem 0.8rem 0.62rem 2.2rem; border: 1px solid var(--border); border-radius: 11px;
  font: inherit; font-size: 0.88rem; color: var(--text); background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%239ca3af' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 0.6rem center; background-size: 18px;
  transition: border-color .15s, box-shadow .15s;
}
.shop-filter select:hover, .sf-select:hover { border-color: color-mix(in srgb, var(--brand, #ef4056) 40%, var(--border)); }
.shop-filter select:focus, .sf-select:focus { outline: none; border-color: var(--brand, #ef4056); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #ef4056) 16%, transparent); }
.sf-price { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.sf-price label { display: grid; gap: 0.2rem; font-size: 0.76rem; color: var(--text-muted); }
.sf-price input { width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 9px; font: inherit; direction: ltr; text-align: right; }
.sf-switch { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0; font-size: 0.9rem; cursor: pointer; }
.sf-switch input { width: 2.4rem; height: 1.3rem; appearance: none; border-radius: 999px; background: #d1d5db; position: relative; cursor: pointer; transition: background .15s; flex: none; }
.sf-switch input::after { content: ""; position: absolute; top: 0.15rem; inset-inline-start: 0.15rem; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; transition: inset-inline-start .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.sf-switch input:checked { background: var(--brand, #ef4056); }
.sf-switch input:checked::after { inset-inline-start: 1.25rem; }
.sf-actions { display: flex; gap: 0.5rem; }
.sf-actions .btn { flex: 1; white-space: nowrap; padding-inline: 0.6rem; }

.shop-sortbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; padding: 0.65rem 0.9rem; margin-bottom: 1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); font-size: 0.88rem; }
.shop-sortbar__label { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text); font-weight: 700; }
.shop-sortbar nav { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; }
.shop-sortbar nav a { color: var(--text-muted); text-decoration: none; padding: 0.2rem 0; border-bottom: 2px solid transparent; }
.shop-sortbar nav a:hover { color: var(--text); }
.shop-sortbar nav a.is-active { color: var(--brand, #ef4056); border-bottom-color: var(--brand, #ef4056); font-weight: 700; }
.shop-sortbar__count { margin-inline-start: auto; color: var(--text-muted); }

@media (max-width: 900px) {
  .shop-layout { grid-template-columns: 1fr; }
  .shop-filter { position: static; }
  .shop-sortbar__count { margin-inline-start: 0; width: 100%; }
}

/* ---------- admin list extras ---------- */
.lf-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; background: #f3f4f6; display: block; }
.lf-flag { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: #f3f4f6; color: #374151; margin-inline-end: 0.2rem; white-space: nowrap; }
.lf-flag--on { background: #dcfce7; color: #166534; }
.lf-flag--off { background: #fee2e2; color: #991b1b; }
.lf-flag--gold { background: #fef3c7; color: #92400e; }
.lf-flag--warn { background: #ffedd5; color: #9a3412; }
.lf-sortable a { color: inherit; text-decoration: none; }
.lf-sortable a.is-active { color: var(--brand, #ef4056); }

/* Learn articles grid */
.learn-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.learn-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: 0 10px 30px -22px rgba(15, 23, 42, 0.45); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s; }
.learn-card:hover { transform: translateY(-4px); border-color: rgba(99, 102, 241, 0.35); box-shadow: 0 22px 44px -24px rgba(79, 70, 229, 0.45); }
.learn-card__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #0B0D12, #1e1b4b); }
.learn-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.learn-card:hover .learn-card__media img { transform: scale(1.05); }
.learn-card__ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(165, 180, 252, 0.85); }
.learn-card__ph svg { width: 3.2rem; height: 3.2rem; }
.learn-card__platform { position: absolute; top: 0.7rem; inset-inline-start: 0.7rem; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; color: #fff; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.2); }
.learn-card__body { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; padding: 1rem 1.1rem 1.15rem; }
.learn-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.8rem; font-size: 0.76rem; color: var(--text-muted); }
.learn-card__tag { padding: 0.05rem 0.5rem; border-radius: 999px; background: rgba(99, 102, 241, 0.1); color: #4f46e5; font-weight: 700; }
.learn-card h2 { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.learn-card h2 a { color: var(--text); text-decoration: none; }
.learn-card h2 a:hover { color: var(--brand); }
.learn-card__body p { margin: 0; flex: 1; color: var(--text-muted); font-size: 0.88rem; line-height: 1.9; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.learn-card__more { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.25rem; padding: 0.45rem 1rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700; color: #fff; text-decoration: none; background: linear-gradient(135deg, #4F46E5, #0EA5A4); box-shadow: 0 10px 22px -12px rgba(79, 70, 229, 0.9); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.learn-card__more:hover { color: #fff; transform: translateX(-3px); box-shadow: 0 14px 28px -12px rgba(79, 70, 229, 1); }