/* Loyalty Card Component - Dynamic branding with Tailwind */

/* Card Base */
.loyalty-card {
    @apply relative rounded-2xl p-6 text-white shadow-xl transition-all duration-300;
    min-height: 200px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

.loyalty-card:hover {
    @apply shadow-2xl transform -translate-y-1;
}

/* Card with custom gradient (dynamic) */
.loyalty-card[data-gradient] {
    background: var(--card-gradient);
}

/* Level Ribbon */
.level-ribbon {
    @apply absolute top-0 right-0 overflow-hidden;
    width: 150px;
    height: 150px;
}

.level-ribbon-content {
    @apply absolute transform rotate-45 text-center font-semibold text-xs tracking-wider shadow-md;
    width: 200px;
    padding: 8px 0;
    right: -50px;
    top: 30px;
}

.level-bronze {
    background: linear-gradient(135deg, #804A00 0%, #B08D57 45%, #B08D57 55%, #804A00 100%);
    border: 1px solid rgba(176, 141, 87, 0.3);
}

.level-silver {
    background: linear-gradient(135deg, #707070 0%, #A0A0A0 45%, #A0A0A0 55%, #707070 100%);
    border: 1px solid rgba(160, 160, 160, 0.3);
}

.level-gold {
    background: linear-gradient(135deg, #FFB800 0%, #FFEB3B 45%, #FFEB3B 55%, #FFB800 100%);
    border: 1px solid rgba(255, 235, 59, 0.3);
}

.level-platinum {
    background: linear-gradient(135deg, #565656 0%, #9EA0A1 45%, #9EA0A1 55%, #565656 100%);
    border: 1px solid rgba(158, 160, 161, 0.3);
}

/* Card Logo */
.card-logo {
    @apply mx-auto mb-4 transition-transform duration-300;
    max-height: 3.5em;
}

.card-logo.with-background {
    max-height: 1.5em;
}

.loyalty-card:hover .card-logo {
    @apply transform scale-105;
}

/* Card Background Image */
.card-background {
    @apply mx-auto mb-4;
    max-width: 50%;
    padding: 0.7em 0;
}

/* Card Number */
.card-number {
    @apply font-mono text-sm opacity-80 tracking-wider mb-2 text-center;
}

/* Card Holder Name */
.card-holder {
    @apply uppercase text-sm font-medium text-center;
}

/* Card Balance */
.card-balance {
    @apply text-center mb-4;
}

.balance-amount {
    @apply text-4xl font-bold mb-1;
}

.balance-label {
    @apply text-sm opacity-75;
}

/* QR Code Overlay */
.card-qr-overlay {
    @apply absolute inset-0 bg-black/90 backdrop-blur-sm flex items-center justify-center rounded-2xl opacity-0 transition-opacity duration-300;
}

.loyalty-card:hover .card-qr-overlay {
    @apply opacity-100;
}

.qr-code-container {
    @apply bg-white p-4 rounded-xl;
}

/* Card Actions */
.card-actions {
    @apply flex gap-2 mt-4;
}

.card-action-btn {
    @apply flex-1 py-2 px-4 rounded-lg text-sm font-medium transition-all;
}

.card-action-primary {
    @apply bg-white/20 hover:bg-white/30;
}

.card-action-secondary {
    @apply bg-white/10 hover:bg-white/20;
}

/* Level Badge (Alternative to ribbon) */
.level-badge {
    @apply absolute top-4 right-4 px-3 py-1 text-xs uppercase rounded-full font-semibold;
}

.level-badge.bronze {
    @apply bg-amber-600 text-white;
}

.level-badge.silver {
    @apply bg-gray-300 text-gray-800;
}

.level-badge.gold {
    @apply bg-yellow-400 text-gray-800;
}

.level-badge.platinum {
    @apply bg-blue-400 text-white;
}

/* Card Grid Layout */
.cards-grid {
    @apply grid gap-6 sm:grid-cols-2 lg:grid-cols-3;
}

/* Card Carousel (horizontal scroll) */
.cards-carousel {
    @apply flex gap-4 overflow-x-auto pb-4 snap-x snap-mandatory;
    scrollbar-width: thin;
}

.cards-carousel .loyalty-card {
    @apply flex-none w-80 snap-center;
}

.cards-carousel::-webkit-scrollbar {
    height: 8px;
}

.cards-carousel::-webkit-scrollbar-track {
    @apply bg-gray-200 rounded-full;
}

.cards-carousel::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded-full hover:bg-gray-500;
}

/* Responsive */
@media (max-width: 640px) {
    .loyalty-card {
        @apply p-4;
        min-height: 180px;
    }
    
    .card-logo {
        max-height: 2.5em;
    }
    
    .balance-amount {
        @apply text-3xl;
    }
    
    .level-ribbon {
        width: 120px;
        height: 120px;
    }
    
    .level-ribbon-content {
        width: 160px;
        right: -40px;
        top: 25px;
    }
}