/* ============================================================
   Bazary 2026 — تصميم شامل (نسخة معدّلة)
   - خط IBM Plex Sans Arabic (أنظف من Cairo)
   - خلفية بيضاء نقية بلمحات هادئة
   - تباين محسّن (نص أبيض على غامق + ظلال على الصور)
   آخر تحديث: 2026-04-25
   ============================================================ */

/* ==================================================
   1. Brand Tokens
   ================================================== */
:root {
  /* Brand Red */
  --bz-red: #dc2626;
  --bz-red-light: #ef4444;
  --bz-red-deep: #991b1b;
  --bz-red-darkest: #7f1d1d;
  --bz-red-50: #fff5f5;
  --bz-red-100: #fee2e2;
  --bz-red-200: #fecaca;

  /* Neutrals — clean modern (تخلّينا عن الكريم الأصفر) */
  --bz-bg: #ffffff;
  --bz-bg-soft: #fafafa;
  --bz-bg-mute: #f4f4f5;
  --bz-surface: #ffffff;

  /* Text — تباين قوي على الأبيض */
  --bz-text: #18181b;
  --bz-text-soft: #3f3f46;
  --bz-text-mute: #71717a;
  --bz-text-faint: #a1a1aa;
  --bz-text-on-dark: #fafafa;

  /* Accent: ذهبي خفيف للـpremium */
  --bz-gold: #eab308;
  --bz-gold-soft: #fef9c3;
  --bz-gold-deep: #854d0e;

  /* Gradient signatures */
  --bz-grad-hero: linear-gradient(135deg, #ef4444 0%, #b91c1c 60%, #7f1d1d 100%);
  --bz-grad-soft: linear-gradient(135deg, #fff5f5 0%, #fee2e2 100%);
  --bz-grad-ink: linear-gradient(135deg, #27272a 0%, #09090b 100%);
  --bz-grad-bg:
    radial-gradient(ellipse 800px 600px at 50% -20%, rgba(239,68,68,0.05) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fafafa 100%);

  /* Shadows */
  --bz-sh-card:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 1px 3px rgba(24,24,27,0.04),
    0 4px 16px -4px rgba(24,24,27,0.06);
  --bz-sh-card-hover:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 4px 8px rgba(24,24,27,0.05),
    0 20px 40px -12px rgba(220,38,38,0.18),
    0 8px 20px -6px rgba(24,24,27,0.10);
  --bz-sh-floating:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 14px 30px -6px rgba(220,38,38,0.45),
    0 6px 12px rgba(220,38,38,0.25);
  --bz-sh-dark:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 10px 24px -6px rgba(9,9,11,0.45),
    0 4px 10px rgba(9,9,11,0.25);
  --bz-sh-button-red:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 6px 18px -4px rgba(220,38,38,0.42),
    0 2px 6px rgba(220,38,38,0.22);
  --bz-sh-button-red-active:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 2px 6px rgba(220,38,38,0.3);

  /* Radii — modern soft */
  --bz-r-xs: 10px;
  --bz-r-sm: 14px;
  --bz-r-md: 18px;
  --bz-r-lg: 24px;
  --bz-r-xl: 32px;
  --bz-r-pill: 9999px;

  /* Easings */
  --bz-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --bz-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bz-ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);

  /* Text-shadow للنصوص على الصور / الخلفيات الغامقة */
  --bz-text-shadow-light: 0 1px 3px rgba(0,0,0,0.55), 0 0 12px rgba(0,0,0,0.25);
  --bz-text-shadow-dark: 0 1px 2px rgba(255,255,255,0.5);
}

/* ==================================================
   2. Reset / Base
   ================================================== */
* { -webkit-tap-highlight-color: transparent; }
*::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, -apple-system, sans-serif !important;
}

body {
  background: var(--bz-grad-bg) !important;
  background-attachment: fixed;
  color: var(--bz-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
  line-height: 1.6;
  font-weight: 400;
}

#app-container, #main-view { background: transparent !important; }
#main-view { background: var(--bz-grad-bg) !important; }

h1, h2, h3, h4, h5 {
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
}

/* ==================================================
   3. Selection / Scrollbars
   ================================================== */
::selection { background: var(--bz-red); color: #fff; }
::-moz-selection { background: var(--bz-red); color: #fff; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #d4d4d8, #a1a1aa);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--bz-grad-hero);
}
* { scrollbar-width: thin; scrollbar-color: #d4d4d8 transparent; }

/* ==================================================
   4. Splash Screen — تباين مرتفع
   ================================================== */
#splash-screen {
  /* لا نلمس position — Tailwind class "fixed inset-0" يجب أن يبقى فعّالاً.
     نضيف overflow:hidden لاحتواء ::before — fixed يعطيه نفس الـpositioning context */
  background: var(--bz-grad-hero) !important;
  overflow: hidden;
}
#splash-screen::before {
  content: '';
  position: absolute;
  inset: -50%;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.18) 0%, transparent 35%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.12) 0%, transparent 40%);
  pointer-events: none;
  animation: bzSplashRotate 25s linear infinite;
}
@keyframes bzSplashRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
#splash-screen img {
  box-shadow:
    0 0 0 8px rgba(255,255,255,0.10),
    0 0 0 16px rgba(255,255,255,0.05),
    0 24px 60px rgba(0,0,0,0.35);
  animation: bzSplashLogo 2s var(--bz-ease-spring) infinite alternate;
  position: relative;
  z-index: 2;
}
@keyframes bzSplashLogo {
  0% { transform: scale(1) rotate(-1.5deg); }
  100% { transform: scale(1.04) rotate(1.5deg); }
}
#splash-screen h1, #splash-screen p {
  position: relative;
  z-index: 2;
  color: #fff !important;
  text-shadow: var(--bz-text-shadow-light);
}
#splash-screen h1 {
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  font-size: 44px !important;
}
#splash-screen p {
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.95;
}

/* ==================================================
   5. Header
   ================================================== */
#main-header {
  background: rgba(255,255,255,0.88) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border-bottom: 1px solid rgba(24,24,27,0.06) !important;
  padding-bottom: 0 !important;
  box-shadow: 0 4px 20px -10px rgba(24,24,27,0.06);
  padding-top: env(safe-area-inset-top, 0px) !important;
  padding-top: constant(safe-area-inset-top, 0px) !important;
}

/* ==================================================
   6. Bottom-Nav — كبسولة عائمة
   ================================================== */
#bottom-nav {
  margin: 0 12px 12px !important;
  padding: 8px 12px !important;
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(24,24,27,0.05) !important;
  border-radius: var(--bz-r-pill) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 12px 32px -8px rgba(24,24,27,0.16),
    0 4px 12px rgba(24,24,27,0.05) !important;
  flex-shrink: 0;
}
#bottom-nav button {
  border-radius: var(--bz-r-md) !important;
  transition: all 0.3s var(--bz-ease-spring) !important;
  padding: 8px 12px !important;
}
#bottom-nav button:active { transform: scale(0.92); }
#bottom-nav button:has(.text-red-600),
#bottom-nav button:has(.text-red-500) {
  background: var(--bz-grad-soft) !important;
}

/* ==================================================
   7. Cards Universal Polish
   ================================================== */
.bg-white {
  background: #ffffff !important;
}

.bg-white.rounded-xl,
.bg-white.rounded-2xl,
.bg-white.rounded-3xl {
  box-shadow: var(--bz-sh-card);
  border: 1px solid rgba(24,24,27,0.04);
  transition:
    transform 0.3s var(--bz-ease-out),
    box-shadow 0.3s var(--bz-ease-out),
    border-color 0.25s var(--bz-ease-out) !important;
}
.bg-white.rounded-2xl:hover,
.bg-white.rounded-3xl:hover {
  transform: translateY(-2px);
  box-shadow: var(--bz-sh-card-hover);
  border-color: rgba(220,38,38,0.08);
}

.shadow-sm { box-shadow: var(--bz-sh-card) !important; }
.shadow, .shadow-md { box-shadow: var(--bz-sh-card) !important; }
.shadow-lg, .shadow-xl { box-shadow: var(--bz-sh-card-hover) !important; }
.shadow-2xl {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 24px 48px -12px rgba(220,38,38,0.22),
    0 12px 24px -6px rgba(24,24,27,0.12) !important;
}

/* Light surfaces */
.bg-gray-50 {
  background: var(--bz-bg-soft) !important;
}
.bg-gray-100 {
  background: var(--bz-bg-mute) !important;
}

/* ==================================================
   8. Buttons — Primary CTA
   ================================================== */
button.bg-red-600,
button.bg-red-500,
a.bg-red-600,
a.bg-red-500,
.bg-red-600[onclick],
.bg-red-500[onclick] {
  background: var(--bz-grad-hero) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  box-shadow: var(--bz-sh-button-red) !important;
  transition: transform 0.2s var(--bz-ease-spring),
              box-shadow 0.25s var(--bz-ease-out),
              filter 0.2s !important;
  position: relative;
}
/* shimmer للأزرار المستطيلة فقط (نتجنّب الدوائر التي بها badge عائم) */
button.bg-red-600:not(.rounded-full):not(.aspect-square)::before,
button.bg-red-500:not(.rounded-full):not(.aspect-square)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 100%);
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
/* الأزرار المستطيلة الحمراء فقط تخفي الـoverflow (للحفاظ على شكل الـshimmer داخل الحدود) */
button.bg-red-600:not(.rounded-full):not(.aspect-square),
button.bg-red-500:not(.rounded-full):not(.aspect-square) {
  overflow: hidden;
}
button.bg-red-600:hover,
button.bg-red-500:hover,
a.bg-red-600:hover,
a.bg-red-500:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 14px 28px -4px rgba(220,38,38,0.5),
    0 5px 12px rgba(220,38,38,0.28) !important;
}
button.bg-red-600:active,
button.bg-red-500:active {
  transform: translateY(0) scale(0.97);
  box-shadow: var(--bz-sh-button-red-active) !important;
  transition: transform 0.08s ease-out, box-shadow 0.1s ease-out !important;
}

/* Tailwind gradient buttons */
.bg-gradient-to-r.from-red-500,
.bg-gradient-to-r.from-red-600,
.bg-gradient-to-br.from-red-500,
.bg-gradient-to-br.from-red-600 {
  box-shadow: var(--bz-sh-button-red) !important;
  position: relative;
  overflow: hidden;
}

/* Dark buttons */
button.bg-gray-900, .bg-gray-900[onclick] {
  background: var(--bz-grad-ink) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: var(--bz-sh-dark) !important;
  transition: transform 0.2s var(--bz-ease-spring), filter 0.2s !important;
}
button.bg-gray-900:hover, .bg-gray-900[onclick]:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
}
button.bg-gray-900:active { transform: translateY(0) scale(0.97); }

/* Soft red */
.bg-red-50 {
  background: var(--bz-grad-soft) !important;
}
.bg-red-50.text-red-600,
.bg-red-100.text-red-600,
.bg-red-100.text-red-700 {
  font-weight: 700;
}

/* Accent yellow/amber */
.bg-yellow-400, .bg-yellow-500,
.bg-amber-400, .bg-amber-500 {
  background: linear-gradient(135deg, #fbbf24 0%, #ca8a04 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 6px 16px -4px rgba(202,138,4,0.45) !important;
}

/* ==================================================
   9. Inputs
   ================================================== */
input, textarea, select {
  font-family: inherit !important;
  border-radius: var(--bz-r-md) !important;
  border: 1.5px solid rgba(24,24,27,0.08) !important;
  transition: all 0.25s var(--bz-ease-out) !important;
  font-weight: 500;
}
input:hover, textarea:hover, select:hover {
  border-color: rgba(24,24,27,0.16) !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--bz-red) !important;
  box-shadow:
    0 0 0 4px rgba(220,38,38,0.10),
    0 4px 16px -4px rgba(220,38,38,0.18) !important;
  background: #ffffff !important;
}
input::placeholder, textarea::placeholder {
  color: var(--bz-text-faint) !important;
  font-weight: 500 !important;
}
input[placeholder*="بحث"], input[placeholder*="ابحث"] {
  background: rgba(24,24,27,0.03) !important;
  border: 1.5px solid transparent !important;
  font-weight: 500;
}
input[placeholder*="بحث"]:focus, input[placeholder*="ابحث"]:focus {
  background: #fff !important;
}

/* ==================================================
   10. Floating Buttons — Cart فوق Chat (لا تتداخل)
   ================================================== */

/* لا نعدّل bottom-* بل نترك Tailwind classes الأصلية:
   floating-chat-btn  → bottom-24  (96px)
   floating-cart-btn  → bottom-44  (176px) — أعلى بـ80px فوق الـchat
   هذا يضمن استمرار الترتيب الأصلي ولا يحصل تكدس */

#floating-cart-btn,
#floating-chat-btn {
  /* السماح للـbadge بالخروج عن حدود الزر */
  overflow: visible !important;
}

#floating-cart-btn button {
  background: var(--bz-grad-hero) !important;
  box-shadow: var(--bz-sh-floating) !important;
  transition: transform 0.35s var(--bz-ease-spring) !important;
  position: relative;
  /* مهم: نسمح بظهور الـbadge المُطلّ من الزاوية */
  overflow: visible !important;
}
/* halo glow حول زر السلة */
#floating-cart-btn button::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: var(--bz-grad-hero);
  opacity: 0.25;
  filter: blur(18px);
  z-index: -1;
  animation: bzPulseGlow 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bzPulseGlow {
  0%, 100% { transform: scale(1); opacity: 0.22; }
  50% { transform: scale(1.12); opacity: 0.38; }
}
#floating-cart-btn button:hover { transform: scale(1.08) translateY(-2px) rotate(-3deg); }
#floating-cart-btn button:active { transform: scale(0.92); }

/* badge مرئي بوضوح فوق الزر (أحمر داكن دائري بحدود بيضاء) */
#floating-cart-badge {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
  color: #1a1a1a !important;
  border: 2.5px solid #ffffff !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 5px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.3) inset,
    0 4px 10px rgba(0,0,0,0.25),
    0 2px 4px rgba(217,119,6,0.4) !important;
  z-index: 10 !important;
  /* نسحب الـbadge قليلاً للأعلى/اليمين ليظهر بشكل ملحوظ */
  top: -6px !important;
  right: -6px !important;
  letter-spacing: 0;
  line-height: 1;
}

#floating-chat-btn button {
  background: var(--bz-grad-ink) !important;
  box-shadow:
    0 14px 30px -8px rgba(9,9,11,0.5),
    0 6px 14px rgba(9,9,11,0.3) !important;
  transition: transform 0.35s var(--bz-ease-spring) !important;
  position: relative;
  overflow: visible !important;
}
#floating-chat-btn button:hover { transform: scale(1.1) rotate(-6deg); }
#floating-chat-btn button:active { transform: scale(0.92); }

/* ==================================================
   11. Cart Drawer
   ================================================== */
#cart-drawer {
  background: linear-gradient(180deg, #fff 0%, #fafafa 100%) !important;
  border-left: 1px solid rgba(220,38,38,0.04);
}
#cart-drawer.open {
  box-shadow: 12px 0 60px -8px rgba(24,24,27,0.22) !important;
}

/* ==================================================
   12. Modal Bottom-Sheet
   ================================================== */
#overlay {
  background: rgba(9,9,11,0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.modal-custom {
  border-radius: 32px 32px 0 0 !important;
  background: #ffffff !important;
  box-shadow:
    0 -28px 70px rgba(220,38,38,0.10),
    0 -8px 24px rgba(24,24,27,0.12) !important;
  padding: 16px 20px 24px !important;
}
.modal-custom::before {
  content: '';
  display: block;
  width: 44px;
  height: 5px;
  background: linear-gradient(90deg, transparent, rgba(24,24,27,0.18), transparent);
  border-radius: 5px;
  margin: 6px auto 18px;
}

/* ==================================================
   13. Tap feedback
   ================================================== */
[onclick]:not(button):not(input):not(label) {
  cursor: pointer;
  transition: transform 0.18s var(--bz-ease-out);
}
[onclick]:not(button):not(input):not(label):active {
  transform: scale(0.97);
}

/* ==================================================
   14. Image hover zoom
   ================================================== */
.bg-white img.object-cover {
  transition: transform 0.6s var(--bz-ease-out);
}
.bg-white:hover img.object-cover { transform: scale(1.05); }

/* ==================================================
   15. Badges
   ================================================== */
[class*="rounded-full"][class*="text-red-"] {
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}
.bg-red-50.text-red-600,
.bg-red-100.text-red-600,
.bg-red-100.text-red-700,
.bg-red-50.text-red-700 {
  border: 1px solid rgba(220,38,38,0.10);
  background: linear-gradient(135deg, #fff5f5, #fee2e2) !important;
}
.bg-green-50.text-green-600,
.bg-green-100.text-green-700 {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
  border: 1px solid rgba(22,163,74,0.12);
}

/* ==================================================
   16. Star Ratings
   ================================================== */
[data-lucide="star"].fill-yellow-400,
[data-lucide="star"][class*="text-yellow"] {
  filter: drop-shadow(0 2px 4px rgba(234,179,8,0.45));
}

/* ==================================================
   17. Skeleton loader
   ================================================== */
.animate-pulse {
  animation: bzPulse 1.6s ease-in-out infinite !important;
}
.animate-pulse > .bg-gray-200,
.animate-pulse > .bg-gray-100 {
  background: linear-gradient(90deg, #e4e4e7 0%, #f4f4f5 50%, #e4e4e7 100%) !important;
  background-size: 200% 100%;
  animation: bzSkeletonSlide 1.6s linear infinite;
}
@keyframes bzPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@keyframes bzSkeletonSlide {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==================================================
   18. AI Chat popup
   ================================================== */
#ai-chat-popup header {
  background: var(--bz-grad-hero) !important;
  box-shadow: 0 8px 24px -4px rgba(220,38,38,0.4);
}

/* ==================================================
   19. Disabled
   ================================================== */
button:disabled,
button[disabled] {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.6);
  transform: none !important;
}

/* ==================================================
   20. Selected items
   ================================================== */
.payment-method-card.selected,
.addr-label-btn.border-red-500 {
  background: var(--bz-grad-soft) !important;
  border-color: var(--bz-red) !important;
  box-shadow: 0 4px 12px -2px rgba(220,38,38,0.18);
}

/* ==================================================
   21. Section labels
   ================================================== */
label.text-xs.font-bold,
label.text-sm.font-bold {
  display: block;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  color: var(--bz-text-mute) !important;
  margin-bottom: 8px;
}

/* ==================================================
   22. Tabs
   ================================================== */
.border-b-2.border-red-500,
.border-b-2.border-red-600 {
  border-bottom-color: var(--bz-red) !important;
  border-bottom-width: 3px !important;
}

/* ==================================================
   23. Notification dots — pulse
   ================================================== */
span.bg-red-500.rounded-full,
span.bg-red-600.rounded-full {
  box-shadow: 0 0 0 0 rgba(239,68,68,0.5);
  animation: bzDotPulse 2s ease-in-out infinite;
}
@keyframes bzDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }
  50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}

