/* ============================================================
   ===== 💜 BEAUTY-UPGRADE.CSS — نسخه v9 =====
   ===== رستوران مدرن سوفیا — تجربه‌ی دلنشین برای مشتری =====
   ============================================================
   ===== 🔴 تغییرات نسخه v9 (هماهنگ با animations.css v17): =====
   ===== ✅ اضافه شدن پشتیبانی از کلاس .keyword-rose =====
   ===== ✅ هماهنگی easing با cubic-bezier(0.22, 1, 0.36, 1) =====
   ===== ✅ افزایش سایز فونت‌های پیام برای خوانایی بهتر =====
   ===== ✅ بهبود کلاس‌های کمکی کلیدواژه‌ها =====
   ===== ✅ پشتیبانی از prefers-reduced-motion =====
   ===== ✅ بهبود رنگ‌های استپر =====
   ===== ✅ حفظ کامل تغییرات v8 (فرم سبز-زرد) =====
   ============================================================
   ===== 🔴 تغییرات نسخه v8 (فرم سبز-زرد + فونت بزرگ‌تر): =====
   ===== ✅ فرم ثبت اطلاعات با تم سبز-زرد زیبا =====
   ===== ✅ افزایش سایز فونت‌ها در همه بخش‌ها =====
   ============================================================
   ===== 🔴 تغییرات نسخه v7: =====
   ===== ❌ حذف کامل استایل‌های هدر قدیمی =====
   ===== ✅ این استایل‌ها اکنون در index.html با کلاس‌های جدید =====
   ============================================================
   ===== 🔴 تغییرات نسخه v6 (رفع بریدگی تب‌ها): =====
   ===== ✅ padding عمودی تب‌ها: 10px → 14px =====
   ===== ✅ min-height: 48px به تب‌ها =====
   ===== ✅ line-height: 1.4 به تب‌ها =====
   ============================================================
   ===== 🔴 تغییرات نسخه v5 (قیمت‌های سبز پررنگ): =====
   ===== ✅ قیمت‌ها: سبز پررنگ‌تر (#047857) =====
   ===== ✅ درخشش سبز قوی‌تر (text-shadow سه‌لایه) =====
   ===== ✅ استپر: دایره فعال زرد (#FACC15) =====
   ===== ✅ استپر: دایره done سبز پررنگ (#047857) =====
   ============================================================ */

/* ============================================================
   ===== 🎨 بخش ۱: پالت رنگ — ارکیده + رز + زرد + سبز =====
   ============================================================ */

