/**
 * VivaCoin Public Styles
 * @package VivaCoin
 */

/* User Counter */
.vivacoin-users-counter-value {
    color: var(--vc-counter-color, inherit);
    font-size: var(--vc-counter-font-size, inherit);
}

/* Chart Container Styles */
.vivacoin-chart-container {
    position: relative;
    overflow: hidden;
}

.vivacoin-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e9ecef;
}

.vivacoin-chart-title h4 {
    margin: 0;
    color: #2E7D32;
    font-weight: 600;
    font-size: 18px;
}

.vivacoin-chart-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.vivacoin-period-buttons {
    display: flex;
    gap: 2px;
    overflow: hidden;
}

.vivacoin-period-btn {
    background: transparent;
    border: none;
    padding: .375rem .75rem;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 600;
    color: white;
    transition: all 0.2s ease;
}

.vivacoin-period-btn.active,
.vivacoin-period-btn:hover {
    background: #02F860;
    color: #1D1D1D;
}

/* Light theme — period buttons */
.vc-theme-light .vivacoin-period-btn {
    background: transparent;
    color: #010C26;
}

.vc-theme-light .vivacoin-period-btn.active,
.vc-theme-light .vivacoin-period-btn:hover {
    background: #39CEB4;
    color: #010C26;
}

.vivacoin-chart-content {
    position: relative;
    width: 100%;
    height: calc(100% - 60px);
}

.vivacoin-chart-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}

.vivacoin-chart-loading .vivacoin-logo {
    width: 48px;
    height: 48px;
    margin: 0 auto 15px;
    background: url(../img/vivacoin.gif) no-repeat center center;
    background-size: cover;
    border-radius: 50%;
    position: relative;
}

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

/* Price Widget Styles */
.vivacoin-price-widget {
    background: #fff;
    border: 2px solid #4CAF50;
    border-radius: 12px;
    padding: 20px;
    margin: 15px 0;
    position: relative;
    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.1);
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.vivacoin-price-widget:hover {
    box-shadow: 0 6px 16px rgba(76, 175, 80, 0.2);
    transform: translateY(-2px);
}

/* Price Widget Header */
.vivacoin-price-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
    color: #2E7D32;
}

