/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 19:13 Unexpected "("
Line 39:1 Expected identifier but found "%"
Line 41:0 Unexpected "{"
Line 41:1 Expected identifier but found "%"
Line 42:0 Unexpected "{"
Line 42:1 Expected identifier but found "%"
Line 43:0 Unexpected "{"
Line 43:1 Expected identifier but found "%"
... and 209 more hidden warnings

**/
{%- comment -%}
  elementa-rivo-fix.css.liquid  ·  v4
  ---------------------------------------------------------------
  CAUSA RAIZ (medida, no supuesta):

  El tema estiliza <button> con un selector de 6 :not() encadenados:
    button:not(.hover-grow):not(.no-hover):not(...):not(...):not(...):not(.custom-dot):hover
  Especificidad = (0,8,1)  <-- cada :not() SUMA

  Cualquier regla mia razonable daba (0,6,2) y PERDIA, sin importar el
  orden de carga. Por eso los intentos v1-v3 no funcionaron: no era un
  problema de orden ni de que faltara cubrir un estado, era aritmetica
  de especificidad.

  SOLUCION EN DOS PARTES:
  1. En styles.css.liquid se anadio `:not([class*="rivo-"])` al selector
     generico del tema -> el tema YA NO toca los botones de Rivo y la app
     recupera el control de sus propios estilos.
  2. Este archivo ya solo estiliza los 2 botones que SI deben verse como
     boton (hero y modal), y usa !important como red de seguridad por si
     el tema se re-genera o alguien revierte el punto 1.

  NO se editan los archivos de la app (los regenera Rivo).
{%- endcomment -%}

{%- assign col_btn    = settings.col_btn -%}
{%- assign col_btn_bg = settings.col_btn_bg -%}
{%- assign SCOPE      = 'body.template-suffix-rivo-loyalty-landing-page' -%}

/* ============================================================
   1) Variables que la app espera (fue escrita para el tema Dawn).
      Sin esto, el texto del boton hereda un color equivocado.
   ============================================================ */
:root {
  --color-button: {{ col_btn_bg | color_extract: 'red' }}, {{ col_btn_bg | color_extract: 'green' }}, {{ col_btn_bg | color_extract: 'blue' }};
  --color-button-text: {{ col_btn | color_extract: 'red' }}, {{ col_btn | color_extract: 'green' }}, {{ col_btn | color_extract: 'blue' }};
  --alpha-button-background: 1;
}

