/*
Theme Name: Mweb Digiland Child
Theme URI: https://example.com
Description: قالب چایلد برای Mweb Digiland با قابلیت بروزرسانی لحظه‌ای قیمت طلا
Author: Your Name
Author URI: https://example.com
Template: mweb-digiland-pro
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mweb-digiland-child
*/

/* ==========================================
   استایل‌های جدید (فقط المان‌های اضافه شده)
   ========================================== */

/* -------------------------------------------
   1. تایمر پرداخت (المان جدید)
   ------------------------------------------- */

.mweb-payment-timer-notice {
    position: relative;
    margin-bottom: 20px !important;
    padding: 20px !important;
    background: linear-gradient(135deg, #f0f8ff 0%, #e3f2fd 100%) !important;
    border-right: 5px solid #2196F3 !important;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15);
    animation: slideInDown 0.5s ease-out;
}

.mweb-payment-timer-notice strong {
    font-size: 16px;
    color: #1976D2;
}

#mweb-payment-countdown {
    display: inline-block;
    font-size: 28px !important;
    font-weight: bold !important;
    color: #2196F3 !important;
    /* استفاده از فونت قالب مادر یا فونت استاندارد اعداد */
    font-family: inherit; 
    background: #ffffff;
    padding: 10px 20px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-top: 10px;
    transition: all 0.3s ease;
    direction: ltr; /* برای نمایش صحیح اعداد */
}

#mweb-payment-countdown.warning {
    color: #ff9800 !important;
    animation: pulse 1s infinite;
}

#mweb-payment-countdown.danger {
    color: #f44336 !important;
    animation: shake 0.5s infinite;
}

/* -------------------------------------------
   2. انیمیشن‌های مورد نیاز تایمر
   ------------------------------------------- */

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}

/* -------------------------------------------
   3. افکت بروزرسانی قیمت (فقط انیمیشن)
   ------------------------------------------- */

/* 
   نکته: استایل‌های پایه .current_gold_rate از خود قالب مادر خوانده می‌شوند.
   ما فقط کلاس gold-price-updated را برای افکت لحظه‌ای اضافه می‌کنیم.
*/

.current_gold_rate.gold-price-updated {
    animation: priceUpdate 1.0s ease-in-out;
    /* یک سایه سبز ملایم فقط برای لحظه آپدیت */
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.5); 
    border-radius: 4px; /* کمی گردی برای زیبایی افکت */
}

@keyframes priceUpdate {
    0% {
        transform: scale(1);
        background-color: transparent; /* شروع از حالت عادی */
    }
    50% {
        transform: scale(1.05);
        background-color: rgba(76, 175, 80, 0.2); /* فلش سبز ملایم */
    }
    100% {
        transform: scale(1);
        background-color: transparent;
    }
}

/* -------------------------------------------
   4. ریسپانسیو برای تایمر
   ------------------------------------------- */
@media (max-width: 768px) {
    .mweb-payment-timer-notice {
        padding: 15px !important;
    }
    
    #mweb-payment-countdown {
        font-size: 22px !important;
        padding: 8px 15px;
    }
}