:root {
    --primary: #c6a664;
    --bg: #f8f9fa;
    --card-bg: #ffffff;
    --text: #2d3436;
    --radius: 20px;
    --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* تعریف ۱۰ تم مختلف */
.theme-1 { --primary: #c6a664; --bg: #fcfcfc; --text: #2d3436; } /* کلاسیک شیک */
.theme-2 { --primary: #ff7675; --bg: #1e272e; --card-bg: #2f3640; --text: #ffffff; } /* دارک مدرن */
.theme-3 { --primary: #00b894; --bg: #f0f7f4; --text: #2d3436; --radius: 0px; } /* مینیمال سبز */
.theme-4 { --primary: #a29bfe; --bg: #ffffff; --card-bg: #f9f9ff; --text: #2d3436; } /* پاستلی */
.theme-5 { --primary: #fdcb6e; --bg: #000000; --card-bg: #111111; --text: #eee; } /* لوکس مشکی-زرد */
.theme-6 { --primary: #e84393; --bg: #fff0f6; --text: #2d3436; } /* فانتزی دخترانه */
.theme-7 { --primary: #0984e3; --bg: #e1f5fe; --card-bg: #ffffff; --text: #01579b; } /* آبی آرامش */
.theme-8 { --primary: #d63031; --bg: #2c3e50; --card-bg: #34495e; --text: #ecf0f1; } /* رستوران ایتالیایی */
.theme-9 { --primary: #2d3436; --bg: #dfe6e9; --card-bg: #ffffff; --text: #2d3436; } /* مونوکروم (سیاه سفید) */
.theme-10 { --primary: #ff9f43; --bg: #fafafa; --card-bg: #ffffff; --text: #576574; } /* نارنجی گرم */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
    font-family: 'Vazirmatn', sans-serif !important ;
    background-color: var(--bg) !important ;
    color: var(--text) !important ;
    margin: 0; padding: 0 !important;
    transition: background 0.5s ease !important;
}

/* Header */
.main-header {
    height: 200px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}
.main-header .overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.7));
}
.header-content { z-index: 1; }
.logo-circle {
    width: 90px;
    height: 90px;
    background: rgba(255, 255, 255, 0.1); /* یک پس‌زمینه بسیار شفاف برای شیک شدن */
    backdrop-filter: blur(5px); /* افکت شیشه مات */
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px; /* فاصله با نام کافه پایینش */
    overflow: hidden;
    animation: float 3s infinite ease-in-out;
}

.logo-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Search Bar */
.search-bar { padding: 20px; position: sticky; top: 0; z-index: 100; background: var(--bg); }
.search-input-wrapper {
    background: var(--card-bg);
    padding: 12px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}
.search-input-wrapper input {
    border: none; background: none; outline: none; width: 100%;
    margin-right: 10px; font-family: inherit; color: var(--text);
}

/* Categories */
.categories-nav {
    display: flex; overflow-x: auto; padding: 0 20px 20px; gap: 12px;
    scrollbar-width: none;
    padding-top: 30px;
}
.categories-nav::-webkit-scrollbar { display: none; }
.cat-btn {
    padding: 8px 25px;
    background: var(--card-bg);
    border-radius: 50px;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: var(--transition);
    border: 1px solid transparent;
}
.cat-btn.active { background: var(--primary); color: white; transform: scale(1.05); }

/* Menu Grid */
.menu-grid { padding: 0 20px 100px; display: grid; gap: 20px; }
.menu-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    display: flow-root;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    animation: fadeIn 0.5s ease forwards;
}
.card-img {
    width: 100px; height: 200px;
    background-size: cover; background-position: center;
}
.card-info { padding: 15px; flex: 1; position: relative; }
.card-info h3 { margin: 0; font-size: 1.1rem; }
.card-info p { font-size: 0.8rem; opacity: 0.7; margin: 5px 0; }
.price { color: var(--primary); font-weight: bold; font-size: 1.1rem; }

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

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.main-header {
    min-height: 250px; /* حداقل ارتفاع */
    padding-top: 40px; /* ایجاد فاصله از سقف مرورگر برای اینکه زیر نوار آدرس نرود */
    padding-bottom: 20px;
    position: relative;
    display: flex;
    flex-direction: column; /* چیدمان عمودی لوگو، اسم و شعار */
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    background-color: #222;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* برای اطمینان از اینکه محتوا روی لایه سیاه قرار می‌گیرد */
.header-content {
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* افکت سیاه و سفید برای تصویر */
.finished-item .card-img {
    filter: grayscale(100%);
    opacity: 0.6;
}

/* مات کردن کل کارت */
.finished-item {
    position: relative;
    pointer-events: none; /* غیرفعال کردن کلیک (اختیاری) */
}
/* --- استایل کلی (دسکتاپ) --- */
.out-of-stock-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    background: rgba(220, 53, 69, 0.9);
    color: white;
    padding: 5px 15px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.9rem;
    z-index: 10;
    border: 2px solid white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    white-space: nowrap;
}

/* --- استایل مخصوص موبایل (صفحه‌های کوچک‌تر از 600 پیکسل) --- */
@media (max-width: 600px) {
    .out-of-stock-badge {
        /* تغییر موقعیت از وسط به گوشه بالا سمت چپ */
        top: 10px;
        left: 10px;
        bottom: auto;
        right: auto;
        
        /* حذف وسط‌چین کردن قبلی */
        transform: rotate(-10deg); 
        
        /* کمی کوچک‌تر کردن برای موبایل که ظریف‌تر باشد */
        font-size: 0.7rem;
        padding: 3px 8px;
        border-width: 1px;
    }

    /* اگر کارت‌ها در موبایل به صورت افقی هستند (عکس سمت راست/چپ)، 
       این کد باعث می‌شود نشان دقیقاً روی عکس قرار بگیرد */
    .menu-card.finished-item {
        overflow: hidden; /* برای اینکه نشان از کادر بیرون نزند */
    }
}

/* افکت سیاه و سفید برای عکس */
.finished-item .card-img {
    filter: grayscale(100%);
    opacity: 0.6;
}

.finished-item {
    position: relative;
    /* جلوگیری از کلیک روی آیتم تمام شده */
    pointer-events: none; 
}

.finished-item .price-container {
    opacity: 0.5;
}


.theme-11 {
    --bg: #eff3f6;
    --primary: #4e443f; /* رنگ قهوه‌ای دکمه مشاهده منو */
    --card-bg: #ffffff;
    --text: #333;
    --radius: 15px;
}

.theme-11 .main-header { height: 280px; border-radius: 0 0 40px 40px; }

.theme-11 .logo-circle {
    width: 110px;
    height: 110px;
    border-radius: 15px; /* لوگوی مربعی مطابق تصویر */
    background: white;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    border: 3px solid white;
    margin-top: -55px; /* نیمی روی هدر، نیمی روی بدنه */
}

/* بخش دکمه‌های دوتایی (مشاهده منو / اطلاعات) */
.theme-11 .action-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 20px;
}
.theme-11 .btn-main {
    padding: 12px 30px;
    border-radius: 12px;
    border: none;
    font-weight: bold;
    flex: 1;
    max-width: 180px;
}
.theme-11 .btn-primary-menu { background: var(--primary); color: white; }
.theme-11 .btn-info-cafe { background: #f8f9fa; color: #666; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }

/* تغییر چیدمان دسته‌بندی‌ها به شبکه (Grid) مطابق عکس */
.theme-11 .categories-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* ۴ ستون در هر ردیف */
    gap: 15px;
    padding: 20px;
    overflow: visible;
}

.theme-11 .cat-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    border-radius: 15px;
    height: 90px;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--text);
    border: 1px solid transparent;
}

.theme-11 .cat-btn i {
    font-size: 1.8rem;
    margin-bottom: 8px;
    color: var(--primary);
}

.theme-11 .cat-btn.active {
    background: var(--primary);
    color: white;
}
.theme-11 .cat-btn.active i { color: white; }

/* مخفی کردن نوار جستجو در این قالب خاص (اختیاری) */


/* مخصوص قالب ۱۱ */
.theme-11 .cat-icon-img {
    width: 45px;      /* سایز آیکون‌ها مطابق عکس */
    height: 45px;
    object-fit: contain;
    margin-bottom: 5px;
}

.theme-11 .icon-wrapper {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* در سایر قالب‌ها که آیکون نمی‌خواهند، می‌توانیم آیکون را مخفی کنیم یا کوچک نگه داریم */
.theme-1 .cat-icon-img, .theme-2 .cat-icon-img , .theme-3 .cat-icon-img , .theme-4 .cat-icon-img , .theme-5 .cat-icon-img , .theme-6 .cat-icon-img , .theme-7 .cat-icon-img , .theme-8 .cat-icon-img , .theme-9 .cat-icon-img , .theme-10 .cat-icon-img{
    display: none; /* در قالب‌های کلاسیک فقط متن نمایش داده شود */
}

.category-section-title {
    grid-column: 1 / -1; /* تمام عرض را بگیرد */
    padding: 10px 0;
    margin-top: 20px;
    border-bottom: 2px solid var(--primary);
    color: var(--primary);
}
.category-section-title h2 {
    margin: 0;
    font-size: 1.4rem;
}
.add-to-cart-btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
    float: left;
}

/* دکمه شناور سبد خرید */
#cart-floating-btn {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #007bff; /* رنگ آبی */
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    z-index: 1000;
    cursor: pointer;
    display: none; /* در ابتدا مخفی است */
    align-items: center;
    gap: 10px;
    font-weight: bold;
    animation: slideUp 0.5s ease;
}

#cart-floating-btn .cart-count {
    background: white;
    color: #007bff;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.9rem;
}

@keyframes slideUp {
    from { bottom: -70px; }
    to { bottom: 20px; }
}

/* استایل مدال (پنجره) سبد خرید */
.cart-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.cart-content {
    background: white;
    width: 90%;
    max-width: 400px;
    border-radius: 20px;
    padding: 20px;
    color: #333;
}

/* استایل مدرن تیتر دسته‌بندی‌ها */
.category-header-modern {
    margin: 50px 0 25px 0;
    padding: 0 5px;
    position: relative;
}

.cat-title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* در حالت RTL به سمت راست می‌چسبد */
}

.cat-count-badge {
    background: var(--primary);
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 10px;
    border-radius: 50px;
    font-weight: bold;
    margin-bottom: 5px;
    opacity: 0.9;
    letter-spacing: 0.5px;
}

.cat-title-text {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--text);
    margin: 0;
    position: relative;
    z-index: 1;
}

