/**
 * slider.css — Carrusel propio para las reseñas de Google.
 *
 * El widget [grw] se deja en layout "grid" (estable). Su contenedor de tarjetas
 * es UN solo `.grw-reviews` (clase real `.rpi-slides.grw-reviews`) con todas las
 * `.grw-review` como hijas directas; la "rejilla" es multicolumna CSS. Aqui la
 * convertimos en una PISTA horizontal (flex, sin wrap, con scroll-snap) y
 * slider.js le añade flechas, puntos, autoplay y carga dinamica.
 *
 * ESPECIFICIDAD: el plugin inyecta un <style id="rpi-style"> por JS DESPUES de
 * esta hoja, con `!important`. A igual especificidad ganaria el suyo por orden
 * de origen. Por eso todo selector que pise al plugin lleva `.wp-gr` (sube la
 * especificidad). slider.js ademas fuerza el layout inline con `!important`.
 *
 * CONTROLES NATIVOS: cuando el carrusel se monta, slider.js marca la raiz con
 * `.vpro-rev-ready`; entonces ocultamos las flechas/puntos nativos del plugin
 * (`.grw-prev`/`.grw-next`/`.rpi-dots-wrap`) — pero SIN quitarlos del DOM: se
 * dejan clicables (los usamos para "cargar mas"). Si slider.js no montara, los
 * controles nativos siguen visibles.
 */

/* Contenedor propio en bloque (pista + puntos apilados). Un solo hijo en flujo
   dentro de `.grw-content-inner` (que es flex en fila): ocupa todo el ancho y
   deja los puntos en su propia fila abajo. */
.shortcode-live-reviews .vpro-rev-shell{display:block!important;width:100%!important;flex:1 1 100%!important;min-width:0!important}

/* Viewport que envuelve la pista (lo crea slider.js): contexto de posicion. */
.shortcode-live-reviews .vpro-rev-viewport{position:relative;width:100%}

/* ── Pista: fila horizontal, sin envolver, con scroll-snap ─────────────────── */
.shortcode-live-reviews .wp-gr .grw-reviews{
  --per:3;                 /* tarjetas visibles a la vez (desktop) */
  --gap:20px;
  display:flex!important;
  flex-flow:row nowrap!important;
  align-items:stretch!important;
  gap:var(--gap)!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:4px 2px 6px!important;
  /* Anula la multicolumna/masonry del layout grid del plugin. */
  columns:auto!important;
  column-count:auto!important;
  column-width:auto!important;
  column-gap:normal!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-snap-type:x mandatory!important;
  scroll-behavior:smooth!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:none!important;                 /* Firefox */
  overscroll-behavior-x:contain!important;
}
.shortcode-live-reviews .wp-gr .grw-reviews::-webkit-scrollbar{width:0!important;height:0!important;display:none!important} /* WebKit */

@media(max-width:900px){.shortcode-live-reviews .wp-gr .grw-reviews{--per:2}}
@media(max-width:560px){.shortcode-live-reviews .wp-gr .grw-reviews{--per:1}}

/* Cada tarjeta ocupa 1/--per del ancho visible (slider.js tambien lo fija inline). */
.shortcode-live-reviews .wp-gr .grw-reviews>.grw-review{
  flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per))!important;
  width:calc((100% - (var(--per) - 1) * var(--gap)) / var(--per))!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  float:none!important;
  break-inside:avoid!important;
  scroll-snap-align:start!important;
}

/* ── Ocultar controles nativos del plugin (solo cuando montamos el carrusel) ──
   Fuera de pantalla en vez de display:none para que sigan clicables por JS. */
.shortcode-live-reviews.vpro-rev-ready .wp-gr .grw-prev,
.shortcode-live-reviews.vpro-rev-ready .wp-gr .grw-next,
.shortcode-live-reviews.vpro-rev-ready .wp-gr .rpi-dots-wrap,
.shortcode-live-reviews.vpro-rev-ready .vpro-rev-morehide{
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;border:0!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;
  opacity:0!important;pointer-events:none!important;
}

/* ── Variables de botones/mordida (autoescalan con clamp) ──────────────────────
   OJO: el plugin resetea TODO boton dentro de .rpi con `.rpi button{all:revert
   !important}`. Por eso NUESTROS botones deben declararse con `!important` y
   suficiente especificidad (.shortcode-live-reviews .vpro-rev-btn = 0,2,0 gana a
   .rpi button = 0,1,1). Sin `!important` las flechas salen gigantes y sin estilo. */
.shortcode-live-reviews .wp-gr{
  --vpro-rev-size: clamp(40px, 1.2rem, 50px);   /* diametro del boton */
  --vpro-rev-r:calc(var(--vpro-rev-size) / 2);  /* radio */
  --vpro-rev-inset:-11px;                       /* separacion desde el borde */
  --vpro-rev-bite:6px;                          /* holgura de la mordida */
}

/* Mordida propia (!important para ganarle al mask nativo del plugin): recorta un
   circulo en cada extremo de la pista, donde va el boton. mask fija al viewport
   visible => las muescas no se mueven al hacer scroll. */