/* ============================================================
   2) LOS 2 BOTONES REALES: hero y modal.
      !important porque el selector del tema tiene especificidad (0,8,1).
   ============================================================ */
{{ SCOPE }} .rivo-button:not(.rivo-success-button):not(.rivo-loading-spinner),
{{ SCOPE }} .rivo-modal__btn:not(.rivo-success-button):not(.rivo-loading-spinner),
{{ SCOPE }} .rivo-modal-button:not(.rivo-success-button):not(.rivo-loading-spinner) {
  background-color: {{ col_btn_bg }} !important;
  color: {{ col_btn }} !important;
  border: 1px solid {{ col_btn_bg }} !important;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

{{ SCOPE }} .rivo-button:not(.rivo-success-button) svg,
{{ SCOPE }} .rivo-modal__btn:not(.rivo-success-button) svg,
{{ SCOPE }} .rivo-modal-button:not(.rivo-success-button) svg {
  fill: currentColor !important;
}

/* Hover: invierte. Excluye los estados propios de la app (success =
   palomita, loading = spinner), donde la app pone el texto transparente
   a proposito y un fondo aqui lo arruinaria. */
{{ SCOPE }} .rivo-button:not(.rivo-success-button):not(.rivo-loading-spinner):hover,
{{ SCOPE }} .rivo-button:not(.rivo-success-button):not(.rivo-loading-spinner):focus-visible,
{{ SCOPE }} .rivo-modal__btn:not(.rivo-success-button):not(.rivo-loading-spinner):hover,
{{ SCOPE }} .rivo-modal__btn:not(.rivo-success-button):not(.rivo-loading-spinner):focus-visible,
{{ SCOPE }} .rivo-modal-button:not(.rivo-success-button):not(.rivo-loading-spinner):hover,
{{ SCOPE }} .rivo-modal-button:not(.rivo-success-button):not(.rivo-loading-spinner):focus-visible {
  background-color: {{ col_btn }} !important;
  color: {{ col_btn_bg }} !important;
  border-color: {{ col_btn_bg }} !important;
}

/* ------------------------------------------------------------------
   Estados propios de la app (success = palomita, loading = spinner).

   COMO FUNCIONA LA PALOMITA (importante, aqui estuvo el bug):
   la app hace
       .rivo-success-button      { color: transparent !important }
       .rivo-success-button:before { background-color: currentColor;
                                     mask-image: <palomita> }
   Es decir: oculta el TEXTO poniendo color transparente, pero dibuja
   la palomita con `currentColor`... que tambien queda transparente.
   La app cuenta con que el FONDO del boton sea transparente para que
   la palomita se vea contra el fondo del modal.

   Si le dejamos fondo negro (como hacia la regla base), el resultado
   es un RECTANGULO NEGRO vacio.

   Solucion: fondo transparente + forzar un color visible SOLO en el
   pseudo-elemento, para que la palomita se pinte de negro.
   ------------------------------------------------------------------ */
{{ SCOPE }} .rivo-success-button,
{{ SCOPE }} .rivo-success-button:hover,
{{ SCOPE }} .rivo-success-button:focus,
{{ SCOPE }} .rivo-loading-spinner,
{{ SCOPE }} .rivo-loading-spinner:hover,
{{ SCOPE }} .rivo-loading-spinner:focus {
  background-color: transparent !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* La palomita: se pinta con background-color del :before.
   Se le da un color solido visible. */
{{ SCOPE }} .rivo-success-button:before {
  background-color: {{ settings.col_headings }} !important;
}

/* ============================================================
   3) TARJETAS (.rivo-card)
      Con el punto 1 aplicado, la app ya manda. Se fija solo el color
      de texto para que nunca herede blanco sobre tarjeta blanca.
      El hover de la app (translateY + opacity) se respeta.
   ============================================================ */
{{ SCOPE }} .rivo-card,
{{ SCOPE }} .rivo-card:hover,
{{ SCOPE }} .rivo-card:focus,
{{ SCOPE }} .rivo-card:active {
  color: var(--rivo-card-font-color, {{ settings.col_text }}) !important;
  border-color: transparent !important;
}

/* Los SVG de las tarjetas NO se tocan: la app no define `fill`, asi que
   usan el negro por defecto del navegador y se ven bien. Atarlos a
   `currentColor` los hacia desaparecer cuando el color heredado
   coincidia con el fondo. Se deja que la app/el navegador manden. */

/* ============================================================
   3b) ICONO DE LA TARJETA
       En styles.css.liquid (linea ~14393) hay un parche viejo:
           .rivo-card:hover .rivo-card-icon svg path {
               fill: {{ col_btn_bg_secondary }} !important;   /* #ffffff */
           }
       Pone el icono BLANCO en hover, sobre tarjeta BLANCA -> desaparece.

       NO se edita ese archivo (es el CSS global del sitio; tocarlo
       rompio la X del toast de restock). Se le gana desde aqui:
       misma especificidad de clases pero un elemento mas -> (0,3,3) vs (0,3,2).
   ============================================================ */
{{ SCOPE }} .rivo-card .rivo-card-icon svg path,
{{ SCOPE }} .rivo-card:hover .rivo-card-icon svg path,
{{ SCOPE }} .rivo-card .rivo-card-icon svg,
{{ SCOPE }} .rivo-card:hover .rivo-card-icon svg {
  fill: var(--rivo-card-font-color, {{ settings.col_headings }}) !important;
}

/* ============================================================
   4) Botones transparentes de la app: cerrar, copiar, cargar mas.
      Nunca deben tomar el fondo del tema.
   ============================================================ */
{{ SCOPE }} .rivo-modal__close,
{{ SCOPE }} .rivo-modal__close:hover,
{{ SCOPE }} .rivo-copy-button,
{{ SCOPE }} .rivo-copy-button:hover,
{{ SCOPE }} .rivo-points-table-load-more-button,
{{ SCOPE }} .rivo-points-table-load-more-button:hover {
  background-color: transparent !important;
  border: 0 !important;
}

{{ SCOPE }} .rivo-modal__close {
  color: var(--rivo-modal-text-color, {{ settings.col_headings }}) !important;
}

{{ SCOPE }} .rivo-copy-button {
  color: {{ settings.col_text }} !important;
}
{{ SCOPE }} .rivo-copy-button:hover {
  color: {{ settings.col_headings }} !important;
  opacity: .75;
}
{{ SCOPE }} .rivo-copy-button svg {
  fill: currentColor;
}

{{ SCOPE }} .rivo-points-table-load-more-button {
  color: {{ settings.col_text }} !important;
  text-decoration: underline;
}
{{ SCOPE }} .rivo-points-table-load-more-button:hover {
  opacity: .7;
}

/* El estado "copiado" lo maneja la app. */
{{ SCOPE }} .rivo-copy-button.rivo-success-button,
{{ SCOPE }} .rivo-copy-button.rivo-loading-spinner {
  color: revert !important;
}

/* ============================================================
   5) Contenedores: nunca llevan fondo propio.
   ============================================================ */
{{ SCOPE }} .rivo-modal-cta,
{{ SCOPE }} .rivo-hero-buttons {
  background: transparent !important;
  border: 0 !important;
}

/* ============================================================
   6) Foco visible por teclado.
   ============================================================ */
{{ SCOPE }} .rivo-button:focus-visible,
{{ SCOPE }} .rivo-modal__btn:focus-visible,
{{ SCOPE }} .rivo-modal-button:focus-visible,
{{ SCOPE }} .rivo-card:focus-visible,
{{ SCOPE }} .rivo-modal__close:focus-visible,
{{ SCOPE }} .rivo-copy-button:focus-visible,
{{ SCOPE }} .rivo-points-table-load-more-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}