/* ============================================================
   ===== ANIMATIONS.CSS — نسخه نهایی «Liquid Flow لاکچری v17» =====
   ===== رستوران مدرن سوفیا =====
   ============================================================
   ===== 🔴 تغییرات نسخه v17 (هماهنگ با index.html بهبودیافته): =====
   ===== ✅ اضافه شدن @keyframes keywordShine (درخشش کلمات کلیدی) =====
   ===== ✅ اضافه شدن @keyframes decorativePulse (پالس ایموجی‌های تزئینی) =====
   ===== ✅ بهبود یافته liquidLineRise (موج سه‌بعدی آرام‌تر) =====
   ===== ✅ بهبود یافته liquidWordWave (چرخش ملایم‌تر) =====
   ===== ✅ اضافه شدن کلاس keyword-rose (گرادیان رز صورتی) =====
   ===== ✅ دکمه پرش با ظاهر لوکس‌تر =====
   ===== ✅ حفظ کامل تغییرات v16 (حذف بیضی زیر پیام‌ها) =====
   ============================================================
   ===== 🔴 تغییرات نسخه v16 (حذف قطعی بیضی/هاله زیر کارت پیام): =====
   ===== ❌ حذف کامل box-shadow از .liquid-message =====
   ===== ✅ جایگزینی با border نازک بنفش =====
   ===== ❌ حذف کامل text-shadow از keyframes liquidLineRise =====
   ===== ❌ حذف کامل text-shadow از keyframes liquidWordWave =====
   ===== ❌ حذف کامل بلاک .liquid-message .liquid-line::after =====
   ===== ❌ حذف کامل @keyframes liquidShadowFade =====
   ===== ✅ حفظ .liquid-message::before (خط تزئینی بالای کارت) =====
   ============================================================
   ===== 💜 قاعده طلایی نسخه v17: =====
   ===== ۱. هیچ box-shadow روی .liquid-message وجود ندارد =====
   ===== ۲. هیچ text-shadow اضافی روی خطوط پیام وجود ندارد =====
   ===== ۳. فقط انیمیشن‌های مجاز (در whitelist) اجرا می‌شوند =====
   ===== ۴. فقط typing-indicator مجاز به infinite است =====
   ===== ۵. keywordShine و decorativePulse مجاز به infinite هستند =====
   ===== ۶. انیمیشن‌های ورود فقط یک بار اجرا می‌شوند =====
   ===== ۷. قیمت‌ها: زرد ملایم + سبز پررنگ (#047857) =====
   ===== ۸. استپر: مرحله فعال زرد (#FACC15) قبل از سبز شدن =====
   ===== ۹. 🔴 هیچ بیضی/سایه‌ای زیر پیام‌ها وجود ندارد =====
   ============================================================ */

:root {
    /* ===== 💜 بنفش اصلی ===== */
    --gold-bright: #8B1A8B;
    --gold-light: #B07CC6;
    --gold-matte: #6B0F6B;
    --gold-soft: #C89FE0;
    --gold-deep: #4A0A4A;

    /* ===== 🟣 بنفش روشن ===== */
    --purple: #8B1A8B;
    --purple-light: #9B59B6;
    --purple-soft: #C89FE0;

    /* ===== 🌹 رز صورتی ===== */
    --rose: #E91E63;
    --rose-light: #F06292;
    --rose-dark: #B0143F;

    /* ===== 💛 زرد ملایم (پس‌زمینه قیمت) ===== */
    --accent-yellow: #FACC15;
    --accent-yellow-light: #FDE047;
    --accent-yellow-soft: rgba(253, 224, 71, 0.35);
    --accent-yellow-softer: rgba(253, 224, 71, 0.22);
    --accent-yellow-glow: rgba(250, 204, 21, 0.30);
    --accent-yellow-border: rgba(202, 138, 4, 0.50);
    --accent-yellow-border-strong: rgba(202, 138, 4, 0.80);

    /* ===== 💚 سبز پررنگ زمردی (متن قیمت) ===== */
    --accent-emerald: #047857;
    --accent-emerald-light: #059669;
    --accent-emerald-dark: #065F46;
    --accent-emerald-soft: #10B981;
    --accent-emerald-glow: rgba(4, 120, 87, 0.50);
    --accent-emerald-glow-strong: rgba(4, 120, 87, 0.70);

    /* ===== 🎯 نام‌های قدیمی (برای سازگاری) ===== */
    --accent-gold: #047857;
    --accent-gold-light: #059669;

    /* ===== کرم و شامپاینی ===== */
    --cream: #F5F0E8;
    --champagne: #E8DCC8;

    /* ===== قهوه‌ای اشرافی ===== */
    --espresso: #2A1F1A;
    --mocha: #4A3A30;
    --coffee: #6F4E37;
    --coffee-light: #A67B5B;

    /* ===== زمان‌بندی لوکس ===== */
    --luxury-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --luxury-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --luxury-duration: 0.9s;
    --luxury-duration-slow: 1.4s;
}

/* ============================================================
   ===== 🔴 قفل اصلی — هوشمند و دقیق =====
   ============================================================ */

*,
*::before,
*::after {
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.liquid-line,
.liquid-word,
.liquid-message .liquid-icon,
.liquid-skip-btn,
.msg-line,
.splash-logo,
.splash-title,
.splash-subtitle,
.splash-divider,
.loader-bar,
.splash-message,
.splash-loader,
.typing-indicator span,
.message,
.diamond-diamond {
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/* ===== استثناهای مجاز به infinite ===== */
.typing-indicator span {
    animation-iteration-count: infinite;
}

/* ===== ✅ انیمیشن‌های درخشش پویا (مجاز به infinite) ===== */
.liquid-message .liquid-word.keyword-gold,
.liquid-message .liquid-word.keyword-purple,
.liquid-message .liquid-word.keyword-rose {
    animation-iteration-count: 1, infinite;
    animation-fill-mode: forwards, none;
}

.liquid-message .liquid-word.decorative {
    animation-iteration-count: 1, infinite;
    animation-fill-mode: forwards, none;
}

.loader-bar {
    animation-iteration-count: 1;
}

/* ============================================================
   ===== 🔴 حذف کامل ذرات و هاله‌های Splash (تزئینی) =====
   ============================================================ */

.particle,
.particles,
.splash-screen .particle,
.splash-screen .particles {
    display: none !important;
    animation: none !important;
}

.glow-orb,
.orb-1,
.orb-2,
.orb-3 {
    display: none !important;
    animation: none !important;
}

.logo-ring,
.splash-ring,
.logo-ring.ring-2 {
    display: none !important;
    animation: none !important;
}

/* ============================================================
   ===== 🔴 لیست سیاه — انیمیشن‌های تزئینی ممنوع =====
   ============================================================ */

.stat-box::before,
.order-card::before,
.category-box::before,
.toolbar::before,
.save-area::before,
.form-container::before,
.barista-banner::before,
.invoice-card::before,
.invoice-banner::before,
.rating-container::before,
.rating-card::before,
[class*="shimmer"]::before {
    animation: none !important;
    background: rgba(139, 26, 139, 0.20) !important;
    opacity: 1 !important;
    left: 0 !important;
}

.status-dot,
.status-dot.online,
.status-dot.offline,
.pulse-animation,
[class*="pulse"]:not(.bottom-nav):not(.nav-item):not(.diamond-pulse):not(.decorative) {
    animation: none !important;
}

.animate-bounce,
[class*="bounce"]:not(.typing-indicator),
.delivery-banner .icon,
[style*="iconBounce"] {
    animation: none !important;
    transform: none !important;
}

.float-animation,
.animate-float,
.logo-icon,
.splash-logo,
.rating-icon,
.rating-success-icon,
.heartbeat {
    animation: none !important;
    transform: none !important;
}

.animate-glow,
[class*="glowPulse"] {
    animation: none !important;
}

.animate-heartbeat,
.footer .heart,
.heart {
    animation: none !important;
}

/* ============================================================
   ===== 🌟 SPLASH SCREEN — توالی با شکوه =====
   ============================================================ */

.splash-screen {
    background: linear-gradient(135deg,
        #0a0610 0%,
        #1a0e20 25%,
        #2a1830 50%,
        #1a0e20 75%,
        #0a0610 100%);
    background-size: 400% 400%;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    overflow: hidden;
    background-position: 50% 50%;
}

@keyframes splashLogoIn {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
        filter: blur(20px) drop-shadow(0 0 0 transparent);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) rotate(10deg);
        filter: blur(0) drop-shadow(0 0 60px rgba(139, 26, 139, 0.9));
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
        filter: blur(0) drop-shadow(0 0 40px rgba(139, 26, 139, 0.6));
    }
}

.splash-logo,
.splash-screen .splash-logo,
.logo-icon {
    animation: splashLogoIn 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards !important;
    transform-origin: center;
    display: inline-block !important;
    opacity: 0;
    filter: drop-shadow(0 0 40px rgba(139, 26, 139, 0.6));
}

@keyframes splashTitleIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.8);
        filter: blur(15px);
        letter-spacing: 0.6em;
    }
    60% {
        opacity: 1;
        transform: translateY(-5px) scale(1.05);
        filter: blur(0);
        letter-spacing: 0.15em;
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
        letter-spacing: 0.1em;
    }
}

