/* Custom styles for GFAVIP Perks Hub */

.perk-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.perk-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.gems-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.tier-badge {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
}

.mobile-responsive {
    /* Ensure mobile responsiveness for Summit demo */
}

@media (max-width: 640px) {
    .grid {
        grid-template-columns: 1fr;
    }
    
    .max-w-7xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .text-4xl {
        font-size: 2.25rem;
    }
}

/* Loading states for HTMX */
.htmx-indicator {
    opacity: 0;
    transition: opacity 500ms ease-in;
}

.htmx-request .htmx-indicator {
    opacity: 1;
}

.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Modal styles */
.modal-backdrop {
    backdrop-filter: blur(4px);
}

/* Button states */
.btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-loading {
    position: relative;
}

.btn-loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    margin: auto;
    border: 2px solid transparent;
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Status indicators */
.status-active {
    color: #10b981;
}

.status-pending {
    color: #f59e0b;
}

.status-expired {
    color: #ef4444;
}

/* Responsive grid adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}