@font-face {
  font-family: "BrightAI Official";
  src: url("/frontend/assets/fonts/TheYearofTheCamel-Medium.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BrightAI Official";
  src: url("/frontend/assets/fonts/TheYearofTheCamel-Medium.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --brightai-logo: url("/frontend/assets/images/logo.png");
  --brightai-ink: #08111f;
  --brightai-panel: rgba(15, 23, 42, 0.82);
  --brightai-panel-soft: rgba(255, 255, 255, 0.055);
  --brightai-line: rgba(148, 163, 184, 0.22);
  --brightai-line-strong: rgba(45, 212, 191, 0.38);
  --brightai-text: #f8fafc;
  --brightai-muted: #cbd5e1;
  --brightai-accent: #2dd4bf;
  --brightai-warm: #f7c948;
  --brightai-radius: 8px;
  --brightai-control: 44px;
  --brightai-container: 1180px;
  color-scheme: dark light;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
  scroll-padding-block-start: max(4.5rem, env(safe-area-inset-top));
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-width: 0;
  min-block-size: 100dvh;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[dir="rtl"] *,
html[lang^="ar"] *,
[dir="rtl"] :where(button, input, select, textarea, a, p, span, h1, h2, h3, h4, h5, h6, strong, div) {
  font-family: "BrightAI Official", "BrightAI Official", "BrightAI Official", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* Fix Font Awesome icons after global Arabic font override */
html[dir="rtl"] :where(.fa, .fa-solid, .fas),
html[lang^="ar"] :where(.fa, .fa-solid, .fas),
[dir="rtl"] :where(.fa, .fa-solid, .fas) {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-style: normal !important;
}

html[dir="rtl"] :where(.fa-regular, .far),
html[lang^="ar"] :where(.fa-regular, .far),
[dir="rtl"] :where(.fa-regular, .far) {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

html[dir="rtl"] :where(.fa-brands, .fab),
html[lang^="ar"] :where(.fa-brands, .fab),
[dir="rtl"] :where(.fa-brands, .fab) {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:where(img, svg, video, canvas, iframe) {
  max-inline-size: 100%;
}

:where(img, video, canvas) {
  block-size: auto;
}

:where(iframe, embed, object) {
  max-inline-size: 100%;
}

:where(a, button, input, select, textarea, summary, [role="button"]) {
  touch-action: manipulation;
}

:where(button, input, select, textarea) {
  font: inherit;
}

:where(input, select, textarea) {
  max-inline-size: 100%;
  min-block-size: var(--brightai-control);
}

@media (max-width: 700px) {
  :where(input, select, textarea) {
    font-size: 16px;
  }
}

:where(a, button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], summary) {
  min-block-size: var(--brightai-control);
}

:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--brightai-accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(45, 212, 191, 0.18);
}

:where(h1, h2, h3) {
  text-wrap: balance;
}

:where(p, li, dd, figcaption, label, a, button) {
  overflow-wrap: anywhere;
}

:where(main, section, article, aside, header, footer, nav, form, dl, .container, .section, .hero, .content-container, .page-content, .main-viewport) {
  min-inline-size: 0;
}

:where(.container, .nav-container, .section, .content-container, .page-content) {
  max-inline-size: 100%;
}

:where(.grid, [class*="grid-cols-"], [class*="columns-"], [class*="flex"]) > * {
  min-inline-size: 0;
}

:where(section, article, aside):not(:has(:focus-visible)) {
  content-visibility: auto;
  contain-intrinsic-size: auto 540px;
}

:where(.hero, .hero-section, [class*="hero"]) {
  content-visibility: visible;
}

.brightai-brand-image,
.brightai-injected-logo,
:where(.brand, .nav-logo, .sidebar-logo, .footer-brand, .auth-brand, .logo-box, .brand-icon) img {
  inline-size: clamp(2.25rem, 6vw, 3.25rem);
  block-size: clamp(2.25rem, 6vw, 3.25rem);
  object-fit: contain;
  border-radius: 8px;
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 18px rgba(45, 212, 191, 0.18));
}

:where(.nav-logo, .brand, .sidebar-logo, .footer-brand, .auth-brand) {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-inline-size: 0;
}

.sidebar-brand {
  position: relative;
}

.sidebar-brand:not(:has(img))::before {
  content: "";
  display: block;
  inline-size: 42px;
  block-size: 42px;
  margin-block-end: 0.65rem;
  border-radius: 8px;
  background: center / contain no-repeat var(--brightai-logo);
  filter: drop-shadow(0 10px 18px rgba(45, 212, 191, 0.2));
}

.brand-icon.brightai-brand-image {
  display: block;
  margin-block-end: 0.75rem;
}

:where(.unified-nav, .demo-nav, .site-header, .top-nav, header[role="banner"], .topbar) {
  isolation: isolate;
}

:where(.unified-nav, .demo-nav, .site-header, .top-nav, header[role="banner"]) :where(nav, .nav-links, .nav-desktop, .header-actions) {
  min-inline-size: 0;
}

:where(.nav-links, .nav-desktop, .header-actions, .hero-actions, .form-actions, .dash-cta) {
  align-items: center;
  gap: 0.65rem;
}

:where(.btn, .btn-primary, .btn-secondary, .btn-outline, .nav-cta, .nav-cta-pill, .primary-button, .secondary-button, .logout-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-block-size: var(--brightai-control);
  min-inline-size: var(--brightai-control);
  max-inline-size: 100%;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: normal;
}

:where(.card, .dash-section, .feature-card, .summary-card, .metric-card, .pricing-card, .quick-answer, .login-box, .result-panel) {
  overflow: hidden;
}

:where(.case-grid, .cards-grid, .summary-grid, .trust-grid, .pricing-grid, .features-grid, .stats-grid, .dashboard-layout-grid, .dashboard-grid, .metrics-grid, .kpi-grid) {
  min-inline-size: 0;
}

:where(.glass, .glass-card, .panel, .dashboard-panel, .table-card, .chart-card, .metric-card, .stat-card) {
  max-inline-size: 100%;
}

:where(table) {
  inline-size: 100%;
  border-collapse: collapse;
}

:where(.table-shell, .table-wrapper, .table-container, .data-table, .comparison-table, .bai-inline-0155) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-inline-size: 100%;
}

.brightai-responsive-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-inline-size: 100%;
}

.brightai-responsive-table > table {
  min-inline-size: 640px;
}

:where([dir="rtl"] table, html[dir="rtl"] table) {
  text-align: start;
}

.skip-link {
  position: fixed;
  inset-block-start: max(0.75rem, env(safe-area-inset-top));
  inset-inline-start: max(0.75rem, env(safe-area-inset-left));
  z-index: 10000;
  transform: translateY(calc(-100% - 1.5rem));
  transition: transform 160ms ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}

body.bright-page--dashboard {
  overflow-x: hidden;
}

body.bright-page--dashboard :where(.content-container, .page-content, .main-viewport) {
  min-inline-size: 0;
}

body:is(.bright-page--dashboard, .bright-page--kernel) {
  background-color: #060914;
}

body:is(.bright-page--dashboard, .bright-page--kernel) :where(main, header, footer, aside, section, article, .grid, .flex, .overflow-x-auto) {
  min-inline-size: 0;
}

body:is(.bright-page--dashboard, .bright-page--kernel) :where(.overflow-x-auto, .table-wrapper, .table-container, .brightai-responsive-table) {
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable both-edges;
}

body:is(.bright-page--dashboard, .bright-page--kernel) :where(th, td) {
  vertical-align: middle;
}

body:is(.bright-page--dashboard, .bright-page--kernel) :where(input, textarea, select) {
  background-clip: padding-box;
}

body.bright-page--kernel #chat-area {
  overflow-anchor: auto;
  scroll-padding-block: 1rem;
}