.cat-title-line {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 8px;
    gap: 8px;
}

.line-dot {
    width: 8px;
    height: 8px;
    background-color: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--primary);
}

.line-main {
    height: 3px;
    flex-grow: 1;
    background: linear-gradient(90deg, var(--primary) 0%, rgba(0,0,0,0.05) 80%);
    border-radius: 50px;
}

/* افکت خاص برای تم‌های دارک (Dark Mode Themes) */
.theme-2 .line-main, .theme-5 .line-main, .theme-8 .line-main {
    background: linear-gradient(90deg, var(--primary) 0%, rgba(255,255,255,0.1) 80%);
}

/* استایل برای قالب ۱۱ (هماهنگی بیشتر با گرید) */
.theme-11 .cat-title-text {
    font-size: 1.5rem;
    text-align: center;
    width: 100%;
}
.theme-11 .cat-title-wrapper {
    align-items: center;
}
.theme-11 .line-main {
    background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%);
}







/* تنظیم اولویت نمایش برای جلوگیری از تداخل مدال‌ها */
.swal2-container {
    z-index: 3000 !important; /* بالاتر از سبد خرید */
}

.cart-modal {
    z-index: 2000;
}

/* این کد تقویم را به بالاترین لایه ممکن می‌آورد */
/* این کد را دقیقاً همینطور کپی کن */
.swal-label {
    display: block;
    margin: 15px 5px 0 0;
    font-size: 0.8rem;
    color: #444;
    font-weight: bold;
}

.swal2-select {
    border: 1px solid #d9d9d9 !important;
    border-radius: 10px !important;
    padding: 10px !important;
    height: auto !important;
}

/* جلوگیری از اسکرول خوردن کل صفحه در موبایل هنگام باز کردن لیست */
.swal2-shown {
    overflow: hidden !important;
}



/* ظرف اصلی فرم در مودال */
.club-form-container {
    text-align: right;
    direction: rtl;
    padding: 5px;
}

.club-subtitle {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
    text-align: center;
}

/* گروه‌بندی ورودی‌ها */
.input-group-modern {
    margin-bottom: 18px;
}

.input-group-modern label {
    display: block;
    font-size: 0.8rem;
    font-weight: bold;
    color: #444;
    margin-bottom: 8px;
}

.input-group-modern label i {
    color: var(--primary);
    margin-left: 5px;
}

/* اصلاح فیلدهای ورودی سوییت‌آلرت */
.club-swal-popup .swal2-input {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 12px !important;
    border: 1px solid #ddd !important;
    font-size: 0.9rem !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
}

/* چیدمان ستونی لیست‌های انتخابی تاریخ */
.birth-select-stack {
    display: flex;
    flex-direction: column; /* زیر هم انداختن سکشن‌ها */
    gap: 10px;
}

.birth-select-stack .swal2-select {
    width: 100% !important;
    margin: 0 !important;
    height: 45px !important;
    border-radius: 12px !important;
    border: 1px solid #ddd !important;
    font-size: 0.9rem !important;
    font-family: 'Vazirmatn' !important;
    background-color: #f9f9f9;
}

/* دکمه‌های مودال */
.swal2-confirm {
    border-radius: 12px !important;
    padding: 12px 30px !important;
}

.swal2-cancel {
    background-color: #f1f1f1 !important;
    color: #666 !important;
    border-radius: 12px !important;
}



/* =========================================
   App-like Behavior & Responsive Fixes
========================================= */

/* ۱. جلوگیری قطعی از اسکرول افقی و فضای سفید */
html, body {
    max-width: 100vw; /* عرض صفحه را دقیقاً برابر با عرض دستگاه می‌کند */
    overflow-x: clip !important; /* تغییر hidden به clip */
    position: relative;
    user-select: none; /* غیرفعال کردن انتخاب متن مزاحم */

}

/* ۲. جلوگیری از انتخاب شدن متن‌ها با نگه داشتن دست (حس اپلیکیشن) */
.cat-btn, .menu-card, .main-header, .action-buttons button {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

/* ۳. اصلاح گرید دسته‌بندی‌ها در Theme-11 برای گوشی‌ها */
/* چون ۴ ستون در گوشی باعث بیرون‌زدگی می‌شد، آن را در موبایل کم می‌کنیم */

@media (max-width: 550px) {
    .theme-11 .categories-nav {
        grid-template-columns: repeat(3, 1fr); /* در گوشی‌های معمولی ۳ ستونه می‌شود */
        gap: 10px;
        padding: 15px;
    }
    
    /* کوچک‌تر کردن فونت دکمه‌ها برای جا شدن در ستون‌ها */
    .theme-11 .cat-btn {
        font-size: 0.7rem;
        height: 80px;
    }
}

@media (max-width: 380px) {
    .theme-11 .categories-nav {
        grid-template-columns: repeat(2, 1fr); /* در گوشی‌های خیلی کوچک ۲ ستونه می‌شود */
        gap: 8px;
        padding: 10px;
    }
}

/* ۴. اطمینان از اینکه کارت‌های منو در موبایل از صفحه بیرون نمی‌زنند */
.menu-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* به صورت خودکار خودش را با صفحه فیت می‌کند */
}

/* =========================================
   ثابت کردن دکمه سفارش و هم‌قد کردن کارت‌ها
========================================= */

/* ۱. تبدیل کارت به یک کانتینر با ارتفاع کامل */
.menu-card {
    position: relative !important;
    padding-bottom: 60px !important; /* ایجاد فضای خالی در پایین کارت برای دکمه */
    height: 100% !important; /* باعث می‌شود تمام کارت‌های یک ردیف هم‌قد شوند */
    display: flex !important;
    flex-direction: column !important;
}

/* ۲. پین کردن دکمه سفارش به گوشه پایین */
.menu-card .add-btn {
    position: absolute !important;
    bottom: -60px !important;
    left: 15px !important;
    float: none !important; /* خنثی کردن استایل‌های جاوااسکریپت */
    /* margin: 0 !important; */
    z-index: 10; /* برای اطمینان از کلیک‌پذیری */
}

/* ۳. اگر لیبل اتمام موجودی هم جابه‌جا شد، آن را هم فیکس می‌کنیم */
.out-of-stock-badge {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    z-index: 10;
}



/* =========================================
   2. Dark Mode (حالت تاریک)
========================================= */
body.dark-mode {
    --bg: #121212 !important;
    --card-bg: #1e1e1e !important;
    --text: #f5f5f5 !important;
}
body.dark-mode .main-header {
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
}
body.dark-mode .cat-btn {
    background: var(--card-bg);
    color: var(--text);
    border: 1px solid #333;
}
body.dark-mode .bottom-nav {
    background: #1e1e1e;
    border-top: 1px solid #333;
}

/* دکمه شناور تغییر تم */
.theme-toggle-btn {
    position: fixed;
    bottom: 80px; /* کمی بالاتر از سبد خرید پایین صفحه */
    right: 20px;
    z-index: 1000;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

/* =========================================
   3. Skeleton Loading (لودینگ اسکلتی)
========================================= */
.skeleton {
    background: #eee;
    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
    border-radius: 5px;
}
body.dark-mode .skeleton {
    background: linear-gradient(110deg, #2a2a2a 8%, #3a3a3a 18%, #2a2a2a 33%);
    background-size: 200% 100%;
}
@keyframes shine {
    to { background-position-x: -200%; }
}
.skeleton-card {
    padding: 15px;
    border-radius: var(--radius);
    background: var(--card-bg);
    margin-bottom: 15px;
    display: flex;
    gap: 15px;
    height: 120px;
}
.skeleton-img { width: 90px; height: 90px; border-radius: 10px; }
.skeleton-text-box { flex: 1; display: flex; flex-direction: column; gap: 15px; justify-content: center;}
.skeleton-line { height: 15px; border-radius: 4px; width: 100%; }
.skeleton-line.short { width: 60%; }


/* تنظیم گرید محصولات برای همه تم‌ها (موبایل ۱ ستون، تبلت و لپ‌تاپ ۲ یا ۳ ستون) */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 0 20px 100px;
    align-items: stretch; /* این دستور باعث می‌شود همه کارت‌های یک ردیف هم‌قد شوند */
}

/* ساختار اصلی کارت در همه تم‌ها */
.menu-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column; /* چیدمان عمودی برای هل دادن دکمه به پایین */
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    height: 100%; /* استفاده از کل ارتفاع ردیف */
    position: relative;
}

