/* وب‌اپ مشتری — نسخه‌ی متمرکز.
   به‌جای تکرار ده‌ها بلوک جدا برای هر دکمه (hover/focus/active × dark/light)،
   یک ریست عمومی روی هر عنصر تعاملی داخل .cos-container زده می‌شود و بعد
   هر کامپوننت فقط تفاوت خودش را (رنگ/بوردر) با یک بلوک کوتاه تعریف می‌کند. */

:root {
    --cos-brand-color: #1b4431;
    --cos-accent-color: #fbbf24;
}

/* ۱. ریست عمومی: یک‌بار برای همه‌ی button/a/role=button، به‌جای تکرار per-component
   نکته: قالب/المنتور روی تگ <button> استایل سراسری (پس‌زمینه‌ی صورتی و رنگ متن سفید)
   می‌گذارد که چون کلاس‌های یوتیلیتی Tailwind بدون !important تزریق می‌شوند، این استایل
   سراسری برنده می‌شود. فقط پس‌زمینه/رنگ متن را خنثی می‌کنیم (نه padding/radius/فونت)
   تا هم مشکل رنگ صورتی حل شود و هم چیدمان بقیه‌ی دکمه‌ها که به کلاس‌های Tailwind
   (rounded-xl، px-2.5 و...) وابسته‌اند دست‌نخورده بماند. */
.cos-container button,
.cos-container a,
.cos-container [role="button"] {
    box-shadow: none !important;
    background-image: none !important;
    background-color: transparent !important;
    color: inherit !important;
    text-decoration: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    border: none !important;
    cursor: pointer !important;
}
.cos-container i.fa-solid,
.cos-container i.fa-regular { border: none !important; background: none !important; line-height: 1 !important; }
.cos-container nav { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; width: 100% !important; z-index: 40 !important; }