body.bright-page--kernel #chat-area > div {
  max-inline-size: min(88vw, 46rem) !important;
}

body.bright-page--kernel :where(#message-input, #chatInput) {
  min-block-size: 3rem;
  max-block-size: 36dvh;
}

body.bright-page--dashboard :where(#sidebarToggle, #mobileMenuBtn, #menuBtn),
body.bright-page--kernel :where(#sidebar-toggle, #menuBtn) {
  min-inline-size: var(--brightai-control);
  min-block-size: var(--brightai-control);
}

body.bright-page--dashboard :where(.sidebar-logo, .sidebar-brand) {
  min-inline-size: 0;
}

body.bright-page--dashboard .sidebar-logo img {
  inline-size: 32px;
  block-size: 32px;
}

body.bright-page--dashboard :where(.chart-card, .card, .dashboard-panel) {
  min-inline-size: 0;
}

@media (max-width: 1024px) {
  body.bright-page--dashboard :where(.main-viewport, .main-content) {
    margin-inline: 0 !important;
  }

  body.bright-page--dashboard .sidebar {
    transform: translateX(100%);
  }

  html[dir="rtl"] body.bright-page--dashboard .sidebar,
  body.bright-page--dashboard[dir="rtl"] .sidebar {
    transform: translateX(-100%);
  }

  body.bright-page--dashboard .sidebar.is-mobile-active,
  body.bright-page--dashboard.sidebar-open .sidebar {
    transform: translateX(0) !important;
  }
}

@media (max-width: 1023px) {
  body.bright-page--dashboard :where(main, .main-viewport, .main-content) {
    margin-inline: 0 !important;
  }

  body.bright-page--dashboard #sidebar {
    inline-size: min(84vw, 18rem);
    max-inline-size: calc(100vw - 1rem);
    box-shadow: -18px 0 46px rgba(2, 6, 23, 0.36);
  }

  body.bright-page--dashboard #sidebarToggle {
    inset-block-start: max(0.85rem, env(safe-area-inset-top));
    inset-inline-end: max(0.85rem, env(safe-area-inset-right));
  }

  body:is(.bright-page--dashboard, .bright-page--kernel) :where(.sticky, header) {
    scroll-margin-block-start: max(4.25rem, env(safe-area-inset-top));
  }
}

