/* ══════════════════════════════════════════════════════════════════
   VORBINDER — binder.css  v1.3
   Styles specific to /binder/@username/ pages.
   Reuses .sp-*, .mkp-*, .ca-* from marketplace.css (loaded as dep).
   ══════════════════════════════════════════════════════════════════ */

/* ── Reset GeneratePress container padding (prevents double-spacing) ─ */
body.page-template-page-binder .site-content,
body.page-template-page-binder #content,
body.page-template-page-binder .entry-content,
body.page-template-page-binder .site-main,
body.page-template-page-binder .inside-article,
body.page-template-page-binder article,
body.page-template-page-binder .grid-container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* ── Page wrapper ────────────────────────────────────────────────── */
/* Header is position:sticky (in normal flow, 70px tall) — no padding-top needed */
.v-wrapper.binder-page {
    --header-height: 70px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px 60px;
}

/* ── Toolbar: stats side ─────────────────────────────────────────── */
.bn-col-title {
    font-size: 16px; font-weight: 900; color: #0f172a;
}
.bn-col-count-badge {
    background: #f1f5f9; border: 1px solid #e2e8f0; color: #475569;
    font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
    margin-left: 6px;
}
.bn-set-clear {
    display: inline-flex; align-items: center; gap: 4px;
    background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8;
    font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px;
    margin-left: 8px; text-decoration: none; transition: .15s;
}
.bn-set-clear:hover { background: #dbeafe; }

/* ── Filter group structure (matches my-collection style) ────────── */
.control-group {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}
.control-label {
    font-size: 10px; text-transform: uppercase;
    font-weight: 800; color: #94a3b8; letter-spacing: 0.5px;
    white-space: nowrap;
}
.control-group--actions { align-self: stretch; }

/* ── CSV + Clear buttons ─────────────────────────────────────────── */
.bn-csv-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: #f0fdf4; border: 1px solid #86efac; color: #15803d;
    padding: 7px 10px; border-radius: 8px; font-size: 12px; font-weight: 700;
    text-decoration: none; white-space: nowrap; transition: .15s;
    flex: 0 0 auto;
}
.bn-csv-btn:hover { background: #dcfce7; border-color: #4ade80; }
.bn-clear-btn {
    flex: 0 0 auto;
    background: #f8fafc; border: 1px solid #cbd5e1; color: #64748b;
    padding: 7px 10px; border-radius: 8px; font-size: 12px; font-weight: 700;
    cursor: pointer; transition: .15s; white-space: nowrap;
}
.bn-clear-btn:hover { background: #e2e8f0; color: #334155; }

/* ── "Edit profile" CTA button (self view) ───────────────────────── */
.sp-btn-edit {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all .15s;
    white-space: nowrap;
}
.sp-btn-edit:hover {
    border-color: #6366f1;
    color: #6366f1;
    background: #eff0fe;
}

/* ── Display name under username ─────────────────────────────────── */
.bn-display-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--v-text-sub, #64748b);
    margin-left: 6px;
}

/* ── NPS score badge in the user info meta row ────────────────────── */
.sp-nps { font-size: 12px; font-weight: 800; text-decoration: none; }
.sp-nps:hover { text-decoration: underline; }
.sp-nps-count { font-weight: 600; color: #94a3b8; }

/* ── Unread badge on Alerts tab ──────────────────────────────────── */
.ca-tab-cnt.bn-unread {
    background: #ef4444;
    color: #fff;
    border-radius: 10px;
    padding: 2px 6px;
}

/* ── Collection toolbar ──────────────────────────────────────────── */
.bn-col-toolbar {
    display: flex !important;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: var(--header-height, 70px);
    z-index: 200;
    margin: 0 -20px;
    padding: 10px 20px;
    overflow-x: auto;
}
.bn-col-stats {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
    flex-shrink: 0;
}
.bn-col-controls {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Filter selects in toolbar ───────────────────────────────────── */
.control-select {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 12px !important;
    font-weight: 600;
    color: #0f172a;
    background: #fff;
    cursor: pointer;
    outline: none;
    transition: .15s;
    box-shadow: none !important;
}
.control-select:focus { border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgba(99,102,241,.1) !important; }

/* ── Grid/List view toggle ───────────────────────────────────────── */
.col-view-toggle {
    display: flex !important;
    gap: 2px;
    background: #e2e8f0;
    border-radius: 8px;
    padding: 3px;
    border: 1px solid #cbd5e1;
}
.vtoggle-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 26px;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: #475569;
    cursor: pointer;
    transition: background .15s, color .15s;
    padding: 0;
    line-height: 1;
}
.vtoggle-btn:hover  { background: #cbd5e1 !important; color: #1e293b !important; }
.vtoggle-btn.active { background: #fff !important; color: #6366f1 !important; box-shadow: 0 1px 4px rgba(0,0,0,.15); }

/* ── Export button ───────────────────────────────────────────────── */
.bn-export-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 8px;
    border-radius: 7px;
    border: 1px solid #e2e8f0;
    color: #64748b;
    text-decoration: none;
    transition: all .15s;
}
.bn-export-btn:hover { border-color: #6366f1; color: #6366f1; }

/* ── For Sale grid: override marketplace.css to match Collection grid ── */
.binder-page .mkp-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

/* ══ COLLECTOR CARD GRID ═════════════════════════════════════════════
   Ported from my-collection.css for self-owner grid view.
   ══════════════════════════════════════════════════════════════════ */
.bn-album-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    padding: 16px 0;
}
.collector-card {
    position: relative;
    transition: .25s ease;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.05);
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}
.collector-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px -5px rgba(0,0,0,.1);
    border-color: #cbd5e1;
    z-index: 10;
}
.card-visual-wrapper {
    position: relative;
    display: block;
    aspect-ratio: 0.715;
    background: #f1f5f9;
    text-decoration: none;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
}
.card-img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; display: block; }
.card-actions { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }

