/* ============================================
   Custom Professional Theme — AI SaaS Platform
   Arabic-First RTL + Modern Color Scheme
   ============================================ */

/* ── Google Fonts: IBM Plex Sans Arabic (Professional Arabic Font) ── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

/* ── CSS Variables Override ── */
:root {
  /* Primary: Deep Indigo/Violet — professional AI feel */
  --primary: 252 85% 60%;
  --primary-foreground: 0 0% 100%;

  /* Secondary: Cool Slate */
  --secondary: 215 20% 95%;
  --secondary-foreground: 215 25% 27%;

  /* Accent: Teal/Emerald — trust & innovation */
  --accent: 168 76% 42%;
  --accent-foreground: 0 0% 100%;

  /* Backgrounds */
  --background: 220 20% 98%;
  --foreground: 220 15% 20%;
  --heading-foreground: 220 25% 12%;

  /* Cards */
  --card-background: 0 0% 100%;
  --card-border: 220 15% 91%;
  --card-rounded: 16px;
  --card-shadow: 0 4px 24px -4px hsl(220 40% 10% / 6%);

  /* Navbar */
  --navbar-background: 0 0% 100%;
  --navbar-foreground: 220 15% 40%;
  --navbar-foreground-active: 252 85% 60%;
  --navbar-background-active: 252 85% 97%;
  --navbar-background-hover: 220 15% 96%;

  /* Buttons */
  --button-rounded: 12px;
  --button-border: transparent;

  /* Inputs */
  --input-background: 0 0% 100%;
  --input-foreground: 220 15% 20%;
  --input-border: 220 15% 88%;
  --input-rounded-multiplier: 1;

  /* Border */
  --border: 220 15% 91%;

  /* Fonts */
  --font-heading: 'IBM Plex Sans Arabic', sans-serif;
  --font-body: 'IBM Plex Sans Arabic', sans-serif;
}

/* ── Dark Mode ── */
.theme-dark,
[data-theme="dark"] {
  --primary: 252 85% 68%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 20% 16%;
  --secondary-foreground: 220 10% 80%;
  --accent: 168 76% 50%;
  --accent-foreground: 0 0% 100%;
  --background: 225 20% 8%;
  --foreground: 220 10% 85%;
  --heading-foreground: 0 0% 95%;
  --card-background: 225 18% 11%;
  --card-border: 225 15% 18%;
  --card-shadow: 0 4px 24px -4px hsl(0 0% 0% / 20%);
  --navbar-background: 225 18% 11%;
  --navbar-foreground: 220 10% 65%;
  --navbar-foreground-active: 252 85% 72%;
  --navbar-background-active: 252 60% 15%;
  --navbar-background-hover: 225 15% 15%;
  --input-background: 225 15% 14%;
  --input-foreground: 220 10% 85%;
  --input-border: 225 15% 20%;
  --border: 225 15% 18%;
}

