@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');

:root {

  /* fonts */

  /* Primary font branded */
  --dtb-font-primary: 'Inter', sans-serif;
  /* Secondary font to pair with branded used for parragrafs (desciptions) */
  --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: 'Archivo Black', sans-serif;

  /* colors */

 /* Main brand color */
  --dtb-base: #151A1B;
  --dtb-base-rgb:    21, 26, 27;
  /* Secondary brand color */
  --dtb-secondary: #FFDE00;
  --dtb-secondary-rgb:  255, 222, 0;
  /* Accent color */
  --dtb-primary: #FFDE00;
  --dtb-primary-rgb:  255, 222, 0;
  /* 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);

 /* Links */
  --bs-link-color: var(--dtb-aux);

}

.link-primary {
  color: var(--dtb-aux) !important;
  text-decoration: underline !important;
}

/* Progress bar */

.progress-bar {
  background-color: var(--dtb-aux) !important
}

.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;
}

#dtb-custom-cart-btn,
.dtb-pay-btn,
.modal-footer .btn-primary {
  border-radius: 50px !important;
  text-transform: uppercase!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-base) !important;
  font-weight: 700!important;
  border-radius: 50px !important;
}

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

.btn-outline-primary.active {
  background: var(--dtb-primary) !important;
  color: var(--dtb-base);
  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: 50px !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-base) !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-base) !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-base);
  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);
}

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

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

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);
  text-transform: uppercase!important;
}


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;
}

.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;
}

.item-count-bottom {
  color: var(--dtb-base) !important;
  font-family: var(--dtb-font-aux) !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 */



.navbar-brand h1 {
  font-family: var(--dtb-font-aux) !important;
  color: var(--dtb-secondary) !important;
  font-weight: 900 !important;
  margin-left: 10px!important;
  text-transform: uppercase!important;
}