/**
 * Biury E-Commerce — Estilos de Venta Cruzada (CMX High Performance Cross-Sell)
 *
 * Aplica la identidad visual oficial de Biury (Montserrat, gradiente rosa, sombras suaves,
 * bordes redondeados y micro-interacciones) sobre el modal y la pantalla intermedia de cross-sell,
 * respetando al 100% la lógica del plugin sin modificar su código interno.
 */

:root {
  --biury-pink: #F440A8;
  --biury-pink-dark: #D32588;
  --biury-pink-soft: #FFF0F6;
  --biury-pink-border: #FCD8EB;
  --biury-coral: #EF7088;
  --biury-gradient: linear-gradient(135deg, #F440A8 0%, #EF7088 100%);
  --biury-text-main: #2E2926;
  --biury-text-muted: #666666;
  --biury-border: #F0E8EC;
  --biury-radius-card: 18px;
  --biury-radius-modal: 24px;
}

/* ==========================================================================
   1. MODAL INTERSTITIAL (OVERLAY Y DIÁLOGO)
   ========================================================================== */

.cmx-modal {
  --cmx-brand: #F440A8 !important;
  --cmx-brand-deep: #D32588 !important;
  --cmx-brand-ink: #2E2926 !important;
  --cmx-brand-soft: #FFF0F6 !important;
  --cmx-line: #F0E8EC !important;
  --cmx-save: #F440A8 !important;
  --cmx-muted: #666666 !important;
  --cmx-faint: #888888 !important;
  --cmx-radius: var(--biury-radius-modal) !important;
  font-family: 'Inter', sans-serif !important;
  z-index: 99999 !important;
}

/* Fondo oscurecido elegante con desenfoque */
.cmx-modal__backdrop {
  background: rgba(18, 12, 16, 0.6) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Contenedor del diálogo */
.cmx-modal__dialog {
  background: #FFFFFF !important;
  border-radius: var(--biury-radius-modal) !important;
  border: 1.5px solid var(--biury-border) !important;
  box-shadow: 0 25px 70px rgba(46, 41, 38, 0.25), 0 0 0 1px rgba(244, 64, 168, 0.08) !important;
  max-width: 680px !important;
  overflow: hidden !important;
}

/* Botón de cierre superior */
.cmx-modal__close {
  background: #FFFFFF !important;
  border: 1.5px solid #F0E8EC !important;
  color: var(--biury-text-muted) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  top: 18px !important;
  right: 18px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease !important;
  font-size: 1.3rem !important;
}

.cmx-modal__close:hover {
  border-color: var(--biury-pink) !important;
  color: var(--biury-pink) !important;
  background: var(--biury-pink-soft) !important;
  transform: rotate(90deg) !important;
}

/* Cabecera del modal con tono suave Biury */
.cmx-modal__head {
  padding: 36px 36px 14px !important;
  text-align: center !important;
  background: linear-gradient(135deg, #FFF0F6 0%, #FAF4EE 100%) !important;
  border-bottom: 1.5px solid var(--biury-pink-border) !important;
}

/* Insignia 'Tu pedido está listo' */
.cmx-modal__eyebrow {
  background: #FFFFFF !important;
  color: var(--biury-pink) !important;
  border: 1.5px solid var(--biury-pink-border) !important;
  border-radius: 999px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 12px !important;
  padding: 6px 14px !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 14px rgba(244, 64, 168, 0.12) !important;
}

.cmx-modal__eyebrow:before {
  content: "✦ " !important;
  color: var(--biury-coral) !important;
}

/* Título principal con Montserrat Bold */
.cmx-modal__title {
  color: var(--biury-text-main) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.65rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.4px !important;
  margin: 0 0 8px !important;
}

/* Subtítulo */
.cmx-modal__sub {
  color: var(--biury-text-muted) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  max-width: 46ch !important;
  margin: 0 auto !important;
}

/* Rejilla de tarjetas */
.cmx-modal__cards {
  display: grid !important;
  gap: 16px !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  padding: 24px 32px 10px !important;
}

/* ==========================================================================
   2. TARJETAS DE PRODUCTO (.cmx-card)
   ========================================================================== */

.cmx-card {
  background: #FFFFFF !important;
  border: 1.5px solid var(--biury-border) !important;
  border-radius: var(--biury-radius-card) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.cmx-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--biury-pink-border) !important;
  box-shadow: 0 16px 36px rgba(244, 64, 168, 0.12) !important;
}

.cmx-card.is-added {
  border-color: #10B981 !important;
  border-width: 2px !important;
  box-shadow: 0 10px 28px rgba(16, 185, 129, 0.15) !important;
}

/* Imagen del producto */
.cmx-card__media {
  aspect-ratio: 5/4 !important;
  background: #FAF8FA !important;
  position: relative !important;
  overflow: hidden !important;
}

.cmx-card__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
}

.cmx-card:hover .cmx-card__media img {
  transform: scale(1.05) !important;
}

/* Insignia de Ahorro / Descuento */
.cmx-card__save {
  background: var(--biury-gradient) !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  padding: 4px 10px !important;
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  box-shadow: 0 4px 12px rgba(244, 64, 168, 0.35) !important;
  z-index: 2 !important;
}

/* Cuerpo de la tarjeta */
.cmx-card__body {
  display: flex !important;
  flex: 1 !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 14px 14px 12px !important;
}

.cmx-card__cat {
  color: #888888 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.cmx-card__name {
  color: var(--biury-text-main) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.94rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

.cmx-card__name a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.cmx-card__name a:hover {
  color: var(--biury-pink) !important;
}

/* Precios */
.cmx-card__price {
  align-items: baseline !important;
  display: flex !important;
  gap: 8px !important;
  margin: auto 0 0 !important;
  padding-top: 4px !important;
}

.cmx-card__now,
.cmx-card__price ins {
  color: var(--biury-text-main) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.cmx-card__was,
.cmx-card__price del {
  color: #999999 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  text-decoration: line-through !important;
}

/* Botón 'Agregar' de cada tarjeta */
.cmx-card__footer {
  padding: 0 14px 14px !important;
}

.cmx-card__add {
  background: var(--biury-gradient) !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: #FFFFFF !important;
  cursor: pointer !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  padding: 11px 14px !important;
  text-transform: uppercase !important;
  width: 100% !important;
  box-shadow: 0 6px 18px rgba(244, 64, 168, 0.25) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.cmx-card__add:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(244, 64, 168, 0.4) !important;
}

.cmx-card__add:disabled {
  cursor: default !important;
  opacity: 0.7 !important;
  box-shadow: none !important;
}

/* ==========================================================================
   3. ACCIONES Y BOTÓN DE CONTINUAR AL PAGO
   ========================================================================== */

.cmx-modal__actions {
  align-items: center !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 16px 32px 30px !important;
}

.cmx-modal__continue {
  background: var(--biury-gradient) !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 32px rgba(244, 64, 168, 0.35) !important;
  color: #FFFFFF !important;
  cursor: pointer !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  padding: 16px 28px !important;
  width: 100% !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.cmx-modal__continue:hover,
.cmx-modal__continue:focus,
.cmx-modal__continue:active {
  background: var(--biury-gradient) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 40px rgba(244, 64, 168, 0.5) !important;
}

.cmx-modal__continue:before {
  display: none !important;
  content: none !important;
}

.cmx-modal__continue:after {
  content: " →" !important;
  font-size: 1.15rem !important;
  display: inline-block !important;
  margin-left: 6px !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  background-image: none !important;
  animation: none !important;
  -webkit-animation: none !important;
  transform: none !important;
  transition: none !important;
}

.cmx-modal__continue:hover:after,
.cmx-modal__continue:focus:after,
.cmx-modal__continue:active:after {
  transform: none !important;
  animation: none !important;
  -webkit-animation: none !important;
  background: none !important;
  background-image: none !important;
}

/* Enlace / Botón 'No, gracias' */
.cmx-modal__skip,
.cmx-modal__skip:hover,
.cmx-modal__skip:focus,
.cmx-modal__skip:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

.cmx-modal__skip {
  color: var(--biury-text-muted) !important;
  cursor: pointer !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  padding: 8px 16px !important;
  display: inline-block !important;
}

.cmx-modal__skip:hover,
.cmx-modal__skip:focus {
  color: var(--biury-pink) !important;
  text-decoration: underline !important;
  background: transparent !important;
  background-color: transparent !important;
}

.cmx-modal__skip:before,
.cmx-modal__skip:after {
  display: none !important;
  content: none !important;
  animation: none !important;
  -webkit-animation: none !important;
  background: none !important;
}

/* Mensajes de estado */
.cmx-modal__status {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--biury-text-muted) !important;
  margin: 0.6rem 0 0 !important;
  text-align: center !important;
}

.cmx-modal__status.is-error {
  color: #EF4444 !important;
}

/* ==========================================================================
   4. PANTALLA INTERMEDIA FULL PAGE (.cmx-cross-sell)
   ========================================================================== */

.cmx-cross-sell {
  --cmx-gap: 1.5rem !important;
  --cmx-radius: var(--biury-radius-card) !important;
  --cmx-border: var(--biury-border) !important;
  --cmx-muted: var(--biury-text-muted) !important;
  --cmx-accent: var(--biury-pink) !important;
  font-family: 'Inter', sans-serif !important;
  max-width: 1140px !important;
  padding: 40px 20px 80px !important;
}

.cmx-cross-sell__header {
  margin-bottom: 35px !important;
  text-align: center !important;
}

.cmx-cross-sell__title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: var(--biury-text-main) !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 8px !important;
}

.cmx-cross-sell__subtitle {
  color: var(--biury-text-muted) !important;
  font-size: 1.05rem !important;
}

.cmx-cross-sell__summary {
  background: #FFFFFF !important;
  border: 1.5px solid var(--biury-border) !important;
  border-radius: 18px !important;
  padding: 22px 28px !important;
  margin-top: 30px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
}

.cmx-cross-sell__continue {
  background: var(--biury-gradient) !important;
  border: 0 !important;
  border-radius: 16px !important;
  color: #FFFFFF !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  box-shadow: 0 14px 32px rgba(244, 64, 168, 0.35) !important;
  padding: 16px 36px !important;
  text-decoration: none !important;
  display: inline-block !important;
}

.cmx-cross-sell__continue:hover {
  box-shadow: 0 18px 40px rgba(244, 64, 168, 0.5) !important;
  transform: translateY(-2px) !important;
}

/* ==========================================================================
   5. RESPONSIVE / MOBILE ADAPTATION
   ========================================================================== */

@media (max-width: 600px) {
  .cmx-modal {
    padding: 0.5rem !important;
  }
  .cmx-modal__head {
    padding: 24px 20px 10px !important;
  }
  .cmx-modal__title {
    font-size: 1.3rem !important;
  }
  .cmx-modal__cards {
    grid-template-columns: 1fr !important;
    padding: 16px 20px 8px !important;
    max-height: 50vh !important;
    overflow-y: auto !important;
  }
  .cmx-modal__actions {
    padding: 12px 20px 24px !important;
  }
}