/* ===== XH Fallback Player (cleaned) ===== */

/* create a stacking context so nothing outside bleeds over */
.xh-fp-wrap{
  position: relative;
  isolation: isolate;
  margin: 0 auto;
}

/* aspect box (height comes from inline padding/aspect or inline height) */
.xh-fp-box{
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  background: #000;
}

/* video layer */
.xh-fp-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;          /* use 'contain' if you prefer letterboxing */
  background: #000;
  border: 0;
  outline: none;
  z-index: 10;
}

/* When the TV frame is ON, nudge/scale the video to sit behind the screen window */
.xh-fp-frame-on .xh-fp-video{
  /* choose one of these object-fit modes */
  object-fit: contain;              /* show whole frame without cropping */
  /* object-fit: cover; */          /* or keep cover + use stronger scaling below */

  /* tweakable offsets/scaling (CSS vars with sensible defaults) */
  transform:
    scale(
      var(--video-scale-x, var(--video-scale, .9)),  /* X */
      var(--video-scale-y, var(--video-scale, 1))   /* Y */
    )
    translate(var(--video-x, -8%), var(--video-y, -1%));
  transform-origin: center;
}

/* overlay PNG frame (screen is transparent in the image) */
.xh-fp-overlay-bg{
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%; /* exact fill; switch to 'cover' to preserve aspect */
  transform: translate(var(--overlay-x,0), var(--overlay-y,0))
             scale(var(--overlay-scale,1));
  transform-origin: center;
  pointer-events: none;
  z-index: 20;
}
/* default overlay */
.xh-fp-overlay-bg{
  background-image: var(--overlay-url, url('https://xiaolinhustle.com/wp-content/uploads/2025/09/xh-tv-03-green.png'));
}

/* use a different overlay while the bumper plays */
.xh-fp-bumper .xh-fp-overlay-bg{
  background-image: var(--overlay-url-bumper, url('https://xiaolinhustle.com/wp-content/uploads/2025/09/xh-tv-03-red.png'));
}

/* show/hide the overlay */
.xh-fp-overlay-hidden{ display: none !important; }

/* ---- controls bar (below the video) ---- */
.xh-fp-controls-below{
  position: static;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-top: 0px;
  background-color: #000;
}

/* base button */
.xh-fp-btn{
  appearance: none;
  border: 0;
  text-transform: uppercase;
  padding: 5px;
  border-radius: 5px;
  color: #22c55e !important;
  background-color: rgba(30,30,30,1.0) !important;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  min-width: 75px;
  -webkit-tap-highlight-color: transparent; /* iOS tap highlight off */
}

.xh-fp-btn:hover{
  color: #fff !important;
  text-shadow:
    0 0 6px  rgba(14,219,127,.7),
    0 0 14px rgba(14,219,127,.5);
  background-color: rgba(255,255,255,1.0);
}

/* hover only where hover exists (desktops, trackpads) */
@media (hover: hover){
  .xh-fp-btn:hover{ filter: brightness(1.0); }
}

/* don’t keep a focus style for mouse/touch; use focus-visible for keyboard */
.xh-fp-btn:focus { outline: none; }
.xh-fp-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #000, 0 0 0 6px #60a5fa; /* accessible ring */
}

