/*! HG SeeGaza Hotfix CSS v19 */
#settingsMenu{ z-index:100000 !important; background:rgba(24,24,27,.98) !important; color:#fff !important; border:1px solid rgba(255,255,255,.08) !important; }
#settingsMenu .btn{ color:#fff !important; }
#settingsMenu svg{ color:#fff !important; fill:none; stroke:currentColor; }
#player input[type="range"]{ -webkit-appearance:none; appearance:none; height:3px; background:transparent; }
#player .range--vol, #player #vol{
  background:
    linear-gradient(#dc2626 0 0) left / calc(var(--volumePct, var(--volPct, 0)) * 100%) 3px no-repeat,
    linear-gradient(rgba(220,38,38,.25) 0 0) left / 100% 3px no-repeat !important;
}
#player .range--seek, #player #seek{
  background:
    linear-gradient(#dc2626 0 0) left / calc(var(--progressPct,0) * 100%) 3px no-repeat,
    linear-gradient(#3f3f46 0 0) left / 100% 3px no-repeat !important;
}
#player input[type="range"]::-webkit-slider-runnable-track{ height:3px; background:transparent; }
#player input[type="range"]::-moz-range-track{ height:3px; background:transparent; }
#player input[type="range"]::-webkit-slider-thumb{ width:12px; height:12px; border-radius:50%; background:#fff; border:0; margin-top:-5px; }
#player input[type="range"]::-moz-range-thumb{ width:12px; height:12px; border-radius:50%; background:#fff; border:0; }


/* v20: stronger fill + alignment for volume/seek */
#player .range, #player input[type="range"]{
  box-sizing: border-box !important;
  padding: 0 !important;
  border: 0 !important;
  background-origin: content-box !important;
  background-clip: content-box !important;
}
#player .range--vol, #player #vol{
  width: 220px !important;  /* give it a sensible width on desktop */
  max-width: none !important;
  background-image:
    linear-gradient(#dc2626 0 0),
    linear-gradient(rgba(220,38,38,.25) 0 0) !important;
  background-size:
    calc(var(--volumePct, var(--volPct, 0)) * 100%) 3px,
    100% 3px !important;
  background-position: left center, left center !important;
  background-repeat: no-repeat, no-repeat !important;
}
/* Seek alignment */
#player .range--seek, #player #seek{
  background-image:
    linear-gradient(#dc2626 0 0),
    linear-gradient(#3f3f46 0 0) !important;
  background-size:
    calc(var(--progressPct, 0) * 100%) 3px,
    100% 3px !important;
  background-position: left center, left center !important;
  background-repeat: no-repeat, no-repeat !important;
}



/* === Volume track robust fill (cross-browser) === */
#player .range--vol,
#player #vol{
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 14px !important;
  background: transparent !important; /* paint on track */
  padding: 5px 0 !important;
  border: 0 !important;
}

/* Track fill using CSS variable with percentage unit */
#player .range--vol::-webkit-slider-runnable-track,
#player #vol::-webkit-slider-runnable-track{
  height: 3px !important;
  background-image:
    linear-gradient(#dc2626 0 0),
    linear-gradient(rgba(220,38,38,.25) 0 0) !important;
  background-size:
    var(--volumeWidth, calc(var(--volumePct, var(--volPct, 0)) * 100%)) 3px,
    100% 3px !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: left center, left center !important;
  border-radius: 9999px !important;
}

/* Firefox: progress/fill portion */
#player .range--vol::-moz-range-progress,
#player #vol::-moz-range-progress{
  height: 3px !important;
  background: #dc2626 !important;
  border-radius: 9999px !important;
}
#player .range--vol::-moz-range-track,
#player #vol::-moz-range-track{
  height: 3px !important;
  background: rgba(220,38,38,.25) !important;
  border-radius: 9999px !important;
}

/* Thumb */
#player .range--vol::-webkit-slider-thumb,
#player #vol::-webkit-slider-thumb{
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #dc2626 !important;
  border: 0 !important;
  margin-top: -6.5px !important; /* vertical align */
}
#player .range--vol::-moz-range-thumb,
#player #vol::-moz-range-thumb{
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #dc2626 !important;
  border: 0 !important;
}

/* Ensure the element can stretch in flex rows */
#player .range--vol{ flex: 1 1 auto !important; min-width: 120px !important; }


/* === Volume slider sizing & layout (scoped) === */
#player .range--vol,
#player #vol{
  width: 180px !important;
  max-width: 180px !important;
  min-width: 120px !important;
  flex: 0 0 auto !important;
}

/* Compact viewports */
@media (max-width: 640px){
  #player .range--vol,
  #player #vol{ width: 140px !important; max-width: 140px !important; }
}


/* Seek paint explicit size */
#player .range--seek, #player #seek{
  background-size:
    calc(var(--progressPct, 0) * 100%) 3px,
    100% 3px !important;
  background-position: left center, left center !important;
  background-repeat: no-repeat, no-repeat !important;
}


/* === Robust SEEK styling === */
#player .range--seek,
#player #seek{
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  height: 14px !important;
  padding: 5px 0 !important;
  border: 0 !important;
}