/* ==================================================
   24. Map pin
   ================================================== */
.map-pin {
  filter: drop-shadow(0 8px 14px rgba(220,38,38,0.5));
  animation: bzPinDrop 0.6s var(--bz-ease-bounce);
}
@keyframes bzPinDrop {
  from { transform: translate(-50%, -200%); opacity: 0; }
  to { transform: translate(-50%, -100%); opacity: 1; }
}

/* ==================================================
   25. App fade-in
   ================================================== */
#app-container:not(.hidden) {
  animation: bzAppEnter 0.5s var(--bz-ease-out);
}
@keyframes bzAppEnter {
  from { opacity: 0; transform: scale(0.99) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.animate-fadeIn { animation: bzFadeIn 0.4s var(--bz-ease-out) !important; }
@keyframes bzFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==================================================
   26. Empty state icons
   ================================================== */
.text-gray-400 i[data-lucide],
.text-gray-300 i[data-lucide] {
  filter: drop-shadow(0 6px 14px rgba(161,161,170,0.3));
}

/* ==================================================
   27. Borders refined
   ================================================== */
[class*="border-gray-100"], [class*="border-gray-200"] {
  border-color: rgba(24,24,27,0.06) !important;
}
[class*="divide-gray-100"] > * + * {
  border-color: rgba(24,24,27,0.05) !important;
}

/* ==================================================
   28. Sticky tabs (store/orders)
   ================================================== */
.sticky.top-0 {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(24,24,27,0.05);
}

/* ==================================================
   29. RTL refinements
   ================================================== */
[dir="rtl"] body { direction: rtl; }
[dir="rtl"] #cart-drawer { left: 0 !important; right: auto !important; }

/* ==================================================
   30. Reduced motion
   ================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  #splash-screen img, #floating-cart-btn button::before { animation: none !important; }
}

/* ==================================================
   31. Print
   ================================================== */
@media print {
  #bottom-nav, #floating-cart-btn, #floating-chat-btn, #main-header { display: none !important; }
  body { background: #fff !important; }
}

/* ==================================================
   32. Tabs pill (store/orders)
   ================================================== */
button[onclick*="storeTab"],
button[onclick*="ordersTab"] {
  border-radius: var(--bz-r-pill) !important;
  font-weight: 700;
  transition: all 0.25s var(--bz-ease-out) !important;
}

/* ==================================================
   33. Headlines
   ================================================== */
h2.text-2xl, h1.text-2xl { font-size: 24px !important; letter-spacing: -0.025em !important; }
h2.text-3xl, h1.text-3xl { font-size: 30px !important; letter-spacing: -0.03em !important; }

/* ==================================================
   34. Category chips
   ================================================== */
button[onclick*="setCategory"],
button[onclick*="filterCategory"] {
  border-radius: var(--bz-r-pill) !important;
  padding: 8px 16px !important;
  font-weight: 600;
  transition: all 0.25s var(--bz-ease-spring) !important;
}
button[onclick*="setCategory"]:active,
button[onclick*="filterCategory"]:active { transform: scale(0.92); }

/* ==================================================
   35. Big CTA buttons
   ================================================== */
button.w-full.bg-red-600,
button.w-full.bg-red-500,
.w-full.bg-gradient-to-r.from-red-500,
.w-full.bg-gradient-to-r.from-red-600 {
  padding: 14px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: var(--bz-r-md) !important;
  letter-spacing: -0.01em;
}

/* ==================================================
   36. ★ TEXT READABILITY FIXES ★
   حماية النصوص الفاتحة على خلفيات غامقة/صور
   ================================================== */

/* النصوص الفاتحة فوق صور أو خلفيات غامقة → text-shadow */
.absolute.text-white,
.absolute .text-white,
.text-white.absolute,
[class*="absolute"] .text-white {
  text-shadow: var(--bz-text-shadow-light);
}

/* النص الأبيض على gradient hero الأحمر — يبقى ناصع مع shadow خفيف */
.bg-gradient-to-r.from-red-500 .text-white,
.bg-gradient-to-r.from-red-600 .text-white,
.bg-gradient-to-br.from-red-500 .text-white,
.bg-gradient-to-br.from-red-600 .text-white,
button.bg-red-600 .text-white,
button.bg-red-500 .text-white {
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

/* النصوص الـ"text-white/N" مع opacity — تأكد من رؤيتها */
.text-white {
  color: #ffffff !important;
}
.text-white\/80, [class*="text-white/8"] {
  color: rgba(255,255,255,0.92) !important;
}
.text-white\/70, [class*="text-white/7"] {
  color: rgba(255,255,255,0.85) !important;
}
.text-white\/60, [class*="text-white/6"] {
  color: rgba(255,255,255,0.78) !important;
}
.text-white\/50 {
  color: rgba(255,255,255,0.72) !important;
}

/* النصوص فوق splash يجب أن تبقى بيضاء بظل */
#splash-screen *, #splash-screen .text-white { color: #ffffff !important; }

/* AI Chat header — نصوصه دائماً بيضاء على الأحمر */
#ai-chat-popup header * { color: #ffffff !important; }
#ai-chat-popup header .text-xs,
#ai-chat-popup header .text-sm,
#ai-chat-popup header .opacity-80 {
  color: rgba(255,255,255,0.92) !important;
}

/* ==================================================
   37. النصوص فوق صور المنتجات (overlays, ribbons, badges)
   ================================================== */

/* ribbon "جديد"، "مميز"، إلخ على بطاقات بحاوي صور */
.absolute.top-2 .text-white,
.absolute.top-3 .text-white,
.absolute.bottom-2 .text-white,
.absolute.bottom-3 .text-white {
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* gradient overlay على الصور — يساعد قراءة النص */
.relative > img.object-cover + .absolute.bottom-0,
.relative > img.object-cover + .absolute.inset-x-0 {
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.45) 70%, rgba(0,0,0,0.65) 100%);
}

/* ==================================================
   38. لو فيه نص أسود (text-gray-900) فوق صورة — أضف خلفية شبه شفافة
   ================================================== */
.absolute.text-gray-900,
.absolute .text-gray-900,
.absolute.text-black,
.absolute .text-black {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
  padding: 2px 8px;
  border-radius: 6px;
  text-shadow: none;
}

/* ==================================================
   39. تصحيح عام: النصوص داخل الأزرار الحمراء/الداكنة → بيضاء دائماً
   ================================================== */
button.bg-red-600 *,
button.bg-red-500 *,
a.bg-red-600 *,
a.bg-red-500 *,
.bg-gradient-to-r.from-red-500 *,
.bg-gradient-to-r.from-red-600 *,
.bg-gradient-to-br.from-red-500 *,
.bg-gradient-to-br.from-red-600 *,
button.bg-gray-900 *,
.bg-gray-900[onclick] * {
  color: inherit;
}
button.bg-red-600,
button.bg-red-500,
a.bg-red-600,
a.bg-red-500,
button.bg-gray-900 { color: #ffffff !important; }

/* ==================================================
   ★ FEATURED STORES (الرئيسية — متاجر مميزة) ★
   ================================================== */
.bz-featured-section {
  margin: 4px 0 24px;
  padding: 0;
}
.bz-featured-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 18px 14px;
}
.bz-featured-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--bz-text);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.02em;
  margin: 0;
}
.bz-featured-spark {
  display: inline-block;
  font-size: 18px;
  filter: drop-shadow(0 2px 6px rgba(234,179,8,0.4));
  animation: bzSparkSpin 3s ease-in-out infinite alternate;
}
@keyframes bzSparkSpin {
  0% { transform: rotate(-12deg) scale(1); }
  100% { transform: rotate(12deg) scale(1.1); }
}
.bz-featured-sub {
  font-size: 11px;
  color: var(--bz-text-mute);
  margin: 4px 0 0;
  font-weight: 500;
}

.bz-featured-scroll {
  display: flex;
  gap: 14px;
  padding-block: 8px 22px;
  padding-inline: 18px;
  scroll-padding-inline: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.bz-featured-scroll > * { scroll-snap-align: start; }
/* Phantom end-spacer — many browsers collapse the trailing padding of a
   horizontal flex scroll container; this guarantees a real gap on the
   visual-end side (left in RTL, right in LTR) when scrolled to the end. */
.bz-featured-scroll::after {
  content: '';
  flex: 0 0 6px;
  align-self: stretch;
}

.bz-featured-card {
  position: relative;
  flex: 0 0 auto;
  width: 158px;
  background: #ffffff !important;
  border: 1px solid rgba(24,24,27,0.05);
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 1px 3px rgba(24,24,27,0.04),
    0 8px 22px -6px rgba(24,24,27,0.10);
  transition:
    transform 0.35s var(--bz-ease-out),
    box-shadow 0.35s var(--bz-ease-out),
    border-color 0.3s ease;
  animation: bzCardEnter 0.5s var(--bz-ease-out) backwards;
}
@keyframes bzCardEnter {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.bz-featured-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 4px 8px rgba(220,38,38,0.06),
    0 22px 40px -10px rgba(220,38,38,0.25),
    0 12px 22px -8px rgba(24,24,27,0.10);
  border-color: rgba(220,38,38,0.12);
}
.bz-featured-card:active {
  transform: translateY(-1px) scale(0.99);
  transition: transform 0.1s ease-out;
}

/* Cover (top gradient with subtle pattern) */
.bz-featured-cover {
  position: relative;
  height: 64px;
  background:
    radial-gradient(circle at 15% 30%, rgba(255,255,255,0.18) 0%, transparent 35%),
    radial-gradient(circle at 85% 70%, rgba(255,255,255,0.12) 0%, transparent 40%),
    var(--bz-grad-hero);
  overflow: hidden;
}
.bz-featured-cover::before {
  /* shimmer line */
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  animation: bzShimmer 3.5s ease-in-out infinite;
}
@keyframes bzShimmer {
  0%, 60% { left: -100%; }
  100% { left: 200%; }
}

/* Featured pill on cover */
.bz-featured-pill {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  color: #fff !important;
  font-size: 9.5px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 4px 12px -2px rgba(217,119,6,0.45);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Avatar wrap (overlapping cover) */
.bz-featured-avatar-wrap {
  position: relative;
  margin: -38px auto 0;
  width: 76px;
  height: 76px;
  z-index: 2;
}
.bz-featured-avatar-ring {
  /* gradient ring around avatar */
  width: 76px;
  height: 76px;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(
    from 0deg,
    #ef4444, #fbbf24, #ef4444, #b91c1c, #ef4444
  );
  box-shadow:
    0 6px 16px -4px rgba(220,38,38,0.4),
    0 2px 6px rgba(220,38,38,0.2);
  animation: bzRingSpin 6s linear infinite;
}
@keyframes bzRingSpin {
  to { transform: rotate(360deg); }
}
.bz-featured-card:hover .bz-featured-avatar-ring {
  animation-duration: 2s;
}
.bz-featured-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #f4f4f5;
  border: 3px solid #ffffff;
  display: block;
  /* counter-rotate so the image doesn't spin */
  animation: bzRingCounter 6s linear infinite;
}
@keyframes bzRingCounter {
  to { transform: rotate(-360deg); }
}
.bz-featured-card:hover .bz-featured-avatar {
  animation-duration: 2s;
}

/* Status dot */
.bz-featured-status {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bz-st, #16a34a);
  border: 2.5px solid #ffffff;
  z-index: 3;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.bz-featured-status::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--bz-st, #16a34a);
  opacity: 0.4;
  animation: bzStatusPing 2s ease-in-out infinite;
}
@keyframes bzStatusPing {
  0%, 100% { transform: scale(1); opacity: 0.35; }
  50% { transform: scale(1.4); opacity: 0; }
}

/* Body (name + handle + stats) */
.bz-featured-body {
  padding: 12px 12px 14px;
  text-align: center;
}
.bz-featured-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--bz-text) !important;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 4px 0 2px;
}
.bz-featured-handle {
  font-size: 10px;
  color: var(--bz-text-faint) !important;
  font-weight: 500;
  margin-bottom: 8px;
}

/* Stats row */
.bz-featured-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 10.5px;
  color: var(--bz-text-soft);
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(24,24,27,0.025);
  border-radius: 10px;
  font-weight: 700;
}
.bz-featured-stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.bz-featured-stat-rating {
  color: #d97706 !important;
}
.bz-featured-stat-rating i[data-lucide="star"] {
  fill: #fbbf24;
  stroke: #d97706;
  filter: drop-shadow(0 1px 2px rgba(217,119,6,0.4));
}
.bz-featured-divider {
  width: 1px;
  height: 12px;
  background: rgba(24,24,27,0.12);
}

/* Mobile fine-tune */
@media (max-width: 380px) {
  .bz-featured-card { width: 150px; }
}

/* ==================================================
   ★ STORE PAGE — تصميم جديد كلياً ★
   ================================================== */

/* Hero Cover */
.bz-store-hero {
  position: relative;
  height: 200px;
  overflow: hidden;
  margin-bottom: -36px;
  z-index: 0;
}
.bz-store-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 300px at 30% 20%, rgba(251,191,36,0.18) 0%, transparent 50%),
    radial-gradient(ellipse 500px 400px at 80% 80%, rgba(255,255,255,0.10) 0%, transparent 50%),
    var(--bz-grad-hero);
}
.bz-store-hero-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  background-position: 0 0, 11px 11px;
  opacity: 0.5;
  animation: bzPatternDrift 30s linear infinite;
}
@keyframes bzPatternDrift {
  from { background-position: 0 0; }
  to { background-position: 44px 44px; }
}

/* Hero icon buttons (back, share) */
.bz-store-icon-btn {
  position: absolute;
  top: 18px;
  width: 42px;
  height: 42px;
  background: rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 50%;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s var(--bz-ease-spring);
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.bz-store-icon-btn:hover {
  background: rgba(255,255,255,0.3) !important;
  transform: scale(1.06);
}
.bz-store-icon-btn:active { transform: scale(0.92); }
.bz-store-back { right: 16px; }
.bz-store-hero-actions { position: absolute; top: 18px; left: 16px; display: flex; gap: 8px; z-index: 5; }
.bz-store-hero-actions .bz-store-icon-btn { position: static; }

/* Featured pill on cover */
.bz-store-featured-pill {
  position: absolute;
  bottom: 50px;
  right: 16px;
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  color: #fff !important;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: -0.01em;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 6px 14px -2px rgba(217,119,6,0.5);
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  z-index: 4;
}

/* Hero Card overlapping cover */
.bz-store-card-wrap {
  position: relative;
  margin: 0 16px 16px;
  z-index: 2;
}
.bz-store-card {
  background: #ffffff !important;
  border-radius: 28px;
  padding: 64px 20px 18px;
  text-align: center;
  border: 1px solid rgba(24,24,27,0.04);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 4px 12px -2px rgba(220,38,38,0.08),
    0 16px 40px -8px rgba(24,24,27,0.10);
  position: relative;
  overflow: visible;
}

/* Avatar */
.bz-store-avatar-wrap {
  position: absolute;
  top: -52px;
  left: 50%;
  transform: translateX(-50%);
  width: 104px;
  height: 104px;
}
.bz-store-avatar-ring {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  padding: 4px;
  background: conic-gradient(from 0deg, #ef4444, #fbbf24, #ef4444, #b91c1c, #ef4444);
  box-shadow:
    0 8px 24px -4px rgba(220,38,38,0.45),
    0 4px 10px rgba(220,38,38,0.25);
  animation: bzRingSpin 8s linear infinite;
}
.bz-store-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  background: #f4f4f5;
  display: block;
  animation: bzRingCounter 8s linear infinite;
}

/* Status dot */
.bz-store-status-dot {
  position: absolute;
  bottom: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bz-st);
  border: 4px solid #fff;
  box-shadow: 0 2px 8px var(--bz-st-glow), 0 0 0 1px rgba(0,0,0,0.05);
  z-index: 3;
}
.bz-store-status-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--bz-st);
  opacity: 0.4;
  animation: bzStatusPing 2s ease-in-out infinite;
}

/* Name + verified */
.bz-store-name {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--bz-text) !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.bz-store-verified {
  width: 20px;
  height: 20px;
  color: #2563eb;
  fill: #dbeafe;
  filter: drop-shadow(0 2px 4px rgba(37,99,235,0.3));
}

/* Handle */
.bz-store-handle {
  display: inline-block;
  font-size: 12px;
  color: var(--bz-text-mute);
  background: var(--bz-bg-mute);
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
  margin-bottom: 8px;
}

/* Status line text */
.bz-store-status-line {
  font-size: 11px;
  font-weight: 700;
  color: var(--bz-text-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.bz-store-status-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bz-st);
  box-shadow: 0 0 0 0 var(--bz-st);
  animation: bzDotPulse 2s ease-in-out infinite;
}

/* Bio */
.bz-store-bio {
  font-size: 13px !important;
  color: var(--bz-text-soft) !important;
  line-height: 1.6;
  max-width: 88%;
  margin: 8px auto 16px !important;
  font-weight: 500;
}

/* Stats row (3 mini cards) */
.bz-store-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px 4px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(244,244,245,0.6) 100%);
  border-radius: 18px;
}
.bz-store-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px;
}
.bz-store-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.bz-store-stat-icon i {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}
.bz-stat-rating {
  background: linear-gradient(135deg, #fef9c3 0%, #fef3c7 100%);
  color: #d97706;
  box-shadow: 0 4px 10px -2px rgba(217,119,6,0.25);
}
.bz-stat-rating i { fill: #fbbf24; stroke: #d97706; }
.bz-stat-followers {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1d4ed8;
  box-shadow: 0 4px 10px -2px rgba(29,78,216,0.2);
}
.bz-stat-products {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  color: #b91c1c;
  box-shadow: 0 4px 10px -2px rgba(185,28,28,0.2);
}
.bz-store-stat-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--bz-text) !important;
  letter-spacing: -0.02em;
  line-height: 1;
}
.bz-store-stat-lbl {
  font-size: 10px;
  color: var(--bz-text-mute) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Action buttons row */
.bz-store-actions {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.bz-store-btn-primary {
  flex: 1 1 auto;
  background: var(--bz-grad-hero) !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 13px 16px !important;
  border-radius: 14px !important;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  box-shadow: var(--bz-sh-button-red) !important;
  transition: transform 0.2s var(--bz-ease-spring), box-shadow 0.25s, filter 0.2s !important;
}
.bz-store-btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06); }
.bz-store-btn-primary:active { transform: translateY(0) scale(0.97); }

