/* ==========================================================
   Recommended Creator (RC) Row Styles
   ========================================================== */

.oeltek-rc-wrap {
  width: 100%;
  max-width: var(--oeltek-rc-max, 1200px);
  margin: 12px 0 0;
  padding: 8px 0;
  clear: both;
  border-top: 1px solid rgba(0,0,0,.06);
  display: block;
}

.woocommerce div.product .oeltek-rc-wrap {
  grid-column: 1 / -1;
}

.oeltek-rc-row {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 6px;
  direction: rtl; /* start from right */
}

.oeltek-rc-row::-webkit-scrollbar {
  height: 6px;
}
.oeltek-rc-row::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.15);
  border-radius: 3px;
}

.oeltek-rc-card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  scroll-snap-align: start;
  width: 118px;
}

.oeltek-rc-avatar {
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  padding: 2px;
}

.oeltek-rc-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #9aa0a6; /* light gray */
}

.oeltek-rc-avatar img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  background: #f6f7f8;
  border: 3px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

.oeltek-rc-title {
  margin-top: 6px;
  text-align: center;
  color: #666;
  font-size: 13px;
  line-height: 1.2;
  max-width: 92px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Larger circles on desktop/tablet (~40% larger) */
@media (min-width: 768px) {
  .oeltek-rc-card { width: 134px; }
  .oeltek-rc-avatar { width: 101px; height: 101px; padding: 2px; }
}

/* ==========================================================
   Modal Video Player (Matches frontend.js)
   ========================================================== */

#oeltek-mv-modal {
  z-index: 2147483647 !important;
  background: rgba(0,0,0,.85);
  position: fixed;
  inset: 0;
  display: none;
}

#oeltek-mv-modal .oeltek-mv-inner {
  position: relative;
  margin: 4% auto;
  width: 92%;
  max-width: 900px;
  max-height: 92vh;
}

#oeltek-mv-player {
  width: 100%;
  height: auto;
  border-radius: 12px;
  outline: none;
  max-height: 80vh;
  background: #000;
}

/* Center vertically on mobile (portrait) */
@media (max-width: 767px) and (orientation: portrait) {
  #oeltek-mv-modal {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #oeltek-mv-modal .oeltek-mv-inner {
    margin: 0 auto;
    width: 96%;
    max-width: 720px;
  }
}

/* Gear icon positioning */
:root {
  --mv-gear-bottom: 50px;
  --mv-gear-right: 30px;
}

#oeltek-mv-qwrap {
  position: absolute;
  bottom: var(--mv-gear-bottom);
  right: var(--mv-gear-right);
  display: none;
  z-index: 2147483647;
  pointer-events: auto;
  opacity: 1;
  transition: opacity .25s ease;
  overflow: visible;
}

#oeltek-mv-qwrap.mv-fade {
  opacity: 0;
  pointer-events: none;
}

#oeltek-mv-gear {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#oeltek-mv-gear svg {
  width: 16px;
  height: 16px;
  display: block;
  opacity: .95;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.6));
}

#oeltek-mv-gear:hover svg {
  opacity: 1;
}

#oeltek-mv-qmenu {
  position: absolute;
  right: 0;
  bottom: calc(24px + 10px);
  min-width: 120px;
  background: rgba(0,0,0,.92);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 10px;
  padding: 6px 0;
  display: none;
  backdrop-filter: blur(4px);
}

/* Gear responsiveness */
@media (max-width: 480px) {
  :root {
    --mv-gear-right: 26px;
    --mv-gear-bottom: 50px;
  }
}
@media (min-width: 1024px) {
  :root {
    --mv-gear-right: 32px;
    --mv-gear-bottom: 52px;
  }
}

/* Remove preload ghost layers globally */
video[preload]:not([controls]),
.mv-preload,
.video-preload,
.player-preload,
.mv-overlay,
.lightbox-preload,
[data-preload] {
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
  display: none !important;
}


/* === Related Circles: size boost, dimmer thumb, big play icon, no clipping === */

/* Let scaled circles breathe */
.oeltek-rc-wrap,
.oeltek-rc-row,
.oeltek-rc-card,
.oeltek-rc-avatar {
  overflow: visible !important;
}

/* Row spacing so scaled avatars don't collide */
.oeltek-rc-row {
  padding-block: 10px;              /* top & bottom room */
  align-items: center;
  gap: var(--rc-gap, 1.2rem);
}

/* Cards as columns; keep your existing styles */
.oeltek-rc-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  margin-block: 6px;
  transform: scale(1.2);            /* +20% overall size */
  transform-origin: center;
}