/* Track fill (WebKit) */
#player .range--seek::-webkit-slider-runnable-track,
#player #seek::-webkit-slider-runnable-track{
  height: 3px !important;
  background-image:
    linear-gradient(#dc2626 0 0),
    linear-gradient(#3f3f46 0 0) !important;
  background-size:
    var(--progressWidth, calc(var(--progressPct, 0) * 100%)) 3px,
    100% 3px !important;
  background-position: left center, left center !important;
  background-repeat: no-repeat, no-repeat !important;
  border-radius: 9999px !important;
}

/* Track fill (Firefox) */
#player .range--seek::-moz-range-progress,
#player #seek::-moz-range-progress{
  height: 3px !important;
  background: #dc2626 !important;
  border-radius: 9999px !important;
}
#player .range--seek::-moz-range-track,
#player #seek::-moz-range-track{
  height: 3px !important;
  background: #3f3f46 !important;
  border-radius: 9999px !important;
}

/* Thumb color/size */
#player .range--seek::-webkit-slider-thumb,
#player #seek::-webkit-slider-thumb{
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #dc2626 !important;
  border: 0 !important;
  margin-top: -6.5px !important;
}
#player .range--seek::-moz-range-thumb,
#player #seek::-moz-range-thumb{
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #dc2626 !important;
  border: 0 !important;
}


/* Fullscreen container sizing */
#player:fullscreen, #player:-webkit-full-screen, #player:-ms-fullscreen{
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* v35: Mobile layout fixes */
@media (max-width: 480px){
  /* shrink big play */
  #hg-video-player .bigplay .disk{ width:64px !important; height:64px !important; box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.2) !important; }
  #hg-video-player .bigplay svg{ width:28px !important; height:28px !important; }

  /* smaller control buttons */
  #hg-video-player .btn{ width:32px !important; height:32px !important; min-width:32px !important; padding:0 !important; border-radius:10px !important; }
  #hg-video-player .btn svg{ width:16px !important; height:16px !important; }

  /* make sure FS and PiP are visible */
  #hg-video-player #btnFS, #hg-video-player #btnPiP{ display:inline-flex !important; }

  /* tighter toolbar and controls */
  #hg-video-player .hg-toolbar{ padding:6px !important; border-radius:12px !important; gap:6px !important; }
  #hg-video-player .hg-controls{ padding:8px !important; }

  /* use more width for the video */
  #hg-video-player .video-wrap{ border-radius:16px !important; }
  #hg-video-player{ margin-left:0 !important; margin-right:0 !important; }

  /* compact seek/volume rows */
  #hg-video-player #seek{ height:10px !important; padding:4px 0 !important; }
  #hg-video-player #vol{ width: 140px !important; }
}


/* v36: Mobile side-gaps to match hero spacing (not zero) */
@media (max-width: 480px){
  /* side gap similar to hero card */
  #hg-video-player{
    --hg-side-gap: clamp(12px, 4vw, 16px);
    width: calc(100vw - (var(--hg-side-gap) * 2)) !important;
    max-width: calc(100vw - (var(--hg-side-gap) * 2)) !important;
    margin-inline: var(--hg-side-gap) !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    border-radius: 16px !important;
  }
  #hg-video-player .video-wrap{ border-radius: 16px !important; }
}


/* v37: fix video overflow and align with hero margins */
@media (max-width: 480px){
  /* match hero width inside container */
  #hg-video-player{
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    border-radius: 16px !important;
  }

  /* consistent padding like hero container */
  .see-gaza-section #hg-video-player{
    padding-inline: clamp(12px, 4vw, 16px) !important;
  }

  /* prevent horizontal overflow */
  body, .see-gaza-section{
    overflow-x: hidden !important;
  }
}


/* v38: container-relative side gap; avoid overflow */
@media (max-width: 480px){
  #hg-video-player{
    --hg-gap: clamp(12px, 4vw, 16px);
    width: calc(100% - (var(--hg-gap) * 2)) !important; /* relative to parent, not viewport */
    max-width: calc(100% - (var(--hg-gap) * 2)) !important;
    margin-inline: var(--hg-gap) !important;
    border-radius: 16px !important;
  }
  #hg-video-player .video-wrap{ width: 100% !important; border-radius: 16px !important; }
}
@media (min-width: 481px) and (max-width: 640px){
  #hg-video-player{
    --hg-gap: clamp(14px, 3.5vw, 20px);
    width: calc(100% - (var(--hg-gap) * 2)) !important;
    max-width: calc(100% - (var(--hg-gap) * 2)) !important;
    margin-inline: var(--hg-gap) !important;
  }
}


/* v39: fill parent width; remove extra margins/padding added by prior fixes */
@media (max-width: 640px){
  /* make the player exactly as wide as its parent content area */
  #hg-video-player{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 16px !important;
  }
  /* ensure inner wrap uses full width too */
  #hg-video-player .video-wrap{ width: 100% !important; border-radius: 16px !important; }

  /* remove any section-specific padding we added previously */
  .see-gaza-section #hg-video-player{ padding-inline: 0 !important; }

  /* avoid accidental overflow */
  #hg-video-player, #hg-video-player *{ box-sizing: border-box; }
}