.vivacoin-symbol {
    background: linear-gradient(45deg, #4CAF50, #2E7D32);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    margin-right: 8px;
    font-size: 14px;
    font-weight: bold;
}

.vivacoin-pair {
    color: #666;
    font-weight: 400;
}

/* Price Widget Main Display */
.vivacoin-price-main {
    display: flex;
    align-items: baseline;
    margin-bottom: 12px;
    gap: 8px;
}

.vivacoin-price-row,
.vivacoin-price-row .vivacoin-price-value {
    font-size: 18px !important;
    font-weight: 400;
    color: #ffffff;
    line-height: 130% !important;
}

.vc-theme-light .vivacoin-price-row,
.vc-theme-light .vivacoin-price-row .vivacoin-price-value {
    color: #053190;
}

.vivacoin-price-row .vivacoin-change-percent {
    font-weight: 400;
    font-size: 1.125rem;
}

.vivacoin-price-value {
    font-size: 32px;
    font-weight: 700;
    color: #2E7D32;
    line-height: 1;
}

.vivacoin-price-currency {
    font-size: 18px;
    color: #666;
    font-weight: 500;
}

/* Price Change Indicators */
.vivacoin-price-change {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.vivacoin-change-24h {
    font-weight: 600;
    font-size: 16px;
}

.vivacoin-change-percent {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
}

.vivacoin-change-24h.positive,
.vivacoin-change-percent.positive {
    color: #4CAF50;
}

.vivacoin-change-24h.negative,
.vivacoin-change-percent.negative {
    color: #f44336;
}

.vivacoin-change-percent.positive {
    background: rgba(76, 175, 80, 0.1);
}

.vivacoin-change-percent.negative {
    background: rgba(244, 67, 54, 0.1);
}

/* Volume Display */
.vivacoin-price-volume {
    color: #666;
    font-size: 14px;
    margin-bottom: 8px;
}

.vivacoin-volume-value {
    font-weight: 600;
    color: #333;
}

/* Loading State */
.vivacoin-price-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 10px 20px;
    border-radius: 20px;
    color: #666;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 5;
}

/* Widget Format Variations */
.vivacoin-price-widget.vivacoin-price-compact {
    padding: 12px 16px;
    margin: 10px 0;
}

.vivacoin-price-compact .vivacoin-price-header {
    font-size: 14px;
    margin-bottom: 8px;
}

.vivacoin-price-compact .vivacoin-price-value {
    font-size: 24px;
}

.vivacoin-price-compact .vivacoin-price-currency {
    font-size: 14px;
}

.vivacoin-price-widget.vivacoin-price-minimal {
    padding: 8px 12px;
    border: 1px solid #ddd;
    display: inline-block;
    margin: 5px;
}

.vivacoin-price-minimal .vivacoin-price-header {
    display: none;
}

.vivacoin-price-minimal .vivacoin-price-main {
    margin-bottom: 0;
}

.vivacoin-price-minimal .vivacoin-price-value {
    font-size: 18px;
}

.vivacoin-price-minimal .vivacoin-price-currency {
    font-size: 12px;
}

/* Dark Theme */
.vivacoin-chart-container.dark,
.vivacoin-chart-container.dark-theme {
    background: #1d1d1d;
    border-color: #333;
    color: #fff;
}

.vivacoin-price-widget.dark,
.vivacoin-price-widget.dark-theme {
    background: #1d1d1d;
    border-color: #4CAF50;
    color: #fff;
}

.vivacoin-price-widget.dark .vivacoin-price-value,
.vivacoin-price-widget.dark-theme .vivacoin-price-value {
    color: #4CAF50;
}

.vivacoin-price-widget.dark .vivacoin-pair,
.vivacoin-price-widget.dark .vivacoin-price-currency,
.vivacoin-price-widget.dark-theme .vivacoin-pair,
.vivacoin-price-widget.dark-theme .vivacoin-price-currency {
    color: #ccc;
}

.vivacoin-price-widget.dark .vivacoin-price-volume,
.vivacoin-price-widget.dark-theme .vivacoin-price-volume {
    color: #999;
}

/* Responsive Design */
@media (max-width: 768px) {
    .vivacoin-price-widget {
        padding: 15px;
        margin: 10px 0;
    }
    
    .vivacoin-price-value {
        font-size: 28px !important;
    }
    
    .vivacoin-chart-container {
        margin: 15px 0;
    }
    
    .vivacoin-chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 12px 15px;
    }
    
    .vivacoin-chart-controls {
        width: 100%;
        justify-content: center;
    }
    
    .vivacoin-period-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .vivacoin-price-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .vivacoin-price-change {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .vivacoin-chart-header {
        padding: 10px 12px;
    }
    
    .vivacoin-chart-title h4 {
        font-size: 16px;
    }
    
    .vivacoin-period-btn {
        padding: 5px 10px;
        font-size: 12px;
    }
}

/* Error States */
.vivacoin-error {
    background: #ffebee;
    border: 1px solid #f44336;
    color: #c62828;
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
    text-align: center;
}

.vivacoin-error::before {
    content: "⚠️";
    margin-right: 8px;
}

/* Success States */
.vivacoin-success {
    background: #e8f5e8;
    border: 1px solid #4CAF50;
    color: #2e7d32;
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
    text-align: center;
}

/* Utility Classes */
.vivacoin-text-center {
    text-align: center;
}

.vivacoin-text-right {
    text-align: right;
}

.vivacoin-mb-0 {
    margin-bottom: 0 !important;
}

.vivacoin-mt-0 {
    margin-top: 0 !important;
}

/* Chart Container Themes */
.vivacoin-chart-container.light {
    background: #ffffff;
    border-color: #e0e0e0;
    color: #053190;
}

.vc-theme-light .vivacoin-inline-price,
.vc-theme-light .vivacoin-price-value,
.vc-theme-light .vivacoin-change-percent {
    color: #053190;
}

.vivacoin-chart-container.dark {
    background: #1d1d1d;
    border-color: #404040;
    color: #fff;
}

/* Converter Widget Styles */
.vivacoin-converter-widget {
    margin: 0 auto;
    transition: all 0.3s ease;
}

.vivacoin-converter-widget:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.vivacoin-converter-widget.bg-dark {
    background-color: #2d2d2d !important;
    border-color: #404040;
}

.vivacoin-converter-widget .currency-icon {
    min-width: 24px;
    min-height: 24px;
    font-size: 10px;
    font-weight: bold;
}

.vivacoin-converter-widget .form-control:read-only {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.vivacoin-converter-widget.bg-dark .form-control:read-only {
    background-color: #495057;
    color: #ffffff;
    border-color: #6c757d;
}

.vivacoin-converter-widget .input-group-text {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    font-weight: 500;
}

.vivacoin-converter-widget.bg-dark .input-group-text {
    background-color: #6c757d;
    color: #ffffff;
    border-color: #495057;
}

.vivacoin-converter-widget .form-control-lg {
    font-size: 1.75rem;
    font-weight: 600;
    min-height: unset;
}

.vivacoin-converter-widget .badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}

.vivacoin-converter-widget .alert {
    margin-bottom: 0;
    border-radius: 8px;
}

.vivacoin-converter-widget .card-title {
    color: #2E7D32;
    font-weight: 600;
}

.vivacoin-converter-widget.bg-dark .card-title {
    color: #4CAF50;
}

/* Converter Animation Effects */
.vivacoin-converter-widget .currency-icon {
    transition: transform 0.2s ease;
}

.vivacoin-converter-widget .currency-icon:hover {
    transform: scale(1.1);
}

.vivacoin-converter-widget .form-control:focus {
    border-color: #4CAF50;
    box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
}

/* Responsive Design for Converter */
@media (max-width: 576px) {
    .vivacoin-converter-widget {
        margin: 10px;
        max-width: calc(100% - 20px) !important;
    }
    
    .vivacoin-converter-widget .input-group-text {
        font-size: 0.875rem;
        padding: 0.375rem 0.5rem;
    }
}

/* Enhanced Input Focus Styles */
.vivacoin-converter-widget .form-control:focus {
    border-color: #4CAF50 !important;
    box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25) !important;
    outline: none;
}

