/* ============================================================
   یه جا (Yeh Ja) — Local Business Directory
   Shared design system: brand palette, base, components, states
   ============================================================ */

:root {
  /* Brand — Gold/Yellow (primary) + Teal (accent) */
  --primary-50:  #fefce8;
  --primary-100: #fef9c3;
  --primary-200: #fef08a;
  --primary-300: #fde047;
  --primary-400: #facc15;
  --primary-500: #eab308;
  --primary-600: #ca8a04;
  --primary-700: #a16207;
  --primary-800: #854d0e;
  --primary-900: #713f12;

  --accent-50:  #eef2ff;
  --accent-100: #e0e7ff;
  --accent-200: #c7d2fe;
  --accent-300: #a5b4fc;
  --accent-400: #818cf8;
  --accent-500: #6366f1;
  --accent-600: #4f46e5;
  --accent-700: #4338ca;

  /* Neutral (warm slate) */
  --ink:    #0f172a;
  --ink-2:  #1e293b;
  --muted:  #64748b;
  --muted-2:#94a3b8;
  --line:   #e7eaef;
  --line-2: #f1f3f6;
  --surface:#ffffff;
  --bg:     #f8fafc;
  --bg-2:   #f1f5f9;

/* Status — success stays green (open/available), decoupled from brand yellow */
  --success:    #10b981;
  --success-50: #ecfdf5;
  --success-700:#047857;
  --warning: #eab308;
  --error:   #e11d48;

  --radius:  1rem;
  --radius-lg: 1.25rem;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow:    0 4px 16px rgba(15,23,42,.06), 0 2px 6px rgba(15,23,42,.04);
  --shadow-lg: 0 18px 40px -12px rgba(15,23,42,.18), 0 6px 14px rgba(15,23,42,.05);
}

/* ---------- Base ---------- */
* { -webkit-tap-highlight-color: transparent; }
::-webkit-scrollbar {
    width: 0px;
    background: transparent;
    display: none;
}
/* مخفی کردن نوار اسکرول در فایرفاکس */
* {
    scrollbar-width: none;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Vazirmatn', system-ui, sans-serif;
  background-color: var(--bg);
  color: var(--ink);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--primary-200); color: var(--primary-900); }

/* numbers use tabular feel */
.font-num { font-feature-settings: "ss01"; letter-spacing: 0; }

/* ---------- Custom scrollbar ---------- */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }

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

/* ---------- Components: Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .625rem 1.125rem; border-radius: .85rem;
  font-weight: 600; font-size: .9rem; line-height: 1;
  transition: all .18s ease; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary-600); color: #fff; box-shadow: 0 6px 16px -6px rgba(202,138,4,.55); }
.btn-primary:hover { background: var(--primary-700); box-shadow: 0 10px 22px -6px rgba(202,138,4,.5); }
.btn-accent  { background: var(--accent-500); color: #fff; box-shadow: 0 6px 16px -6px rgba(79,70,229,.55); }
.btn-accent:hover { background: var(--accent-600); }
.btn-outline { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-outline:hover { border-color: var(--primary-300); color: var(--primary-700); background: var(--primary-50); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--line-2); color: var(--ink); }
.btn-soft { background: var(--primary-50); color: var(--primary-700); }
.btn-soft:hover { background: var(--primary-100); }
.btn-sm { padding: .4rem .8rem; font-size: .8rem; border-radius: .7rem; }
.btn-lg { padding: .85rem 1.5rem; font-size: 1rem; border-radius: 1rem; }
.btn-block { width: 100%; }
.btn-icon { padding: .55rem; border-radius: .75rem; }

/* ---------- Components: Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-hover { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--primary-200); }

/* ---------- Components: Badges & Chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; line-height: 1.4;
}
.badge-success { background: var(--success-50); color: var(--success-700); }
/* keep the pulse/dot inside an open-badge green (not brand red) */
.badge-success [class*="bg-primary-"] { background-color: var(--success); }
.text-success { color: var(--success-700); }
.badge-error   { background: #fff1f2; color: var(--error); }
.badge-warning { background: var(--accent-50); color: var(--accent-700); }
.badge-muted   { background: var(--line-2); color: var(--muted); }
.badge-accent  { background: var(--accent-50); color: var(--accent-700); }

.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem; border-radius: 999px;
  font-size: .85rem; font-weight: 500; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line);
  transition: all .15s ease; cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: var(--primary-300); color: var(--primary-700); background: var(--primary-50); }
