/* Ajuste isolado do modal de sabores do catalogo.
   Mantem o carrinho e o catalogo atuais, corrigindo apenas legibilidade,
   altura e sobreposicao dos controles de quantidade. */

.product-quick-modal {
  max-height: 92dvh !important;
  overflow: hidden !important;
}

.product-quick-shell {
  display: flex !important;
  flex-direction: column !important;
  max-height: 92dvh !important;
  overflow: hidden !important;
}

.product-quick-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 82px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 96px !important;
  padding: 14px 48px 14px 14px !important;
  overflow: hidden !important;
}

.product-quick-head > div:first-child {
  min-width: 0 !important;
}

.product-quick-head h2,
.product-quick-head [class*="text-"] {
  overflow-wrap: anywhere !important;
}

.product-quick-image {
  position: relative !important;
  width: 82px !important;
  height: 82px !important;
  max-width: 82px !important;
  max-height: 82px !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  justify-self: end !important;
}

.product-quick-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.product-quick-select {
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 10px !important;
}

.product-quick-search {
  flex: 0 0 auto !important;
  min-height: 42px !important;
  border-radius: 12px !important;
}

.product-quick-flavors {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: min(56vh, 520px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 0 2px 10px !important;
  scroll-padding-bottom: 18px !important;
}

.product-quick-flavor {
  width: 100% !important;
  min-height: 58px !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 8px 8px 10px !important;
  border-radius: 13px !important;
  overflow: visible !important;
}

.product-quick-flavor > div:first-child {
  min-width: 0 !important;
  padding-right: 4px !important;
}

.product-quick-flavor > div:first-child > div:first-child {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 13.5px !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

.product-quick-flavor > div:first-child > div:nth-child(2) {
  margin-top: 3px !important;
  font-size: 10.5px !important;
  line-height: 1.15 !important;
  white-space: normal !important;
}

.product-quick-flavor input[type="radio"] {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 auto !important;
  margin: 0 2px 0 8px !important;
}

/* Algumas versoes do catalogo transformam o radio em seletor - 0 +.
   O :has mantém o layout correto sem depender do HTML exato gerado. */
.product-quick-flavor:has(button) {
  grid-template-columns: minmax(0, 1fr) 96px !important;
}

.product-quick-flavor:has(button) > div:last-child,
.product-quick-flavor:has(button) > span:last-child {
  justify-self: end !important;
  width: 96px !important;
  max-width: 96px !important;
  display: grid !important;
  grid-template-columns: 30px 30px 30px !important;
  align-items: center !important;
  justify-content: end !important;
  gap: 3px !important;
}

.product-quick-flavor button {
  width: 30px !important;
  min-width: 30px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.product-quick-flavor:has(button) button + span,
.product-quick-flavor:has(button) span {
  min-width: 24px !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.product-quick-bar {
  flex: 0 0 auto !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 3 !important;
}

body.cardapio-dark-active .product-quick-modal .product-quick-head,
body.cardapio-dark-active .product-quick-modal .product-quick-select {
  background: #001f13 !important;
}

body.cardapio-dark-active .product-quick-modal .product-quick-flavor {
  background: rgba(0, 42, 25, 0.82) !important;
  border-color: rgba(0, 230, 118, 0.34) !important;
}

body.cardapio-dark-active .product-quick-modal .product-quick-flavor.selected {
  background: rgba(0, 77, 46, 0.95) !important;
  border-color: rgba(0, 230, 118, 0.78) !important;
}

body.cardapio-dark-active .product-quick-modal .product-quick-flavor > div:first-child > div:first-child,
body.cardapio-dark-active .product-quick-modal .product-quick-select h3,
body.cardapio-dark-active .product-quick-modal .product-quick-select p {
  color: #ffffff !important;
}

body.cardapio-dark-active .product-quick-modal .product-quick-flavor > div:first-child > div:nth-child(2) {
  color: rgba(226, 255, 239, 0.78) !important;
}

@media (max-width: 640px) {
  .product-quick-modal {
    width: min(96vw, 390px) !important;
    max-width: 96vw !important;
    max-height: 94dvh !important;
    border-radius: 18px !important;
  }

  .product-quick-shell {
    max-height: 94dvh !important;
  }

  .product-quick-head {
    grid-template-columns: minmax(0, 1fr) 72px !important;
    min-height: 88px !important;
    gap: 10px !important;
    padding: 12px 42px 12px 12px !important;
  }

  .product-quick-image {
    width: 72px !important;
    height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
  }

  .product-quick-flavors {
    max-height: calc(94dvh - 220px) !important;
  }

  .product-quick-flavor {
    min-height: 56px !important;
    padding: 7px 7px 7px 9px !important;
  }

  .product-quick-flavor:has(button) {
    grid-template-columns: minmax(0, 1fr) 92px !important;
  }

  .product-quick-flavor:has(button) > div:last-child,
  .product-quick-flavor:has(button) > span:last-child {
    width: 92px !important;
    max-width: 92px !important;
    grid-template-columns: 29px 28px 29px !important;
  }

  .product-quick-flavor button {
    width: 29px !important;
    min-width: 29px !important;
    height: 31px !important;
    min-height: 31px !important;
  }
}