@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Inter:wght@300..700&family=Bodoni+Moda:opsz,wght@6..96,400..900&display=swap');

:root {

  /* fonts */

  /* Primary font branded */
  --dtb-font-primary: 'Comfortaa', 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 */
  --dtb-font-aux: 'Comfortaa', sans-serif;

  /* colors */

  /* Main brand background (dark) */
  --dtb-base: #1c1917;
  --dtb-base-rgb: 28, 25, 23;
  /* Action / button color - rosa claro */
  --dtb-secondary: #F4B3AF;
  --dtb-secondary-rgb: 244, 179, 175;
  /* Accent / secondary color - verde oliva */
  --dtb-primary: #557551;
  --dtb-primary-rgb: 85, 117, 81;
  /* Text / warm off-white */
  --dtb-aux: #f0e8e6;
  --dtb-aux-rgb: 240, 232, 230;

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

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

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

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

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

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

.dtb-order-type-selector button i {
  display: none !important;
}

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

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

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

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

.dtb-custom-mobile-cart-button .btn {
  color: var(--dtb-base) !important;
  background: var(--dtb-secondary) !important;
  border: 1px solid var(--dtb-secondary) !important;
}

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

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

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

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

#dtb-custom-cart-btn {
  background: var(--dtb-secondary) !important;
  color: var(--dtb-base) !important;
  text-transform: uppercase !important;
  font-weight: 500;
  border: 1px solid var(--dtb-secondary) !important;
}

#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);
  font-size: 24px !important;
  color: var(--dtb-secondary);
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

.item-variables {
  color: rgba(var(--dtb-aux-rgb), 0.75) !important;
  font-family: var(--dtb-font-secondary);
}

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

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

.dtb-bg-primary {
  background-color: var(--dtb-base) !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-aux-rgb), 0.4);
}

.form-check-input:checked[type=checkbox] {
  background-color: var(--dtb-secondary);
  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='%23557551' stroke-width='18'/%3E%3C/svg%3E");
}

.form-check-input:checked[type=radio] {
  background-color: var(--dtb-secondary);
  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='%23557551'/%3E%3C/svg%3E");
}

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

.dtb-input-address i {
  color: var(--dtb-secondary) !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.2) !important;
}

.dtb-input-address .border-end {
  border-right: 1px solid rgba(var(--dtb-aux-rgb), 0.2) !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-secondary) !important;
  font-family: var(--dtb-font-primary) !important;
}

/* header */

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

/* body */

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

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

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

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

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

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

.dtb-card .item-description {
  font-weight: 400 !important;
  font-family: 'Bodoni Moda', serif !important;
}

.item-description {
  font-family: 'Bodoni Moda', serif !important;
}

.dtb-card .dtb-item-title-grid {
  font-weight: 400 !important;
  text-transform: uppercase !important;
}

/* items modal view */

.dtb-modal .modal-content {
  background-color: var(--dtb-base) !important;
  border: 1px solid rgba(var(--dtb-secondary-rgb), 0.35) !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-secondary-rgb), 0.25) !important;
}

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

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

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

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

.dtb-card .item-count-bottom {
  background-color: var(--dtb-secondary) !important;
}

#menu-item-modal,
#login-modal {
  background-color: rgba(var(--dtb-secondary-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-aux-rgb), 0.15) !important;
}

.dtb-mobile-counter .bg-white .bi-dash-circle-fill {
  color: var(--dtb-secondary) !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-aux-rgb), 0.12) !important;
}

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

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

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

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

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

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

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

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

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

/* containers */

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

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

.dtb-order-summary {
  background-color: rgba(var(--dtb-secondary-rgb), 0.08) !important;
  border: 1px solid rgba(var(--dtb-secondary-rgb), 0.25) !important;
}

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

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

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

/* scrollbar */

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

::-webkit-scrollbar-track {
  background: rgba(var(--dtb-secondary-rgb), 0.06);
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--dtb-secondary-rgb), 0.3);
  border-radius: 50px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--dtb-secondary-rgb), 0.6);
}

/* Modal map */

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

.dtb-map-list .card:hover {
  background: var(--dtb-primary) !important;
  color: var(--dtb-aux) !important;
  border-color: var(--dtb-primary) !important;
}

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

#menu-item-modal .border-bottom {
  border-bottom: 1px solid rgba(var(--dtb-aux-rgb), 0.15) !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-secondary) !important;
}

/* dropdown menu */

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

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

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

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

/* cookie banner */

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

/* login */

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

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

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

/* payment selector */

#dtb-payment-selector .btn-outline-primary:hover {
  background-color: var(--dtb-secondary) !important;
  color: var(--dtb-base) !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-base) !important;
  background-color: var(--dtb-secondary) !important;
  opacity: 0.4;
}