/* v40: Make See Gaza archive cards full-width on mobile */
@media (max-width: 640px){
  #primary .card-grid--compact{ overflow-x: visible !important; gap: 12px !important; }
  #primary .card-grid--compact > article{
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* ensure inner media fills the card */
  #primary .card-grid--compact > article .media,
  #primary .card-grid--compact > article .card,
  #primary .card-grid--compact > article [class*="video"],
  #primary .card-grid--compact > article img{
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* v43: Aggressive mobile full-width cards and player */
@media (max-width: 640px){
  .container.mx-auto .card-grid,
  .card-grid-container .card-grid{
    overflow-x: visible !important;
  }
  .container.mx-auto .card-grid > article,
  .card-grid > article{
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* ensure inner content expands */
  .card-grid > article *[class*="wrap"],
  .card-grid > article .media,
  .card-grid > article .card,
  .card-grid > article .hg-card,
  .card-grid > article img,
  .card-grid > article video{
    width: 100% !important;
    max-width: 100% !important;
  }
  /* player box should fill card width */
  #hg-video-player{ width: 100% !important; max-width: 100% !important; margin: 0 auto !important; }
  #hg-video-player .video-wrap{ width: 100% !important; }
}


/* v43: Strong mobile override for See Gaza cards width */
@media (max-width: 640px){
  .card-grid--compact{ overflow-x: visible !important; display: block !important; }
  .card-grid--compact > article{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}


/* v44: broad mobile card full-width fallback */
@media (max-width: 640px){
  [class*="card-grid"]{
    overflow-x: visible !important;
    display: block !important;
  }
  [class*="card-grid"] > article,
  [class*="card-grid"] > *[class*="card"],
  [class*="card-grid"] > *[class*="hg-card"]{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  /* ensure media inside card fills width */
  [class*="card-grid"] img,
  [class*="card-grid"] video,
  [class*="card-grid"] .media,
  [class*="card-grid"] [class*="cover"]{
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* v47: See Gaza page – fix player box width & margins using exact IDs */
@media (max-width: 640px){
  /* Remove inner padding/margins; keep container spacing only */
  #hg-video-player-section{ padding: 0 !important; margin: 0 0 12px 0 !important; }
  #hg-video-player{ width: 100% !important; max-width: 100% !important; margin: 0 !important; }
  #hg-video-player-ui.hg{ padding: 0 !important; }
  #player.player{ width: 100% !important; max-width: 100% !important; margin: 0 !important; }
  #videoWrap.video-wrap{ width: 100% !important; max-width: 100% !important; }
  /* Avoid accidental horizontal overflow */
  #hg-video-player-section, #hg-video-player{ box-sizing: border-box; overflow-x: hidden; }
  /* Keep nice corners but smaller for mobile */
  #hg-video-player, #videoWrap{ border-radius: 16px !important; }
}


/* v47: single page mobile spacing for #hg-video-player-section */
@media (max-width: 480px){
  /* Let the player fill the content column width with neat side gap like hero */
  #hg-video-player-section{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #hg-video-player{
    width: 100% !important;
    max-width: 100% !important;
  }
  #hg-video-player-ui,
  #hg-video-player .player,
  #hg-video-player .video-wrap{
    width: 100% !important;
    max-width: 100% !important;
  }
  /* keep rounded but compact */
  #hg-video-player .video-wrap{ border-radius: 16px !important; }
  /* compact toolbar as before */
  #hg-video-player .hg-toolbar{ padding: 6px !important; border-radius: 12px !important; gap: 6px !important; }
  #hg-video-player .hg-controls{ padding: 8px !important; }
  /* compact seek/vol */
  #hg-video-player #seek{ height: 10px !important; padding: 4px 0 !important; }
  #hg-video-player #vol{ width: 140px !important; }
}


/* v48: nudge player width to visually match hero width on mobile */
@media (max-width: 480px){
  #hg-video-player{ margin-left:-4px !important; margin-right:-4px !important; width:calc(100% + 8px) !important; }
}
@media (min-width: 481px) and (max-width: 640px){
  #hg-video-player{ margin-left:-6px !important; margin-right:-6px !important; width:calc(100% + 12px) !important; }
}


/* v49: match header/hero width by compensating container px-4 and removing max-width */
@media (max-width: 640px){
  /* remove internal cap */
  #hg-video-player .hg{ max-width: none !important; }

  /* container on single has px-4 (16px). Expand section to compensate so visual width = hero */
  #hg-video-player-section{
    margin-left: -1rem !important;  /* equal to px-4 */
    margin-right: -1rem !important;
    width: calc(100% + 2rem) !important;
  }
}


/* v50: mobile corner polish & edge clipping */
@media (max-width: 640px){
  /* keep section width tweak from v49 (assumes px-4 on container) */
  #hg-video-player-section{
    margin-left:-1rem !important;
    margin-right:-1rem !important;
    width:calc(100% + 2rem) !important;
  }
  /* unify rounding & clip any overflow so corners look clean */
  #hg-video-player .hg,
  #hg-video-player .video-wrap,
  #hg-video-player .hg-cover,
  #hg-video-player .hg-player-cover{
    border-radius:16px !important;
    overflow:hidden !important;
  }
  /* make sure the toolbar blur stays inside */
  #hg-video-player .hg-controls{ border-radius:16px !important; overflow:hidden !important; }
  #hg-video-player .hg-toolbar{ border-radius:12px !important; }
  /* avoid sub-pixel gaps on edges */
  #hg-video-player img,
  #hg-video-player video{ display:block !important; }
  /* remove any inner cap that could cause misalignment */
  #hg-video-player .hg{ max-width:none !important; }
}


/* v51: unify corner radius + hard clip to remove left/right artifacts */
@media (max-width: 640px){
  #hg-video-player{ --corner: 18px; }
  #hg-video-player .hg,
  #hg-video-player .video-wrap,
  #hg-video-player .hg-cover,
  #hg-video-player .hg-player-cover,
  #hg-video-player .hg-controls,
  #hg-video-player .hg-toolbar{
    border-radius: var(--corner) !important;
  }
  /* Ensure nothing bleeds outside corners */
  #hg-video-player .hg,
  #hg-video-player .video-wrap,
  #hg-video-player .hg-cover,
  #hg-video-player .hg-player-cover,
  #hg-video-player .hg-controls{
    overflow: hidden !important;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
            mask-image: radial-gradient(white, black);
  }
  /* Clip entire card to rounded rect (sacrifices outer shadow on mobile, but removes artifacts) */
  #hg-video-player .hg{
    -webkit-clip-path: inset(0 round var(--corner));
            clip-path: inset(0 round var(--corner));
  }
  /* avoid subpixel gap on right/left */
  #hg-video-player img, #hg-video-player video{ display:block !important; }
}