.splash-title,
.splash-screen .splash-title {
    font-family: 'Playfair Display', 'Vazirmatn', serif !important;
    animation: splashTitleIn 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards !important;
    opacity: 0;
    background: linear-gradient(135deg,
        #8B1A8B 0%,
        #B07CC6 25%,
        #047857 50%,
        #B07CC6 75%,
        #8B1A8B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block !important;
    background-size: 100% 100%;
}

@keyframes splashLineExpand {
    0% {
        width: 0;
        opacity: 0;
    }
    60% {
        width: 220px;
        opacity: 0.9;
    }
    100% {
        width: 200px;
        opacity: 0.6;
    }
}

.splash-divider,
.splash-screen .splash-divider {
    width: 0;
    height: 1px !important;
    background: linear-gradient(90deg,
        transparent,
        var(--gold-bright),
        var(--purple-soft),
        var(--accent-emerald),
        var(--purple-soft),
        var(--gold-bright),
        transparent) !important;
    margin: 16px 0 20px !important;
    animation: splashLineExpand 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1s forwards !important;
    display: block !important;
    opacity: 0;
}

.splash-divider .diamond,
.divider-diamond {
    color: #B07CC6;
    font-size: 18px;
    display: inline-block;
    opacity: 0.85;
    text-shadow: 0 0 12px rgba(139, 26, 139, 0.6);
}

.splash-subtitle,
.splash-screen .splash-subtitle {
    animation: splashTitleIn 1s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards !important;
    opacity: 0;
    display: block !important;
    color: rgba(176, 124, 198, 0.9) !important;
}

@keyframes msgEntry {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.92);
        filter: blur(8px);
    }
    60% {
        opacity: 1;
        transform: translateY(-4px) scale(1.02);
        filter: blur(0);
        box-shadow: 0 0 30px rgba(139, 26, 139, 0.5);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
        box-shadow: 0 4px 20px rgba(139, 26, 139, 0.15);
    }
}

.msg-line {
    animation: msgEntry 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0;
    display: block;
    background: linear-gradient(135deg,
        rgba(139, 26, 139, 0.12),
        rgba(155, 89, 182, 0.06)) !important;
    border-right: 3px solid rgba(155, 89, 182, 0.6) !important;
}

.msg-line[data-delay="0"] { animation-delay: 1.4s; }
.msg-line[data-delay="1"] { animation-delay: 1.9s; }
.msg-line[data-delay="2"] { animation-delay: 2.4s; }
.msg-line[data-delay="3"] { animation-delay: 2.9s; }

@keyframes loaderFill {
    0% { width: 0%; }
    30% { width: 35%; }
    60% { width: 65%; }
    90% { width: 90%; }
    100% { width: 100%; }
}

.splash-loader,
.splash-screen .splash-loader {
    animation: fadeInUp 1s ease 3.2s forwards !important;
    opacity: 0;
    display: block !important;
}

.loader-bar {
    animation: loaderFill 2.7s cubic-bezier(0.4, 0, 0.2, 1) 3.2s forwards !important;
    width: 0%;
    background: linear-gradient(90deg,
        #6B0F6B 0%,
        #8B1A8B 20%,
        #B07CC6 35%,
        #FACC15 50%,
        #047857 65%,
        #B07CC6 80%,
        #8B1A8B 100%) !important;
    background-size: 100% 100%;
}

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

.splash-screen.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.8s var(--luxury-ease),
                visibility 0.8s var(--luxury-ease) !important;
}

/* ============================================================
   ===== ✨ ورود صفحه =====
   ============================================================ */

@keyframes luxuryEnter {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(0.95);
        filter: blur(10px);
    }
    60% {
        opacity: 1;
        transform: translateY(-3px) scale(1.01);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.luxury-enter {
    animation: luxuryEnter 1s var(--luxury-ease) forwards;
}

.container.entering,
#app.entering {
    animation: luxuryEnter 1s var(--luxury-ease) forwards !important;
}

/* ============================================================
   ===== ✨ انیمیشن ورود کارت‌ها =====
   ============================================================ */

