@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@900&display=swap');
@import url('https://fonts.cdnfonts.com/css/helvetica-neue-55');

:root {
  --dtb-primary: #076b37;
  --dtb-secondary: #f18b28;
  --dtb-hover: #0d7840;
  --dtb-font-family: Helvetica, Arial, sans-serif;
  --dtb-font-family-heading: 'Rubik', sans-serif;
  --dtb-color: #000000;
  --dtb-btn-color: #ffffff;
  --dtb-btn-bg: var(--dtb-primary);
  --dtb-btn-active-bg: var(--dtb-primary);
  --dtb-btn-active-color: var(--dtb-btn-color);
  --dtb-btn-hover-color: var(--dtb-btn-active-color);
  --dtb-btn-secondary: var(--dtb-secondary);
  --dtb-btn-secondary-color: #000000;
  --dtb-input-border-focus: var(--dtb-primary);
  --bs-link-color: var(--dtb-primary);
  --bs-link-hover-color: var(--dtb-hover);
  --dtb-primary-rgb: 7, 107, 55;
  --dtb-secondary-rgb: 241, 139, 40;
  --bs-border-color: rgba(var(--dtb-secondary-rgb), 0.4);
}

/* Inputs */
.form-control,
.form-select,
.form-check-input {
  border-color: #dee2e6;
}

:root {
  --dtb-surface: #FFEEDB;
  --dtb-on-surface: #000000;
}

/* Page background */
body,
.dtb-navbar,
.bg-light,
.bg-white,
.bg-body,
.dtb-container, .dtb-container .bg-white,
.dtb-modal.modal-content, .dtb-modal .modal-content,
#dtb-custom-nav-tabs {
  background-color: var(--dtb-surface) !important;
}

/* Modal outline, matching the page card border */
.dtb-modal.modal-content,
.dtb-modal .modal-content {
  border-color: var(--dtb-primary) !important;
}

/* User dropdown menu */
.dtb-dropdown {
  background-color: #ffffff !important;
  --bs-dropdown-link-hover-bg: var(--dtb-primary);
  --bs-dropdown-link-hover-color: #ffffff;
}

/* Address / pickup bar */
.dtb-input-address,
.dtb-location-dropdown {
  background-color: #ffffff !important;
}

.dtb-input-address .bg-light,
.dtb-location-dropdown .bg-light {
  background-color: var(--dtb-primary) !important;
  border-color: var(--dtb-primary) !important;
}

.dtb-input-address .bg-light .text-dark,
.dtb-location-dropdown .bg-light .text-dark {
  color: #ffffff !important;
}

/* Product grid cards */
.dtb-card,
.dtb-card .bg-white {
  background-color: #ffffff !important;
}

/* Checkout cart items & order summary */
.dtb-item-summary,
.dtb-order-summary {
  background-color: #ffffff !important;
}

/* Page card outline & header divider */
.dtb-container {
  border-color: var(--dtb-primary) !important;
}

.dtb-container .sticky-top.border-bottom {
  border-bottom-color: var(--dtb-primary) !important;
}

/* Category pills */
.nav-link.bg-white {
  background-color: #ffffff !important;
}

/* Outline buttons */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger {
  --bs-btn-bg: #ffffff;
}

/* Text color */
body,
.dtb-modal,
.item-description, .item-variables {
  color: var(--dtb-on-surface) !important;
}

/* Headings */
h1,
h2,
.h1,
.h2 {
  font-family: var(--dtb-font-family-heading);
  font-weight: 900 !important;
  color: var(--dtb-primary) !important;
}

/* Buttons */
.btn {
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 20px;
}

/* Badges */
.badge.bg-secondary {
  background-color: var(--dtb-secondary) !important;
  color: #000000 !important;
}

/* Scrollbars */
html {
  scrollbar-color: rgba(var(--dtb-primary-rgb), 0.35) rgba(var(--dtb-primary-rgb), 0.08);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(var(--dtb-primary-rgb), 0.08);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(var(--dtb-primary-rgb), 0.35);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover,
*:hover::-webkit-scrollbar-thumb {
  background-color: var(--dtb-secondary);
}