.bz-store-btn-secondary {
  flex: 1 1 auto;
  background: var(--bz-bg-mute) !important;
  color: var(--bz-text) !important;
  font-weight: 700 !important;
  padding: 13px 16px !important;
  border-radius: 14px !important;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid rgba(24,24,27,0.06) !important;
  cursor: pointer;
  transition: all 0.2s var(--bz-ease-out);
}
.bz-store-btn-secondary:hover {
  background: rgba(24,24,27,0.06) !important;
  border-color: rgba(24,24,27,0.12) !important;
}

.bz-store-btn-message {
  width: 50px;
  flex: 0 0 auto;
  background: #fff !important;
  color: var(--bz-red) !important;
  border: 1.5px solid var(--bz-red-100) !important;
  border-radius: 14px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s var(--bz-ease-spring);
  padding: 0 !important;
}
.bz-store-btn-message:hover {
  background: var(--bz-red-50) !important;
  border-color: var(--bz-red) !important;
  transform: translateY(-2px);
}
.bz-store-btn-message:active { transform: scale(0.95); }
.bz-store-btn-message span { display: none; }

/* Tabs */
.bz-store-tabs {
  display: flex;
  gap: 6px;
  margin: 0 16px 18px;
  padding: 4px;
  background: #fff;
  border: 1px solid rgba(24,24,27,0.05);
  border-radius: 999px;
  box-shadow: var(--bz-sh-card);
}
.bz-store-tab {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  font-size: 12.5px;
  font-weight: 700;
  background: transparent !important;
  color: var(--bz-text-mute) !important;
  border: none !important;
  cursor: pointer;
  transition: all 0.25s var(--bz-ease-out) !important;
}
.bz-store-tab:hover { color: var(--bz-text) !important; background: var(--bz-bg-mute) !important; }
.bz-store-tab.active {
  background: var(--bz-grad-hero) !important;
  color: #fff !important;
  box-shadow: var(--bz-sh-button-red) !important;
}
.bz-store-tab.active i,
.bz-store-tab.active .bz-store-tab-count { color: #fff !important; }
.bz-store-tab-count {
  background: rgba(0,0,0,0.08);
  color: inherit !important;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  min-width: 20px;
  text-align: center;
}
.bz-store-tab.active .bz-store-tab-count {
  background: rgba(255,255,255,0.25);
}

/* Mobile fine-tune */
@media (max-width: 380px) {
  .bz-store-hero { height: 180px; }
  .bz-store-card { padding: 60px 16px 16px; }
  .bz-store-name { font-size: 20px !important; }
}

/* ==================================================
   ★ ACCOUNT PAGE — تصميم جديد ★
   ================================================== */

/* Hero Cover */
.bz-acc-hero {
  position: relative;
  height: 150px;
  overflow: hidden;
  margin-bottom: -52px;
  z-index: 0;
}
.bz-acc-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 250px at 30% 20%, rgba(251,191,36,0.18) 0%, transparent 50%),
    radial-gradient(ellipse 500px 350px at 80% 80%, rgba(255,255,255,0.10) 0%, transparent 50%),
    var(--bz-grad-hero);
}
.bz-acc-hero-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: 0.5;
  animation: bzPatternDrift 30s linear infinite;
}
.bz-acc-hero-title {
  position: relative;
  z-index: 2;
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  padding: 24px 24px 0;
  text-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Profile Card */
.bz-acc-card-wrap {
  position: relative;
  margin: 0 16px 16px;
  z-index: 2;
}
.bz-acc-card {
  background: #ffffff !important;
  border-radius: 28px;
  padding: 60px 20px 18px;
  text-align: center;
  border: 1px solid rgba(24,24,27,0.04);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 4px 12px -2px rgba(220,38,38,0.08),
    0 16px 40px -8px rgba(24,24,27,0.10);
  position: relative;
  overflow: visible;
}

/* Avatar */
.bz-acc-avatar-wrap {
  position: absolute;
  top: -52px;
  left: 50%;
  transform: translateX(-50%);
  width: 104px;
  height: 104px;
}
.bz-acc-avatar-ring {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  padding: 4px;
  background: conic-gradient(from 0deg, #ef4444, #fbbf24, #ef4444, #b91c1c, #ef4444);
  box-shadow:
    0 8px 24px -4px rgba(220,38,38,0.45),
    0 4px 10px rgba(220,38,38,0.25);
  animation: bzRingSpin 8s linear infinite;
}
.bz-acc-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  background: #f4f4f5;
  display: block;
  animation: bzRingCounter 8s linear infinite;
}
.bz-acc-edit-avatar {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 32px;
  height: 32px;
  background: var(--bz-grad-hero) !important;
  color: #fff !important;
  border: 3px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(220,38,38,0.4);
  transition: transform 0.2s var(--bz-ease-spring);
  z-index: 4;
}
.bz-acc-edit-avatar i,
.bz-acc-edit-avatar svg { width: 14px !important; height: 14px !important; stroke-width: 2.4; flex-shrink: 0; }
.bz-acc-edit-avatar:hover { transform: scale(1.1); }
.bz-acc-edit-avatar:active { transform: scale(0.92); }

/* Name */
.bz-acc-name {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--bz-text) !important;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.bz-acc-verified {
  width: 18px;
  height: 18px;
  color: #2563eb;
  fill: #dbeafe;
  filter: drop-shadow(0 2px 4px rgba(37,99,235,0.3));
}

/* Handle */
.bz-acc-handle {
  display: inline-block;
  font-size: 11px;
  color: var(--bz-text-mute) !important;
  background: var(--bz-bg-mute);
  padding: 3px 12px;
  border-radius: 999px;
  font-weight: 600;
  margin-bottom: 14px;
  letter-spacing: 0;
}

/* Contact rows */
.bz-acc-contacts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.bz-acc-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bz-text-soft) !important;
  text-align: right;
}
.bz-acc-contact i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke-width: 2.2;
}
.bz-acc-contact span {
  flex: 1 1 auto;
  text-align: right;
  font-weight: 700;
  color: var(--bz-text) !important;
}
.bz-contact-phone {
  background: linear-gradient(135deg, #fff5f5, #fee2e2);
  border: 1px solid rgba(220,38,38,0.10);
}
.bz-contact-phone i { color: var(--bz-red); }
.bz-contact-email {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 1px solid rgba(37,99,235,0.10);
}
.bz-contact-email i { color: #2563eb; }
.bz-acc-verified-icon {
  width: 16px;
  height: 16px;
  color: #16a34a;
  fill: #dcfce7;
}
.bz-acc-verify-btn {
  background: var(--bz-red) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  border: none;
  cursor: pointer;
}

/* Section wrapper */
.bz-acc-section {
  padding: 0 16px;
  margin-bottom: 16px;
}
.bz-acc-section-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--bz-text-soft) !important;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px 10px;
  letter-spacing: -0.01em;
}
.bz-acc-section-title i {
  width: 16px;
  height: 16px;
  color: var(--bz-red);
}

