/**
 * Cart Motivator (V1) -- carrito, mini-carrito y checkout.
 * Mismo criterio que account.css/checkout.css: namespace propio (.ukupoints-motivator*), sin
 * colores fijos salvo el mismo azul de marca (#0000ff) ya usado en checkout.css, sin frameworks
 * ni librerías externas. Los estados (normal/cerca/bonus/guest) se diferencian por borde +
 * peso de fuente + contenido textual, NUNCA solo por color (accesibilidad, apartado 16).
 */

.ukupoints-motivator {
  margin: 16px 0;
  border: 1px solid currentColor;
  border-radius: 8px;
  padding: 12px 16px;
  opacity: 0.95;
}

.ukupoints-motivator__headline {
  margin: 0 0 4px;
  font-weight: 600;
}

.ukupoints-motivator__line {
  margin: 4px 0;
  opacity: 0.9;
}

.ukupoints-motivator__line small {
  opacity: 0.85;
  font-size: 0.85em;
}

.ukupoints-motivator__tooltip {
  margin: 8px 0 0;
  font-size: 0.82em;
  opacity: 0.75;
}

.ukupoints-motivator__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.ukupoints-motivator__btn {
  display: inline-block;
  border-radius: 8px;
  padding: 8px 14px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid currentColor;
  /* El CTA nativo de checkout (Copy::checkout_native_account_available()) se pinta como
     <button>, no <a> -- normaliza el estilo por defecto del navegador para que sea idéntico
     al de un enlace, sin depender del elemento concreto. */
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* P1 de contraste (capturas reales, invitado): #0000ff como TEXTO del CTA principal sobre el
   fondo oscuro de UKUBOM apenas se leía -- mismo problema ya corregido para los titulares de
   bonus (ver comentario de bonus_active/bonus_near más abajo), aquí en los botones "Crear
   cuenta..." de carrito/mini-carrito/checkout. Igual que el botón real "Finalizar compra" /
   "Realizar el pedido" del propio tema (relleno sólido + texto blanco, ya visible en las mismas
   capturas) -- incluso jerarquía visual, no más llamativo. Texto blanco (contraste ~8,6:1 sobre
   #0000ff, cumple AA y AAA de sobra); el azul de marca se queda en el fondo/borde, nunca como
   color de texto. */
.ukupoints-motivator__btn--primary {
  border-color: #0000ff;
  background: #0000ff;
  color: #fff;
}

.ukupoints-motivator__btn--secondary {
  opacity: 0.85;
  font-weight: 500;
}

.ukupoints-motivator__btn:focus-visible {
  outline: 2px solid #0000ff;
  outline-offset: 2px;
}

/* Jerarquía en checkout (cierre, 0.5.4): el CTA de Ukupoints no debe competir visualmente con
   "Realizar el pedido" (la conversión principal de esa pantalla). Solo en este contexto, se
   quita el relleno sólido del botón primario -- el texto sigue blanco y el borde sigue azul de
   marca (heredados de .ukupoints-motivator__btn--primary de arriba), nunca se vuelve a
   #0000ff como color de texto. En carrito (sin esta regla) el botón sigue siendo el relleno
   azul sólido de siempre; el mini-carrito no usa esta clase, no se ve afectado. */
.ukupoints-motivator--ctx-checkout .ukupoints-motivator__btn--primary {
  background: transparent;
}

.ukupoints-motivator--ctx-checkout .ukupoints-motivator__btn--primary:hover {
  background: rgba(0, 0, 255, 0.12);
}

/* Estado: cerca del siguiente punto (normal) -- borde discontinuo, no solo color. */
.ukupoints-motivator--near_next,
.ukupoints-motivator--zero_near,
.ukupoints-motivator--guest_zero_near {
  border-style: dashed;
}

/* Estado: bonus (activo o cerca) -- acento de marca vía borde + fondo muy sutil, NUNCA como
   color de texto principal. Incidencia real de contraste (QA visual, capturas 05-08): #0000ff
   como texto directo sobre el fondo oscuro de UKUBOM no da un contraste WCAG razonable. El
   titular hereda el color de texto normal de la página (igual que cualquier otro estado); el
   azul de marca se queda en el borde (ya reforzado con border-width:2px) + un tinte de fondo
   casi imperceptible -- el estado sigue siendo distinguible sin depender solo del color (borde
   más grueso + el propio texto/emoji del titular, igual que el resto de estados del fichero). */
.ukupoints-motivator--bonus_active,
.ukupoints-motivator--bonus_near {
  border-width: 2px;
  border-color: #0000ff;
  background: rgba(0, 0, 255, 0.07);
}

/* Estado: invitado -- sin borde especial propio, se diferencia por el CTA de cuenta presente. */

/* Estado "lejos de todo" en carrito registrado (zero_far, sin CTA ni info accionable todavía) --
   apartado 10 del encargo: la caja grande ocupaba demasiado espacio para su poco valor real.
   Se mantiene la presencia del programa (no se oculta, a diferencia del mini-carrito), pero
   como una línea secundaria/informativa de bajo peso visual, no como un bloque destacado. Solo
   afecta a este estado concreto en 'cart': 'guest_zero_far' conserva su caja normal (sí lleva
   CTA de cuenta, con contenido accionable) y el resto de estados no se tocan. */
.ukupoints-motivator--zero_far.ukupoints-motivator--ctx-cart {
  padding: 6px 12px;
  margin: 10px 0;
  opacity: 0.7;
  border-style: dotted;
  font-size: 0.88em;
}

.ukupoints-motivator--zero_far.ukupoints-motivator--ctx-cart .ukupoints-motivator__line {
  margin: 0;
}

/* Mini-carrito: una sola línea, sin caja propia (hereda el espaciado del widget). */
.ukupoints-motivator-compact {
  margin: 8px 0 0;
  font-size: 0.92em;
  opacity: 0.9;
}

/* Mismo fix de contraste que el botón primario de arriba: el enlace compacto del mini-carrito
   ("Crear cuenta") no puede llevar fondo propio (es texto en una sola línea, sin caja -- ver
   comentario de .ukupoints-motivator-compact más arriba), así que aquí el acento de marca se
   queda en el subrayado (texto azul puro ya daba el mismo problema de contraste que el botón). */
.ukupoints-motivator-compact__link {
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #0000ff;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.ukupoints-motivator-compact__link:focus-visible {
  outline: 2px solid #0000ff;
  outline-offset: 2px;
}

.ukupoints-motivator-compact--near_next .ukupoints-motivator-compact__text,
.ukupoints-motivator-compact--zero_near .ukupoints-motivator-compact__text,
.ukupoints-motivator-compact--guest_zero_near .ukupoints-motivator-compact__text {
  font-weight: 700;
}

/* Transición visual cuando WooCommerce repinta el bloque (añadida/quitada por cart-motivator.js;
   puramente cosmética, el bloque funciona igual sin esta clase si JS está deshabilitado). */
.ukupoints-motivator.is-refreshing,
.ukupoints-motivator-compact.is-refreshing {
  opacity: 0.4;
  transition: opacity 0.15s ease;
}

@media (max-width: 480px) {
  .ukupoints-motivator {
    padding: 10px 12px;
  }

  .ukupoints-motivator__cta {
    flex-direction: column;
  }

  .ukupoints-motivator__btn {
    text-align: center;
  }
}