/* ========================================
   BOOTSTRAP CUSTOM VARIABLES
   ======================================== */

:root {
  /* Color Variables */
  --bs-primary: #00205b;
  --bs-primary-rgb: 0, 32, 91;
  --bs-secondary: #d2e5f3;
  --bs-secondary-rgb: 210, 229, 243;
  --bs-success: #28a745;
  --bs-success-rgb: 40, 167, 69;
  --bs-danger: #d51e28;
  --bs-danger-rgb: 213, 30, 40;
  --bs-warning: #ffc107;
  --bs-warning-rgb: 255, 193, 7;
  --bs-info: #9bcbeb;
  --bs-info-rgb: 155, 203, 235;
  --bs-light: #f8f9fa;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark: #212529;
  --bs-dark-rgb: 33, 37, 41;
  --bs-orange: #fa7600;
  --bs-orange-rgb: 250, 118, 0;
  --bs-brown: #b4a373;
  --bs-brown-rgb: 180, 163, 115;
  --bs-light-blue: #bddaed;
  --bs-light-dark: #dcdcdc;

  .bg-orange {
    background-color: var(--bs-orange) !important;
  }
  .bg-brown {
    background-color: var(--bs-brown) !important;
  }

  .bg-light-blue {
    background-color: var(--bs-light-blue) !important;
  }

  .bg-light-dark {
    background-color: var(--bs-light-dark) !important;
  }

  /* Button Variables */
  --bs-border-radius: 2rem;
  --bs-border-radius-sm: 1.5rem;
  --bs-border-radius-lg: 2.5rem;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y-sm: 0.375rem;
  --bs-btn-padding-x-sm: 1.25rem;
  --bs-btn-padding-y-lg: 0.75rem;
  --bs-btn-padding-x-lg: 2rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-size-sm: 0.875rem;
  --bs-btn-font-size-lg: 1.125rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-width: 2px;
  --bs-btn-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  --bs-btn-box-shadow-hover: 0 4px 8px rgba(0,0,0,0.15);
  --bs-btn-transition: all 0.2s ease-in-out;

  /* Form Control Variables */
  --bs-body-bg: transparent;
  --bs-form-control-bg: transparent;
  --bs-form-control-bg-disabled: transparent;
  --bs-border-color: #dee2e6;
  --bs-form-control-border-color: #dee2e6;
  --bs-form-control-border-width: 0 0 1px 0;
  --bs-form-control-border-radius: 0;
  --bs-form-control-focus-bg: transparent;
  --bs-form-control-focus-border-color: var(--bs-primary);
  --bs-form-control-focus-box-shadow: none;
  --bs-form-control-padding-x: 0;
  --bs-form-control-padding-y: 0.375rem;
}

/* ========================================
   LINK STYLES
   ======================================== */

a {
  color: var(--bs-primary);
  text-decoration: none;
  transition: 0.8s ease;
}

a:hover {
  color: var(--bs-light-blue);
}

/* ========================================
   BUTTON STYLES
   ======================================== */

.btn {
  border-radius: var(--bs-border-radius) !important;
  font-weight: var(--bs-btn-font-weight) !important;
  border-width: var(--bs-btn-border-width) !important;
  box-shadow: var(--bs-btn-box-shadow) !important;
  transition: var(--bs-btn-transition) !important;
  padding: 6px 24px !important;
  font-family: 'Poppins', sans-serif !important;
}

.btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--bs-btn-box-shadow-hover) !important;
}

.btn:active {
  transform: translateY(0) !important;
  box-shadow: var(--bs-btn-box-shadow) !important;
}

.btn-sm {
  border-radius: var(--bs-border-radius-sm) !important;
  padding: var(--bs-btn-padding-y-sm) var(--bs-btn-padding-x-sm) !important;
  font-size: var(--bs-btn-font-size-sm) !important;
}

.btn-lg {
  border-radius: var(--bs-border-radius-lg) !important;
  padding: var(--bs-btn-padding-y-lg) var(--bs-btn-padding-x-lg) !important;
  font-size: var(--bs-btn-font-size-lg) !important;
}

/* ========================================
   BUTTON COLORS
   ======================================== */

.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: white !important;
}

.btn-primary:hover {
  background-color: color-mix(in srgb, var(--bs-primary) 85%, black) !important;
  border-color: color-mix(in srgb, var(--bs-primary) 85%, black) !important;
  color: white !important;
}