/* Subscription Card (Premium) */
.bz-acc-sub-card {
  position: relative;
  background: var(--bz-grad-ink) !important;
  color: #fff !important;
  padding: 18px 18px 18px 60px;
  border-radius: 22px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(251,191,36,0.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 14px 32px -8px rgba(9,9,11,0.5),
    0 6px 14px rgba(9,9,11,0.3);
  transition: transform 0.3s var(--bz-ease-out), box-shadow 0.3s var(--bz-ease-out);
}
.bz-acc-sub-card.is-cta {
  background: linear-gradient(135deg, #1f1f23 0%, #0a0a0a 50%, #2a1f0a 100%) !important;
}
.bz-acc-sub-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 18px 40px -8px rgba(220,38,38,0.4),
    0 8px 18px rgba(9,9,11,0.4);
}
.bz-acc-sub-card:active { transform: translateY(0) scale(0.98); }
.bz-acc-sub-glow {
  position: absolute;
  top: -40%;
  right: -10%;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(251,191,36,0.25) 0%, transparent 60%);
  filter: blur(20px);
  pointer-events: none;
}
.bz-acc-sub-shine {
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
  pointer-events: none;
  animation: bzShimmer 4s ease-in-out infinite;
}
.bz-acc-sub-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 8px 18px -4px rgba(217,119,6,0.5);
  flex-shrink: 0;
  z-index: 2;
}
.bz-acc-sub-icon i { width: 24px; height: 24px; color: #fff; fill: #fff; }
.bz-acc-sub-body { flex: 1; z-index: 2; }
.bz-acc-sub-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 4px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.01em;
}
.bz-acc-sub-tag {
  font-size: 9px;
  background: linear-gradient(135deg, #fbbf24, #d97706);
  color: #1a1a1a !important;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0.05em;
}
.bz-acc-sub-sub {
  font-size: 11.5px !important;
  color: rgba(255,255,255,0.78) !important;
  margin: 0 !important;
  font-weight: 500;
}
.bz-acc-sub-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.bz-acc-sub-arrow i { width: 18px; height: 18px; color: #fff; }

/* Store status row */
.bz-acc-status-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: #fff;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid rgba(24,24,27,0.05);
  box-shadow: var(--bz-sh-card);
}
.bz-acc-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 8px !important;
  border-radius: 12px !important;
  font-size: 12.5px;
  font-weight: 700;
  background: transparent !important;
  border: 1.5px solid transparent !important;
  color: var(--bz-text-mute) !important;
  cursor: pointer;
  transition: all 0.25s var(--bz-ease-out);
}
.bz-acc-status .bz-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d4d4d8;
}
.bz-acc-status:hover { background: var(--bz-bg-mute) !important; }
.bz-acc-status.active {
  background: #fff !important;
  box-shadow: 0 4px 10px -2px rgba(24,24,27,0.10);
}
.bz-status-open.active {
  border-color: rgba(22,163,74,0.2) !important;
  color: #16a34a !important;
}
.bz-status-open.active .bz-status-dot {
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22,163,74,0.5);
  animation: bzDotPulse 2s ease-in-out infinite;
}
.bz-status-busy.active {
  border-color: rgba(245,158,11,0.2) !important;
  color: #d97706 !important;
}
.bz-status-busy.active .bz-status-dot { background: #f59e0b; }
.bz-status-closed.active {
  border-color: rgba(220,38,38,0.2) !important;
  color: var(--bz-red) !important;
}
.bz-status-closed.active .bz-status-dot { background: var(--bz-red); }

/* Merchant grid */
.bz-acc-merchant-wrap {
  position: relative;
}
.bz-acc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.bz-acc-grid.is-locked {
  opacity: 0.35;
  filter: grayscale(0.6) blur(0.5px);
  pointer-events: none;
}
.bz-acc-tile {
  background: #fff !important;
  border-radius: 18px;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border: 1px solid rgba(24,24,27,0.05);
  box-shadow: var(--bz-sh-card);
  transition: all 0.3s var(--bz-ease-out);
  text-align: center;
}
.bz-acc-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--bz-sh-card-hover);
}
.bz-acc-tile:active { transform: translateY(0) scale(0.96); }
.bz-acc-tile span {
  font-size: 11px;
  font-weight: 700;
  color: var(--bz-text) !important;
  letter-spacing: -0.01em;
}
.bz-tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.bz-tile-icon i { width: 20px; height: 20px; stroke-width: 2.2; }
.bz-tile-add .bz-tile-icon {
  background: var(--bz-grad-hero);
  color: #fff;
  box-shadow: 0 6px 14px -4px rgba(220,38,38,0.45);
}
.bz-tile-ads .bz-tile-icon {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #1d4ed8;
  box-shadow: 0 4px 10px -2px rgba(29,78,216,0.2);
}
.bz-tile-sales .bz-tile-icon {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  color: #15803d;
  box-shadow: 0 4px 10px -2px rgba(21,128,61,0.2);
}
.bz-tile-design .bz-tile-icon {
  background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
  color: #7c3aed;
  box-shadow: 0 4px 10px -2px rgba(124,58,237,0.2);
}
.bz-tile-loc .bz-tile-icon {
  background: linear-gradient(135deg, #ffedd5, #fed7aa);
  color: #c2410c;
  box-shadow: 0 4px 10px -2px rgba(194,65,12,0.2);
}
.bz-tile-bank .bz-tile-icon {
  background: linear-gradient(135deg, #f4f4f5, #e4e4e7);
  color: #3f3f46;
  box-shadow: 0 4px 10px -2px rgba(63,63,70,0.2);
}

/* Lock card overlay */
.bz-acc-merchant-lock {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(2px);
  border-radius: 18px;
}
.bz-acc-lock-card {
  background: #fff;
  padding: 18px 16px;
  border-radius: 20px;
  border: 1px solid rgba(220,38,38,0.10);
  box-shadow: 0 16px 36px -8px rgba(220,38,38,0.25), 0 6px 16px rgba(24,24,27,0.1);
  text-align: center;
  max-width: 220px;
  cursor: pointer;
  transition: transform 0.25s var(--bz-ease-spring);
}
.bz-acc-lock-card:hover { transform: scale(1.04); }
.bz-acc-lock-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 8px;
  background: linear-gradient(135deg, #fff5f5, #fee2e2);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bz-red);
}
.bz-acc-lock-icon i { width: 22px; height: 22px; }
.bz-acc-lock-card h4 {
  font-size: 14px;
  font-weight: 800;
  color: var(--bz-text);
  margin: 0 0 4px;
}
.bz-acc-lock-card p {
  font-size: 11px;
  color: var(--bz-text-mute);
  margin: 0 0 10px;
}
.bz-acc-lock-btn {
  width: 100%;
  padding: 8px 12px !important;
  background: var(--bz-grad-ink) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(9,9,11,0.3);
}

/* Settings list */
.bz-acc-settings {
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(24,24,27,0.05);
  overflow: hidden;
  box-shadow: var(--bz-sh-card);
}
.bz-acc-setting {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(24,24,27,0.04);
  transition: background 0.2s;
}
.bz-acc-setting:last-child { border-bottom: none; }
.bz-acc-setting-row { cursor: pointer; }
.bz-acc-setting-row:hover { background: rgba(24,24,27,0.02); }
.bz-acc-setting-row:active { background: rgba(24,24,27,0.05); }
.bz-acc-setting-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bz-acc-setting-icon i { width: 17px; height: 17px; stroke-width: 2.2; }
.bz-icon-blue { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1d4ed8; }
.bz-icon-orange { background: linear-gradient(135deg, #ffedd5, #fed7aa); color: #c2410c; }
.bz-icon-pink { background: linear-gradient(135deg, #fce7f3, #fbcfe8); color: #be185d; }
.bz-icon-purple { background: linear-gradient(135deg, #f3e8ff, #e9d5ff); color: #7c3aed; }
.bz-icon-red { background: linear-gradient(135deg, #fff5f5, #fee2e2); color: var(--bz-red); }
.bz-icon-green { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #15803d; }
.bz-icon-gray { background: linear-gradient(135deg, #f4f4f5, #e4e4e7); color: #52525b; }
.bz-icon-danger { background: linear-gradient(135deg, #fff5f5, #fecaca); color: var(--bz-red); }

.bz-acc-setting-label {
  flex: 1 1 auto;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bz-text) !important;
}
.bz-acc-setting-chev {
  width: 16px;
  height: 16px;
  color: var(--bz-text-faint);
  flex-shrink: 0;
}

/* Lang toggle */
.bz-acc-lang-toggle {
  display: flex;
  background: var(--bz-bg-mute);
  padding: 3px;
  border-radius: 999px;
  gap: 2px;
  flex-shrink: 0;
}
.bz-acc-lang-toggle button {
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: transparent !important;
  color: var(--bz-text-mute) !important;
  border: none;
  cursor: pointer;
  transition: all 0.2s var(--bz-ease-out);
}
.bz-acc-lang-toggle button.active {
  background: #fff !important;
  color: var(--bz-red) !important;
  box-shadow: 0 2px 6px rgba(220,38,38,0.18);
}

/* Danger zone */
.bz-acc-danger-section {
  margin-top: 24px;
}
.bz-acc-danger {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: linear-gradient(135deg, #fff5f5, #fee2e2);
  border: 1px solid rgba(220,38,38,0.15);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s var(--bz-ease-out);
  margin-bottom: 8px;
}
.bz-acc-danger:hover {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
}
.bz-acc-danger:active { transform: scale(0.99); }
.bz-acc-danger-label {
  flex: 1 1 auto;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--bz-red) !important;
}
.bz-acc-logout {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px !important;
  background: #fff !important;
  color: var(--bz-text) !important;
  border: 1px solid rgba(24,24,27,0.06) !important;
  border-radius: 16px !important;
  cursor: pointer;
  font-weight: 700 !important;
  transition: all 0.2s var(--bz-ease-out);
  font-size: 13.5px;
}
.bz-acc-logout span {
  flex: 1 1 auto;
  text-align: right;
}
.bz-acc-logout:hover {
  background: var(--bz-bg-mute) !important;
  border-color: rgba(24,24,27,0.12) !important;
}
.bz-acc-logout:active { transform: scale(0.99); }

/* Mobile fine-tune */
@media (max-width: 380px) {
  .bz-acc-card { padding: 56px 16px 16px; }
  .bz-acc-name { font-size: 18px !important; }
  .bz-acc-tile { padding: 12px 6px; }
  .bz-acc-tile span { font-size: 10px; }
}

/* ==================================================
   ★ ORDERS PAGES — طلباتي + الطلبات الواردة ★
   ================================================== */

.bz-orders-page { padding-bottom: 96px; }

/* Hero (shared) */
.bz-orders-hero {
  position: relative;
  padding: 22px 24px 28px;
  margin-bottom: -16px;
  overflow: hidden;
  z-index: 0;
}
/* نسخة الـmerchant: مساحة فعلية بين hero والمحتوى (بدل التداخل) */
.bz-orders-hero-merchant {
  margin-bottom: 18px !important;
  padding-bottom: 22px !important;
  border-radius: 0 0 28px 28px;
}
.bz-orders-hero-merchant + .bz-orders-stats {
  margin-top: 0;
}
.bz-orders-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 250px at 30% 20%, rgba(251,191,36,0.18) 0%, transparent 50%),
    radial-gradient(ellipse 500px 350px at 80% 80%, rgba(255,255,255,0.10) 0%, transparent 50%),
    var(--bz-grad-hero);
}
.bz-orders-hero-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: 0.5;
  animation: bzPatternDrift 30s linear infinite;
}
.bz-orders-hero-title {
  position: relative;
  z-index: 2;
  color: #fff !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em;
  margin: 0 0 4px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.bz-orders-hero-sub {
  position: relative;
  z-index: 2;
  color: rgba(255,255,255,0.88) !important;
  font-size: 12.5px;
  font-weight: 500;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.bz-orders-hero-refresh {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.bz-orders-hero-refresh:hover { background: rgba(255,255,255,0.28); }
.bz-orders-hero-refresh:active { transform: scale(0.94); }
.bz-orders-hero-refresh i { width: 18px; height: 18px; }

.bz-orders-hero-back {
  position: absolute;
  top: 18px;
  inset-inline-end: 18px;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.bz-orders-hero-back:hover { background: rgba(255,255,255,0.28); }
.bz-orders-hero-back:active { transform: scale(0.94); }
.bz-orders-hero-back i { width: 18px; height: 18px; }
[dir="ltr"] .bz-orders-hero-back i { transform: scaleX(-1); }

/* Stats grid */
.bz-orders-stats {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 16px 16px;
}
.bz-orders-stat {
  background: #fff;
  border-radius: 16px;
  padding: 14px 8px;
  text-align: center;
  border: 1px solid rgba(24,24,27,0.04);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 6px 18px -4px rgba(24,24,27,0.10);
  transition: transform 0.3s var(--bz-ease-out);
}
.bz-orders-stat:hover { transform: translateY(-2px); }
.bz-orders-stat-num {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 4px;
}
.bz-orders-stat-lbl {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--bz-text-mute);
  letter-spacing: -0.01em;
}
.bz-stat-all .bz-orders-stat-num { color: var(--bz-red); }
.bz-stat-active .bz-orders-stat-num { color: #2563eb; }
.bz-stat-new .bz-orders-stat-num { color: #2563eb; }
.bz-stat-done .bz-orders-stat-num { color: #16a34a; }
.bz-stat-cancel .bz-orders-stat-num { color: #6b7280; }
.bz-stat-earn .bz-orders-stat-num { color: #16a34a; font-size: 18px; }
.bz-stat-earn .bz-orders-stat-num::after {
  content: '';
  display: inline-block;
  width: 0;
}

/* Filter chips */
.bz-orders-filters {
  display: flex;
  gap: 8px;
  padding: 0 16px 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.bz-orders-filters::-webkit-scrollbar { display: none; }
.bz-orders-chip {
  flex: 0 0 auto;
  padding: 8px 16px !important;
  background: #fff !important;
  color: var(--bz-text-soft) !important;
  border: 1px solid rgba(24,24,27,0.06) !important;
  border-radius: 999px !important;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s var(--bz-ease-spring) !important;
  white-space: nowrap;
}
.bz-orders-chip:hover {
  background: var(--bz-bg-mute) !important;
  border-color: rgba(24,24,27,0.10) !important;
}
.bz-orders-chip:active { transform: scale(0.96); }
.bz-orders-chip.active {
  background: var(--bz-grad-hero) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--bz-sh-button-red) !important;
}
/* In English mode the chips read LTR — this prevents the count parentheses
   from flipping (e.g. `All (2)` was rendering as `All )2(`). */
html[lang="en"] .bz-orders-chip,
html[lang="en"] .bz-chip-count {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Orders list */
.bz-orders-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px;
}

/* Empty state */
.bz-orders-empty {
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(24,24,27,0.05);
  padding: 48px 24px;
  text-align: center;
  box-shadow: var(--bz-sh-card);
}
.bz-orders-empty-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, var(--bz-bg-mute), #e4e4e7);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bz-text-mute);
}
.bz-orders-empty-icon i { width: 32px; height: 32px; }
.bz-orders-empty p {
  color: var(--bz-text-mute);
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}

/* ==================================================
   ★ WISHLIST — المنتجات المفضلة ★
   ================================================== */
.bz-wl-empty-hint {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(0,0,0,0.45) !important;
  margin-top: 6px !important;
}
.bz-wl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 16px 16px;
}
.bz-wl-card {
  background: #fff;
  border: 1px solid rgba(24,24,27,0.05);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--bz-sh-card, 0 6px 18px -4px rgba(24,24,27,0.10));
  transition: transform 0.25s var(--bz-ease-out, ease), box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}
.bz-wl-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px rgba(24,24,27,0.18);
}
.bz-wl-card:active { transform: translateY(0) scale(0.98); }

.bz-wl-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #f4f4f5, #e4e4e7);
  overflow: hidden;
}
.bz-wl-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--bz-ease-out, ease);
}
.bz-wl-card:hover .bz-wl-card-media img { transform: scale(1.05); }

.bz-wl-card-heart {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.bz-wl-card-heart:hover { background: #fff5f5; transform: scale(1.08); }
.bz-wl-card-heart:active { transform: scale(0.92); }
.bz-wl-heart-icon {
  width: 18px;
  height: 18px;
  color: #dc2626;
  fill: #dc2626;
  stroke: #dc2626;
}

.bz-wl-card-cat {
  position: absolute;
  bottom: 8px;
  inset-inline-start: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px 4px 6px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.bz-wl-card-cat i { width: 12px; height: 12px; }

.bz-wl-card-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.bz-wl-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #18181b;
  margin: 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 36px;
}
.bz-wl-card-store {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(0,0,0,0.55);
  font-weight: 500;
}
.bz-wl-card-store img {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}
.bz-wl-card-store span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-wl-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-inline-start: auto;
  color: #f59e0b;
  font-weight: 700;
  font-size: 10.5px;
  flex-shrink: 0;
}
.bz-wl-card-rating i { width: 11px; height: 11px; fill: #f59e0b; }

.bz-wl-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 4px;
}
.bz-wl-card-price { display: inline-flex; align-items: baseline; gap: 3px; }
.bz-wl-price-val { font-size: 16px; font-weight: 800; color: #18181b; letter-spacing: -0.01em; }
.bz-wl-price-cur { font-size: 10px; font-weight: 600; color: rgba(0,0,0,0.55); }

.bz-wl-card-add {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, #18181b, #3f3f46);
  color: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(24,24,27,0.25);
  transition: transform 0.2s ease, background 0.2s ease;
}
.bz-wl-card-add:hover { transform: scale(1.08); background: linear-gradient(135deg, #dc2626, #b91c1c); }
.bz-wl-card-add:active { transform: scale(0.94); }
.bz-wl-card-add i { width: 16px; height: 16px; }

@media (max-width: 360px) {
  .bz-wl-grid { gap: 10px; padding: 0 12px 12px; }
  .bz-wl-card-title { font-size: 12.5px; min-height: 34px; }
  .bz-wl-price-val { font-size: 15px; }
}

/* Order Card (shared) */
.bz-order-card {
  position: relative;
  background: #fff !important;
  border: 1px solid rgba(24,24,27,0.05);
  border-radius: 20px;
  padding: 14px 16px 14px 20px;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 4px 16px -4px rgba(24,24,27,0.06);
  transition:
    transform 0.3s var(--bz-ease-out),
    box-shadow 0.3s var(--bz-ease-out),
    border-color 0.25s ease !important;
}
.bz-order-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 12px 28px -8px var(--bz-st-bg, rgba(220,38,38,0.15)),
    0 6px 14px -4px rgba(24,24,27,0.08) !important;
  border-color: var(--bz-st, rgba(24,24,27,0.10)) !important;
}
.bz-order-card:active { transform: translateY(0) scale(0.99); }

/* Status accent stripe (right side in RTL) */
.bz-order-stripe {
  position: absolute;
  top: 12px;
  right: 0;
  bottom: 12px;
  width: 4px;
  background: var(--bz-st);
  border-radius: 4px 0 0 4px;
}

/* Card head */
.bz-order-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.bz-order-status-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--bz-st-bg);
  color: var(--bz-st);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px -2px var(--bz-st-bg);
}
.bz-order-status-icon i {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}
.bz-order-meta { flex: 1; min-width: 0; }
.bz-order-id-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bz-order-id {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--bz-text) !important;
  letter-spacing: -0.01em;
  font-family: 'IBM Plex Mono', monospace;
}
.bz-order-date {
  font-size: 11px;
  color: var(--bz-text-mute) !important;
  font-weight: 500;
  margin-top: 2px;
}
.bz-order-status-pill {
  background: var(--bz-st-bg) !important;
  color: var(--bz-st) !important;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 999px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Priority chips (merchant) */
.bz-order-priority {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: -0.01em;
}
.bz-order-priority-urgent {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #991b1b;
  border: 1px solid rgba(220,38,38,0.2);
}
.bz-order-priority-busy {
  background: linear-gradient(135deg, #ffedd5, #fed7aa);
  color: #9a3412;
}

/* Items chips (customer view) */
.bz-order-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.bz-order-item-chip {
  background: var(--bz-bg-mute);
  color: var(--bz-text-soft);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(24,24,27,0.04);
}
.bz-order-item-more {
  background: var(--bz-grad-soft);
  color: var(--bz-red);
  font-size: 10.5px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(220,38,38,0.10);
}

/* Card footer (customer) */
.bz-order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid rgba(24,24,27,0.05);
  gap: 10px;
}
.bz-order-total { display: flex; flex-direction: column; }
.bz-order-total-lbl {
  font-size: 10px;
  color: var(--bz-text-mute);
  font-weight: 600;
  margin-bottom: 1px;
}
.bz-order-total-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--bz-text) !important;
  letter-spacing: -0.025em;
  line-height: 1;
}
.bz-order-total-val small {
  font-size: 11px;
  font-weight: 600;
  color: var(--bz-text-mute);
  margin-right: 2px;
}

.bz-order-actions { display: flex; gap: 6px; align-items: center; }
.bz-order-btn-icon {
  width: 36px;
  height: 36px;
  background: var(--bz-bg-mute) !important;
  color: var(--bz-text-soft) !important;
  border-radius: 10px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(24,24,27,0.04) !important;
  cursor: pointer;
  transition: all 0.2s var(--bz-ease-out);
}
.bz-order-btn-icon:hover {
  background: var(--bz-grad-soft) !important;
  color: var(--bz-red) !important;
  transform: translateY(-1px);
}
.bz-order-btn-icon i { width: 16px; height: 16px; stroke-width: 2.2; }
.bz-order-btn-warn:hover {
  background: linear-gradient(135deg, #ffedd5, #fed7aa) !important;
  color: #c2410c !important;
}
.bz-order-btn-detail {
  background: var(--bz-grad-hero) !important;
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  cursor: pointer;
  box-shadow: var(--bz-sh-button-red) !important;
  transition: transform 0.2s var(--bz-ease-spring);
}
.bz-order-btn-detail:hover { transform: translateY(-1px); }
.bz-order-btn-detail i { width: 14px; height: 14px; }

/* ===== MERCHANT specific ===== */
.bz-order-card-merchant { padding: 16px; }
.bz-order-head-merchant { padding-bottom: 0; border-bottom: none; margin-bottom: 12px; }

.bz-order-customer-note {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 1px solid rgba(217,119,6,0.15);
  border-radius: 12px;
  margin-bottom: 12px;
}
.bz-order-customer-note > i {
  width: 16px;
  height: 16px;
  color: #d97706;
  flex-shrink: 0;
  margin-top: 2px;
}
.bz-order-customer-note-lbl {
  font-size: 10px;
  color: #92400e;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.bz-order-customer-note-text {
  font-size: 12.5px;
  color: var(--bz-text);
  line-height: 1.5;
  font-weight: 500;
}

.bz-order-items-list {
  background: var(--bz-bg-soft);
  border: 1px solid rgba(24,24,27,0.04);
  border-radius: 14px;
  padding: 4px 12px;
  margin-bottom: 12px;
}
.bz-order-item-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(24,24,27,0.06);
}
.bz-order-item-row:last-child { border-bottom: none; }
.bz-order-item-main { flex: 1; min-width: 0; }
.bz-order-item-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--bz-text) !important;
  margin-bottom: 2px;
}
.bz-order-item-meta {
  font-size: 11px;
  color: var(--bz-text-mute);
  font-weight: 500;
}
.bz-order-item-note {
  display: inline-flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 6px;
  padding: 4px 10px;
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 1px solid rgba(217,119,6,0.15);
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: #92400e;
}
.bz-order-item-note i { width: 11px; height: 11px; margin-top: 2px; flex-shrink: 0; }
.bz-order-item-price {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--bz-text);
  flex-shrink: 0;
  margin-right: 12px;
}

/* Financials row */
.bz-order-financials {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 8px;
  background: linear-gradient(135deg, var(--bz-bg-soft), var(--bz-bg-mute));
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid rgba(24,24,27,0.04);
}
.bz-order-fin-cell { text-align: center; padding: 4px; }
.bz-order-fin-lbl {
  font-size: 9.5px;
  color: var(--bz-text-mute);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.bz-order-fin-val {
  font-size: 14px;
  font-weight: 800;
  color: var(--bz-text);
  letter-spacing: -0.02em;
}
.bz-fin-deduct .bz-order-fin-val { color: #ea580c; }
.bz-fin-net {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  border-radius: 10px;
  border: 1px solid rgba(22,163,74,0.18);
}
.bz-fin-net .bz-order-fin-val { color: #15803d; }
.bz-fin-net .bz-order-fin-lbl { color: #15803d; }
.bz-fin-net .bz-order-fin-val small {
  font-size: 9.5px;
  font-weight: 600;
  margin-right: 2px;
  opacity: 0.7;
}

/* Action row */
.bz-order-action-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.bz-order-action-primary {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  font-size: 13px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: transform 0.2s var(--bz-ease-spring), filter 0.2s !important;
  letter-spacing: -0.01em;
}
.bz-order-action-primary i { width: 16px; height: 16px; stroke-width: 2.4; }
.bz-order-action-primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
.bz-order-action-primary:active { transform: translateY(0) scale(0.98); }
.bz-order-action-success {
  background: linear-gradient(135deg, #22c55e 0%, #15803d 100%) !important;
  color: #fff !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 6px 18px -4px rgba(22,163,74,0.5) !important;
}
.bz-order-action-dark {
  background: var(--bz-grad-ink) !important;
  color: #fff !important;
  box-shadow: var(--bz-sh-dark) !important;
}
.bz-order-action-cancel {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 14px !important;
  background: var(--bz-grad-soft) !important;
  color: var(--bz-red) !important;
  border: 1px solid rgba(220,38,38,0.15) !important;
  border-radius: 12px !important;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s var(--bz-ease-out);
}
.bz-order-action-cancel:hover { background: linear-gradient(135deg, #fee2e2, #fecaca) !important; }
.bz-order-action-cancel i { width: 14px; height: 14px; stroke-width: 2.4; }

.bz-order-info-pill {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 12px;
  background: var(--bz-bg-soft);
  border: 1px solid rgba(24,24,27,0.06);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--bz-text-soft);
}
.bz-order-info-pill i {
  width: 14px;
  height: 14px;
  color: var(--bz-text-mute);
}

/* Mobile fine-tune */
@media (max-width: 380px) {
  .bz-orders-stats { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .bz-orders-stat { padding: 12px 6px; }
  .bz-orders-stat-num { font-size: 18px; }
  .bz-order-financials { grid-template-columns: 1fr 1fr; }
  .bz-order-financials .bz-fin-net { grid-column: span 2; }
}

/* ==================================================
   ★ INNER PAGES — قالب شاشات الإعدادات/التقارير ★
   ================================================== */

/* Page Hero (sticky compact header for inner pages) */
.bz-page-hero {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(24,24,27,0.06);
  box-shadow: 0 1px 0 rgba(220,38,38,0.04), 0 4px 20px -10px rgba(24,24,27,0.05);
}
.bz-page-hero-title {
  flex: 1 1 auto;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--bz-text) !important;
  letter-spacing: -0.02em;
  margin: 0;
  text-align: center;
}
.bz-page-back-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bz-bg-mute) !important;
  color: var(--bz-text) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(24,24,27,0.04) !important;
  cursor: pointer;
  transition: all 0.2s var(--bz-ease-spring);
  flex-shrink: 0;
}
.bz-page-back-btn:hover { background: var(--bz-grad-soft) !important; color: var(--bz-red) !important; }
.bz-page-back-btn:active { transform: scale(0.92); }
.bz-page-back-btn i { width: 20px; height: 20px; stroke-width: 2.4; }
.bz-page-action-btn {
  background: var(--bz-grad-hero) !important;
  color: #fff !important;
  font-weight: 800 !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  font-size: 13px;
  border: none;
  cursor: pointer;
  box-shadow: var(--bz-sh-button-red) !important;
  transition: transform 0.2s var(--bz-ease-spring), filter 0.2s !important;
  flex-shrink: 0;
}
.bz-page-action-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.bz-page-action-btn:active { transform: scale(0.97); }
.bz-page-spacer { width: 40px; flex-shrink: 0; }

/* Page Content */
.bz-page-content {
  padding: 16px;
  padding-bottom: 96px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Section Card */
.bz-section-card {
  background: #fff !important;
  border: 1px solid rgba(24,24,27,0.05);
  border-radius: 20px;
  padding: 18px;
  box-shadow: var(--bz-sh-card);
}
.bz-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--bz-text) !important;
  margin: 0 0 14px;
  letter-spacing: -0.015em;
}
.bz-section-title i {
  width: 16px;
  height: 16px;
  color: var(--bz-red);
}

/* Tip Card */
.bz-tip-card {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 1px solid rgba(37,99,235,0.15);
  border-radius: 14px;
}
.bz-tip-card.bz-tip-warn {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border-color: rgba(217,119,6,0.18);
}
.bz-tip-card > i {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #2563eb;
}
.bz-tip-card.bz-tip-warn > i { color: #d97706; }
.bz-tip-card p {
  font-size: 11.5px;
  line-height: 1.65;
  color: #1e3a8a !important;
  margin: 0;
  font-weight: 500;
}
.bz-tip-card.bz-tip-warn p { color: #78350f !important; }

/* Form fields */
.bz-form-grid { display: flex; flex-direction: column; gap: 14px; }
.bz-form-field { display: flex; flex-direction: column; gap: 6px; }
.bz-form-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--bz-text-mute) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
}
.bz-form-input,
.bz-form-textarea,
.bz-form-select {
  width: 100%;
  background: var(--bz-bg-soft) !important;
  border: 1.5px solid rgba(24,24,27,0.08) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--bz-text) !important;
  transition: all 0.25s var(--bz-ease-out) !important;
  font-family: inherit !important;
}
.bz-form-textarea { resize: vertical; min-height: 80px; }
.bz-form-input:focus,
.bz-form-textarea:focus,
.bz-form-select:focus {
  background: #fff !important;
  border-color: var(--bz-red) !important;
  box-shadow: 0 0 0 4px rgba(220,38,38,0.10) !important;
  outline: none !important;
}
.bz-form-input[readonly] {
  background: var(--bz-bg-mute) !important;
  color: var(--bz-text-mute) !important;
  cursor: default;
}
.bz-form-input[type="number"] {
  text-align: center;
  font-weight: 800 !important;
}
.bz-form-input-wrap {
  position: relative;
}
.bz-form-input-prefix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 12px;
  color: var(--bz-text-mute);
  font-weight: 800;
  pointer-events: none;
}
.bz-form-input-prefix + .bz-form-input { padding-left: 32px !important; }
.bz-form-help {
  font-size: 10.5px;
  color: var(--bz-text-faint);
  margin-top: 4px;
  font-weight: 500;
}

/* Live availability states (handle / username) */
.bz-form-help.bz-status-ok      { color: #16a34a !important; font-weight: 700; }
.bz-form-help.bz-status-bad     { color: #dc2626 !important; font-weight: 700; }
.bz-form-help.bz-status-checking{ color: var(--bz-text-mute) !important; font-weight: 600; }
.bz-form-input.bz-input-ok      { border-color: #16a34a !important; box-shadow: 0 0 0 3px rgba(22,163,74,0.10) !important; }
.bz-form-input.bz-input-bad     { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220,38,38,0.10) !important; }

/* Pill tabs (inner pages) */
.bz-pill-tabs {
  display: flex;
  background: var(--bz-bg-mute);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.bz-pill-tab {
  flex: 1;
  padding: 9px 12px !important;
  font-size: 13px;
  font-weight: 700;
  color: var(--bz-text-mute) !important;
  background: transparent !important;
  border: none;
  border-radius: 999px !important;
  cursor: pointer;
  transition: all 0.25s var(--bz-ease-out) !important;
}
.bz-pill-tab:hover { color: var(--bz-text) !important; }
.bz-pill-tab.active {
  background: #fff !important;
  color: var(--bz-red) !important;
  box-shadow: 0 4px 10px -2px rgba(220,38,38,0.15);
}

/* Sales Analytics specific */
.bz-sa-hero-card {
  position: relative;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 50%, #064e3b 100%);
  color: #fff !important;
  padding: 24px 22px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 16px 40px -8px rgba(22,163,74,0.45),
    0 6px 14px rgba(22,163,74,0.25);
}
.bz-sa-hero-card::before {
  content: '';
  position: absolute;
  inset: -50%;
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,0.18) 0%, transparent 35%),
    radial-gradient(circle at 75% 75%, rgba(255,255,255,0.10) 0%, transparent 40%);
  pointer-events: none;
  animation: bzPatternDrift 25s linear infinite;
}
.bz-sa-lbl {
  position: relative; z-index: 2;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.85) !important;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
  text-transform: uppercase;
}
.bz-sa-amount {
  position: relative; z-index: 2;
  font-size: 36px !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: -0.04em !important;
  line-height: 1;
  margin: 0;
}
.bz-sa-amount small {
  font-size: 14px;
  font-weight: 600;
  margin-right: 4px;
  opacity: 0.85;
}
.bz-sa-meta {
  position: relative; z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff !important;
  backdrop-filter: blur(8px);
}
.bz-sa-meta i { width: 14px; height: 14px; }

.bz-sa-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.bz-sa-mini {
  background: #fff;
  border: 1px solid rgba(24,24,27,0.05);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--bz-sh-card);
}
.bz-sa-mini-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.bz-sa-mini-icon i { width: 18px; height: 18px; stroke-width: 2.2; }
.bz-sa-mini-icon.pending {
  background: linear-gradient(135deg, #ffedd5, #fed7aa);
  color: #c2410c;
}
.bz-sa-mini-icon.balance {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #1d4ed8;
}
.bz-sa-mini-lbl {
  font-size: 10.5px;
  color: var(--bz-text-mute);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.bz-sa-mini-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--bz-text);
  letter-spacing: -0.02em;
  line-height: 1;
}
.bz-sa-mini-sub {
  font-size: 9.5px;
  color: #c2410c;
  margin-top: 6px;
  font-weight: 600;
}

.bz-sa-actions {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 10px;
}
.bz-sa-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 14px !important;
  border-radius: 16px !important;
  font-weight: 800;
  cursor: pointer;
  border: none;
  transition: all 0.2s var(--bz-ease-spring);
  text-align: center;
}
.bz-sa-action i { width: 24px; height: 24px; stroke-width: 2.2; margin-bottom: 4px; }
.bz-sa-action-primary {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
  color: #fff !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 8px 20px -4px rgba(37,99,235,0.45) !important;
}
.bz-sa-action-primary:hover { transform: translateY(-2px); filter: brightness(1.08); }
.bz-sa-action-secondary {
  background: #fff !important;
  color: var(--bz-text) !important;
  border: 1px solid rgba(24,24,27,0.06) !important;
  box-shadow: var(--bz-sh-card) !important;
}
.bz-sa-action-secondary i { color: #2563eb; }
.bz-sa-action-secondary:hover { transform: translateY(-2px); border-color: rgba(37,99,235,0.18) !important; }
.bz-sa-action-title {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.bz-sa-action-sub {
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.75;
}
.bz-sa-action-secondary .bz-sa-action-sub { color: var(--bz-text-mute); }
.bz-sa-action.is-loading,
.bz-sa-action[disabled] {
  pointer-events: none;
  opacity: 0.85;
  cursor: not-allowed !important;
  transform: none !important;
}
.bz-sa-action.is-loading i { width: 22px; height: 22px; }

.bz-sa-policy {
  background: linear-gradient(135deg, #f8fafc, var(--bz-bg-mute));
  border: 1px solid rgba(24,24,27,0.06);
  border-radius: 18px;
  padding: 16px 18px;
}
.bz-sa-policy h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--bz-text) !important;
  margin: 0 0 12px;
}
.bz-sa-policy h4 i { width: 16px; height: 16px; color: #2563eb; }
.bz-sa-policy ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.bz-sa-policy li {
  font-size: 11.5px;
  color: var(--bz-text-soft);
  line-height: 1.6;
  display: flex;
  gap: 6px;
  font-weight: 500;
}
.bz-sa-policy li::before {
  content: '◆';
  color: var(--bz-red);
  font-size: 8px;
  margin-top: 4px;
  flex-shrink: 0;
}

/* Sales list cards */
.bz-sa-list-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--bz-text) !important;
  margin: 4px 4px 10px;
  letter-spacing: -0.015em;
}
.bz-sa-sale-card {
  background: #fff;
  border: 1px solid rgba(24,24,27,0.05);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--bz-sh-card);
  transition: transform 0.25s var(--bz-ease-out);
}
.bz-sa-sale-card:hover { transform: translateY(-2px); }
.bz-sa-sale-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.bz-sa-sale-id {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--bz-bg-soft), var(--bz-bg-mute));
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--bz-text-soft);
  font-family: 'IBM Plex Mono', monospace;
}
.bz-sa-sale-info { flex: 1; padding: 0 12px; }
.bz-sa-sale-info-title { font-size: 13px; font-weight: 700; color: var(--bz-text); }
.bz-sa-sale-info-date { font-size: 10px; color: var(--bz-text-mute); margin-top: 2px; font-weight: 500; }
.bz-sa-sale-amount {
  font-size: 15px;
  font-weight: 800;
  color: #15803d;
}
.bz-sa-sale-status {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  margin-top: 4px;
}

/* My Ads — product cards */
.bz-ads-grid { display: flex; flex-direction: column; gap: 12px; }
.bz-ads-add-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bz-grad-hero) !important;
  color: #fff !important;
  border: none;
  border-radius: 16px !important;
  padding: 14px !important;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--bz-sh-button-red) !important;
  transition: all 0.2s var(--bz-ease-spring);
}
.bz-ads-add-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.bz-ads-add-btn i { width: 18px; height: 18px; stroke-width: 2.4; }

