/* card-ui.css
 * Reusable card UI styles - extracted from binder.css
 * Used by: binder pages, trade history, drawer, etc.
 */

/* --- Card Slot Base Styles --- */
.card-slot {
    border-radius: var(--card-corner-radius, 4%);
    overflow: visible;
    aspect-ratio: 5 / 7; /* MTG card aspect ratio */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    perspective: 1000px;
    z-index: 2;
    background-color: transparent;
    box-shadow: none;
    contain: style;
    user-select: none;
    -webkit-user-select: none;
    height: auto;
    min-width: 0;
}

.card-slot[data-clickable='false'] {
    cursor: default;
}

.card-slot[data-clickable='false']:hover .card-flipper {
    transform: none;
}

/* --- Card Content Wrapper --- */
.card-content {
    width: 100%;
    height: 100%;
    position: relative;
    transition: opacity 0.5s;
    border-radius: var(--card-corner-radius, 4%);
    background-color: transparent;
    box-shadow: none;
    overflow: visible;
}

/* --- Card Image --- */
.card-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--card-corner-radius, 4%);
    pointer-events: none;
}

/* --- Foil Effect --- */
.card-slot.is-foil .card-content::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--card-corner-radius, 4%);
    background: linear-gradient(
        100deg,
        transparent 30%,
        rgba(255, 255, 255, 0.15) 45%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.15) 55%,
        transparent 70%
    );
    background-size: 300% 100%;
    opacity: 0.6;
    animation: foil-sheen 5.33s linear infinite;
    z-index: var(--z-card-foil, 5);
    pointer-events: none;
    mix-blend-mode: screen;
}

@keyframes foil-sheen {
    0% {
        background-position: 200% 50%;
    }
    100% {
        background-position: -100% 50%;
    }
}

/* Retro frame foil masks */
.card-slot.is-foil[class*='foil-type-'] .card-content::after {
    -webkit-mask-image: var(--foil-mask-url);
    mask-image: var(--foil-mask-url);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Foil type mask URLs */
.foil-type-old-border {
    --foil-mask-url: url('masks/old-border-mask.png');
}
.foil-type-old-border-green {
    --foil-mask-url: url('masks/old-border-mask-green.png');
}
.foil-type-old-border-black {
    --foil-mask-url: url('masks/old-border-mask-black.png');
}

/* --- Card Overlay (Base) --- */
.card-overlay {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 13px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 0.75rem;
    z-index: var(--z-card-overlay, 8);
    pointer-events: none;
    line-height: 1.2;
    font-family: monospace;
}

/* --- Price Indicator --- */
.price-indicator {
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Foil indicator dot next to price */
.price-foil-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        #ff6b6b 0%,
        #ffa500 20%,
        #ffeb3b 35%,
        #4caf50 50%,
        #2196f3 65%,
        #9c27b0 80%,
        #ff6b6b 100%
    );
    flex-shrink: 0;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);
    margin-left: -2px;
}

/* --- Quantity Indicator --- */
.quantity-indicator {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    padding: 1px 5px;
    background-color: rgba(75, 85, 99, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: var(--z-card-quantity, 9);
}