.wgb-progress-bar-container{
    max-width: 900px;
}
.gift-progress-container {
        border-radius: 12px;
        padding: 20px;
        margin: 20px 0;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        position: relative;
        overflow: hidden;
    }

    .gift-progress-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
        background-size: 20px 20px;
        animation: progress-shine 2s linear infinite;
    }

    .progress-header {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        position: relative;
        z-index: 1;
    }

    .gift-icon {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        padding: 8px;
        margin-right: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .progress-text {
        flex: 1;
    }

    .progress-message {
        font-size: 16px;
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .progress-message.success {
        color: #fff;
        animation: success-pulse 1.5s ease-in-out infinite;
    }

    .progress-bar-wrapper {
        position: relative;
        z-index: 1;
    }

    .progress-bar {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 25px;
        height: 12px;
        overflow: hidden;
        margin-bottom: 8px;
        position: relative;
    }

    .progress-fill {
        height: 100%;
        border-radius: 25px;
        transition: width 0.8s ease-in-out;
        position: relative;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .progress-fill::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        animation: progress-glow 2s ease-in-out infinite;
    }

    .progress-amounts {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        font-weight: 500;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .current-amount {
        opacity: 0.9;
    }

    .target-amount {
        opacity: 0.9;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .gift-progress-container {
            padding: 15px;
            margin: 15px 0;
        }

        .progress-message {
            font-size: 14px;
        }

        .gift-icon {
            padding: 6px;
            margin-right: 8px;
        }

        .gift-icon svg {
            width: 20px;
            height: 20px;
        }
    }

    /* Dark theme support */
    /* Success state when gift is unlocked */
    .gift-progress-container.gift-unlocked {
        background: linear-gradient(135deg, #28a745, #20c997);
        animation: success-glow 2s ease-in-out infinite alternate;
    }

    .gift-progress-container.gift-unlocked .progress-fill {
        background: linear-gradient(90deg, #fff, #e8f5e8);
        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
    }

    /* Animations */
    /* @keyframes progress-shine {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    } */

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

    @keyframes success-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.8; }
    }

    @keyframes success-glow {
        0% { box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3); }
        100% { box-shadow: 0 4px 25px rgba(40, 167, 69, 0.6); }
    }

    /* Dark theme support */
    @media (prefers-color-scheme: dark) {
        .progress-fill {
            background: linear-gradient(90deg, #e0e0e0, #d0d0d0);
        }
        
        .gift-progress-container.gift-unlocked .progress-fill {
            background: linear-gradient(90deg, #f8f9fa, #e9ecef);
        }
    }