.bz-ads-card {
  background: #fff;
  border: 1px solid rgba(24,24,27,0.05);
  border-radius: 18px;
  padding: 12px;
  display: flex;
  gap: 12px;
  box-shadow: var(--bz-sh-card);
  transition: all 0.3s var(--bz-ease-out);
  position: relative;
  overflow: hidden;
}
.bz-ads-card.is-inactive { opacity: 0.7; }
.bz-ads-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--bz-sh-card-hover);
}
.bz-ads-img-wrap {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bz-bg-mute);
  position: relative;
}
.bz-ads-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--bz-ease-out);
}
.bz-ads-card:hover .bz-ads-img-wrap img { transform: scale(1.06); }
.bz-ads-img-wrap.is-inactive img { filter: grayscale(0.8) brightness(0.85); }
.bz-ads-inactive-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.bz-ads-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}
.bz-ads-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.bz-ads-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--bz-text) !important;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bz-ads-price {
  font-size: 14px;
  font-weight: 800;
  color: var(--bz-red) !important;
  flex-shrink: 0;
}

.bz-ads-stats {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.bz-ads-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--bz-bg-mute);
  color: var(--bz-text-soft);
  border: 1px solid rgba(24,24,27,0.04);
}
.bz-ads-stat i { width: 11px; height: 11px; stroke-width: 2.4; }
.bz-ads-stat-orders {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  color: #15803d;
  border-color: rgba(22,163,74,0.15);
}
.bz-ads-stock {
  display: flex;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--bz-bg-soft);
  border-radius: 9px;
  border: 1px solid rgba(24,24,27,0.04);
}
.bz-ads-stock-stock { color: #1d4ed8; }
.bz-ads-stock-sold { color: #15803d; }

.bz-ads-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(24,24,27,0.06);
  flex-wrap: wrap;
}
.bz-ads-btn {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 6px 11px !important;
  border-radius: 10px !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid transparent !important;
  cursor: pointer;
  transition: all 0.2s var(--bz-ease-out);
}
.bz-ads-btn i { width: 11px; height: 11px; stroke-width: 2.4; }
.bz-ads-btn-edit {
  background: var(--bz-grad-ink) !important;
  color: #fff !important;
}
.bz-ads-btn-toggle {
  background: var(--bz-bg-mute) !important;
  color: var(--bz-text-soft) !important;
  border-color: rgba(24,24,27,0.06) !important;
}
.bz-ads-btn-toggle.is-on {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0) !important;
  color: #15803d !important;
  border-color: rgba(22,163,74,0.18) !important;
}
.bz-ads-btn-stock {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
  color: #1d4ed8 !important;
  border-color: rgba(37,99,235,0.15) !important;
}
.bz-ads-btn-delete {
  background: var(--bz-grad-soft) !important;
  color: var(--bz-red) !important;
  border-color: rgba(220,38,38,0.15) !important;
}
.bz-ads-btn-locked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--bz-text-mute);
  font-weight: 600;
  padding: 6px 10px;
}

/* Edit Store Profile — avatar uploader */
.bz-esp-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.bz-esp-avatar-box {
  position: relative;
  width: 110px;
  height: 110px;
}
.bz-esp-avatar-ring {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  padding: 4px;
  background: conic-gradient(from 0deg, #ef4444, #fbbf24, #ef4444, #b91c1c, #ef4444);
  box-shadow: 0 8px 24px -4px rgba(220,38,38,0.4);
  animation: bzRingSpin 8s linear infinite;
}
.bz-esp-avatar-ring img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  background: var(--bz-bg-mute);
  animation: bzRingCounter 8s linear infinite;
}
.bz-esp-avatar-upload {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 36px;
  height: 36px;
  background: var(--bz-grad-hero);
  color: #fff;
  border: 3px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 14px -2px rgba(220,38,38,0.45);
  transition: transform 0.2s var(--bz-ease-spring);
  z-index: 4;
}
.bz-esp-avatar-upload:hover { transform: scale(1.1); }
.bz-esp-avatar-upload i { width: 16px; height: 16px; }
.bz-esp-avatar-hint {
  font-size: 11px;
  color: var(--bz-text-mute);
  font-weight: 600;
}

/* Privacy Policy */
.bz-pp-content {
  background: #fff;
  border: 1px solid rgba(24,24,27,0.05);
  border-radius: 22px;
  padding: 22px 20px;
  box-shadow: var(--bz-sh-card);
}
.bz-pp-section { margin-bottom: 20px; }
.bz-pp-section:last-child { margin-bottom: 0; }
.bz-pp-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--bz-text) !important;
  margin: 0 0 8px;
  letter-spacing: -0.015em;
}
.bz-pp-section h3 i {
  width: 16px; height: 16px;
  color: var(--bz-red);
}
.bz-pp-section p {
  font-size: 13px !important;
  line-height: 1.75 !important;
  color: var(--bz-text-soft) !important;
  margin: 0 0 8px;
  font-weight: 500;
}
.bz-pp-section ul {
  list-style: none;
  padding: 0;
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bz-pp-section li {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--bz-text-soft);
  display: flex;
  gap: 8px;
  font-weight: 500;
}
.bz-pp-section li::before {
  content: '●';
  color: var(--bz-red);
  font-size: 9px;
  margin-top: 6px;
  flex-shrink: 0;
}
.bz-pp-section li b, .bz-pp-section li strong {
  color: var(--bz-text);
  font-weight: 700;
}
.bz-pp-info-card {
  background: linear-gradient(135deg, var(--bz-bg-soft), var(--bz-bg-mute));
  border: 1px solid rgba(24,24,27,0.06);
  border-radius: 16px;
  padding: 16px;
  margin-top: 18px;
  text-align: center;
}
.bz-pp-info-card h4 {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--bz-text) !important;
  margin: 0 0 10px;
}
.bz-pp-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(24,24,27,0.04);
}
.bz-pp-info-row:last-child { border-bottom: none; }
.bz-pp-info-row span:first-child { color: var(--bz-text-mute); font-weight: 600; }
.bz-pp-info-row span:last-child { color: var(--bz-text); font-weight: 700; text-align: left; max-width: 60%; }

.bz-pp-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 16px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(24,24,27,0.06);
  z-index: 50;
  box-shadow: 0 -4px 20px -10px rgba(24,24,27,0.08);
}
.bz-pp-footer-btn {
  width: 100%;
  background: var(--bz-grad-ink) !important;
  color: #fff !important;
  padding: 14px !important;
  border-radius: 14px !important;
  font-size: 14px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  box-shadow: var(--bz-sh-dark) !important;
  transition: transform 0.2s var(--bz-ease-spring);
}
.bz-pp-footer-btn:hover { transform: translateY(-1px); filter: brightness(1.1); }

/* Store location specific */
.bz-loc-map-area {
  position: relative;
  flex: 1;
  background: var(--bz-bg-mute);
}
.bz-loc-map { width: 100%; height: 100%; }
.bz-loc-locate-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 48px;
  height: 48px;
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 20px -4px rgba(24,24,27,0.18), 0 4px 8px rgba(24,24,27,0.08) !important;
  border: 1px solid rgba(24,24,27,0.05) !important;
  color: var(--bz-text) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s var(--bz-ease-spring);
}
.bz-loc-locate-btn:hover {
  background: var(--bz-grad-soft) !important;
  color: var(--bz-red) !important;
  transform: scale(1.05);
}
.bz-loc-locate-btn i { width: 22px; height: 22px; stroke-width: 2.2; }
.bz-loc-hint {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  padding: 10px 14px;
  border-radius: 14px;
  box-shadow: 0 8px 20px -4px rgba(24,24,27,0.15);
  border: 1px solid rgba(255,255,255,0.5);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--bz-text);
  z-index: 10;
}
.bz-loc-bottom-sheet {
  background: linear-gradient(180deg, #fff 0%, var(--bz-bg-soft) 100%);
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -16px 40px rgba(24,24,27,0.12);
  padding: 16px 18px 24px;
  position: relative;
  z-index: 20;
  margin-top: -20px;
}
.bz-loc-bottom-sheet::before {
  content: '';
  display: block;
  width: 44px;
  height: 5px;
  background: rgba(24,24,27,0.14);
  border-radius: 5px;
  margin: 4px auto 18px;
}

/* ==================================================
   ★ MESSAGES (chat list) — تصميم جديد ★
   ================================================== */

.bz-msg-page { padding-bottom: 100px; }

/* Hero */
.bz-msg-hero {
  position: relative;
  height: 130px;
  margin-bottom: -32px;
  overflow: hidden;
  z-index: 0;
}
.bz-msg-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 600px 250px at 30% 20%, rgba(251,191,36,0.18) 0%, transparent 50%),
    radial-gradient(ellipse 500px 350px at 80% 80%, rgba(255,255,255,0.10) 0%, transparent 50%),
    var(--bz-grad-hero);
}
.bz-msg-hero-pattern {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: 0.5;
  animation: bzPatternDrift 30s linear infinite;
}
.bz-msg-hero-content {
  position: relative; z-index: 2;
  padding: 22px 22px 0;
}
.bz-msg-hero-title {
  color: #fff !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em;
  margin: 0 0 4px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.bz-msg-hero-sub {
  color: rgba(255,255,255,0.88) !important;
  font-size: 13px;
  font-weight: 500;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Loading state */
.bz-msg-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--bz-text-mute);
}
.bz-msg-loader-icon {
  width: 32px; height: 32px;
  color: var(--bz-red);
  animation: bzRingSpin 1s linear infinite;
  margin-bottom: 10px;
}

/* List */
.bz-msg-list {
  position: relative; z-index: 3;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Empty */
.bz-msg-empty {
  background: #fff;
  border: 1px solid rgba(24,24,27,0.05);
  border-radius: 22px;
  padding: 56px 24px;
  text-align: center;
  box-shadow: var(--bz-sh-card);
  margin-top: 16px;
}
.bz-msg-empty-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
  background: var(--bz-grad-soft);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bz-red);
  box-shadow: 0 8px 22px -4px rgba(220,38,38,0.18);
}
.bz-msg-empty-icon i { width: 36px; height: 36px; }
.bz-msg-empty h3 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--bz-text) !important;
  margin: 0 0 6px;
}
.bz-msg-empty p {
  font-size: 12.5px;
  color: var(--bz-text-mute);
  margin: 0;
  font-weight: 500;
  max-width: 280px;
  margin-inline: auto;
  line-height: 1.6;
}