@media (max-width: 780px) {
  :where(.unified-nav, .demo-nav, .site-header, .top-nav, header[role="banner"] > nav, .topbar) {
    gap: 0.75rem;
  }

  :where(.nav-links, .nav-desktop) {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    max-inline-size: 100%;
  }

  :where(.nav-links, .nav-desktop)::-webkit-scrollbar {
    display: none;
  }

  :where(.nav-links, .nav-desktop) a {
    flex: 0 0 auto;
  }

  :where(.hero, .hero-section, .section, .content-container, .page-content) {
    padding-inline: max(1rem, env(safe-area-inset-left));
  }

  :where(.hero-copy, .quick-answer, .demo-form, .result-panel, .login-box) {
    padding: clamp(1rem, 5vw, 1.35rem);
  }

  :where(.btn, .btn-primary, .btn-secondary, .btn-outline, .nav-cta, .nav-cta-pill) {
    inline-size: 100%;
  }

  :where(.hero-actions, .form-actions, .dash-cta, .sitewide-cta-actions, .actions) {
    align-items: stretch;
  }

  body:is(.bright-page--dashboard, .bright-page--kernel) :where(main, section) {
    padding-inline: max(1rem, env(safe-area-inset-left)) !important;
  }

  body:is(.bright-page--dashboard, .bright-page--kernel) :where(.grid) {
    gap: 1rem;
  }

  body:is(.bright-page--dashboard, .bright-page--kernel) :where(.rounded-2xl, .rounded-xl) {
    border-radius: 0.75rem;
  }
}