@keyframes cardEnter {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
        filter: blur(5px);
    }
    60% {
        opacity: 1;
        transform: translateY(-2px) scale(1.005);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.order-card,
.category-box,
.menu-card,
.stat-box,
.cart-container,
.status-timeline,
.rating-container,
.rating-card,
.invoice-container {
    animation: cardEnter 0.8s var(--luxury-ease) forwards;
}

.food-card.first-load {
    animation: cardEnter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.food-card:not(.first-load) {
    animation: none !important;
}

.food-card:not(.first-load) {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* ============================================================
   ===== ✅✅✅ قفل کارت‌های غذا بعد از ارسال سفارش =====
   ============================================================ */

.food-card.locked {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.55 !important;
    filter: grayscale(0.4) !important;
    border-color: var(--border) !important;
    background: var(--card-bg) !important;
    box-shadow: none !important;
    transform: none !important;
    animation: none !important;
}

.food-card.locked:hover {
    transform: none !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
}

.food-card.locked .emoji {
    transform: none !important;
    filter: grayscale(0.5);
}

.food-card.locked .food-image-wrapper {
    filter: grayscale(0.4);
}

.food-card.locked .check,
.food-card.locked .qty-control {
    display: none !important;
}

.food-card.locked .price {
    color: var(--text-light) !important;
    background: rgba(0,0,0,0.05) !important;
    text-shadow: none !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
}

.food-card.locked .name {
    color: var(--text-light);
}

.food-card .locked-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: linear-gradient(135deg, #7f8c8d, #95a5a6);
    color: white;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(127,140,141,0.3);
    z-index: 4;
    letter-spacing: 0.3px;
}

.food-card.locked.selected {
    opacity: 0.7 !important;
    border-color: rgba(139, 26, 139, 0.4) !important;
    background: rgba(139, 26, 139, 0.03) !important;
}

/* ============================================================
   ===== ✨ Stagger =====
   ============================================================ */

.luxury-stagger > * {
    opacity: 0;
    animation: cardEnter 0.9s var(--luxury-ease) forwards;
}
.luxury-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.luxury-stagger > *:nth-child(2) { animation-delay: 0.12s; }
.luxury-stagger > *:nth-child(3) { animation-delay: 0.19s; }
.luxury-stagger > *:nth-child(4) { animation-delay: 0.26s; }
.luxury-stagger > *:nth-child(5) { animation-delay: 0.33s; }
.luxury-stagger > *:nth-child(6) { animation-delay: 0.40s; }

/* ============================================================
   ===== ✨ پیام‌ها (کلی) =====
   ============================================================ */

@keyframes messageEnter {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.message {
    animation: messageEnter 0.7s var(--luxury-ease) forwards;
}

.message.bot:has(.liquid-message) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* ============================================================
   ===== 🌊🌊🌊 LIQUID FLOW — طرح جریان مایع (نسخه v17) =====
   ===== 🔴 بدون box-shadow (بیضی زیر کارت) =====
   ===== 🔴 بدون text-shadow اضافی (هاله زیر خطوط) =====
   ===== ✅ با درخشش پویا روی کلمات کلیدی =====
   ============================================================ */

.liquid-message {
    position: relative;
    display: inline-block;
    padding: 14px 20px;
    border-radius: 6px 20px 20px 20px;
    background: var(--card-bg, #ffffff);
    border: 1px solid rgba(160, 32, 160, 0.15);
    color: var(--text-primary, #2a1830);
    max-width: 94%;
    line-height: 2;
    font-size: 15px;
    font-weight: 600;
    /* ===== 🔴 box-shadow حذف شد — این بیضی زیر کارت را می‌ساخت ===== */
    box-shadow: none !important;
    overflow: hidden;
    text-align: right;
    direction: rtl;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    text-shadow: none !important;
}

/* ============================================================
   ===== ✅✅✅ خط بالای کارت — ثابت و آرام (بدون پالس) =====
   ===== گرادیان بنفش + رز + سبز زمردی =====
   ===== 🔴 این خط تزئینی حفظ می‌شود (بیضی نیست) =====
   ============================================================ */
.liquid-message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent,
        rgba(139, 26, 139, 0.55),
        rgba(233, 30, 99, 0.65),
        rgba(4, 120, 87, 0.70),
        rgba(233, 30, 99, 0.65),
        rgba(139, 26, 139, 0.55),
        transparent);
    pointer-events: none;
    z-index: 0;
    opacity: 0.80;
    animation: none !important;
}

/* ============================================================
   ===== 🔴🔴🔴 حذف قطعی بیضی/سایه زیر پیام‌ها =====
   ===== 🔴 کلید اصلی: حذف کامل ::after و ::before =====
   ============================================================ */

.liquid-message .liquid-line::after,
.liquid-message .liquid-line::before,
.liquid-message::after,
.liquid-word::after,
.liquid-word::before,
.message .message-content::after,
.message .message-content::before,
.message::after,
.message::before {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-width: 0 !important;
    border-radius: 0 !important;
    animation: none !important;
    animation-name: none !important;
    animation-duration: 0s !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    clip-path: inset(50%) !important;
    -webkit-clip-path: inset(50%) !important;
    pointer-events: none !important;
    overflow: hidden !important;
    z-index: -1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ===== ✅ آیکون پیام ===== */
.liquid-message .liquid-icon {
    display: inline-block;
    font-size: 22px;
    margin-left: 8px;
    vertical-align: middle;
    filter: drop-shadow(0 2px 8px rgba(139, 26, 139, 0.4));
    animation: liquidIconPop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-iteration-count: 1 !important;
    animation-fill-mode: forwards !important;
    position: relative;
    z-index: 1;
}

@keyframes liquidIconPop {
    0% {
        transform: scale(0) rotate(-90deg);
        opacity: 0;
        filter: blur(10px);
    }
    50% {
        transform: scale(1.25) rotate(8deg);
        opacity: 1;
        filter: blur(0);
    }
    75% {
        transform: scale(0.95) rotate(-2deg);
    }
    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
        filter: blur(0);
    }
}

/* ============================================================
   ===== ✅ هر خط — بدون هیچ سایه‌ای =====
   ============================================================ */
.liquid-message .liquid-line {
    display: block;
    position: relative;
    margin: 0;
    padding: 2px 0;
    opacity: 0;
    animation: liquidLineRise 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: inherit;
    animation-iteration-count: 1 !important;
    animation-fill-mode: forwards !important;
    will-change: transform, opacity, filter, color;
    z-index: 1;
    text-shadow: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* ============================================================
   ===== 🔴🔴🔴 liquidLineRise — بدون text-shadow =====
   ===== ✅ نسخه بهبودیافته v17: موج سه‌بعدی آرام‌تر =====
   ===== 🔴 کلید اصلی حذف هاله: text-shadow حذف شد =====
   ============================================================ */
@keyframes liquidLineRise {
    0% {
        opacity: 0;
        transform: translateY(35px) scaleY(0.35) rotate(-1deg);
        filter: blur(14px);
        color: rgba(139, 26, 139, 0.15);
        text-shadow: none;
    }
    30% {
        opacity: 0.4;
        transform: translateY(12px) scaleY(0.75) rotate(0.5deg);
        filter: blur(6px);
        color: rgba(139, 26, 139, 0.5);
        text-shadow: none;
    }
    60% {
        opacity: 0.85;
        transform: translateY(-3px) scaleY(1.06) rotate(-0.3deg);
        filter: blur(1px);
        color: var(--purple, #8B1A8B);
        text-shadow: none;
    }
    80% {
        opacity: 0.98;
        transform: translateY(1px) scaleY(0.99) rotate(0deg);
        filter: blur(0);
        color: var(--text-primary, #2a1830);
        text-shadow: none;
    }
    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1) rotate(0deg);
        filter: blur(0);
        color: var(--text-primary, #2a1830);
        text-shadow: none;
    }
}

/* ============================================================
   ===== ✅ کلمات داخل هر خط — بدون هیچ سایه‌ای =====
   ============================================================ */
.liquid-message .liquid-word {
    display: inline-block;
    margin: 0 3px;
    opacity: 0;
    animation: liquidWordWave 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: inherit;
    animation-iteration-count: 1 !important;
    animation-fill-mode: forwards !important;
    will-change: transform, opacity, filter, color;
    transform-origin: bottom center;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

/* ============================================================
   ===== 🔴🔴🔴 liquidWordWave — بدون text-shadow =====
   ===== ✅ نسخه بهبودیافته v17: چرخش ملایم سه‌بعدی =====
   ============================================================ */
@keyframes liquidWordWave {
    0% {
        opacity: 0;
        transform: translateY(15px) scale(0.85) rotate(-3deg);
        filter: blur(8px);
        color: rgba(139, 26, 139, 0.35);
        text-shadow: none;
    }
    40% {
        opacity: 0.75;
        transform: translateY(-5px) scale(1.1) rotate(2deg);
        filter: blur(0);
        color: var(--purple, #8B1A8B);
        text-shadow: none;
    }
    65% {
        opacity: 1;
        transform: translateY(2px) scale(0.97) rotate(-0.5deg);
        filter: blur(0);
        color: var(--text-primary, #2a1830);
        text-shadow: none;
    }
    85% {
        opacity: 1;
        transform: translateY(-1px) scale(1.01) rotate(0.2deg);
        text-shadow: none;
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
        filter: blur(0);
        color: var(--text-primary, #2a1830);
        text-shadow: none;
    }
}

/* ============================================================
   ===== ✅✅✅ کلمات کلیدی — گرادیان ثابت + درخشش پویا =====
   ===== 🆕 نسخه v17: keywordShine — درخشش گرادیان =====
   ============================================================ */

/* ===== 🎨 انیمیشن درخشش پویا (حرکت گرادیان) ===== */
@keyframes keywordShine {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* ===== 💜 کلیدواژه طلایی-سینمایی (gold) ===== */
.liquid-message .liquid-word.keyword-gold {
    background: linear-gradient(90deg,
        #A020A0 0%,
        #E91E63 25%,
        #047857 50%,
        #E91E63 75%,
        #A020A0 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
    animation:
        liquidWordWave 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
        keywordShine 4s ease-in-out infinite;
    animation-delay: inherit, 1.5s;
    animation-iteration-count: 1, infinite !important;
    animation-fill-mode: forwards, none !important;
    text-shadow: none !important;
}

/* ===== 🟣 کلیدواژه بنفش لوکس (purple) ===== */
.liquid-message .liquid-word.keyword-purple {
    background: linear-gradient(90deg,
        #6B0F6B 0%,
        #A020A0 25%,
        #C040C0 50%,
        #A020A0 75%,
        #6B0F6B 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
    animation:
        liquidWordWave 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
        keywordShine 4s ease-in-out infinite;
    animation-delay: inherit, 1.5s;
    animation-iteration-count: 1, infinite !important;
    animation-fill-mode: forwards, none !important;
    text-shadow: none !important;
}

/* ===== 🌹 کلیدواژه رز صورتی (rose) — 🆕 جدید ===== */
.liquid-message .liquid-word.keyword-rose {
    background: linear-gradient(90deg,
        #B0143F 0%,
        #E91E63 25%,
        #F06292 50%,
        #E91E63 75%,
        #B0143F 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
    animation:
        liquidWordWave 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
        keywordShine 4s ease-in-out infinite;
    animation-delay: inherit, 1.5s;
    animation-iteration-count: 1, infinite !important;
    animation-fill-mode: forwards, none !important;
    text-shadow: none !important;
}

/* ============================================================
   ===== 🎨 انیمیشن پالس ایموجی‌های تزئینی =====
   ===== 🆕 نسخه v17: decorativePulse — نفس‌کشیدن ظریف =====
   ============================================================ */

@keyframes decorativePulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 2px 8px rgba(233, 30, 99, 0.55));
    }
    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 4px 14px rgba(233, 30, 99, 0.75));
    }
}

.liquid-message .liquid-word.decorative {
    color: #E91E63;
    font-size: 1.18em;
    filter: drop-shadow(0 2px 8px rgba(233, 30, 99, 0.55));
    animation:
        liquidWordWave 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
        decorativePulse 2.5s ease-in-out infinite;
    animation-delay: inherit, 0.5s;
    animation-iteration-count: 1, infinite !important;
    animation-fill-mode: forwards, none !important;
    text-shadow: none !important;
}

/* ============================================================
   ===== ✨ دکمه پرش — ظاهر لوکس =====
   ============================================================ */

.liquid-skip-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 16px;
    background: linear-gradient(135deg,
        rgba(160, 32, 160, 0.08),
        rgba(233, 30, 99, 0.05));
    border: 1.5px solid rgba(160, 32, 160, 0.25);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-light, #8a7a90);
    cursor: pointer;
    font-family: 'Vazirmatn', sans-serif;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0;
    animation: liquidSkipFade 0.6s ease 0.3s forwards;
    animation-iteration-count: 1 !important;
    animation-fill-mode: forwards !important;
    position: relative;
    z-index: 2;
    align-self: flex-start;
    box-shadow: none !important;
    text-shadow: none !important;
}

.liquid-skip-btn:hover {
    background: linear-gradient(135deg, #8B1A8B, #B07CC6);
    color: #fff;
    border-color: #8B1A8B;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 18px rgba(139, 26, 139, 0.35) !important;
}

.liquid-skip-btn:active {
    transform: scale(0.96);
}

@keyframes liquidSkipFade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== حالت دارک مود ===== */
[data-theme="dark"] .liquid-message {
    background: #160e1c;
    border-color: #30263a;
    color: #f0e8f5;
    /* ===== 🔴 box-shadow حذف شد ===== */
    box-shadow: none !important;
    text-shadow: none !important;
}

[data-theme="dark"] .liquid-message .liquid-line {
    color: #f0e8f5;
    text-shadow: none !important;
}

[data-theme="dark"] .liquid-message .liquid-word {
    color: #f0e8f5;
    text-shadow: none !important;
}

[data-theme="dark"] .liquid-skip-btn {
    background: rgba(155, 89, 182, 0.08);
    border-color: #30263a;
    color: #8b7a95;
}

[data-theme="dark"] .liquid-skip-btn:hover {
    background: linear-gradient(135deg, #9B59B6, #C89FE0);
    color: #0a0610;
}

/* ============================================================
   ===== ✨ Cinematic Message — حفظ برای سازگاری =====
   ============================================================ */

@keyframes cinematicEnter {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.85) rotateX(-20deg);
        filter: blur(20px);
    }
    50% {
        opacity: 1;
        transform: translateY(-8px) scale(1.04) rotateX(5deg);
        filter: blur(0);
        box-shadow:
            0 20px 60px rgba(0, 0, 0, 0.25),
            0 0 80px rgba(139, 26, 139, 0.35);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0);
        filter: blur(0);
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.15),
            0 0 40px rgba(139, 26, 139, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
}

.cinematic-message {
    animation: cinematicEnter 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
    position: relative;
    overflow: hidden;
}

.cinematic-message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent,
        rgba(139, 26, 139, 0.55),
        rgba(176, 124, 198, 0.75),
        rgba(4, 120, 87, 0.70),
        rgba(176, 124, 198, 0.75),
        rgba(139, 26, 139, 0.55),
        transparent);
    opacity: 0.75;
    border-radius: 20px 20px 0 0;
}

.cinematic-message::after,
.cornerSparkle,
.rating-sparkle,
.rating-sparkle.s2 {
    display: none !important;
    animation: none !important;
}

/* ============================================================
   ===== ✨ Typing Indicator — تنها استثنای infinite مجاز =====
   ============================================================ */

@keyframes typingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.3;
        box-shadow: 0 0 4px rgba(139, 26, 139, 0.3);
    }
    30% {
        transform: translateY(-10px);
        opacity: 1;
        box-shadow: 0 0 16px rgba(139, 26, 139, 0.9);
    }
}

.typing-indicator span {
    animation: typingBounce 1.4s infinite both !important;
    background: var(--gold-bright) !important;
}

.typing-indicator span:nth-child(1) { animation-delay: 0s; }
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

/* ============================================================
   ===== ✨ ستاره‌های نظرسنجی — سبز پررنگ زمردی =====
   ============================================================ */

.rating-stars .star {
    transition:
        color 0.3s var(--luxury-ease),
        transform 0.3s var(--luxury-ease),
        text-shadow 0.3s var(--luxury-ease);
    display: inline-block;
    color: var(--border, #e8ddf0);
}

.rating-stars .star:hover {
    transform: translateY(-4px) scale(1.25) rotate(-5deg);
    color: var(--accent-emerald-light, #059669);
    text-shadow:
        0 0 22px rgba(4, 120, 87, 0.85),
        0 0 44px rgba(4, 120, 87, 0.45);
}

.rating-stars .star.active {
    color: var(--accent-emerald, #047857);
    text-shadow:
        0 0 18px rgba(4, 120, 87, 0.85),
        0 0 36px rgba(4, 120, 87, 0.55),
        0 0 64px rgba(4, 120, 87, 0.30);
    transform: none !important;
}

/* ============================================================
   ===== ✨ حذف افکت‌های تزئینی Rating =====
   ============================================================ */

.rating-container::before,
.rating-card::before,
.rating-shine,
[class*="ratingShine"],
[class*="cinematicShine"] {
    animation: none !important;
    left: 0 !important;
    opacity: 0.3 !important;
    background: linear-gradient(90deg,
        transparent,
        rgba(139, 26, 139, 0.5),
        transparent) !important;
}

.rating-submit,
.btn-shine,
[class*="buttonShine"] {
    animation: none !important;
    background-position: 0% 50% !important;
}

.rating-submit::before {
    display: none !important;
}

.rating-container {
    animation: cardEnter 0.7s var(--luxury-ease) forwards !important;
}

/* ============================================================
   ===== ✅✅✅ حالت موفقیت نظرسنجی =====
   ============================================================ */

@keyframes successPop {
    0% {
        opacity: 0;
        transform: scale(0.7) rotate(-8deg);
        filter: blur(20px);
    }
    60% {
        transform: scale(1.06) rotate(2deg);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
        filter: blur(0);
    }
}

.rating-success {
    animation: successPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
    background: linear-gradient(145deg,
        rgba(4, 120, 87, 0.08),
        rgba(52, 211, 153, 0.03));
    border: 2px solid rgba(4, 120, 87, 0.35);
}

.rating-success-stars {
    animation: none !important;
    transform: none !important;
    color: var(--accent-emerald, #047857);
    text-shadow:
        0 0 18px rgba(4, 120, 87, 0.75),
        0 0 36px rgba(4, 120, 87, 0.45);
}

.rating-success-icon {
    animation: none !important;
    transform: none !important;
    filter: drop-shadow(0 6px 20px rgba(4, 120, 87, 0.35)) !important;
}

.rating-locked-notice {
    margin-top: 18px;
    padding: 10px 14px;
    background: rgba(139, 26, 139, 0.08);
    border: 1px solid rgba(139, 26, 139, 0.25);
    border-radius: 10px;
    font-size: 12px;
    color: var(--text-light, #8a7a90);
    font-weight: 600;
    text-align: center;
    animation: fadeIn 0.5s ease !important;
    animation-iteration-count: 1 !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.rating-warning {
    margin-top: 12px;
    font-size: 11px;
    color: var(--text-light, #8a7a90);
    font-style: italic;
    text-align: center;
    padding: 8px 12px;
    background: rgba(192, 57, 43, 0.05);
    border: 1px dashed rgba(192, 57, 43, 0.2);
    border-radius: 8px;
    animation: none !important;
}

.rating-edit-btn {
    display: none !important;
}

/* ============================================================
   ===== ✨ Loading — نوار نازک =====
   ============================================================ */

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

.luxury-loader {
    width: 100%;
    height: 1px;
    background: rgba(139, 26, 139, 0.1);
    position: relative;
    overflow: hidden;
}

.luxury-loader::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        var(--gold-bright),
        transparent);
    animation: loadingLine 1.6s var(--luxury-ease-in-out) infinite;
}

.luxury-loader.loaded::after {
    animation: none !important;
    opacity: 0 !important;
}

/* ============================================================
   ===== ✨ اعلان‌ها =====
   ============================================================ */

@keyframes notificationIn {
    0% {
        opacity: 0;
        transform: translateX(30px) scale(0.9);
    }
    60% {
        opacity: 1;
        transform: translateX(-5px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.custom-notification,
.notification {
    animation: notificationIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ============================================================
   ===== ✨ انیمیشن‌های پنل آشپزخانه =====
   ============================================================ */

.barista-stat,
.stat-box.barista-stat {
    animation: none !important;
}

.stat-box.barista-stat.has-barista {
    animation: none !important;
    box-shadow: 0 0 40px rgba(139, 26, 139, 0.5) !important;
    border-color: var(--gold-bright) !important;
}

.barista-banner {
    animation: none !important;
    box-shadow: 0 4px 20px rgba(139, 26, 139, 0.3) !important;
    border-color: rgba(139, 26, 139, 0.5) !important;
}

.barista-banner::before {
    animation: none !important;
    display: none !important;
}

.barista-icon {
    animation: none !important;
    transform: none !important;
    filter: drop-shadow(0 4px 12px rgba(139, 26, 139, 0.5)) !important;
}

.tab-btn.draft-tab.has-active,
.tab-btn.barista-tab.has-active,
.tab-btn.has-active {
    animation: none !important;
}

.order-card.has-barista {
    animation: none !important;
    box-shadow: 0 0 30px rgba(139, 26, 139, 0.35) !important;
    border-color: var(--gold-bright) !important;
}

.rating-card {
    animation: cardEnter 0.6s var(--luxury-ease) forwards !important;
}

.rating-card .rating-star-icon {
    animation: none !important;
    transform: none !important;
}

/* ============================================================
   ===== ✨ انیمیشن‌های admin_dashboard =====
   ============================================================ */

.status-draft {
    animation: none !important;
}

.draft-info-box .draft-icon {
    animation: none !important;
    transform: none !important;
}

.draft-info-box .draft-dots span {
    animation: none !important;
    opacity: 0.7 !important;
    transform: none !important;
}

/* ============================================================
   ===== ✨ انیمیشن‌های index.html =====
   ============================================================ */

.brand .logo,
.logoSpin,
[class*="logoSpin"] {
    animation: none !important;
    transform: none !important;
}

.customer-info .item .status-dot,
.status-dot {
    animation: none !important;
}

.nav-item.barista-nav .nav-badge,
.nav-item.rating-nav .nav-badge {
    animation: none !important;
    transform: translateX(60%) scale(1) !important;
    box-shadow: 0 2px 8px rgba(192, 57, 43, 0.3) !important;
}

.nav-item.barista-nav.barista-active .nav-icon,
.nav-item.rating-nav.rating-active .nav-icon {
    animation: none !important;
    transform: scale(1.15) !important;
}

.nav-item.barista-nav.barista-active::before,
.nav-item.rating-nav.rating-active::before {
    animation: none !important;
}

/* ============================================================
   ===== ✨ Tab Swap =====
   ============================================================ */

@keyframes tabSwapIn {
    0% {
        opacity: 0;
        transform: translateY(15px) scale(0.85);
    }
    60% {
        opacity: 1;
        transform: translateY(-3px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes tabSwapOut {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-15px) scale(0.85);
    }
}

.bottom-nav .nav-item.rating-nav.swap-in {
    animation: tabSwapIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

.bottom-nav .nav-item#statusNavBtn.swap-out {
    animation: tabSwapOut 0.4s ease forwards !important;
}

/* ============================================================
   ===== ✨ Hover — فقط هنگام تعامل =====
   ============================================================ */

.option-btn,
.menu-card,
.food-card,
.btn,
.order-card,
.stat-box,
.glass-card,
.category-box,
.pm-btn,
.glass-btn,
.glass-btn-gold,
.glass-btn-purple,
.glass-card-rating,
.glass-card-soft,
.glass-card-chef {
    transition:
        transform 0.4s var(--luxury-ease),
        border-color 0.4s var(--luxury-ease),
        box-shadow 0.4s var(--luxury-ease),
        background 0.4s var(--luxury-ease);
}

.option-btn:hover,
.menu-card:hover,
.food-card:hover:not(.locked),
.pm-btn:hover {
    transform: translateY(-3px) scale(1.01);
    border-color: rgba(139, 26, 139, 0.6);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(139, 26, 139, 0.15);
}

.option-btn:not(:hover),
.menu-card:not(:hover),
.food-card:not(:hover):not(.locked),
.pm-btn:not(:hover) {
    transform: translateY(0) scale(1);
}

/* ============================================================
   ===== ✨ کلاس‌های کمکی =====
   ============================================================ */

.no-animation,
.no-anim,
.static {
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

.pulse-animation,
.float-animation,
.shimmer-text,
.animate-bounce,
.animate-pulse,
.animate-glow,
.animate-float,
.animate-heartbeat,
.animate-shake,
.animate-spin {
    animation: none !important;
    transform: none !important;
}

/* ============================================================
   ===== ✅✅✅ استپر ۴ مرحله‌ای — زرد زیبا قبل از سبز =====
   ============================================================ */

.stepper-wrapper {
    display: flex;
    justify-content: space-between;
    margin: 16px 0 12px;
    position: relative;
    padding: 0 4px;
}

.stepper-wrapper::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 6%;
    right: 6%;
    height: 3px;
    background: var(--border, #e8ddf0);
    z-index: 0;
    border-radius: 2px;
    animation: none !important;
}

.step-circle.active {
    border-color: #FACC15 !important;
    background: linear-gradient(135deg, #FACC15 0%, #FDE047 100%) !important;
    transform: scale(1.2);
    box-shadow:
        0 0 22px rgba(250, 204, 21, 0.65),
        0 0 44px rgba(250, 204, 21, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    animation: none !important;
}

.step-circle.active .step-number {
    color: #78350F !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

.step-circle.done {
    border-color: #047857 !important;
    background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
    color: white;
    box-shadow:
        0 0 18px rgba(4, 120, 87, 0.55),
        0 0 36px rgba(4, 120, 87, 0.30) !important;
    animation: none !important;
}

.step-circle.done .step-number {
    color: #ffffff !important;
    font-weight: 900 !important;
}

.step-circle.completed {
    border-color: #065F46 !important;
    background: linear-gradient(135deg, #047857 0%, #10B981 50%, #34D399 100%) !important;
    color: white;
    box-shadow:
        0 0 25px rgba(4, 120, 87, 0.70),
        0 0 50px rgba(4, 120, 87, 0.45),
        0 0 80px rgba(4, 120, 87, 0.25) !important;
    transform: scale(1.25);
    animation: paymentSuccess 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    animation-fill-mode: forwards !important;
    animation-iteration-count: 1 !important;
}

@keyframes paymentSuccess {
    0% {
        transform: scale(0.8);
        box-shadow: 0 0 0 rgba(4, 120, 87, 0);
    }
    50% {
        transform: scale(1.4);
        box-shadow:
            0 0 50px rgba(4, 120, 87, 0.85),
            0 0 80px rgba(4, 120, 87, 0.45);
    }
    100% {
        transform: scale(1.25);
        box-shadow:
            0 0 25px rgba(4, 120, 87, 0.70),
            0 0 50px rgba(4, 120, 87, 0.45),
            0 0 80px rgba(4, 120, 87, 0.25);
    }
}

.step-label {
    font-size: 8px;
    margin-top: 4px;
    color: var(--text-light, #8a7a90);
    font-weight: 600;
    text-align: center;
    transition: all 0.3s;
    line-height: 1.2;
    animation: none !important;
}

.step-label.active {
    color: #B45309 !important;
    font-weight: 900 !important;
    text-shadow: 0 0 8px rgba(250, 204, 21, 0.45);
}

.step-label.done {
    color: #047857 !important;
    font-weight: 900 !important;
    text-shadow: 0 0 8px rgba(4, 120, 87, 0.35);
}

.step-label.completed {
    color: #047857 !important;
    font-weight: 900 !important;
    text-shadow: 0 0 10px rgba(4, 120, 87, 0.45);
    animation: none !important;
}

[data-theme="dark"] .step-circle.active {
    border-color: #FDE047 !important;
    background: linear-gradient(135deg, #FDE047 0%, #FEF08A 100%) !important;
    box-shadow:
        0 0 26px rgba(253, 224, 71, 0.80),
        0 0 52px rgba(253, 224, 71, 0.50) !important;
}

[data-theme="dark"] .step-circle.active .step-number {
    color: #422006 !important;
}

[data-theme="dark"] .step-label.active {
    color: #FDE047 !important;
}

[data-theme="dark"] .step-circle.done {
    border-color: #34D399 !important;
    background: linear-gradient(135deg, #059669 0%, #34D399 100%) !important;
    box-shadow:
        0 0 20px rgba(52, 211, 153, 0.70),
        0 0 40px rgba(52, 211, 153, 0.40) !important;
}

[data-theme="dark"] .step-label.done {
    color: #34D399 !important;
}

[data-theme="dark"] .step-circle.completed {
    background: linear-gradient(135deg, #10B981 0%, #34D399 50%, #6EE7B7 100%) !important;
    box-shadow:
        0 0 30px rgba(52, 211, 153, 0.85),
        0 0 60px rgba(52, 211, 153, 0.55),
        0 0 100px rgba(52, 211, 153, 0.30) !important;
}

[data-theme="dark"] .step-label.completed {
    color: #34D399 !important;
}

/* ============================================================
   ===== ✅✅✅ پیام قفل سبد خرید =====
   ============================================================ */

.cart-locked-message {
    text-align: center;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(4, 120, 87, 0.10), rgba(52, 211, 153, 0.05));
    border: 2px dashed rgba(4, 120, 87, 0.45);
    border-radius: 14px;
    margin-top: 10px;
    color: #047857;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(4, 120, 87, 0.12);
    animation: fadeIn 0.5s ease !important;
    animation-iteration-count: 1 !important;
}

/* ============================================================
   ===== ✅✅✅ کارت سفارش تکمیل‌شده =====
   ============================================================ */

.order-card.completed-order {
    border-color: #047857 !important;
    border-width: 3px !important;
    background: linear-gradient(145deg,
        rgba(4, 120, 87, 0.06),
        rgba(4, 120, 87, 0.02)) !important;
    opacity: 0.85;
    animation: cardEnter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
    animation-iteration-count: 1 !important;
}

.order-card.completed-order:hover {
    opacity: 1;
    box-shadow: 0 8px 30px rgba(4, 120, 87, 0.25) !important;
}

.completed-banner {
    background: linear-gradient(135deg, rgba(4, 120, 87, 0.15), rgba(52, 211, 153, 0.08));
    border: 2px solid rgba(4, 120, 87, 0.55);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    animation: completedBannerEnter 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
    animation-iteration-count: 1 !important;
}

@keyframes completedBannerEnter {
    0% { opacity: 0; transform: scale(0.85) rotate(-3deg); filter: blur(10px); }
    60% { transform: scale(1.03) rotate(1deg); filter: blur(0); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

.completed-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent,
        rgba(4, 120, 87, 0.70),
        rgba(52, 211, 153, 0.85),
        rgba(4, 120, 87, 0.70),
        transparent);
    opacity: 0.85;
    animation: none !important;
}

.completed-banner .completed-icon {
    font-size: 36px;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 12px rgba(4, 120, 87, 0.5));
    animation: completedIconPop 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
    animation-iteration-count: 1 !important;
}

@keyframes completedIconPop {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    60% { transform: scale(1.2) rotate(10deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

.completed-status-text {
    font-size: 12px;
    font-weight: 900;
    padding: 10px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(4, 120, 87, 0.15), rgba(52, 211, 153, 0.08));
    color: #065F46;
    border: 2px solid rgba(4, 120, 87, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    min-width: 100%;
    box-shadow: 0 2px 10px rgba(4, 120, 87, 0.15);
    animation: fadeIn 0.5s ease !important;
    animation-iteration-count: 1 !important;
}

[data-theme="dark"] .completed-status-text {
    color: #34D399;
}

.bottom-nav .nav-item.rating-nav.unlocked-after-payment {
    box-shadow: 0 0 15px rgba(139, 26, 139, 0.35);
}

/* ============================================================
   ===== ✅✅✅ قفل تب‌ها (bottom nav) =====
   ============================================================ */

.bottom-nav .nav-item.locked {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.6) !important;
    pointer-events: none !important;
}

.bottom-nav .nav-item.locked .nav-icon {
    transform: none !important;
}

.bottom-nav .nav-item.locked::before {
    display: none !important;
}

.bottom-nav .nav-item.locked .lock-icon {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 11px;
    opacity: 0.8;
    display: block;
}

/* ============================================================
   ===== ✅✅✅ انیمیشن ورود فاکتور لوکس =====
   ============================================================ */

@keyframes invoiceEnter {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.85) rotate(-2deg);
        filter: blur(15px);
    }
    60% {
        transform: translateY(-6px) scale(1.02) rotate(1deg);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0);
        filter: blur(0);
    }
}

.invoice-container {
    animation: invoiceEnter 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
    animation-iteration-count: 1 !important;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 130px);
    overflow: hidden;
}

.invoice-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent,
        rgba(139, 26, 139, 0.55),
        rgba(176, 124, 198, 0.75),
        rgba(4, 120, 87, 0.70),
        rgba(176, 124, 198, 0.75),
        rgba(139, 26, 139, 0.55),
        transparent);
    opacity: 0.85;
    flex-shrink: 0;
    animation: none !important;
}

.invoice-container .invoice-items {
    flex: 1;
    min-height: 60px;
    max-height: 180px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 26, 139, 0.4) transparent;
}

.invoice-container .invoice-items::-webkit-scrollbar {
    width: 4px;
}

.invoice-container .invoice-items::-webkit-scrollbar-track {
    background: transparent;
}

.invoice-container .invoice-items::-webkit-scrollbar-thumb {
    background: rgba(139, 26, 139, 0.4);
    border-radius: 4px;
}

.invoice-container .invoice-items::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 26, 139, 0.6);
}

@keyframes invoiceLogoPop {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    60% {
        transform: scale(1.2) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

.invoice-header .invoice-logo {
    animation: invoiceLogoPop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
    animation-iteration-count: 1 !important;
    filter: drop-shadow(0 4px 16px rgba(139, 26, 139, 0.5)) !important;
}

.invoice-header .invoice-title {
    background: linear-gradient(135deg,
        #8B1A8B 0%,
        #B07CC6 35%,
        #047857 50%,
        #B07CC6 65%,
        #8B1A8B 100%);
    background-size: 100% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: none !important;
}

.invoice-items-lux .invoice-item-lux .item-total {
    color: var(--accent-emerald, #047857) !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg,
        rgba(253, 224, 71, 0.32) 0%,
        rgba(250, 204, 21, 0.22) 100%) !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(202, 138, 4, 0.45) !important;
    letter-spacing: 0.3px;
    text-shadow:
        0 0 10px rgba(4, 120, 87, 0.45),
        0 0 20px rgba(4, 120, 87, 0.20),
        0 1px 1px rgba(255, 255, 255, 0.6);
}

.invoice-summary-lux .summary-row.total .value {
    color: var(--accent-emerald, #047857) !important;
    -webkit-text-fill-color: var(--accent-emerald, #047857) !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg,
        rgba(253, 224, 71, 0.45) 0%,
        rgba(250, 204, 21, 0.32) 100%) !important;
    padding: 5px 16px !important;
    border-radius: 10px !important;
    border: 2px solid rgba(202, 138, 4, 0.60) !important;
    letter-spacing: 0.5px;
    text-shadow:
        0 0 18px rgba(4, 120, 87, 0.60),
        0 0 36px rgba(4, 120, 87, 0.35),
        0 1px 2px rgba(255, 255, 255, 0.75);
    box-shadow:
        0 0 22px rgba(250, 204, 21, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.50);
}

.invoice-total .value {
    color: var(--accent-emerald, #047857) !important;
    -webkit-text-fill-color: var(--accent-emerald, #047857) !important;
    background: linear-gradient(135deg,
        rgba(253, 224, 71, 0.45) 0%,
        rgba(250, 204, 21, 0.32) 100%) !important;
    padding: 4px 14px !important;
    border-radius: 8px !important;
    border: 2px solid rgba(202, 138, 4, 0.60) !important;
    font-weight: 900 !important;
    text-shadow:
        0 0 16px rgba(4, 120, 87, 0.60),
        0 0 32px rgba(4, 120, 87, 0.35),
        0 1px 2px rgba(255, 255, 255, 0.7);
    animation: none !important;
}

@keyframes paidBannerEnter {
    0% {
        opacity: 0;
        transform: scale(0.8) rotate(-3deg);
        filter: blur(15px);
    }
    60% {
        transform: scale(1.05) rotate(1deg);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

.invoice-paid-banner {
    background: linear-gradient(135deg, rgba(4, 120, 87, 0.15), rgba(52, 211, 153, 0.08));
    border: 2px solid rgba(4, 120, 87, 0.5);
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    margin: 14px 0;
    position: relative;
    overflow: hidden;
    animation: paidBannerEnter 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
    animation-iteration-count: 1 !important;
    flex-shrink: 0;
}

.invoice-paid-banner .paid-icon {
    font-size: 42px;
    display: block;
    margin-bottom: 8px;
    filter: drop-shadow(0 4px 12px rgba(4, 120, 87, 0.5));
    animation: none !important;
}

.invoice-paid-banner .paid-title {
    font-size: 18px;
    font-weight: 900;
    color: #047857;
    margin-bottom: 6px;
    text-shadow: 0 0 12px rgba(4, 120, 87, 0.35);
}

.invoice-paid-banner .paid-text {
    font-size: 13px;
    color: var(--text-secondary, #5a4a60);
    line-height: 1.8;
    font-weight: 600;
}

.order-completed-banner {
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.15),
        rgba(52, 211, 153, 0.08));
    border: 2px solid rgba(4, 120, 87, 0.55);
    border-radius: 16px;
    padding: 20px 18px;
    margin: 12px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    animation: completedBannerEnter 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-iteration-count: 1 !important;
}

.order-completed-banner .completed-icon {
    font-size: 56px;
    display: block;
    margin-bottom: 10px;
    filter: drop-shadow(0 6px 20px rgba(4, 120, 87, 0.5));
    animation: completedIconPop 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-iteration-count: 1 !important;
}

.order-completed-banner .completed-title {
    font-size: 20px;
    font-weight: 900;
    color: #065F46;
    margin-bottom: 8px;
    font-family: 'Playfair Display', 'Vazirmatn', serif;
    text-shadow: 0 0 12px rgba(4, 120, 87, 0.35);
}

[data-theme="dark"] .order-completed-banner .completed-title {
    color: #34D399;
}

.order-completed-banner .completed-sub {
    font-size: 13px;
    color: var(--text-secondary, #5a4a60);
    line-height: 1.9;
    font-weight: 600;
}

/* ============================================================
   ===== 🎨 انیمیشن‌های هدر و لوگو (مجاز) =====
   ============================================================ */

@keyframes headerShine {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

@keyframes logoGlow {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50%      { transform: scale(1.2); opacity: 0.3; }
}

/* ============================================================
   ===== 📱 Reduced Motion =====
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .typing-indicator span {
        animation-duration: 1.4s !important;
        animation-iteration-count: infinite !important;
    }

    /* ===== استثنای درخشش‌ها در reduced motion ===== */
    .liquid-message .liquid-word.keyword-gold,
    .liquid-message .liquid-word.keyword-purple,
    .liquid-message .liquid-word.keyword-rose,
    .liquid-message .liquid-word.decorative {
        animation-duration: 0.01ms, 4s !important;
    }
}

/* ============================================================
   ===== 📱 Media Queries — Responsive =====
   ============================================================ */

@media (max-width: 480px) {
    .splash-logo,
    .splash-screen .splash-logo {
        font-size: 70px !important;
        margin-bottom: 22px !important;
    }

    .splash-title,
    .splash-screen .splash-title {
        font-size: 48px !important;
        letter-spacing: 0.08em !important;
    }

    .splash-subtitle,
    .splash-screen .splash-subtitle {
        font-size: 13px !important;
        letter-spacing: 0.35em !important;
    }

    .msg-line {
        font-size: 13px !important;
        padding: 8px 14px !important;
    }

    .splash-divider,
    .splash-screen .splash-divider {
        margin: 12px 0 16px !important;
    }

    .liquid-message {
        font-size: 14px !important;
        padding: 12px 16px !important;
        line-height: 1.9 !important;
        border-radius: 6px 16px 16px 16px !important;
        text-shadow: none !important;
        box-shadow: none !important;
    }

    .liquid-message .liquid-icon {
        font-size: 20px !important;
        margin-left: 6px !important;
    }

    .liquid-message .liquid-word {
        margin: 0 2px !important;
        text-shadow: none !important;
    }

    .liquid-message .liquid-line {
        padding: 1px 0 !important;
        text-shadow: none !important;
    }

    .liquid-skip-btn {
        font-size: 10px !important;
        padding: 5px 12px !important;
    }

    .stepper-wrapper::before {
        top: 12px !important;
    }

    .step-circle {
        width: 24px !important;
        height: 24px !important;
        font-size: 10px !important;
    }

    .step-circle.completed {
        width: 26px !important;
        height: 26px !important;
    }

    .step-label {
        font-size: 7px !important;
    }

    .food-card .locked-badge {
        font-size: 8px !important;
        padding: 2px 8px !important;
    }

    .cart-locked-message {
        font-size: 12px !important;
        padding: 12px 14px !important;
    }

    .rating-locked-notice {
        font-size: 11px !important;
        padding: 8px 12px !important;
    }

    .rating-warning {
        font-size: 10px !important;
        padding: 6px 10px !important;
    }

    .invoice-container {
        max-height: calc(100vh - 120px) !important;
    }

    .invoice-container .invoice-items {
        max-height: 140px !important;
    }

    .invoice-paid-banner .paid-icon {
        font-size: 34px !important;
    }

    .invoice-paid-banner .paid-title {
        font-size: 16px !important;
    }

    .invoice-header .invoice-logo {
        font-size: 44px !important;
    }

    .invoice-header .invoice-title {
        font-size: 18px !important;
    }

    .invoice-total .value {
        font-size: 20px !important;
    }

    .invoice-items-lux .invoice-item-lux .item-total {
        font-size: 12px !important;
        color: var(--accent-emerald, #047857) !important;
        background: linear-gradient(135deg,
            rgba(253, 224, 71, 0.32) 0%,
            rgba(250, 204, 21, 0.22) 100%) !important;
        padding: 2px 8px !important;
    }

    .invoice-summary-lux .summary-row.total .value {
        font-size: 20px !important;
        color: var(--accent-emerald, #047857) !important;
        -webkit-text-fill-color: var(--accent-emerald, #047857) !important;
        background: linear-gradient(135deg,
            rgba(253, 224, 71, 0.45) 0%,
            rgba(250, 204, 21, 0.32) 100%) !important;
        padding: 4px 14px !important;
    }
}

@media (max-width: 360px) {
    .splash-logo,
    .splash-screen .splash-logo {
        font-size: 58px !important;
    }

    .splash-title,
    .splash-screen .splash-title {
        font-size: 40px !important;
    }

    .liquid-message {
        font-size: 13px !important;
        padding: 10px 14px !important;
        line-height: 1.85 !important;
        text-shadow: none !important;
        box-shadow: none !important;
    }

    .liquid-message .liquid-icon {
        font-size: 18px !important;
    }

    .invoice-customer-grid {
        grid-template-columns: 1fr !important;
    }

    .invoice-container .invoice-items {
        max-height: 120px !important;
    }

    .step-circle {
        width: 22px !important;
        height: 22px !important;
        font-size: 9px !important;
    }

    .step-circle.completed {
        width: 24px !important;
        height: 24px !important;
    }

    .step-label {
        font-size: 6px !important;
    }
}

/* ============================================================
   ===== 💚 کلاس‌های قیمت سبز پررنگ =====
   ============================================================ */

.text-emerald {
    color: var(--accent-emerald, #047857) !important;
    font-weight: 900 !important;
    text-shadow:
        0 0 12px rgba(4, 120, 87, 0.55),
        0 0 24px rgba(4, 120, 87, 0.25);
}

.bg-emerald-soft {
    background: rgba(4, 120, 87, 0.12) !important;
    border: 1.5px solid rgba(4, 120, 87, 0.50) !important;
    color: var(--accent-emerald, #047857) !important;
    font-weight: 900 !important;
}

.glow-emerald {
    box-shadow:
        0 0 24px rgba(4, 120, 87, 0.45),
        0 0 48px rgba(4, 120, 87, 0.22) !important;
}

.price-yellow-emerald {
    color: var(--accent-emerald, #047857) !important;
    background: linear-gradient(135deg,
        rgba(253, 224, 71, 0.35) 0%,
        rgba(250, 204, 21, 0.24) 100%) !important;
    border: 1.5px solid rgba(202, 138, 4, 0.55) !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    font-weight: 900 !important;
    letter-spacing: 0.4px;
    text-shadow:
        0 0 12px rgba(4, 120, 87, 0.55),
        0 0 24px rgba(4, 120, 87, 0.28),
        0 1px 2px rgba(255, 255, 255, 0.7);
    box-shadow:
        0 0 14px rgba(250, 204, 21, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .price-yellow-emerald {
    color: var(--accent-emerald, #34D399) !important;
    background: linear-gradient(135deg,
        rgba(253, 224, 71, 0.24) 0%,
        rgba(250, 204, 21, 0.15) 100%) !important;
    border-color: rgba(250, 204, 21, 0.65) !important;
    text-shadow:
        0 0 14px rgba(52, 211, 153, 0.65),
        0 0 28px rgba(52, 211, 153, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   ===== 🔴🔴🔴 بلاک نهایی — حذف قطعی box-shadow از پیام‌ها =====
   ===== این بلاک باید آخرین بلاک مطلق فایل باشد =====
   ===== 🔴 کلید اصلی: box-shadow همان بیضی زیر کارت بود =====
   ============================================================ */

/* ===== ۱. حذف کامل box-shadow از کارت پیام ===== */
html body .liquid-message,
html body .message.bot .message-content,
html body .message .message-content,
html body .message {
    box-shadow: none !important;
}

/* ===== ۲. جایگزینی با border نازک (بدون سایه) ===== */
html body .liquid-message {
    border: 1px solid rgba(160, 32, 160, 0.15) !important;
    box-shadow: none !important;
}

/* ===== ۳. حالت تیره ===== */
html body [data-theme="dark"] .liquid-message {
    box-shadow: none !important;
    border-color: #30263a !important;
}

/* ===== ۴. حذف کامل هر بیضی/سایه زیر پیام‌ها ===== */
html body .liquid-message .liquid-line::after,
html body .liquid-message .liquid-line::before,
html body .liquid-message .liquid-word::after,
html body .liquid-message .liquid-word::before,
html body .liquid-message::after,
html body .liquid-line::after,
html body .liquid-line::before,
html body .liquid-word::after,
html body .liquid-word::before,
html body .message::after,
html body .message::before,
html body .message-content::after,
html body .message-content::before {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-width: 0 !important;
    border-radius: 0 !important;
    animation: none !important;
    animation-name: none !important;
    animation-duration: 0s !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    clip-path: inset(50%) !important;
    -webkit-clip-path: inset(50%) !important;
    pointer-events: none !important;
    overflow: hidden !important;
    z-index: -1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ===== ۵. حفظ خط تزئینی بالای کارت پیام ===== */
html body .liquid-message::before {
    display: block !important;
    content: '' !important;
    visibility: visible !important;
    opacity: 0.85 !important;
    width: auto !important;
    height: 3px !important;
    background: linear-gradient(90deg,
        transparent,
        rgba(139, 26, 139, 0.55),
        rgba(233, 30, 99, 0.65),
        rgba(4, 120, 87, 0.70),
        rgba(233, 30, 99, 0.65),
        rgba(139, 26, 139, 0.55),
        transparent) !important;
    border-radius: 0 !important;
    animation: none !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

/* ===== ۶. حذف text-shadow از خطوط و کلمات ===== */
html body .liquid-message .liquid-line,
html body .liquid-message .liquid-word,
html body .liquid-line,
html body .liquid-word,
html body .liquid-message {
    text-shadow: none !important;
}

/* ===== ۷. غیرفعالسازی کامل انیمیشن liquidShadowFade ===== */
@keyframes liquidShadowFade {
    0%, 100% {
        opacity: 0 !important;
        transform: scaleX(0) !important;
        display: none !important;
    }
}

/* ============================================================
   ===== 📝 خلاصه قواعد کلیدی نسخه v17 =====
   ============================================================ */
/*
   ✅✅✅ تغییرات کلیدی v17 نسبت به v16:

   1. ✅ اضافه شدن @keyframes keywordShine:
      - درخشش پویا گرادیان روی کلمات کلیدی
      - animation-iteration-count: infinite
      - background-position از 0% به 100%

   2. ✅ اضافه شدن @keyframes decorativePulse:
      - پالس ظریف روی ایموجی‌های تزئینی
      - transform: scale(1) → scale(1.08) → scale(1)
      - drop-shadow افزایش می‌یابد

   3. ✅ اضافه شدن کلاس keyword-rose:
      - گرادیان رز صورتی (#B0143F → #E91E63 → #F06292)
      - با درخشش پویا

   4. ✅ بهبود یافته liquidLineRise:
      - transform: translateY(35px) scaleY(0.35) rotate(-1deg)
      - easing: cubic-bezier(0.22, 1, 0.36, 1)
      - duration: 1.3s (به جای 1s)

   5. ✅ بهبود یافته liquidWordWave:
      - transform با چرخش rotate(-3deg) → rotate(2deg) → rotate(0)
      - 5 مرحله (0%, 40%, 65%, 85%, 100%)
      - duration: 1.1s

   6. ✅ اضافه شدن انیمیشن‌های هدر:
      - headerShine (نوار بالای هدر)
      - logoGlow (درخشش لوگو)

   7. ✅ حفظ کامل تغییرات v16:
      - box-shadow: none روی .liquid-message
      - text-shadow: none روی خطوط
      - حذف کامل ::after و ::before

   8. ✅ همه انیمیشن‌های جدید در whitelist قرار دارند:
      - keywordShine ✅
      - decorativePulse ✅
      - headerShine ✅
      - logoGlow ✅

   💛💚 رنگ‌های کلیدی نسخه v17:
   - زرد ملایم (پس‌زمینه قیمت): #FACC15
   - سبز پررنگ (متن قیمت): #047857
   - بنفش اصلی: #8B1A8B
   - بنفش روشن: #B07CC6
   - رز صورتی: #E91E63
   - رز تیره: #B0143F

   🎨 انیمیشن‌های مجاز به infinite در v17:
   1. typingBounce (نقطه‌های typing)
   2. keywordShine (درخشش کلمات کلیدی)
   3. decorativePulse (پالس ایموجی‌ها)
   4. loadingLine (نوار بارگذاری)
   5. headerShine (نوار هدر)
   6. logoGlow (درخشش لوگو)
*/

/* ============================================================
   ===== 📝 پایان ANIMATIONS.CSS v17 =====
   ============================================================ */