/* ======================================================================
   UBD Visual UX · UPSELL / VENTA CRUZADA 1.6.22

   - ~20% menos alta.
   - Fondo/backdrop más ligero.
   - Toast de confirmación de agregado.
   - Scope estricto a #extra-upsell-popup y body.ubd-upsell-open.
   ====================================================================== */

#extra-upsell-popup {
  --ubd-upsell-ink: #17383e;
  --ubd-upsell-green: #4b8b61;
  --ubd-upsell-green-soft: #edf7f0;
}

/* Contenedor: más compacto y con tope de altura claramente menor. */
#extra-upsell-popup .modal-dialog {
  max-width: 340px !important;
  min-height: 100vh !important;
  padding: 10px 0 !important;
}

#extra-upsell-popup .modal-content {
  max-height: 72vh !important;
  border-radius: 26px !important;
  overflow: auto !important;
  background: rgba(255,255,255,.94) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 22px 44px rgba(0,0,0,.10) !important;
}

/* Header ~20% más compacto. */
#extra-upsell-popup .modal-header {
  padding: 15px 18px 8px !important;
  min-height: 0 !important;
}

#extra-upsell-popup .modal-title {
  font-size: 15px !important;
  line-height: 1.2 !important;
}

#extra-upsell-popup .close {
  right: 15px !important;
  top: 13px !important;
  font-size: 25px !important;
}

/* Grid y tarjetas más bajas. */
#extra-upsell-popup .upsell-grid {
  gap: 10px !important;
  padding: 13px 15px !important;
}

#extra-upsell-popup .upsell-item {
  border-radius: 20px !important;
  padding: 9px 8px !important;
}

#extra-upsell-popup .upsell-img-box {
  height: 70px !important;
  margin-bottom: 5px !important;
}

#extra-upsell-popup .upsell-item h5 {
  height: 26px !important;
  margin: 0 0 4px !important;
  font-size: 11px !important;
  line-height: 1.18 !important;
}

#extra-upsell-popup .upsell-price {
  margin-bottom: 5px !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
}

#extra-upsell-popup .upsell-btn-small {
  padding: 4px 10px !important;
  border-radius: 11px !important;
  font-size: 8.5px !important;
}

#extra-upsell-popup .upsell-footer-btn {
  padding: 0 15px 15px !important;
}

#extra-upsell-popup .btn-all-extras {
  padding: 11px 13px !important;
  border-radius: 17px !important;
  font-size: 12px !important;
  box-shadow: 0 7px 18px rgba(230,81,0,.16) !important;
}

/* Backdrop más ligero. La clase la controla el JS sólo mientras este modal está abierto. */
body.ubd-upsell-open .modal-backdrop {
  opacity: .20 !important;
  background: rgba(16,24,28,.55) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

/* Feedback visual de agregado. */
#extra-upsell-popup .ubd-upsell-added-note {
  position: sticky !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 10px !important;
  z-index: 50 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  width: calc(100% - 24px) !important;
  margin: 0 auto 8px !important;
  padding: 10px 13px !important;

  border: 1px solid rgba(75,139,97,.18) !important;
  border-radius: 16px !important;
  background: rgba(237,247,240,.98) !important;
  color: #2f6e4a !important;

  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;

  box-shadow: 0 10px 24px rgba(47,110,74,.10) !important;
  opacity: 0 !important;
  transform: translateY(8px) !important;
  pointer-events: none !important;
  transition: opacity .18s ease, transform .18s ease !important;
}

#extra-upsell-popup .ubd-upsell-added-note.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

#extra-upsell-popup .ubd-upsell-added-note.is-loading {
  background: rgba(248,249,248,.98) !important;
  color: #587075 !important;
}

#extra-upsell-popup .ubd-upsell-added-note .ubd-upsell-check {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  border-radius: 999px !important;
  background: #4b8b61 !important;
  color: #fff !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

@media (max-width: 420px) {
  #extra-upsell-popup .modal-dialog {
    width: calc(100% - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #extra-upsell-popup .modal-content {
    max-height: 72vh !important;
  }

  #extra-upsell-popup .upsell-grid {
    gap: 9px !important;
    padding: 12px !important;
  }

  #extra-upsell-popup .upsell-img-box {
    height: 66px !important;
  }
}