/* Avatar is overlay host */
.oeltek-rc-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* Dim thumbnail by ~30% so the play icon pops */
.oeltek-rc-avatar img {
  opacity: 0.7;                     /* was 1.0; now 30% more transparent */
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Big play icon overlay (triangle) */
.oeltek-rc-avatar::after {
  content: "\25B6";                 /* ► */
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 700;
  /* ~50% larger than the previous suggestion */
  font-size: clamp(28px, 60%, 84px);
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  opacity: 0.95;
  pointer-events: none;             /* clicks go through to the link */
}

/* Light hover feedback */
.oeltek-rc-card:hover .oeltek-rc-avatar img,
.oeltek-rc-card:focus .oeltek-rc-avatar img {
  opacity: 0.8;
  transform: scale(1.03);
}

/* Mobile spacing when we move the block under gallery */
@media (max-width: 767px) {
  #related-circles-lib.oeltek-rc-wrap {
    margin-top: 12px;
    margin-bottom: 12px;
    clear: both;
    width: 100%;
  }
}

/* Safety: if any theme fixed a height, undo it */
.oeltek-rc-card { height: auto !important; }

/* Space below circles since they now sit before the title */
#related-circles-lib.oeltek-rc-wrap {
  margin-bottom: 12px;
}
/* === Stronger dim on thumbnail + brighter play icon (overrides) === */

/* Make thumbnail more transparent (~40% transparent) */
.oeltek-rc-avatar img {
  opacity: 0.5 !important;  /* 0.5 = 30% transparent.
                                If you want exactly 30% transparent, use 0.7 instead. */
}

/* Make the play icon fully white and more visible */
.oeltek-rc-avatar::after {
  color: #fff;
  opacity: 1 !important;     /* no transparency on the icon */
  text-shadow: 0 3px 10px rgba(0,0,0,0.65);  /* stronger glow for contrast */
  -webkit-text-stroke: 1px rgba(0,0,0,0.25); /* subtle edge to keep shape on bright images */
}


/* ==== Orange translucent background + swipe container ================== */
#related-circles-lib.oeltek-rc-wrap,
.oeltek-rc-wrap {
  /* container never widens page */
  max-width: 100%;
  overflow: hidden;
  /* bright orange, very translucent */
  background: rgba(255, 128, 0, 0.12); /* tweak alpha as you like */
  border: 1px solid rgba(255, 128, 0, 0.25);
  border-radius: 14px;
  padding: 10px 12px;  /* breathing room for the row */
  position: relative;  /* for arrows/edge-fades */
}

/* Row becomes a horizontal scroller with swipe/drag */
.oeltek-rc-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--rc-gap, 1.2rem);
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding: 12px;
  padding-block: 4px;
}

/* Each card is a snap item and never flexes to fill */
.oeltek-rc-card {
  flex: 0 0 auto;
  scroll-snap-align: start; /* or 'center' if you prefer centering */
}

/* Hide ugly native scrollbar (keeps accessibility) */
.oeltek-rc-row::-webkit-scrollbar { height: 0; }
.oeltek-rc-row { scrollbar-width: none; }
.oeltek-rc-row::-webkit-scrollbar-thumb { background: transparent; }

/* Optional: subtle edge fades so content hints that it’s scrollable */
.oeltek-rc-wrap::before,
.oeltek-rc-wrap::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 28px;
  pointer-events: none;
  z-index: 2;
}
.oeltek-rc-wrap::before {
  left: 0;
  background: linear-gradient(90deg, rgba(255,128,0,0.22), rgba(255,128,0,0));
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}
.oeltek-rc-wrap::after {
  right: 0;
  background: linear-gradient(270deg, rgba(255,128,0,0.22), rgba(255,128,0,0));
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* Arrow buttons (auto-inserted by JS below) */
.oeltek-rc-arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.9);
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  user-select: none;
}
.oeltek-rc-arrow svg { width: 18px; height: 18px; }
.oeltek-rc-arrow--left  { left: 6px; }
.oeltek-rc-arrow--right { right: 6px; }

/* Hide arrows on very small phones to keep UI clean (swipe still works) */
@media (max-width: 420px) {
  .oeltek-rc-arrow { display: none; }
}
/* ==== Clamp width to orange container; make row truly swipeable ==== */

/* The orange wrapper itself must never cause page-wide overflow */
.oeltek-rc-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;        /* critical if parent is a flex item */
  box-sizing: border-box;
  overflow: hidden;                /* clip anything outside the orange area */
  position: relative;
}

/* The horizontal row scrolls INSIDE the orange wrapper (not the page) */
.oeltek-rc-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--rc-gap, 1.2rem);
  width: 100%;
  max-width: 100%;
  min-width: 0;                    /* allow shrinking so container doesn’t grow */
  overflow-x: auto;                /* scroll only this element */
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-padding: 12px;
  padding-block: 4px;
  /* IMPORTANT: let touch gestures move horizontally while over the row */
  touch-action: pan-x;
}