@media (max-width: 540px) {
  :where(.stats-grid, .summary-grid, .metrics-grid, .dashboard-grid, [class*="grid-cols-"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :where(.nav-links, .nav-desktop, .header-actions) {
    padding-block-end: 0.25rem;
  }

  body:is(.bright-page--dashboard, .bright-page--kernel) :where(.overflow-x-auto, .brightai-responsive-table) {
    margin-inline: -0.35rem;
    padding-inline: 0.35rem;
  }

  body.bright-page--kernel :where(#chat-area) {
    padding-inline: 0.75rem !important;
  }

  body.bright-page--kernel #chat-area > div {
    max-inline-size: 94vw !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   UNIFIED HEADER & PREMIUM DROPDOWN SYSTEM
   ========================================================================== */

/* 1. Container & Layout direction */
.dropdown-container {
  position: relative;
}

.dropdown-menu {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  right: 50% !important;
  transform: translateX(50%) translateY(10px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  min-width: 260px !important;
  background: rgba(8, 14, 28, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  padding: 10px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.6), 0 0 30px 2px rgba(0, 212, 255, 0.15) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 999 !important;
}

.dropdown-menu::before {
  content: '' !important;
  position: absolute !important;
  top: -6px !important;
  right: 50% !important;
  transform: translateX(50%) rotate(45deg) !important;
  width: 12px !important;
  height: 12px !important;
  background: rgba(8, 14, 28, 0.98) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Hover & Focus state */
.dropdown-container:hover .dropdown-menu,
.dropdown-container:focus-within .dropdown-menu,
.dropdown-container button[aria-expanded="true"] + .dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(50%) translateY(0) !important;
}

/* Solutions specific wider dropdown */
.dropdown-menu.solutions-dropdown {
  min-width: 380px !important;
  right: 50% !important;
  transform: translateX(50%) translateY(10px) !important;
}

.dropdown-container:hover .dropdown-menu.solutions-dropdown,
.dropdown-container:focus-within .dropdown-menu.solutions-dropdown,
.dropdown-container button[aria-expanded="true"] + .dropdown-menu.solutions-dropdown {
  transform: translateX(50%) translateY(0) !important;
}

/* Dropdown items */
.dropdown-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  text-align: right !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: linear-gradient(90deg, rgba(0, 212, 255, 0.1) 0%, rgba(124, 92, 255, 0.1) 100%) !important;
  color: #00d4ff !important;
  padding-right: 18px !important;
  outline: none !important;
}

.dropdown-item i {
  font-size: 16px !important;
  margin-top: 3px !important;
  color: #00d4ff !important;
  transition: transform 0.25s ease !important;
}

.dropdown-item:hover i,
.dropdown-item:focus i {
  transform: scale(1.1) !important;
}

.dropdown-item span.font-bold {
  display: block !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.dropdown-item:hover span.font-bold,
.dropdown-item:focus span.font-bold {
  color: #00d4ff !important;
}

.dropdown-item span.text-xs {
  display: block !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  margin-top: 4px !important;
}

/* Chevron animations */
.dropdown-container button i.fa-chevron-down {
  transition: transform 0.25s ease !important;
}

.dropdown-container:hover button i.fa-chevron-down,
.dropdown-container:focus-within button i.fa-chevron-down {
  transform: rotate(180deg) !important;
}

/* Custom styles to prevent layout shifts */
header[role="banner"] {
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* ==========================================================================
   GLOBAL TEXT & CARD CENTER ALIGNMENT
   محاذاة مركزية عامة للنصوص والبطاقات في جميع الصفحات
   ========================================================================== */

/* محاذاة النصوص والعناوين في المنتصف */
:where(
  h1, h2, h3, h4, h5, h6,
  p, 
  .hero-title, 
  .section-title, 
  .card-title,
  .feature-title,
  .metric-title,
  .stat-title,
  .pricing-title,
  .testimonial-text,
  .description,
  .subtitle,
  .lead-text
) {
  text-align: center !important;
}

/* محاذاة البطاقات والعناصر في المنتصف */
:where(
  .card,
  .feature-card,
  .metric-card,
  .stat-card,
  .pricing-card,
  .service-card,
  .solution-card,
  .benefit-card,
  .testimonial-card,
  .team-card,
  .glass,
  .glass-card,
  .panel,
  .dashboard-panel
) {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* محاذاة محتوى البطاقات */
:where(
  .card-content,
  .card-body,
  .feature-content,
  .metric-content,
  .stat-content
) {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* محاذاة الأيقونات في المنتصف */
:where(
  .icon,
  .feature-icon,
  .metric-icon,
  .stat-icon,
  .card-icon,
  .service-icon
) {
  margin-inline: auto !important;
  text-align: center !important;
}

/* محاذاة الأزرار والروابط في المنتصف */
:where(
  .actions,
  .card-actions,
  .hero-actions,
  .cta-actions,
  .button-group
) {
  justify-content: center !important;
  text-align: center !important;
}

/* محاذاة القوائم في المنتصف */
:where(
  .features-list,
  .benefits-list,
  .checklist,
  .stats-list
) {
  text-align: center !important;
}

/* محاذاة الأقسام الرئيسية */
:where(
  section,
  .section,
  .hero,
  .hero-section,
  .features-section,
  .benefits-section,
  .pricing-section,
  .testimonials-section,
  .cta-section
) > :where(h1, h2, h3, h4, h5, h6, p, .subtitle, .description) {
  text-align: center !important;
}

/* استثناءات للعناصر التي يجب أن تبقى على اليمين/اليسار */
:where(
  nav,
  .nav-links,
  .breadcrumb,
  .topbar,
  .sidebar,
  .sidebar-nav,
  .table,
  table,
  th,
  td,
  .form-group,
  .input-group,
  label,
  input,
  textarea,
  select,
  .alert,
  .notification,
  .toast,
  .dropdown-menu,
  .dropdown-item,
  .menu,
  .menu-item
) {
  text-align: start !important;
}

/* استثناء للنصوص الطويلة في المقالات */
:where(
  article p,
  .article-content p,
  .blog-content p,
  .post-content p,
  .long-text,
  .prose p
) {
  text-align: start !important;
}