.chip-active { background: var(--primary-600); color: #fff; border-color: var(--primary-600); }
.chip-active:hover { background: var(--primary-700); color:#fff; }

/* tabs active state (used by [data-tab] toggles) */
.tab-active { color: var(--primary-700) !important; border-color: var(--primary-600) !important; }
.chip.tab-active { background: var(--primary-600) !important; color: #fff !important; border-color: var(--primary-600) !important; }
.chip.tab-active:hover { background: var(--primary-700) !important; color:#fff !important; }

/* ---------- Inputs ---------- */
.input {
  width: 100%; padding: .65rem .9rem; border-radius: .8rem;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: .9rem; font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus { outline: none; border-color: var(--primary-400); box-shadow: 0 0 0 3px rgba(234,179,8,.18); }
.input::placeholder { color: var(--muted-2); }

.label { display:block; font-size: .82rem; font-weight: 600; color: var(--ink-2); margin-bottom: .4rem; }

/* logo bubble (initials) */
.logo-bubble {
  display:inline-flex; align-items:center; justify-content:center;
  font-weight: 800; color:#fff; border-radius: .85rem;
  box-shadow: var(--shadow-sm);
}

/* ---------- States: skeleton ---------- */
.skeleton {
  position: relative; overflow: hidden;
  background: var(--line-2);
}
.skeleton::after {
  content:""; position:absolute; inset:0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* ---------- Story ring ---------- */
.story-ring {
  background: conic-gradient(var(--accent-500) 0deg, var(--accent-500) 360deg, var(--line) 0deg);
  padding: 2.5px; border-radius: 999px;
}
.story-ring.seen { background: var(--line); }

/* story progress bars */
.story-progress { height: 3px; border-radius: 999px; background: rgba(255,255,255,.35); overflow:hidden; }
.story-progress > span { display:block; height:100%; width:0; background:#fff; }
.story-progress.active > span { animation: storyfill 5s linear forwards; }
@keyframes storyfill { from { width:0 } to { width:100% } }

/* ---------- Misc utilities ---------- */
.line-clamp-1 { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

.fade-in { animation: fadeIn .4s ease both; }
@keyframes fadeIn { from { opacity:0; transform: translateY(6px) } to { opacity:1; transform:none } }

/* sheets (mobile menus / filter sheets) */
.sheet.sheet-open { display: block !important; }

/* dropdown menus */
.dropdown-menu { display: none; min-width: 10rem; }
.dropdown-menu.open { display: block; animation: fadeIn .15s ease both; }

/* hide htmx-indicator until loading */
.htmx-indicator { opacity:0; transition: opacity .2s ease; }
.htmx-request .htmx-indicator { opacity:1; }
.htmx-request.htmx-indicator { opacity:1; }

/* toast */
.toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color:#fff; padding: .75rem 1.1rem; border-radius: .85rem;
  box-shadow: var(--shadow-lg); font-size: .88rem; font-weight: 500; z-index: 200;
  opacity: 0; pointer-events: none; transition: all .3s ease; display:flex; align-items:center; gap:.5rem;
}
.toast.show { opacity:1; transform: translateX(-50%) translateY(0); }

/* mobile sticky cta offset */
.has-sticky-cta { padding-bottom: 5rem; }

/* category icon tile */
.cat-tile {
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  padding: 1.1rem .5rem; border-radius: 1rem;
  background:#fff; border:1px solid var(--line);
  transition: all .18s ease; text-align:center;
}
.cat-tile:hover { transform: translateY(-3px); border-color: var(--primary-200); box-shadow: var(--shadow); }
.cat-tile .cat-ico {
  width: 3.25rem; height:3.25rem; border-radius: .9rem;
  display:flex; align-items:center; justify-content:center; font-size:1.35rem;
}

/* ---------- Brand name "یه جا" with keseerah under «یه» ---------- */
/* «یه» is indigo (accent), «جا» is the brand yellow (primary).
   A subtle underline accent (kasrah-style mark) is drawn under «یه». */
.brand-ye {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: var(--accent-600);
}
.brand-ye::after {
  content: "";
  position: absolute;
  right: 0.12em;
  left: 0.12em;
  bottom: 0.08em;
  height: 0.18em;
  border-radius: 0.18em;
  opacity: .9;
}
.brand-ja { color: var(--primary-600); }
/* compact variant for small logos */
.brand-ye-sm::after { height: 0.14em; border-bottom-width: 0.14em; bottom: 0.06em; }