/*
  Vanbase Bootstrap 5 overrides
  Load this after bootstrap.min.css
*/

:root {
  --vb-orange: #f7931d;
  --vb-orange-dark: #d97800;
  --vb-orange-soft: #ffb14a;
  --vb-navy: #0f2d4f;
  --vb-navy-strong: #0a213a;
  --vb-slate: #4d5c6c;
  --vb-charcoal: #1e252d;
  --vb-steel: #d9e0e7;
  --vb-ice: #f4f7fa;
  --vb-white: #ffffff;

  --bs-primary: var(--vb-orange);
  --bs-primary-rgb: 247, 147, 29;
  --bs-secondary: var(--vb-navy);
  --bs-secondary-rgb: 15, 45, 79;
  --bs-dark: var(--vb-charcoal);
  --bs-dark-rgb: 30, 37, 45;
  --bs-light: var(--vb-ice);
  --bs-light-rgb: 244, 247, 250;
  --bs-body-color: #23303c;
  --bs-body-color-rgb: 35, 48, 60;
  --bs-body-bg: #ffffff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-border-color: #d7dee6;
  --bs-border-color-translucent: rgba(15, 45, 79, 0.12);
  --bs-link-color: var(--vb-orange);
  --bs-link-hover-color: var(--vb-orange-dark);
  --bs-heading-color: var(--vb-navy-strong);
  --bs-emphasis-color: var(--vb-navy-strong);
  --bs-secondary-color: #5f6d7c;

  --bs-primary-text-emphasis: #7a4200;
  --bs-primary-bg-subtle: #fff2df;
  --bs-primary-border-subtle: #ffd49a;
  --bs-secondary-text-emphasis: #0a213a;
  --bs-secondary-bg-subtle: #dde7f1;
  --bs-secondary-border-subtle: #b8c8d8;
  --bs-dark-text-emphasis: #11161c;
  --bs-dark-bg-subtle: #dde1e6;
  --bs-dark-border-subtle: #b9c0c8;
}

body {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
}

h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  color: var(--bs-heading-color);
  font-weight: 700;
}

.navbar,
.bg-body-tertiary {
  background-color: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(10px);
}

.btn-primary {
  --bs-btn-color: #1f1a12;
  --bs-btn-bg: var(--vb-orange);
  --bs-btn-border-color: var(--vb-orange);
  --bs-btn-hover-color: #1f1a12;
  --bs-btn-hover-bg: var(--vb-orange-soft);
  --bs-btn-hover-border-color: var(--vb-orange-soft);
  --bs-btn-focus-shadow-rgb: 247, 147, 29;
  --bs-btn-active-color: #1f1a12;
  --bs-btn-active-bg: var(--vb-orange-dark);
  --bs-btn-active-border-color: var(--vb-orange-dark);
  --bs-btn-disabled-color: #1f1a12;
  --bs-btn-disabled-bg: #f8bb6a;
  --bs-btn-disabled-border-color: #f8bb6a;
  font-weight: 700;
}

.btn-outline-primary {
  --bs-btn-color: var(--vb-orange);
  --bs-btn-border-color: var(--vb-orange);
  --bs-btn-hover-color: #1f1a12;
  --bs-btn-hover-bg: var(--vb-orange);
  --bs-btn-hover-border-color: var(--vb-orange);
  --bs-btn-focus-shadow-rgb: 247, 147, 29;
  --bs-btn-active-color: #1f1a12;
  --bs-btn-active-bg: var(--vb-orange-dark);
  --bs-btn-active-border-color: var(--vb-orange-dark);
}

.btn-secondary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--vb-navy);
  --bs-btn-border-color: var(--vb-navy);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #15385f;
  --bs-btn-hover-border-color: #15385f;
  --bs-btn-focus-shadow-rgb: 15, 45, 79;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--vb-navy-strong);
  --bs-btn-active-border-color: var(--vb-navy-strong);
}

.text-primary {
  color: var(--vb-orange) !important;
}

.text-secondary {
  color: var(--vb-navy) !important;
}

.bg-primary {
  background-color: var(--vb-orange) !important;
}

.bg-secondary {
  background-color: var(--vb-navy) !important;
}

.bg-dark {
  background-color: var(--vb-charcoal) !important;
}

.link-primary {
  color: var(--vb-orange) !important;
}

.link-primary:hover,
.link-primary:focus {
  color: var(--vb-orange-dark) !important;
}

.card,
.modal-content,
.dropdown-menu {
  border-color: var(--bs-border-color);
  box-shadow: 0 12px 32px rgba(15, 45, 79, 0.08);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: rgba(247, 147, 29, 0.65);
  box-shadow: 0 0 0 0.25rem rgba(247, 147, 29, 0.2);
}

.form-check-input:checked {
  background-color: var(--vb-orange);
  border-color: var(--vb-orange);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--vb-orange);
  color: #1f1a12;
}

.page-link {
  color: var(--vb-orange);
}

.page-link:hover {
  color: var(--vb-orange-dark);
}

.page-item.active .page-link {
  background-color: var(--vb-orange);
  border-color: var(--vb-orange);
  color: #1f1a12;
}

.alert-primary {
  color: #7a4200;
  background-color: #fff2df;
  border-color: #ffd49a;
}

.badge.text-bg-primary {
  background-color: var(--vb-orange) !important;
  color: #1f1a12 !important;
}

.badge.text-bg-secondary {
  background-color: var(--vb-navy) !important;
  color: #ffffff !important;
}