.btn-primary:focus {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

.btn-secondary {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
  color: white !important;
}

.btn-secondary:hover {
  background-color: color-mix(in srgb, var(--bs-secondary) 85%, black) !important;
  border-color: color-mix(in srgb, var(--bs-secondary) 85%, black) !important;
  color: white !important;
}

.btn-success {
  background-color: var(--bs-success) !important;
  border-color: var(--bs-success) !important;
  color: white !important;
}

.btn-success:hover {
  background-color: color-mix(in srgb, var(--bs-success) 85%, black) !important;
  border-color: color-mix(in srgb, var(--bs-success) 85%, black) !important;
  color: white !important;
}

.btn-danger {
  background-color: var(--bs-danger) !important;
  border-color: var(--bs-danger) !important;
  color: white !important;
}

.btn-danger:hover {
  background-color: color-mix(in srgb, var(--bs-danger) 85%, black) !important;
  border-color: color-mix(in srgb, var(--bs-danger) 85%, black) !important;
  color: white !important;
}

.btn-warning {
  background-color: var(--bs-warning) !important;
  border-color: var(--bs-warning) !important;
  color: black !important;
}

.btn-warning:hover {
  background-color: color-mix(in srgb, var(--bs-warning) 85%, black) !important;
  border-color: color-mix(in srgb, var(--bs-warning) 85%, black) !important;
  color: black !important;
}

.btn-info {
  background-color: var(--bs-info) !important;
  border-color: var(--bs-info) !important;
  color: white !important;
}

.btn-info:hover {
  background-color: color-mix(in srgb, var(--bs-info) 85%, black) !important;
  border-color: color-mix(in srgb, var(--bs-info) 85%, black) !important;
  color: white !important;
}

/* ========================================
   OUTLINE BUTTONS
   ======================================== */

.btn-outline-primary {
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: white !important;
}

.btn-outline-secondary {
  color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
  background-color: transparent !important;
}

.btn-outline-secondary:hover {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
  color: white !important;
}

/* ========================================
   RESPONSIVE BUTTON VARIABLES
   ======================================== */

@media (max-width: 768px) {
  :root {
    --bs-border-radius: 1.5rem;
    --bs-border-radius-sm: 1rem;
    --bs-border-radius-lg: 2rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 0.875rem;
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  :root {
    --bs-border-radius: 1.75rem;
    --bs-border-radius-sm: 1.25rem;
    --bs-border-radius-lg: 2.25rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-font-size: 1rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --bs-border-radius: 2rem;
    --bs-border-radius-sm: 1.5rem;
    --bs-border-radius-lg: 2.5rem;
    --bs-btn-padding-y: 0.625rem;
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-font-size: 1.125rem;
  }
}

@media (min-width: 1400px) {
  :root {
    --bs-border-radius: 2.25rem;
    --bs-border-radius-sm: 1.75rem;
    --bs-border-radius-lg: 3rem;
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-padding-x: 2rem;
    --bs-btn-font-size: 1.25rem;
  }
}


/* ========================================
   FORM CONTROL STYLES
   ======================================== */

.form-control {
  background-color: var(--bs-form-control-bg) !important;
  border: var(--bs-form-control-border-width) solid var(--bs-form-control-border-color) !important;
  border-radius: var(--bs-form-control-border-radius) !important;
  padding: var(--bs-form-control-padding-y) var(--bs-form-control-padding-x) !important;
  box-shadow: none !important;
}

.form-control:focus {
  background-color: var(--bs-form-control-focus-bg) !important;
  border-color: var(--bs-form-control-focus-border-color) !important;
  box-shadow: var(--bs-form-control-focus-box-shadow) !important;
  outline: none !important;
}

.form-control:disabled {
  background-color: var(--bs-form-control-bg-disabled) !important;
}

input.form-control,
textarea.form-control,
select.form-control {
  background-color: transparent !important;
  border: 1px solid var(--bs-primary) !important;
  border-radius: var(--bs-border-radius) !important;
  box-shadow: none !important;
  padding: 0.375rem 0.75rem !important;
}

input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
  background-color: transparent !important;
  border: 2px solid var(--bs-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
  outline: none !important;
}

/* ========================================
   CHECKBOX AND RADIO STYLES
   ======================================== */

.form-check-input {
  border: 2px solid var(--bs-primary) !important;
  background-color: transparent !important;
  border-radius: 0.25rem !important;
}

.form-check-input:checked {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.form-check-input:focus {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

.form-check-input[type="radio"] {
  border-radius: 50% !important;
}

.form-check-input[type="checkbox"] {
  border-radius: 0.25rem !important;
}

.form-select {
  background-color: transparent !important;
  border: 1px solid var(--bs-primary) !important;
  border-radius: var(--bs-border-radius) !important;
  box-shadow: none !important;
}

.form-select:focus {
  background-color: transparent !important;
  border: 2px solid var(--bs-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
  outline: none !important;
}

.form-range {
  background-color: transparent !important;
}

.form-range::-webkit-slider-thumb {
  background-color: var(--bs-primary) !important;
  border: 2px solid var(--bs-primary) !important;
}

.form-range::-moz-range-thumb {
  background-color: var(--bs-primary) !important;
  border: 2px solid var(--bs-primary) !important;
}


/* ========================================
   NAV LINK STYLES
   ======================================== */

.nav-pills .nav-link {
  border: 1px solid var(--bs-primary);
  color: var(--bs-primary);
}

.nav-pills .nav-link.active {
  background-color: var(--bs-primary);
  color: white;
}