/* ══ EMPTY STATE — Binder vazio (explica o Binder + CTA de adicionar carta) ══ */
.bn-empty-state { padding: 24px 0 40px; max-width: 480px; margin: 0 auto; text-align: center; }
.bn-empty-intro { margin-bottom: 24px; }
.bn-empty-intro h3 { font-size: 18px; font-weight: 800; color: #0f172a; margin: 0 0 10px; }
.bn-empty-intro p { font-size: 13px; color: #64748b; line-height: 1.7; margin: 0; }
.bn-empty-intro strong { color: #475569; }
.bn-empty-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    width: 100%; max-width: 220px; margin: 0 auto;
    aspect-ratio: 0.715;
    border: 2px dashed #c7d2fe; border-radius: 14px;
    background: #f5f6ff;
    text-decoration: none; transition: .2s ease; box-sizing: border-box; padding: 20px;
}
.bn-empty-card:hover { border-color: #6366f1; background: #eef2ff; transform: translateY(-2px); }
.bn-empty-card-visual {
    width: 48px; height: 48px; border-radius: 50%; background: #e0e7ff; color: #6366f1;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bn-empty-card-title { font-size: 13px; font-weight: 800; color: #1e1b4b; line-height: 1.4; }
.bn-empty-card-sub { font-size: 11px; font-weight: 700; color: #6366f1; }

.vc-info-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.vc-card-name {
    font-size: 11px; font-weight: 600; color: #0f172a; line-height: 1.4;
    flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vc-flag { font-size: 13px; flex-shrink: 0; line-height: 1; padding-top: 1px; }

.vc-info-footer { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.vc-qty-pill {
    background: #f1f5f9; border: 1px solid #e2e8f0; color: #475569;
    padding: 3px 6px; border-radius: 6px; font-size: 10px; font-weight: 800; flex-shrink: 0;
}
.vc-status-pill { padding: 3px 6px; border-radius: 6px; font-size: 10px; font-weight: 800; flex-shrink: 0; border: 1px solid transparent; }
.vc-status-pill.in-mkt { background: #dcfce7; border-color: #86efac; color: #15803d; }

.btn-market-action {
    flex: 1; background: #f8fafc; color: #64748b; padding: 5px 8px;
    border-radius: 6px; font-size: 10px; font-weight: 800; cursor: pointer;
    text-transform: uppercase; transition: .2s; border: 1px solid #e2e8f0; white-space: nowrap;
}
.btn-market-action:hover  { background: #e2e8f0; color: #334155; }
.btn-market-action.active { background: #eff6ff; color: #6366f1; border-color: #c7d2fe; }

/* Qty controls */
.vc-qty-controls { display: flex; align-items: center; gap: 3px; }
.vc-qty-btn {
    width: 22px; height: 22px; border-radius: 6px; border: 1px solid #e2e8f0;
    background: #f8fafc; color: #475569; font-size: 14px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    line-height: 1; padding: 0; transition: .15s; flex-shrink: 0;
}
.vc-qty-btn.minus:hover { background: #fee2e2; border-color: #fecaca; color: #ef4444; }
.vc-qty-btn.plus:hover  { background: #dcfce7; border-color: #86efac; color: #15803d; }

.vc-qty-confirm {
    display: none; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
    padding: 8px 10px; margin-top: 6px; font-size: 10px; color: #92400e; font-weight: 600; line-height: 1.4;
}
.vc-qty-confirm .vc-confirm-btns { display: flex; gap: 6px; margin-top: 6px; }
.vc-qty-confirm .vc-confirm-btns button {
    flex: 1; padding: 5px 0; border-radius: 6px; font-size: 10px; font-weight: 700;
    cursor: pointer; border: 1px solid transparent; transition: .15s;
}
.vc-confirm-yes { background: #ef4444; color: #fff; border-color: #dc2626 !important; }
.vc-confirm-yes:hover { background: #dc2626; }
.vc-confirm-no  { background: #f1f5f9; color: #475569; border-color: #e2e8f0 !important; }
.vc-confirm-no:hover { background: #e2e8f0; }

/* ── "For Sale" badge on collection card ─────────────────────────── */
.bn-col-forsale-badge {
    position: absolute;
    top: 6px; left: 6px;
    background: #6366f1; color: #fff;
    font-size: 9px; font-weight: 800;
    padding: 2px 5px; border-radius: 4px;
    pointer-events: none;
}

/* ── Sell Drawer modal ───────────────────────────────────────────── */
#sellDrawerOverlay {
    display: none; position: fixed; inset: 0;
    background: rgba(15,23,42,.6); backdrop-filter: blur(4px);
    z-index: 99995;
    align-items: flex-start; justify-content: center;
    padding: calc(var(--header-height, 70px) + 12px) 16px 16px;
    box-sizing: border-box; overflow-y: auto;
}
#sellDrawerOverlay.active  { display: flex; animation: vrt-fade-in  .18s ease forwards; }
#sellDrawerOverlay.closing { display: flex; animation: vrt-fade-out .15s ease forwards; }
.sell-drawer {
    display: none; position: relative;
    width: 560px; max-width: 100%;
    max-height: calc(100dvh - var(--header-height, 70px) - 28px);
    background: #fff; border-radius: 18px; flex-direction: column;
    box-shadow: 0 32px 80px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.06);
    overflow: hidden; flex-shrink: 0;
}
.sell-drawer.active  { display: flex; animation: vrt-modal-in  .2s cubic-bezier(.34,1.3,.64,1) forwards; }
.sell-drawer.closing { display: flex; animation: vrt-modal-out .15s ease forwards; }
@keyframes vrt-fade-in   { from { opacity:0 } to { opacity:1 } }
@keyframes vrt-fade-out  { from { opacity:1 } to { opacity:0 } }
@keyframes vrt-modal-in  { from { opacity:0; transform:scale(.93) } to { opacity:1; transform:scale(1) } }
@keyframes vrt-modal-out { from { opacity:1; transform:scale(1)  } to { opacity:0; transform:scale(.93) } }

.drawer-head {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 18px 18px 16px; background: #0f172a;
    border-radius: 18px 18px 0 0; flex-shrink: 0; position: relative;
}
.drawer-card-thumb { width: 64px; height: 90px; object-fit: contain; border-radius: 6px; flex-shrink: 0; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.drawer-card-meta  { flex: 1; min-width: 0; padding-top: 2px; }
.drawer-card-name  { font-size: 15px; font-weight: 800; color: #fff; line-height: 1.3; margin-bottom: 4px; }
.drawer-card-sub   { font-size: 11px; color: rgba(255,255,255,.5); margin-bottom: 8px; }
.drawer-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 6px; margin-right: 4px; margin-bottom: 4px; letter-spacing: .2px; text-decoration: none; }
.drawer-badge.passport { background: #312e81; color: #a5b4fc; }
.drawer-badge.passport:hover { background: #4338ca; color: #c7d2fe; }
.drawer-badge.variant  { background: #1e293b; color: #94a3b8; }
.drawer-badge.on-sale  { background: #064e3b; color: #34d399; }
.drawer-badge.in-stock { background: #1e3a5f; color: #7dd3fc; }
.drawer-close-btn {
    flex-shrink: 0; align-self: flex-start; margin-left: auto;
    width: 30px; height: 30px; border-radius: 9px;
    background: rgba(255,255,255,.15); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #fff; transition: background .15s;
}
.drawer-close-btn:hover { background: rgba(239,68,68,.6); color: #fff; }
.drawer-close-btn svg { width: 16px !important; height: 16px !important; stroke: #fff !important; fill: none !important; pointer-events: none; }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px 20px 6px; }
.drawer-body::-webkit-scrollbar { width: 4px; }
.drawer-body::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }
.drawer-section-title {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .7px; color: #94a3b8;
    margin: 14px 0 10px; padding: 12px 0 6px; border-top: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9;
}
.drawer-section-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.drawer-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.drawer-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.drawer-field { display: flex; flex-direction: column; gap: 4px; }
.drawer-field label { font-size: 10px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .5px; }
.drawer-hint  { font-size: 11px; color: #9ca3af; line-height: 1.4; margin-top: 1px; }
.drawer-link  { color: #6366f1; text-decoration: none; font-weight: 600; }
.drawer-link:hover { text-decoration: underline; }
.drawer-input {
    width: 100%; box-sizing: border-box;
    padding: 9px 11px; border: 1px solid #e2e8f0; border-radius: 8px;
    font-size: 13px; color: #1f2937;
    background: #f8fafc; outline: none; transition: border-color .15s, box-shadow .15s;
}
.drawer-input:focus { border-color: #6366f1; background: #fff; box-shadow: 0 0 0 3px rgba(99,102,241,.1); }
.drawer-input[type="date"] { font-family: inherit; }
textarea.drawer-input { resize: vertical; min-height: 72px; }
.drawer-footer {
    padding: 12px 20px 16px; border-top: 1px solid #f1f5f9;
    display: flex; flex-direction: column; gap: 8px; flex-shrink: 0;
}
.drawer-footer-main { display: flex; gap: 8px; }
.dbtn {
    flex: 1; padding: 11px 14px; border-radius: 10px; border: none;
    font-size: 13px; font-weight: 700; cursor: pointer; transition: filter .15s, transform .1s;
}
.dbtn:active  { transform: scale(.97); }
.dbtn-save    { background: #f1f5f9; color: #374151; }
.dbtn-save:hover  { filter: brightness(.94); }
.dbtn-sell    { background: #6366f1; color: #fff; }
.dbtn-sell:hover  { filter: brightness(1.08); }
.dbtn-pause   { background: #fef3c7; color: #92400e; }
.dbtn-pause:hover { filter: brightness(.96); }
.dbtn-delete  { background: none; color: #ef4444; font-size: 12px; border: 1px solid #fecaca; border-radius: 8px; padding: 8px; }
.dbtn-delete:hover { background: #fef2f2; }
.vrt-fee-sim  { display: none; margin-top: 8px; padding: 10px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; gap: 16px; flex-wrap: wrap; align-items: center; }
@media (max-width: 560px) {
    .drawer-row, .drawer-row-3 { grid-template-columns: 1fr; }
}

/* ── Access gate ─────────────────────────────────────────────────── */
.bn-access-gate {
    max-width: 500px; margin: 48px auto; text-align: center;
    padding: 32px 24px; background: var(--v-bg-card, #fff);
    border: 1px solid var(--v-border, #e2e8f0); border-radius: 16px;
}

/* ── Wishlist remove button ──────────────────────────────────────── */
.bn-wl-remove:hover { background: #fef2f2 !important; border-color: #ef4444 !important; }

/* ── Card image placeholder ──────────────────────────────────────── */
.gc-img-placeholder { width: 100%; padding-top: 140%; background: #f1f5f9; border-radius: 8px; }

/* ── Set group headers in table view ─────────────────────────────── */
.sf-set-group { margin-bottom: 24px; }
.sf-set-hd {
    font-size: 13px; font-weight: 800; color: #475569;
    padding: 10px 0 6px; border-bottom: 1px solid #e2e8f0;
    margin-bottom: 4px; display: flex; align-items: center; gap: 8px;
}
.sf-set-cnt { font-size: 11px; font-weight: 600; color: #94a3b8; }

/* ── Pagination (shared with my-collection style) ────────────────── */
.bn-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 20px 0 40px; }
.bn-pg-btn {
    background: #fff; border: 1px solid #cbd5e1; padding: 7px 14px;
    border-radius: 8px; font-size: 12px; font-weight: 700; color: #0f172a; text-decoration: none; transition: .2s;
}
.bn-pg-btn:hover   { background: #f1f5f9; border-color: #6366f1; color: #6366f1; }
.bn-pg-btn.active  { background: #6366f1; color: #fff; border-color: #6366f1; }
.bn-pg-info        { font-size: 12px; font-weight: 600; color: #64748b; }

/* ══ SETS VIEW ═══════════════════════════════════════════════════════
   Ported + scoped from my-collection.css
   ════════════════════════════════════════════════════════════════ */
.sets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    padding: 20px 0 40px;
}
.set-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
    overflow: hidden; transition: .2s; display: flex; flex-direction: column;
    text-decoration: none; color: inherit;
}
.set-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.07); border-color: #cbd5e1; }
.set-card-logo-wrap {
    background: #f8fafc; padding: 16px 20px; display: flex;
    align-items: center; justify-content: center; min-height: 80px;
    border-bottom: 1px solid #e2e8f0;
}
.set-card-logo-wrap img { max-height: 50px; max-width: 150px; object-fit: contain; display: block; }
.set-logo-placeholder { font-size: 10px; font-weight: 900; text-transform: uppercase; color: #94a3b8; letter-spacing: .5px; text-align: center; }
.set-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.set-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; }
.set-card-name { font-size: 12px; font-weight: 800; color: #0f172a; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.set-progress-wrap { display: flex; flex-direction: column; gap: 5px; }
.set-progress-info { display: flex; justify-content: space-between; align-items: baseline; }
.set-progress-count { font-size: 10px; color: #64748b; font-weight: 600; }
.set-progress-pct { font-size: 13px; font-weight: 900; color: #6366f1; }
.set-progress-bar-track { width: 100%; height: 5px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
.set-progress-bar-fill { height: 100%; background: linear-gradient(90deg, #6366f1, #7c3aed); border-radius: 99px; }
.set-values-row { display: flex; align-items: stretch; gap: 0; padding-top: 8px; border-top: 1px solid #f1f5f9; }
.set-val-item { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.set-val-item + .set-val-item { padding-left: 10px; border-left: 1px solid #f1f5f9; margin-left: 10px; }
.set-val-lbl { font-size: 9px; text-transform: uppercase; color: #94a3b8; font-weight: 700; letter-spacing: .4px; }
.set-val-num { font-size: 12px; font-weight: 800; color: #16a34a; }
.set-val-total .set-val-num { color: #64748b; }
.set-view-btn {
    display: block; text-align: center; background: #f1f5f9; border: 1px solid #e2e8f0;
    color: #475569; padding: 8px; border-radius: 8px; font-size: 10px; font-weight: 800;
    text-transform: uppercase; transition: .2s; letter-spacing: .5px; margin-top: auto;
}
.set-card:hover .set-view-btn { background: #6366f1; color: #fff; border-color: #6366f1; }

/* ── Wishlist ────────────────────────────────────────────────────── */
.bn-wl-value {
    font-size: 12px; color: #64748b; margin-left: 10px;
}
.bn-wl-value strong { color: #0f172a; }

/* Wishlist grid card extras */
.wl-card .card-visual-wrapper { position: relative; }

.wl-price-tag {
    position: absolute; bottom: 6px; left: 6px;
    background: rgba(0,0,0,.60); color: #fff;
    font-size: 10px; font-weight: 800;
    padding: 2px 7px; border-radius: 6px; letter-spacing: .3px;
    pointer-events: none;
}
.wl-mkt-overlay-badge {
    position: absolute; top: 6px; right: 6px;
    background: rgba(34,197,94,.9); color: #fff;
    font-size: 10px; font-weight: 800;
    padding: 2px 7px; border-radius: 6px;
    text-decoration: none; transition: background .15s;
}
.wl-mkt-overlay-badge:hover { background: #16a34a; }

/* Conquistei button */
.wl-conquistei-btn {
    flex: 1; padding: 7px 6px; border-radius: 8px; border: none;
    background: #d1fae5; color: #065f46;
    font-size: 11px; font-weight: 700; cursor: pointer;
    transition: background .15s; white-space: nowrap;
}
.wl-conquistei-btn:hover { background: #a7f3d0; }
.wl-conquistei-btn--sm { flex: none; padding: 4px 8px; font-size: 10px; }

/* Wishlist remove button */
.wl-remove-btn {
    padding: 7px 9px; border-radius: 8px;
    border: 1px solid #fca5a5; color: #ef4444; background: transparent;
    font-size: 11px; font-weight: 700; cursor: pointer; transition: .15s;
    flex-shrink: 0;
}
.wl-remove-btn:hover { background: #fef2f2; }

/* Marketplace availability (list view) */
.wl-mkt-check {
    display: inline-flex; align-items: center; gap: 4px;
    color: #15803d; text-decoration: none; font-size: 12px; font-weight: 700;
}
.wl-mkt-check:hover { color: #166534; }
.wl-mkt-price { font-size: 12px; }
.wl-mkt-no { color: #cbd5e1; font-size: 12px; }

/* Marketplace availability badge (grid, non-owner) */
.wl-mkt-av-badge {
    display: flex; align-items: center; gap: 5px;
    background: #f0fdf4; border: 1px solid #86efac;
    color: #15803d; border-radius: 8px;
    padding: 5px 8px; font-size: 11px; font-weight: 700;
    text-decoration: none; transition: background .15s; flex: 1;
}
.wl-mkt-av-badge:hover { background: #dcfce7; }

/* Wishlist acquisition overlay (reuses .sell-drawer CSS) */
#wlAcqOverlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 99995;
    display: none; align-items: flex-start; justify-content: center;
    padding: calc(var(--header-height, 70px) + 12px) 16px 16px;
    overflow-y: auto;
}
#wlAcqOverlay.active  { display: flex; }
#wlAcqOverlay.closing { display: flex; opacity: 0; transition: opacity .15s; }

/* ── Editable Table (Tabela de Edição) ──────────────────────────── */
.cet-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    margin: 4px 0 40px;
}
.cet-table {
    width: 100%; border-collapse: collapse;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    white-space: nowrap;
}
.cet-table thead tr { background: #f8fafc; border-bottom: 2px solid #e2e8f0; }
.cet-table th {
    padding: 10px 10px; text-align: left;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px; color: #94a3b8;
}
.cet-th-img   { width: 46px; }
.cet-th-name  { width: 130px; max-width: 130px; }
.cet-th-set   { width: 90px;  max-width: 90px; }
.cet-th-cond  { width: 130px; }
.cet-th-price { width: 110px; }
.cet-th-gco   { width: 90px; }
.cet-th-gval  { width: 72px; text-align: center; }
.cet-th-loc   { width: 148px; }
.cet-th-seg   { width: 110px; }
.cet-th-sm    { width: 52px; text-align: center; }
.cet-th-save  { width: 44px; }

.cet-row { border-bottom: 1px solid #f1f5f9; transition: background .1s; }
.cet-row:last-child { border-bottom: none; }
.cet-row:hover { background: #fafbff; }
.cet-row[data-dirty="1"] { background: #fefce8; }
.cet-row[data-dirty="1"]:hover { background: #fef9c3; }

.cet-table td { padding: 6px 8px; vertical-align: middle; }
.cet-td-img   { padding: 4px 6px; }
.cet-thumb    { width: 34px; height: 48px; object-fit: contain; border-radius: 4px; display: block; }
.cet-td-name  { width: 130px; max-width: 130px; overflow: hidden; }
.cet-name-link {
    font-size: 12px; font-weight: 700; color: #1e293b;
    text-decoration: none; display: block; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.cet-name-link:hover { color: #6366f1; }
.cet-num-badge {
    display: inline-block; font-size: 10px; color: #94a3b8;
    background: #f1f5f9; border-radius: 4px; padding: 1px 5px; margin-top: 2px;
}
.cet-passport {
    display: inline-block; font-size: 9px; font-weight: 700;
    color: #818cf8; background: #eef2ff; border-radius: 4px;
    padding: 1px 5px; margin-left: 4px; text-decoration: none;
}
.cet-passport:hover { background: #e0e7ff; color: #6366f1; }
.cet-td-set { font-size: 11px; color: #64748b; width: 90px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cet-td-sm  { text-align: center; }
.cet-qty    { font-size: 12px; font-weight: 700; color: #475569; }

.cet-sel, .cet-inp {
    border: 1px solid #e2e8f0; border-radius: 6px;
    background: #f8fafc; font-family: inherit;
    font-size: 12px; color: #1e293b;
    padding: 5px 6px; outline: none;
    transition: border-color .15s, background .15s;
    width: 100% !important; box-sizing: border-box;
    max-width: none !important; flex: none !important;
}
.cet-sel:hover, .cet-inp:hover { border-color: #a5b4fc; background: #fff; }
.cet-sel:focus, .cet-inp:focus { border-color: #6366f1; background: #fff; box-shadow: 0 0 0 2px rgba(99,102,241,.15); }
.cet-inp-price { max-width: 100px !important; }
.cet-inp-grade { font-size: 13px; font-weight: 700; text-align: center; }

.cet-mkt-btn {
    font-size: 10px; font-weight: 800; letter-spacing: .3px;
    padding: 4px 8px; border-radius: 6px; border: none; cursor: pointer;
    background: #f1f5f9; color: #94a3b8; transition: background .15s, color .15s;
}
.cet-mkt-btn.on { background: #d1fae5; color: #059669; }
.cet-mkt-btn:hover { filter: brightness(.94); }

.cet-save-btn {
    width: 32px; height: 32px; border-radius: 8px;
    border: 1.5px solid #6366f1;
    background: transparent; color: #6366f1; cursor: pointer;
    display: flex !important; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
    padding: 0; flex-shrink: 0;
}
.cet-save-btn:hover { background: #eef2ff; }
.cet-row[data-dirty="1"] .cet-save-btn { background: #6366f1; color: #fff; border-color: #6366f1; }
.cet-row[data-dirty="1"] .cet-save-btn:hover { background: #4f46e5; }

.cet-save-btn .ico-save { display: block; }
.cet-save-btn .ico-ok,
.cet-save-btn .ico-err,
.cet-save-btn .ico-spin { display: none; }
.cet-save-btn.state-ok  .ico-save,
.cet-save-btn.state-ok  .ico-err  { display: none; }
.cet-save-btn.state-ok  .ico-ok   { display: block; }
.cet-save-btn.state-err .ico-save,
.cet-save-btn.state-err .ico-ok   { display: none; }
.cet-save-btn.state-err .ico-err  { display: block; }
.cet-save-btn.state-spin .ico-save,
.cet-save-btn.state-spin .ico-ok,
.cet-save-btn.state-spin .ico-err { display: none; }
.cet-save-btn.state-spin .ico-spin { display: block; font-size: 16px; animation: cet-spin .7s linear infinite; }
@keyframes cet-spin { to { transform: rotate(360deg); } }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .bn-album-grid         { grid-template-columns: repeat(4, 1fr); }
    .binder-page .mkp-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
    .v-wrapper.binder-page { padding: 0 0 60px; }
    .bn-col-toolbar { margin: 0; padding-left: 12px; padding-right: 12px; }
    .bn-album-grid  { grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 0; }
    .binder-page .mkp-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .collector-card { border-radius: 12px; }
    .card-actions   { padding: 8px; }
    .sets-grid      { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .set-card-logo-wrap { min-height: 70px; }
    .control-label  { font-size: 9px; }
}
@media (max-width: 480px) {
    .sp-btn-edit { font-size: 12px; padding: 7px 12px; }
    .bn-col-controls { width: 100%; margin-left: 0; justify-content: flex-start; }
    .bn-album-grid         { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .binder-page .mkp-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* Switch Toggle (mesmo padrão de page-card-view.php) — usado no sell-drawer */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .4s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
input:checked + .slider { background-color: #10b981; }
input:checked + .slider:before { transform: translateX(20px); }
.switch-label { font-size: 11px; font-weight: 800; color: #475569; margin-right: 10px; text-transform: uppercase; letter-spacing: 0.5px; }