/* Container */
.rl-swiper { position: relative; width: min(1200px, 94vw); margin: 0 auto; }
.rl-swiper .swiper { overflow: visible; } /* allow arrows to hang outside */

/* Arrows */
.rl-nav {
  position: absolute; top: 40%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9);
  background: rgba(0,0,0,.15);
  backdrop-filter: blur(2px);
  cursor: pointer; z-index: 3;
}
.rl-prev { left: -14px; }
.rl-next { right: -14px; }
.rl-nav::before {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff;
}
.rl-prev::before { transform: rotate(-135deg); left: 14px; }
.rl-next::before { transform: rotate(45deg); right: 14px; }

/* Dots */
.rl-dots { margin-top: 14px; text-align: center; }
.rl-dots .swiper-pagination-bullet {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,.25); opacity: 1; margin: 0 6px;
}
.rl-dots .swiper-pagination-bullet-active { background: #000; }

/* Card structure (used by all three shortcodes) */
.rl-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.06); height: auto; display: flex; flex-direction: column; }
.rl-card-media img { width: 100%; height: clamp(200px, 35vw, 420px); object-fit: cover; display: block; }
.rl-card-body { padding: 16px 16px 20px; text-align: center; }
.rl-card-title { margin: 0 0 6px; font-weight: 700; font-size: 18px; line-height: 1.25; }
.rl-card-text { margin: 0 0 12px; color: #444; }
.rl-btn { display: inline-block; padding: 10px 16px; border-radius: 12px; background: #36B9AC; color: #fff; text-decoration: none; font-weight: 700; }
.rl-price { margin: 8px 0 10px; font-weight: 700; }

/* STYLE VARIANTS */
.rl-swiper.style-card .rl-card { border: 1px solid rgba(0,0,0,.06); }
.rl-swiper.style-minimal .rl-card { box-shadow: none; border-radius: 10px; border: 1px solid #eaeaea; }
.rl-swiper.style-minimal .rl-card-media img { height: clamp(160px, 28vw, 320px); }
.rl-swiper.style-minimal .rl-btn { background: #111; }

/* Mobile tweaks */
@media (max-width: 768px){
  .rl-prev { left: -10px; } .rl-next { right: -10px; }
}
/* Dots (custom, one per view) */
.rl-dots { margin-top: 14px; display: flex; gap: 10px; justify-content: center; }
.rl-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(0,0,0,.25); border: 0; padding: 0; cursor: pointer;
}
.rl-dot.is-active { background: #000; }