@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Puritan:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {

  /* fonts */

  /* Primary font branded */
  --dtb-font-primary: 'Fira Sans', sans-serif;
  /* Secondary font to pair with branded used for parragrafs (descriptions) */
  --dtb-font-secondary: 'Inter', sans-serif;
  /* Auxiliar font used as backup when primary font doesn't work or when the brand has more then one main font */
  --dtb-font-aux: 'Fira Sans', sans-serif;

  /* colors */

  /* Main brand color */
  --dtb-base: #151A1B;
  --dtb-base-rgb: 21, 26, 27;
  /* Secondary brand color */
  --dtb-secondary: #cb0606;
  --dtb-secondary-rgb: 203, 6, 6;
  /* Accent color */
  --dtb-primary: #cb0606;
  --dtb-primary-rgb: 203, 6, 6;
  /* Light color */
  --dtb-aux: #F2F2F2;
  --dtb-aux-rgb: 242, 242, 242;

  /* Primary button */
  --dtb-btn-color: var(--dtb-base);
  --dtb-btn-bg: var(--dtb-primary);
  --dtb-hover: rgba(var(--dtb-primary-rgb), 0.8);

  --dtb-input-border-focus: var(--dtb-primary);
  --bs-link-color: var(--dtb-primary);
}

.modal-backdrop {
  --bs-backdrop-opacity: 0.8;
}

#dtb-navbar a {
  color: var(--dtb-hover);
}

.dtb-card .bi-plus-circle-fill {
  color: var(--dtb-primary) !important;
}


.btn-primary {
  --bs-btn-disabled-color: var(--dtb-base) !important;
  --bs-btn-disabled-bg: var(--dtb-primary) !important;
}

.btn-outline-primary {
  --dtb-btn-bg: var(--dtb-aux);
  text-transform: uppercase;
  border-color: rgba(var(--dtb-aux-rgb), 0.3) !important;
  --bs-btn-hover-bg: var(--dtb-secondary) !important;
  --bs-btn-hover-color: var(--dtb-aux) !important;
  font-weight: 700 !important;
}

button {
  font-family: var(--dtb-font-aux) !important;
}

.btn-outline-primary.active {
  background: var(--dtb-primary) !important;
  color: var(--dtb-aux);
  text-transform: uppercase;
  font-family: var(--dtb-font-primary) !important;
}

.btn-outline-primary:disabled {
  color: rgba(var(--dtb-aux-rgb), 0.8) !important;
  background: rgba(var(--dtb-aux-rgb), 0.1) !important;
}

#dtb-custom-nav-tabs li.nav-item a {
  color: var(--dtb-aux) !important;
  border-color: rgba(var(--dtb-aux-rgb), 0.3) !important;
  background-color: var(--dtb-base) !important;
  border-radius: 8px !important;
  font-family: var(--dtb-font-aux);
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

#dtb-custom-nav-tabs li.nav-item a:hover {
  color: var(--dtb-aux) !important;
  border-color: var(--dtb-secondary) !important;
  background-color: var(--dtb-secondary) !important;
}

#dtb-custom-nav-tabs li.nav-item a.active {
  color: var(--dtb-aux) !important;
  border-color: var(--dtb-primary) !important;
  background-color: var(--dtb-primary) !important;
}

#dtb-custom-nav-tabs {
  background-color: var(--dtb-base) !important;
}

#dtb-custom-cart-btn {
  background: var(--dtb-primary);
  color: var(--dtb-aux);
  text-transform: uppercase !important;
  font-weight: 700;
}

#dtb-custom-cart-btn-wrapper {
  background: var(--dtb-base) !important;
}

h5,
.btn,
.btn span,
.nav-item {
  font-family: var(--dtb-font-aux);
}

.btn {
  color: var(--dtb-aux) !important;
}

.item-price,
span {
  font-family: var(--dtb-font-secondary);
}

