/* CMS player — styles. Classes are prefixed with the per-site class prefix (djp).
   Skin: --p-accent (accent colour) and --p-radius (corner radius) are set per site
   by player.js from the player config; the defaults below apply when absent. */

.djp-pl-root{--p-accent:#e91e63;--p-radius:8px;--p-bar:rgba(255,255,255,.28);--p-bg:rgba(20,20,20,.92);container-type:inline-size;position:relative;display:block;background:#000;color:#fff;border-radius:var(--p-radius);overflow:hidden;font:13px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none;touch-action:manipulation}
.djp-pl-root:focus-visible{box-shadow:0 0 0 2px var(--p-accent)}
.djp-pl-root video{display:block;width:100%;height:100%;object-fit:contain;background:#000;border-radius:0}
.djp-pl-root[data-fs]{width:100%;height:100%;border-radius:0;background:#000}
.djp-pl-root[data-fs] video{height:100vh}
.djp-pl-root svg{width:24px;height:24px;fill:currentColor;display:block;pointer-events:none}
/* Сброс кнопок не должен перекрывать отступы, фон и размеры конкретных контролов. */
.djp-pl-root :where(button){margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;line-height:0}

/* Big play button (idle / paused / ended) */
.djp-pl-big{position:absolute;left:50%;top:50%;width:72px;height:72px;transform:translate(-50%,-50%);border-radius:50%;background:var(--p-accent);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 24px rgba(0,0,0,.45);transition:transform .15s,opacity .2s;z-index:3}
.djp-pl-big svg{width:40px;height:40px}
.djp-pl-big:hover{transform:translate(-50%,-50%) scale(1.06)}
.djp-pl-root[data-state="playing"] .djp-pl-big,.djp-pl-root[data-state="loading"] .djp-pl-big,.djp-pl-root[data-state="error"] .djp-pl-big,.djp-pl-root[data-waiting] .djp-pl-big{opacity:0;pointer-events:none}

/* Spinner while buffering */
.djp-pl-spinner{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;border:4px solid rgba(255,255,255,.25);border-top-color:var(--p-accent);opacity:0;pointer-events:none;z-index:2;transition:opacity .2s}
.djp-pl-root[data-waiting] .djp-pl-spinner,.djp-pl-root[data-state="loading"] .djp-pl-spinner{opacity:1;animation:djp-pl-spin .8s linear infinite}
@keyframes djp-pl-spin{to{transform:rotate(360deg)}}

/* Error / unavailable message */
.djp-pl-msg{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);padding:16px;text-align:center;font-size:15px;color:#ddd;z-index:4}
.djp-pl-msg[hidden]{display:none}
.djp-pl-root[data-state="error"] video{opacity:.35}

/* Ad layer (ads.js): linear ads in a second <video>; transparent in inline mode */
.djp-pl-ad{position:absolute;inset:0;z-index:6;background:#000}
.djp-pl-ad[hidden]{display:none}
.djp-pl-ad-transparent{background:transparent}
.djp-pl-ad-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.djp-pl-ad-slot{position:absolute;inset:0}
.djp-pl-ad-slot:empty{pointer-events:none}
.djp-pl-ad-click{position:absolute;inset:0;cursor:pointer}
.djp-pl-ad-click[hidden]{display:none}
.djp-pl-ad-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:10px;padding:8px 12px;background:linear-gradient(to bottom,rgba(0,0,0,.65),rgba(0,0,0,0));font-size:12px;color:#eee;pointer-events:none}
.djp-pl-ad-top>*{pointer-events:auto}
.djp-pl-ad-label{padding:2px 6px;border-radius:3px;background:rgba(255,255,255,.18);text-transform:uppercase;letter-spacing:.04em;font-size:11px}
.djp-pl-ad-count{font-variant-numeric:tabular-nums}
.djp-pl-ad-visit{margin-left:auto;color:#fff;text-decoration:underline}
.djp-pl-ad-skip{position:absolute;right:12px;bottom:56px;padding:10px 14px;border-radius:var(--p-radius);background:rgba(20,20,20,.85);color:#fff;font-size:14px;line-height:1;border:1px solid rgba(255,255,255,.35)}
.djp-pl-ad-skip[hidden]{display:none}
.djp-pl-ad-skip:disabled{opacity:.7;cursor:default}
.djp-pl-root[data-ad] .djp-pl-controls,.djp-pl-root[data-ad] .djp-pl-big,.djp-pl-root[data-ad] .djp-pl-spinner{opacity:0;pointer-events:none}

/* Pause ad, non-linear overlay, custom inserts (ads.js) */
.djp-pl-pausead,.djp-pl-custom{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:90%;max-height:80%;overflow:auto;z-index:7;background:rgba(20,20,20,.92);border-radius:var(--p-radius);padding:12px;color:#fff}
.djp-pl-pausead-close,.djp-pl-custom-close,.djp-pl-overlay-close,.djp-pl-adblock-close{position:absolute;right:2px;top:2px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center}
.djp-pl-overlay{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);max-width:92%;z-index:7;line-height:0}
.djp-pl-overlay-body{cursor:pointer}
.djp-pl-overlay-img{max-width:100%;height:auto;display:block}
.djp-pl-overlay-frame{border:0;max-width:100%}
.djp-pl-overlay-close{right:-10px;top:-10px}

/* Anti-adblock (adblock.js): ask banner and block wall */
.djp-pl-adblock-ask{position:absolute;left:8px;right:8px;top:8px;z-index:7;display:flex;align-items:center;gap:8px;padding:10px 36px 10px 12px;border-radius:var(--p-radius);background:rgba(20,20,20,.92);color:#fff;font-size:13px;line-height:1.35}
.djp-pl-adblock-wall{position:absolute;inset:0;z-index:8;background:rgba(0,0,0,.85);cursor:default}
.djp-pl-root[data-state="blocked"] .djp-pl-controls,.djp-pl-root[data-state="blocked"] .djp-pl-big,.djp-pl-root[data-state="blocked"] .djp-pl-spinner{opacity:0;pointer-events:none}
.djp-pl-root[data-state="blocked"] .djp-pl-msg{z-index:9}

/* Controls bar */
.djp-pl-controls{pointer-events:none;position:absolute;left:0;right:0;bottom:0;padding:24px 8px 4px;background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,0));transition:opacity .25s,transform .25s;z-index:5}
.djp-pl-root[data-hide] .djp-pl-controls{visibility:hidden;opacity:0;transform:translateY(6px);pointer-events:none}
.djp-pl-root[data-hide]{cursor:none}
.djp-pl-root[data-state="idle"] .djp-pl-controls,.djp-pl-root[data-state="error"] .djp-pl-controls{visibility:hidden;opacity:0;pointer-events:none}
.djp-pl-bar{display:flex;align-items:center;gap:2px;height:40px}
.djp-pl-btn{flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:6px;opacity:.9;transition:opacity .15s,background .15s}
.djp-pl-btn:hover,.djp-pl-btn:focus-visible{opacity:1;background:rgba(255,255,255,.12)}
.djp-pl-btn[hidden]{display:none}
.djp-pl-spacer{flex:1}
.djp-pl-time{padding:0 8px;font-variant-numeric:tabular-nums;white-space:nowrap;color:#eee}
.djp-pl-time span:first-child{color:#fff}

/* Прозрачный верх градиента не перехватывает тап по центральной Play.
   Скрытые контролы исключены через visibility, в том числе для рекламы. */
.djp-pl-controls .djp-pl-bar,.djp-pl-controls .djp-pl-progress{pointer-events:auto}
.djp-pl-root[data-ad] .djp-pl-controls,.djp-pl-root[data-state="blocked"] .djp-pl-controls{visibility:hidden}

/* Volume */
.djp-pl-vol{display:flex;align-items:center}
.djp-pl-range{-webkit-appearance:none;appearance:none;width:0;height:4px;margin:0;background:var(--p-bar);border-radius:2px;outline:none;opacity:0;transition:width .2s,opacity .2s,margin .2s;cursor:pointer}
.djp-pl-vol:hover .djp-pl-range,.djp-pl-range:focus-visible,.djp-pl-root[data-fs] .djp-pl-range{width:72px;opacity:1;margin-right:8px}
.djp-pl-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;border:0}
.djp-pl-range::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:0}
.djp-pl-range::-moz-range-track{height:4px;background:transparent}

/* Progress */
.djp-pl-progress{position:relative;height:16px;margin:0 8px;cursor:pointer;touch-action:none}
.djp-pl-progress::before{content:"";position:absolute;left:0;right:0;top:6px;height:4px;background:var(--p-bar);border-radius:2px;transition:height .1s,top .1s}
.djp-pl-buffer,.djp-pl-played{position:absolute;left:0;top:6px;height:4px;border-radius:2px;pointer-events:none;transition:height .1s,top .1s}
.djp-pl-buffer{background:rgba(255,255,255,.45);width:0}
.djp-pl-played{background:var(--p-accent);width:0}
.djp-pl-knob{position:absolute;top:8px;width:0;height:0;margin-left:0;pointer-events:none}
.djp-pl-knob::after{content:"";position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--p-accent);box-shadow:0 0 0 2px rgba(0,0,0,.25);transform:scale(0);transition:transform .12s}
.djp-pl-progress:hover::before,.djp-pl-root[data-scrubbing] .djp-pl-progress::before,.djp-pl-progress:hover .djp-pl-buffer,.djp-pl-progress:hover .djp-pl-played,.djp-pl-root[data-scrubbing] .djp-pl-buffer,.djp-pl-root[data-scrubbing] .djp-pl-played{height:6px;top:5px}
.djp-pl-progress:hover .djp-pl-knob::after,.djp-pl-root[data-scrubbing] .djp-pl-knob::after{transform:scale(1)}

/* Tooltip with time + sprite frame */
.djp-pl-tip{position:absolute;bottom:20px;left:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;z-index:2}
.djp-pl-tip[hidden]{display:none}
.djp-pl-tip-box{overflow:hidden;border-radius:4px;border:2px solid #fff;background:#111;box-shadow:0 2px 12px rgba(0,0,0,.5)}
.djp-pl-tip-box[hidden]{display:none}
.djp-pl-tip-img{transform-origin:0 0;background-repeat:no-repeat}
.djp-pl-tip-time{padding:2px 6px;border-radius:3px;background:rgba(0,0,0,.8);font-size:12px;font-variant-numeric:tabular-nums}

/* Settings menu (quality / speed) */
.djp-pl-menu{position:absolute;right:8px;bottom:64px;min-width:160px;max-height:calc(100% - 80px);overflow:auto;padding:6px 0;background:var(--p-bg);border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.5);z-index:7}
.djp-pl-menu[hidden]{display:none}
.djp-pl-menu-sec[hidden]{display:none}
.djp-pl-menu-sec+.djp-pl-menu-sec:not([hidden]){border-top:1px solid rgba(255,255,255,.1);margin-top:4px;padding-top:4px}
.djp-pl-menu-title{padding:6px 14px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#aaa}
.djp-pl-menu-item{display:flex;align-items:center;width:100%;padding:8px 14px 8px 10px;text-align:left;line-height:1.2;color:#eee;gap:6px}
.djp-pl-menu-item:hover,.djp-pl-menu-item:focus-visible{background:rgba(255,255,255,.1)}
.djp-pl-menu-item[aria-checked="true"]{color:#fff;font-weight:600}
.djp-pl-menu-check{width:16px;height:16px;flex:none;color:var(--p-accent);visibility:visible}
.djp-pl-menu-check svg{width:16px;height:16px}
.djp-pl-menu-item:not([aria-checked="true"])::before{content:"";width:16px;flex:none}
.djp-pl-menu-item[aria-checked="true"]::before{display:none}

/* Compact layout */
@media (max-width:480px){
  .djp-pl-big{width:56px;height:56px}
  .djp-pl-big svg{width:30px;height:30px}
  .djp-pl-bar{height:36px}
  .djp-pl-btn{width:36px;height:36px}
  .djp-pl-time{padding:0 4px;font-size:12px}
  .djp-pl-vol .djp-pl-range{display:none}
  .djp-pl-menu{right:4px;bottom:56px;min-width:140px}
}
@media (hover:none){
  .djp-pl-root[data-hide]{cursor:auto}
  .djp-pl-vol .djp-pl-range{display:none}
}

/* Узкий вертикальный плеер бывает и на широком экране: учитываем его ширину,
   чтобы время не выталкивало полноэкранную кнопку за край. */
@container (max-width:300px){
  .djp-pl-bar{flex-wrap:wrap;height:auto}
  .djp-pl-time{order:1;flex-basis:100%;text-align:center;padding:4px 0}
  .djp-pl-vol .djp-pl-range{display:none}
}

/* Shorts feed (shorts.js) */
.djp-sh-feed{height:100vh;height:100dvh;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;background:#000;outline:none;scrollbar-width:none}
.djp-sh-feed::-webkit-scrollbar{display:none}
.djp-sh-item{position:relative;height:100vh;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;background:#000;border-radius:0}
.djp-sh-item video{width:auto;height:100%;max-width:100%;aspect-ratio:9/16;margin:0 auto;object-fit:contain}
.djp-sh-item .djp-pl-controls{left:50%;transform:translateX(-50%);width:min(100%,56.25vh);width:min(100%,56.25dvh)}
.djp-sh-item[data-hide] .djp-pl-controls{transform:translate(-50%,6px)}
.djp-sh-item .djp-pl-big{display:none}
.djp-sh-item[data-active][data-state="paused"] .djp-pl-big{display:flex}
.djp-sh-unmute{position:absolute;top:16px;left:50%;transform:translateX(-50%);padding:8px 14px;border-radius:999px;background:rgba(0,0,0,.65);color:#fff;font-size:13px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:6}
.djp-sh-item[data-active][data-muted][data-state="playing"] .djp-sh-unmute{opacity:1}