/* Import Bootstrap CSS */
@import 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css';

/* Sticky Navigation Fix */
.navbar.sticky-top {
  position: sticky !important;
  top: 0 !important;
  z-index: 1030 !important;
}

/* Custom Motortech Performance Theme Variables */
:root {
  /* Motortech Performance Dark Theme */
  --bs-primary: #00c4ea; /* Cyan */
  --bs-primary-rgb: 0, 196, 234;
  --bs-secondary: #262626; /* Dark gray */
  --bs-secondary-rgb: 38, 38, 38;
  --bs-success: #28a745;
  --bs-info: #17a2b8;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #121212; /* Very dark background */
  
  /* Custom Motortech colors */
  --motorsport-gold: #00c4ea;
  --motorsport-dark: #121212;
  --motorsport-gray: #262626;
  --motorsport-light-gray: #d9d9d9;
  
  /* Background and text colors */
  --bs-body-bg: #121212;
  --bs-body-color: #f8f9fa;
  
  /* Card colors */
  --bs-card-bg: #1a1a1a;
  --bs-card-color: #f8f9fa;
  
  /* Border colors */
  --bs-border-color: #333333;
  
  /* Link colors */
  --bs-link-color: #00c4ea;
  --bs-link-hover-color: #33d1ff;
  
  /* Gradients */
  --gradient-gold: linear-gradient(135deg, #00c4ea, #0099cc);
  --gradient-dark: linear-gradient(180deg, #121212, #1f1f1f);
  
  /* Shadows */
  --shadow-gold: 0 10px 30px -10px rgba(0, 196, 234, 0.3);
  --shadow-dark: 0 10px 40px -15px rgba(0, 0, 0, 0.8);
  
  /* Transitions */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Override Bootstrap's default styles for dark theme */
body {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
}

/* Custom button variants */
.btn-motorsport {
  background-color: var(--motorsport-gold);
  border-color: var(--motorsport-gold);
  color: var(--motorsport-dark);
  font-weight: 600;
  box-shadow: var(--shadow-gold);
  transition: var(--transition-smooth);
}

.btn-motorsport:hover {
  background-color: #000000;
  border-color: #000000;
  color: var(--motorsport-gold);
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-motorsport-outline {
  background-color: transparent;
  border-color: var(--motorsport-gold);
  color: var(--motorsport-gold);
  font-weight: 600;
  transition: var(--transition-smooth);
}

.btn-motorsport-outline:hover {
  background-color: var(--motorsport-gold);
  border-color: var(--motorsport-gold);
  color: var(--motorsport-dark);
  transform: translateY(-2px);
}

/* Custom card styles */
.card {
  background-color: var(--bs-card-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-card-color) !important;
  transition: var(--transition-smooth);
}

.card:hover {
  box-shadow: var(--shadow-gold);
  border-color: rgba(0, 196, 234, 0.3) !important;
}

/* Custom navbar styles */
.navbar {
  background-color: var(--bs-body-bg) !important;
  border-bottom: 1px solid var(--bs-border-color) !important;
}

.navbar-nav .nav-link {
  color: var(--bs-body-color) !important;
  transition: var(--transition-smooth);
}

.navbar-nav .nav-link:hover {
  color: var(--motorsport-gold) !important;
}

/* Custom text colors */
.text-primary {
  color: var(--motorsport-gold) !important;
}

.text-muted {
  color: #6c757d !important;
}

/* Global heading colors */
h3 {
  color: #f8f9fa !important;
}

h4 {
  color: #f8f9fa !important;
}

/* Custom background utilities */
.bg-muted {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Custom spacing utilities */
.py-20 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

/* Custom grid utilities */
.grid-cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 991.98px) {
  .grid-cols-3 {
    grid-template-columns: 1fr;
  }
}

/* Custom animations */
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    transform: translate3d(0, -30px, 0);
  }
  70% {
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}

.animate-bounce {
  animation: bounce 2s infinite;
}

/* Custom utilities */
.min-h-screen {
  min-height: 100vh;
}

.leading-tight {
  line-height: 1.25;
}

.leading-relaxed {
  line-height: 1.625;
}

/* Custom form styles */
.form-control {
  background-color: var(--motorsport-gray) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

.form-control:focus {
  background-color: var(--motorsport-gray) !important;
  border-color: var(--motorsport-gold) !important;
  color: var(--bs-body-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 196, 234, 0.25) !important;
}

/* Custom list styles */
.list-unstyled li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--motorsport-gold);
  border-radius: 50%;
  margin-right: 0.5rem;
  margin-top: 0.5rem;
}

/* Additional Bootstrap overrides for dark theme */
.navbar-brand {
  color: var(--bs-body-color) !important;
}

.navbar-toggler {
  border-color: var(--bs-border-color) !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28248, 249, 250, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Custom hover effects */
.hover-primary:hover {
  color: var(--motorsport-gold) !important;
}

/* Custom spacing utilities */
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

/* Custom display utilities */
.d-inline-flex { display: inline-flex !important; }

/* Custom flex utilities */
.flex-fill { flex: 1 1 auto !important; }

/* Custom text utilities */
.text-sm { font-size: 0.875rem !important; }

/* Custom border utilities */
.border-secondary { border-color: var(--bs-border-color) !important; }

/* Custom background utilities */
.bg-body { background-color: var(--bs-body-bg) !important; }

/* Custom opacity utilities */
.bg-opacity-10 { --bs-bg-opacity: 0.1 !important; }

/* Custom shadow utilities */
.shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }

/* Custom rounded utilities */
.rounded-3 { border-radius: 1rem !important; }

/* Custom position utilities */
.translate-middle-x { transform: translateX(-50%) !important; }

/* Custom z-index utilities */
.z-0 { z-index: 0 !important; }
.z-10 { z-index: 10 !important; }

/* Custom overflow utilities */
.overflow-hidden { overflow: hidden !important; }

/* Custom object-fit utilities */
.object-cover { object-fit: cover !important; }

/* Custom width/height utilities */
.w-16 { width: 4rem !important; }
.h-16 { height: 4rem !important; }

/* Custom margin utilities */
.me-2 { margin-right: 0.5rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.mt-1 { margin-top: 0.25rem !important; }

/* Custom padding utilities */
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }

/* Custom font weight utilities */
.fw-medium { font-weight: 500 !important; }

/* Custom line height utilities */
.leading-tight { line-height: 1.25 !important; }
.leading-relaxed { line-height: 1.625 !important; }

/* Custom max-width utilities */
.max-w-3xl { max-width: 48rem !important; }
.max-w-4xl { max-width: 56rem !important; }

/* Custom height utilities */
.h-100 { height: 100% !important; }

/* Custom width utilities */
.w-100 { width: 100% !important; }

/* Custom flex utilities */
.flex-column { flex-direction: column !important; }
.flex-sm-row { flex-direction: row !important; }

@media (min-width: 576px) {
  .flex-sm-row { flex-direction: row !important; }
}

/* Custom grid utilities for responsive design */
@media (max-width: 767.98px) {
  .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

/* CMS Content Styling */
.cms-content h1 {
  color: #f8f9fa !important;
  font-weight: bold !important;
  margin-bottom: 1.5rem !important;
  font-size: 2rem !important;
}

.cms-content h2 {
  color: #f8f9fa !important;
  font-weight: bold !important;
  margin-bottom: 1rem !important;
}

.cms-content h3 {
  color: #f8f9fa !important;
  font-weight: 600 !important;
  margin-bottom: 0.75rem !important;
}

.cms-content h4 {
  color: #f8f9fa !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
}

/* Vehicle Lookup API Overrides - Only for form field descriptions */
#vehicle-lookup-container .form-label,
#vehicle-lookup-container label,
#vehicle-lookup-container .form-text,
#vehicle-lookup-container .help-text,
#vehicle-lookup-container .field-description {
  color: #ffffff !important;
}

#vehicle-lookup-container .form-control,
#vehicle-lookup-container .form-select {
  background-color: #333333 !important;
  border-color: #555555 !important;
  color: #ffffff !important;
}

#vehicle-lookup-container .form-control:focus,
#vehicle-lookup-container .form-select:focus {
  background-color: #333333 !important;
  border-color: #00c4ea !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 196, 234, 0.25) !important;
}

#vehicle-lookup-container .btn-primary {
  background-color: #00c4ea !important;
  border-color: #00c4ea !important;
  color: #000000 !important;
}

#vehicle-lookup-container .btn-primary:hover {
  background-color: #33d1ff !important;
  border-color: #33d1ff !important;
  color: #000000 !important;
}