h2 {
  font-family: var(--dtb-font-aux);
  color: var(--dtb-primary);
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

.item-variables {
  color: var(--dtb-aux) !important;
  font-family: var(--dtb-font-primary);
}

h3,
.modal-title {
  font-family: var(--dtb-font-aux);
}


h4 {
  font-family: var(--dtb-font-secondary);
}

.dtb-bg-primary {
  background-color: var(--dtb-base) !important;
}

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

body {
  background-color: var(--dtb-base);
  color: rgba(var(--dtb-aux-rgb), 1) !important;
  font-family: var(--dtb-font-primary);
}

.bg-light {
  background-color: rgba(var(--dtb-base-rgb), 1) !important;
}

/* inputs */

.form-check-input[type=checkbox],
.form-check-input[type=radio] {
  background-color: var(--dtb-aux);
  border-color: rgba(var(--dtb-base-rgb), 0.5);
}

.form-check-input:checked[type=checkbox] {
  background-color: var(--dtb-primary);
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25 48L45.5 68.5L83 31' stroke='black' stroke-width='18'/%3E%3C/svg%3E%0A");
}

.form-check-input:checked[type=radio] {
  background-color: var(--dtb-primary);
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='29' fill='black'/%3E%3C/svg%3E");
}

.dtb-input-address {
  border: 1px solid rgba(var(--dtb-aux-rgb), 0.25) !important;
  background-color: rgba(var(--dtb-primary-rgb), 0.1);
}

.dtb-input-address i {
  color: var(--dtb-primary) !important;
}




.dtb-input-address span {
  color: var(--dtb-aux) !important;
}

.dtb-input-address .border-start {
  border-left: 1px solid rgba(var(--dtb-aux-rgb), 0.25) !important;
}

.dtb-input-address .border-end {
  border-right: 1px solid rgba(var(--dtb-aux-rgb), 0.25) !important;
}

input {
  font-family: var(--dtb-font-secondary) !important;
}

div[id^="section"] .p-2>div:last-of-type {
  font-family: var(--dtb-font-secondary) !important;
  opacity: 0.6;
}

/* navbar */
.dtb-navbar {
  background-color: var(--dtb-base) !important;
}

.dtb-navbar h1 {
  color: var(--dtb-primary) !important;
}

/* header */

#header .border-bottom {
  border-bottom: 1px solid rgba(var(--dtb-aux-rgb), 0.25) !important;
}

/* body */

.dtb-body .border {
  border: 1px solid rgba(var(--dtb-aux-rgb), 0.25) !important;
}

.dtb-body .border-end {
  border-right: 1px solid rgba(var(--dtb-aux-rgb), 0.25) !important;

}

.dtb-body .border-start {
  border-left: 1px solid rgba(var(--dtb-aux-rgb), 0.25) !important;
}

.dtb-body .border-bottom {
  border-bottom: 1px solid rgba(var(--dtb-aux-rgb), 0.25) !important;
}

.dtb-body .border-top {
  border-top: 1px solid rgba(var(--dtb-aux-rgb), 0.25) !important;
}

.dtb-body.border-top {
  border-top: 1px solid rgba(var(--dtb-aux-rgb), 0.25) !important;
}

/* items modal view */
.dtb-modal .modal-content {
  background-color: var(--dtb-base) !important;
  border: 1px solid rgba(var(--dtb-primary-rgb), 0.3) !important;
}

.dtb-modal h4.text-secondary {
  color: rgba(var(--dtb-aux-rgb), 0.6) !important;
}

.dtb-modal .modal-content .modal-header {
  background-color: var(--dtb-base) !important;
  border-bottom: 1px solid rgba(var(--dtb-primary-rgb), 0.3) !important;
}

.dtb-modal .modal-content .modal-header i {
  color: var(--dtb-aux) !important;
}

.dtb-modal .modal-footer {
  border-top: 1px solid rgba(var(--dtb-primary-rgb), 0.3) !important;
}

.dtb-modal .modal-content .badge.bg-secondary {
  background-color: var(--dtb-primary) !important;
  color: var(--dtb-base) !important;
}

.dtb-cart-control i {
  color: var(--dtb-primary) !important;
}

#menu-item-modal,
#login-modal {
  background-color: rgba(var(--dtb-aux-rgb), 0.05);
}

.dtb-modal p.text-dark {
  color: var(--dtb-aux) !important;
}

/* main item list */

.dtb-mobile-counter .bg-white {
  background: var(--dtb-base) !important;
}

.dtb-mobile-counter span,
.dtb-mobile-counter div {
  color: var(--dtb-aux) !important;
}

.dtb-mobile-counter .border-top {
  border-top: 1px solid rgba(var(--dtb-primary-rgb), 0.25) !important;
}

.dtb-mobile-counter .bg-white .bi-dash-circle-fill {
  color: var(--dtb-primary) !important;
}

.dtb-item-list {
  background-color: var(--dtb-base) !important;
}

.dtb-item-list h2 {
  color: var(--dtb-secondary) !important;
}