/* Cards never try to stretch; they remain fixed-size items inside the scroller */
.oeltek-rc-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* (Optional safety) If any global rule adds horizontal overflow, kill it here */
.oeltek-rc-wrap * {
  max-width: none;
}

/* Keep page itself from getting a horizontal scrollbar (belt & suspenders) */
html, body { overflow-x: hidden; }

/* === Fix swipe: use real size instead of transform scaling === */

/* stop the visual-only scale that breaks scrolling math */
.oeltek-rc-card {
  transform: none !important;
}

/* the row itself must scroll; the wrapper clamps it */
.oeltek-rc-wrap {
  overflow: hidden !important;
}
.oeltek-rc-row {
  overflow-x: auto !important;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;              /* allow horizontal finger swipes */
  scroll-snap-type: x proximity;
}

/* make sure cards don’t stretch or wrap */
.oeltek-rc-card { flex: 0 0 auto; }
.oeltek-rc-row { flex-wrap: nowrap; }

/* belt & suspenders: page never gets a horizontal scrollbar */
html, body { overflow-x: hidden; }

/* === CONTAINER: orange background & clamp width === */
.oeltek-rc-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;     /* critical if parent is flex */
  box-sizing: border-box;
  overflow: hidden !important;  /* clip inside the orange area only */
  position: relative;

  /* If not already set: bright orange translucent background */
  background: rgba(255, 128, 0, 0.12);
  border: 1px solid rgba(255, 128, 0, 0.25);
  border-radius: 14px;
  padding: 10px 12px;
}

/* === ROW: horizontal scroller inside the orange block === */
.oeltek-rc-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--rc-gap, 1.2rem);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto !important;  /* scroll THIS element horizontally */
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-padding: 12px;
  padding-block: 4px;

  /* allow natural horizontal pan with finger */
  touch-action: pan-x;
  cursor: grab;
}
.oeltek-rc-row.is-dragging { cursor: grabbing; }

/* Items are fixed-size; don’t allow them to stretch */
.oeltek-rc-card { flex: 0 0 auto; scroll-snap-align: start; }

/* IMPORTANT: if you previously scaled cards with transform, disable it */
.oeltek-rc-card { transform: none !important; }

/* Prevent the PAGE from getting a horizontal scrollbar */
html, body { overflow-x: hidden; }

/* Don’t let the browser drag/select images or text while swiping */
.oeltek-rc-row, .oeltek-rc-card, .oeltek-rc-avatar, .oeltek-rc-title {
  user-select: none; -webkit-user-select: none;
}
.oeltek-rc-avatar img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}

/* Optional: small spacing below the block when it sits before the title */
#related-circles-lib.oeltek-rc-wrap { margin-bottom: 12px; }


/* GENERAL: row scrolls inside wrapper, page never widens */
.oeltek-rc-wrap { overflow: hidden !important; max-width: 100%; min-width: 0 !important; box-sizing: border-box; }
.oeltek-rc-row  { display: flex; flex-wrap: nowrap; gap: var(--rc-gap, 1.2rem);
                  overflow-x: auto !important; overflow-y: visible;
                  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
                  touch-action: pan-x; cursor: grab; }
.oeltek-rc-row.is-dragging { cursor: grabbing; }
.oeltek-rc-card { flex: 0 0 auto; scroll-snap-align: start; transform: none !important; }
.oeltek-rc-row, .oeltek-rc-card, .oeltek-rc-avatar, .oeltek-rc-title { user-select: none; -webkit-user-select: none; }
.oeltek-rc-avatar img { pointer-events: none; -webkit-user-drag: none; user-drag: none; }
html, body { overflow-x: hidden; }

/* PRODUCT PAGE ONLY: solid orange rectangle (no border, no radius, no gradients) */
#related-circles-lib.oeltek-rc-wrap {
  background: rgba(255,128,0,0.14); /* bright orange, translucent; adjust alpha as you like */
  border: none;
  border-radius: 0;                 /* solid rectangle (no rounded corners) */
  padding: 10px 12px;
  /* remove any previous edge-fade decorations if you had them */
}


/* Turn off snap while dragging (all devices) */
.oeltek-rc-row.is-dragging {
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}

/* Desktop (hover-capable pointers): keep snap off for smooth mouse drag */
@media (hover: hover) and (pointer: fine) {
  .oeltek-rc-row {
    scroll-snap-type: none !important;  /* no item-by-item jumps */
    scroll-behavior: auto;              /* immediate response to drag */
  }
}

/* (Optional) keep snap on for touch-only devices if you liked the mobile feel */
@media (hover: none) and (pointer: coarse) {
  .oeltek-rc-row {
    scroll-snap-type: x proximity;      /* you can also set 'none' if you prefer */
  }
}

/* Smoothing hints (reduces micro-jitters while dragging) */
.oeltek-rc-row {
  will-change: scroll-position;
  scrollbar-gutter: stable both-edges;
}

