/* Price bands colour only the amount, using the site's green/red palette. */
:root {
    --price-green: var(--green-300);
    --price-lime: #57750a;
    --price-amber: #936012;
    --price-orange: #a34d22;
    --price-red: var(--red-300);
}

:root[data-theme="dark"] {
    --price-lime: #b0cf73;
    --price-amber: #e1b96d;
    --price-orange: #e4a07b;
}

.price-very-cheap { --price-color: var(--price-green); }
.price-affordable { --price-color: var(--price-lime); }
.price-moderate { --price-color: var(--price-amber); }
.price-expensive { --price-color: var(--price-orange); }
.price-premium { --price-color: var(--price-red); }
.price-unavailable { --price-color: var(--muted); }

/* Artwork deck tiles keep a dark surface in both site themes. */
.shared-deck-item {
    --price-green: #99d9aa;
    --price-lime: #b0cf73;
    --price-amber: #e1b96d;
    --price-orange: #e4a07b;
    --price-red: #f3a5a5;
}

.deck-overview-metrics dd.price-value,
.card-actions-overview .card-actions-price dd.price-value,
.shared-deck-item .shared-deck-price {
    color: var(--price-color);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.shared-deck-item .shared-deck-price.price-unavailable { color: #bbc6d3; }

.deck-overview-metrics .deck-price-label {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    white-space: nowrap;
}

.deck-price-info-trigger {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: .35rem;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.deck-price-info-trigger { margin-block: -.35rem; }
.deck-price-info-trigger:hover { color: var(--text); background: var(--surface-muted); }
.deck-price-info-trigger:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The native popover stays usable without JavaScript; enhancement anchors it
   near the price while keeping it inside the visible viewport. */
.deck-price-info {
    position: fixed;
    inset: 0;
    width: min(28rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    margin: auto;
    padding: 1.15rem 1.25rem;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--line-strong);
    border-radius: .65rem;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
    font-size: .9375rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.deck-price-info[data-price-info-positioned] {
    inset: auto;
    top: var(--price-info-top);
    left: var(--price-info-left);
    width: min(28rem, var(--price-info-width));
    max-height: var(--price-info-height);
    margin: 0;
}

.deck-price-info::backdrop { background: transparent; }
.deck-price-info-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.deck-price-info-heading h2 { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.4; }
.deck-price-info > p { margin: 0 0 1rem; }
.deck-price-info-comparison { display: grid; gap: 1.25rem; margin: 1.25rem 0; padding-inline: .5rem; }
.deck-price-info-comparison > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; }
.deck-price-info-comparison dt { color: var(--muted); font-size: .9375rem; }
.deck-price-info-comparison dd { margin: 0; text-align: left; color: var(--price-color); font-size: clamp(1.75rem, 5vw, 2rem); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.deck-price-info > .deck-price-info-note { margin: .65rem 0 0; color: var(--muted); font-size: .8125rem; }

@media (max-width: 360px) {
    .deck-price-info { padding: 1rem; font-size: .875rem; }
}