/* Card */
.bz-msg-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff !important;
  border: 1px solid rgba(24,24,27,0.05);
  border-radius: 18px;
  padding: 12px 14px;
  cursor: pointer;
  box-shadow: var(--bz-sh-card);
  transition:
    transform 0.3s var(--bz-ease-out),
    box-shadow 0.3s var(--bz-ease-out),
    border-color 0.25s ease !important;
  animation: bzCardEnter 0.45s var(--bz-ease-out) backwards;
}
.bz-msg-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--bz-sh-card-hover);
  border-color: rgba(220,38,38,0.10);
}
.bz-msg-card:active { transform: translateY(0) scale(0.99); }
.bz-msg-card.has-unread { border-color: rgba(220,38,38,0.18); }

/* Avatar */
.bz-msg-avatar-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.bz-msg-card.has-unread .bz-msg-avatar-wrap {
  padding: 2px;
  background: conic-gradient(from 0deg, #ef4444, #fbbf24, #ef4444, #b91c1c, #ef4444);
  border-radius: 50%;
}
.bz-msg-avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bz-bg-mute);
  border: 2px solid #fff;
  display: block;
}
.bz-msg-avatar-dot {
  position: absolute;
  bottom: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bz-st);
  border: 2.5px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  z-index: 2;
}

/* Body */
.bz-msg-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bz-msg-row1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.bz-msg-name-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.bz-msg-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--bz-text) !important;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bz-msg-card.has-unread .bz-msg-name { color: var(--bz-text) !important; }
.bz-msg-time {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--bz-text-mute);
  flex-shrink: 0;
}
.bz-msg-card.has-unread .bz-msg-time { color: var(--bz-red); }

.bz-msg-row2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.bz-msg-preview {
  flex: 1;
  font-size: 12.5px;
  color: var(--bz-text-mute) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  font-weight: 500;
}
.bz-msg-card.has-unread .bz-msg-preview {
  color: var(--bz-text) !important;
  font-weight: 600;
}
.bz-msg-unread {
  background: var(--bz-grad-hero) !important;
  color: #fff !important;
  font-size: 10.5px;
  font-weight: 800;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  box-shadow: 0 4px 10px -2px rgba(220,38,38,0.4);
  flex-shrink: 0;
}

/* Status badges */
.bz-msg-badge {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.bz-msg-badge-open { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #15803d; }
.bz-msg-badge-busy { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.bz-msg-badge-closed { background: var(--bz-bg-mute); color: var(--bz-text-mute); }

/* ==================================================
   ★ CONVERSATION (شاشة الشات الفردي) ★
   ================================================== */

/* الـdisplay: flex ينطبق فقط عند عدم وجود class .hidden
   حتى لا يتغلّب على utility الـ.hidden في Tailwind */
.bz-conv {
  height: 100%;
  flex-direction: column;
  background: #f0e9e0;
  position: relative;
  overflow: hidden;
}
.bz-conv:not(.hidden) { display: flex; }
.bz-conv.hidden { display: none !important; }

/* Header */
.bz-conv-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bz-grad-hero) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px -4px rgba(220,38,38,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.bz-conv-back, .bz-conv-more {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s var(--bz-ease-spring);
  backdrop-filter: blur(8px);
}
.bz-conv-back:hover, .bz-conv-more:hover { background: rgba(255,255,255,0.22) !important; transform: scale(1.05); }
.bz-conv-back:active, .bz-conv-more:active { transform: scale(0.92); }
.bz-conv-back i, .bz-conv-more i { width: 20px; height: 20px; stroke-width: 2.4; }

/* 3-dots dropdown menu */
.bz-conv-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 10px;
  z-index: 50;
  min-width: 220px;
  background: #fff;
  border: 1px solid rgba(24,24,27,0.06);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 14px 36px -10px rgba(24,24,27,0.25), 0 4px 10px -2px rgba(24,24,27,0.08);
  animation: bzMenuPop 0.18s var(--bz-ease-out, ease) backwards;
}
.bz-conv-more-menu[hidden] { display: none !important; }
@keyframes bzMenuPop {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.bz-conv-more-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 10px;
  color: #18181b;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: start;
  transition: background 0.15s ease;
}
.bz-conv-more-item:hover { background: rgba(24,24,27,0.05); }
.bz-conv-more-item:active { background: rgba(24,24,27,0.08); }
.bz-conv-more-item i { width: 18px; height: 18px; stroke-width: 2.2; flex-shrink: 0; color: rgba(24,24,27,0.65); }
.bz-conv-more-item-danger { color: #dc2626; }
.bz-conv-more-item-danger i { color: #dc2626; }
.bz-conv-more-item-danger:hover { background: #fef2f2; }

.bz-conv-peer {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.bz-conv-avatar-wrap {
  position: relative;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}
.bz-conv-avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,0.4);
  display: block;
}
.bz-conv-status-dot {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 11px;
  height: 11px;
  background: #16a34a;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(22,163,74,0.6);
}
.bz-conv-peer-info { flex: 1; min-width: 0; }
.bz-conv-name {
  color: #fff !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  margin: 0 !important;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.bz-conv-presence {
  color: rgba(255,255,255,0.85) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  margin: 1px 0 0 !important;
  display: flex;
  align-items: center;
  gap: 4px;
}
.bz-conv-presence-dot {
  width: 6px;
  height: 6px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(74,222,128,0.8);
  animation: bzDotPulse 2s ease-in-out infinite;
}

/* Privacy banner */
.bz-conv-privacy {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border-bottom: 1px solid rgba(217,119,6,0.18);
  position: sticky;
  top: 60px;
  z-index: 20;
}
.bz-conv-privacy i {
  width: 14px; height: 14px;
  color: #d97706;
  flex-shrink: 0;
}
.bz-conv-privacy span {
  font-size: 10.5px;
  font-weight: 700;
  color: #78350f;
  line-height: 1.45;
}

/* Messages area */
.bz-conv-msgs {
  flex: 1;
  padding: 16px 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Subtle dotted pattern on cream */
  background-color: #f0e9e0;
  background-image:
    radial-gradient(rgba(220,38,38,0.05) 1.5px, transparent 1.5px),
    radial-gradient(rgba(217,119,6,0.04) 1.5px, transparent 1.5px);
  background-size: 32px 32px, 24px 24px;
  background-position: 0 0, 16px 16px;
}

/* Date separator */
.bz-conv-date-sep {
  display: flex;
  justify-content: center;
  margin: 14px 0 8px;
}
.bz-conv-date-sep span {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  color: var(--bz-text-soft);
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(24,24,27,0.06);
  box-shadow: 0 2px 6px rgba(24,24,27,0.06);
}

/* Messages */
.bz-conv-msg-row {
  display: flex;
  width: 100%;
  margin-bottom: 2px;
}
.bz-conv-msg-row.is-me { justify-content: flex-end; }
.bz-conv-msg-row.is-peer { justify-content: flex-start; }

.bz-conv-msg {
  position: relative;
  max-width: 78%;
  padding: 9px 13px 6px;
  font-size: 13.5px;
  line-height: 1.55;
  word-wrap: break-word;
  border-radius: 16px;
}
.bz-conv-msg-sent {
  background: var(--bz-grad-hero) !important;
  color: #fff !important;
  border-bottom-right-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 4px 12px -2px rgba(220,38,38,0.3);
}
.bz-conv-msg-received {
  background: #fff;
  color: var(--bz-text);
  border: 1px solid rgba(24,24,27,0.04);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 3px rgba(24,24,27,0.06);
}
.bz-conv-msg-text {
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: pre-wrap;
}
.bz-conv-msg-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 2px;
}
.bz-conv-msg-time {
  font-size: 9.5px;
  font-weight: 600;
  opacity: 0.7;
  white-space: nowrap;
}
.bz-conv-msg-sent .bz-conv-msg-time { color: rgba(255,255,255,0.85); }
.bz-conv-msg-received .bz-conv-msg-time { color: var(--bz-text-mute); }
.bz-conv-msg-read {
  width: 13px;
  height: 13px;
  opacity: 0.7;
}
.bz-conv-msg-sent .bz-conv-msg-read { color: rgba(255,255,255,0.9); }
.bz-conv-msg-read.is-read { color: #67e8f9 !important; opacity: 1; }

/* Empty state inside conversation */
.bz-conv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: var(--bz-text-mute);
  text-align: center;
}
.bz-conv-empty-icon {
  width: 72px;
  height: 72px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bz-red);
  box-shadow: 0 8px 20px -4px rgba(220,38,38,0.2);
  margin-bottom: 14px;
}
.bz-conv-empty-icon i { width: 32px; height: 32px; }
.bz-conv-empty p {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}

/* Input bar */
.bz-conv-input-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(24,24,27,0.06);
  box-shadow: 0 -4px 16px -8px rgba(24,24,27,0.08);
}
.bz-conv-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bz-bg-soft);
  border: 1.5px solid rgba(24,24,27,0.06);
  border-radius: 999px;
  padding: 4px 16px;
  transition: all 0.2s var(--bz-ease-out);
}
.bz-conv-input-wrap:focus-within {
  background: #fff;
  border-color: var(--bz-red);
  box-shadow: 0 0 0 4px rgba(220,38,38,0.10);
}
.bz-conv-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 10px 4px !important;
  color: var(--bz-text) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.bz-conv-input::placeholder {
  color: var(--bz-text-faint);
  font-weight: 500;
}

.bz-conv-send {
  width: 44px;
  height: 44px;
  border-radius: 50% !important;
  background: var(--bz-grad-hero) !important;
  color: #fff !important;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 6px 16px -4px rgba(220,38,38,0.45) !important;
  transition: transform 0.2s var(--bz-ease-spring), filter 0.2s !important;
}
.bz-conv-send:hover { transform: scale(1.06); filter: brightness(1.06); }
.bz-conv-send:active { transform: scale(0.92); }
.bz-conv-send i {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
  transform: rotate(180deg);
}

/* ==================================================
   ★ AI CHAT POPUP (وازاري) — تصميم مُحسَّن ★
   ================================================== */

#ai-chat-popup {
  background: linear-gradient(180deg, #faf6ef 0%, #f4ebe0 100%) !important;
}

/* Header refinements */
#ai-chat-popup header {
  background: var(--bz-grad-hero) !important;
  padding: 12px 14px !important;
  box-shadow: 0 6px 20px -4px rgba(220,38,38,0.4) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
#ai-chat-popup header::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
}

/* Avatar refinement */
#ai-chat-popup header > div:first-child .relative > div:first-child {
  width: 44px !important;
  height: 44px !important;
  background: rgba(255,255,255,0.95) !important;
  border: 2.5px solid rgba(255,255,255,0.8) !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.18),
    0 0 0 3px rgba(255,255,255,0.15) !important;
}
#ai-chat-popup header h1 {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
#ai-chat-popup header h2 {
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
#ai-chat-popup header span.text-red-100 {
  color: rgba(255,255,255,0.92) !important;
  font-weight: 600 !important;
  font-size: 10.5px;
}
/* presence dot */
#ai-chat-popup header > div:first-child .absolute {
  background: #4ade80 !important;
  border-color: #fff !important;
  box-shadow: 0 0 6px rgba(74,222,128,0.7);
  width: 10px !important;
  height: 10px !important;
  animation: bzDotPulse 2s ease-in-out infinite;
}
/* Close button */
#ai-chat-popup header button {
  background: rgba(255,255,255,0.18) !important;
  border-radius: 12px !important;
  padding: 8px !important;
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  transition: all 0.2s var(--bz-ease-spring);
}
#ai-chat-popup header button:hover {
  background: rgba(255,255,255,0.28) !important;
  transform: scale(1.05);
}

/* Chat box (background pattern) */
#ai-chat-popup #chat-box.chat-bg {
  background-color: #f0e9e0 !important;
  background-image:
    radial-gradient(rgba(220,38,38,0.06) 1.5px, transparent 1.5px),
    radial-gradient(rgba(217,119,6,0.05) 1.5px, transparent 1.5px) !important;
  background-size: 32px 32px, 24px 24px !important;
  background-position: 0 0, 16px 16px !important;
  padding: 18px 14px !important;
}

/* Message bubbles in AI chat */
#ai-chat-popup #chat-box .relative.bg-red-100 {
  background: var(--bz-grad-hero) !important;
  color: #fff !important;
  border-radius: 16px !important;
  border-top-right-radius: 4px !important;
  padding: 10px 14px 6px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 4px 12px -2px rgba(220,38,38,0.3) !important;
  max-width: 80% !important;
  font-weight: 500;
}
#ai-chat-popup #chat-box .relative.bg-red-100 p {
  color: #fff !important;
  letter-spacing: -0.005em;
  line-height: 1.55;
}
/* Hide the red SVG tail (replaced by border-radius) */
#ai-chat-popup #chat-box .relative.bg-red-100 > svg.text-red-100 { display: none; }

#ai-chat-popup #chat-box .relative.bg-white {
  background: #fff !important;
  color: var(--bz-text) !important;
  border-radius: 16px !important;
  border-top-left-radius: 4px !important;
  padding: 10px 14px 6px !important;
  border: 1px solid rgba(24,24,27,0.04);
  box-shadow: 0 1px 3px rgba(24,24,27,0.08) !important;
  max-width: 80% !important;
}
#ai-chat-popup #chat-box .relative.bg-white > svg.text-white { display: none; }

#ai-chat-popup #chat-box .opacity-70 {
  opacity: 0.7 !important;
  font-size: 9.5px;
}
#ai-chat-popup #chat-box .relative.bg-red-100 .opacity-70 { color: rgba(255,255,255,0.9) !important; }

/* Input area */
#ai-chat-popup #chat-input-area {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(24,24,27,0.06);
  padding: 10px 14px !important;
  box-shadow: 0 -4px 16px -8px rgba(24,24,27,0.1);
}

/* Text input wrapper */
#ai-chat-popup #text-input-mode > div:first-child {
  background: var(--bz-bg-soft) !important;
  border: 1.5px solid rgba(24,24,27,0.06) !important;
  border-radius: 22px !important;
  padding: 4px 12px !important;
  box-shadow: none !important;
  transition: all 0.2s var(--bz-ease-out);
}
#ai-chat-popup #text-input-mode > div:first-child:focus-within {
  background: #fff !important;
  border-color: var(--bz-red) !important;
  box-shadow: 0 0 0 4px rgba(220,38,38,0.10) !important;
}
#ai-chat-popup #ai-input-text {
  background: transparent !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  color: var(--bz-text) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#ai-chat-popup #ai-input-text:focus { box-shadow: none !important; outline: none !important; border: none !important; }

/* Send/Mic buttons (gradient hero) */
#ai-chat-popup #btn-send,
#ai-chat-popup #btn-mic,
#ai-chat-popup #btn-stop-recording {
  background: var(--bz-grad-hero) !important;
  width: 46px;
  height: 46px;
  border-radius: 50% !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 6px 16px -4px rgba(220,38,38,0.45) !important;
  transition: transform 0.2s var(--bz-ease-spring), filter 0.2s !important;
}
#ai-chat-popup #btn-send:hover,
#ai-chat-popup #btn-mic:hover,
#ai-chat-popup #btn-stop-recording:hover { transform: scale(1.06); filter: brightness(1.06); }
#ai-chat-popup #btn-send:active,
#ai-chat-popup #btn-mic:active,
#ai-chat-popup #btn-stop-recording:active { transform: scale(0.92); }
#ai-chat-popup #btn-send i,
#ai-chat-popup #btn-mic i,
#ai-chat-popup #btn-stop-recording i { width: 18px; height: 18px; stroke-width: 2.4; }

/* Cancel record button */
#ai-chat-popup #btn-cancel-recording {
  background: var(--bz-grad-soft) !important;
  color: var(--bz-red) !important;
  border-radius: 50% !important;
  width: 46px; height: 46px;
  border: 1px solid rgba(220,38,38,0.15) !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s var(--bz-ease-spring);
}
#ai-chat-popup #btn-cancel-recording:hover { transform: scale(1.06); background: linear-gradient(135deg, #fee2e2, #fecaca) !important; }

/* Recording mode container */
#ai-chat-popup #recording-mode > div:nth-child(2) {
  background: #fff !important;
  border: 1.5px solid rgba(220,38,38,0.18) !important;
  border-radius: 22px !important;
  padding: 12px 16px !important;
  box-shadow: 0 4px 12px -2px rgba(220,38,38,0.15);
}
#ai-chat-popup #recording-mode #recording-timer {
  color: var(--bz-text) !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
}
#ai-chat-popup #recording-mode .bg-red-500 {
  background: var(--bz-red) !important;
  box-shadow: 0 0 0 4px rgba(239,68,68,0.2);
  animation: bzDotPulse 1.2s ease-in-out infinite;
}

/* AI chat audio messages */
#ai-chat-popup .audio-toggle-btn {
  background: var(--bz-grad-hero) !important;
  color: #fff !important;
  width: 36px;
  height: 36px;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#ai-chat-popup .audio-progress {
  background: var(--bz-grad-hero) !important;
}
#ai-chat-popup .transcript-toggle-btn {
  background: rgba(255,255,255,0.85) !important;
  color: var(--bz-red) !important;
  border: 1px solid rgba(220,38,38,0.15);
  border-radius: 10px !important;
  padding: 6px !important;
}
#ai-chat-popup .transcript-toggle-btn:hover {
  background: var(--bz-grad-soft) !important;
}

/* ==================================================
   ★ MODALS — bottom-sheet redesign ★
   تظل تظهر من الأسفل لكن بمظهر أكثر فخامة
   ================================================== */