:root {
    /* ===== 💜 بنفش ارکیده ===== */
    --orchid: #A020A0;
    --orchid-dark: #7A0F7A;
    --orchid-light: #C040C0;
    --orchid-soft: #D888D8;

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

    /* ===== 💛 زرد ملایم (پس‌زمینه قیمت) ===== */
    --yellow: #FACC15;
    --yellow-light: #FDE047;
    --yellow-soft: rgba(253, 224, 71, 0.32);
    --yellow-softer: rgba(253, 224, 71, 0.20);
    --yellow-border: rgba(202, 138, 4, 0.50);
    --yellow-border-strong: rgba(202, 138, 4, 0.75);

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

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

    /* ===== ✨ طلایی گرم (فقط برای تاکیدات خاص) ===== */
    --warm-gold: #D4A017;
    --warm-gold-light: #E8C547;

    /* ===== 📝 متن‌ها — تیره‌تر و واضح‌تر ===== */
    --text-primary: #1a0a1f;
    --text-secondary: #3d2a45;
    --text-light: #6b5a75;
    --text-muted: #8a7a90;

    /* ===== 🎨 پس‌زمینه ===== */
    --bg: #f7f2f9;
    --card-bg: #ffffff;
    --border: #d8c8e0;
    --border-strong: #b8a0c8;

    /* ===== 🌈 گرادیان‌ها ===== */
    --gradient-orchid-rose: linear-gradient(135deg, #A020A0 0%, #E91E63 100%);
    --gradient-orchid: linear-gradient(135deg, #7A0F7A 0%, #A020A0 100%);
    --gradient-emerald: linear-gradient(135deg, #047857 0%, #10B981 100%);
    --gradient-warm-gold: linear-gradient(135deg, #D4A017 0%, #E8C547 100%);
    --gradient-price: linear-gradient(135deg,
        rgba(253, 224, 71, 0.35) 0%,
        rgba(250, 204, 21, 0.24) 100%);

    /* ===== ⏱️ easing لاکچری ===== */
    --luxury-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --bounce-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="dark"] {
    --text-primary: #ffffff;
    --text-secondary: #e8ddf0;
    --text-light: #b8a8c0;
    --text-muted: #8a7a95;

    --bg: #0a0510;
    --card-bg: #1a0f22;
    --border: #3a2a42;
    --border-strong: #5a4a62;

    /* ===== سبز روشن‌تر در حالت تیره ===== */
    --emerald: #34D399;
    --emerald-light: #6EE7B7;
    --emerald-glow: rgba(52, 211, 153, 0.55);
    --emerald-glow-strong: rgba(52, 211, 153, 0.75);
    --accent-gold: #34D399;
    --accent-gold-light: #6EE7B7;

    /* ===== زرد ملایم در حالت تیره ===== */
    --yellow-soft: rgba(253, 224, 71, 0.22);
    --yellow-softer: rgba(253, 224, 71, 0.14);
    --yellow-border: rgba(250, 204, 21, 0.60);
    --yellow-border-strong: rgba(250, 204, 21, 0.85);
    --gradient-price: linear-gradient(135deg,
        rgba(253, 224, 71, 0.22) 0%,
        rgba(250, 204, 21, 0.14) 100%);
}

/* ============================================================
   ===== 🎯 بخش ۲: تنظیمات عمومی — واضح و بولد =====
   ============================================================ */

body {
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    color: var(--text-primary);
}

html {
    font-size: 16px;
}

/* ============================================================
   ===== 📌 بخش ۳: هدر — منتقل شده به index.html =====
   ============================================================
   ===== 🔴 توجه مهم: =====
   ===== استایل‌های هدر قدیمی کاملاً حذف شده‌اند =====
   ===== استایل‌های جدید در index.html تعریف شده‌اند: =====
   ===== ✅ .app-header — کانتینر اصلی =====
   ===== ✅ .header-top-row — ردیف بالا =====
   ===== ✅ .brand-block, .brand-logo-wrap, .brand-logo =====
   ===== ✅ .brand-name, .brand-tagline, .brand-glow =====
   ===== ✅ .header-action-group, .action-btn, .action-icon =====
   ===== ✅ .customer-bar, .customer-chip, .chip-icon =====
   ===== ✅ .chip-content, .chip-label, .chip-value =====
   ===== ✅ .chip-total, .status-indicator, .status-dot =====
   ============================================================ */

/* ===== ⚠️ بلاک هدر قدیمی حذف شد — به index.html منتقل شده است ===== */

/* ============================================================
   ===== 🏷️ بخش ۴: تب‌های دسته‌بندی — بولد و واضح =====
   ===== 🔴 اصلاح v6 + فونت بزرگ‌تر v8: =====
   ===== ✅ padding: 14px 18px =====
   ===== ✅ min-height: 48px =====
   ===== ✅ line-height: 1.4 =====
   ===== ✅ font-size: 14px =====
   ===== ✅ display: inline-flex + align-items: center =====
   ===== ✅ white-space: nowrap =====
   ============================================================ */

.category-tab {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    background: #ffffff !important;
    border: 2px solid var(--border) !important;
    padding: 14px 18px !important;
    min-height: 48px !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    border-radius: 20px !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    letter-spacing: 0.02em !important;
    transition: all 0.3s var(--luxury-ease) !important;
}

[data-theme="dark"] .category-tab {
    background: #1a0f22 !important;
    color: var(--text-primary) !important;
}

.category-tab:hover {
    border-color: var(--orchid) !important;
    color: var(--orchid-dark) !important;
    box-shadow: 0 4px 12px rgba(160, 32, 160, 0.15) !important;
    transform: translateY(-2px) !important;
}

.category-tab.active {
    background: linear-gradient(135deg, #A020A0 0%, #E91E63 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 16px rgba(160, 32, 160, 0.35) !important;
    font-weight: 900 !important;
}

.category-tab .icon {
    font-size: 18px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.category-tab .badge-count {
    font-weight: 900 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    padding: 2px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: rgba(160, 32, 160, 0.15) !important;
    color: var(--orchid-dark) !important;
    flex-shrink: 0 !important;
}

.category-tab.active .badge-count {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .category-tab .badge-count {
    background: rgba(192, 64, 192, 0.20) !important;
    color: var(--orchid-light) !important;
}

[data-theme="dark"] .category-tab.active .badge-count {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
}

/* ============================================================
   ===== 💬 بخش ۵: پیام‌ها — فونت بزرگ‌تر و واضح‌تر =====
   ============================================================ */

.message-content {
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 2.1 !important;
    letter-spacing: 0.02em !important;
    padding: 14px 20px !important;
    text-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.04);
}

.message.bot .message-content,
.liquid-message {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border: 1.5px solid var(--border) !important;
    box-shadow: 0 3px 14px rgba(160, 32, 160, 0.08) !important;
}

[data-theme="dark"] .message.bot .message-content,
[data-theme="dark"] .liquid-message {
    background: #1a0f22 !important;
    color: #ffffff !important;
    border-color: var(--border) !important;
}

.message.user .message-content {
    background: linear-gradient(135deg, #A020A0 0%, #E91E63 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 16px rgba(160, 32, 160, 0.3) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.liquid-message {
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 2.1 !important;
    letter-spacing: 0.02em !important;
}

.liquid-message .liquid-line {
    font-weight: 600 !important;
    text-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.04);
}

.liquid-message .liquid-word {
    font-weight: 600 !important;
}

/* ============================================================
   ===== ✨ بخش ۵.۱: کلیدواژه‌ها — درخشش پویا =====
   ===== 🆕 نسخه v9: پشتیبانی از keyword-rose =====
   ===== ⚠️ توجه: انیمیشن‌ها در animations.css تعریف شده‌اند =====
   ===== این بخش فقط برای fallback (اگر animations.css لود نشد) =====
   ============================================================ */

/* ===== 💜 کلیدواژه طلایی-سینمایی (gold) ===== */
.liquid-message .liquid-word.keyword-gold {
    font-weight: 900 !important;
    background: linear-gradient(90deg,
        #A020A0 0%,
        #E91E63 25%,
        #047857 50%,
        #E91E63 75%,
        #A020A0 100%) !important;
    background-size: 300% 100% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ===== 🟣 کلیدواژه بنفش لوکس (purple) ===== */
.liquid-message .liquid-word.keyword-purple {
    font-weight: 900 !important;
    background: linear-gradient(90deg,
        #7A0F7A 0%,
        #A020A0 25%,
        #C040C0 50%,
        #A020A0 75%,
        #7A0F7A 100%) !important;
    background-size: 300% 100% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ===== 🌹 کلیدواژه رز صورتی (rose) — 🆕 جدید ===== */
.liquid-message .liquid-word.keyword-rose {
    font-weight: 900 !important;
    background: linear-gradient(90deg,
        #B0143F 0%,
        #E91E63 25%,
        #F06292 50%,
        #E91E63 75%,
        #B0143F 100%) !important;
    background-size: 300% 100% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ===== ✨ ایموجی‌های تزئینی ===== */
.liquid-message .liquid-word.decorative {
    color: #E91E63 !important;
    font-size: 1.18em !important;
    filter: drop-shadow(0 2px 8px rgba(233, 30, 99, 0.55)) !important;
    font-weight: 800 !important;
}

.message .time {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    opacity: 0.85 !important;
}

/* ============================================================
   ===== 🍽️ بخش ۶: کارت‌های غذا — فونت بزرگ‌تر =====
   ============================================================ */

.food-card {
    background: #ffffff !important;
    border: 2px solid var(--border) !important;
    box-shadow: 0 3px 12px rgba(160, 32, 160, 0.06) !important;
}

[data-theme="dark"] .food-card {
    background: #1a0f22 !important;
    border-color: var(--border) !important;
}

.food-card:hover {
    border-color: var(--emerald-light) !important;
    box-shadow: 0 8px 24px rgba(4, 120, 87, 0.20) !important;
}

.food-card.selected {
    background: linear-gradient(135deg,
        rgba(160, 32, 160, 0.08) 0%,
        rgba(233, 30, 99, 0.05) 100%) !important;
    border-color: var(--rose) !important;
    box-shadow: 0 4px 16px rgba(233, 30, 99, 0.25) !important;
}

.food-card .name {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: var(--text-primary) !important;
    line-height: 1.4 !important;
    letter-spacing: -0.2px !important;
    text-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.05);
}

.food-card .desc {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    line-height: 1.6 !important;
    opacity: 1 !important;
}

/* ============================================================
   ===== 💛💚✅ قیمت — زرد + سبز پررنگ (فونت بزرگ‌تر) =====
   ============================================================ */

.food-card .price {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #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: 5px 16px !important;
    border-radius: 20px !important;
    letter-spacing: 0.5px;
    text-shadow:
        0 0 12px rgba(4, 120, 87, 0.55),
        0 0 24px rgba(4, 120, 87, 0.30),
        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);
    transition: all 0.3s var(--luxury-ease);
}

.food-card:hover .price {
    background: linear-gradient(135deg,
        rgba(253, 224, 71, 0.50) 0%,
        rgba(250, 204, 21, 0.38) 100%) !important;
    border-color: rgba(202, 138, 4, 0.85) !important;
    box-shadow:
        0 0 28px rgba(250, 204, 21, 0.45),
        0 0 14px rgba(4, 120, 87, 0.35);
    transform: scale(1.06);
    text-shadow:
        0 0 16px rgba(4, 120, 87, 0.70),
        0 0 32px rgba(4, 120, 87, 0.40),
        0 1px 2px rgba(255, 255, 255, 0.8);
}

.food-card.selected .price {
    background: linear-gradient(135deg,
        rgba(253, 224, 71, 0.45) 0%,
        rgba(250, 204, 21, 0.32) 100%) !important;
    border-color: rgba(202, 138, 4, 0.75) !important;
    box-shadow:
        0 0 22px rgba(250, 204, 21, 0.40),
        0 0 12px rgba(4, 120, 87, 0.30);
}

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

.food-card .emoji {
    font-size: 44px !important;
}

.food-card.selected .check {
    background: linear-gradient(135deg, #A020A0 0%, #E91E63 100%) !important;
    box-shadow: 0 2px 10px rgba(160, 32, 160, 0.4) !important;
}

.food-card .qty-control button {
    font-weight: 900 !important;
    font-size: 17px !important;
}

.food-card .qty-control .qty {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: var(--text-primary) !important;
}

/* ============================================================
   ===== 📂 بخش ۷: هدر دسته‌بندی — فونت بزرگ‌تر =====
   ============================================================ */

.category-section-header {
    background: linear-gradient(135deg,
        rgba(160, 32, 160, 0.10) 0%,
        rgba(233, 30, 99, 0.06) 100%) !important;
    border: 2px solid rgba(160, 32, 160, 0.2) !important;
    padding: 14px 18px !important;
}

.category-section-header .cat-title {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.3px;
    text-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.05);
}

.category-section-header .cat-sub {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
}

.category-section-header .cat-count {
    font-size: 13px !important;
    font-weight: 900 !important;
    padding: 6px 14px !important;
    background: linear-gradient(135deg, #A020A0 0%, #E91E63 100%) !important;
    box-shadow: 0 3px 10px rgba(160, 32, 160, 0.3) !important;
}

.category-section-header .cat-icon {
    font-size: 34px !important;
}

/* ============================================================
   ===== 🛒 بخش ۸: دکمه شناور سبد — برجسته =====
   ============================================================ */

.floating-cart {
    background: linear-gradient(135deg, #A020A0 0%, #E91E63 100%) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    padding: 14px 28px !important;
    box-shadow:
        0 8px 32px rgba(160, 32, 160, 0.45),
        0 4px 16px rgba(233, 30, 99, 0.3) !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.floating-cart .cart-total {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.floating-cart .cart-count {
    font-size: 12px !important;
    font-weight: 700 !important;
    opacity: 0.95;
}

.floating-cart .cart-icon {
    font-size: 24px !important;
}

/* ============================================================
   ===== 🛍️ بخش ۹: سبد خرید — فونت بزرگ‌تر =====
   ============================================================ */

.cart-container {
    background: #ffffff !important;
    border: 2px solid var(--border) !important;
    box-shadow: 0 4px 16px rgba(160, 32, 160, 0.08) !important;
}

[data-theme="dark"] .cart-container {
    background: #1a0f22 !important;
}

.cart-header .title {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: var(--text-primary) !important;
    text-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.05);
}

.cart-header .title .badge {
    font-size: 14px !important;
    font-weight: 900 !important;
    padding: 3px 14px !important;
}

.cart-item .info .name {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
}

/* ============================================================
   ===== 💛💚 قیمت هر آیتم در سبد — زرد + سبز پررنگ =====
   ============================================================ */
.cart-item .price {
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #047857 !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: 10px !important;
    border: 1px solid rgba(202, 138, 4, 0.50) !important;
    letter-spacing: 0.4px;
    text-shadow:
        0 0 10px rgba(4, 120, 87, 0.50),
        0 0 20px rgba(4, 120, 87, 0.25),
        0 1px 1px rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 10px rgba(250, 204, 21, 0.20);
}

[data-theme="dark"] .cart-item .price {
    color: #34D399 !important;
    background: linear-gradient(135deg,
        rgba(253, 224, 71, 0.22) 0%,
        rgba(250, 204, 21, 0.14) 100%) !important;
    border-color: rgba(250, 204, 21, 0.60) !important;
    text-shadow:
        0 0 12px rgba(52, 211, 153, 0.65),
        0 0 24px rgba(52, 211, 153, 0.35),
        0 1px 1px rgba(0, 0, 0, 0.5);
}

.cart-footer .total-row .label {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
}

/* ============================================================
   ===== 💛💚✅ مبلغ کل سبد خرید — زرد + سبز پررنگ =====
   ============================================================ */
.cart-footer .total-row .amount {
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #047857 !important;
    background: linear-gradient(135deg,
        rgba(253, 224, 71, 0.42) 0%,
        rgba(250, 204, 21, 0.30) 100%) !important;
    padding: 6px 16px !important;
    border-radius: 12px !important;
    border: 2px solid rgba(202, 138, 4, 0.60) !important;
    letter-spacing: 0.5px;
    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);
    box-shadow:
        0 0 20px rgba(250, 204, 21, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .cart-footer .total-row .amount {
    color: #34D399 !important;
    background: linear-gradient(135deg,
        rgba(253, 224, 71, 0.30) 0%,
        rgba(250, 204, 21, 0.20) 100%) !important;
    border-color: rgba(250, 204, 21, 0.75) !important;
    text-shadow:
        0 0 18px rgba(52, 211, 153, 0.75),
        0 0 36px rgba(52, 211, 153, 0.45),
        0 1px 2px rgba(0, 0, 0, 0.5);
}

.cart-footer .actions-row button {
    font-size: 15px !important;
    font-weight: 900 !important;
    padding: 14px 18px !important;
}

/* ============================================================
   ===== 📋 بخش ۱۰: وضعیت سفارش — فونت بزرگ‌تر =====
   ============================================================ */

.status-timeline {
    background: #ffffff !important;
    border: 2px solid var(--border) !important;
}

[data-theme="dark"] .status-timeline {
    background: #1a0f22 !important;
}

.status-timeline .header .info .title {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: var(--text-primary) !important;
}

.status-timeline .header .info .sub {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
}

.status-timeline .header .code {
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 4px 14px !important;
}

/* ============================================================
   ===== 🎯 بخش ۱۰.۵: استپر ۴ مرحله‌ای =====
   ===== ✅ مرحله فعال: زرد (#FACC15) =====
   ===== ✅ مرحله انجام‌شده: سبز پررنگ (#047857) =====
   ===== ✅ مرحله پرداخت: سبز درخشان =====
   ===== ✅ فونت بزرگ‌تر v8 =====
   ============================================================ */

/* ===== مرحله عادی (خاکستری خنثی) ===== */
.step-circle {
    border: 2px solid var(--border) !important;
    background: var(--card-bg) !important;
    transition: all 0.5s var(--bounce-ease) !important;
    width: 30px !important;
    height: 30px !important;
}

.step-circle .step-number {
    color: var(--text-secondary) !important;
    font-weight: 900 !important;
    font-size: 13px !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 20px rgba(250, 204, 21, 0.60),
        0 0 40px rgba(250, 204, 21, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !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-label.active {
    color: #B45309 !important;
    font-weight: 900 !important;
    text-shadow: 0 0 8px rgba(250, 204, 21, 0.45);
}

/* ===== ✅ مرحله انجام‌شده — سبز پررنگ ===== */
.step-circle.done {
    border-color: #047857 !important;
    background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 0 18px rgba(4, 120, 87, 0.55),
        0 0 36px rgba(4, 120, 87, 0.30) !important;
}

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

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

/* ===== ✅ مرحله پرداخت — سبز درخشان ===== */
.step-circle.completed {
    border-color: #065F46 !important;
    background: linear-gradient(135deg, #047857 0%, #10B981 50%, #34D399 100%) !important;
    color: #ffffff !important;
    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),
        inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.step-circle.completed .step-number {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

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

/* ===== حالت تیره — استپر ===== */
[data-theme="dark"] .step-circle.active {
    border-color: #FDE047 !important;
    background: linear-gradient(135deg, #FDE047 0%, #FEF08A 100%) !important;
    box-shadow:
        0 0 24px rgba(253, 224, 71, 0.75),
        0 0 48px rgba(253, 224, 71, 0.45) !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.65),
        0 0 40px rgba(52, 211, 153, 0.35) !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.80),
        0 0 60px rgba(52, 211, 153, 0.50),
        0 0 100px rgba(52, 211, 153, 0.30) !important;
}

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

/* ===== لیبل استپر — بولد و بزرگ‌تر ===== */
.step-label {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--text-secondary) !important;
    line-height: 1.3 !important;
}

/* ============================================================
   ===== ⭐ بخش ۱۱: نظرسنجی — فونت بزرگ‌تر =====
   ============================================================ */

.rating-container {
    background: linear-gradient(145deg,
        #ffffff 0%,
        #faf5fc 100%) !important;
    border: 2px solid rgba(160, 32, 160, 0.25) !important;
    box-shadow: 0 8px 32px rgba(160, 32, 160, 0.12) !important;
}

[data-theme="dark"] .rating-container {
    background: linear-gradient(145deg,
        #1a0f22 0%,
        #150a1c 100%) !important;
    border-color: rgba(192, 64, 192, 0.3) !important;
}

.rating-title {
    font-size: 23px !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #A020A0 0%, #E91E63 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    letter-spacing: -0.3px;
}

.rating-sub {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
}

.rating-stars .star {
    font-size: 54px !important;
}

.rating-result {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
}

.rating-feedback {
    font-size: 16px !important;
    font-weight: 600 !important;
    border: 2px solid rgba(160, 32, 160, 0.25) !important;
}

.rating-submit {
    font-size: 18px !important;
    font-weight: 900 !important;
    padding: 16px 50px !important;
    background: linear-gradient(135deg, #A020A0 0%, #E91E63 100%) !important;
    box-shadow: 0 6px 24px rgba(160, 32, 160, 0.4) !important;
}

/* ============================================================
   ===== 🧾 بخش ۱۲: فاکتور — فونت بزرگ‌تر =====
   ============================================================ */

.invoice-container {
    background: linear-gradient(145deg,
        #ffffff 0%,
        #faf5fc 100%) !important;
    border: 2px solid rgba(160, 32, 160, 0.3) !important;
    box-shadow: 0 8px 32px rgba(160, 32, 160, 0.12) !important;
}

[data-theme="dark"] .invoice-container {
    background: linear-gradient(145deg,
        #1a0f22 0%,
        #150a1c 100%) !important;
}

.invoice-header-lux .invoice-shop-name {
    font-size: 22px !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #A020A0 0%, #E91E63 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.invoice-header-lux .invoice-subtitle {
    font-weight: 800 !important;
    color: var(--text-secondary) !important;
}

.invoice-customer-grid-lux .info-box .lbl {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
}

.invoice-customer-grid-lux .info-box .val {
    font-size: 15px !important;
    font-weight: 900 !important;
    color: var(--text-primary) !important;
}

.invoice-items-lux .invoice-item-lux .item-name {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
}

.invoice-items-lux .invoice-item-lux .item-qty {
    font-weight: 900 !important;
    font-size: 13px !important;
}

.invoice-items-lux .invoice-item-lux .item-price {
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* ============================================================
   ===== 💛💚 قیمت هر آیتم در فاکتور — زرد + سبز پررنگ =====
   ============================================================ */
.invoice-items-lux .invoice-item-lux .item-total {
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #047857 !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);
    direction: ltr;
    font-family: 'Courier New', monospace;
}

[data-theme="dark"] .invoice-items-lux .invoice-item-lux .item-total {
    color: #34D399 !important;
    background: linear-gradient(135deg,
        rgba(253, 224, 71, 0.22) 0%,
        rgba(250, 204, 21, 0.14) 100%) !important;
    border-color: rgba(250, 204, 21, 0.55) !important;
    text-shadow:
        0 0 12px rgba(52, 211, 153, 0.60),
        0 0 24px rgba(52, 211, 153, 0.30);
}

.invoice-summary-lux .summary-row .label {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--text-secondary) !important;
}

.invoice-summary-lux .summary-row .value {
    font-size: 14px !important;
    font-weight: 900 !important;
    color: var(--text-primary) !important;
}

.invoice-summary-lux .summary-row.total .label {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: var(--orchid-dark) !important;
}

/* ============================================================
   ===== 💛💚✅ مبلغ کل فاکتور — زرد + سبز پررنگ =====
   ============================================================ */
.invoice-summary-lux .summary-row.total .value {
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #047857 !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);
    -webkit-text-fill-color: #047857 !important;
}

[data-theme="dark"] .invoice-summary-lux .summary-row.total .value {
    color: #34D399 !important;
    -webkit-text-fill-color: #34D399 !important;
    background: linear-gradient(135deg,
        rgba(253, 224, 71, 0.30) 0%,
        rgba(250, 204, 21, 0.20) 100%) !important;
    border-color: rgba(250, 204, 21, 0.75) !important;
    text-shadow:
        0 0 20px rgba(52, 211, 153, 0.75),
        0 0 40px rgba(52, 211, 153, 0.45),
        0 1px 2px rgba(0, 0, 0, 0.5);
}

.invoice-actions-lux button {
    font-size: 15px !important;
    font-weight: 900 !important;
    padding: 14px !important;
}

/* ============================================================
   ===== 🎯 بخش ۱۳: منوی پایین — فونت بزرگ‌تر =====
   ============================================================ */

.bottom-nav {
    background: #ffffff !important;
    border-top: 2px solid var(--border) !important;
    box-shadow: 0 -4px 20px rgba(160, 32, 160, 0.08) !important;
}

[data-theme="dark"] .bottom-nav {
    background: #1a0f22 !important;
}

.bottom-nav .nav-item {
    color: var(--text-secondary) !important;
    font-weight: 800 !important;
}

.bottom-nav .nav-item .nav-icon {
    font-size: 26px !important;
}

.bottom-nav .nav-item .nav-label {
    font-size: 12px !important;
    font-weight: 900 !important;
    color: var(--text-primary) !important;
}

.bottom-nav .nav-item.active {
    color: var(--orchid) !important;
    background: linear-gradient(135deg,
        rgba(160, 32, 160, 0.12) 0%,
        rgba(233, 30, 99, 0.06) 100%) !important;
}

.bottom-nav .nav-item.active .nav-label {
    color: var(--orchid-dark) !important;
}

.bottom-nav .nav-item .nav-badge {
    font-size: 11px !important;
    font-weight: 900 !important;
    padding: 3px 8px !important;
}

/* ============================================================
   ===== ✅✅✅ بخش ۱۴: فرم ثبت اطلاعات — تم سبز + زرد =====
   ===== 🔴 طراحی v8: =====
   ===== ✅ پس‌زمینه: linear-gradient(#ffffff, #f0fdf4) =====
   ===== ✅ حاشیه: rgba(4, 120, 87, 0.30) =====
   ===== ✅ خط بالا: گرادیان زرد-سبز =====
   ===== ✅ عنوان: گرادیان سبز-زرد =====
   ===== ✅ برچسب‌ها: #065F46 (سبز تیره) =====
   ===== ✅ ورودی‌ها: #f0fdf4 (سبز بسیار ملایم) =====
   ===== ✅ دکمه: linear-gradient(#047857, #059669) =====
   ============================================================ */

.form-container {
    background: linear-gradient(145deg,
        #ffffff 0%,
        #f0fdf4 100%) !important;
    border: 2px solid rgba(4, 120, 87, 0.30) !important;
    border-radius: 18px !important;
    padding: 22px 22px !important;
    margin: 6px 0 !important;
    box-shadow:
        0 8px 32px rgba(4, 120, 87, 0.12),
        0 0 0 1px rgba(4, 120, 87, 0.06) inset !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* ===== خط بالای فرم با گرادیان سبز-زرد ===== */
.form-container::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg,
        transparent 0%,
        #FACC15 20%,
        #047857 50%,
        #FACC15 80%,
        transparent 100%) !important;
    background-size: 200% 100% !important;
    opacity: 0.95 !important;
    animation: none !important;
}

/* ===== عنوان فرم با گرادیان سبز-زرد ===== */
.form-container .form-title {
    font-size: 21px !important;
    font-weight: 900 !important;
    text-align: center !important;
    margin-bottom: 16px !important;
    font-family: 'Playfair Display', 'Vazirmatn', serif !important;
    letter-spacing: 0.3px !important;
    background: linear-gradient(135deg,
        #047857 0%,
        #059669 30%,
        #FACC15 55%,
        #059669 80%,
        #047857 100%) !important;
    background-size: 100% 100% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: 0 2px 8px rgba(4, 120, 87, 0.15);
}

.form-container .form-title .emoji {
    font-size: 24px !important;
    display: inline-block !important;
    margin: 0 6px !important;
    -webkit-text-fill-color: initial !important;
    filter: drop-shadow(0 2px 6px rgba(4, 120, 87, 0.3));
}

/* ===== جداکننده سبز ===== */
.form-container .divider-luxury {
    color: #047857 !important;
    margin: 10px 0 18px !important;
}

.form-container .divider-luxury::before,
.form-container .divider-luxury::after {
    background: linear-gradient(90deg, transparent, #047857, transparent) !important;
}

.form-container .divider-luxury .diamond {
    color: #FACC15 !important;
    font-size: 14px !important;
}

/* ===== گروه‌های فرم ===== */
.form-container .form-group {
    margin-bottom: 16px !important;
}

.form-container .form-group label {
    display: block !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    color: #065F46 !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.3px !important;
    text-shadow: 0 0.5px 1px rgba(255, 255, 255, 0.6);
}

.form-container .form-group label .optional-tag {
    font-size: 12px !important;
    color: #059669 !important;
    font-weight: 700 !important;
    margin-right: 4px !important;
    opacity: 0.85;
}

.form-container .form-group input {
    width: 100% !important;
    padding: 14px 16px !important;
    background: #f0fdf4 !important;
    border: 2px solid rgba(4, 120, 87, 0.25) !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    font-family: 'Vazirmatn', sans-serif !important;
    color: #065F46 !important;
    transition: all 0.3s var(--luxury-ease) !important;
    outline: none !important;
    letter-spacing: 0.02em;
}

.form-container .form-group input::placeholder {
    color: #059669 !important;
    opacity: 0.55 !important;
    font-weight: 600 !important;
}

.form-container .form-group input:focus {
    border-color: #047857 !important;
    box-shadow: 0 0 0 4px rgba(4, 120, 87, 0.15) !important;
    background: #ffffff !important;
}

/* ===== دکمه ارسال فرم ===== */
.form-container .form-submit {
    width: 100% !important;
    padding: 15px !important;
    background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 14px !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    font-family: 'Vazirmatn', sans-serif !important;
    transition: all 0.4s var(--bounce-ease) !important;
    box-shadow:
        0 6px 20px rgba(4, 120, 87, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    position: relative !important;
    overflow: hidden !important;
}

.form-container .form-submit::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg,
        transparent,
        rgba(250, 204, 21, 0.3),
        transparent) !important;
    transition: left 0.6s ease !important;
}

.form-container .form-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        0 10px 28px rgba(4, 120, 87, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.form-container .form-submit:hover::before {
    left: 100% !important;
}

.form-container .form-submit:active {
    transform: translateY(0) scale(0.98) !important;
}

.form-container .form-submit:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* ===== خطای فرم ===== */
.form-container .form-error {
    color: #c0392b !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-align: center !important;
    margin-top: 8px !important;
    display: none !important;
    padding: 10px 14px !important;
    background: rgba(192, 57, 43, 0.08) !important;
    border-radius: 10px !important;
    border-right: 4px solid #c0392b !important;
    letter-spacing: 0.02em;
}

/* ===== راهنمای فرم ===== */
.form-container .form-help {
    font-size: 13px !important;
    color: #059669 !important;
    text-align: center !important;
    margin-top: 12px !important;
    opacity: 0.9 !important;
    line-height: 1.7 !important;
    font-style: italic !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}

/* ============================================================
   ===== ✅ فرم در حالت تیره — سبز-زرد تیره =====
   ============================================================ */

[data-theme="dark"] .form-container {
    background: linear-gradient(145deg,
        #0f1f1a 0%,
        #051410 100%) !important;
    border-color: rgba(52, 211, 153, 0.35) !important;
    box-shadow:
        0 8px 32px rgba(4, 120, 87, 0.25),
        0 0 0 1px rgba(52, 211, 153, 0.10) inset !important;
}

[data-theme="dark"] .form-container .form-title {
    background: linear-gradient(135deg,
        #34D399 0%,
        #6EE7B7 30%,
        #FDE047 55%,
        #6EE7B7 80%,
        #34D399 100%) !important;
    background-size: 100% 100% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

[data-theme="dark"] .form-container .form-group label {
    color: #6EE7B7 !important;
    text-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .form-container .form-group label .optional-tag {
    color: #34D399 !important;
}

[data-theme="dark"] .form-container .form-group input {
    background: #0a1a15 !important;
    border-color: rgba(52, 211, 153, 0.35) !important;
    color: #f0fdf4 !important;
}

[data-theme="dark"] .form-container .form-group input::placeholder {
    color: #34D399 !important;
    opacity: 0.5 !important;
}

[data-theme="dark"] .form-container .form-group input:focus {
    border-color: #34D399 !important;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.20) !important;
    background: #0f2419 !important;
}

[data-theme="dark"] .form-container .form-submit {
    background: linear-gradient(135deg, #059669 0%, #10B981 100%) !important;
    box-shadow:
        0 6px 20px rgba(52, 211, 153, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .form-container .form-help {
    color: #6EE7B7 !important;
}

[data-theme="dark"] .form-container .form-error {
    background: rgba(231, 76, 60, 0.15) !important;
    color: #ff6b6b !important;
    border-right-color: #e74c3c !important;
}

[data-theme="dark"] .form-container .divider-luxury {
    color: #34D399 !important;
}

[data-theme="dark"] .form-container .divider-luxury::before,
[data-theme="dark"] .form-container .divider-luxury::after {
    background: linear-gradient(90deg, transparent, #34D399, transparent) !important;
}

[data-theme="dark"] .form-container .divider-luxury .diamond {
    color: #FDE047 !important;
}

/* ============================================================
   ===== ✅ بخش ۱۵: بنر تکمیل — فونت بزرگ‌تر =====
   ============================================================ */

.order-completed-banner {
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.15) 0%,
        rgba(52, 211, 153, 0.08) 100%) !important;
    border: 2px solid rgba(4, 120, 87, 0.55) !important;
    box-shadow: 0 4px 20px rgba(4, 120, 87, 0.18) !important;
}

.order-completed-banner .completed-title {
    font-size: 23px !important;
    font-weight: 900 !important;
    color: var(--emerald-dark) !important;
    text-shadow: 0 0 15px rgba(4, 120, 87, 0.35);
}

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

.order-completed-banner .completed-sub {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
}

/* ============================================================
   ===== 📱 بخش ۱۶: واکنش‌گرا (Responsive) =====
   ============================================================ */

@media (max-width: 480px) {
    /* ===== پیام‌ها در موبایل ===== */
    .message-content {
        font-size: 16px !important;
        padding: 13px 18px !important;
        line-height: 2 !important;
    }

    .liquid-message {
        font-size: 16px !important;
        padding: 14px 18px !important;
        line-height: 2 !important;
    }

    /* ===== کارت‌های غذا ===== */
    .food-card .name {
        font-size: 15px !important;
    }

    .food-card .desc {
        font-size: 12px !important;
    }

    /* ===== قیمت در موبایل ===== */
    .food-card .price {
        font-size: 15px !important;
        padding: 4px 14px !important;
        color: #047857 !important;
        background: linear-gradient(135deg,
            rgba(253, 224, 71, 0.38) 0%,
            rgba(250, 204, 21, 0.26) 100%) !important;
        border-color: rgba(202, 138, 4, 0.60) !important;
        text-shadow:
            0 0 12px rgba(4, 120, 87, 0.55),
            0 0 22px rgba(4, 120, 87, 0.28),
            0 1px 2px rgba(255, 255, 255, 0.7) !important;
    }

    .category-section-header .cat-title {
        font-size: 18px !important;
    }

    /* ===== تب‌های دسته‌بندی در موبایل ===== */
    .category-tab {
        font-size: 13px !important;
        padding: 14px 16px !important;
        min-height: 48px !important;
        line-height: 1.4 !important;
    }

    .category-tab .icon {
        font-size: 18px !important;
    }

    .category-tab .badge-count {
        font-size: 11px !important;
        padding: 2px 8px !important;
    }

    .bottom-nav .nav-item .nav-label {
        font-size: 11px !important;
    }

    .bottom-nav .nav-item .nav-icon {
        font-size: 25px !important;
    }

    .rating-stars .star {
        font-size: 46px !important;
    }

    .rating-title {
        font-size: 20px !important;
    }

    /* ===== مبلغ کل سبد در موبایل ===== */
    .cart-footer .total-row .amount {
        font-size: 23px !important;
        color: #047857 !important;
        background: linear-gradient(135deg,
            rgba(253, 224, 71, 0.42) 0%,
            rgba(250, 204, 21, 0.30) 100%) !important;
        padding: 5px 14px !important;
        text-shadow:
            0 0 16px rgba(4, 120, 87, 0.60),
            0 0 30px rgba(4, 120, 87, 0.32),
            0 1px 2px rgba(255, 255, 255, 0.7) !important;
    }

    /* ===== قیمت آیتم‌های سبد در موبایل ===== */
    .cart-item .price {
        font-size: 14px !important;
        color: #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;
        border-radius: 8px !important;
    }

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

    /* ===== استپر در موبایل ===== */
    .step-circle {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }

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

    /* ===== فرم در موبایل ===== */
    .form-container {
        padding: 18px 18px !important;
    }

    .form-container .form-title {
        font-size: 19px !important;
    }

    .form-container .form-group label {
        font-size: 14px !important;
    }

    .form-container .form-group input {
        font-size: 16px !important;
        padding: 13px 15px !important;
    }

    .form-container .form-submit {
        font-size: 16px !important;
        padding: 14px !important;
    }

    /* ===== قیمت آیتم‌های فاکتور در موبایل ===== */
    .invoice-items-lux .invoice-item-lux .item-total {
        font-size: 14px !important;
        color: #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: 22px !important;
        color: #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 (min-width: 481px) and (max-width: 768px) {
    .category-tab {
        font-size: 14px !important;
        padding: 15px 20px !important;
        min-height: 50px !important;
        line-height: 1.4 !important;
    }

    .category-tab .icon {
        font-size: 20px !important;
    }
}

/* ============================================================
   ===== 🌙 بخش ۱۷: حالت تیره — فونت بزرگ‌تر =====
   ============================================================ */

[data-theme="dark"] body {
    background: #0a0510;
}

[data-theme="dark"] .food-card .name,
[data-theme="dark"] .cart-item .info .name,
[data-theme="dark"] .message.bot .message-content,
[data-theme="dark"] .liquid-message,
[data-theme="dark"] .status-timeline .header .info .title,
[data-theme="dark"] .rating-result,
[data-theme="dark"] .invoice-customer-grid-lux .info-box .val,
[data-theme="dark"] .invoice-items-lux .invoice-item-lux .item-name {
    color: #ffffff !important;
}

[data-theme="dark"] .food-card .desc,
[data-theme="dark"] .category-section-header .cat-sub,
[data-theme="dark"] .message .time {
    color: #b8a8c0 !important;
}

/* ============================================================
   ===== 💛💚 قیمت‌ها در حالت تیره — زرد + سبز روشن =====
   ============================================================ */

[data-theme="dark"] .food-card .price,
[data-theme="dark"] .cart-item .price,
[data-theme="dark"] .cart-footer .total-row .amount,
[data-theme="dark"] .invoice-items-lux .invoice-item-lux .item-total {
    color: #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.60) !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) !important;
}

[data-theme="dark"] .invoice-summary-lux .summary-row.total .value {
    color: #34D399 !important;
    -webkit-text-fill-color: #34D399 !important;
    background: linear-gradient(135deg,
        rgba(253, 224, 71, 0.30) 0%,
        rgba(250, 204, 21, 0.20) 100%) !important;
    border-color: rgba(250, 204, 21, 0.75) !important;
    text-shadow:
        0 0 20px rgba(52, 211, 153, 0.75),
        0 0 40px rgba(52, 211, 153, 0.45),
        0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ============================================================
   ===== ✨ بخش ۱۸: انتقال نرم =====
   ============================================================ */

button,
.option-btn,
.food-card,
.category-tab,
.nav-item,
.cart-footer .actions-row button,
.rating-submit,
.form-submit {
    transition: all 0.3s var(--luxury-ease);
}

.food-card .price,
.cart-item .price,
.cart-footer .total-row .amount,
.invoice-items-lux .invoice-item-lux .item-total,
.invoice-summary-lux .summary-row.total .value,
.step-circle {
    transition: all 0.35s var(--luxury-ease);
}

/* ============================================================
   ===== 🎯 بخش ۱۹: فوکوس واضح =====
   ============================================================ */

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--rose) !important;
    outline-offset: 3px !important;
}

/* ============================================================
   ===== 💛💚 بخش ۲۰: کلاس‌های کمکی قیمت =====
   ============================================================ */

.text-emerald {
    color: #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: #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: #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: #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.60) !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);
}

/* ============================================================
   ===== 💚 بخش ۲۱: کلاس‌های کمکی فرم سبز =====
   ===== برای استفاده در سایر بخش‌ها =====
   ============================================================ */

.form-emerald {
    background: linear-gradient(145deg,
        #ffffff 0%,
        #f0fdf4 100%) !important;
    border: 2px solid rgba(4, 120, 87, 0.30) !important;
    box-shadow:
        0 8px 32px rgba(4, 120, 87, 0.12),
        0 0 0 1px rgba(4, 120, 87, 0.06) inset !important;
}

.form-emerald-title {
    background: linear-gradient(135deg,
        #047857 0%,
        #059669 30%,
        #FACC15 55%,
        #059669 80%,
        #047857 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 900 !important;
}

.form-emerald-btn {
    background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(4, 120, 87, 0.35) !important;
}

.form-emerald-label {
    color: #065F46 !important;
    font-weight: 900 !important;
}

.form-emerald-input {
    background: #f0fdf4 !important;
    border: 2px solid rgba(4, 120, 87, 0.25) !important;
    color: #065F46 !important;
}

.form-emerald-input:focus {
    border-color: #047857 !important;
    box-shadow: 0 0 0 4px rgba(4, 120, 87, 0.15) !important;
}

/* ============================================================
   ===== 🆕 بخش ۲۲: کلاس‌های کلیدواژه (fallback) =====
   ===== فقط در صورت عدم لود animations.css =====
   ===== ⚠️ اگر animations.css لود شود، آن override می‌کند =====
   ============================================================ */

/* ===== 💜 keyword-gold ===== */
[data-fallback="true"] .liquid-word.keyword-gold,
.liquid-word.keyword-gold:not([style*="animation"]) {
    font-weight: 900 !important;
    background: linear-gradient(90deg,
        #A020A0 0%,
        #E91E63 25%,
        #047857 50%,
        #E91E63 75%,
        #A020A0 100%) !important;
    background-size: 300% 100% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ===== 🟣 keyword-purple ===== */
[data-fallback="true"] .liquid-word.keyword-purple,
.liquid-word.keyword-purple:not([style*="animation"]) {
    font-weight: 900 !important;
    background: linear-gradient(90deg,
        #6B0F6B 0%,
        #A020A0 25%,
        #C040C0 50%,
        #A020A0 75%,
        #6B0F6B 100%) !important;
    background-size: 300% 100% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ===== 🌹 keyword-rose (جدید) ===== */
[data-fallback="true"] .liquid-word.keyword-rose,
.liquid-word.keyword-rose:not([style*="animation"]) {
    font-weight: 900 !important;
    background: linear-gradient(90deg,
        #B0143F 0%,
        #E91E63 25%,
        #F06292 50%,
        #E91E63 75%,
        #B0143F 100%) !important;
    background-size: 300% 100% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ===== ✨ decorative ===== */
[data-fallback="true"] .liquid-word.decorative,
.liquid-word.decorative:not([style*="animation"]) {
    color: #E91E63 !important;
    font-size: 1.18em !important;
    filter: drop-shadow(0 2px 8px rgba(233, 30, 99, 0.55)) !important;
}

/* ============================================================
   ===== ♿ بخش ۲۳: دسترسی‌پذیری (prefers-reduced-motion) =====
   ============================================================ */

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

    .step-circle.active,
    .step-circle.done,
    .step-circle.completed {
        transition: none !important;
        transform: scale(1) !important;
    }

    .food-card:hover {
        transform: none !important;
    }

    .floating-cart:hover {
        transform: translateX(-50%) translateY(0) !important;
    }

    .category-tab:hover {
        transform: none !important;
    }
}

/* ============================================================
   ===== 📝 پایان BEAUTY-UPGRADE.CSS v9 =====
   ============================================================
   ===== 📋 خلاصه تغییرات v9 (نسبت به v8): =====
   ===== ✅ اضافه شدن پشتیبانی از .keyword-rose =====
   ===== ✅ هماهنگی easing با cubic-bezier(0.22, 1, 0.36, 1) =====
   ===== ✅ اضافه شدن بخش ۵.۱ (کلیدواژه‌ها) =====
   ===== ✅ اضافه شدن بخش ۲۲ (fallback کلیدواژه‌ها) =====
   ===== ✅ اضافه شدن بخش ۲۳ (prefers-reduced-motion) =====
   ===== ✅ بهبود رنگ‌های استپر =====
   ===== ✅ حفظ کامل تغییرات v8 (فرم سبز-زرد) =====
   ============================================================
   ===== 📋 خلاصه تغییرات v8: =====
   ===== ✅ فرم ثبت اطلاعات با تم سبز-زرد: =====
   =====    - پس‌زمینه: linear-gradient(#ffffff, #f0fdf4) =====
   =====    - حاشیه: rgba(4, 120, 87, 0.30) =====
   =====    - خط بالا: گرادیان زرد-سبز (#FACC15 → #047857) =====
   =====    - عنوان: گرادیان سبز-زرد =====
   =====    - برچسب‌ها: #065F46 (سبز تیره) =====
   =====    - ورودی‌ها: #f0fdf4 (سبز بسیار ملایم) =====
   =====    - دکمه: linear-gradient(#047857, #059669) =====
   =====    - حالت تیره: سبز تیره (#0f1f1a → #051410) =====
   ===== ✅ افزایش سایز فونت‌ها: =====
   =====    - پیام‌ها: 15.5px → 17px =====
   =====    - line-height پیام: 1.95 → 2.1 =====
   =====    - نام غذاها: 15px → 16px =====
   =====    - توضیحات غذا: 11.5px → 13px =====
   =====    - قیمت‌ها: 15px → 16px =====
   =====    - تب‌های دسته‌بندی: 13px → 14px =====
   =====    - نام آیتم سبد: 15px → 16px =====
   =====    - مبلغ کل سبد: 23px → 24px =====
   =====    - آیتم فاکتور: 13px → 15px =====
   =====    - مبلغ کل فاکتور: 22px → 24px =====
   ============================================================
   ===== 📋 خلاصه تغییرات v7: =====
   ===== ❌ حذف کامل استایل‌های هدر قدیمی: =====
   =====    - .header, .header-top, .brand, .brand h1, .brand .sub =====
   =====    - .brand .logo, .header-actions, .header-btn =====
   =====    - .customer-info, .customer-info .item =====
   ===== ✅ این استایل‌ها اکنون در index.html با کلاس‌های زیر: =====
   =====    - .app-header, .header-top-row, .brand-block =====
   =====    - .brand-logo-wrap, .brand-logo, .brand-glow =====
   =====    - .brand-text, .brand-name, .brand-tagline =====
   =====    - .header-action-group, .action-btn, .action-icon =====
   =====    - .customer-bar, .customer-chip, .chip-icon =====
   =====    - .chip-content, .chip-label, .chip-value =====
   =====    - .chip-total, .status-indicator, .status-dot =====
   ============================================================
   ===== 📋 خلاصه تغییرات v6: =====
   ===== ✅ رفع بریدگی متن در تب‌های دسته‌بندی: =====
   =====    - padding عمودی: 10px → 14px =====
   =====    - min-height: 48px اضافه شد =====
   =====    - line-height: 1.4 اضافه شد =====
   ============================================================
   ===== 📋 خلاصه تغییرات v5: =====
   ===== ✅ قیمت‌ها: سبز پررنگ‌تر (#047857) با وضوح بالا =====
   ===== ✅ درخشش سبز قوی‌تر (text-shadow با شدت بالاتر) =====
   ===== ✅ استپر: دایره فعال زرد (#FACC15) =====
   ===== ✅ استپر: دایره done سبز پررنگ (#047857) =====
   ===== ✅ استپر: دایره completed سبز درخشان =====
   ============================================================ */