/* ==========================================================================
   Card Variant Picker — condition + finish quick-select button groups
   Replaces WooCommerce's dropdown selects on MTG single product pages.
   ========================================================================== */

/* Hide WC's variation table rows once the picker takes over */
.variant-picker__hidden-row,
.variant-picker__hidden-row + tr {
    display: none !important;
}

/* Hide the empty variations table shell */
.product-purchase-block .variations:not(:has(tr:not(.variant-picker__hidden-row))) {
    display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Group — one per attribute (Condition, Finish)                               */
/* -------------------------------------------------------------------------- */
.variant-picker__group {
    margin-bottom: var(--space-5);
}

.variant-picker__label {
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.variant-picker__selected-name {
    font-size: var(--text-xs);
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
    color: var(--color-stone-mid);
    transition: color var(--transition-fast);
}

/* -------------------------------------------------------------------------- */
/* Options row                                                                  */
/* -------------------------------------------------------------------------- */
.variant-picker__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* -------------------------------------------------------------------------- */
/* Base button                                                                  */
/* -------------------------------------------------------------------------- */
.variant-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-3);
    min-width: 48px;
    height: 36px;
    border-radius: var(--radius-base);
    border: 1px solid var(--color-olive-deep);
    background: var(--color-vault);
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition:
        border-color var(--transition-fast),
        background   var(--transition-fast),
        color        var(--transition-fast),
        box-shadow   var(--transition-fast),
        opacity      var(--transition-fast);
    white-space: nowrap;
    user-select: none;
    position: relative;
    overflow: hidden;
}

.variant-btn:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

.variant-btn:hover:not(.is-unavailable) {
    border-color: var(--color-olive-mid);
    color: var(--color-stone-light);
}

.variant-btn.is-selected {
    border-color: var(--color-gold);
    background: rgba(201, 168, 76, 0.1);
    color: var(--color-gold);
    box-shadow: inset 0 0 0 1px var(--color-gold);
}

.variant-btn.is-unavailable {
    opacity: 0.3;
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-color: currentColor;
}

/* -------------------------------------------------------------------------- */
/* Condition buttons — traffic-light palette NM → DMG                         */
/* -------------------------------------------------------------------------- */

/* NM — green */
.variant-btn--nm {
    border-color: rgba(90, 158, 111, 0.35);
    color: var(--color-success);
}
.variant-btn--nm:hover:not(.is-unavailable) {
    border-color: var(--color-success);
    background: rgba(90, 158, 111, 0.08);
    color: var(--color-success);
}
.variant-btn--nm.is-selected {
    border-color: var(--color-success);
    background: rgba(90, 158, 111, 0.14);
    color: var(--color-success);
    box-shadow: inset 0 0 0 1px var(--color-success);
}

/* LP — yellow-green */
.variant-btn--lp {
    border-color: rgba(142, 186, 102, 0.35);
    color: #8eba66;
}
.variant-btn--lp:hover:not(.is-unavailable) {
    border-color: #8eba66;
    background: rgba(142, 186, 102, 0.08);
    color: #8eba66;
}
.variant-btn--lp.is-selected {
    border-color: #8eba66;
    background: rgba(142, 186, 102, 0.14);
    color: #8eba66;
    box-shadow: inset 0 0 0 1px #8eba66;
}

/* MP — amber/gold */
.variant-btn--mp {
    border-color: rgba(201, 168, 76, 0.35);
    color: var(--color-gold);
}
.variant-btn--mp:hover:not(.is-unavailable) {
    border-color: var(--color-gold);
    background: rgba(201, 168, 76, 0.08);
    color: var(--color-gold);
}
.variant-btn--mp.is-selected {
    border-color: var(--color-gold);
    background: rgba(201, 168, 76, 0.14);
    color: var(--color-gold);
    box-shadow: inset 0 0 0 1px var(--color-gold);
}

/* HP — orange */
.variant-btn--hp {
    border-color: rgba(210, 130, 60, 0.35);
    color: #d2823c;
}
.variant-btn--hp:hover:not(.is-unavailable) {
    border-color: #d2823c;
    background: rgba(210, 130, 60, 0.08);
    color: #d2823c;
}
.variant-btn--hp.is-selected {
    border-color: #d2823c;
    background: rgba(210, 130, 60, 0.14);
    color: #d2823c;
    box-shadow: inset 0 0 0 1px #d2823c;
}

/* DMG — red */
.variant-btn--dmg {
    border-color: rgba(192, 57, 43, 0.35);
    color: var(--color-error);
}
.variant-btn--dmg:hover:not(.is-unavailable) {
    border-color: var(--color-error);
    background: rgba(192, 57, 43, 0.08);
    color: var(--color-error);
}
.variant-btn--dmg.is-selected {
    border-color: var(--color-error);
    background: rgba(192, 57, 43, 0.14);
    color: var(--color-error);
    box-shadow: inset 0 0 0 1px var(--color-error);
}

/* -------------------------------------------------------------------------- */
/* Finish buttons                                                               */
/* -------------------------------------------------------------------------- */

/* Non-Foil — plain, uses base styles */

/* Foil — animated shimmer */
.variant-btn--foil {
    border-color: rgba(201, 168, 76, 0.4);
    color: var(--color-gold-pale);
    background: linear-gradient(
        135deg,
        rgba(201,168,76,0.06) 0%,
        rgba(181,117,240,0.06) 50%,
        rgba(94,158,237,0.06) 100%
    );
}
.variant-btn--foil::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent        0%,
        rgba(255,255,255,0.09) 40%,
        rgba(181,117,240,0.12) 60%,
        transparent        100%
    );
    background-size: 200% 100%;
    animation: gold-shimmer 2.5s linear infinite;
    pointer-events: none;
    border-radius: inherit;
}
.variant-btn--foil:hover:not(.is-unavailable) {
    border-color: var(--color-gold);
    color: var(--color-gold-pale);
}
.variant-btn--foil.is-selected {
    border-color: var(--color-gold);
    background: linear-gradient(
        135deg,
        rgba(201,168,76,0.14) 0%,
        rgba(181,117,240,0.12) 50%,
        rgba(94,158,237,0.12) 100%
    );
    color: var(--color-gold-pale);
    box-shadow: inset 0 0 0 1px var(--color-gold);
}

/* Etched Foil — crosshatch texture */
.variant-btn--etched {
    border-color: rgba(201, 168, 76, 0.3);
    color: var(--color-stone-mid);
    background:
        repeating-linear-gradient(
            45deg,
            transparent, transparent 3px,
            rgba(201,168,76,0.04) 3px, rgba(201,168,76,0.04) 4px
        ),
        var(--color-vault);
}
.variant-btn--etched:hover:not(.is-unavailable) {
    border-color: var(--color-gold);
    color: var(--color-gold-pale);
}
.variant-btn--etched.is-selected {
    border-color: var(--color-gold);
    color: var(--color-gold-pale);
    box-shadow: inset 0 0 0 1px var(--color-gold);
}

/* -------------------------------------------------------------------------- */
/* Reset link — hide WC's "Clear" since clicking a different button is enough  */
/* -------------------------------------------------------------------------- */
.product-purchase-block .reset_variations {
    display: none !important;
}