.modal-custom {
  border-radius: 32px 32px 0 0 !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--bz-bg-soft) 100%) !important;
  box-shadow:
    0 -32px 80px -8px rgba(220,38,38,0.14),
    0 -12px 32px rgba(24,24,27,0.14),
    0 -1px 0 rgba(220,38,38,0.06) !important;
  padding: 16px 22px 26px !important;
  max-height: 92vh !important;
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
  animation: bzModalSlideIn 0.45s var(--bz-ease-out) !important;
  border-top: 1px solid rgba(220,38,38,0.08);
  overflow-y: auto;
}
@keyframes bzModalSlideIn {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
/* Drag handle (overrides previous shorter handle) */
.modal-custom::before {
  content: '';
  display: block;
  width: 52px;
  height: 5px;
  background: linear-gradient(90deg, transparent 0%, rgba(220,38,38,0.28) 50%, transparent 100%);
  border-radius: 5px;
  margin: 4px auto 18px;
  position: sticky;
  top: 0;
}
/* عناوين modal الأساسية تنال نمط موحد */
.modal-custom > div:first-child h3 {
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: var(--bz-text) !important;
}
/* أزرار الإغلاق داخل الـmodal: تصميم موحد */
.modal-custom button.w-8.h-8.rounded-full.bg-gray-100,
.modal-custom button[onclick*="remove"][class*="rounded-full"][class*="bg-gray-100"] {
  background: var(--bz-bg-mute) !important;
  border: 1px solid rgba(24,24,27,0.06) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  transition: all 0.2s var(--bz-ease-spring);
}
.modal-custom button[class*="bg-gray-100"]:hover {
  background: var(--bz-grad-soft) !important;
  color: var(--bz-red) !important;
}

/* Overlay refinement */
#overlay {
  background: linear-gradient(180deg, rgba(15,15,20,0.55) 0%, rgba(20,15,25,0.7) 100%) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
}

/* ==================================================
   ★ UNIFIED PAGE LOADING — للشاشات الفرعية ★
   ================================================== */
.bz-page-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  min-height: 60vh;
  gap: 16px;
}
.bz-page-loading-spinner {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(from 0deg, transparent, transparent 55%, #fbbf24 75%, var(--bz-red) 95%, var(--bz-red-light) 100%);
  animation: bzLoaderSpin 1s linear infinite;
  filter: drop-shadow(0 8px 16px rgba(220,38,38,0.25));
}
.bz-page-loading-spinner::before {
  content: '';
  position: absolute;
  inset: 7px;
  background: var(--bz-bg);
  border-radius: 50%;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}
.bz-page-loading-spinner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--bz-red) 0%, transparent 25%);
  filter: blur(8px);
  opacity: 0.5;
  animation: bzLoaderSpin 1.2s linear infinite reverse;
}
@keyframes bzLoaderSpin {
  to { transform: rotate(360deg); }
}
.bz-page-loading-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--bz-text);
  letter-spacing: -0.015em;
  margin: 0;
}
.bz-page-loading-sub {
  font-size: 12px;
  color: var(--bz-text-mute);
  font-weight: 500;
  margin: 0;
  text-align: center;
  max-width: 280px;
  line-height: 1.6;
}

/* Subtle skeleton bars (optional decoration below spinner) */
.bz-page-loading-bars {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.bz-page-loading-bars span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bz-red);
  animation: bzBarBounce 1.2s ease-in-out infinite;
}
.bz-page-loading-bars span:nth-child(2) { animation-delay: 0.15s; }
.bz-page-loading-bars span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bzBarBounce {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50% { transform: translateY(-8px); opacity: 1; }
}

/* ==================================================
   ★ PRODUCT DETAIL — تحسينات طفيفة ★
   ================================================== */

/* Bottom action bar — أنيق وعصري */
#main-view > div:has(> button[onclick*="addToCartDetail"]),
.fixed.bottom-0.left-0.right-0.p-4.bg-white {
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(24,24,27,0.06) !important;
  box-shadow: 0 -8px 32px -8px rgba(24,24,27,0.12) !important;
  padding: 12px 16px !important;
}

/* Quantity selector في product detail */
.fixed.bottom-0 .bg-gray-100.rounded-xl {
  background: var(--bz-bg-mute) !important;
  border: 1px solid rgba(24,24,27,0.05);
  border-radius: 14px !important;
  height: 48px !important;
  padding: 0 6px !important;
}
.fixed.bottom-0 .bg-gray-100.rounded-xl button {
  width: 38px !important;
  height: 100% !important;
  color: var(--bz-text-soft) !important;
  border-radius: 10px !important;
  transition: all 0.15s var(--bz-ease-out);
}
.fixed.bottom-0 .bg-gray-100.rounded-xl button:hover {
  background: var(--bz-grad-soft) !important;
  color: var(--bz-red) !important;
}
.fixed.bottom-0 .bg-gray-100.rounded-xl #qty-display {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--bz-text) !important;
  width: 32px;
}

/* Add to cart CTA */
button[onclick="addToCartDetail()"] {
  background: var(--bz-grad-hero) !important;
  height: 48px !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em;
  border-radius: 14px !important;
  box-shadow: var(--bz-sh-button-red) !important;
  transition: transform 0.2s var(--bz-ease-spring), filter 0.2s !important;
  position: relative;
  overflow: hidden;
}
button[onclick="addToCartDetail()"]::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent);
  pointer-events: none;
  border-radius: inherit;
}
button[onclick="addToCartDetail()"]:hover { transform: translateY(-2px); filter: brightness(1.06); }
button[onclick="addToCartDetail()"]:active { transform: translateY(0) scale(0.98); }

/* Product header buttons (back, share, wishlist) — أكثر أناقة */
#product-detail-header .header-btn {
  background: rgba(0,0,0,0.28) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s var(--bz-ease-spring);
}
#product-detail-header .header-btn:hover {
  background: rgba(0,0,0,0.4) !important;
  transform: scale(1.05);
}
#product-detail-header .header-btn:active { transform: scale(0.92); }

/* Header bg لما scroll يصير white بدل semi-transparent */
#product-detail-header-bg.scrolled,
#product-detail-header-bg[style*="rgba(255,255,255,0.95)"] {
  border-bottom: 1px solid rgba(220,38,38,0.06) !important;
  box-shadow: 0 4px 20px -10px rgba(24,24,27,0.06);
}

/* Image container overlay refinement */
#product-image-content h1 {
  font-weight: 800 !important;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.3) !important;
  font-size: 24px !important;
}

/* Product detail body: drag handle */
.relative.z-10.bg-gray-50.rounded-t-\[30px\] > .w-12.h-1\.5.bg-gray-300 {
  width: 52px !important;
  height: 5px !important;
  background: linear-gradient(90deg, transparent, rgba(24,24,27,0.18), transparent) !important;
  border-radius: 5px !important;
  margin-top: 12px !important;
  margin-bottom: 22px !important;
}

/* Price card — modernize */
.relative.z-10 .bg-white.rounded-2xl.border.border-gray-200.shadow-sm.p-4 {
  background: linear-gradient(135deg, #ffffff 0%, var(--bz-bg-soft) 100%) !important;
  border: 1px solid rgba(220,38,38,0.10) !important;
  border-radius: 18px !important;
  padding: 16px 18px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 6px 18px -4px rgba(220,38,38,0.10) !important;
}
#main-price {
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em;
  color: var(--bz-red) !important;
}

/* Maker card — modernize with avatar shine */
div[onclick*="selectedStoreId"][onclick*="navigate('store')"] {
  background: linear-gradient(135deg, #ffffff, var(--bz-bg-soft)) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(24,24,27,0.05) !important;
  padding: 14px !important;
  transition: all 0.3s var(--bz-ease-out);
  box-shadow: var(--bz-sh-card);
}
div[onclick*="selectedStoreId"][onclick*="navigate('store')"]:hover {
  transform: translateY(-2px);
  border-color: rgba(220,38,38,0.12) !important;
  box-shadow: var(--bz-sh-card-hover);
}
div[onclick*="selectedStoreId"][onclick*="navigate('store')"] .w-12.h-12.rounded-full {
  width: 48px !important;
  height: 48px !important;
  padding: 2px !important;
  background: conic-gradient(from 0deg, #ef4444, #fbbf24, #ef4444, #b91c1c, #ef4444) !important;
  border: none !important;
}
div[onclick*="selectedStoreId"][onclick*="navigate('store')"] .w-12.h-12.rounded-full img {
  border: 2px solid #fff !important;
}

/* Section H3 titles inside product detail — موحدة */
.relative.z-10 h3.font-bold.text-gray-900 {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em;
  color: var(--bz-text) !important;
  margin-bottom: 10px !important;
}
.relative.z-10 h3.font-bold.text-gray-900 i {
  width: 16px !important;
  height: 16px !important;
}

/* Description card */
.relative.z-10 p.text-gray-600.text-sm.leading-7.bg-white {
  background: #ffffff !important;
  border: 1px solid rgba(24,24,27,0.05) !important;
  border-radius: 18px !important;
  padding: 16px 18px !important;
  line-height: 1.85 !important;
  font-size: 13.5px !important;
  color: var(--bz-text-soft) !important;
  font-weight: 500;
  box-shadow: var(--bz-sh-card);
}

/* Attributes grid cards refinement */
.relative.z-10 .bg-white.p-3.rounded-xl.border.border-gray-200 {
  background: #fff !important;
  border: 1px solid rgba(24,24,27,0.05) !important;
  border-radius: 14px !important;
  padding: 12px !important;
  box-shadow: var(--bz-sh-card);
}

/* Ingredients/package content cards */
.relative.z-10 .bg-orange-50.p-4.rounded-2xl.border.border-orange-100,
.relative.z-10 .bg-blue-50.p-4.rounded-2xl.border.border-blue-100 {
  border-radius: 16px !important;
  padding: 14px 16px !important;
  font-size: 12.5px !important;
  line-height: 1.7;
  font-weight: 500;
}

/* ==================================================
   40. Focus outline visible للوصولية
   ================================================== */
*:focus-visible {
  outline: 2px solid var(--bz-red);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ==================================================
   41. Add Product screen — category-aware redesign
   ================================================== */

/* Category accent tokens — switched via .bz-ap-shell modifier class */
.bz-ap-shell {
  --ap-accent: #18181b;
  --ap-accent-deep: #09090b;
  --ap-accent-soft: rgba(24,24,27,0.08);
  --ap-accent-bg: #fafafa;
  --ap-accent-rgb: 24,24,27;
  background: linear-gradient(180deg, var(--ap-accent-bg) 0%, #ffffff 280px);
  min-height: 100%;
  padding-bottom: 120px;
}
.bz-ap-shell--food {
  --ap-accent: #ea580c;
  --ap-accent-deep: #c2410c;
  --ap-accent-soft: #ffedd5;
  --ap-accent-bg: #fff7ed;
  --ap-accent-rgb: 234,88,12;
}
.bz-ap-shell--sweets {
  --ap-accent: #db2777;
  --ap-accent-deep: #9d174d;
  --ap-accent-soft: #fce7f3;
  --ap-accent-bg: #fdf2f8;
  --ap-accent-rgb: 219,39,119;
}
.bz-ap-shell--fashion {
  --ap-accent: #2563eb;
  --ap-accent-deep: #1e40af;
  --ap-accent-soft: #dbeafe;
  --ap-accent-bg: #eff6ff;
  --ap-accent-rgb: 37,99,235;
}
.bz-ap-shell--crafts {
  --ap-accent: #7c3aed;
  --ap-accent-deep: #5b21b6;
  --ap-accent-soft: #ede9fe;
  --ap-accent-bg: #f5f3ff;
  --ap-accent-rgb: 124,58,237;
}

/* Hero header */
.bz-ap-hero {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(24,24,27,0.06);
  box-shadow: 0 1px 0 rgba(var(--ap-accent-rgb), 0.06);
}
.bz-ap-hero-title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.bz-ap-hero-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ap-accent-soft);
  color: var(--ap-accent);
  flex-shrink: 0;
}
.bz-ap-hero-icon i { width: 16px; height: 16px; stroke-width: 2.4; }
.bz-ap-hero-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--bz-text) !important;
  margin: 0;
  letter-spacing: -0.02em;
}
.bz-ap-hero-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ap-accent);
  color: #fff;
  margin-inline-start: 6px;
}

/* Encouragement strip under hero */
.bz-ap-encourage {
  margin: 14px 16px 0;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--ap-accent-soft), rgba(255,255,255,0.5));
  border: 1px solid rgba(var(--ap-accent-rgb), 0.18);
  border-radius: 16px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.bz-ap-encourage-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--ap-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -4px rgba(var(--ap-accent-rgb), 0.25);
}
.bz-ap-encourage-text { flex: 1 1 auto; min-width: 0; }
.bz-ap-encourage-text p:first-child {
  font-size: 12px; font-weight: 800; color: var(--bz-text); margin: 0; line-height: 1.3;
}
.bz-ap-encourage-text p:last-child {
  font-size: 10.5px; color: var(--bz-text-mute); margin: 2px 0 0; line-height: 1.4;
}

/* Sections grid */
.bz-ap-content {
  padding: 14px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bz-ap-card {
  background: #fff;
  border: 1px solid rgba(24,24,27,0.06);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 1px 0 rgba(var(--ap-accent-rgb), 0.04), 0 8px 24px -16px rgba(24,24,27,0.08);
}
.bz-ap-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.bz-ap-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--bz-text) !important;
  margin: 0;
}
.bz-ap-card-title i { color: var(--ap-accent); width: 16px; height: 16px; }
.bz-ap-card-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ap-accent-soft);
  color: var(--ap-accent-deep);
}

/* Image grid + tiles */
.bz-ap-imgs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.bz-ap-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(24,24,27,0.08);
  background: #fff;
  cursor: pointer;
  transition: transform 0.2s var(--bz-ease-spring), box-shadow 0.2s, border-color 0.2s;
}
.bz-ap-tile:hover { box-shadow: 0 8px 24px -10px rgba(24,24,27,0.18); }
.bz-ap-tile.is-main {
  border-color: var(--ap-accent);
  box-shadow: 0 0 0 4px rgba(var(--ap-accent-rgb), 0.12);
}
.bz-ap-tile.is-invalid { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.10); }
.bz-ap-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.bz-ap-tile:hover img { transform: scale(1.04); }
.bz-ap-tile.is-invalid img { filter: grayscale(0.6); opacity: 0.78; }
.bz-ap-add-tile {
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  border: 2px dashed rgba(var(--ap-accent-rgb), 0.35);
  background: var(--ap-accent-soft);
  color: var(--ap-accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s var(--bz-ease-spring);
  font-weight: 700;
  font-size: 11px;
}
.bz-ap-add-tile:hover { background: rgba(var(--ap-accent-rgb), 0.18); transform: translateY(-1px); }
.bz-ap-add-tile-circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(var(--ap-accent-rgb), 0.18);
}

/* Image AI hint */
.bz-ap-ai-hint {
  margin-top: 10px;
  font-size: 10.5px;
  color: var(--bz-text-mute);
  display: flex;
  align-items: center;
  gap: 6px;
}
.bz-ap-ai-hint i { color: #6366f1; width: 13px; height: 13px; }

/* Form fields */
.bz-ap-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.bz-ap-field:last-child { margin-bottom: 0; }
.bz-ap-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bz-ap-field-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--bz-text-mute);
  letter-spacing: 0.02em;
}
.bz-ap-input,
.bz-ap-textarea,
.bz-ap-select {
  width: 100%;
  background: #fafafa !important;
  border: 1.5px solid rgba(24,24,27,0.08) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--bz-text) !important;
  transition: all 0.2s var(--bz-ease-out);
  font-family: inherit;
}
.bz-ap-textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.bz-ap-input:focus,
.bz-ap-textarea:focus,
.bz-ap-select:focus {
  background: #fff !important;
  border-color: var(--ap-accent) !important;
  box-shadow: 0 0 0 4px rgba(var(--ap-accent-rgb), 0.12) !important;
  outline: none !important;
}
.bz-ap-input.bz-ap-input-price {
  text-align: center;
  font-weight: 900 !important;
  font-size: 17px !important;
  letter-spacing: -0.01em;
}

/* AI sparkle button next to label */
.bz-ap-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 800;
  color: #6366f1;
  background: #eef2ff;
  border: none;
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.2s var(--bz-ease-out);
}
.bz-ap-ai-btn:hover { background: #e0e7ff; transform: translateY(-1px); }
.bz-ap-ai-btn i { width: 12px; height: 12px; }

/* Floating publish button */
.bz-ap-fab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255,255,255,0.6), #fff 35%);
  border-top: 1px solid rgba(24,24,27,0.05);
  z-index: 20;
}
.bz-ap-fab {
  width: 100%;
  background: linear-gradient(135deg, var(--ap-accent), var(--ap-accent-deep)) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 15px;
  padding: 15px 18px !important;
  border-radius: 16px !important;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 8px 24px -6px rgba(var(--ap-accent-rgb), 0.45);
  transition: transform 0.2s var(--bz-ease-spring), filter 0.2s;
}
.bz-ap-fab:hover { transform: translateY(-1px); filter: brightness(1.06); }
.bz-ap-fab:active { transform: scale(0.98); }
.bz-ap-fab:disabled { filter: grayscale(0.5) brightness(0.9); cursor: not-allowed; }

/* Radio-card option (replaces ad-hoc radio rows) */
.bz-ap-opt {
  display: flex;
  align-items: flex-start;
  padding: 12px;
  border: 1.5px solid rgba(24,24,27,0.08);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s var(--bz-ease-out);
  background: #fff;
  gap: 10px;
}
.bz-ap-opt:hover { background: #fafafa; }
.bz-ap-opt.is-active {
  background: var(--ap-accent-soft);
  border-color: var(--ap-accent);
}
.bz-ap-opt-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(24,24,27,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.bz-ap-opt.is-active .bz-ap-opt-dot { border-color: var(--ap-accent); }
.bz-ap-opt-dot::after {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ap-accent); transform: scale(0); transition: transform 0.2s var(--bz-ease-spring);
}
.bz-ap-opt.is-active .bz-ap-opt-dot::after { transform: scale(1); }
.bz-ap-opt-body { flex: 1 1 auto; min-width: 0; }
.bz-ap-opt-title { font-size: 13px; font-weight: 800; color: var(--bz-text); margin: 0; }
.bz-ap-opt-sub { font-size: 11px; color: var(--bz-text-mute); margin: 2px 0 0; line-height: 1.5; }

/* ==================================================
   42. Fashion Product Detail — variation picker + specs
   ================================================== */

.bz-fp-section {
  padding: 18px;
  margin: 0 16px 16px;
  background: #fff;
  border: 1px solid rgba(24,24,27,0.06);
  border-radius: 20px;
  box-shadow: 0 1px 0 rgba(220,38,38,0.04), 0 8px 24px -16px rgba(24,24,27,0.08);
}
.bz-fp-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--bz-text) !important;
  margin: 0 0 12px;
}
.bz-fp-section-title i { color: var(--bz-red); width: 16px; height: 16px; }

