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

:root {
  /* Brand colors */
  --primary-blue: #192F65; /* Primary navy blue */
  --accent-blue: #4A69BD; /* Modern blue accent */
  --light-blue: #6C7FCC; /* Light blue for hover states */
  --pale-blue: #E8F0FF; /* Very light blue for backgrounds */
  
  /* Neutral colors */
  --white: #FFFFFF;
  --off-white: #FAFBFC;
  --light-gray: #F8F9FA;
  --medium-gray: #E9ECEF;
  --gray: #6C757D;
  --dark-gray: #495057;
  --charcoal: #2C3E50;
  
  /* Text colors */
  --text-primary: #2C3E50; /* Main text color */
  --text-secondary: #6C757D; /* Secondary text */
  --text-muted: #95A5A6; /* Muted text */
  
  /* Footer colors */
  --footer-bg: #1A2332; /* Professional dark footer */
  --footer-text: #E9ECEF;
  --footer-text-light: #ADB5BD;
}

/* Base styles */
body {
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  line-height: 1.6;
}

/* Ensure content wrapper takes available space */
.content-wrapper {
  flex: 1 0 auto;
}

/* Ensure footer stays at bottom */
footer {
  flex-shrink: 0;
}

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

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

/* RTL/LTR support - Enhanced with body classes */
html[lang="ar"], 
html[dir="rtl"],
body.rtl-layout {
  direction: rtl !important;
  text-align: right;
}

html[lang="en"], 
html[dir="ltr"],
body.ltr-layout {
  direction: ltr !important;
  text-align: left;
}

/* Force RTL for Arabic content */
.rtl-layout * {
  direction: inherit;
}

/* Ensure Bootstrap RTL compatibility */
.rtl-layout .container,
.rtl-layout .row,
.rtl-layout .col,
.rtl-layout [class*="col-"] {
  direction: rtl;
}

/* Fix navbar alignment in RTL */
.rtl-layout .navbar-nav {
  direction: rtl;
}

.rtl-layout .dropdown-menu {
  right: 0;
  left: auto;
}

/* Brand elements */
/* Navbar and footer backgrounds are now defined in their respective CSS files
.navbar, footer {
  background-color: var(--primary-blue);
  color: var(--white);
} */

.btn-primary {
  background-color: var(--accent-blue);
  border-color: var(--accent-blue);
  color: var(--white);
  font-weight: 500;
  padding: 0.5rem 1.5rem;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(25, 47, 101, 0.15);
}

.btn-secondary {
  background-color: var(--white);
  border-color: var(--accent-blue);
  color: var(--accent-blue);
  font-weight: 500;
  padding: 0.5rem 1.5rem;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background-color: var(--accent-blue);
  border-color: var(--accent-blue);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74, 105, 189, 0.15);
}

.display-4{
  font-size: 3.5rem;
  font-weight: bolder;
  color: var(--text-primary);
}

.sub-display{
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text-secondary);
}

/* Standardized text colors */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: 600;
}

p {
  color: var(--text-primary);
}

.text-muted {
  color: var(--text-muted) !important;
}

/* Link styles */
a {
  color: var(--accent-blue);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--primary-blue);
  text-decoration: none;
}

/* Card styles */
.card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.card-body {
  padding: 1.5rem;
}

.card-title {
  color: var(--text-primary);
  font-weight: 600;
}

.card-text {
  color: var(--text-secondary);
}

/* Price styling */
.price {
  color: var(--accent-blue);
  font-weight: 600;
  font-size: 1.25rem;
}

.price-old {
  color: var(--text-muted);
  text-decoration: line-through;
  font-size: 1rem;
}

/* Badge styles */
.badge-primary {
  background-color: var(--accent-blue);
  color: var(--white);
}

.badge-secondary {
  background-color: var(--light-gray);
  color: var(--text-secondary);
}

/* Form styles */
.form-control {
  border-color: var(--medium-gray);
  color: var(--text-primary);
}

.form-control:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 0.2rem rgba(74, 105, 189, 0.25);
}