.gradient-green-box {
    border-radius: 1rem !important;
    position: relative;
    border: none !important;
    background: transparent;
    transition: background 0.5s ease, transform 0.3s ease;
}

.gradient-green-box::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 3px; /* border length  */
    background: linear-gradient(101.27deg, rgba(0, 30, 22, 0) 0%, #009275 100%);
    border-radius: inherit;
    mask: conic-gradient(#1D1D1D 0 0) content-box exclude,conic-gradient(#1D1D1D 0 0);
    opacity: 1;
    transition: opacity 0.5s ease;
}

.gradient-green-box.active, .gradient-green-box:hover {
    background: linear-gradient(256.54deg, #009275 0%, #001E16 100%), url('../img/box-bg.png');
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
}

.gradient-green-box.active::before,
.gradient-green-box:hover::before {
    opacity: 0;
}


.vivacoin-metrics-period-buttons .btn:not(.active) {
    color: #FDFDFE;
    border: none;
    font-size: 14px;
}

.vivacoin-metric-box .card-subtitle {
    font-size: clamp(0.875rem, 0.635rem + 0.962vw, 1.5rem);
    line-height: 120%;
}


/* Icon Base Class */
.vivacoin-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
}

/* Wallet Icon */
.vivacoin-wallet-icon {
    mask-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M33 28H33.02M6 10V38C6 40.2091 7.79086 42 10 42H38C40.2091 42 42 40.2091 42 38V18C42 15.7909 40.2091 14 38 14L10 14C7.79086 14 6 12.2091 6 10ZM6 10C6 7.79086 7.79086 6 10 6H34M34 28C34 28.5523 33.5523 29 33 29C32.4477 29 32 28.5523 32 28C32 27.4477 32.4477 27 33 27C33.5523 27 34 27.4477 34 28Z' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M33 28H33.02M6 10V38C6 40.2091 7.79086 42 10 42H38C40.2091 42 42 40.2091 42 38V18C42 15.7909 40.2091 14 38 14L10 14C7.79086 14 6 12.2091 6 10ZM6 10C6 7.79086 7.79086 6 10 6H34M34 28C34 28.5523 33.5523 29 33 29C32.4477 29 32 28.5523 32 28C32 27.4477 32.4477 27 33 27C33.5523 27 34 27.4477 34 28Z' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* User Icon */
.vivacoin-user-icon {
    mask-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.9994 14C31.9994 18 28.7936 22 23.9994 22C19.5994 22 15.9993 18.4468 15.9993 14C15.9993 9.55318 19.5994 6 23.9994 6C27.9994 6 31.9994 9.19161 31.9994 14Z' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M23.9994 28C27.7969 28 32 29 34 30C36.8284 31.4142 40 33.7204 40 37C40 41 31.8771 42.0674 23.9994 42C15.8807 41.9306 8 41.2241 8 37C8 33 11.3857 31.3072 14 30C16 29 20.9992 28 23.9994 28Z' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.9994 14C31.9994 18 28.7936 22 23.9994 22C19.5994 22 15.9993 18.4468 15.9993 14C15.9993 9.55318 19.5994 6 23.9994 6C27.9994 6 31.9994 9.19161 31.9994 14Z' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M23.9994 28C27.7969 28 32 29 34 30C36.8284 31.4142 40 33.7204 40 37C40 41 31.8771 42.0674 23.9994 42C15.8807 41.9306 8 41.2241 8 37C8 33 11.3857 31.3072 14 30C16 29 20.9992 28 23.9994 28Z' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Card Up Icon */
.vivacoin-card-up-icon {
    mask-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 36L38 30M38 30L44 36M38 30V42M44 20H4M44 24V16.4C44 14.1598 44 13.0397 43.564 12.184C43.1805 11.4314 42.5686 10.8195 41.816 10.436C40.9603 10 39.8402 10 37.6 10H10.4C8.15979 10 7.03969 10 6.18404 10.436C5.43139 10.8195 4.81947 11.4314 4.43597 12.184C4 13.0397 4 14.1598 4 16.4V31.6C4 33.8402 4 34.9603 4.43597 35.816C4.81947 36.5686 5.43139 37.1805 6.18404 37.564C7.03969 38 8.15979 38 10.4 38H24' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 36L38 30M38 30L44 36M38 30V42M44 20H4M44 24V16.4C44 14.1598 44 13.0397 43.564 12.184C43.1805 11.4314 42.5686 10.8195 41.816 10.436C40.9603 10 39.8402 10 37.6 10H10.4C8.15979 10 7.03969 10 6.18404 10.436C5.43139 10.8195 4.81947 11.4314 4.43597 12.184C4 13.0397 4 14.1598 4 16.4V31.6C4 33.8402 4 34.9603 4.43597 35.816C4.81947 36.5686 5.43139 37.1805 6.18404 37.564C7.03969 38 8.15979 38 10.4 38H24' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Card Down Icon */
.vivacoin-card-down-icon {
    mask-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 36L38 42M38 42L44 36M38 42V30M44 20H4M44 24V16.4C44 14.1598 44 13.0397 43.564 12.184C43.1805 11.4314 42.5686 10.8195 41.816 10.436C40.9603 10 39.8402 10 37.6 10H10.4C8.15979 10 7.03969 10 6.18404 10.436C5.43139 10.8195 4.81947 11.4314 4.43597 12.184C4 13.0397 4 14.1598 4 16.4V31.6C4 33.8402 4 34.9603 4.43597 35.816C4.81947 36.5686 5.43139 37.1805 6.18404 37.564C7.03969 38 8.15979 38 10.4 38H24' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 36L38 42M38 42L44 36M38 42V30M44 20H4M44 24V16.4C44 14.1598 44 13.0397 43.564 12.184C43.1805 11.4314 42.5686 10.8195 41.816 10.436C40.9603 10 39.8402 10 37.6 10H10.4C8.15979 10 7.03969 10 6.18404 10.436C5.43139 10.8195 4.81947 11.4314 4.43597 12.184C4 13.0397 4 14.1598 4 16.4V31.6C4 33.8402 4 34.9603 4.43597 35.816C4.81947 36.5686 5.43139 37.1805 6.18404 37.564C7.03969 38 8.15979 38 10.4 38H24' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* Arrow Up Icon */
.vivacoin-arrow-up-icon {
    mask-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 16.625V4.375M10.5 4.375L4.375 10.5M10.5 4.375L16.625 10.5' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 16.625V4.375M10.5 4.375L4.375 10.5M10.5 4.375L16.625 10.5' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Arrow Down Icon */
.vivacoin-arrow-down-icon {
    mask-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 4.375V16.625M10.5 16.625L16.625 10.5M10.5 16.625L4.375 10.5' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 4.375V16.625M10.5 16.625L16.625 10.5M10.5 16.625L4.375 10.5' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Icon Size Variations */
.vivacoin-icon-sm {
    width: 0.875rem;
    height: 0.875rem;
}

.vivacoin-icon-md {
    width: 1.375rem;
    height: 1.375rem;
}

.vivacoin-icon-lg {
    width: 1.5rem;
    height: 1.5rem;
}

.vivacoin-icon-xl {
    width: 2rem;
    height: 2rem;
}

.vivacoin-icon-xxl {
    width: 3rem;
    height: 3rem;
}

/* Responsive Icon Size Variations */
@media (min-width: 576px) {
    .vivacoin-sm-icon-sm {
        width: 0.875rem;
        height: 0.875rem;
    }

    .vivacoin-sm-icon-md {
        width: 1.375rem;
        height: 1.375rem;
    }

    .vivacoin-sm-icon-lg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .vivacoin-sm-icon-xl {
        width: 2rem;
        height: 2rem;
    }

    .vivacoin-sm-icon-xxl {
        width: 3rem;
        height: 3rem;
    }
}

@media (min-width: 768px) {
    .vivacoin-md-icon-sm {
        width: 0.875rem;
        height: 0.875rem;
    }

    .vivacoin-md-icon-md {
        width: 1.375rem;
        height: 1.375rem;
    }

    .vivacoin-md-icon-lg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .vivacoin-md-icon-xl {
        width: 2rem;
        height: 2rem;
    }

    .vivacoin-md-icon-xxl {
        width: 3rem;
        height: 3rem;
    }
}

@media (min-width: 992px) {
    .vivacoin-lg-icon-sm {
        width: 0.875rem;
        height: 0.875rem;
    }

    .vivacoin-lg-icon-md {
        width: 1.375rem;
        height: 1.375rem;
    }

    .vivacoin-lg-icon-lg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .vivacoin-lg-icon-xl {
        width: 2rem;
        height: 2rem;
    }

    .vivacoin-lg-icon-xxl {
        width: 3rem;
        height: 3rem;
    }
}

@media (min-width: 1200px) {
    .vivacoin-xl-icon-sm {
        width: 0.875rem;
        height: 0.875rem;
    }

    .vivacoin-xl-icon-md {
        width: 1.375rem;
        height: 1.375rem;
    }

    .vivacoin-xl-icon-lg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .vivacoin-xl-icon-xl {
        width: 2rem;
        height: 2rem;
    }

    .vivacoin-xl-icon-xxl {
        width: 3rem;
        height: 3rem;
    }
}

@media (min-width: 1400px) {
    .vivacoin-xxl-icon-sm {
        width: 0.875rem;
        height: 0.875rem;
    }

    .vivacoin-xxl-icon-md {
        width: 1.375rem;
        height: 1.375rem;
    }

    .vivacoin-xxl-icon-lg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .vivacoin-xxl-icon-xl {
        width: 2rem;
        height: 2rem;
    }

    .vivacoin-xxl-icon-xxl {
        width: 3rem;
        height: 3rem;
    }
}
/* Progress Bars Widget */
.vivacoin-progress-bars-widget {
}

.vivacoin-progress-row {
    /* margin-bottom: 30px; */
    font-size: clamp(0.875rem, 0.827rem + 0.192vw, 1rem);
}

.progress-bar-container {
    position: relative;
    height: clamp(0.75rem, 0.654rem + 0.385vw, 1rem) !important;
    display: flex;
    border-radius: 20px;
    overflow: hidden;
    background: transparent;
}

.progress-bar-left,
.progress-bar-right {
    height: 100%;
    width: 50%; /* Start at 0% for animation */
    transition: none; /* No transition initially */
    position: relative;
    border-radius: 20px;
}

/* Animate class triggers the transition */
.progress-bar-left.animate,
.progress-bar-right.animate {
    transition: width 1.5s cubic-bezier(0.4, 0.0, 0.2, 1); /* Smooth ease-out curve */
}

.progress-bar-left {
    background: linear-gradient(90deg, #00ff88 0%, #00cc6a 100%);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

.progress-bar-right {
    background: linear-gradient(90deg, #ff4444 0%, #cc0000 100%);
    box-shadow: 0 0 10px rgba(255, 68, 68, 0.3);
}

/* Loading state pulse animation */
.vivacoin-progress-bars-widget::before {
    content: " ";
    background: url(../img/more-cash.svg) no-repeat center center transparent;
    width: 124px;
    height: 124px;
    z-index: 1;
    margin: 0 auto;
    display: block;
}

.vivacoin-progress-bars-widget.loading .progress-bar-left,
.vivacoin-progress-bars-widget.loading .progress-bar-right {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { 
        opacity: 0.6; 
    }
    50% { 
        opacity: 1; 
    }
}

/* Retention Chart Widget */
.viva-retention-widget {
    padding: 20px;
    border-radius: 8px;
}

.viva-retention-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
}

.viva-retention-header p {
    font-size: 0.9rem;
}

.viva-retention-chart-container {
    background: transparent;
    padding: 0;
}

/* App Download Shortcode */
.vivacoin-app-download {
    width: 100%;
    background: linear-gradient(180deg, #208170 0%, #0C2F29 100%);
}

.vivacoin-app-download .vca-qr-box {
    padding: 16px;
}

.vivacoin-app-download .vca-left-img {
    max-width: 100%;
    height: auto;
}

.vivacoin-app-download .vca-qr-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.vivacoin-app-download .vca-store-badge {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    background: #000;
    border: 2px solid #fff;
    border-radius: 10px;
    padding: 10px 14px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.vivacoin-app-download .vca-store-badge:hover {
    opacity: 0.82;
    text-decoration: none;
}

.vivacoin-app-download .vca-badge-icon-col {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vivacoin-app-download .vca-badge-icon {
    height: 40px;
    width: auto;
}

.vivacoin-app-download .vca-badge-text-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vivacoin-app-download .vca-badge-pretitle {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    line-height: 1;
    letter-spacing: 0.3px;
    display: block;
}

.vivacoin-app-download .vca-badge-name {
    height: 24px;
    width: auto;
    display: block;
}

@media (max-width: 767px) {
    .vivacoin-app-download .vca-qr-box {
    }

    .vivacoin-app-download .vca-qr-img {
        width: 120px;
        height: 120px;
    }

    .vivacoin-app-download .bg-primary-gradient {
        /* background: linear-gradient(180deg, #009275 0%, #001E16 100%); */
    }

    .vivacoin-app-download .vca-badge-icon-col {
        height: 28px;
        width: auto;
    }

    .vivacoin-app-download .vca-badge-icon {
        height: 28px;
    }

    .vivacoin-app-download .vca-store-badge {
        padding: 8px;
        border: 1px solid #fff;
        gap: 8px;
    }

    .vivacoin-app-download .vca-badge-name {
        height: 18px;
    }

    .vivacoin-app-download .vca-badge-pretitle {
        font-size: 10.65px;
        font-weight: 500;
        letter-spacing: 0px;
    }
}

@media (min-width: 768px) {
    .vivacoin-app-download .vca-left-img {
        width: 110%;
        max-width: 500px;
    }

    .vivacoin-app-download .vca-qr-img {
        width: 150px;
        height: 150px;
    }
}