/* v52: ultra-compact controls on mobile (Aparat-like) */
@media (max-width: 640px){
  /* bring controls closer to bottom, reduce padding */
  #hg-video-player .hg-controls{
    bottom: 6px !important;
    padding: 0 8px 6px !important;
    gap: 6px !important;
  }

  /* thinner seek bar */
  #hg-video-player #seek,
  #hg-video-player .range.range--seek{
    height: 6px !important;
    padding: 0 !important;
    margin: 6px 0 4px 0 !important;
  }
  #hg-video-player input[type="range"].range--seek::-webkit-slider-runnable-track{ height:6px !important; }
  #hg-video-player input[type="range"].range--seek::-moz-range-track{ height:6px !important; }

  /* smaller buttons + toolbar chip */
  #hg-video-player .hg-toolbar{
    padding: 6px 8px !important;
    gap: 6px !important;
    background: rgba(24,24,27,.6) !important;
    backdrop-filter: blur(4px) !important;
  }
  #hg-video-player .btn{
    width: 30px !important; height: 30px !important; min-width:30px !important;
    border-radius: 9px !important; padding: 0 !important;
  }
  #hg-video-player .btn svg{ width: 14px !important; height: 14px !important; }

  /* compact time label */
  #hg-video-player .time{ font-size: 12px !important; }

  /* avoid covering too much of the video: cap total controls block height */
  #hg-video-player .hg-controls{ max-height: 84px !important; }

  /* keep corner polish */
  #hg-video-player .hg, #hg-video-player .video-wrap,
  #hg-video-player .hg-cover, #hg-video-player .hg-player-cover{
    border-radius: 16px !important; overflow:hidden !important;
  }
}


/* v53: two-tier mobile layout: small phones vs larger phones */
@media (max-width: 380px){ /* SMALL phones */
  /* width compensation from v49 */
  #hg-video-player-section{ margin-left:-1rem !important; margin-right:-1rem !important; width:calc(100% + 2rem) !important; }
  #hg-video-player .hg{ max-width:none !important; }

  /* ultra-compact controls */
  #hg-video-player .hg-controls{ bottom:6px !important; padding:0 6px 6px !important; gap:6px !important; max-height:70px !important; }
  #hg-video-player .hg-toolbar{ padding:4px 6px !important; gap:6px !important; }
  #hg-video-player .btn{ width:28px !important; height:28px !important; min-width:28px !important; border-radius:9px !important; padding:0 !important; }
  #hg-video-player .btn svg{ width:12px !important; height:12px !important; }
  #hg-video-player .time{ font-size:11px !important; }

  /* slim seek */
  #hg-video-player #seek, #hg-video-player .range.range--seek{ height:4px !important; padding:0 !important; margin:6px 0 4px 0 !important; }
  #hg-video-player input[type="range"].range--seek::-webkit-slider-runnable-track{ height:4px !important; }
  #hg-video-player input[type="range"].range--seek::-moz-range-track{ height:4px !important; }

  /* big-play smaller */
  #hg-video-player .bigplay .disk{ width:56px !important; height:56px !important; }
  #hg-video-player .bigplay svg{ width:24px !important; height:24px !important; }

  /* ensure FS/PiP visible */
  #hg-video-player #btnFS, #hg-video-player #btnPiP{ display:inline-flex !important; }
}

@media (min-width: 381px) and (max-width: 768px){ /* LARGER phones / small tablets */
  #hg-video-player-section{ margin-left:-1rem !important; margin-right:-1rem !important; width:calc(100% + 2rem) !important; }
  #hg-video-player .hg{ max-width:none !important; }

  /* compact controls */
  #hg-video-player .hg-controls{ bottom:8px !important; padding:0 10px 8px !important; gap:8px !important; max-height:88px !important; }
  #hg-video-player .hg-toolbar{ padding:6px 10px !important; gap:8px !important; }
  #hg-video-player .btn{ width:32px !important; height:32px !important; min-width:32px !important; border-radius:10px !important; padding:0 !important; }
  #hg-video-player .btn svg{ width:16px !important; height:16px !important; }
  #hg-video-player .time{ font-size:12px !important; }

  #hg-video-player #seek, #hg-video-player .range.range--seek{ height:6px !important; padding:0 !important; margin:8px 0 6px 0 !important; }
  #hg-video-player input[type="range"].range--seek::-webkit-slider-runnable-track{ height:6px !important; }
  #hg-video-player input[type="range"].range--seek::-moz-range-track{ height:6px !important; }

  #hg-video-player .bigplay .disk{ width:64px !important; height:64px !important; }
  #hg-video-player .bigplay svg{ width:28px !important; height:28px !important; }

  #hg-video-player #btnFS, #hg-video-player #btnPiP{ display:inline-flex !important; }
}


