/* ==========================================================================
   CabFlow Dispatch System Stylesheet
   ========================================================================== */

/* --- Icon Wrapper Styling --- */
.feature-icon-wrapper {
  width: 60px;
  height: 60px;
  background-color: var(--cb-primary, #323d8d);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: var(--cb-transition-fast, all 0.25s ease);
  box-shadow: var(--cb-shadow-sm, 0 4px 12px rgba(0, 0, 0, 0.05));
  border: 1px solid transparent;
}

/* Normal State: Icon explicitly white */
.feature-icon-wrapper i {
  color: #ffffff;
  font-size: 1.25rem;
  display: inline-block;
  transition: color 0.25s ease;
}

/* Small Variant for Side-by-Side Admin Cards */
.feature-icon-wrapper.sm {
  width: 48px;
  height: 48px;
  margin-bottom: 0;
}

.feature-icon-wrapper.sm i {
  font-size: 1.1rem;
}

/* --- Feature Cards & Hover Effects --- */
.feature-box {
  border: 1px solid #e2e8f0;
  transition: var(--cb-transition-smooth, all 0.4s ease);
  position: relative;
  overflow: hidden;
  background-color: var(--cb-surface-white, #ffffff);
}

.feature-box:hover {
  transform: translateY(-5px);
  box-shadow: var(--cb-shadow-md, 0 8px 24px rgba(50, 61, 141, 0.12)) !important;
  border-color: var(--cb-accent-cyan, #98d7fc);
}

/* HOVER STATE: Background White & Icon Primary Color */
.feature-box:hover .feature-icon-wrapper {
  background-color: #ffffff !important;
  border-color: var(--cb-primary, #323d8d);
  transform: scale(1.08);
}

.feature-box:hover .feature-icon-wrapper i {
  color: var(--cb-primary, #323d8d) !important;
}

/* Bottom Border Accent */
.border-bottom-cyan {
  border-bottom: 3px solid var(--cb-accent-cyan, #98d7fc) !important;
}

/* --- Layout Utility Classes --- */
.cb-bg-light {
  background-color: var(--cb-bg-light, #f8fafc) !important;
}

.max-w-700 {
  max-width: 700px;
}

.tracking-wide {
  letter-spacing: 1px;
}

.py-2-5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

/* --- Form Improvements --- */
#dispatchContactForm .form-control {
  border: 1px solid #cbd5e1;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  transition: var(--cb-transition-fast, all 0.25s ease);
}

#dispatchContactForm .form-control:focus {
  border-color: var(--cb-primary, #323d8d);
  box-shadow: 0 0 0 0.2rem rgba(50, 61, 141, 0.15);
}

/* --- Image Container Handling --- */
.object-fit-cover {
  object-fit: cover;
}



/* --- Hero & Custom Button Borders --- */
.btn-cb-primary {
  background-color: var(--cb-primary, #323d8d) !important;
  color: #ffffff !important;
  border: 2px solid var(--cb-primary, #323d8d) !important;
  transition: var(--cb-transition-fast, all 0.25s ease);
}

.btn-cb-primary:hover {
  background-color: var(--cb-primary-dark, #242c6a) !important;
  border-color: var(--cb-primary-dark, #242c6a) !important;
  color: #ffffff !important;
}

.btn-outline-cb-dark {
  background-color: transparent !important;
  color: var(--cb-text-dark, #0f172a) !important;
  border: 2px solid var(--cb-text-dark, #0f172a) !important;
  transition: var(--cb-transition-fast, all 0.25s ease);
}

.btn-outline-cb-dark:hover {
  background-color: var(--cb-text-dark, #0f172a) !important;
  color: #ffffff !important;
  border-color: var(--cb-text-dark, #0f172a) !important;
}


/* --- Admin Feature Cards Styling --- */
.admin-feature-card {
  transition: var(--cb-transition-fast, all 0.25s ease);
  cursor: pointer;
}

.admin-feature-card:hover {
  background-color: #ffffff !important;
  border-color: var(--cb-primary, #323d8d) !important;
  box-shadow: 0 8px 20px rgba(50, 61, 141, 0.08) !important;
  transform: translateX(6px);
}

.admin-feature-card:hover .feature-icon-wrapper {
  background-color: var(--cb-primary, #323d8d) !important;
  border-color: var(--cb-primary, #323d8d) !important;
}

.admin-feature-card:hover .feature-icon-wrapper i {
  color: #ffffff !important;
}

.admin-feature-card:hover .fa-chevron-right {
  color: var(--cb-primary, #323d8d) !important;
  opacity: 1 !important;
  transform: translateX(3px);
  transition: all 0.25s ease;
}

/* --- Hero Section Extra Top Spacing --- */
.dispatch-hero-section {
  padding-top: 6rem !important; 
}