/* ── Arabic Typography ── */
body,
html {
  font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.font-heading {
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ── RTL Enhancements ── */
[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] .lqd-navbar {
  direction: rtl;
}

[dir="rtl"] .text-start {
  text-align: right !important;
}

[dir="rtl"] .text-end {
  text-align: left !important;
}

/* Fix sidebar padding for RTL */
[dir="rtl"] .lqd-navbar-inner {
  padding-right: 0;
  padding-left: 0;
}

/* ── Professional Button Styles ── */
.btn-primary,
.lqd-btn-primary,
button[type="submit"].bg-primary,
a.bg-primary {
  background: linear-gradient(135deg, hsl(252 85% 60%), hsl(252 85% 50%)) !important;
  border: none !important;
  box-shadow: 0 4px 15px -3px hsl(252 85% 60% / 40%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-primary:hover,
.lqd-btn-primary:hover,
button[type="submit"].bg-primary:hover,
a.bg-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 25px -5px hsl(252 85% 60% / 50%);
}

/* ── Card Enhancements ── */
.lqd-card,
[class*="card"] {
  border: 1px solid hsl(var(--card-border));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lqd-card:hover,
[class*="card"]:hover {
  box-shadow: 0 8px 30px -6px hsl(220 40% 10% / 10%);
}

/* ── Sidebar/Navbar Professional Styling ── */
.lqd-navbar {
  border-right: 1px solid hsl(var(--border));
  background: hsl(var(--navbar-background));
  backdrop-filter: blur(20px);
}

[dir="rtl"] .lqd-navbar {
  border-right: none;
  border-left: 1px solid hsl(var(--border));
}

.lqd-navbar a.active,
.lqd-navbar a[aria-current="page"] {
  background: hsl(var(--navbar-background-active));
  color: hsl(var(--navbar-foreground-active));
  font-weight: 600;
}

/* ── Input Focus Glow ── */
input:focus,
textarea:focus,
select:focus {
  border-color: hsl(252 85% 60%) !important;
  box-shadow: 0 0 0 3px hsl(252 85% 60% / 12%) !important;
  outline: none !important;
  transition: all 0.2s ease;
}

/* ── Landing Page Hero Enhancements ── */
.site-header {
  backdrop-filter: blur(20px) saturate(180%);
  background: hsl(var(--background) / 85%) !important;
  border-bottom: 1px solid hsl(var(--border));
}

/* Hero gradient background */
.banner-bg,
.site-hero-bg {
  background: linear-gradient(160deg,
    hsl(252 85% 60% / 8%) 0%,
    hsl(168 76% 42% / 6%) 50%,
    hsl(var(--background)) 100%) !important;
}

/* ── Smooth Scrollbar ── */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--background));
}

::-webkit-scrollbar-thumb {
  background: hsl(220 15% 75%);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(220 15% 55%);
}

/* ── Dashboard Stats Cards ── */
.lqd-statistic-card {
  background: linear-gradient(135deg,
    hsl(var(--card-background)) 0%,
    hsl(252 85% 98%) 100%);
  border: 1px solid hsl(var(--card-border));
}

/* ── Premium Badge Styling ── */
.badge-premium,
.lqd-premium-badge {
  background: linear-gradient(135deg, hsl(252 85% 60%), hsl(280 75% 55%));
  color: white;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

/* ── Loading Animation ── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.loading-shimmer {
  background: linear-gradient(90deg,
    hsl(var(--card-background)) 25%,
    hsl(252 85% 97%) 50%,
    hsl(var(--card-background)) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* ── Responsive Improvements ── */
@media (max-width: 768px) {
  h1 { font-size: 1.75rem !important; }
  h2 { font-size: 1.5rem !important; }
  
  .lqd-navbar {
    backdrop-filter: blur(20px) saturate(180%);
  }
}

/* ── Pricing Cards Enhancement ── */
.pricing-card-popular,
.pricing-highlighted {
  border: 2px solid hsl(252 85% 60%) !important;
  box-shadow: 0 12px 40px -8px hsl(252 85% 60% / 20%);
  position: relative;
}

.pricing-card-popular::before,
.pricing-highlighted::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, hsl(252 85% 60%), hsl(168 76% 42%));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── Chat Interface Polish ── */
.lqd-chat-message {
  border-radius: 16px;
  padding: 12px 18px;
}

.lqd-chat-message-ai {
  background: hsl(var(--secondary));
  border-bottom-left-radius: 4px;
}

[dir="rtl"] .lqd-chat-message-ai {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 4px;
}

.lqd-chat-message-user {
  background: linear-gradient(135deg, hsl(252 85% 60%), hsl(252 70% 52%));
  color: white;
  border-bottom-right-radius: 4px;
}

[dir="rtl"] .lqd-chat-message-user {
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 4px;
}

/* ── Template Cards Grid ── */
.lqd-template-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lqd-template-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px -8px hsl(220 40% 10% / 12%);
}