/* اطلاعات داخل کارت */
.card-info {
    padding: 15px;
    flex-grow: 1; /* این ویژگی باعث می‌شود بخش توضیحات کش بیاید و دکمه برود ته کارت */
    display: flex;
    flex-direction: column;
    padding-bottom: 0px !important; /* باز کردن فضای خالی در پایین کارت مخصوص دکمه */
}

/* دکمه سفارش (موقعیت ثابت در پایین گوشه کارت برای همه تم‌ها) */
.card-info button, .add-to-cart-btn {
    position: absolute;
    bottom: 15px;
    left: 15px; /* اگر سایت راست‌چین است، می‌توانید از left استفاده کنید */
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 8px 20px;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}

/* تنظیمات نوار دسته‌بندی برای تم‌های 1 تا 10 */
.categories-nav {
    display: flex;
    overflow-x: auto;
    padding: 20px;
    gap: 12px;
    scrollbar-width: none; /* مخفی کردن اسکرول‌بار در فایرفاکس */
    -webkit-overflow-scrolling: touch; /* اسکرول نرم در آیفون */
}

.categories-nav::-webkit-scrollbar {
    display: none; /* مخفی کردن اسکرول‌بار در کروم و سافاری */
}

/* اصلاح گرید دسته‌بندی فقط برای تم 11 در موبایل */
@media (max-width: 600px) {
    .theme-11 .categories-nav {
        grid-template-columns: repeat(2, 1fr) !important; /* تبدیل 4 ستون به 2 ستون در موبایل */
    }
}



/* =========================================
   👽 ۹ تم عجیب، خاص و مفهومی (تم ۱۲ تا ۲۰) 👽
   ========================================= */

/* تم ۱۲: سایبرپانک / ماتریکس (Cyberpunk) 
   فضای هکری، مشکی مطلق با نئون‌های سبز و صورتی جیغ */
   .theme-12 {
    --bg: #050505;
    --text: #00ff00;
    --primary: #ff00ff;
    --card-bg: #111111;
    --shadow: 0 0 15px rgba(0, 255, 0, 0.3);
    --radius: 0px;
    --font: 'Courier New', Courier, monospace;
}

/* تم ۱۳: کمیک بوک (Comic Book)
   شبیه صفحات مجله‌های کمیک مارول! زرد جیغ، سایه‌های سیاه و خشن */
.theme-13 {
    --bg: #ffeb3b;
    --text: #000000;
    --primary: #e91e63;
    --card-bg: #ffffff;
    --shadow: 8px 8px 0px #000000;
    --radius: 0px;
    --font: 'Comic Sans MS', 'Chalkboard SE', cursive;
}

/* تم ۱۴: آتاری / ۸-بیتی رترو (8-Bit Arcade)
   یادآور بازی‌های قارچ‌خور و سگا. رنگ‌های اصلی و بلوک‌های مربعی */
.theme-14 {
    --bg: #0000aa;
    --text: #ffffff;
    --primary: #ff0000;
    --card-bg: #000000;
    --shadow: 4px 4px 0px #ffffff;
    --radius: 0px;
    --font: 'Impact', fantasy;
}

/* تم ۱۵: بروتالیسم / ضد-طراحی (Brutalism)
   بسیار عجیب و آوانگارد. استفاده در وب‌سایت‌های هنری مدرن. کنتراست چشم‌درآر! */
.theme-15 {
    --bg: #ffffff;
    --text: #0000ff;
    --primary: #ff0000;
    --card-bg: #ffff00;
    --shadow: -10px 10px 0px #000000;
    --radius: 0px;
    --font: 'Arial Black', sans-serif;
}

/* تم ۱۶: کهکشانی / فضایی (Cosmic)
   حس شناور بودن در فضا با پس‌زمینه کهکشانی و سایه‌های درخشان */