.cos-container {
    font-family: 'Vazirmatn', sans-serif !important;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.cos-container * { box-sizing: border-box; }
.cos-container ::-webkit-scrollbar { width: 0; height: 0; }

/* ۲. کامپوننت‌هایی که واقعاً باید بوردر داشته باشند */
.cos-container .cos-keep-border.cos-border-soft { border: 1px solid #f1f5f9 !important; }
.dark .cos-container .cos-keep-border.cos-border-soft { border-color: #1f2937 !important; }
.cos-container .cos-keep-border.cos-border-dashed-brand { border: 2px dashed color-mix(in srgb, var(--cos-brand-color) 30%, transparent) !important; }

/* ۳. دکمه تم روز/شب */
.cos-container .cos-theme-toggle-btn { background-color: #fff !important; color: #334155 !important; border: 1.5px solid #e2e8f0 !important; }
.dark .cos-container .cos-theme-toggle-btn { background-color: #15241c !important; color: #e2e8f0 !important; border-color: #1e3328 !important; }

/* ۴. ردیف خدمات سالن */
.cos-container .cos-service-item { background-color: #fff !important; color: #334155 !important; }
.cos-container .cos-service-item:hover { background-color: #f8fafc !important; color: var(--cos-brand-color) !important; }
.dark .cos-container .cos-service-item { background-color: #15241c !important; color: #e2e8f0 !important; }
.dark .cos-container .cos-service-item:hover { background-color: #1c2e24 !important; color: #fff !important; }
.cos-container .cos-service-item .cos-service-icon { color: var(--cos-brand-color) !important; }
.dark .cos-container .cos-service-item .cos-service-icon { color: color-mix(in srgb, var(--cos-brand-color) 65%, #fff) !important; }

/* ۵. دکمه صدای گارسون */
.cos-container .cos-waiter-btn { background-color: color-mix(in srgb, var(--cos-accent-color) 15%, transparent) !important; color: color-mix(in srgb, var(--cos-accent-color) 65%, #1f2937) !important; border: 1px solid color-mix(in srgb, var(--cos-accent-color) 30%, transparent) !important; }
.dark .cos-container .cos-waiter-btn { background-color: color-mix(in srgb, var(--cos-accent-color) 25%, transparent) !important; color: color-mix(in srgb, var(--cos-accent-color) 80%, #ffffff) !important; border-color: color-mix(in srgb, var(--cos-accent-color) 40%, transparent) !important; }

/* نوار باریستای هوشمند */
/* حاشیه‌ی نئونی گرادیان استاتیک دور نوار باریستای هوشمند (به سبک Gemini) */
.cos-gemini-wrapper { position: relative; border-radius: 20px; }
.cos-gemini-aura {
    position: absolute; inset: -1.5px; border-radius: 22px;
    background: linear-gradient(115deg, #4285F4 0%, #9B72CB 28%, #EA4335 55%, #FBBC05 82%, #34A853 100%);
    filter: blur(8px); opacity: .28; pointer-events: none;
    transition: opacity .3s ease, filter .3s ease;
}
.dark .cos-gemini-aura { opacity: .55; filter: blur(14px); }
.cos-gemini-border-track {
    position: relative; border-radius: 20px; padding: 1.5px; z-index: 1;
    background: linear-gradient(115deg, #4285F4 0%, #9B72CB 28%, #EA4335 55%, #FBBC05 82%, #34A853 100%);
}
.cos-gemini-inner { border-radius: 18.5px !important; }
.cos-ai-bar { background: #fff !important; box-shadow: 0 2px 10px -1px rgba(0,0,0,.04); }
.dark .cos-ai-bar { background: rgba(13,20,18,.96) !important; box-shadow: 0 8px 24px -4px rgba(0,0,0,.5); }
.cos-container .cos-ai-chip-btn { background-color: color-mix(in srgb, var(--cos-brand-color) 10%, transparent) !important; color: var(--cos-brand-color) !important; border: 1px solid color-mix(in srgb, var(--cos-brand-color) 25%, transparent) !important; }
.dark .cos-container .cos-ai-chip-btn { background-color: rgba(255,255,255,0.08) !important; color: color-mix(in srgb, var(--cos-brand-color) 60%, #fff) !important; border-color: rgba(255,255,255,0.12) !important; }
.cos-container .cos-ai-chip-btn.amber { background-color: color-mix(in srgb, var(--cos-accent-color) 15%, transparent) !important; color: color-mix(in srgb, var(--cos-accent-color) 65%, #1f2937) !important; border-color: color-mix(in srgb, var(--cos-accent-color) 30%, transparent) !important; }
.dark .cos-container .cos-ai-chip-btn.amber { background-color: color-mix(in srgb, var(--cos-accent-color) 25%, transparent) !important; color: color-mix(in srgb, var(--cos-accent-color) 80%, #ffffff) !important; border-color: color-mix(in srgb, var(--cos-accent-color) 40%, transparent) !important; }
@keyframes cosSpinDiceOnce { 0% { transform: rotate(0deg) scale(0.9); } 60% { transform: rotate(260deg) scale(1.15); } 100% { transform: rotate(360deg) scale(1); } }
.cos-spin-dice { animation: cosSpinDiceOnce 0.65s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ۶. ناوبری پایین */
.cos-container .cos-nav-btn { background: transparent !important; color: #94a3b8 !important; }
.dark .cos-container .cos-nav-btn { color: #64748b !important; }
.cos-container .cos-nav-btn.cos-active-tab { color: var(--cos-brand-color) !important; font-weight: 900 !important; }
.dark .cos-container .cos-nav-btn.cos-active-tab { color: color-mix(in srgb, var(--cos-brand-color) 65%, #fff) !important; }

/* ۷. دکمه بستن مودال */
.cos-container .cos-close-btn { background-color: #f1f5f9 !important; color: #64748b !important; border-radius: 12px !important; }
.dark .cos-container .cos-close-btn { background-color: #1e293b !important; color: #94a3b8 !important; }
.cos-container .cos-close-btn:hover { background-color: #e2e8f0 !important; color: #0f172a !important; }
.dark .cos-container .cos-close-btn:hover { background-color: #334155 !important; color: #fff !important; }

/* ۸. پلاک انتخاب میز */
.cos-container .cos-table-pill { background-color: #f8fafc !important; border: 1.5px solid #edf2f7 !important; color: #334155 !important; }
.dark .cos-container .cos-table-pill { background-color: #14221a !important; border-color: #1e3328 !important; color: #e2e8f0 !important; }
.cos-container .cos-table-pill:hover { background-color: color-mix(in srgb, var(--cos-brand-color) 12%, #fff) !important; border-color: var(--cos-brand-color) !important; color: var(--cos-brand-color) !important; }
.cos-container .cos-table-pill.selected { background-color: var(--cos-brand-color) !important; border-color: var(--cos-brand-color) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(0,0,0,.18) !important; }

/* ۹. دکمه‌های اصلی/بنر */
.cos-container .cos-primary-btn { background-color: var(--cos-brand-color) !important; color: #fff !important; }
.cos-container .cos-primary-btn:hover { opacity: .92 !important; }
.cos-container .cos-banner-btn { background: #fff !important; color: #0f172a !important; border: 1px solid rgba(255,255,255,.8) !important; }
.cos-container .cos-header-table-btn { background-color: color-mix(in srgb, var(--cos-brand-color) 12%, transparent) !important; border: 1px solid color-mix(in srgb, var(--cos-brand-color) 30%, transparent) !important; color: var(--cos-brand-color) !important; }
.cos-container .cos-text-btn { background: transparent !important; padding: 0 !important; color: var(--cos-brand-color) !important; }

/* ۱۰. اسلایدر بنر */
.cos-slider-container { position: relative; overflow: hidden; border-radius: 22px; touch-action: pan-y; width: 100%; background: #e2e8f0; aspect-ratio: 21/9; }
.dark .cos-slider-container { background: #101a15; }
.cos-slider-track { display: flex; transition: transform .55s cubic-bezier(.22,1,.36,1); width: 100%; height: 100%; }
.cos-slider-slide { flex: 0 0 100%; width: 100%; height: 100%; position: relative; overflow: hidden; }
.cos-slider-slide img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.cos-slider-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 50%); pointer-events: none; }
.cos-slider-dot-item { display: block !important; height: 6px !important; width: 6px !important; padding: 0 !important; margin: 0 !important; border-radius: 9999px !important; background-color: rgba(255,255,255,.4) !important; cursor: pointer; transition: all .35s cubic-bezier(.4,0,.2,1) !important; }
.cos-slider-dot-item.active { width: 22px !important; background-color: #fff !important; }
.cos-slider-arrow-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 30px !important; height: 30px !important; border-radius: 9999px !important; background: rgba(0,0,0,.45) !important; backdrop-filter: blur(6px); color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; z-index: 12; cursor: pointer; opacity: 0; transition: opacity .2s, background .2s; }
.cos-slider-container:hover .cos-slider-arrow-btn { opacity: 1; }
.cos-slider-arrow-btn:hover { background: rgba(0,0,0,.75) !important; }

/* ۱۲. گردی گوشه‌ها روی input/textarea و img — برخی قالب‌ها با border-radius:0 سراسری
   کلاس‌های rounded-* تیلویند را (که !important ندارند) بی‌اثر می‌کنند؛ اینجا صریحاً
   با !important همان مقادیر را برمی‌گردانیم. */
.cos-container input,
.cos-container textarea,
.cos-container select {
    border-radius: 1rem !important; /* هم‌ارز rounded-2xl */
}
.cos-container img.rounded-2xl { border-radius: 1rem !important; }
.cos-container img.rounded-xl  { border-radius: 0.75rem !important; }
.cos-container img.rounded-lg  { border-radius: 0.5rem !important; }
.cos-container img.rounded-full { border-radius: 9999px !important; }

/* ۱۱. متفرقه */
.cos-glass-header { background: rgba(246,248,246,.94) !important; backdrop-filter: blur(14px); }
.dark .cos-glass-header { background: rgba(13,22,17,.94) !important; backdrop-filter: blur(14px); }
.cos-banner-gradient { background: linear-gradient(135deg, color-mix(in srgb, var(--cos-brand-color) 20%, #05080c) 0%, color-mix(in srgb, var(--cos-brand-color) 55%, #090f18) 40%, var(--cos-brand-color) 85%, color-mix(in srgb, var(--cos-brand-color) 80%, #fff) 100%) !important; position: relative; }
.cos-banner-shimmer { background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.09) 40%, transparent 60%); background-size: 200% 100%; animation: cosShimmer 4s infinite linear; }
@keyframes cosShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.cos-primary-text { color: var(--cos-brand-color) !important; }
.dark .cos-primary-text { color: color-mix(in srgb, var(--cos-brand-color) 60%, #fff) !important; }

.cos-cat-btn { border: 1.5px solid #edf2ee !important; background-color: #fff !important; color: #334155 !important; }
.dark .cos-cat-btn { border-color: #1c2e24 !important; background-color: #15241c !important; color: #e2e8f0 !important; }
.cos-cat-btn:hover { border-color: var(--cos-brand-color) !important; color: var(--cos-brand-color) !important; }
.cos-cat-btn.active { background-color: var(--cos-brand-color) !important; border-color: var(--cos-brand-color) !important; color: #fff !important; }
/* اگر استایل سراسری قالب/المنتور روی تگ button مقدار display را عوض کند، چیدمان
   ستونی آیکون+متن به‌هم می‌ریزد (آیکون از مرکز خارج و متن سررررریز می‌شود)؛
   اینجا صریحاً همان چیدمانی که Tailwind قرار بود بدهد را با !important تضمین می‌کنیم. */
.cos-cat-btn { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; box-sizing: border-box !important; }
.cos-cat-btn > div { display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
.cos-cat-btn i { display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.cos-cat-btn span {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
    line-height: 1.25 !important;
}

/* آیکون FontAwesome با currentColor خودش رنگ عوض می‌کند؛ اما تصویر/SVG آپلودی رنگ ثابت خودش
   را دارد، پس با فیلتر مجبورش می‌کنیم هاور/حالت فعال هم‌رنگ همان سفید بشود. */
.cos-cat-btn img { transition: filter 0.2s ease; }
.cos-cat-btn:hover img,
.cos-cat-btn.active img { filter: brightness(0) invert(1); }

.cos-page-view { transition: opacity .2s ease-in-out, transform .2s ease-in-out; }
.cos-page-hidden { display: none !important; opacity: 0; transform: translateY(8px); }
.cos-float-animation { animation: cosFloat 4s ease-in-out infinite; }
@keyframes cosFloat { 0% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(-1deg); } 100% { transform: translateY(0) rotate(-3deg); } }
.cos-fill-img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }

/* ---- رفع فلاش استایل اولیه (FOUC) هنگام کامپایل زنده‌ی Tailwind CDN ----
   اپ تا زمانی که استایل‌دهی توسط Tailwind کامل نشده مخفی می‌ماند و بعد با
   یک فید نرم ظاهر می‌شود؛ این باعث می‌شود دیگر چیدمان به‌هم‌ریخته‌ی اولیه دیده نشود. */
.cos-preload-hide { opacity: 0 !important; }
.cos-container { transition: opacity .25s ease; }
.cos-container.cos-ready { opacity: 1 !important; }

/* اسپلش اسکرین: کراس‌فید ملایم بین تصاویر پس‌زمینه */
.cos-splash-slide {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    opacity: 0; transform: scale(1.08);
    transition: opacity 1.8s cubic-bezier(.4,0,.2,1), transform 6.5s ease-out;
}
.cos-splash-slide.active { opacity: 1; transform: scale(1); }
#cosSplashScreen { transition: opacity .4s ease, visibility .4s ease; }
#cosSplashScreen.cos-splash-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* دکمه‌های اسپلش اسکرین باید حتماً !important باشند چون ریست عمومی بالا
   (برای خنثی‌کردن استایل سراسری قالب/المنتور روی button/a) پس‌زمینه‌شان را
   transparent می‌کند و بدون این override رنگ اصلی خودشان را از دست می‌دهند. */
#cosSplashScreen .cos-splash-primary-btn { background:#ffffff !important; color:#1c1917 !important; }
#cosSplashScreen .cos-splash-secondary-btn { background:rgba(255,255,255,.12) !important; color:#fff !important; border:1px solid rgba(255,255,255,.25) !important; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
#cosSplashScreen .cos-splash-icon-btn { background:rgba(255,255,255,.08) !important; color:#fff !important; border:1px solid rgba(255,255,255,.18) !important; }
#cosSplashScreen .cos-splash-brand-btn { background:var(--cos-brand-color) !important; color:#fff !important; }
#cosSplashScreen .cos-splash-credit-link { color: rgba(255,255,255,.6) !important; }
#cosSplashScreen .cos-splash-credit-link:hover { color: #ffffff !important; }

/* فوتر گم می‌شد چون هدر/نوار ادمین قالب بالای شورت‌کد فضا می‌گیرد و h-screen را از
   بالای صفحه (نه از بالای واقعی صفحه‌نمایش) اندازه می‌گیرد؛ در نتیجه پایین کارت
   (جایی که فوتر است) پایین‌تر از دید کاربر می‌افتد و برای دیدنش باید کل صفحه‌ی
   سایت را اسکرول کند. با position:fixed روی موبایل، اپ همیشه دقیقاً روی صفحه‌نمایش
   می‌نشیند و فوتر همیشه واقعاً پایین صفحه ثابت می‌ماند. */
@media (max-width: 639px) {
    .cos-container { position: fixed !important; inset: 0 !important; z-index: 9999 !important; min-height: 0 !important; overflow: hidden !important; }
    /* کارت داخلی از h-screen (واحد vh) استفاده می‌کند که روی موبایل به‌خاطر نوار
       آدرس پویا می‌تواند از ارتفاع واقعی و در دسترس صفحه بلندتر باشد؛ همین اختلاف
       باعث می‌شد هدر و فوتر هر کدام نصفه از بالا/پایین کادر fixed بیرون بزنند.
       با height:100% دقیقاً هم‌اندازه‌ی همان کادر fixed (که ارتفاع واقعی صفحه را
       دارد) می‌شود و دیگر چیزی از بالا/پایین بریده نمی‌شود. */
    .cos-container > div { height: 100% !important; max-height: 100% !important; }
}

/* هنگام کشیدن بیش‌ازحد صفحه (elastic overscroll در موبایل)، پس‌زمینه‌ی سفید خود
   سایت از لبه‌های بالا/پایین اپ دیده می‌شود؛ رنگ واقعی از طریق JS (چون قابلیت
   :has برای همه مرورگرها/دستگاه‌ها پشتیبانی نمی‌شود) روی html/body ست می‌شود -
   ببینید تابع cosSyncPageBg در frontend.js. */

/* حالت فعال دکمه‌ی متنی «مشاهده همه» هم‌شکل با دکمه‌های دسته‌بندی */
.cos-text-btn.active { text-decoration: underline; }