/* v54: ultra-compact controls for small phones */
@media (max-width: 380px){
  /* tighter placement */
  #hg-video-player .hg-controls{
    bottom: 4px !important;
    padding: 0 6px 4px !important;
    gap: 4px !important;
    max-height: 64px !important;
  }
  /* shrink toolbar "chip" */
  #hg-video-player .hg-toolbar{
    padding: 4px 6px !important;
    gap: 4px !important;
    border-radius: 10px !important;
    backdrop-filter: blur(3px) !important;
    background: rgba(24,24,27,.55) !important;
  }
  /* smaller buttons */
  #hg-video-player .btn{
    width: 26px !important; height: 26px !important; min-width: 26px !important;
    border-radius: 8px !important; padding: 0 !important;
  }
  #hg-video-player .btn svg{ width: 12px !important; height: 12px !important; }
  #hg-video-player .time{ font-size: 11px !important; line-height: 1.1 !important; }

  /* extra slim seek */
  #hg-video-player #seek,
  #hg-video-player .range.range--seek{
    height: 3px !important;
    padding: 0 !important;
    margin: 6px 0 4px 0 !important;
  }
  #hg-video-player input[type="range"].range--seek::-webkit-slider-runnable-track{ height: 3px !important; }
  #hg-video-player input[type="range"].range--seek::-moz-range-track{ height: 3px !important; }
  #hg-video-player input[type="range"].range--seek::-webkit-slider-thumb{ margin-top: -6px !important; } /* keep knob centered */
  #hg-video-player input[type="range"].range--seek::-moz-range-thumb{ margin-top: 0 !important; }

  /* remove any extra inner spacing in containers */
  #hg-video-player .controls-row,
  #hg-video-player .seek-row{ margin: 0 !important; padding: 0 !important; }
}


/* v55: Aparat-style seek at bottom edge of matte (mobile only) */
@media (max-width: 640px){
  /* align the matte background to bottom edge */
  #hg-video-player .hg-controls{
    position: absolute !important;
    bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* make seek a thin line stuck to bottom */
  #hg-video-player #seek,
  #hg-video-player .range.range--seek{
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  #hg-video-player input[type="range"].range--seek::-webkit-slider-runnable-track{ height:2px !important; }
  #hg-video-player input[type="range"].range--seek::-moz-range-track{ height:2px !important; }
  #hg-video-player input[type="range"].range--seek::-webkit-slider-thumb{ margin-top:-7px !important; }
  #hg-video-player input[type="range"].range--seek::-moz-range-thumb{ margin-top:0 !important; }

  /* ensure toolbar sits above line cleanly */
  #hg-video-player .hg-toolbar{
    padding-bottom: 6px !important;
  }

  /* shrink entire matte block */
  #hg-video-player .hg-controls{ max-height: 56px !important; }

  /* visually blend matte and seek edge */
  #hg-video-player .hg-controls::after{
    content:'';
    position:absolute;
    left:0; right:0; bottom:0;
    height:2px;
    background:linear-gradient(to right, var(--accent,#ff4444), var(--accent,#ff0000));
  }
}


/* v55: Mobile – seek becomes a thin top line (no dot/knob) to minimize matte height */
@media (max-width: 640px){
  /* host for absolute seek line */
  #hg-video-player .hg-controls{ position: relative !important; padding-top: 10px !important; }

  /* turn the seek into a 2px line stuck to top edge of matte */
  #hg-video-player #seek,
  #hg-video-player .range.range--seek{
    position: absolute !important;
    top: 0 !important;
    left: 8px !important;
    right: 8px !important;
    height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* slim track */
  #hg-video-player input[type="range"].range--seek{
    -webkit-appearance: none !important;
            appearance: none !important;
    background: transparent !important;
  }
  #hg-video-player input[type="range"].range--seek::-webkit-slider-runnable-track{
    height: 2px !important; border-radius: 1px !important;
  }
  #hg-video-player input[type="range"].range--seek::-moz-range-track{
    height: 2px !important; border-radius: 1px !important;
  }

  /* hide the knob/dot entirely */
  #hg-video-player input[type="range"].range--seek::-webkit-slider-thumb{
    -webkit-appearance: none !important;
    width: 0 !important; height: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; margin-top: 0 !important;
  }
  #hg-video-player input[type="range"].range--seek::-moz-range-thumb{
    width: 0 !important; height: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important;
  }

  /* if there is a custom dot/handle element, make sure it's hidden on mobile */
  #hg-video-player .seek .dot,
  #hg-video-player .seek .knob,
  #hg-video-player .seek .handle{
    display: none !important;
  }
}


