/* 🎨 Header and Badge Positioning Fixes */

/* ========== Fix Overlapping Headers ========== */

/* Package Header Spacing */
.token-price-card .package-header {
    position: relative;
    padding-top: 40px;
    margin-bottom: var(--spacing-lg);
}

/* Rarity Badge Positioning - Top Left */
.rarity-badge {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    padding: 4px 12px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    border-radius: var(--radius-md) !important;
    z-index: 11 !important;
}

/* Discount Badge - Top Right */
.discount-badge {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    padding: 6px 14px !important;
    font-size: 0.9rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: var(--radius-full) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    z-index: 10 !important;
}

/* Popular Badge - Below Discount Badge */
.popular-badge {
    position: absolute !important;
    top: 55px !important;
    right: 15px !important;
    background: linear-gradient(135deg, #ff0080, #ff4080) !important;
    color: white !important;
    padding: 4px 10px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    border-radius: var(--radius-md) !important;
    z-index: 9 !important;
    text-transform: uppercase !important;
}

/* MAX BENEFIT Indicator - Above Card */
.max-benefit-indicator {
    position: absolute !important;
    top: -25px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(135deg, #ffd700, #ff6b6b) !important;
    padding: 6px 16px !important;
    border-radius: var(--radius-full) !important;
    font-weight: 900 !important;
    font-size: 0.8rem !important;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.5) !important;
    z-index: 15 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Package Name - Ensure proper spacing */
.package-name {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 1.75rem;
    font-weight: 900;
    text-align: center;
    clear: both;
}

/* Package Icon */
.package-icon {
    font-size: 2.5rem;
    text-align: center;
    margin: 10px 0;
}

/* Token Display - Proper spacing - Exclude holofoil cards */
.token-display:not(.holo-card .token-display) {
    margin: var(--spacing-xl) 0;
    text-align: center;
    clear: both;
}

/* Dual Token Display */
.dual-token-display {
    display: flex;
    justify-content: space-around;
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
}

/* Price Section - Exclude holofoil cards */
.price-section:not(.holo-card .price-section) {
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin: var(--spacing-md) 0;
    position: relative;
    clear: both;
}

/* Savings Badge Inside Price Section */
.savings-badge {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 12px;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Benefits Section */
.rarity-benefits {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md) 0;
    clear: both;
}

/* Card Container Padding Adjustment */
.token-price-card {
    padding-top: 50px !important; /* Make room for badges */
    overflow: visible !important; /* Allow MAX BENEFIT to show above card */
}

/* Special Case: Cards with MAX BENEFIT */
.token-price-card:has(.max-benefit-indicator) {
    margin-top: 30px; /* Add space above for the indicator */
}

/* Adjust badge animations to prevent overlap */
@keyframes badge-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); } /* Reduced movement */
}