/* Garam Auctions: extends garam_marketplace.css (same page, filter and card styles). */

/* "Start an auction" panel: same shape as Combine's check panel. */
.marketplace-page .auction-start-panel {
    margin-top: 18px; padding: 21px 24px; border-radius: 22px;
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--market-border);
    box-shadow: 0 12px 27px rgba(21,99,153,.11);
}
.marketplace-page .auction-start-panel * { box-sizing: border-box; }
.auction-start-panel-copy { flex: 1; min-width: 220px; }
.auction-start-panel-copy h2 {
    margin: 0 0 5px; font-weight: 850; font-size: clamp(16px, 2vw, 20px);
    letter-spacing: -.025em; color: var(--market-ink);
}
.auction-start-panel-copy p { margin: 0; font-size: 13px; color: var(--market-muted); }
.auction-primary-button {
    display: inline-flex; justify-content: center; align-items: center; gap: 7px; flex-shrink: 0;
    min-width: 95px; min-height: 42px; padding: 9px 18px; border-radius: 13px;
    border: 1px solid var(--garam-c-0764a6,#0764a6);
    background: var(--garam-c-087cce,#087cce); color: #fff;
    box-shadow: 0 4px 0 var(--garam-c-075a91,#075a91);
    font: inherit; font-size: 13px; font-weight: 750; cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}
.auction-primary-button:hover:not(:disabled) { filter: brightness(.95); }
.auction-primary-button:active:not(:disabled) { transform: translateY(1px); }
.auction-primary-button:focus-visible { outline: 3px solid var(--garam-c-178fda,#178fda); outline-offset: 2px; }
.auction-primary-button:disabled { opacity: .45; cursor: default; }

/* Auction tiles */
.auction-card-timer {
    position: absolute; left: 3px; bottom: 3px; z-index: 1;
    display: inline-flex; align-items: center; gap: 4px; min-height: 24px;
    padding: 4px 8px; border-radius: 9px;
    background: rgba(8,20,31,.78); color: #fff;
    font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; pointer-events: none;
}
.auction-card-timer.is-soon { background: #d3203a; }
.auction-card-status {
    margin-top: 6px; min-height: 16px; font-size: 11px; font-weight: 750;
    color: var(--market-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.auction-card-status.is-leading { color: #14805f; }
.auction-card-status.is-outbid { color: #c22d45; }
.auctions-page .auction-card.is-leading { border-color: #6fcfa9; box-shadow: 0 0 0 1px #6fcfa9; }
.auctions-page .auction-card.is-own { border-style: dashed; }

/* Finished auctions: gray like missing cards in the Checklist. */
.auction-grid-divider {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 14px 0 2px;
    color: var(--market-muted); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.auction-grid-divider::before, .auction-grid-divider::after { content: ""; flex: 1; height: 1px; background: var(--market-border); }
.auctions-page .auction-card.is-finished .marketplace-card-photo img { filter: grayscale(1) brightness(.94) contrast(.92); opacity: .82; }
.auctions-page .auction-card.is-finished { box-shadow: none; }
.auctions-page .auction-card.is-finished .marketplace-card-name,
.auctions-page .auction-card.is-finished .marketplace-price { color: var(--market-muted); }
.auction-card-timer.is-ended { background: rgba(70,76,84,.86); }
.auction-card-status.is-winner { color: var(--market-ink); }
/* "View bids" on finished cards: outlined, always visible. */
.auctions-page .auction-card .marketplace-add-button.is-view {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    background: #fff; color: var(--garam-c-155a8d,#155a8d); border: 1px solid var(--garam-c-a9cfea,#a9cfea);
}
.auctions-page .auction-card .marketplace-add-button.is-view:hover { background: var(--garam-c-e5f5ff,#e5f5ff); }

/* Bid history inside the 3D card modal: its own scroll. */
.auction-bids h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; font-weight: 850; color: var(--garam-c-123c5c,#123c5c); }
.auction-bids h4 span { padding: 2px 8px; border-radius: 999px; background: var(--garam-c-d3edff,#d3edff); color: var(--garam-c-075d94,#075d94); font-size: 11px; }
.auction-bids h4 span:empty { display: none; }
.auction-bids-list {
    list-style: none; margin: 0; padding: 0 4px 0 0; max-height: 236px; overflow-y: auto;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 6px;
}
.auction-bids-list li {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 11px; border-radius: 11px; background: #fff; border: 1px solid var(--garam-c-c8e5f6,#c8e5f6);
}
.auction-bids-list li.is-top { border-color: #6fcfa9; box-shadow: inset 3px 0 0 #2fb57f; }
.auction-bids-list li.is-me strong { color: var(--garam-c-087cce,#087cce); }
.auction-bid-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.auction-bid-who strong { font-size: 13px; color: var(--garam-c-123c5c,#123c5c); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auction-bid-who small { font-size: 11px; color: var(--garam-c-477b9a,#477b9a); }
.auction-bids-list .marketplace-price { font-size: 13px; color: var(--garam-c-123c5c,#123c5c); }
.auction-bids-list .marketplace-coin { width: 17px; height: 17px; }
.auction-bids-empty { margin: 0; font-size: 13px; color: var(--garam-c-477b9a,#477b9a); }
html[data-garam-mode="dark"] body .auction-bids h4,
html[data-garam-mode="dark"] body .auction-bid-who strong,
html[data-garam-mode="dark"] body .auction-bids-list .marketplace-price { color: var(--garam-dark-text,#f3f4f7); }
html[data-garam-mode="dark"] body .auction-bids h4 span { background: var(--garam-dark-hover,#3a3c44); color: var(--garam-dark-text,#f3f4f7); }
html[data-garam-mode="dark"] body .auction-bids-list li { background: var(--garam-dark-panel,#23242a); border-color: var(--garam-dark-border,#45464d); }
html[data-garam-mode="dark"] body .auction-bid-who small,
html[data-garam-mode="dark"] body .auction-bids-empty { color: var(--garam-dark-muted,#a5a8b2); }
html[data-garam-mode="dark"] body .auctions-page .auction-card .marketplace-add-button.is-view {
    background: var(--garam-dark-raised,#34353c); color: var(--garam-dark-text,#f3f4f7); border-color: var(--garam-dark-border,#45464d);
}

/* "You were outbid": centered, above the card modal; no backdrop, the page stays usable. */
body .auction-outbid-alert {
    position: fixed; inset: 0; z-index: 300500; display: grid; place-items: center; padding: 18px;
    pointer-events: none; opacity: 0; transition: opacity .2s ease;
}
body .auction-outbid-alert[hidden] { display: none; }
body .auction-outbid-alert.is-open { opacity: 1; }
.auction-outbid-panel {
    position: relative; pointer-events: auto; width: min(420px, 100%); box-sizing: border-box;
    padding: 26px 24px 22px; border-radius: 22px; text-align: center;
    background: #fff; color: var(--garam-c-123c5c,#123c5c); border: 2px solid #f3a6b1;
    box-shadow: 0 24px 70px rgb(0 0 0 / 30%);
    transform: scale(.92); transition: transform .25s cubic-bezier(.2,.9,.3,1.3);
}
body .auction-outbid-alert.is-open .auction-outbid-panel { transform: scale(1); animation: auction-outbid-shake .5s ease .1s; }
@keyframes auction-outbid-shake { 0%,100% { translate: 0 } 20% { translate: -7px 0 } 40% { translate: 6px 0 } 60% { translate: -4px 0 } 80% { translate: 2px 0 } }
.auction-outbid-icon { display: block; font-size: 42px; line-height: 1; margin-bottom: 8px; }
.auction-outbid-panel h2 { margin: 0 0 8px; font-size: 22px; font-weight: 850; color: #d3203a; letter-spacing: -.02em; }
.auction-outbid-panel p { margin: 0; font-size: 15px; line-height: 1.5; }
.auction-outbid-more { margin-top: 8px !important; font-size: 12px !important; color: var(--garam-c-477b9a,#477b9a); }
.auction-outbid-more:empty { display: none; }
.auction-outbid-panel .auction-primary-button { margin-top: 16px; }
.auction-outbid-panel .auction-primary-button[hidden] { display: none; }
.auction-outbid-close {
    position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--garam-c-c8e5f6,#c8e5f6); background: var(--garam-c-f0f9ff,#f0f9ff); color: inherit; font-size: 21px; line-height: 1;
}
html[data-garam-mode="dark"] body .auction-outbid-panel { background: var(--garam-dark-panel,#23242a); color: var(--garam-dark-text,#f3f4f7); border-color: rgb(239 68 88 / 55%); }
html[data-garam-mode="dark"] body .auction-outbid-panel h2 { color: #ff8a98; }
html[data-garam-mode="dark"] body .auction-outbid-close { background: var(--garam-dark-raised,#34353c); border-color: var(--garam-dark-border,#45464d); }
@media (prefers-reduced-motion: reduce) {
    body .auction-outbid-alert, .auction-outbid-panel { transition: none; }
    body .auction-outbid-alert.is-open .auction-outbid-panel { animation: none; }
}

/* Picker dialog: covers the header and footer, like Combine's check dialog. */
body .auction-picker-modal {
    --market-ink: var(--garam-c-123c5c,#123c5c);
    --market-muted: var(--garam-c-527f99,#527f99);
    --market-panel: #fff;
    --market-border: var(--garam-c-bbdef5,#bbdef5);
    --market-raised: var(--garam-c-f0f9ff,#f0f9ff);
    --market-accent: var(--garam-theme-ui-accent,var(--garam-theme-accent,#087cce));
    position: fixed; inset: 0; z-index: 300250; padding: 18px;
    display: flex; align-items: center; justify-content: center;
    background: rgb(10 10 10 / 56%); opacity: 0; visibility: hidden;
    pointer-events: none; transition: opacity .2s ease, visibility .2s ease;
    color: var(--market-ink); font-family: inherit;
}
body .auction-picker-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
body .auction-picker-modal * { box-sizing: border-box; }
/* Autocomplete suggestions must open above the picker. */
body.auction-picker-open .garam-multi-autocomplete { z-index: 300400; }
body .auction-picker-dialog {
    width: min(980px, 100%); max-height: min(900px, calc(100dvh - 36px));
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    background: var(--market-panel); color: var(--market-ink);
    border: 1px solid var(--market-border); border-radius: 23px;
    padding: clamp(17px,3vw,28px); box-shadow: 0 25px 80px rgb(0 0 0 / 24%);
}
.auction-picker-header {
    display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; column-gap: 15px; row-gap: 7px;
}
.auction-picker-kicker { color: var(--market-accent); font-size: 11px; font-weight: 850; letter-spacing: .09em; }
.auction-picker-close {
    min-width: 37px; height: 37px; border-radius: 11px; cursor: pointer; font-size: 23px; line-height: 1; color: inherit;
    background: var(--market-raised); border: 1px solid var(--market-border);
}
.auction-picker-close:focus-visible { outline: 3px solid var(--garam-c-178fda,#178fda); outline-offset: 2px; }
.auction-picker-header h2 {
    grid-column: 1 / -1; margin: 0; text-align: center;
    font-weight: 850; font-size: clamp(23px,4vw,32px); letter-spacing: -.035em; color: inherit;
}
.auction-picker-description { margin: 11px 0 18px; color: var(--market-muted); font-size: 13px; line-height: 1.5; text-align: center; }
.auctions-page .auction-picker-filters, body .auction-picker-filters { grid-template-columns: repeat(6,minmax(0,1fr)); }
.auction-picker-status { min-height: 22px; margin: 14px 0 12px; color: var(--market-accent); font-size: 13px; font-weight: 750; }
.auction-picker-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; align-items: start; }
.auction-pick-card {
    display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.auction-pick-card .marketplace-card-photo { cursor: pointer; }
.auction-pick-card > span, .auction-pick-card .marketplace-card-name, .auction-pick-card .marketplace-card-sub { display: block; }
.auction-pick-card:focus-visible { outline: 3px solid var(--garam-c-2396e2,#2396e2); outline-offset: 2px; }
.auction-pick-badge {
    position: absolute; right: 3px; top: 3px; min-height: 22px; padding: 4px 7px; border-radius: 8px;
    background: #eb9b32; color: #fff; font-size: 10px; font-weight: 850; pointer-events: none;
}
.auction-pick-price { display: flex !important; align-items: center; justify-content: space-between; gap: 4px; margin-top: 8px; font-size: 12px; }
.auction-pick-price small { color: var(--market-muted); font-size: 10px; font-weight: 750; }
.auction-pick-price .marketplace-coin { width: 16px; height: 16px; }
.auction-picker-empty { padding: 40px 15px; }
.auction-picker-pagination { margin-top: 18px; }
#auctionPickPage { min-width: 90px; text-align: center; font-size: 14px; font-weight: 700; color: var(--garam-c-155a8d,#155a8d); }
/* Inside the picker, the pagination buttons need the Marketplace look too. */
body .auction-picker-modal .marketplace-pagination button {
    min-height: 42px; min-width: 42px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 13px; padding: 9px 15px; border: 1px solid var(--garam-c-a9cfea,#a9cfea);
    color: var(--garam-c-155a8d,#155a8d); background: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
body .auction-picker-modal .marketplace-pagination button:disabled { opacity: .4; cursor: default; }
body .auction-picker-modal .marketplace-filters input,
body .auction-picker-modal .marketplace-filters select {
    height: 45px; min-height: 45px; border: 1px solid var(--garam-c-b7d8ed,#b7d8ed); border-radius: 13px;
    background: var(--garam-c-f0f9ff,#f0f9ff); font-size: 14px;
}
body .auction-picker-modal .marketplace-filters label { color: var(--garam-c-44718d,#44718d); font-size: 13px; font-weight: 700; }

/* Bid/confirm modal above everything else on this page, under the notice. */
html body.garam-shell-body:has(#auctionsPage) #garam3DModal.garam-modal { z-index: 300300 !important; }
body:has(#auctionsPage) .marketplace-notice { z-index: 1000004; }

/* Onix/Ash */
html[data-garam-mode="dark"] body .marketplace-page .auction-start-panel {
    background: var(--garam-dark-panel,#23242a); border-color: var(--garam-dark-border,#45464d);
}
html[data-garam-mode="dark"] body .auction-primary-button {
    background: var(--garam-dark-hover,#3a3c44); border-color: var(--garam-theme-ui-accent,#b4b6c0);
    color: var(--garam-dark-text,#f3f4f7); box-shadow: none;
}
html[data-garam-mode="dark"] body .auction-picker-modal {
    --market-ink: var(--garam-dark-text,#f3f4f7);
    --market-muted: var(--garam-dark-muted,#a5a8b2);
    --market-panel: var(--garam-dark-panel,#23242a);
    --market-border: var(--garam-dark-border,#45464d);
    --market-raised: var(--garam-dark-raised,#34353c);
    --market-accent: var(--garam-theme-ui-accent,#b4b6c0);
}
html[data-garam-mode="dark"] body .auction-picker-modal .marketplace-card {
    background: var(--garam-dark-raised,#34353c); border-color: var(--garam-dark-border,#45464d);
}
html[data-garam-mode="dark"] body .auction-picker-modal .marketplace-filters input,
html[data-garam-mode="dark"] body .auction-picker-modal .marketplace-filters select,
html[data-garam-mode="dark"] body .auction-picker-modal .marketplace-pagination button {
    background: var(--garam-dark-raised,#34353c); color: var(--garam-dark-text,#f3f4f7); border-color: var(--garam-dark-border,#45464d);
}
html[data-garam-mode="dark"] body .auction-picker-modal .marketplace-filters label,
html[data-garam-mode="dark"] body #auctionPickPage { color: var(--garam-dark-muted,#a5a8b2); }
html[data-garam-mode="dark"] body .auction-card-status.is-leading { color: #5fd3a8; }
html[data-garam-mode="dark"] body .auction-card-status.is-outbid { color: #ff8a98; }

@media (max-width: 1050px) {
    .auction-picker-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    body .auction-picker-filters { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 700px) {
    .marketplace-page .auction-start-panel { align-items: stretch; padding: 18px; gap: 12px; }
    .marketplace-page .auction-start-panel .auction-primary-button { width: 100%; }
    body .auction-picker-modal { padding: 10px; }
    body .auction-picker-dialog { border-radius: 18px; max-height: calc(100dvh - 20px); }
    .auction-picker-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
    body .auction-picker-filters { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .auction-picker-header h2 { text-align: left; }
}
@media (max-width: 460px) {
    .auction-picker-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .auction-card-timer { font-size: 11px; padding: 3px 6px; min-height: 21px; }
}
@media (prefers-reduced-motion: reduce) {
    body .auction-picker-modal { transition: none; }
}