/* v56: mobile clean matte — no red dot, no base matte, seek fits matte width */
@media (max-width: 640px){
  /* 1) Hide any custom dot/handle on seek */
  #hg-video-player .seek .dot,
  #hg-video-player .seek [class*="dot"],
  #hg-video-player .seek .handle,
  #hg-video-player .seek .thumb,
  #hg-video-player .seek .knob{ display:none !important; }

  /* Also hide native thumb just in case (already done in v55, keep here as belt-and-suspenders) */
  #hg-video-player input[type="range"].range--seek::-webkit-slider-thumb{
    -webkit-appearance:none !important; width:0 !important; height:0 !important; border:0 !important; background:transparent !important;
  }
  #hg-video-player input[type="range"].range--seek::-moz-range-thumb{
    width:0 !important; height:0 !important; border:0 !important; background:transparent !important;
  }

  /* 2) Remove the lower matte layer completely (the blurred/gradient underlay) */
  #hg-video-player .hg-player-cover,
  #hg-video-player .hg-cover{
    display: none !important;
  }

  /* Keep only the toolbar chip; make the controls container itself transparent and minimal */
  #hg-video-player .hg-controls{
    background: transparent !important;
    box-shadow: none !important;
    padding-top: 10px !important; /* space for the thin seek line */
    overflow: visible !important;
  }

  /* 3) Constrain the thin seek line to stay inside matte width */
  #hg-video-player .hg-controls{ --ctrl-pad: 10px; }
  #hg-video-player #seek,
  #hg-video-player .range.range--seek{
    position: absolute !important;
    top: 0 !important;
    left: var(--ctrl-pad) !important;
    width: calc(100% - (var(--ctrl-pad) * 2)) !important;
    right: auto !important;
    height: 2px !important;
    margin: 0 !important; padding: 0 !important;
  }
  #hg-video-player input[type="range"].range--seek::-webkit-slider-runnable-track{ height:2px !important; }
  #hg-video-player input[type="range"].range--seek::-moz-range-track{ height:2px !important; }
}


/* v56: Mobile polish — remove dot, remove lower matte, keep seek inside */
@media (max-width: 640px){
  /* 1) remove any custom red dot/handle on seek */
  #hg-video-player #seek .dot,
  #hg-video-player #seek .knob,
  #hg-video-player #seek .thumb,
  #hg-video-player #seek .handle,
  #hg-video-player #seek .marker,
  #hg-video-player .range.range--seek .dot,
  #hg-video-player .range.range--seek .knob,
  #hg-video-player .range.range--seek .thumb,
  #hg-video-player .range.range--seek .handle,
  #hg-video-player .range.range--seek .marker{
    display: none !important;
  }

  /* 2) remove the lower matte/cover layer completely */
  #hg-video-player .hg-cover,
  #hg-video-player .hg-player-cover{
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  /* keep only the toolbar chip background for controls */
  #hg-video-player .hg-toolbar{
    background: rgba(24,24,27,.55) !important;
    backdrop-filter: blur(3px) !important;
  }

  /* 3) keep seek strictly inside matte width */
  #hg-video-player .hg-controls{
    position: relative !important;
    padding: 12px 10px 8px 10px !important; /* top reserved for thin seek line */
    overflow: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  #hg-video-player #seek,
  #hg-video-player .range.range--seek{
    position: absolute !important;
    top: 0 !important;
    left: 10px !important;
    right: 10px !important;
    height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #hg-video-player input[type="range"].range--seek::-webkit-slider-runnable-track{ height:2px !important; }
  #hg-video-player input[type="range"].range--seek::-moz-range-track{ height:2px !important; }
  #hg-video-player input[type="range"].range--seek::-webkit-slider-thumb{ width:0 !important; height:0 !important; }
  #hg-video-player input[type="range"].range--seek::-moz-range-thumb{ width:0 !important; height:0 !important; }
}


/* v57: Correct scope (#player) – remove red dot, remove lower matte, keep thin seek inside */
@media (max-width: 640px){
  /* 0) Make sure container is the reference */
  #player{ position: relative !important; }

  /* 1) Remove any bulky lower matte */
  #player .controls{
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding-top: 12px !important; /* space for thin seek line */
    padding-bottom: 6px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  /* 2) Seek as thin line at the very top of the controls */
  #player #seek,
  #player .range.range--seek{
    position: absolute !important;
    top: 0 !important;
    left: 10px !important;
    right: 10px !important;
    height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #player input[type="range"].range--seek{ -webkit-appearance:none !important; appearance:none !important; background:transparent !important; }
  #player input[type="range"].range--seek::-webkit-slider-runnable-track{ height:2px !important; border-radius:1px !important; }
  #player input[type="range"].range--seek::-moz-range-track{ height:2px !important; border-radius:1px !important; }

  /* 3) Hide the thumb/dot completely in #player scope */
  #player input[type="range"].range--seek::-webkit-slider-thumb{
    -webkit-appearance:none !important; width:0 !important; height:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; margin-top:0 !important;
  }
  #player input[type="range"].range--seek::-moz-range-thumb{ width:0 !important; height:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; }

  /* If there is any custom dot element, hide it as well */
  #player #seek .dot, #player #seek .knob, #player #seek .thumb, #player #seek .handle, #player #seek .marker{ display:none !important; }
}


/* v58: stronger dot removal + extra-compact matte for small screens */
@media (max-width: 640px){
  /* Hide any custom dot/knob/handle/marker inside the seek area (very defensive) */
  #player #seek [class*="dot"],
  #player #seek [class*="knob"],
  #player #seek [class*="thumb"],
  #player #seek [class*="handle"],
  #player #seek [class*="marker"],
  #player .range.range--seek [class*="dot"],
  #player .range.range--seek [class*="knob"],
  #player .range.range--seek [class*="thumb"],
  #player .range.range--seek [class*="handle"],
  #player .range.range--seek [class*="marker"]{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Smallest phones: push the matte even smaller */
@media (max-width: 380px){
  #player .controls{
    padding: 10px 8px 6px 8px !important; /* keep tiny space for thinline seek */
    gap: 4px !important;
    max-height: 56px !important;
  }
  #player .toolbar, /* fallback if toolbar has generic class */
  #player .hg-toolbar{
    padding: 3px 5px !important;
    gap: 4px !important;
    border-radius: 10px !important;
  }
  #player .btn{
    width: 24px !important; height: 24px !important; min-width:24px !important;
    border-radius: 8px !important; padding: 0 !important;
  }
  #player .btn svg{ width: 11px !important; height: 11px !important; }
  #player .time{ font-size: 10.5px !important; line-height: 1.05 !important; }
  /* keep the thinline seek glued to the top edge and inside padding */
  #player #seek, #player .range.range--seek{ left: 8px !important; right: 8px !important; height:2px !important; top:0 !important; }
}


