/* =========================================================================
 * Sell skins for cash (skinsflow.com/sell, views/sell/*). The app and the
 * status page reuse the hosted checkout (css/checkout.css: .co-*) and the
 * wallet (css/wallet.css: .wl-*); the landing pages reuse site.css and
 * solutions.css. Only the /sell pieces live here:
 *
 *   Landing  .sell-hero__inner .sell-payrow .sell-methods .sell-fine .sell-more
 *   App      .sell-apphead .sell-app .sell-progress .sell-filters(__grid __count __reset) .sell-filter .sell-range
 *            .sell-review(__head __items __actions __fine) .sell-facts .sell-dest .sell-opt(__body __note __select)
 *   Status   .sell-status .sell-result--hold .sell-payout .sell-back .sell-done__actions
 *   Lists    .sell-list .sell-row .sell-row__thumb
 * ========================================================================= */

/* ---- landing -------------------------------------------------------------- */
.sell-hero .btn svg { width: 18px; height: 18px; }
.sell-hero__inner { max-width: 760px; }

.sell-payrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: clamp(28px, 4vw, 44px); padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: rgba(255, 255, 255, .02); }
.sell-payrow strong { font-size: 15px; }
.sell-methods { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sell-methods li { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); font-size: 13px; font-weight: 600; color: var(--fg); }
.sell-fine { font-size: 13.5px; color: var(--muted); }

a.game { color: var(--fg); text-decoration: none; }
a.game:hover { color: var(--fg); border-color: var(--line-2); }
.sell-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--mint); font-weight: 600; font-size: 14px; }
.sell-more svg { width: 15px; height: 15px; }

/* ---- app ---------------------------------------------------------------------- */
.sell-apphead { padding-bottom: 24px; }
.sell-apphead__top { align-items: center; flex-wrap: wrap; gap: 12px; }
.sell-apphead .btn svg { width: 16px; height: 16px; }
.sell-body { padding-top: clamp(18px, 3vw, 28px); }
.sell-app { gap: 14px; }
.sell-progress { max-width: 560px; }

.sell-filters { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.sell-filters > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--muted); }
.sell-filters > summary::-webkit-details-marker { display: none; }
.sell-filters > summary svg { width: 16px; height: 16px; }
.sell-filters[open] > summary { color: var(--fg); border-bottom: 1px solid var(--line); }
.sell-filters__count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--mint); color: var(--ink); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.sell-filters__grid { display: grid; gap: 12px; padding: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); align-items: end; }
.sell-filter { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.sell-filter .co-select { max-width: none; width: 100%; min-height: 42px; }
.sell-filter[hidden] { display: none; }
.sell-range { display: flex; align-items: center; gap: 6px; }
.sell-range .field__input { min-width: 0; flex: 1; min-height: 42px; }
.sell-filters__reset { justify-self: start; padding: 10px 0; }

.sell-review { display: flex; flex-direction: column; gap: 16px; max-width: 720px; width: 100%; margin: 0 auto; }
.sell-review__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sell-review__head .co-link { display: inline-flex; align-items: center; gap: 4px; }
.sell-review__head .co-link svg { width: 14px; height: 14px; }
.sell-review__items { justify-content: flex-start; max-width: none; }
.sell-facts { max-width: none; }
.sell-facts__total dt, .sell-facts__total dd { color: var(--fg); font-weight: 700; }
.sell-facts__total dd { color: var(--mint); font-size: 18px; }

.sell-dest { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sell-dest__legend { padding: 0; margin-bottom: 4px; font-weight: 700; font-size: 15px; }
.sell-opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); cursor: pointer; transition: border-color .15s, background-color .15s; min-width: 0; }
.sell-opt:hover { border-color: var(--line-2); }
.sell-opt:has(input:checked) { border-color: var(--mint); background: color-mix(in srgb, var(--mint) 7%, var(--panel-2)); }
.sell-opt.is-disabled { cursor: default; }
.sell-opt input[type="radio"] { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--mint); }
.sell-opt__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.sell-opt__body strong { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.sell-opt__body strong svg { width: 17px; height: 17px; color: var(--mint); }
.sell-opt__body > span { color: var(--muted); font-size: 14px; line-height: 1.5; }
.sell-opt__select { max-width: 100%; width: 100%; min-height: 42px; text-overflow: ellipsis; }
.sell-opt__note { display: block; font-size: 12px; line-height: 1.45; color: var(--faint); }

.sell-review__actions { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 4px; }
.sell-review__actions .btn { width: 100%; max-width: 360px; justify-content: center; }
.sell-review__fine { margin: 0; text-align: center; font-size: 13px; color: var(--faint); max-width: 46ch; }

.sell-recent .badge { white-space: nowrap; }

/* ---- status page ------------------------------------------------------------------- */
.sell-back { display: inline-flex; align-items: center; gap: 4px; width: fit-content; }
.sell-back svg { width: 14px; height: 14px; }
.sell-status { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.sell-status .co-progress { margin: 0 auto; }
.sell-result--hold { background: rgba(255, 200, 97, .12); color: var(--warning); box-shadow: 0 0 0 10px rgba(255, 200, 97, .05); }
.sell-done__actions { justify-content: center; }
.sell-payout { display: flex; gap: 14px; align-items: flex-start; max-width: 620px; width: 100%; margin: 0 auto; }
.sell-payout__icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(139, 108, 255, .12); color: #a996ff; }
.sell-payout__icon svg { width: 19px; height: 19px; }
.sell-payout__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 14px; color: var(--muted); }
.sell-payout__body strong { color: var(--fg); font-size: 15px; overflow-wrap: anywhere; }
.sell-payout__body .co-link { width: fit-content; }

/* ---- lists ------------------------------------------------------------------------------ */
.sell-list > li { border-bottom: 1px solid var(--line); }
.sell-list > li:last-child { border-bottom: 0; }
.sell-row { color: var(--fg); border-bottom: 0; gap: 12px; }
.sell-row:hover { color: var(--fg); background: rgba(255, 255, 255, .02); }
.sell-row .wl-row__main { flex: 1; }
.sell-row__thumb { flex: none; width: 48px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.sell-row__thumb img { width: 44px; height: 33px; object-fit: contain; }