/* Marketplace v5 — desktop listing card (≥1024px), the user's "oge-card-collector" design v3 (2026-10-31): the plate flips to a profile preview.
 * Markup: components/market/v5/card.php + MK5.renderCard (assets/js/market-v5.js). Grid and list rows stay in
 * market-v5-list.css. The black plate is the same in both themes; the card around it follows the theme. */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../webfonts/inter/inter-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2013-2014, U+2019, U+201C-201D, U+2022, U+20AC; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../webfonts/inter/inter-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2013-2014, U+2019, U+201C-201D, U+2022, U+20AC; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('../webfonts/inter/inter-800.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2013-2014, U+2019, U+201C-201D, U+2022, U+20AC; }

@media (min-width: 1024px) {
    #mk5 .mk5-card {
        --oc-card: #121212; --oc-line: #222; --oc-hover: #9aa1ab; --oc-text: #fff; --oc-muted: #8f949b; --oc-plat: #d2d5da;
        --oc-tile: #191919; --oc-tile-line: #333; --oc-btn: #171717; --oc-btn-line: #272727; --oc-btn-ink: #a3a8ae;
        --oc-btn-hover: #1f1f1f; --oc-btn-hover-line: #3d3d3d; --oc-tag-line: #3a3d42; --oc-tag-ink: #d4d7dc; --oc-rule: #262626;
        --oc-was: #7d828a; --oc-buy: #e8ebef; --oc-buy-ink: #0b0b0b; --oc-sale: #5ee3a1; --oc-shadow: rgba(0, 0, 0, .7);
        display: block; min-width: 0; padding: 0; border-radius: 18px; background: none;
        font-family: Inter, system-ui, sans-serif;
        transition: transform .2s ease;
    }
    html[data-theme="light"] #mk5 .mk5-card {
        --oc-card: #fff; --oc-line: #e4e2de; --oc-hover: #8f949b; --oc-text: #0b0b0b; --oc-muted: #6b7078; --oc-plat: #3b3f45;
        --oc-tile: #f4f3f1; --oc-tile-line: #dcdad6; --oc-btn: #f7f6f4; --oc-btn-line: #e4e2de; --oc-btn-ink: #5c6168;
        --oc-btn-hover: #efeeeb; --oc-btn-hover-line: #cfccc7; --oc-tag-line: #cfd2d6; --oc-tag-ink: #3b3f45; --oc-rule: #e7e5e1;
        --oc-was: #8f949b; --oc-buy: #0b0b0b; --oc-buy-ink: #fff; --oc-sale: #12a066; --oc-shadow: rgba(46, 36, 22, .18);
    }
    #mk5 .mk5-card__in {
        position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 268px; padding: 12px 16px 16px;
        border-radius: 18px; border: 1px solid var(--oc-line); background: var(--oc-card);
        transition: border-color .2s ease, box-shadow .2s ease;
    }
    @media (hover: hover) {
        #mk5 .mk5-card:hover { transform: translateY(-4px); }
        #mk5 .mk5-card:hover .mk5-card__in { border-color: var(--oc-hover); box-shadow: 0 18px 40px var(--oc-shadow); }
    }

    /* Head: platform tile + name, cart / copy tiles */
    #mk5 .mk5-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    #mk5 .mk5-card__plat { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--oc-plat); font-size: 13px; font-weight: 600; }
    #mk5 .mk5-card__pname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #mk5 .mk5-card__ico {
        width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 9px;
        background: var(--oc-tile); border: 1px solid var(--oc-tile-line); color: var(--oc-text); font-size: 14px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    }
    #mk5 .mk5-card__ico--ig { /* Instagram's gradient as a hairline ring */
        border-color: transparent;
        background: linear-gradient(var(--oc-tile), var(--oc-tile)) padding-box, linear-gradient(45deg, #f58529 0%, #dd2a7b 45%, #8134af 75%, #515bd4 100%) border-box;
    }
    #mk5 .mk5-card__acts { display: flex; flex-shrink: 0; gap: 6px; }
    #mk5 .mk5-card__btn {
        width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 11px;
        background: var(--oc-btn); border: 1px solid var(--oc-btn-line); color: var(--oc-btn-ink); cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); transition: color .15s ease, background .15s ease, border-color .15s ease;
    }
    #mk5 .mk5-card__btn:hover { color: var(--oc-text); background: var(--oc-btn-hover); border-color: var(--oc-btn-hover-line); }
    #mk5 .mk5-card__btn i { display: flex; pointer-events: none; font-size: 14px; }
    #mk5 .mk5-card__btn i.fa-check svg { display: none; } /* App.flashButtonSuccess: the check replaces the icon */

    /* The plate: a glossy black front that flips (hover, or .is-preview pinned by a tap) to a mock profile */
    #mk5 .mk5-card__plate {
        appearance: none; display: block; width: 100%; height: 104px; margin: 0; padding: 0; border: 0; border-radius: 12px;
        background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; perspective: 900px; container-type: inline-size;
    }
    #mk5 .mk5-card__flip { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
    #mk5 .mk5-card__plate.is-preview .mk5-card__flip { transform: rotateY(180deg); }
    @media (hover: hover) { #mk5 .mk5-card:hover .mk5-card__flip { transform: rotateY(180deg); } }
    #mk5 .mk5-card__face {
        position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
        border-radius: 12px; background: linear-gradient(180deg, #181818 0%, #060606 100%); border: 1px solid #2a2a2a;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -12px 24px rgba(0, 0, 0, .75);
        overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
    }
    #mk5 .mk5-card__face::before { /* gloss on the upper half */
        content: ""; position: absolute; inset: 0 0 50% 0; pointer-events: none;
        background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .035) 100%);
    }
    #mk5 .mk5-card__front::after { /* diagonal sheen */
        content: ""; position: absolute; inset: 0; pointer-events: none;
        background: linear-gradient(115deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, .11) 40%, rgba(255, 255, 255, .025) 49%, rgba(255, 255, 255, 0) 58%);
    }
    #mk5 .mk5-card__edge { /* chrome hairline on top */
        position: absolute; top: 0; left: 14%; right: 14%; height: 1px;
        background: linear-gradient(90deg, rgba(232, 235, 239, 0), rgba(232, 235, 239, .7), rgba(232, 235, 239, 0));
    }
    #mk5 .mk5-card__label { position: absolute; top: 9px; left: 12px; z-index: 1; color: #8f949b; font-size: 9px; font-weight: 700; letter-spacing: .18em; }
    #mk5 .mk5-card__hint { position: absolute; bottom: 8px; left: 12px; z-index: 1; display: flex; align-items: center; gap: 4px; color: #6f747b; font-size: 8.5px; font-weight: 700; letter-spacing: .16em; }
    #mk5 .mk5-card__code { /* outlined type stamp: 3L, 3C, 4C, 4L */
        position: absolute; right: 8px; bottom: -14px;
        font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 62px; font-weight: 800; letter-spacing: -.04em; line-height: 1.2;
        color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .10);
    }
    #mk5 .mk5-card__user {
        position: relative; z-index: 1; margin-top: 6px; max-width: calc(100% - 24px); overflow: hidden; white-space: nowrap; unicode-bidi: isolate;
        font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-ligatures: none; font-feature-settings: "calt" 0, "liga" 0;
        font-size: min(38px, calc((100cqw - 32px) / (var(--n, 6) * 0.61))); font-weight: 800; letter-spacing: .01em; line-height: 1.2; color: #fff;
        text-shadow: 0 -1px 0 rgba(255, 255, 255, .25), 0 3px 10px rgba(0, 0, 0, .85);
    }
    #mk5 .mk5-card__plate:focus-visible { outline: 2px solid #6ebeff; outline-offset: 2px; }

    /* Back: the handle on a mock profile (Instagram / TikTok / Snapchat layout, or X / Discord with a banner) */
    #mk5 .mk5-card__back { transform: rotateY(180deg); flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 8px; padding: 0 12px 10px; }
    #mk5 .mk5-prof { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
    #mk5 .mk5-prof__ring { flex: none; padding: 2px; border-radius: 50%; background: #3a3d42; }
    #mk5 .mk5-prof__ring--ig { background: linear-gradient(45deg, #f58529 0%, #dd2a7b 45%, #8134af 75%, #515bd4 100%); }
    #mk5 .mk5-prof__avatar {
        flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
        background: #2a2d33; color: #5b616a; border: 2px solid #0b0b0b;
    }
    #mk5 .mk5-prof__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    #mk5 .mk5-prof__user { display: flex; align-items: center; gap: 4px; min-width: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 16px; font-weight: 800; color: #fff; unicode-bidi: isolate; }
    #mk5 .mk5-prof__user > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #mk5 .mk5-prof__user svg { flex: none; }
    #mk5 .mk5-prof__stats { position: relative; z-index: 1; font-size: 9.5px; color: #9aa0a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #mk5 .mk5-prof__stats b { color: #fff; font-weight: 700; }
    #mk5 .mk5-prof__btns { position: relative; z-index: 1; display: flex; gap: 6px; }
    #mk5 .mk5-prof__btns span { flex: 1; padding: 4px 0; border-radius: 6px; text-align: center; background: #24272c; color: #e6e8eb; font-size: 9.5px; font-weight: 600; }
    #mk5 .mk5-xbanner { position: absolute; top: 0; left: 0; right: 0; height: 34px; background: linear-gradient(120deg, #2b3138 0%, #1a1e23 100%); }
    #mk5 .mk5-card__back--x .mk5-card__label { color: #b7bcc3; }
    #mk5 .mk5-card__back--x .mk5-prof__avatar { width: 38px; height: 38px; }
    #mk5 .mk5-prof__name { font-size: 12px; font-weight: 800; color: #fff; }
    #mk5 .mk5-prof__handle { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; font-weight: 700; color: #c9cdd3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; }
    #mk5 .mk5-prof__pill { flex: none; margin-inline-start: auto; padding: 4px 9px; border-radius: 999px; border: 1px solid #3a3f46; color: #e6e8eb; font-size: 9.5px; font-weight: 700; }

    /* Category tag on a rule */
    #mk5 .mk5-card__meta { display: flex; align-items: center; gap: 10px; }
    #mk5 .mk5-card__tag {
        padding: 4px 8px; border-radius: 4px; border: 1px solid var(--oc-tag-line); color: var(--oc-tag-ink);
        font-size: 10px; font-weight: 700; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; white-space: nowrap;
    }
    #mk5 .mk5-card__rule { flex-grow: 1; height: 1px; background: var(--oc-rule); }

    /* Price + Buy Now */
    #mk5 .mk5-card__foot { margin-top: auto; padding-top: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
    #mk5 .mk5-card__fee { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    #mk5 .mk5-card__fee-l { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--oc-muted); }
    #mk5 .mk5-card__fee-l::first-letter { text-transform: none; }
    #mk5 .mk5-card__was-row { display: flex; align-items: center; gap: 6px; }
    #mk5 .mk5-card__old { font-size: 13px; font-weight: 600; color: var(--oc-was); text-decoration: line-through; }
    #mk5 .mk5-card__off { padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--oc-sale) 14%, transparent); color: var(--oc-sale); font-size: 11px; font-weight: 800; }
    #mk5 .mk5-card__price { display: block; font-size: 25px; font-weight: 800; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--oc-text); unicode-bidi: isolate; }
    #mk5 .mk5-card__buy {
        flex-shrink: 0; height: 44px; padding-block: 0; padding-inline: 16px 14px; border: 0; border-radius: 10px;
        display: flex; align-items: center; gap: 8px; background: var(--oc-buy); color: var(--oc-buy-ink);
        font: 800 14px Inter, system-ui, sans-serif; white-space: nowrap; text-decoration: none; transition: filter .15s ease;
    }
    #mk5 .mk5-card__buy:hover { filter: brightness(1.1); color: var(--oc-buy-ink); }
    html[dir="rtl"] #mk5 .mk5-card__buy svg { transform: scaleX(-1); }
    /* Arabic, Persian and Urdu letters join: tracking would pull them apart. */
    html[dir="rtl"] #mk5 :is(.mk5-card__tag, .mk5-card__fee-l) { letter-spacing: 0; font-size: 11px; }
    #mk5 :is(.mk5-card__btn, .mk5-card__buy):focus-visible { outline: 2px solid #6ebeff; outline-offset: 2px; }

    @media (prefers-reduced-motion: reduce) {
        #mk5 :is(.mk5-card, .mk5-card__flip) { transition: none; }
        #mk5 .mk5-card:hover { transform: none; }
    }
}