/* ============================================================
   Raaniyah Store — Ajakan nonton video "Cara Berbelanja"
   untuk pengunjung baru (modal #rsPanduanVideo di footer_public.php)
   ============================================================ */
.rs-pv-dialog { max-width: 400px; }
.rs-pv {
  position: relative;
  border: 0;
  border-radius: var(--r-xl, 24px);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px rgba(60, 30, 30, .25);
}
.rs-pv-close {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  background-color: rgba(255, 255, 255, .92); border-radius: 50%;
  padding: .55rem; opacity: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

/* ---- Tampilan ajakan ---- */
.rs-pv-thumb {
  position: relative; display: block; width: 100%; height: 230px;
  padding: 0; border: 0; cursor: pointer; overflow: hidden;
  background: var(--rs-blush, #F7E8E8);
}
.rs-pv-thumb img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 66%;
  transition: transform .4s ease;
}
.rs-pv-thumb:hover img { transform: scale(1.04); }
.rs-pv-playic {
  position: absolute; left: 50%; top: 80%; transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--rs-primary, #C54F4F); color: #fff; font-size: 1.5rem;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .55), 0 10px 26px rgba(157, 66, 69, .45);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .55), 0 10px 26px color-mix(in srgb, var(--rs-primary-dark, #9d4245) 45%, transparent);
  animation: rsPvPulse 1.8s ease-in-out infinite;
}
.rs-pv-playic i { margin-left: 4px; }
.rs-pv-durasi {
  position: absolute; right: 12px; bottom: 12px;
  font-size: .72rem; font-weight: 600; color: #fff;
  background: rgba(0, 0, 0, .55); padding: 3px 10px; border-radius: var(--r-pill, 999px);
}
.rs-pv-teks { padding: 18px 22px 12px; text-align: center; }
.rs-pv-eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--rs-primary-dark, #B65959);
  background: var(--rs-blush, #F7E8E8); padding: 4px 12px; border-radius: var(--r-pill, 999px); margin-bottom: 10px;
}
.rs-pv-teks h5 { font-size: 1.2rem; margin-bottom: 8px; color: var(--rs-black, #3D3D3D); }
.rs-pv-teks p { font-size: .86rem; color: #7a6a6a; margin-bottom: 16px; line-height: 1.5; }
.rs-pv-btn { padding: .7rem 1rem; font-weight: 600; border-radius: var(--r-md, 12px); }
.rs-pv-nanti { font-size: .82rem; color: #8a7676; text-decoration: none; margin-top: 2px; }
.rs-pv-nanti:hover { color: var(--rs-primary-dark, #B65959); }

/* ---- Tampilan video diputar ---- */
.rs-pv-mode-putar .rs-pv-dialog { max-width: 380px; }
.rs-pv-mode-putar .rs-pv { background: #000; }
.rs-pv-frame { aspect-ratio: 9 / 16; max-height: calc(100vh - 150px); margin: 0 auto; background: #000; }
.rs-pv-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.rs-pv-link {
  display: block; text-align: center; padding: 12px; font-size: .86rem; font-weight: 600;
  color: #fff; background: var(--rs-primary, #C54F4F); text-decoration: none;
}
.rs-pv-link:hover { color: #fff; background: var(--rs-primary-dark, #B65959); }

@keyframes rsPvPulse {
  0%, 100% { box-shadow: 0 0 0 8px rgba(255, 255, 255, .55), 0 10px 26px rgba(157, 66, 69, .45); box-shadow: 0 0 0 8px rgba(255, 255, 255, .55), 0 10px 26px color-mix(in srgb, var(--rs-primary-dark, #9d4245) 45%, transparent); }
  50%      { box-shadow: 0 0 0 16px rgba(255, 255, 255, .25), 0 10px 26px rgba(157, 66, 69, .45); box-shadow: 0 0 0 16px rgba(255, 255, 255, .25), 0 10px 26px color-mix(in srgb, var(--rs-primary-dark, #9d4245) 45%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .rs-pv-playic { animation: none; } }

/* ============ Rapikan tampilan (HP & desktop) ============
   - Dialog selalu muat di layar: tinggi gambar menyesuaikan tinggi layar, isi bisa digulir bila masih kurang.
   - Tombol melayang (Filter, keranjang, favorit, WhatsApp, naik, pasang aplikasi) disembunyikan selama dialog terbuka
     supaya tidak menimpa dialog.
   - Tombol putar di tengah gambar (bukan menimpa teks poster), datar tanpa cahaya berlebih. */
.rs-pv-dialog { max-width: 400px; margin-left: auto; margin-right: auto; }
.modal-dialog.rs-pv-dialog { --bs-modal-margin: .75rem; }
.rs-pv { box-shadow: 0 18px 44px -12px rgba(60, 20, 40, .45); border-radius: 22px; }
.rs-pv-ajak { max-height: calc(100dvh - 1.5rem); max-height: calc(100vh - 1.5rem); overflow-y: auto; overscroll-behavior: contain; }
@supports (height: 100dvh) { .rs-pv-ajak { max-height: calc(100dvh - 1.5rem); } }
.rs-pv-close { top: 10px; right: 10px; width: 34px; height: 34px; padding: 0; background-size: 12px; background-position: center;
  background-color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.rs-pv-thumb { height: clamp(150px, 30vh, 230px); }
.rs-pv-thumb img { object-position: center 50%; }
.rs-pv-playic { top: 50%; width: 64px; height: 64px; font-size: 1.35rem; box-shadow: 0 0 0 8px rgba(255, 255, 255, .7); animation: rsPvRing 1.8s ease-in-out infinite; }
.rs-pv-durasi { right: 10px; bottom: 10px; background: rgba(20, 8, 14, .72); }
.rs-pv-teks { padding: 16px 20px 14px; }
.rs-pv-eyebrow { font-size: .68rem; letter-spacing: .08em; padding: 4px 12px; margin-bottom: 8px; }
.rs-pv-teks h5 { font-size: 1.12rem; line-height: 1.3; margin-bottom: 6px; }
.rs-pv-teks p { font-size: .84rem; margin-bottom: 14px; }
.rs-pv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: .6rem 1rem; }
.rs-pv-nanti { display: block; min-height: 40px; margin-top: 4px; font-weight: 600; }
@keyframes rsPvRing { 0%, 100% { box-shadow: 0 0 0 8px rgba(255, 255, 255, .7); } 50% { box-shadow: 0 0 0 14px rgba(255, 255, 255, .3); } }
@media (max-height: 640px) {
  .rs-pv-thumb { height: clamp(110px, 24vh, 160px); }
  .rs-pv-teks p { display: none; }
}
body:has(#rsPanduanVideo.show) :is(.rs-float-row, .kt-filter-fab, .top-float-btn, .wa-float-btn, .kasir-float-btn, .wishlist-float-btn, .call-float-btn, .rs-pwa, .rs-install-btn) {
  visibility: hidden; opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .rs-pv-playic { animation: none; } }