.theme-16 {
    --bg: radial-gradient(circle at center, #1b2735 0%, #090a0f 100%);
    --text: #e0e0e0;
    --primary: #00d2ff;
    --card-bg: rgba(25, 25, 50, 0.6);
    --shadow: 0 0 20px rgba(0, 210, 255, 0.4);
    --radius: 30px;
    --font: 'Trebuchet MS', sans-serif;
}

/* تم ۱۷: طومار جادویی / هری پاتر (Magic Parchment)
   حس کاغذهای قدیمی، نامه‌های جادویی با رنگ‌های قهوه‌ای و طلایی */
.theme-17 {
    --bg: #f4e4bc;
    --text: #3e2723;
    --primary: #8b0000;
    --card-bg: #fff8e1;
    --shadow: inset 0 0 20px #d7ccc8, 0 5px 10px rgba(0,0,0,0.1);
    --radius: 5px;
    --font: 'Georgia', serif;
}

/* تم ۱۸: تخته سیاه گچی (Chalkboard)
   دقیقاً مثل منوی گچی بیرون کافه‌ها! پس‌زمینه سبز تیره با نوشته‌های سفید */
.theme-18 {
    --bg: #2f4f4f;
    --text: #f8f8ff;
    --primary: #ffb6c1;
    --card-bg: transparent;
    --shadow: none;
    --radius: 10px;
    --font: 'Comic Sans MS', cursive;
}

/* تم ۱۹: ویپورویو / دهه ۸۰ (Vaporwave)
   حس نوستالژی دهه ۸۰ میلادی، با طیف رنگی صورتی، فیروزه‌ای و بنفش */
.theme-19 {
    --bg: linear-gradient(135deg, #ff99cc 0%, #33ccff 100%);
    --text: #ffff00;
    --primary: #ff00ff;
    --card-bg: rgba(255, 255, 255, 0.2);
    --shadow: 0 0 25px rgba(255, 0, 255, 0.5);
    --radius: 15px;
    --font: 'Verdana', sans-serif;
}

/* تم ۲۰: استیم‌پانک / صنعتی (Steampunk)
   حس چرخ‌دنده، چرم، مس و برنج. یک کافه کلاسیک صنعتی */
.theme-20 {
    --bg: #2c1a0e;
    --text: #d4af37;
    --primary: #8b4513;
    --card-bg: linear-gradient(145deg, #3d2314, #1a0f08);
    --shadow: 5px 5px 15px #000000;
    --radius: 5px;
    --font: 'Times New Roman', serif;
}


/* =========================================
   استایل‌های تکمیلی برای خاص‌تر شدن این ۹ تم
   ========================================= */

/* حاشیه سیاه و ضخیم برای تم کمیک بوک (13) و بروتالیسم (15) */
.theme-13 .menu-card, .theme-15 .menu-card, 
.theme-13 button, .theme-15 button {
    border: 3px solid #000000;
}

/* حاشیه گچی (نقطه‌چین) برای تم تخته سیاه (18) */
.theme-18 .menu-card {
    border: 2px dashed #f8f8ff;
    background: rgba(255, 255, 255, 0.05);
}

/* حاشیه طلایی برای تم طومار جادویی (17) و استیم‌پانک (20) */
.theme-17 .menu-card, .theme-20 .menu-card {
    border: 1px solid var(--text);
}

/* درخشش دکمه در تم سایبرپانک (12) */
.theme-12 button {
    box-shadow: 0 0 10px var(--primary);
    text-transform: uppercase;
}



/* =======================================================
   💥 ۹ تم ساختار شکن، آوانگارد و فوق‌عجیب (تم ۱۳ تا ۲۱) 💥
   ======================================================= */

/* 🌊 تم ۱۳: ژله‌ای و مایع (Liquid Blobs) 
   کارت‌ها دیگر مربع نیستند! شبیه قطرات آب مدام تغییر شکل می‌دهند */
   .theme-13 {
    --bg: #1a1a2e; --primary: #e94560; --text: #fff;
}
.theme-13 .menu-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: morph 8s ease-in-out infinite;
    box-shadow: inset 0 0 20px rgba(233, 69, 96, 0.5);
    padding: 20px;
    border: 2px solid #e94560;
}
.theme-13 .menu-img {
    border-radius: 50%; /* عکس‌ها کاملا گرد می‌شوند */
    height: 150px; width: 150px;
    margin: 0 auto;
    display: block;
}
@keyframes morph {
    0%, 100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
    34% { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; }
    67% { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; }
}

/* 💻 تم ۱۴: ترمینال هکری (Pure Terminal)
   عکس‌ها کاملاً مخفی می‌شوند! فقط متن سبز روی پس‌زمینه سیاه با خطوط تیره */
.theme-14 {
    --bg: #000; --primary: #0f0; --text: #0f0;
    font-family: 'Courier New', monospace !important;
}
.theme-14 .menu-img {
    display: none !important; /* حذف کامل عکس برای حس هکری! */
}
.theme-14 .menu-card {
    background: #000;
    border: 1px dashed #0f0;
    border-radius: 0;
    box-shadow: none;
}
.theme-14 .menu-card:hover {
    background: #0f0;
    color: #000;
}
.theme-14 .menu-card:hover * { color: #000; } /* معکوس شدن رنگ‌ها در هاور */
.theme-14 button { border-radius: 0; border: 1px solid #0f0; background: transparent; color: #0f0;}

/* 🧊 تم ۱۵: پرسپکتیو ۳ بعدی (3D Isometric)
   کارت‌ها روی هوا به صورت سه‌بعدی و کج قرار گرفته‌اند! */
.theme-15 {
    --bg: #e0e5ec; --primary: #4a90e2; --text: #333;
}
.theme-15 .menu-grid {
    perspective: 1000px;
}
.theme-15 .menu-card {
    transform: rotateX(20deg) rotateY(-15deg);
    transition: all 0.5s ease;
    box-shadow: -15px 15px 20px rgba(0,0,0,0.2);
    background: #fff;
    border-radius: 10px;
}
.theme-15 .menu-card:hover {
    transform: rotateX(0deg) rotateY(0deg) scale(1.05); /* صاف شدن کارت وقتی دست روی آن می‌رود */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* 📸 تم ۱۶: آشفتگی پلاروید (Polaroid Scatter)
   کارت‌ها شبیه عکس‌های چاپ شده پلاروید هستند که نامرتب روی میز ریخته‌اند */
.theme-16 {
    --bg: #d1bfae; --primary: #d9534f; --text: #222;
}

.theme-16 .menu-card {
    background: #fff;
    padding: 10px 10px 60px 10px; /* حاشیه سفید بزرگ مثل عکس پلاروید */
    border-radius: 2px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}

.theme-16 .menu-card:nth-child(even) { transform: rotate(4deg); } /* کج شدن عکس‌های زوج */
.theme-16 .menu-card:nth-child(odd) { transform: rotate(-4deg); } /* کج شدن عکس‌های فرد */
.theme-16 .menu-card:hover { transform: scale(1.1) rotate(0deg) 100; }

/* 🐝 تم ۱۷: کندوی عسل هندسی (Hexagon Matrix)
   کارت‌ها مربع نیستند! با استفاده از Clip-Path به ۶ ضلعی تبدیل شده‌اند */
.theme-17 {
    --bg: #2b2b2b; --primary: #fca311; --text: #fff;
}
.theme-17 .menu-card {
    background: #14213d;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    border-radius: 0;
    padding: 30px 20px; /* تنظیم پدینگ برای جا شدن در ۶ ضلعی */
    text-align: center;
}
.theme-17 button { bottom: 30px; left: 50%; transform: translateX(-50%); } /* دکمه وسط قرار می‌گیرد */

/* 📼 تم ۱۸: گلیچ و قطعی نوار (VCR Glitch)
   حس نوار کاست خراب! رنگ‌ها جابه‌جا می‌شوند و کارت میلرزد */
.theme-18 {
    --bg: #111; --primary: #0ff; --text: #fff;
}
.theme-18 .menu-card {
    background: #222;
    border-radius: 0;
    position: relative;
    border-left: 4px solid #f0f;
    border-right: 4px solid #0ff;
}
.theme-18 .menu-card:hover {
    animation: glitch-skew 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}
@keyframes glitch-skew {
    0% { transform: skew(0deg); }
    20% { transform: skew(-10deg); filter: hue-rotate(90deg); }
    40% { transform: skew(10deg); }
    60% { transform: skew(-5deg); filter: hue-rotate(-90deg); }
    80% { transform: skew(5deg); }
    100% { transform: skew(0deg); }
}

/* 📰 تم ۱۹: مجله بروتالیست (Brutalist Magazine)
   سیاه و سفید مطلق، خشن، تایپوگرافی غول‌پیکر و حاشیه‌های به شدت ضخیم */
.theme-19 {
    --bg: #fff; --primary: #000; --text: #000;
    font-family: 'Arial Black', Impact, sans-serif !important;
}
.theme-19 .menu-card {
    background: #fff;
    border: 5px solid #000; /* حاشیه بسیار ضخیم */
    border-radius: 0;
    box-shadow: 10px 10px 0px #000; /* سایه کاملا سیاه و تیز */
}
.theme-19 .menu-img { filter: grayscale(100%) contrast(150%); } /* عکس‌ها سیاه و سفید و پررنگ می‌شوند */
.theme-19 h3 { font-size: 1.5rem; text-transform: uppercase; letter-spacing: -1px; }

/* 🔮 تم ۲۰: شیشه مات و گوی‌های شناور (Glassmorphism Extreme)
   پس‌زمینه کاملا حذف شده و کارت‌ها فقط شیشه‌های مات هستند روی یک صفحه رنگی */
.theme-20 {
    --bg: linear-gradient(45deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
    --primary: #a18cd1; --text: #333;
}
.theme-20 .menu-card {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px); /* افکت شیشه مات شدید */
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

/* 🎯 تم ۲۱: رادار فضایی (Space Radar)
   کارت‌ها شبیه هدف‌های روی رادار با خطوط نئونی و حاشیه‌های گرد خاص هستند */
.theme-21 {
    --bg: radial-gradient(circle at center, #001100 0%, #000000 100%);
    --primary: #00ffcc; --text: #88ffcc;
}
.theme-21 .menu-card {
    background: transparent;
    border: 1px solid #00ffcc;
    border-radius: 50% 0 50% 0; /* شکل هندسی برگ‌مانند */
    box-shadow: inset 0 0 15px rgba(0, 255, 204, 0.2);
}
.theme-21 .menu-img {
    border-radius: 50% 0 50% 0; /* عکس هم شکل کارت می‌شود */
}
.theme-21 button {
    background: transparent;
    border: 1px solid #00ffcc;
    color: #00ffcc;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(0,255,204,0.5);
}


/* =======================================================
   🚀 ۹ تم فوق‌عجیب، بی‌نظیر و ساختار شکن (۱۳ تا ۲۱) 🚀
   ======================================================= */

/* 🌊 تم ۱۳: ژله‌ای و قطرات مایع (Liquid Blobs) */
.theme-13 { --bg: #0f172a; --primary: #06b6d4; --text: #fff; font-family: 'Vazirmatn', sans-serif; }
.theme-13 body { background: var(--bg); }
.theme-13 .main-header { 
    background: linear-gradient(45deg, #06b6d4, #3b82f6);
    border-radius: 0 0 50% 50% / 0 0 30% 30%;
    animation: blob-header 10s infinite alternate;
}
@keyframes blob-header { 0% { border-radius: 0 0 40% 60% / 0 0 50% 30%; } 100% { border-radius: 0 0 60% 40% / 0 0 30% 50%; } }
.theme-13 .logo-circle { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; animation: blob 5s infinite; background: #fff; color: #06b6d4; }
.theme-13 .categories-nav { gap: 15px; }
.theme-13 .cat-btn { 
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50% !important; 
    background: rgba(255,255,255,0.1); border: 2px solid var(--primary); color: #fff;
    padding: 10px 25px; transition: all 0.4s ease;
}
.theme-13 .cat-btn.active, .theme-13 .cat-btn:hover { background: var(--primary); transform: scale(1.1); }
.theme-13 .menu-card {
    background: rgba(255,255,255,0.05); box-shadow: inset 0 0 20px rgba(6, 182, 212, 0.2);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    border: 2px solid rgba(6, 182, 212, 0.4);
    transition: all 0.5s ease; padding: 25px;
}
.theme-13 .menu-card:hover { border-radius: 50%; background: rgba(6, 182, 212, 0.1); }
.theme-13 .card-img { border-radius: 50% !important; height: 140px; width: 140px; margin: 0 auto 15px auto; border: 3px solid var(--primary); }
.theme-13 .add-btn {
    background: var(--primary) !important; border-radius: 50% !important;
    width: 60px; height: 60px; display: flex; justify-content: center; align-items: center;
    border: none !important; color: transparent !important; position: relative;
    float: none !important; margin: 10px auto 0; font-size: 0; box-shadow: 0 10px 20px rgba(6, 182, 212, 0.4);
}
.theme-13 .add-btn::after { content: "💧"; font-size: 24px; color: #fff; position: absolute; }
.theme-13 #cart-floating-btn { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; animation: blob 3s infinite; }

/* 💻 تم ۱۴: ترمینال هکری ناب (Pure Terminal) */
.theme-14 { --bg: #000; --primary: #0f0; --text: #0f0; font-family: 'Courier New', Courier, monospace !important; }
.theme-14 body { background: #000; color: #0f0; text-transform: uppercase; }
.theme-14 .main-header { background: #000; border-bottom: 2px dashed #0f0; text-align: left; padding-left: 20px; }
.theme-14 .logo-circle { display: none; }
.theme-14 #cafe-name::before { content: "root@cafe:~# "; color: #fff; }
.theme-14 #cafe-slogan::after { content: " _"; animation: blink 1s infinite; }
@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.theme-14 .search-bar input { background: #000; border: 1px solid #0f0; color: #0f0; border-radius: 0; font-family: inherit; }
.theme-14 .cat-btn { background: transparent; border: none; color: #0f0; position: relative; padding: 5px 15px; }
.theme-14 .cat-btn::before { content: "[ "; color: #fff; } .theme-14 .cat-btn::after { content: " ]"; color: #fff; }
.theme-14 .cat-btn.active { background: #0f0; color: #000; }
.theme-14 .menu-card { background: #000; border: 1px solid #0f0; border-radius: 0; box-shadow: none; position: relative; }
.theme-14 .card-img { display: none !important; /* حذف عکس‌ها برای حس ترمینال */ }
.theme-14 .menu-card:hover { background: #0f0; color: #000; }
.theme-14 .menu-card:hover * { color: #000 !important; }
.theme-14 .add-btn {
    background: transparent !important; border: 1px dashed #0f0 !important; color: #0f0 !important;
    border-radius: 0 !important; width: 100%; float: none !important; font-family: inherit;
}
.theme-14 .menu-card:hover .add-btn { border-color: #000 !important; }
.theme-14 #cart-floating-btn { background: #000; border: 2px solid #0f0; border-radius: 0; color: #0f0; font-family: inherit; }
.theme-14 #cart-floating-btn::after { content: " [ CART ]"; }

/* 🧊 تم ۱۵: پرسپکتیو ۳ بعدی (3D Isometric) */
.theme-15 { --bg: #e0e5ec; --primary: #ff4757; --text: #2f3542; }
.theme-15 body { background: var(--bg); }
.theme-15 .main-header { background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transform: rotateX(10deg); transform-origin: top; }
.theme-15 .categories-nav { perspective: 800px; padding: 20px 0; }
.theme-15 .cat-btn {
    background: #fff; border: none; color: var(--text); border-radius: 8px;
    box-shadow: 0 6px 0 #ced6e0, 0 10px 15px rgba(0,0,0,0.1);
    transform: translateY(0); transition: all 0.1s;
}
.theme-15 .cat-btn.active, .theme-15 .cat-btn:active { transform: translateY(6px); box-shadow: 0 0px 0 #ced6e0, 0 2px 5px rgba(0,0,0,0.1); background: var(--primary); color: #fff; }
.theme-15 .menu-grid { perspective: 1200px; padding: 40px 15px; }
.theme-15 .menu-card {
    background: #fff; border-radius: 15px;
    transform: rotateX(25deg) rotateY(-15deg);
    box-shadow: -20px 20px 25px rgba(0,0,0,0.15); transition: all 0.4s ease;
    transform-style: preserve-3d;
}
.theme-15 .menu-card:hover { transform: rotateX(0deg) rotateY(0deg) translateZ(30px); box-shadow: 0 15px 30px rgba(0,0,0,0.2); }
.theme-15 .card-img { transform: translateZ(40px); border-radius: 10px !important; box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
.theme-15 h3 { transform: translateZ(30px); }
.theme-15 .add-btn {
    background: var(--primary) !important; box-shadow: 0 5px 0 #ff1e34 !important;
    border-radius: 8px !important; transform: translateZ(40px); transition: all 0.1s;
}
.theme-15 .add-btn:active { transform: translateZ(40px) translateY(5px); box-shadow: 0 0 0 #ff1e34 !important; }

/* 📸 تم ۱۶: آشفتگی پلاروید و میز کار (Polaroid Mess) */
.theme-16 { --bg: #d1bfae; --primary: #d9534f; --text: #333; font-family: 'Caveat', 'Comic Sans MS', cursive !important; }
.theme-16 body { background: url('https://www.transparenttextures.com/patterns/cork-board.png') var(--bg); }
.theme-16 .main-header { background: #fff; width: 90%; margin: 20px auto; border-radius: 5px; box-shadow: 2px 2px 10px rgba(0,0,0,0.3); transform: rotate(-2deg); }
.theme-16 .cat-btn {
    background: #fdf5e6; border-radius: 0; box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    color: #333; font-weight: bold; font-size: 1.1rem; padding: 5px 15px;
    transform: rotate(3deg); transition: transform 0.3s;
}
.theme-16 .cat-btn:nth-child(even) { transform: rotate(-3deg); background: #e0f7fa; }
.theme-16 .cat-btn.active { transform: scale(1.2) rotate(0deg); z-index: 10; border: 2px dashed #d9534f; }
.theme-16 .menu-card {
    background: #fff; padding: 15px 15px 70px 15px; border-radius: 2px;
    box-shadow: 4px 4px 15px rgba(0,0,0,0.4);
    transform: rotate(random(10)deg); /* کج بودن اولیه */
}
.theme-16 .menu-card:nth-child(odd) { transform: rotate(-4deg); }
.theme-16 .menu-card:nth-child(even) { transform: rotate(5deg); }
.theme-16 .menu-card:hover { transform: scale(1.1) rotate(0deg); z-index: 100; box-shadow: 10px 10px 25px rgba(0,0,0,0.5); }
.theme-16 .card-img { border-radius: 0 !important; width: 100%; height: 200px; margin-bottom: 10px; filter: sepia(0.3) contrast(1.2); }
.theme-16 h3 { font-size: 1.5rem; text-align: center; color: #000; }
.theme-16 .add-btn {
    background: transparent !important; color: #d9534f !important; font-size: 1.2rem; font-weight: bold;
    border: 3px solid #d9534f !important; border-radius: 5px !important;
    transform: rotate(-5deg); width: 80%; float: none !important; margin: 10px auto; display: block; text-align: center;
}

/* 🐝 تم ۱۷: کندوی عسل هندسی (Hexagon Matrix) */
.theme-17 { --bg: #1a1a1a; --primary: #fca311; --text: #fff; }
.theme-17 body { background: repeating-linear-gradient( 30deg, #111, #111 20px, #1a1a1a 20px, #1a1a1a 40px ); }
.theme-17 .main-header { background: #14213d; clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%); padding-bottom: 50px; }
.theme-17 .logo-circle { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); border-radius: 0; background: var(--primary); }
.theme-17 .cat-btn {
    clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%);
    background: #14213d; border-radius: 0; padding: 15px 30px; color: #fff;
}
.theme-17 .cat-btn.active { background: var(--primary); color: #000; }
.theme-17 .menu-card {
    background: #14213d; border-radius: 0; box-shadow: none; text-align: center; padding: 25px 15px;
    clip-path: polygon(50% 0%, 100% 15%, 100% 85%, 50% 100%, 0% 85%, 0% 15%);
    transition: all 0.3s ease;
}
.theme-17 .menu-card:hover { transform: scale(1.05); background: #1b2e55; }
.theme-17 .card-img { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); border-radius: 0 !important; margin: 0 auto 10px; }
.theme-17 .add-btn {
    clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
    background: var(--primary) !important; color: #000 !important; float: none !important; width: 80%; margin: auto; display: block;
}

/* 📼 تم ۱۸: گلیچ، نوار کاست و قطعی تصویر (VCR Glitch) */
.theme-18 { --bg: #050505; --primary: #ff00ff; --text: #fff; font-family: 'Impact', sans-serif; }
.theme-18 body { background: #050505; }
.theme-18 .main-header { position: relative; background: #111; overflow: hidden; border-bottom: 5px solid #00ffff; }
.theme-18 #cafe-name { text-shadow: 2px 0 #00ffff, -2px 0 #ff00ff; animation: glitch-text 2s infinite linear alternate-reverse; }
@keyframes glitch-text { 0% { text-shadow: 2px 0 #00ffff, -2px 0 #ff00ff; } 100% { text-shadow: -2px 0 #00ffff, 2px 0 #ff00ff; } }
.theme-18 .cat-btn { background: #222; border: 2px solid #333; color: #fff; text-transform: uppercase; font-style: italic; }
.theme-18 .cat-btn.active { background: #fff; color: #000; border-color: #ff00ff; box-shadow: 4px 4px 0 #00ffff; }
.theme-18 .menu-card {
    background: #111; border: none; border-left: 4px solid #ff00ff; border-right: 4px solid #00ffff;
    border-radius: 0; box-shadow: none; position: relative;
}
.theme-18 .card-img { filter: grayscale(50%) contrast(150%) hue-rotate(15deg); border-radius: 0 !important; }
.theme-18 .menu-card:hover { animation: glitch-skew 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite; }
@keyframes glitch-skew {
    0% { transform: skew(0deg); } 20% { transform: skew(-10deg); filter: hue-rotate(90deg); }
    40% { transform: skew(10deg); } 60% { transform: skew(-5deg); filter: hue-rotate(-90deg); }
    80% { transform: skew(5deg); } 100% { transform: skew(0deg); }
}
.theme-18 .add-btn {
    background: red !important; border-radius: 0 !important; font-family: inherit; font-size: 1.2rem;
    animation: rec-blink 1s infinite; float: none !important; width: 100%; border: 2px solid #fff !important;
}
@keyframes rec-blink { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

/* 📰 تم ۱۹: مجله بروتالیست خشن (Brutalist Extreme) */
.theme-19 { --bg: #fff; --primary: #000; --text: #000; font-family: 'Arial Black', Impact, sans-serif !important; }
.theme-19 body { background: #fff; color: #000; border: 10px solid #000; min-height: 100vh; }
.theme-19 .main-header { background: #fff; color: #000; border-bottom: 8px solid #000; text-align: right; padding: 40px 20px; }
.theme-19 .logo-circle { border-radius: 0; border: 4px solid #000; background: #fff; color: #000; width: 80px; height: 80px; }
.theme-19 #cafe-name { font-size: 3rem; text-transform: uppercase; letter-spacing: -2px; }
.theme-19 .search-bar input { border: 4px solid #000; border-radius: 0; box-shadow: 6px 6px 0 #000; padding: 15px; font-weight: bold; }
.theme-19 .cat-btn { background: #fff; border: 3px solid #000; border-radius: 0; font-size: 1.2rem; text-decoration: underline; }
.theme-19 .cat-btn.active { background: #000; color: #fff; box-shadow: 4px 4px 0 #000; }
.theme-19 .menu-card {
    background: #fff; border: 5px solid #000; border-radius: 0;
    box-shadow: 10px 10px 0 #000; transition: transform 0.1s;
}
.theme-19 .menu-card:hover { transform: translate(-5px, -5px); box-shadow: 15px 15px 0 #000; }
.theme-19 .card-img { filter: grayscale(100%) contrast(150%); border-radius: 0 !important; border-bottom: 5px solid #000; height: 180px; }
.theme-19 h3 { font-size: 1.6rem; text-transform: uppercase; border-bottom: 2px solid #000; padding-bottom: 5px; }
.theme-19 .add-btn {
    background: #000 !important; color: #fff !important; border-radius: 0 !important;
    font-size: 1.3rem; padding: 10px !important; float: none !important; width: 100%; text-transform: uppercase;
}
.theme-19 .add-btn:hover { background: #fff !important; color: #000 !important; border: 3px solid #000 !important; }

/* 🔮 تم ۲۰: شیشه مات مطلق (Glassmorphism Float) */
.theme-20 { --primary: #fff; --text: #fff; }
.theme-20 body {
    background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 50%, #a1c4fd 100%);
    background-size: 400% 400%; animation: glass-bg 15s ease infinite; color: #fff;
}
@keyframes glass-bg { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.theme-20 .main-header, .theme-20 .menu-card, .theme-20 .search-bar input {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
    border-radius: 20px; color: #fff;
}
.theme-20 .main-header { margin: 15px; border-radius: 30px; padding: 30px; }
.theme-20 .cat-btn { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); color: #fff; border-radius: 50px; }
.theme-20 .cat-btn.active { background: rgba(255,255,255,0.4); box-shadow: 0 0 15px rgba(255,255,255,0.5); }
.theme-20 .card-img { border-radius: 15px !important; opacity: 0.9; }
.theme-20 .add-btn {
    background: rgba(255,255,255,0.2) !important; color: #fff !important; backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.5) !important; border-radius: 50px !important; width: 100%; float: none !important;
}
.theme-20 .add-btn:hover { background: rgba(255,255,255,0.5) !important; color: #333 !important; }

/* 🎯 تم ۲۱: رادار فضایی و هولوگرام (Space HUD UI) */
.theme-21 { --bg: #001100; --primary: #00ffcc; --text: #88ffcc; font-family: 'Orbitron', sans-serif; }
.theme-21 body { background: radial-gradient(circle at center, #002211 0%, #000000 100%); color: var(--text); }
.theme-21 .main-header { background: transparent; border-bottom: 2px solid #00ffcc; box-shadow: 0 10px 20px rgba(0,255,204,0.1); }
.theme-21 .logo-circle { border-radius: 50%; border: 2px dashed #00ffcc; background: rgba(0,255,204,0.1); animation: spin-radar 10s linear infinite; }
@keyframes spin-radar { 100% { transform: rotate(360deg); } }
.theme-21 .search-bar input { background: rgba(0,255,204,0.05); border: 1px solid #00ffcc; color: #00ffcc; border-radius: 50px; }
.theme-21 .cat-btn { background: transparent; border: 1px solid #00ffcc; color: #00ffcc; border-radius: 50px 0 50px 0; text-transform: uppercase; }
.theme-21 .cat-btn.active { background: rgba(0,255,204,0.3); box-shadow: 0 0 15px rgba(0,255,204,0.6); }
.theme-21 .menu-card {
    background: rgba(0, 20, 10, 0.8); border: 1px solid #00ffcc; border-radius: 50px 0 50px 0;
    box-shadow: inset 0 0 20px rgba(0, 255, 204, 0.1); position: relative; overflow: hidden;
}
.theme-21 .menu-card::before {
    content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(transparent, rgba(0, 255, 204, 0.2), transparent 30%);
    animation: spin-radar 4s linear infinite; pointer-events: none;
}
.theme-21 .card-img { border-radius: 50px 0 50px 0 !important; opacity: 0.8; border: 1px solid #00ffcc; }
.theme-21 .add-btn {
    background: transparent !important; color: #00ffcc !important; border: 1px solid #00ffcc !important;
    border-radius: 50px 0 50px 0 !important; float: none !important; width: 100%; box-shadow: 0 0 10px rgba(0,255,204,0.3);
}
.theme-21 .add-btn:hover { background: #00ffcc !important; color: #000 !important; }
.theme-21 #cart-floating-btn { border-radius: 50%; border: 2px solid #00ffcc; box-shadow: 0 0 20px #00ffcc; background: #001100; color: #00ffcc; }



/* =========================================================
   🔥 EXTREME THEMES (13 to 21) - BEYOND LIMITS! 🔥
   ========================================================= */

/* -----------------------------------------
   Theme 13: Liquid Bubbles (ارگانیک و در حال ذوب)
----------------------------------------- */
@keyframes blobAnim {
    0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
    34% { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; }
    67% { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; }
    100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
  }
  @keyframes bgLiquid {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  body.theme-13 {
    background: linear-gradient(-45deg, #ff9a9e, #fecfef, #a1c4fd, #c2e9fb) !important;
    background-size: 400% 400% !important;
    animation: bgLiquid 10s ease infinite !important;
  }
  .theme-13 .main-header {
    background: rgba(255,255,255,0.4) !important;
    backdrop-filter: blur(10px);
    animation: blobAnim 6s infinite alternate !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
    padding: 50px 20px !important;
  }
  .theme-13 .logo-circle { animation: blobAnim 3s infinite alternate-reverse !important; background: #fff !important; color: #333;}
  .theme-13 .menu-card {
    background: rgba(255,255,255,0.6) !important;
    animation: blobAnim 8s infinite alternate !important;
    border: none !important;
    box-shadow: 10px 10px 30px rgba(0,0,0,0.1) !important;
    transition: all 0.5s ease;
  }
  .theme-13 .menu-card:hover { transform: scale(1.1) rotate(5deg); }
  .theme-13 .card-img { animation: blobAnim 5s infinite alternate !important; }
  .theme-13 .add-btn {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
    animation: blobAnim 3s infinite alternate !important;
    font-weight: bold; padding: 15px !important;
  }
  .theme-13 .cat-btn {
    animation: blobAnim 4s infinite !important;
    background: rgba(255,255,255,0.7) !important; padding: 15px 25px !important; color: #333 !important;
  }
  .theme-13 #cart-floating-btn {
    animation: blobAnim 2s infinite alternate !important;
    background: #ff0844 !important; color: white !important;
  }
  
  /* -----------------------------------------
     Theme 14: Pure Terminal (هکری و خط فرمان)
  ----------------------------------------- */
  body.theme-14 {
    background: #000 !important;
    color: #0f0 !important;
    font-family: 'Courier New', Courier, monospace !important;
  }
  body.theme-14 * { font-family: 'Courier New', Courier, monospace !important; }
  .theme-14 .main-header {
    background: #000 !important; border-bottom: 2px dashed #0f0 !important; border-radius: 0 !important;
  }
  .theme-14 .logo-circle { content: '>'; color: #0f0 !important; background: transparent !important; border: 1px solid #0f0; border-radius: 0 !important;}
  .theme-14 .card-img { display: none !important; /* عکس ها کلا حذف میشوند */ }
  .theme-14 .menu-card {
    background: #000 !important; border: 1px solid #0f0 !important; border-radius: 0 !important; box-shadow: none !important; position: relative;
  }
  .theme-14 .menu-card::before {
    content: '[ DATA CHUNK ]'; position: absolute; top: 2px; right: 2px; font-size: 10px; color: #0f0;
  }
  .theme-14 .menu-card:hover { background: #0f0 !important; color: #000 !important; }
  .theme-14 .menu-card:hover * { color: #000 !important; }
  .theme-14 .add-btn {
    background: transparent !important; color: #0f0 !important; border: 1px dashed #0f0 !important; border-radius: 0 !important;
  }
  .theme-14 .add-btn:hover { background: #000 !important; color: #0f0 !important; border: 1px solid #0f0 !important;}
  .theme-14 .cat-btn { background: #000 !important; color: #0f0 !important; border: 1px solid #0f0 !important; border-radius: 0 !important; text-transform: uppercase;}
  .theme-14 .cat-btn.active { background: #0f0 !important; color: #000 !important; }
  .theme-14 #cart-floating-btn { background: #000 !important; border: 2px solid #0f0 !important; color: #0f0 !important; border-radius: 0 !important;}
  
  /* -----------------------------------------
     Theme 15: 3D Isometric (شناور و سه بعدی زاویه دار)
  ----------------------------------------- */
  body.theme-15 { background: #e0e5ec !important; }
  .theme-15 #app {
    transform: rotateX(15deg) rotateY(-5deg); transform-style: preserve-3d; transition: transform 0.5s;
  }
  .theme-15 .main-header {
    background: #e0e5ec !important;
    box-shadow: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px rgba(255,255,255, 0.5) !important;
    border-radius: 15px !important; transform: translateZ(40px);
  }
  .theme-15 .menu-card {
    background: #e0e5ec !important;
    box-shadow: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px rgba(255,255,255, 0.5) !important;
    border-radius: 15px !important; transform: translateZ(10px); transition: transform 0.3s, box-shadow 0.3s;
  }
  .theme-15 .menu-card:hover {
    transform: translateZ(60px) scale(1.05);
    box-shadow: 20px 20px 30px rgb(163,177,198,0.5), -20px -20px 30px rgba(255,255,255, 0.8) !important;
  }
  .theme-15 .add-btn {
    background: #e0e5ec !important; color: #333 !important;
    box-shadow: 5px 5px 10px rgb(163,177,198,0.6), -5px -5px 10px rgba(255,255,255, 0.5) !important; border: none !important;
  }
  .theme-15 .add-btn:active { box-shadow: inset 5px 5px 10px rgb(163,177,198,0.6), inset -5px -5px 10px rgba(255,255,255, 0.5) !important; }
  .theme-15 .cat-btn { background: #e0e5ec !important; box-shadow: 5px 5px 10px rgb(163,177,198,0.6), -5px -5px 10px rgba(255,255,255, 0.5) !important; color: #333 !important; border: none !important;}
  .theme-15 #cart-floating-btn { transform: translateZ(120px); box-shadow: 15px 15px 30px rgb(163,177,198,0.8) !important; background: #e0e5ec !important; color:#333 !important;  transform: translate(-50%);}
  
  /* -----------------------------------------
     Theme 16: Polaroid Mess (بهم ریخته، کاغذ عکس و چسب)
  ----------------------------------------- */
  body.theme-16 { background: #dcb173 url('https://www.transparenttextures.com/patterns/cork-board.png') !important; }
  .theme-16 .main-header {
    background: white !important; transform: rotate(-2deg); box-shadow: 5px 5px 20px rgba(0,0,0,0.4) !important; border: 15px solid white !important; border-bottom: 35px solid white !important;
  }
  .theme-16 .menu-card {
    background: white !important; padding: 15px !important; padding-bottom: 75px !important;
    border-radius: 2px !important; box-shadow: 5px 5px 15px rgba(0,0,0,0.4) !important;
    border: none !important; position: relative; transition: all 0.3s;
  }
  .theme-16 .menu-card:nth-child(even) { transform: rotate(4deg); }
  .theme-16 .menu-card:nth-child(odd) { transform: rotate(-4deg); }
  .theme-16 .menu-card:nth-child(3n) { transform: rotate(7deg); }
  .theme-16 .menu-card:hover { transform: scale(1.15) rotate(0deg); z-index: 100; box-shadow: 15px 15px 30px rgba(0,0,0,0.6) !important; }
  .theme-16 .card-img { border-radius: 0 !important; filter: sepia(0.8) contrast(1.3) !important; border: 1px solid #ccc !important;}
  .theme-16 .menu-card h3 { font-family: 'Comic Sans MS', cursive, sans-serif !important; text-align: center; }
  .theme-16 .add-btn {
    background: repeating-linear-gradient(45deg, #ffcc00, #ffcc00 10px, #000 10px, #000 20px) !important;
    color: white !important; transform: rotate(-5deg); box-shadow: 2px 2px 5px rgba(0,0,0,0.5) !important; font-weight: 900 !important; border: none !important;
  }
  .theme-16 .cat-btn { background: #ffeb3b !important; color: #000 !important; border-radius: 0 !important; transform: rotate(3deg); box-shadow: 2px 2px 5px rgba(0,0,0,0.3) !important; font-family: 'Comic Sans MS', cursive, sans-serif !important; border: 1px solid #ccc !important;}
  .theme-16 #cart-floating-btn { background: #ff5722 !important; border-radius: 0 !important; transform: rotate(15deg); box-shadow: 5px 5px 10px rgba(0,0,0,0.5) !important; transform: translate(-50%); }
  
  /* -----------------------------------------
     Theme 17: Hexagon Matrix (کندوی زنبور عسل هندسی)
  ----------------------------------------- */
  body.theme-17 {
    background: #111 !important;
    background-image: radial-gradient(#333 15%, transparent 16%), radial-gradient(#333 15%, transparent 16%) !important;
    background-size: 60px 60px !important; background-position: 0 0, 30px 30px !important;
  }
  .theme-17 .main-header {
    clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0% 50%) !important;
    background: #f1c40f !important; color: #000 !important; border-radius: 0 !important;
  }
  .theme-17 .menu-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
  .theme-17 .menu-card {
    width: 48% !important; margin: 1% !important;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
    background: #222 !important; color: #fff !important; border-radius: 0 !important;
    height: 280px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px 5px !important;
  }
  .theme-17 .card-img {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
    height: 100px !important; width: 100px !important; margin: 0 auto; border-radius: 0 !important;
  }
  .theme-17 .add-btn {
    background: #f1c40f !important; color: #000 !important;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important;
    border-radius: 0 !important; width: 80px !important; margin: 10px auto !important; border: none !important;
  }
  .theme-17 .cat-btn { clip-path: polygon(15% 0, 85% 0, 100% 50%, 85% 100%, 15% 100%, 0 50%) !important; background: #333 !important; color: #f1c40f !important; border-radius: 0 !important; border: none !important;}
  .theme-17 #cart-floating-btn { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important; background: #f1c40f !important; color: #000 !important; border-radius: 0 !important; width: 70px; height: 80px; }
  
  /* -----------------------------------------
     Theme 18: VCR Glitch (لرزش نئونی، سایبرپانک وحشی)
  ----------------------------------------- */
  @keyframes glitchEffect {
    0% { transform: translate(0) }
    20% { transform: translate(-3px, 3px) }
    40% { transform: translate(-3px, -3px) }
    60% { transform: translate(3px, 3px) }
    80% { transform: translate(3px, -3px) }
    100% { transform: translate(0) }
  }
  body.theme-18 {
    background: linear-gradient(180deg, #2b003c 0%, #000000 100%) !important;
    color: #ff00ff !important; font-family: 'Impact', sans-serif !important;
  }
  .theme-18 .main-header {
    background: #111 !important; border-bottom: 5px solid #00ffff !important;
    box-shadow: 0 0 25px #ff00ff !important; text-shadow: 3px 3px #00ffff, -3px -3px #ff00ff !important;
  }
  .theme-18 h1, .theme-18 p, .theme-18 h3 { text-shadow: 2px 0 #00ffff, -2px 0 #ff00ff !important; }
  .theme-18 .menu-card {
    background: #111 !important; border: 2px solid #ff00ff !important;
    box-shadow: 6px 6px 0 #00ffff !important; color: #fff !important; border-radius: 0 !important;
  }
  .theme-18 .menu-card:hover { animation: glitchEffect 0.15s infinite !important; background: #222 !important; }
  .theme-18 .card-img { filter: hue-rotate(90deg) saturate(250%) contrast(150%) !important; border-radius: 0 !important;}
  .theme-18 .add-btn {
    background: #ff00ff !important; color: #fff !important; border-radius: 0 !important; border: 2px solid #00ffff !important; box-shadow: 3px 3px 0 #fff !important; text-transform: uppercase !important; font-weight: 900 !important;
  }
  .theme-18 .add-btn:active { animation: glitchEffect 0.1s infinite !important; }
  .theme-18 .cat-btn { background: #000 !important; color: #00ffff !important; border: 2px solid #ff00ff !important; border-radius: 0 !important; font-family: 'Impact', sans-serif !important; letter-spacing: 2px;}
  .theme-18 #cart-floating-btn { background: #00ffff !important; color: #000 !important; border: 3px solid #ff00ff !important; box-shadow: 0 0 20px #ff00ff !important; border-radius: 0 !important; animation: glitchEffect 2s infinite !important;}
  
  /* -----------------------------------------
     Theme 19: Brutalist Extreme (خشن، ضخیم، ضد طراحی)
  ----------------------------------------- */
  body.theme-19 {
    background: #fff !important; color: #000 !important; font-family: 'Arial Black', sans-serif !important; text-transform: uppercase !important;
  }
  .theme-19 * { border-radius: 0 !important; font-weight: 900 !important; }
  .theme-19 .main-header {
    background: #ffea00 !important; border: 8px solid #000 !important; box-shadow: 18px 18px 0 #000 !important; margin-bottom: 50px !important;
  }
  .theme-19 .menu-card {
    background: #fff !important; border: 8px solid #000 !important; box-shadow: 15px 15px 0 #000 !important; transition: transform 0.1s;
  }
  .theme-19 .menu-card:hover { transform: translate(-10px, -10px); box-shadow: 25px 25px 0 #000 !important; background: #ff0055 !important; color: #fff !important; }
  .theme-19 .card-img { filter: grayscale(100%) contrast(200%) !important; border-bottom: 8px solid #000 !important; }
  .theme-19 .add-btn {
    background: #000 !important; color: #fff !important; width: 100% !important; font-size: 1.5rem !important; padding: 20px !important; border: 6px solid #000 !important;
  }
  .theme-19 .add-btn:hover { background: #00e5ff !important; color: #000 !important; }
  .theme-19 .cat-btn { background: #00e5ff !important; border: 6px solid #000 !important; box-shadow: 8px 8px 0 #000 !important; color: #000 !important; font-size: 1.2rem !important;}
  .theme-19 #cart-floating-btn { background: #ffea00 !important; border: 8px solid #000 !important; box-shadow: 12px 12px 0 #000 !important; color: #000 !important; width: 90px !important; height: 90px !important; }
  
  /* -----------------------------------------
     Theme 20: Glassmorphism Float (شیشه ای نامرئی معلق)
  ----------------------------------------- */
  @keyframes floatGlassAnim {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
    100% { transform: translateY(0px) rotate(0deg); }
  }
  body.theme-20 {
    background: radial-gradient(circle at 20% 30%, #ffc87c 0%, #fcfb79 100%) !important; background-attachment: fixed !important;
  }
  .theme-20::before {
    content: ''; position: fixed; top: 15%; left: 5%; width: 400px; height: 400px; background: #ff007f; border-radius: 50%; filter: blur(100px); z-index: -1; animation: floatGlassAnim 8s infinite alternate;
  }
  .theme-20::after {
    content: ''; position: fixed; bottom: 5%; right: 5%; width: 500px; height: 500px; background: #00f0ff; border-radius: 50%; filter: blur(120px); z-index: -1; animation: floatGlassAnim 10s infinite alternate-reverse;
  }
  .theme-20 .main-header, .theme-20 .menu-card, .theme-20 .search-input-wrapper {
    background: rgba(255, 255, 255, 0.05) !important; backdrop-filter: blur(25px) !important; -webkit-backdrop-filter: blur(25px) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15) !important;
  }
  .theme-20 .menu-card { animation: floatGlassAnim 5s ease-in-out infinite !important; }
  .theme-20 .menu-card:nth-child(even) { animation-delay: 1.5s !important; }
  .theme-20 .menu-card:nth-child(3n) { animation-delay: 3s !important; }
  .theme-20 .card-img { border-radius: 20px !important; mix-blend-mode: overlay !important; }
  .theme-20 .add-btn { background: rgba(255,255,255,0.2) !important; color: #000 !important; border: 1px solid rgba(255,255,255,0.6) !important; backdrop-filter: blur(10px) !important; box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;}
  .theme-20 .cat-btn { background: rgba(255,255,255,0.1) !important; backdrop-filter: blur(15px) !important; border: 1px solid rgba(255,255,255,0.4) !important; color: #000 !important; box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;}
  .theme-20 #cart-floating-btn { background: rgba(255, 255, 255, 0.2) !important; backdrop-filter: blur(30px) !important; border: 1px solid rgba(255,255,255,0.8) !important; color: #000 !important; animation: floatGlassAnim 4s infinite !important;}
  
  /* -----------------------------------------
     Theme 21: Space HUD UI (رادار فضایی و سایبرنتیک)
  ----------------------------------------- */
  body.theme-21 {
    background: radial-gradient(circle, #02111d 0%, #000000 100%) !important; color: #00f3ff !important; font-family: 'Trebuchet MS', sans-serif !important;
  }
  @keyframes radarSpin { 100% { transform: translate(-50%, -50%) rotate(360deg); } }
  .theme-21::before {
    content: ''; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90vw; height: 90vw; border: 2px dashed rgba(0, 243, 255, 0.15); border-radius: 50%; z-index: -1; animation: radarSpin 30s linear infinite;
  }
  .theme-21 .main-header {
    background: rgba(0, 20, 30, 0.8) !important; border: 2px solid #00f3ff !important; border-radius: 0 !important; box-shadow: inset 0 0 30px rgba(0, 243, 255, 0.3) !important; clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%) !important; backdrop-filter: blur(5px);
  }
  .theme-21 .menu-card {
    background: rgba(0, 30, 50, 0.6) !important; border: 1px solid #00f3ff !important; border-radius: 0 !important;
    clip-path: polygon(15% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 15%) !important;
    box-shadow: 0 0 15px rgba(0,243,255,0.1) !important; backdrop-filter: blur(3px);
  }
  .theme-21 .menu-card:hover { background: rgba(0, 243, 255, 0.2) !important; box-shadow: 0 0 30px #00f3ff !important; transform: scale(1.03); }
  .theme-21 .card-img { filter: drop-shadow(0 0 10px #00f3ff) opacity(0.8) sepia(1) hue-rotate(180deg) saturate(300%) !important; clip-path: polygon(15% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 15%) !important; }
  .theme-21 .add-btn {
    background: rgba(0,0,0,0.5) !important; color: #00f3ff !important; border: 1px solid #00f3ff !important; border-radius: 0 !important; text-shadow: 0 0 5px #00f3ff !important; letter-spacing: 2px;
  }
  .theme-21 .add-btn:hover { background: #00f3ff !important; color: #000 !important; box-shadow: 0 0 15px #00f3ff !important;}
  .theme-21 .cat-btn { background: rgba(0,0,0,0.5) !important; color: #00f3ff !important; border: 1px solid #00f3ff !important; border-radius: 0 !important; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px) !important; }
  .theme-21 .cat-btn.active { background: #00f3ff !important; color: #000 !important; }
  .theme-21 #cart-floating-btn { background: rgba(0,0,0,0.8) !important; border: 2px solid #00f3ff !important; color: #00f3ff !important; box-shadow: inset 0 0 10px #00f3ff, 0 0 20px #00f3ff !important; border-radius: 50% !important; }
  



  .theme-13 .add-btn {
    position: relative !important; /* بدون این خط، z-index کار نمی‌کند! */
    z-index: 100 !important; /* آوردن دکمه به بالاترین لایه */
}
.theme-13 .menu-card::before,
.theme-13 .menu-card::after {
    z-index: 1 !important; 
}
.theme-13 .menu-card {
    padding-bottom: 70px !important; 
}


/* -----------------------------------------
   چیدمان کارت‌های تم ۱۷ (حالت موبایل و تبلت)
   ----------------------------------------- */
   @media (max-width: 991px) {
    .theme-17 .menu-grid {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
    }
}

/* -----------------------------------------
   اصلاح ریسپانسیو تم ۱۷ برای دسکتاپ (کامپیوتر)
   ----------------------------------------- */
@media (min-width: 992px) {
    .theme-17 .menu-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
        gap: 20px !important;
        padding: 0 20px 100px !important;
        justify-content: center;
    }

    /* تنظیمات داخلی کارت‌ها در دسکتاپ برای حفظ زیبایی شش‌ضلعی‌ها */
    .theme-17 .menu-card {
        padding: 30px 20px !important; 
        /* کارت‌ها در دسکتاپ کمی بزرگتر و مرتب‌تر نمایش داده می‌شوند */
    }
}
@media (min-width: 992px) {
    /* ... کدهای مربوط به گرید که در پیام قبل دادم ... */

    /* اصلاح دکمه افزودن تم ۱۷ در دسکتاپ */
    .theme-17 .add-btn {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 15px auto 0 !important; /* فاصله از بالا و وسط‌چین */
        width: 70% !important; /* کمی جمع‌وجورتر تا در شش‌ضلعی جا شود */
    }
    
    .theme-17 .menu-card {
        padding-bottom: 25px !important; /* ایجاد فضای کافی زیر متن برای دکمه */
    }
}
/* =========================================
   اصلاح یکپارچه دارک مود برای قالب‌های 12 تا 21
========================================= */
/* 1. اصلاح بک‌گراند اصلی و حذف پترن‌های مزاحم */
body.dark-mode.theme-12, body.dark-mode.theme-13, body.dark-mode.theme-14,
body.dark-mode.theme-15, body.dark-mode.theme-16, body.dark-mode.theme-17,
body.dark-mode.theme-18, body.dark-mode.theme-19, body.dark-mode.theme-20,
body.dark-mode.theme-21 {
    background-color: var(--bg) !important;
    background-image: none !important; /* حذف پترن‌ها در دارک مود */
}

/* 2. تاریک کردن کارت‌ها و حذف سایه‌های رنگی/روشن */
body.dark-mode.theme-12 .menu-card, body.dark-mode.theme-13 .menu-card,
body.dark-mode.theme-14 .menu-card, body.dark-mode.theme-15 .menu-card,
body.dark-mode.theme-16 .menu-card, body.dark-mode.theme-17 .menu-card,
body.dark-mode.theme-18 .menu-card, body.dark-mode.theme-19 .menu-card,
body.dark-mode.theme-20 .menu-card, body.dark-mode.theme-21 .menu-card {
    background-color: var(--card-bg) !important;
    color: var(--text) !important;
    border: 1px solid #333 !important;
    box-shadow: none !important; /* پاک کردن سایه‌های رنگی تم‌ها */
}

/* 3. تاریک کردن هدر بالا */
body.dark-mode.theme-12 .main-header, body.dark-mode.theme-13 .main-header,
body.dark-mode.theme-14 .main-header, body.dark-mode.theme-15 .main-header,
body.dark-mode.theme-16 .main-header, body.dark-mode.theme-17 .main-header,
body.dark-mode.theme-18 .main-header, body.dark-mode.theme-19 .main-header,
body.dark-mode.theme-20 .main-header, body.dark-mode.theme-21 .main-header {
    background-color: var(--card-bg) !important;
    color: var(--text) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}

/* 4. اطمینان از خوانا بودن متن‌ها داخل کارت */
body.dark-mode.theme-12 .menu-card *, body.dark-mode.theme-13 .menu-card *,
body.dark-mode.theme-14 .menu-card *, body.dark-mode.theme-15 .menu-card *,
body.dark-mode.theme-16 .menu-card *, body.dark-mode.theme-17 .menu-card *,
body.dark-mode.theme-18 .menu-card *, body.dark-mode.theme-19 .menu-card *,
body.dark-mode.theme-20 .menu-card *, body.dark-mode.theme-21 .menu-card * {
    color: var(--text) !important;
}