/*
 * Orem Video Gallery Modal — styles.
 *
 * Was inlined via wp_add_inline_style('orem-vgm', $this->css()); now
 * served as a cacheable file from class-wc-video-playlist.php.
 */

.orem-vgm{
  width:100%;
  margin:14px 0;

  --oremGap: 16px;

  --oremThumbWDesktop: 384px;
  --oremThumbWTablet: 320px;
  --oremThumbWMobile: 260px;
  --oremThumbRatio: 9/16;

  --oremThumbW: var(--oremThumbWDesktop);
  --oremThumbH: calc(var(--oremThumbW) / (var(--oremThumbRatio)));

  --oremRailPad: 12px;
  --oremNavSize: 40px;
  --oremNavInset: 10px;

  --oremScrollbarH: 8px;
  --oremScrollbarThumb: rgba(0,0,0,.28);
  --oremScrollbarTrack: rgba(0,0,0,.08);
  --oremHintOpacity: .35;
}

@media (max-width: 980px){
  .orem-vgm{ --oremThumbW: var(--oremThumbWTablet); }
}
@media (max-width: 640px){
  .orem-vgm{
    --oremThumbW: var(--oremThumbWMobile);
    --oremNavInset: -8px;
    --oremNavSize: 44px;
    --oremHintOpacity: .55;
  }
}

.orem-vgm__rail{
  position:relative;
  width:100%;
  padding: 0 var(--oremRailPad);
}

/* ===== Row layout (NATIVE scroll) ===== */
.orem-vgm.is-row .orem-vgm__strip{
  display:flex;
  gap: var(--oremGap);
  overflow-x:auto;
  overflow-y:hidden;

  padding: 10px calc(var(--oremNavSize) + 18px) 14px;

  /* Native momentum (iOS) */
  -webkit-overflow-scrolling: touch;

  /* IMPORTANT: do NOT force pan-x, let browser decide and allow page vertical scroll */
  touch-action: auto;

  /* prevent rubber-banding horizontally into page */
  overscroll-behavior-x: contain;

  /* optional snap; use proximity to avoid "sticking" */
  scroll-snap-type: x proximity;
  scroll-padding-left: 10px;

  scroll-behavior: smooth;

  scrollbar-width: thin;
  scrollbar-color: var(--oremScrollbarThumb) var(--oremScrollbarTrack);
}

.orem-vgm.is-row .orem-vgm__strip::-webkit-scrollbar{ height: var(--oremScrollbarH); }
.orem-vgm.is-row .orem-vgm__strip::-webkit-scrollbar-track{
  background: var(--oremScrollbarTrack);
  border-radius: 999px;
}
.orem-vgm.is-row .orem-vgm__strip::-webkit-scrollbar-thumb{
  background: var(--oremScrollbarThumb);
  border-radius: 999px;
}

/* ===== Grid layout ===== */
.orem-vgm.is-grid .orem-vgm__grid{
  display:grid;
  gap: var(--oremGap);
  grid-template-columns: repeat(var(--oremColsD), minmax(0, 1fr));
}
@media (max-width: 980px){
  .orem-vgm.is-grid .orem-vgm__grid{
    grid-template-columns: repeat(var(--oremColsT), minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  .orem-vgm.is-grid .orem-vgm__grid{
    grid-template-columns: repeat(var(--oremColsM), minmax(0, 1fr));
  }
}

/* ===== Card ===== */
.orem-vgm__card{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  scroll-snap-align: start;
}
.orem-vgm.is-row .orem-vgm__card{
  flex:0 0 auto;
  width: var(--oremThumbW);
}
.orem-vgm__media{
  position:relative;
  height: var(--oremThumbH);
  border-radius:16px;
  overflow:hidden;
  background:#141418;
  box-shadow:0 10px 26px rgba(0,0,0,.14);
  transform: translateZ(0);
}
.orem-vgm__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.orem-vgm__fallback{
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(135deg,#2a2a2f,#121216);
}

/* Play button */
.orem-vgm__play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:56px;
  height:56px;
  border-radius:999px;
  background:rgba(0,0,0,.48);
  backdrop-filter: blur(6px);
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  pointer-events:none;
}
.orem-vgm__play::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-40%,-50%);
  width:0;height:0;
  border-left:15px solid rgba(255,255,255,.94);
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
}

.orem-vgm__label{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:10px 12px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.2px;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.70) 60%, rgba(0,0,0,.86) 100%);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
  pointer-events:none;
}

/* ===== Nav buttons + fades (same idea) ===== */
.orem-vgm__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width: var(--oremNavSize);
  height: var(--oremNavSize);
  border-radius:999px;
  border: 1px solid rgba(0,0,0,.10);
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.78);
  color: rgba(0,0,0,.70);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  z-index: 5;
  opacity: var(--oremHintOpacity);
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
}
.orem-vgm__nav span{
  font-size: 28px;
  line-height: 1;
  transform: translateY(-1px);
}
.orem-vgm__nav--left{ left: var(--oremNavInset); }
.orem-vgm__nav--right{ right: var(--oremNavInset); }
.orem-vgm__nav.is-visible{ display:flex; }
.orem-vgm__nav.is-disabled{ opacity: .15; pointer-events:none; }

.orem-vgm__fade{
  position:absolute;
  top:0;
  bottom: 0;
  width: 56px;
  pointer-events:none;
  opacity: 0;
  transition: opacity .18s ease;
  z-index: 4;
}
.orem-vgm__fade--left{
  left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 100%);
}
.orem-vgm__fade--right{
  right: 0;
  background: linear-gradient(270deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 100%);
}
.orem-vgm__fade.is-visible{ opacity: 1; }

/* ===== Modal ===== */
.orem-vgm__modal{ position:fixed; inset:0; z-index:99999; display:none; }
.orem-vgm__modal.is-open{ display:block; }
.orem-vgm__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.65); }
.orem-vgm__modalInner{
  position:relative;
  width:min(980px, 92vw);
  margin: min(6vh, 40px) auto;
  border-radius:18px;
  background:#0f0f10;
  box-shadow:0 22px 70px rgba(0,0,0,.45);
  overflow:hidden;
}
.orem-vgm__close{
  position:absolute;
  top:10px;
  right:12px;
  z-index:2;
  width:44px;
  height:44px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  font-size:28px;
  line-height:44px;
  color:#fff!important;                 /* <-- blanco */
  background:rgba(255,255,255,.16);  /* <-- un poquito más visible */
  backdrop-filter: blur(8px);
}
.orem-vgm__close:hover{
  background:rgba(255,255,255,.24);
}
.orem-vgm__modalHeader{ padding:16px 56px 10px 18px; }
.orem-vgm__modalTitle{
  font-weight:800;
  font-size:16px;
  color:rgba(255,255,255,.92);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-height: 18px;
}
.orem-vgm__playerWrap{ background:#000; }
.orem-vgm__player{
  width:100%;
  height:auto;
  max-height: 78vh;
  display:block;
  background:#000;
}