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



  :root {

    /* fonts */
  
  /* Primary font branded */
  --dtb-font-primary: 'Oswald', sans-serif;
  /* Secondary font to pair with branded used for parragrafs (descriptions) */
  --dtb-font-secondary: 'DM Sans', sans-serif;
  /* Aux font for logos mainly */
  --dtb-font-aux: 'Open Sans', sans-serif;

  
    /* colors */
  
    /* Main brand color */
    --dtb-primary: #100a01;
    --dtb-primary-rgb: 16, 10, 1;
    /* Secondary brand color */
    --dtb-secondary: #ffffff;
    --dtb-secondary-rgb: 255, 255, 255;
    /* Accent color */
      --dtb-aux: #E94510;
      --dtb-aux-rgb: 233, 69, 16;
  
    /* Primary button */
    --dtb-btn-color: var(--dtb-primary);
    --dtb-btn-bg: var(--dtb-aux);
    --dtb-hover: rgba(var(--dtb-aux-rgb), 0.8);
  
    --bs-link-color: var(--dtb-aux);
  }

  
  .modal-backdrop {
    --bs-backdrop-opacity: 0.8;
  }
  
  #dtb-navbar a {
    color: var(--dtb-hover);
  }
  
  .dtb-card .bi-plus-circle-fill {
    color: var(--dtb-aux) !important;
  }
  
  .btn-primary {
    --bs-btn-disabled-color: var(--dtb-primary) !important;
    --bs-btn-disabled-bg: var(--dtb-aux) !important;
  }
  
  .btn-outline-primary {
    --dtb-btn-bg: var(--dtb-secondary);
    text-transform: uppercase;
    border-color: rgba(var(--dtb-secondary-rgb), 0.3) !important;
    --bs-btn-hover-bg: var(--dtb-secondary) !important;
    --bs-btn-hover-color: var(--dtb-primary) !important;
    font-weight: 700!important;
  }
  
  button {
    font-family: var(--dtb-font-primary) !important;
  }
  
  .btn-outline-primary.active {
    background: var(--dtb-aux) !important;
    color: var(--dtb-primary);
    text-transform: uppercase;
    font-family: var(--dtb-font-primary) !important;
  }
  
  .btn-outline-primary:disabled {
    color: rgba(var(--dtb-secondary-rgb), 0.8)!important;
    background: rgba(var(--dtb-secondary-rgb), 0.1)!important;
  }
  
  #dtb-custom-nav-tabs li.nav-item a {
    color: var(--dtb-secondary) !important;
    border-color: rgba(var(--dtb-secondary-rgb), 0.3) !important;
    background-color: var(--dtb-primary) !important;
    border-radius: 8px !important;
    font-family: var(--dtb-font-primary);
    font-weight: 700!important;
    text-transform: uppercase!important;
  }
  
  #dtb-custom-nav-tabs li.nav-item a:hover,
  #dtb-custom-nav-tabs li.nav-item a.active {
    color: var(--dtb-primary) !important;
    border-color: var(--dtb-aux) !important;
    background-color: var(--dtb-aux) !important;
  }
  
  #dtb-custom-nav-tabs {
    background-color: var(--dtb-primary) !important;
  }
  
  #dtb-custom-cart-btn {
    background: var(--dtb-aux);
    color: var(--dtb-primary);
    text-transform: uppercase!important;
    font-weight: 700;
  }
  
  #dtb-custom-cart-btn-wrapper {
    background: var(--dtb-primary) !important;
  }
  
  h5,
  .btn,
  .btn span,
  .nav-item {
    font-family: var(--dtb-font-primary);
  }
  
  .item-price,
  span {
    font-family: var(--dtb-font-secondary);
  }
  
  h2 {
    font-family: var(--dtb-font-primary);
    font-size: 24px !important;
    color: var(--dtb-aux);
    text-transform: uppercase!important;
    font-weight: 700!important;
  }
  
  .item-variables {
    color: var(--dtb-secondary) !important;
    font-family: var(--dtb-font-primary);
  }
  
  h3,
  .modal-title {
    font-family: var(--dtb-font-primary);
  }
  
  
  h4 {
    font-family: var(--dtb-font-secondary);
  }
  
  .dtb-bg-primary {
    background-color: var(--dtb-primary) !important;
  }
  
  .dtb-bg-light {
    background-color: var(--dtb-light) !important;
  }
  
  body {
    background-color: var(--dtb-primary);
    color: rgba(var(--dtb-secondary-rgb), 1) !important;
    font-family: var(--dtb-font-primary);
  }
  
  .bg-light {
    background-color: rgba(var(--dtb-primary-rgb), 1) !important;
  }
  
  
  
  /* inputs */
  
  .form-check-input[type=checkbox],
  .form-check-input[type=radio] {
    background-color: var(--dtb-secondary);
    border-color: rgba(var(--dtb-primary-rgb), 0.5);
  }
  
  .form-check-input:checked[type=checkbox] {
    background-color: var(--dtb-aux);
    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-aux);
    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-secondary-rgb), 0.25) !important;
    background-color: rgba(var(--dtb-aux-rgb), 0.1);
  }
  
  .dtb-input-address i {
    color: var(--dtb-aux) !important;
  }
  
  
  
  
  .dtb-input-address span {
    color: var(--dtb-secondary) !important;
  }
  
  .dtb-input-address .border-start {
    border-left: 1px solid rgba(var(--dtb-secondary-rgb), 0.25) !important;
  }
  
  .dtb-input-address .border-end {
    border-right: 1px solid rgba(var(--dtb-secondary-rgb), 0.25) !important;
  }
  
  /* navbar */
  .dtb-navbar {
    background-color: var(--dtb-primary) !important;
  }
  
  .dtb-navbar h1 {
    color: var(--dtb-aux) !important;
  }
  
  /* header */
  
  #header .border-bottom {
    border-bottom: 1px solid rgba(var(--dtb-secondary-rgb), 0.25) !important;
  }
  
  /* body */
  
  .dtb-body .border {
    border: 1px solid rgba(var(--dtb-secondary-rgb), 0.25) !important;
  }
  
  .dtb-body .border-end {
    border-right: 1px solid rgba(var(--dtb-secondary-rgb), 0.25) !important;
  
  }
  
  .dtb-body .border-start {
    border-left: 1px solid rgba(var(--dtb-secondary-rgb), 0.25) !important;
  }
  
  .dtb-body .border-bottom {
    border-bottom: 1px solid rgba(var(--dtb-secondary-rgb), 0.25) !important;
  }
  
  .dtb-body .border-top {
    border-top: 1px solid rgba(var(--dtb-secondary-rgb), 0.25) !important;
  }
  
  .dtb-body.border-top {
    border-top: 1px solid rgba(var(--dtb-secondary-rgb), 0.25) !important;
  }
  
  /* items modal view */
  .dtb-modal .modal-content {
    background-color: var(--dtb-primary) !important;
    border: 1px solid rgba(var(--dtb-aux-rgb), 0.3) !important;
  }
  
  .dtb-modal h4.text-secondary {
    color: rgba(var(--dtb-secondary-rgb), 0.6) !important;
  }
  
  .dtb-modal .modal-content .modal-header {
    background-color: var(--dtb-primary) !important;
    border-bottom: 1px solid rgba(var(--dtb-aux-rgb), 0.3) !important;
  }
  
  .dtb-modal .modal-content .modal-header i {
    color: var(--dtb-secondary) !important;
  }
  
  .dtb-modal .modal-footer {
    border-top: 1px solid rgba(var(--dtb-aux-rgb), 0.3) !important;
  }
  
  .dtb-modal .modal-content .badge.bg-secondary {
    background-color: var(--dtb-aux) !important;
    color: var(--dtb-primary) !important;
  }
  
  .dtb-cart-control i {
    color: var(--dtb-aux) !important;
  }
  
  #menu-item-modal,
  #login-modal {
    background-color: rgba(var(--dtb-secondary-rgb), 0.05);
  }
  
  .dtb-modal p.text-dark {
    color: var(--dtb-secondary) !important;
  }
  
  /* main item list */
  
  .dtb-mobile-counter .bg-white {
    background: var(--dtb-primary) !important;
  }
  
  .dtb-mobile-counter span,
  .dtb-mobile-counter div {
    color: var(--dtb-secondary) !important;
  }
  
  .dtb-mobile-counter .border-top {
    border-top: 1px solid rgba(var(--dtb-aux-rgb), 0.25) !important;
  }
  
  .dtb-mobile-counter .bg-white .bi-dash-circle-fill {
    color: var(--dtb-aux) !important;
  }
  
  .dtb-item-list {
    background-color: var(--dtb-primary)!important;
  }
  
  .dtb-card,
  .dtb-card>div:first-child {
    background-color: var(--dtb-primary) !important;
    color: var(--dtb-secondary) !important;
  }
  
  .dtb-card.border {
    border: 1px solid rgba(var(--dtb-aux-rgb), 0.3) !important;
  }
  
  .dtb-card .border-end {
    border-right: 1px solid rgba(var(--dtb-aux-rgb), 0.3) !important;
  }
  
  .dtb-add-icon {
    color: var(--dtb-aux) !important;
  }
  
  .item-description {
    color: rgba(var(--dtb-secondary-rgb), 0.8) !important;
  }
  
  
  .dtb-item-summary {
    background-color: rgba(var(--dtb-aux-rgb), 0.1) !important;
  }
  
  .dtb-card .dtb-counter-badge {
    background-color: rgba(var(--dtb-primary-rgb), 0.7) !important;
    color: var(--dtb-aux) !important;
  }
  
  .dtb-item-summary .text-dark {
    color: var(--dtb-secondary) !important;
  
  }
  
  .dtb-item-summary i {
    color: var(--dtb-aux) !important;
  }
  
  .dtb-item-summary i.text-primary {
    color: var(--dtb-aux) !important;
  }
  
  .dtb-order-summary hr.border-dark {
    border-color: rgba(var(--dtb-aux-rgb), 0.8) !important;
  }
  
  /* all info messages */
  
  
  /* containers */
  
  .dtb-container {
    border: 1px solid rgba(var(--dtb-aux-rgb), 0.3) !important;
  }
  
  .dtb-container,
  .dtb-container .bg-white {
    background-color: var(--dtb-primary) !important;
  }
  
  .dtb-order-summary {
    background-color: rgba(var(--dtb-aux-rgb), 0.1) !important;
    border: 1px solid rgba(var(--dtb-secondary-rgb), 0.4) !important;
  }
  
  .dtb-container .border-bottom {
    border-bottom: 1px solid rgba(var(--dtb-aux-rgb), 0.3) !important;
  }
  
  
  .dtb-order-summary .text-primary {
    color: var(--dtb-aux) !important;
  }
  
  
  .dtb-item-summary.border {
    border: 1px solid rgba(var(--dtb-secondary-rgb), 0.4) !important;
  }
  
  /* scrollbar */
  
  /* width */
  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: rgba(var(--dtb-aux-rgb), 0.2);
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: rgba(var(--dtb-aux-rgb), 0.4);
    border-radius: 50px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--dtb-aux);
  }
  
  /* Modal map */
  
  .dtb-map-list .card {
    border: 1px solid rgba(var(--dtb-secondary-rgb), 0.4) !important;
    color: var(--dtb-secondary) !important;
    background: var(--dtb-primary);
  }

  .dtb-map-list .card.store-active {
    border: 1px solid rgba(var(--dtb-aux-rgb), 0.4) !important;
    background: var(--dtb-aux) !important;
  }
  
  .dtb-map-list .card:hover {
    background-color: rgba(var(--dtb-secondary-rgb), 1) !important;
    color: var(--dtb-primary) !important;
    border: 1px solid rgba(var(--dtb-secondary-rgb), 1) !important;
  }
  
  #menu-item-modal .border-bottom {
    border-bottom: 1px solid rgba(var(--dtb-aux-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-aux) !important;
  }
  
  /* dropdown menu */
  
  .dtb-dropdown {
    background-color: var(--dtb-primary) !important;
    border: 1px solid rgba(var(--dtb-secondary-rgb), 0.4) !important;
  }
  
  .dtb-dropdown h6.text-secondary {
    color: var(--dtb-aux) !important;
  }
  
  .dtb-dropdown a {
    color: var(--dtb-secondary) !important;
  }
  
  .dtb-dropdown a:hover {
    color: var(--dtb-primary) !important;
    background-color: var(--dtb-aux) !important;
  }
  
  /* cookie banner */
  
  .dtb-cookie-banner {
    background: var(--dtb-primary) !important;
  }
  
  
  /* login */
  
  .dtb-login-modal,
  .dtb-login-modal .bg-white {
    color: var(--dtb-aux) !important;
    background-color: var(--dtb-primary) !important;
  
  }
  
  .dtb-login-modal .border-bottom {
    border-bottom: rgba(var(--dtb-aux-rgb, 0.25)) !important;
  }
  
  .dtb-brand-logo {
    filter: invert(1);
  }
  
  
  /* payment selector */
  
  #dtb-payment-selector .btn-outline-primary:hover {
    background-color: var(--dtb-aux) !important;
  }
  
  
  .dtb-order-card {
    background: var(--dtb-primary) !important;
  }
  
  .modal-footer .btn-secondary {
    color: var(--dtb-secondary) !important;
  }
  
  .dtb-container .btn:disabled,
  .dtb-container .btn[disabled] {
    color: var(--dtb-secondary) !important;
    background-color: var(--dtb-aux) !important;
    opacity: 0.5;
  }
  
  /* logos */
  
  
  h1 {
    font-family: var(--dtb-font-aux) !important;
    text-transform: uppercase!important;
  }