/* Specs as chips */
.bz-fp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bz-fp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fafafa;
  border: 1px solid rgba(24,24,27,0.06);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--bz-text-soft);
}
.bz-fp-chip i { width: 13px; height: 13px; color: var(--bz-text-mute); }
.bz-fp-chip-key { color: var(--bz-text-mute); font-weight: 600; }
.bz-fp-chip strong { font-weight: 800; color: var(--bz-text); }
.bz-fp-chip.bz-fp-chip-good { background: #dcfce7; border-color: #86efac; color: #14532d; }
.bz-fp-chip.bz-fp-chip-good i { color: #16a34a; }

/* Variation block */
.bz-fp-vary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.bz-fp-vary-head h4 {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--bz-text) !important;
  margin: 0;
}
.bz-fp-vary-selected {
  font-size: 11px;
  font-weight: 700;
  color: var(--bz-red);
  background: #fff5f5;
  padding: 3px 10px;
  border-radius: 999px;
}
.bz-fp-vary-selected.is-empty { color: var(--bz-text-faint); background: var(--bz-bg-mute); }

.bz-fp-vary-block { margin-bottom: 14px; }
.bz-fp-vary-block:last-child { margin-bottom: 0; }

/* Color swatches */
.bz-fp-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.bz-fp-color {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  transition: transform 0.2s var(--bz-ease-spring);
}
.bz-fp-color:hover { transform: translateY(-2px); }
.bz-fp-color-swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(24,24,27,0.08);
  box-shadow: inset 0 0 0 2px #fff, 0 2px 6px rgba(24,24,27,0.08);
  position: relative;
  transition: all 0.2s var(--bz-ease-spring);
}
.bz-fp-color.is-active .bz-fp-color-swatch {
  border-color: var(--bz-red);
  box-shadow: inset 0 0 0 3px #fff, 0 4px 12px rgba(220,38,38,0.32);
  transform: scale(1.08);
}
.bz-fp-color.is-active .bz-fp-color-swatch::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.bz-fp-color-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--bz-text-mute);
}
.bz-fp-color.is-active .bz-fp-color-label { color: var(--bz-red); }

/* Size grid */
.bz-fp-sizes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 8px;
}
.bz-fp-size {
  position: relative;
  padding: 10px 8px;
  background: #fff;
  border: 1.5px solid rgba(24,24,27,0.10);
  border-radius: 12px;
  font-weight: 800;
  font-size: 13px;
  color: var(--bz-text);
  cursor: pointer;
  transition: all 0.2s var(--bz-ease-spring);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.bz-fp-size:hover:not(:disabled):not(.is-out) { border-color: var(--bz-text-soft); transform: translateY(-1px); }
.bz-fp-size.is-active {
  background: var(--bz-text);
  border-color: var(--bz-text);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(24,24,27,0.4);
}
.bz-fp-size.is-out, .bz-fp-size:disabled {
  opacity: 0.4;
  background: #fafafa;
  border-color: rgba(24,24,27,0.06);
  cursor: not-allowed;
  text-decoration: line-through;
}
.bz-fp-size-stock {
  font-size: 9.5px;
  font-weight: 600;
  opacity: 0.65;
}
.bz-fp-size.is-active .bz-fp-size-stock { color: #fde68a; opacity: 1; }
.bz-fp-size.is-low::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: #f59e0b;
  border-radius: 50%;
  border: 2px solid #fff;
}

/* Stock indicator */
.bz-fp-stock {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s var(--bz-ease-out);
}
.bz-fp-stock-empty {
  background: var(--bz-bg-mute);
  color: var(--bz-text-mute);
  border: 1px dashed rgba(24,24,27,0.12);
  justify-content: center;
}
.bz-fp-stock-good {
  background: #dcfce7;
  color: #14532d;
  border: 1px solid #86efac;
}
.bz-fp-stock-low {
  background: #fef3c7;
  color: #78350f;
  border: 1px solid #fcd34d;
}
.bz-fp-stock-out {
  background: #fee2e2;
  color: #7f1d1d;
  border: 1px solid #fca5a5;
}
.bz-fp-stock i { width: 16px; height: 16px; }
.bz-fp-stock-bar {
  flex: 1;
  height: 6px;
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.bz-fp-stock-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s var(--bz-ease-out), background 0.3s;
}
.bz-fp-stock-good .bz-fp-stock-bar-fill { background: #16a34a; }
.bz-fp-stock-low .bz-fp-stock-bar-fill { background: #f59e0b; }

/* Selection summary line under stock */
.bz-fp-summary {
  margin-top: 12px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #fff5f5, #fff);
  border: 1px dashed rgba(220,38,38,0.20);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bz-fp-summary-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--bz-text);
}
.bz-fp-summary-price {
  font-size: 14px;
  font-weight: 900;
  color: var(--bz-red);
}

/* ==================================================
   43. Quick top progress loader (للنقر على المنتجات)
   ================================================== */

.bz-quick-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
  background: rgba(220,38,38,0.10);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
.bz-quick-loader.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.18s ease;
}
.bz-quick-loader::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 35%;
  background: linear-gradient(90deg, transparent 0%, rgba(220,38,38,0.4) 30%, var(--bz-red) 50%, rgba(220,38,38,0.4) 70%, transparent 100%);
  border-radius: 999px;
  animation: bz-loader-slide 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes bz-loader-slide {
  0%   { left: -35%; }
  100% { left: 100%; }
}

/* ==================================================
   44. AI mic recording state — pulse + ring
   ================================================== */

#btn-record-ai {
  transition: transform 0.2s var(--bz-ease-spring), box-shadow 0.3s, background-color 0.2s;
}
#btn-record-ai.is-recording {
  transform: scale(1.08);
  box-shadow:
    0 0 0 8px rgba(220, 38, 38, 0.18),
    0 0 0 16px rgba(220, 38, 38, 0.08),
    0 8px 24px rgba(220, 38, 38, 0.32);
  animation: bz-mic-pulse 1.4s ease-in-out infinite;
}
#btn-record-ai.is-recording::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(220, 38, 38, 0.45);
  animation: bz-mic-ring 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}
@keyframes bz-mic-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 8px rgba(220, 38, 38, 0.18),
      0 0 0 16px rgba(220, 38, 38, 0.08),
      0 8px 24px rgba(220, 38, 38, 0.32);
  }
  50% {
    box-shadow:
      0 0 0 14px rgba(220, 38, 38, 0.10),
      0 0 0 24px rgba(220, 38, 38, 0.04),
      0 8px 24px rgba(220, 38, 38, 0.32);
  }
}
@keyframes bz-mic-ring {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ==================================================
   45. AI suggestion cards (مودال الصياغة الذكية)
   ================================================== */

.bz-ai-sug {
  position: relative;
  padding: 14px 16px 14px 14px;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.2s var(--bz-ease-spring), box-shadow 0.25s, border-color 0.2s;
  box-shadow: 0 1px 0 rgba(24,24,27,0.02), 0 4px 12px -8px rgba(24,24,27,0.08);
  overflow: hidden;
}
.bz-ai-sug:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(24,24,27,0.02), 0 12px 28px -10px rgba(24,24,27,0.18);
}
.bz-ai-sug:active { transform: translateY(0); }

.bz-ai-sug-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.bz-ai-sug-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.bz-ai-sug-label i { width: 12px; height: 12px; }
.bz-ai-sug-pick {
  font-size: 10.5px;
  font-weight: 800;
  opacity: 0.6;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: opacity 0.2s, transform 0.2s;
}
.bz-ai-sug-pick::after {
  content: '←';
  font-size: 14px;
  display: inline-block;
  transform: translateX(0);
  transition: transform 0.25s var(--bz-ease-spring);
}
.bz-ai-sug:hover .bz-ai-sug-pick { opacity: 1; }
.bz-ai-sug:hover .bz-ai-sug-pick::after { transform: translateX(-3px); }

.bz-ai-sug-text {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--bz-text);
  font-weight: 600;
  margin: 0;
  padding-inline-start: 6px;
}

.bz-ai-sug-num {
  position: absolute;
  top: 12px;
  inset-inline-end: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  border: 2px solid #fff;
  opacity: 0.5;
}

/* ==================================================
   ★ CUSTOMER SUPPORT TICKETS ★
   شاشة الدعم الفني (قائمة + محادثة) — مضافة 2026-04-28
   ================================================== */

/* بطاقة "الدعم الفني" في إعدادات حسابي — badge عداد الردود */
.bz-acc-setting-badge {
  background: var(--bz-grad-hero);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  margin-inline-start: auto;
  margin-inline-end: 4px;
  min-width: 20px;
  text-align: center;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 10px -2px rgba(220,38,38,0.4);
}

/* Intro card في أعلى صفحة الدعم */
.bz-tk-intro {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 16px 16px;
  padding: 14px 16px;
  background: var(--bz-grad-soft);
  border: 1px solid rgba(220,38,38,0.10);
  border-radius: var(--bz-r-md);
}
.bz-tk-intro-icon {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: var(--bz-grad-hero);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -2px rgba(220,38,38,0.4);
}
.bz-tk-intro-icon i { width: 20px; height: 20px; }
.bz-tk-intro-body h3 {
  font-size: 14px;
  font-weight: 800;
  color: var(--bz-text);
  margin: 0 0 2px;
  letter-spacing: -0.015em;
}
.bz-tk-intro-body p {
  font-size: 12px;
  color: var(--bz-text-soft);
  margin: 0;
  line-height: 1.5;
}

/* Tickets list */
.bz-tk-list {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Loading skeleton */
.bz-tk-skel {
  height: 90px;
  background: linear-gradient(90deg, #e4e4e7 0%, #f4f4f5 50%, #e4e4e7 100%);
  background-size: 200% 100%;
  border-radius: var(--bz-r-md);
  animation: bzSkeletonSlide 1.6s linear infinite;
  margin-bottom: 12px;
}

/* Ticket card */
.bz-tk-card {
  background: #ffffff;
  border: 1px solid rgba(24,24,27,0.05);
  border-radius: var(--bz-r-md);
  padding: 14px 16px;
  cursor: pointer;
  position: relative;
  box-shadow: var(--bz-sh-card);
  transition: transform 0.25s var(--bz-ease-out), box-shadow 0.25s, border-color 0.25s;
}
.bz-tk-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--bz-sh-card-hover);
  border-color: rgba(220,38,38,0.12);
}
.bz-tk-card:active { transform: translateY(0) scale(0.99); }

.bz-tk-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.bz-tk-card-id {
  font-size: 11px;
  font-weight: 700;
  color: var(--bz-text-mute);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}
.bz-tk-card-subject {
  font-size: 14px;
  font-weight: 800;
  color: var(--bz-text);
  margin: 0 0 6px;
  letter-spacing: -0.015em;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bz-tk-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--bz-text-mute);
  font-weight: 600;
  margin-bottom: 4px;
}
.bz-tk-card-cat {
  background: var(--bz-bg-mute);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.bz-tk-card-dot { color: var(--bz-text-faint); }
.bz-tk-card-time { color: var(--bz-text-faint); }
.bz-tk-card-last {
  font-size: 12px;
  color: var(--bz-text-soft);
  margin: 6px 0 0;
  font-weight: 500;
  line-height: 1.45;
  border-top: 1px solid rgba(24,24,27,0.04);
  padding-top: 8px;
}
.bz-tk-card-unread {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  background: var(--bz-grad-hero);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  box-shadow: 0 4px 10px -2px rgba(220,38,38,0.4);
  animation: bzDotPulse 2s ease-in-out infinite;
}

/* Status badges */
.bz-tk-status {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: -0.01em;
}
.bz-st-new     { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1d4ed8; border: 1px solid rgba(29,78,216,0.15); }
.bz-st-prog    { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; border: 1px solid rgba(146,64,14,0.15); }
.bz-st-wait    { background: linear-gradient(135deg, #fff5f5, #fee2e2); color: var(--bz-red); border: 1px solid rgba(220,38,38,0.15); }
.bz-st-done    { background: linear-gradient(135deg, #f0fdf4, #dcfce7); color: #16a34a; border: 1px solid rgba(22,163,74,0.18); }
.bz-st-closed  { background: var(--bz-bg-mute); color: var(--bz-text-mute); border: 1px solid rgba(24,24,27,0.08); }
.bz-st-esc     { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b; border: 1px solid rgba(153,27,27,0.18); }

/* Empty state */
.bz-tk-empty {
  text-align: center;
  padding: 60px 24px;
}
.bz-tk-empty-icon {
  width: 64px; height: 64px;
  color: var(--bz-text-faint);
  margin: 0 auto 16px;
  filter: drop-shadow(0 6px 14px rgba(161,161,170,0.3));
}
.bz-tk-empty h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--bz-text);
  margin-bottom: 6px;
  letter-spacing: -0.015em;
}
.bz-tk-empty p {
  font-size: 13px;
  color: var(--bz-text-mute);
  margin-bottom: 20px;
  line-height: 1.5;
}
.bz-tk-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bz-grad-hero);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 11px 20px;
  border-radius: var(--bz-r-md);
  border: none;
  cursor: pointer;
  box-shadow: var(--bz-sh-button-red);
  transition: transform 0.2s var(--bz-ease-spring);
}
.bz-tk-empty-btn:hover  { transform: translateY(-2px); filter: brightness(1.06); }
.bz-tk-empty-btn:active { transform: translateY(0) scale(0.97); }

/* Floating "+ تذكرة جديدة" button */
.bz-tk-fab-create {
  position: fixed;
  bottom: 100px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bz-grad-hero);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  padding: 12px 22px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  box-shadow: var(--bz-sh-floating);
  z-index: 45;
  transition: transform 0.25s var(--bz-ease-spring);
}
[dir="rtl"] .bz-tk-fab-create { transform: translateX(-50%); }
.bz-tk-fab-create:hover  { transform: translateX(50%) translateY(-2px); }
[dir="rtl"] .bz-tk-fab-create:hover { transform: translateX(-50%) translateY(-2px); }
.bz-tk-fab-create:active { transform: translateX(50%) scale(0.96); }
[dir="rtl"] .bz-tk-fab-create:active { transform: translateX(-50%) scale(0.96); }
.bz-tk-fab-create i { width: 18px; height: 18px; }

/* ================ Thread (محادثة التذكرة) ================ */
.bz-tk-thread-meta-loading { padding: 8px 16px; }
.bz-tk-thread-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 16px 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(24,24,27,0.05);
  border-radius: var(--bz-r-md);
  box-shadow: var(--bz-sh-card);
}
.bz-tk-thread-subject { flex: 1; min-width: 0; }
.bz-tk-thread-subject h3 {
  font-size: 14px;
  font-weight: 800;
  color: var(--bz-text);
  margin: 0 0 6px;
  letter-spacing: -0.015em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bz-tk-thread-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bz-tk-thread-cat {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--bz-text-mute);
  background: var(--bz-bg-mute);
  padding: 2px 8px;
  border-radius: 999px;
}
.bz-tk-thread-close-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  color: #16a34a;
  border: 1.5px solid rgba(22,163,74,0.25);
  font-weight: 700;
  font-size: 11.5px;
  padding: 8px 12px;
  border-radius: var(--bz-r-md);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s var(--bz-ease-out);
}
.bz-tk-thread-close-btn:hover  { background: linear-gradient(135deg, #dcfce7, #bbf7d0); transform: translateY(-1px); }
.bz-tk-thread-close-btn:active { transform: scale(0.96); }

.bz-tk-thread-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  min-height: 300px;
  max-height: calc(100vh - 320px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 16px 12px;
  background: var(--bz-bg-soft);
  border: 1px solid rgba(24,24,27,0.04);
  border-radius: var(--bz-r-md);
}
.bz-tk-thread-loading,
.bz-tk-thread-empty,
.bz-tk-thread-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--bz-text-mute);
  font-size: 13px;
  gap: 8px;
}
.bz-tk-thread-error { color: var(--bz-red); font-weight: 700; }

.bz-tk-msg-sender {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--bz-red);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

/* Input area */
.bz-tk-thread-input {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 0 16px 16px;
  padding: 8px;
  background: #fff;
  border: 1px solid rgba(24,24,27,0.05);
  border-radius: var(--bz-r-lg);
  box-shadow: var(--bz-sh-card);
}
.bz-tk-thread-input textarea {
  flex: 1;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  border: none !important;
  outline: none;
  resize: none;
  background: transparent !important;
  padding: 8px 10px;
  max-height: 120px;
  line-height: 1.5;
  color: var(--bz-text);
  box-shadow: none !important;
}
.bz-tk-thread-input textarea:focus {
  box-shadow: none !important;
  border: none !important;
}
.bz-tk-thread-input button {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bz-grad-hero);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--bz-sh-button-red);
  transition: transform 0.2s var(--bz-ease-spring);
}
.bz-tk-thread-input button:hover  { transform: scale(1.06); }
.bz-tk-thread-input button:active { transform: scale(0.92); }
.bz-tk-thread-input button:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

.bz-tk-thread-closed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 16px 16px;
  padding: 14px;
  background: var(--bz-bg-mute);
  color: var(--bz-text-mute);
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--bz-r-md);
  border: 1px dashed rgba(24,24,27,0.1);
}

/* Confirm "تم الحل" modal — أزرار التأكيد */
.bz-tk-confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(24,24,27,0.06);
}
.bz-tk-confirm-btn-yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  padding: 14px 20px;
  border-radius: var(--bz-r-md);
  border: none;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 6px 18px -4px rgba(22,163,74,0.42),
    0 2px 6px rgba(22,163,74,0.22);
  transition: transform 0.2s var(--bz-ease-spring), filter 0.2s;
}
.bz-tk-confirm-btn-yes:hover  { transform: translateY(-2px); filter: brightness(1.06); }
.bz-tk-confirm-btn-yes:active { transform: translateY(0) scale(0.97); }
.bz-tk-confirm-btn-yes:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

.bz-tk-confirm-btn-no {
  background: var(--bz-bg-mute);
  color: var(--bz-text);
  font-weight: 700;
  font-size: 14px;
  padding: 13px 20px;
  border-radius: var(--bz-r-md);
  border: 1.5px solid rgba(24,24,27,0.06);
  cursor: pointer;
  transition: all 0.2s var(--bz-ease-out);
}
.bz-tk-confirm-btn-no:hover  { background: rgba(24,24,27,0.06); border-color: rgba(24,24,27,0.12); }
.bz-tk-confirm-btn-no:active { transform: scale(0.97); }

/* ==================================================
   END
   ================================================== */