/*
Theme Name: رستوران‌های سنتر (Modern Persian Restaurant)
Theme URI: https://example.com
Author: Center Restaurants
Author URI: https://example.com
Description: قالب اختصاصی وردپرس رستوران فست‌فود و کباب پاچرخی سنتر. تبدیل شده از پروژه React/Tailwind بدون تغییر در ظاهر.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: center-restaurant
Tags: restaurant, food, rtl, persian
*/

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Vazirmatn", ui-sans-serif, system-ui, sans-serif;
  background-color: var(--color-charcoal-950, #120c0b);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* Persian numeral tabular nums */
.fa-num {
  font-variant-numeric: tabular-nums;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--color-charcoal-950, #120c0b);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff4d3d, #ff9d1f);
  border-radius: 999px;
}

/* Light theme override */
html.light-theme {
  --color-charcoal-950: #fdf8f0;
  --color-charcoal-900: #f8ecd9;
  --color-charcoal-800: #f0dcc0;
  --color-charcoal-700: #e8cfa8;
  --color-charcoal-600: #dcbe8f;
  --color-cream-50: #241816;
  --color-cream-100: #3d2a26;
  --color-cream-200: #2f201d;
}

html.light-theme .glass {
  background: rgba(253, 248, 240, 0.75);
  border: 1px solid rgba(36, 24, 22, 0.08);
}

html.light-theme body {
  background-color: var(--color-charcoal-950);
}

.glass {
  background: rgba(36, 24, 22, 0.55);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.text-gradient-ember {
  background: linear-gradient(90deg, #ff4d3d, #ff9d1f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.persian-pattern {
  background-image:
    radial-gradient(circle at 20px 20px, rgba(255,157,31,0.08) 2px, transparent 2px),
    radial-gradient(circle at 0 0, rgba(255,77,61,0.06) 2px, transparent 2px);
  background-size: 40px 40px;
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/*
 * Native <input type="date"> fix for the dark theme.
 * Without this, the browser draws its calendar icon in a dark color that
 * disappears against our dark inputs (bg-white/5 on charcoal), making the
 * field LOOK unselectable even though it isn't. `color-scheme: dark` tells
 * the browser to render the icon (and the picker popup) in a light variant
 * that's actually visible, and also makes the whole field clickable.
 */
input[type="date"] {
  color-scheme: dark;
  cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.9;
}
html.light-theme input[type="date"] {
  color-scheme: light;
}

/*
 * Native <select> dropdown popup fix.
 * Our <select> elements use light text (text-cream-50 etc.) so they read
 * correctly on the dark theme while closed. But the browser renders the
 * OPEN dropdown list itself (native OS popup) with its own white
 * background while still inheriting that same light text color -> the
 * options become invisible (light text on a white popup). Forcing a dark
 * color/background on <option> specifically fixes the open list without
 * touching how the closed select looks.
 */
select {
  color-scheme: light;
}
select option {
  color: #241816;
  background-color: #ffffff;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-14px); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.animate-fade-up { animation: fade-up 0.8s ease both; }
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-marquee { animation: marquee 30s linear infinite; }