/* Fonts */

@font-face {
  font-family: 'Perfektta';
  src:
    url('./fonts/Perfektta-Bold.otf') format('opentype'),
    url('./fonts/Perfektta-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Perfektta';
  src:
    url('./fonts/Perfektta-Light.otf') format('opentype'),
    url('./fonts/Perfektta-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Variables */

:root {
  --dtb-primary: #ff4426;
  --dtb-secondary: #0f5632;
  --dtb-hover: #e03b21;
  --dtb-font-family: 'Perfektta', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --dtb-color: #000000;

  --dtb-btn-color: #fff6eb;
  --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: #fff6eb;

  --dtb-input-border-focus: var(--dtb-primary);
  --bs-link-color: var(--dtb-secondary);
  --bs-link-hover-color: #012d17;

  --dtb-surface: #fff6eb;

  --bs-light-rgb: 255, 246, 235;
  --bs-body-bg: var(--dtb-surface);
  --bs-body-bg-rgb: 255, 246, 235;
}

/* Page and card backgrounds */

body,
.dtb-navbar,
.dtb-cart-sidebar .bg-white,
.dtb-modal .modal-content,
.dtb-item-summary,
#dtb-custom-nav-tabs {
  background-color: var(--dtb-surface) !important;
}

.dtb-container,
.dtb-container .card,
.dtb-card,
.dtb-card > div:first-child,
.dtb-dropdown {
  background-color: #ffffff !important;
}

.dropdown.me-2 .dropdown-toggle:hover {
  color: var(--dtb-primary) !important;
}

.btn-outline-primary,
.btn-outline-secondary {
  --bs-btn-bg: #ffffff;
}

/* Inputs */

.form-control,
.form-select,
.form-check-input:not(:checked) {
  background-color: #ffffff !important;
}

/* Address inputs */

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

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

.dtb-location-dropdown .dropdown-toggle,
.dtb-location-dropdown .dropdown-menu {
  background-color: #ffffff !important;
}

.dtb-input-address .flex-fill {
  background-color: #ffffff !important;
}

/* Body copy */

body {
  font-weight: 300;
}

/* Titles */

h1,
h2,
.h1,
.h2 {
  font-weight: 700 !important;
  color: var(--dtb-secondary) !important;
  text-transform: uppercase;
}

.modal-title {
  font-weight: 700 !important;
  color: var(--dtb-secondary) !important;
}

/* Store selector */

.card-title {
  font-weight: 700 !important;
  color: var(--dtb-secondary) !important;
}

.store-active .card-title {
  color: var(--dtb-btn-active-color) !important;
}

.modal-body .border.rounded.p-2 {
  background-color: var(--dtb-primary) !important;
  color: var(--dtb-btn-active-color) !important;
}

.modal-body .border.rounded.p-2 h5 {
  font-weight: 700 !important;
  color: var(--dtb-btn-active-color) !important;
}

/* Profile dropdown */

.dtb-dropdown .dropdown-item:hover,
.dtb-dropdown .dropdown-item:focus,
.dtb-dropdown .dropdown-item:active {
  background-color: var(--dtb-primary) !important;
  color: #ffffff !important;
}

/* Buttons */

.btn {
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 999px;
}

.input-group .btn {
  border-radius: var(--bs-border-radius);
}

.btn-outline-primary.text-start,
#dtb-payment-selector .btn {
  border-radius: var(--bs-border-radius);
}

/* Menu category tabs */

#dtb-custom-nav-tabs .nav-item .nav-link {
  position: relative;
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--dtb-secondary) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}

#dtb-custom-nav-tabs .nav-item .nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 3px;
  background-color: var(--dtb-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-out;
}

#dtb-custom-nav-tabs .nav-item .nav-link:hover::after,
#dtb-custom-nav-tabs .nav-item .nav-link.active::after {
  transform: scaleX(1);
}

/* Footer */

.p-3.bg-dark.gap-1 {
  background-color: var(--dtb-secondary) !important;
}

/* Product title and description */

.dtb-item-title-grid {
  font-weight: 700 !important;
  color: var(--dtb-secondary) !important;
  text-transform: uppercase;
}

.dtb-item-description-grid {
  color: #27523a !important;
}

/* Scrollbars */

html {
  scrollbar-color: rgba(15, 86, 50, 0.35) rgba(15, 86, 50, 0.08);
  scrollbar-width: thin;
}

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

::-webkit-scrollbar-track {
  background: rgba(15, 86, 50, 0.08);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(15, 86, 50, 0.35);
  border-radius: 10px;
}

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