.shortcode-live-reviews .wp-gr .grw-reviews{
  --bite-r:calc(var(--vpro-rev-r) + var(--vpro-rev-bite));
  --bite-shift:calc(var(--vpro-rev-inset) + var(--vpro-rev-r));
  --bite-a:.6px;
  -webkit-mask:
    radial-gradient(circle var(--bite-r) at var(--bite-shift) 50%, transparent 0, transparent calc(var(--bite-r) - var(--bite-a)), #000 calc(var(--bite-r) + var(--bite-a))),
    radial-gradient(circle var(--bite-r) at calc(100% - var(--bite-shift)) 50%, transparent 0, transparent calc(var(--bite-r) - var(--bite-a)), #000 calc(var(--bite-r) + var(--bite-a))),
    linear-gradient(#000 0 0)!important;
  -webkit-mask-repeat:no-repeat!important;
  -webkit-mask-size:100% 100%!important;
  -webkit-mask-composite:source-in,source-in!important;
  mask:
    radial-gradient(circle var(--bite-r) at var(--bite-shift) 50%, transparent 0, transparent calc(var(--bite-r) - var(--bite-a)), #000 calc(var(--bite-r) + var(--bite-a))),
    radial-gradient(circle var(--bite-r) at calc(100% - var(--bite-shift)) 50%, transparent 0, transparent calc(var(--bite-r) - var(--bite-a)), #000 calc(var(--bite-r) + var(--bite-a))),
    linear-gradient(#000 0 0)!important;
  mask-repeat:no-repeat!important;
  mask-size:100% 100%!important;
  mask-composite:intersect,intersect!important;
}

/* ── Flechas propias (una a cada lado, redondas, escalan). Todo !important para
      ganarle a `.rpi button{all:revert!important}`. ─────────────────────────── */
.shortcode-live-reviews .vpro-rev-btn{
  position:absolute!important;top:50%!important;transform:translateY(-50%)!important;z-index:6!important;
  width:var(--vpro-rev-size)!important;height:var(--vpro-rev-size)!important;
  border-radius:50%!important;
  background:#fff!important;border:1px solid var(--border-cream)!important;color:var(--ink)!important;
  display:grid!important;place-items:center!important;cursor:pointer!important;padding:0!important;margin:0!important;
  box-shadow:0 6px 20px rgba(42,32,38,.14)!important;
  transition:transform .15s var(--ease),background .15s var(--ease),opacity .2s var(--ease)!important;
  appearance:none!important;-webkit-appearance:none!important;
}
.shortcode-live-reviews .vpro-rev-btn:hover{background:var(--cream)!important;transform:translateY(-50%) scale(1.08)!important}
.shortcode-live-reviews .vpro-rev-btn:active{transform:translateY(-50%) scale(.96)!important;box-shadow:none!important}
.shortcode-live-reviews .vpro-rev-btn svg{width:45%!important;height:45%!important;fill:none!important;stroke:currentColor!important;stroke-width:2.2!important;stroke-linecap:round;stroke-linejoin:round;display:block!important}
.shortcode-live-reviews .vpro-rev-prev{left:var(--vpro-rev-inset)!important;right:auto!important}
.shortcode-live-reviews .vpro-rev-next{right:var(--vpro-rev-inset)!important;left:auto!important}
/* Solo la flecha "anterior" se atenua en el inicio; la "siguiente" nunca se oculta. */
.shortcode-live-reviews .vpro-rev-btn.is-disabled{opacity:.35!important;cursor:default!important;pointer-events:none!important}

/* ── Puntos ───────────────────────────────────────────────────────────────── */
.shortcode-live-reviews .vpro-rev-dots{
  display:flex!important;flex-direction:row!important;justify-content:center!important;align-items:center!important;
  gap:8px!important;width:100%!important;margin:22px 0 0!important;padding:0!important;flex-wrap:wrap!important;
}
.shortcode-live-reviews .vpro-rev-dot{
  width:8px!important;height:8px!important;border-radius:50%!important;border:none!important;padding:0!important;margin:0!important;cursor:pointer!important;
  background:var(--border-cream)!important;box-shadow:none!important;appearance:none!important;-webkit-appearance:none!important;
  transition:background .2s var(--ease),transform .2s var(--ease)!important;
}
.shortcode-live-reviews .vpro-rev-dot:hover{background:var(--coral-strong)!important}
.shortcode-live-reviews .vpro-rev-dot.is-active{background:var(--coral)!important;transform:scale(1.3)!important}
/* Ventana deslizante: fuera de rango se ocultan; los extremos se ven mas pequeños. */
.shortcode-live-reviews .vpro-rev-dot.vpro-rev-dot--hidden{display:none!important}
.shortcode-live-reviews .vpro-rev-dot.vpro-rev-dot--edge{transform:scale(.55)!important;opacity:.55!important}

/* Indicador de "cargando mas reseñas" (lo pone/quita slider.js). */
.shortcode-live-reviews .vpro-rev-viewport.is-loading::after{
  content:"";position:absolute;top:50%;right:60px;z-index:6;
  width:22px;height:22px;border-radius:50%;
  border:2px solid var(--border-cream);border-top-color:var(--coral);
  transform:translateY(-50%);animation:vpro-rev-spin .7s linear infinite;
}
@keyframes vpro-rev-spin{to{transform:translateY(-50%) rotate(360deg)}}

/* Respeta "reduce motion". */
@media (prefers-reduced-motion:reduce){
  .shortcode-live-reviews .wp-gr .grw-reviews{scroll-behavior:auto!important}
  .shortcode-live-reviews .vpro-rev-viewport.is-loading::after{animation:none}
}