/* Small additions on top of Tailwind CDN utilities — mostly RTL fixes and the mega-menu. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Cairo:wght@400;500;600;700;800&display=swap');

:root {
  --brand-dark: #14342b;
  --brand-accent: #3f7d52;
  --brand-cream: #f3ecda;
}

html[lang="ar"] body {
  font-family: 'Cairo', 'Inter', sans-serif;
}
html[lang="en"] body {
  font-family: 'Inter', 'Cairo', sans-serif;
}

/* Category flyout menu — recursive nested submenus, hover-driven, any depth */
.flyout-panel-list {
  padding: 0.25rem 0;
  min-width: 224px;
}
.flyout-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: #1e293b;
  white-space: nowrap;
}
.flyout-link:hover { background: #f1f5f9; color: var(--brand-accent); }
.flyout-panel {
  display: none;
  position: absolute;
  top: -1px;
  inset-inline-start: 100%;
  z-index: 50;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  box-shadow: 0 12px 24px -8px rgba(15, 37, 64, 0.18);
}
.flyout-item:hover > .flyout-panel { display: block; }

/* Mobile nav */
#mobile-nav { display: none; }
#mobile-nav.open { display: block; }

/* Line clamp fallback-safe */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Spec table */
.spec-table tr:nth-child(even) { background: #f8fafc; }

/* RTL-only tweaks Tailwind's logical utilities don't cover */
html[dir="rtl"] .rtl-flip { transform: scaleX(-1); }