.dtb-card,
.dtb-card>div:first-child {
  background-color: var(--dtb-base) !important;
  color: var(--dtb-aux) !important;
}

.dtb-card.border {
  border: 1px solid rgba(var(--dtb-primary-rgb), 0.3) !important;
}

.dtb-card .border-end {
  border-right: 1px solid rgba(var(--dtb-primary-rgb), 0.3) !important;
}

.dtb-add-icon {
  color: var(--dtb-primary) !important;
}

.item-description {
  color: rgba(var(--dtb-aux-rgb), 0.6) !important;
}


.dtb-item-summary {
  background-color: rgba(var(--dtb-primary-rgb), 0.1) !important;
}

.dtb-card .dtb-counter-badge {
  background-color: rgba(var(--dtb-base-rgb), 0.7) !important;
  color: var(--dtb-primary) !important;
}

h3.dtb-item-title-grid {}

.dtb-item-summary .text-dark {
  color: var(--dtb-aux) !important;

}

.dtb-item-summary i {
  color: var(--dtb-primary) !important;
}

.dtb-item-summary i.text-primary {
  color: var(--dtb-primary) !important;
}

.dtb-order-summary hr.border-dark {
  border-color: rgba(var(--dtb-primary-rgb), 0.8) !important;
}

/* all info messages */

/* containers */

.dtb-container {
  border: 1px solid rgba(var(--dtb-primary-rgb), 0.3) !important;
}

.dtb-container,
.dtb-container .bg-white {
  background-color: var(--dtb-base) !important;
}

.dtb-order-summary {
  background-color: rgba(var(--dtb-primary-rgb), 0.1) !important;
  border: 1px solid rgba(var(--dtb-aux-rgb), 0.4) !important;
}

.dtb-container .border-bottom {
  border-bottom: 1px solid rgba(var(--dtb-primary-rgb), 0.3) !important;
}


.dtb-order-summary .text-primary {
  color: var(--dtb-primary) !important;
}


.dtb-item-summary.border {
  border: 1px solid rgba(var(--dtb-aux-rgb), 0.4) !important;
}

/* scrollbar */

/* width */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgba(var(--dtb-primary-rgb), 0.2);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(var(--dtb-primary-rgb), 0.4);
  border-radius: 50px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--dtb-primary);
}


/* Modal map */

.dtb-map-list .card {
  border: 1px solid rgba(var(--dtb-aux-rgb), 0.4) !important;
  color: var(--dtb-aux) !important;
}

.dtb-map-list .card:hover,
.dtb-map-list .card.store-active {
  background-color: var(--dtb-primary);
  color: var(--dtb-base) !important;
  border: 1px solid rgba(var(--dtb-primary-rgb), 0.4) !important;
}

#menu-item-modal .border-bottom {
  border-bottom: 1px solid rgba(var(--dtb-primary-rgb), 0.3) !important;
}

#menu-item-modal .modal-body .mt-4 .bi-plus-circle-fill,
#menu-item-modal .modal-body .mt-4 .bi-dash-circle-fill {
  color: var(--dtb-primary) !important;
}

/* dropdown menu */

.dtb-dropdown {
  background-color: var(--dtb-base) !important;
  border: 1px solid rgba(var(--dtb-aux-rgb), 0.4) !important;
}

.dtb-dropdown h6.text-secondary {
  color: var(--dtb-primary) !important;
}

.dtb-dropdown a {
  color: var(--dtb-aux) !important;
}

.dtb-dropdown a:hover {
  color: var(--dtb-base) !important;
  background-color: var(--dtb-primary) !important;
}

/* cookie banner */

.dtb-cookie-banner {
  background: var(--dtb-base) !important;
}

/* login */

.dtb-login-modal,
.dtb-login-modal .bg-white {
  color: var(--dtb-primary) !important;
  background-color: var(--dtb-base) !important;
}

.dtb-login-modal .border-bottom {
  border-bottom: rgba(var(--dtb-primary-rgb, 0.25)) !important;
}

.dtb-brand-logo {
  filter: invert(1);
}

/* payment selector */

#dtb-payment-selector .btn-outline-primary:hover {
  background-color: var(--dtb-primary) !important;
}

.dtb-order-card {
  background: var(--dtb-base) !important;
}

.modal-footer .btn-secondary {
  color: var(--dtb-aux) !important;
}

.dtb-container .btn:disabled,
.dtb-container .btn[disabled] {
  color: var(--dtb-aux) !important;
  background-color: var(--dtb-primary) !important;
  opacity: 0.5;
}

/* logos */