/**
 * BlokGold Price - Frontend Styles
 */

.blokgold-prices-display {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    padding: 6px 12px;
    background: #f8f8f8;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.blokgold-prices-display .bp-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.blokgold-prices-display .bp-metal {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.blokgold-prices-display .bp-metal strong {
    font-weight: 600;
}

.blokgold-prices-display .bp-price {
    font-family: monospace;
    font-weight: 500;
}

.blokgold-prices-display .bp-divider {
    color: #ccc;
}

.blokgold-prices-display .bp-gold .bp-price {
    color: #d4af37; /* Gold color */
}

.blokgold-prices-display .bp-silver .bp-price {
    color: #c0c0c0; /* Silver color */
}

/* Weight Filter */
.blokgold-weight-filter {
    margin: 15px 0;
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    display: inline-block;
}

.blokgold-weight-filter form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0;
}

.blokgold-weight-select {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    min-width: 150px;
}

.blokgold-filter-btn {
    padding: 6px 16px;
    background: #007cba;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.blokgold-filter-btn:hover {
    background: #005a8d;
}

/* Product Card Meta (weight/premium on archive) */
.blokgold-product-meta {
    line-height: 1.4;
}

.blokgold-product-meta .blokgold-weight {
    color: #555;
}

.blokgold-product-meta .blokgold-premium {
    color: #888;
    font-size: 0.9em;
}

/* Single Product Page Specs */
.blokgold-product-specs {
    clear: both;
}

.blokgold-product-specs .blokgold-weight,
.blokgold-product-specs .blokgold-premium {
    margin: 2px 0;
}

/* Price Display */
.per-price-text {
    font-size: 0.85em;
    color: #666;
    font-style: italic;
}

/* Loading state */
.blokgold-prices-display.loading {
    opacity: 0.6;
}

/* Error state */
.blokgold-prices-display.error {
    border-color: #dc3232;
}

.blokgold-prices-display.error .bp-price {
    color: #dc3232;
}

/* Responsive */
@media (max-width: 600px) {
    .blokgold-prices-display .bp-row {
        flex-direction: column;
        gap: 4px;
    }

    .blokgold-prices-display .bp-divider {
        display: none;
    }
}