﻿
/* Profile avatar gradient */
.avatar-gradient {
    background: linear-gradient(135deg, rgba(var(--main-accent), 1), rgba(var(--main-accent), 0.7));
}

/* Status badge animations */
.status-active {
    background: linear-gradient(135deg, rgba(var(--success), 0.2), rgba(var(--success), 0.1));
    border-color: rgba(var(--success), 0.5);
    animation: pulse-success 2s infinite;
}

.telegram-active {
    background: linear-gradient(135deg, rgba(var(--telegram-blue), 0.2), rgba(var(--telegram-blue), 0.1));
    border-color: rgba(var(--telegram-blue), 0.5);
    animation: pulse-success 2s infinite;
}

.status-inactive {
    background: linear-gradient(135deg, rgba(var(--inactive-dark), 0.2), rgba(var(--inactive-dark), 0.1));
    border-color: rgba(var(--inactive-dark), 0.5);
}

@keyframes pulse-success {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--success), 0.4);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(var(--success), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--success), 0);
    }
}

/* Card hover effects */
.info-card {
    background: linear-gradient(135deg, rgba(var(--block), 0.5), rgba(var(--block), 0.3));
    transition: all 0.3s ease;
}

    .info-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 20px rgba(var(--main-accent), 0.1);
        background: linear-gradient(135deg, rgba(var(--block), 0.6), rgba(var(--block), 0.4));
    }

/* Transaction row hover */
.transaction-row {
    transition: all 0.2s ease;
}

    .transaction-row:hover {
        background: rgba(var(--main-accent), 0.05);
        transform: translateX(5px);
    }

/* Progress bar for subscription */
.subscription-progress {
    background: rgba(var(--inactive-dark), 0.2);
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.subscription-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, rgba(var(--main-accent), 1), rgba(var(--main-accent), 0.8));
    transition: width 0.6s ease;
    position: relative;
    overflow: hidden;
}

    .subscription-progress-bar::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        animation: shimmer 2s infinite;
    }

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Telegram link button */
.telegram-button {
    background: linear-gradient(135deg, #0088cc, #0077b5);
    transition: all 0.3s ease;
}

    .telegram-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 136, 204, 0.4);
    }