/* Same desktop flex as above (keeps your current look) */
.xh-fp-controls-below {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.xh-fp-controls-below .xh-fp-btn { order: 100; flex: 0 0 auto; }

/* Desktop order (optional if you liked your old order) */
.xh-fp-prev           { order: 0; }
.xh-fp-play           { order: 2; }
.xh-fp-toggle-overlay { order: 3; }
.xh-fp-unmute-inline  { order: 4; }
.xh-fp-fullscreen     { order: 5; }
.xh-fp-next           { order: 1; margin-left: auto; }

/* Mobile: switch the bar to GRID and force 4 columns */
@media (max-width: 600px) {
  .xh-fp-controls-below {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  .xh-fp-controls-below .xh-fp-btn {
    margin-left: 0;  /* neutralize the flex trick */
    order: 0;        /* order is irrelevant in grid; placement rules below win */
  }

  /* Lock Prev and Next to the far edges of the first row */
  .xh-fp-prev { grid-column: 1; grid-row: 1; }
  .xh-fp-unmute-inline  { grid-column: 3; grid-row: 1; }
  .xh-fp-volume { grid-column: 3; grid-row: 2; }
  .xh-fp-next { grid-column: 4; grid-row: 1; }

  /* Let the remaining buttons auto-flow into the other grid cells */
}

/* Volume button */
.xh-fp-btn.xh-fp-volume {
  display: flex;
  align-items: center;
  justify-content: center;
  height:31.61px;
  padding: 6px 10px;
}

/* The track acts as the visible control */
.xh-fp-vol-track {
  width: 90px;          /* fixed size so it doesn’t shrink/grow */
  height: 10px;
  border-radius: 999px;
  color: #22c55e;
  background: rgba(255,255,255,0.25);
  overflow: hidden;
}

.xh-fp-vol-fill {
  height: 100%;
  width: 0%;
  background: currentColor;
  opacity: 0.9;
}

/* Optional: smaller track on mobile */
@media (max-width: 600px) {
  .xh-fp-vol-track { width: 72px; }
}


/* elementor overlay safety */
.elementor-section .elementor-background-overlay{
  pointer-events: none;
  z-index: 0 !important;
}

/* try to suppress the big center play button on webkit */
.xh-fp-video::-webkit-media-controls-start-playback-button{ display: none !important; }
.xh-fp-video::-webkit-media-controls-overlay-play-button  { display: none !important; }

/* ---------- responsive width helpers (page-specific) ---------- */
/* replace 123 with your page ID */
@media (max-width: 767px){
  .page-id-8673 .xh-fp-wrap{
    width: 100vw;
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%); /* centers 100vw inside boxed layouts */
  }
}
@media (min-width: 768px){
  .page-id-8673 .xh-fp-wrap{
    width: 900px;   /* desktop width */
    max-width: 900px;
    margin: 0 auto;
    transform: none;
  }
}

/* --- Title bar under the video --- */
.xh-fp-titlebar{
  margin-top: 0px;
  padding-left: 5px;
  padding-right: 5px;
  color: #0edb7f;
  text-shadow:
    0 0 6px  rgba(14,219,127,.7),
    0 0 14px rgba(14,219,127,.5);
  font: 600 0.95rem/1.5 system-ui, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  height: 35px;
  background-color: #429;
  background-image: url('https://xiaolinhustle.com/wp-content/uploads/2025/09/bg-marquee-01.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width:100vw;
  max-width:900px !important;
  overflow: hidden !important;
}
/* container already has overflow hidden */
.xh-fp-title{ 
  position:relative;
  overflow:hidden;
  white-space:nowrap;
}
/* base look */
.xh-fp-title-text{
  display: inline-block;
  padding: 5px 4px;
  opacity: .95;
  --marquee-pps: 200;   /* pixels per second (higher = faster) */
  --marquee-gap: 24px;  /* extra offscreen padding at both ends */
  will-change: transform;
}

/* Flickering bumper message inside titlebar */
.xh-fp-titlebar .xh-neon {
  display: inline-block;
  /* inherit all text styles from .xh-fp-titlebar */
  color: inherit;
  text-shadow: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
}

/* Each character flickers independently */
.xh-fp-titlebar .xh-neon .char {
  display: inline-block;
  animation: xh-flicker 3.4s infinite steps(1, end);
  will-change: opacity, filter, text-shadow;
}

/* Randomized flicker timing */
.xh-fp-titlebar .xh-neon .char:nth-child(odd)  { animation-delay: .05s; }
.xh-fp-titlebar .xh-neon .char:nth-child(3n)   { animation-delay: .18s; }
.xh-fp-titlebar .xh-neon .char:nth-child(4n)   { animation-delay: .32s; }
.xh-fp-titlebar .xh-neon .char:nth-child(5n)   { animation-delay: .47s; }
.xh-fp-titlebar .xh-neon .char:nth-child(7n)   { animation-delay: .73s; }

/* Flicker effect */
@keyframes xh-flicker {
  0%   { opacity: 1; }
  6%   { opacity: .2; }
  8%   { opacity: 1; }
  10%  { opacity: .05; }
  12%  { opacity: 1; }
  18%  { opacity: .6; }
  20%  { opacity: 1; }
  28%  { opacity: 0; }
  30%  { opacity: 1; }
  60%  { opacity: .85; }
  62%  { opacity: .3; }
  64%  { opacity: 1; }
  86%  { opacity: .7; }
  88%  { opacity: 1; }
  92%  { opacity: .15; }
  100% { opacity: 1; }
}

/* Optional: occasional whole-line "glitch pop" */
.xh-fp-titlebar .xh-neon.glitchy {
  animation: xh-line-pop 5.5s infinite steps(1, end);
}

@keyframes xh-line-pop {
  0%, 78%, 82%, 100% { opacity: 1; transform: none; }
  79% { opacity: .5; transform: translateY(-0.5px); }
  81% { opacity: .3; transform: translateY(0.5px); }
}

@media (prefers-reduced-motion: reduce) {
  .xh-fp-titlebar .xh-neon,
  .xh-fp-titlebar .xh-neon .char {
    animation: none !important;
  }
}

/* always animate when .is-marquee is present */
.xh-fp-title-text.is-marquee{
  animation: xh-marquee var(--marquee-time, 10s) linear infinite;
}
@keyframes xh-marquee{
  from { transform: translateX(var(--marquee-from, 100%)); }
  to   { transform: translateX(var(--marquee-to,  -100%)); }
}
/* (optional) respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .xh-fp-title-text.is-marquee{ animation: none; }
}

/* --- Seek (passive progress) --- */
.xh-fp-seekbar{
  margin-top: 0px;
  display: flex;
  justify-content: center;
}
.xh-fp-progress-track{
  width: min(900px, 100%);
  height: 10px;
  border-radius: 0px;
  background: #130D0D;
  overflow: hidden;
}
.xh-fp-progress-fill{
  height: 100%;
  width: 0%;
  background: #22c55e;
  transition: width .12s linear;
  will-change: width;
}
/* Mobile: Seekbar */
@media (max-width: 600px) {
  .xh-fp-seekbar {
	padding-bottom: 10px;
  }
  .xh-fp-progress-track{
    width: min(900px, 100%);
    height: 20px;
    border-radius: 0px;
    background: rgba(30,30,30,1.0);
    overflow: hidden;
  }
  .xh-fp-progress-fill{
    height: 100%;
    width: 0%;
    background: #22c55e;
    transition: width .12s linear;
    will-change: width;
  }
}
/* During bumpers / non-finite media, keep the bar but "disable" it */
.xh-fp-seekbar.is-disabled .xh-fp-progress-track{
  opacity: 0.5;
}
.xh-fp-seekbar.is-disabled .xh-fp-progress-fill{
  width: 0% !important;
}
/* Only apply hover styles on devices with a real hover pointer (mice, trackpads) */
@media (hover: hover) and (pointer: fine) {
  .xh-fp-btn:hover {
    color: var(--xh-btn-hover, #fff); /* your hover color */
    /* any other hover styles */
  }
}

/* Optional: better focus style for keyboard users only */
.xh-fp-btn:focus-visible {
  outline: 2px solid var(--xh-focus, #5af);
}
.xh-fp-btn:focus { outline: none; } /* avoid sticky focus ring on touch */