/* v59: tiniest matte for <=380px */
@media (max-width: 380px){
  #player .controls{ max-height: 52px !important; padding: 8px 8px 6px 8px !important; }
}


/* v60: smallest matte tweaks */
@media (max-width: 380px){
  #player .controls{ max-height: 50px !important; padding: 8px 8px 6px 8px !important; }
  #player .btn{ width: 22px !important; height: 22px !important; min-width:22px !important; }
  #player .btn svg{ width: 10px !important; height: 10px !important; }
  #player .time{ font-size: 10px !important; }
}


/* === Mobile compact mode: hide progress dot (seek thumb) for See Gaza player === */
@media (max-width: 768px) {
  /* Hide only the thumb (the circular dot) while preserving the track */
  #player input[type="range"]::-webkit-slider-thumb {
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    margin-top: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    -webkit-appearance: none !important;
            appearance: none !important;
  }
  #player input[type="range"]::-moz-range-thumb {
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    appearance: none !important;
  }
  #player input[type="range"]::-ms-thumb {
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    appearance: none !important;
  }
  /* Keep track height slim */
  #player input[type="range"]{
    height: 3px !important;
  }
}



/* === Mobile compact mode v2: aggressively hide any seek 'dot' and native thumb === */
@media (max-width: 900px) {
  /* Hide common custom handles */
  #player .dot,
  #player [class*="dot"],
  #player .thumb,
  #player .handle,
  #player .knob,
  #player .marker,
  #player .range--seek .dot,
  #player .range--seek .thumb,
  #player .range--seek .handle,
  #player .range--seek .knob,
  #player .range--seek .marker {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Hide native slider thumb across engines (keep track visible) */
  #player input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
            appearance: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  #player input[type="range"]::-moz-range-thumb {
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  #player input[type="range"]::-ms-thumb {
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Ensure the red progress doesn't render a round cap that looks like a dot */
  #player .range--seek, #player #seek {
    border-radius: 0 !important;
    background-image:
      linear-gradient(#dc2626 0 0),
      linear-gradient(#3f3f46 0 0) !important;
    background-repeat: no-repeat !important;
    background-position: left center, left center !important;
    background-size:
      calc(var(--progressPct, var(--progress, 0)) * 100%) 3px,
      100% 3px !important;
  }
}



/* === Mobile Fullscreen Orientation Fix styles (v63) === */
#player.hg-fs-active:fullscreen,
#player.hg-fs-active:-webkit-full-screen,
#player.hg-fs-active:-ms-fullscreen{
  background: black !important;
}

#player.hg-fs-portrait:fullscreen .video-wrap,
#player.hg-fs-portrait:-webkit-full-screen .video-wrap,
#player.hg-fs-portrait:-ms-fullscreen .video-wrap{
  position: absolute !important;
  top: env(safe-area-inset-top, 0) !important;
  left: env(safe-area-inset-left, 0) !important;
  width: 100vw !important;
  height: 100vh !important;
  display: grid !important;
  place-items: center !important;
}
#player.hg-fs-portrait:fullscreen video,
#player.hg-fs-portrait:-webkit-full-screen video,
#player.hg-fs-portrait:-ms-fullscreen video{
  width: auto !important;
  height: 100vh !important;
  max-height: 100vh !important;
  object-fit: contain !important;
}

#player.hg-fs-rotate:fullscreen .video-wrap,
#player.hg-fs-rotate:-webkit-full-screen .video-wrap,
#player.hg-fs-rotate:-ms-fullscreen .video-wrap{
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 100vh !important;   /* swap dimensions */
  height: 100vw !important;
  transform: translate(-50%, -50%) rotate(90deg) !important;
  transform-origin: center center !important;
  display: block !important;
}
#player.hg-fs-rotate:fullscreen video,
#player.hg-fs-rotate:-webkit-full-screen video,
#player.hg-fs-rotate:-ms-fullscreen video{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Ensure controls overlay adapt */
#player.hg-fs-rotate:fullscreen .controls,
#player.hg-fs-rotate:-webkit-full-screen .controls,
#player.hg-fs-rotate:-ms-fullscreen .controls,
#player.hg-fs-portrait:fullscreen .controls,
#player.hg-fs-portrait:-webkit-full-screen .controls,
#player.hg-fs-portrait:-ms-fullscreen .controls{
  z-index: 10 !important;
}

/* iOS Safari safe-area adjustment inside fullscreen */
@supports(padding: max(0px)){
  #player.hg-fs-active:fullscreen .controls,
  #player.hg-fs-active:-webkit-full-screen .controls{
    padding-left: max(8px, env(safe-area-inset-left)) !important;
    padding-right: max(8px, env(safe-area-inset-right)) !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
}


