:root {--ctrl-bg:rgba(0,0,0,0.05); --ctrl-radius:15px; --ctrl-gap:10px; --btn-size:34px; --icon-size:20px; --accent:#ffffff; --progress-width:min(13vw, 920px); --progress-height:2px; --thumb-size:8px;}

.video-inline { position: relative;  width: 100%;  height: auto;  overflow: hidden; }

/* fullscreen logo (inline) - hidden by default */
.vc-fullscreen-logo {position: absolute;top: 20px;left: 50%; transform: translateX(-50%); z-index: 9999; pointer-events: none; width: 50px; max-width: 40%; opacity: 0; transition: opacity 200ms ease; display: block;}
.vc-fullscreen-logo img { width: 100%; height: auto; display: block; }

/* visible when the wrapper is fullscreen (standard + webkit) OR when wrapper has fallback class */
.video-inline:fullscreen .vc-fullscreen-logo,
.video-inline:-webkit-full-screen .vc-fullscreen-logo,
.video-inline.fullscreen-active .vc-fullscreen-logo { opacity: 1;}

/* small-screen tweaks */
@media (max-width: 768px) {
  .vc-fullscreen-logo { width: 110px; top: 10px; }
}
@media (max-width: 440px) {
  .vc-fullscreen-logo { width: 90px; top: 8px; }
}

.video-inline:hover .video-controls { opacity: 1; transition: opacity .3s}

/* Controls CSS: compact one-line rule style per richiesta */
.video-controls { opacity: 0; position: absolute;  left: 50%;  transform: translateX(-50%);  bottom: 50px;  z-index: 6;  display: flex;  gap: 10px;  align-items: center;  background: rgba(0,0,0,0.05);  padding: 6px 8px;  border-radius: 12px;  backdrop-filter: blur(2px);  pointer-events: auto; transition: opacity .3s }
/* positioning helpers for video controls */
.video-controls-bottom-left { left: 12px;  right: auto;  transform: none; }
.video-controls-bottom-right { right: 12px;  left: auto;  transform: none; }
.video-controls-bottom-center { left: 50%;  right: auto;  transform: translateX(-50%); }

.video-controls .control { -webkit-tap-highlight-color: transparent;  border: 0;  background: transparent;  color: var(--accent);  font-size: 16px;  height: var(--btn-size);  width: var(--btn-size);  display: inline-flex;  align-items: center;  justify-content: center;  border-radius: 10px;  cursor: pointer;  transition: background .12s, transform .08s;  padding: 0; }
.video-controls .control:focus { outline: 2px solid rgba(255,255,255,0.12);  outline-offset: 2px; }
.video-controls .control:hover { background: rgba(255,255,255,0.06); }

/* make .icon a fixed-size container so img inside scales predictably */
.video-controls .control .icon { width: var(--icon-size); height: var(--icon-size); display: inline-block; color: var(--accent);  filter: brightness(0) invert(1); }
.video-controls .control .icon img { width: 100%; height: 100%; object-fit: contain; display: block;   }
.video-controls .control .sr-only { position: absolute !important;  height: 1px;  width: 1px;  overflow: hidden;  clip: rect(1px,1px,1px,1px);  white-space: nowrap;  clip-path: inset(50%);  border: 0;  padding: 0;  margin: -1px; }
 
.progress-container {position:absolute; left:50%; transform:translateX(-50%); bottom:30px; z-index:3; width:var(--progress-width); max-width:calc(100% - 40px); display:flex; align-items:center; justify-content:center; pointer-events:auto;}
.progress {position:relative; width:100%; height:var(--progress-height)!important; background:rgba(255,255,255,0.12)!important; border-radius:999px!important; overflow:visible!important; cursor:pointer;}
.progress .buffered {position:absolute; left:0; top:0; bottom:0; height:100%; width:0%; background:rgba(255,255,255,0.18)!important; border-radius:999px!important;}
.progress .played {position:absolute; left:0; top:0; bottom:0; height:100%; width:0%; background:linear-gradient(90deg, #fff 0%, #fff 100%); border-radius:999px; transition:width 0.05s linear;}
.progress .thumb {position:absolute; top:50%; transform:translate(-50%,-50%); left:0%; width:var(--thumb-size); height:var(--thumb-size); border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0, 0, 0, 0.5); transition:transform .06s; touch-action:none; display:none;}
.progress.dragging .thumb {display:block;}
.progress:hover .thumb {display:block;} 


@media (max-width:440px) {
:root { --btn-size: 44px;  --icon-size: 18px;  --ctrl-gap: 8px;  --progress-width: 92vw;  --thumb-size: 10px; }
.progress { height: 3px; }
.progress { background: rgba(50,50,50,0.12); }
.progress .buffered { background: rgba(50,50,50,0.18); }
.progress .thumb { background-color: #333; }
.progress .played { background: linear-gradient(90deg,#333 0%,#333 100%); }
}