.oeltek-rc-avatar { pointer-events: auto; cursor: pointer; }
.oeltek-rc-title  { pointer-events: none; }


/* Make circles reliably clickable when placed between image and title */
.oeltek-rc-wrap { position: relative; }
.oeltek-rc-wrap .oeltek-rc-card,
.oeltek-rc-wrap .oeltek-rc-avatar {
  position: relative;
  z-index: 20;
  pointer-events: auto;
}

/* If your product gallery sits on a high z-index, ensure it doesn't cover circles */
.single-product .product .images,
.single-product .product .woocommerce-product-gallery {
  z-index: 1; /* keep gallery below the circles row */
}

.oeltek-rc-host-near-title .oeltek-rc-card,
.oeltek-rc-host-near-title .oeltek-rc-avatar { z-index: 20; pointer-events: auto; }

/* Make circles reliably clickable above the gallery & title */
.oeltek-rc-wrap { position: relative; }

.oeltek-rc-wrap .oeltek-rc-card,
.oeltek-rc-wrap .oeltek-rc-avatar {
  position: relative;
  z-index: 20;
  pointer-events: auto;
}

/* IMPORTANT: z-index needs a positioned element */
.single-product .product .images,
.single-product .product .woocommerce-product-gallery {
  position: relative;
  z-index: 1; /* keep gallery below the circles row */
}

/* Desktop only */
@media (min-width: 992px) {
  /* Remove any orange fill from the clickable avatar */
  .oeltek-rc-avatar {
    background: transparent !important;
    box-shadow: none !important;
  }

  /* If orange is drawn with pseudo-elements, disable them */
  .oeltek-rc-avatar::before,
  .oeltek-rc-avatar::after {
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important; /* let clicks pass through */
  }

  /* If your theme uses a separate element for the orange layer, neutralize it */
  .oeltek-rc-avatar .avatar-bg,
  .oeltek-rc-avatar .orange-bg,
  .oeltek-rc-card  .avatar-overlay,
  .oeltek-rc-card  .orange-ring {
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important; /* IMPORTANT: don’t block clicks */
  }

  /* Make sure the actual avatar is above decorative layers */
  .oeltek-rc-avatar { position: relative; z-index: 1; }
  .oeltek-rc-avatar .avatar-bg,
  .oeltek-rc-avatar .orange-bg { position: absolute; z-index: 0; }

  /* === Keep circles but remove orange block on desktop === */
  #related-circles-lib.oeltek-rc-wrap,
  .oeltek-rc-wrap {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  /* Hide gradient edge-fades on desktop */
  .oeltek-rc-wrap::before,
  .oeltek-rc-wrap::after {
    display: none !important;
  }
}

/* Desktop: make the orange avatar overlay click-through */
@media (hover: hover) and (pointer: fine) {
  .oeltek-rc-avatar,
  .oeltek-rc-avatar * {
    pointer-events: auto; /* the avatar still clickable */
  }

  /* Whatever element/pseudo gives the orange background — make it NOT intercept clicks */
  .oeltek-rc-avatar::before,
  .oeltek-rc-avatar .orange-overlay {
    pointer-events: none !important; /* <-- key line */
  }
}
/* Stronger specificity to beat theme/minified rules */
#related-circles-lib .oeltek-rc-avatar { position: relative !important; }
#related-circles-lib .oeltek-rc-avatar img { position: relative !important; z-index: 2 !important; pointer-events: auto !important; }
#related-circles-lib .oeltek-rc-avatar .oeltek-rc-ring { position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; }


/* ===== RC DESKTOP CLICK FIX (strong specificity) ===== */
body .oeltek-rc-wrap .oeltek-rc-card .oeltek-rc-avatar {
  position: relative !important;
  isolation: isolate; /* new stacking context */
}
body .oeltek-rc-wrap .oeltek-rc-card .oeltek-rc-avatar img {
  position: relative !important;
  z-index: 3 !important;   /* the real clickable layer */
}

/* Your big play triangle / any avatar pseudo overlays must not catch clicks */
body .oeltek-rc-wrap .oeltek-rc-card .oeltek-rc-avatar::before,
body .oeltek-rc-wrap .oeltek-rc-card .oeltek-rc-avatar::after {
  pointer-events: none !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
}

/* The gray/orange ring (and similar decorative overlays) also must not catch clicks */
body .oeltek-rc-wrap .oeltek-rc-card .oeltek-rc-ring,
body .oeltek-rc-wrap .oeltek-rc-card .avatar-overlay,
body .oeltek-rc-wrap .oeltek-rc-card .orange-bg {
  pointer-events: none !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

/* Optional: disable transform on desktop while debugging hit-testing */
@media (hover: hover) and (pointer: fine) {
  .oeltek-rc-card { transform: none !important; }
}