/* === v75: Lower matte (closer to bottom) + desktop-like red thumbs in fullscreen === */
#player:fullscreen .controls,
#player:-webkit-full-screen .controls,
#hg-video-player:fullscreen #controls,
#hg-video-player:-webkit-full-screen #controls{
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  bottom: max(2px, env(safe-area-inset-bottom)) !important;
  width: calc(100vw - 20px) !important;
  max-width: 100vw !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  z-index: 2147483640 !important;
  opacity: 1 !important; display: block !important; pointer-events: auto !important;
}

/* Desktop-like red thumbs (12px) on 3px track, fullscreen only */
#player:fullscreen input#seek::-webkit-slider-runnable-track,
#player:fullscreen input#vol::-webkit-slider-runnable-track,
#hg-video-player:fullscreen input#seek::-webkit-slider-runnable-track,
#hg-video-player:fullscreen input#vol::-webkit-slider-runnable-track{ height: 3px !important; }
#player:fullscreen input#seek::-moz-range-track,
#player:fullscreen input#vol::-moz-range-track,
#hg-video-player:fullscreen input#seek::-moz-range-track,
#hg-video-player:fullscreen input#vol::-moz-range-track{ height: 3px !important; }

#player:fullscreen input#seek::-webkit-slider-thumb,
#player:fullscreen input#vol::-webkit-slider-thumb,
#hg-video-player:fullscreen input#seek::-webkit-slider-thumb,
#hg-video-player:fullscreen input#vol::-webkit-slider-thumb{
  -webkit-appearance:none !important;
  width: 12px !important; height: 12px !important;
  border-radius: 50% !important;
  background: #dc2626 !important; /* red like desktop */
  border: 0 !important;
  margin-top: -5px !important; /* center on 3px track */
  box-shadow: none !important; opacity:1 !important; display:block !important;
}
#player:fullscreen input#seek::-moz-range-thumb,
#player:fullscreen input#vol::-moz-range-thumb,
#hg-video-player:fullscreen input#seek::-moz-range-thumb,
#hg-video-player:fullscreen input#vol::-moz-range-thumb{
  width: 12px !important; height: 12px !important;
  border-radius: 50% !important;
  background: #dc2626 !important;
  border: 0 !important; box-shadow:none !important; opacity:1 !important;
}



/* === Vertical video behavior (See Gaza) v-vertfix === */

/* Base: when vertical, mark container */
#hg-video-player.hg-vertical .video-wrap { contain: content; }

/* Desktop (>=769px): keep video boxed in desktop aspect both windowed and fullscreen */
@media (min-width: 769px){
  /* Keep the player area as desktop box (16:9) */
  #hg-video-player.hg-vertical .video-wrap{
    aspect-ratio: 16/9;
    max-width: 100%;
    margin: 0 auto;
  }
  #hg-video-player.hg-vertical video{
    width: auto !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  /* Fullscreen: center a desktop box inside fullscreen; video fits height */
  #hg-video-player.hg-vertical:fullscreen .video-wrap{
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(100vw, 1280px) !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
  }
  #hg-video-player.hg-vertical:fullscreen video{
    width: auto !important;
    height: 100% !important;
    object-fit: contain !important;
  }
}

/* Mobile (<=768px): non-fullscreen player becomes vertical; use existing mobile controls */
@media (max-width: 768px){
  #hg-video-player.is-mobile.hg-vertical:not(.is-fs) .video-wrap{
    aspect-ratio: 9/16 !important;
    width: 100% !important;
    height: auto !important;
  }
  #hg-video-player.is-mobile.hg-vertical:not(.is-fs) video{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* Mobile fullscreen for vertical: fill vertically, keep mobile controller box */
  #hg-video-player.is-mobile.hg-vertical.is-fs,
  #hg-video-player.is-mobile.hg-vertical:fullscreen{
    /* ensure stacking over content */
    z-index: 2147483640 !important;
  }
  #hg-video-player.is-mobile.hg-vertical.is-fs .video-wrap,
  #hg-video-player.is-mobile.hg-vertical:fullscreen .video-wrap{
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
  }
  #hg-video-player.is-mobile.hg-vertical.is-fs video,
  #hg-video-player.is-mobile.hg-vertical:fullscreen video{
    width: 100vw !important;
    height: 100vh !important;
    object-fit: contain !important;
  }

  /* Make sure desktop-only control chrome does not replace mobile controls while fullscreen on vertical */
  #hg-video-player.is-mobile.hg-vertical.is-fs .hg-toolbar.desktop,
  #hg-video-player.is-mobile.hg-vertical:fullscreen .hg-toolbar.desktop{
    display: none !important;
  }
  #hg-video-player.is-mobile.hg-vertical.is-fs .hg-toolbar.mobile,
  #hg-video-player.is-mobile.hg-vertical:fullscreen .hg-toolbar.mobile{
    display: flex !important;
  }
}



/* Center vertical videos on desktop (non-FS and FS) */
@media (min-width: 769px){
  /* Non-fullscreen: center the video inside the 16:9 desktop box */
  #hg-video-player.hg-vertical .video-wrap{
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #hg-video-player.hg-vertical .video-wrap video{
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* Fullscreen: ensure the fixed 16:9 box and the video are centered */
  #hg-video-player.hg-vertical:fullscreen .video-wrap{
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  #hg-video-player.hg-vertical:fullscreen .video-wrap video{
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}