/*! CodaTech Video Player 1.2.2 */
.arp,.arp *{box-sizing:border-box}
.arp{
	--arp-track:rgba(255,255,255,.22);
	position:relative;display:block;width:100%;
	max-width:var(--arp-w,100%);
	aspect-ratio:var(--arp-ratio,16/9);
	margin:1.5em auto;
	background:var(--arp-bg,#0b0d12);
	color:var(--arp-text,#fff);
	border-radius:var(--arp-radius,12px);
	overflow:hidden;isolation:isolate;direction:ltr;
	font:500 12.5px/1.4 system-ui,-apple-system,"Segoe UI",Vazirmatn,Tahoma,sans-serif;
	letter-spacing:.01em;
	-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
	box-shadow:0 1px 2px rgba(0,0,0,.12),0 18px 36px -22px rgba(0,0,0,.55);outline:0
}
.arp:focus-visible{outline:2px solid var(--arp-primary,#6d5efc);outline-offset:3px}

.arp .arp-v{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;object-fit:contain;background:transparent;display:block;border-radius:0}
.arp .arp-v::cue{background:rgba(0,0,0,.7);color:#fff;font-family:inherit}
.arp .arp-poster{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;display:block;border-radius:0}
.arp iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:5}
.arp.is-fs{max-width:none;width:100%;height:100%;margin:0;border-radius:0;aspect-ratio:auto;box-shadow:none}

/* ---- layers ---- */
.arp .arp-hit{position:absolute;inset:0;z-index:1;cursor:pointer}

.arp .arp-top{
	position:absolute;z-index:2;top:0;left:0;right:0;display:flex;justify-content:space-between;gap:16px;
	padding:14px 18px 40px;background:linear-gradient(to bottom,rgba(0,0,0,.42),transparent);
	pointer-events:none;transition:opacity .3s
}
.arp .arp-ttl{max-width:76%;font-size:14px;font-weight:600;unicode-bidi:plaintext;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arp .arp-wm{margin-left:auto;font-size:11.5px;font-weight:600;opacity:.55;unicode-bidi:plaintext}

/* ---- big play: quiet glass disc, fills with the accent on hover ---- */
.arp button.arp-big{
	position:absolute;z-index:2;top:50%;left:50%;width:68px;height:68px;margin:-34px 0 0 -34px;padding:0;
	border:1px solid rgba(255,255,255,.3);border-radius:50%;
	background:rgba(255,255,255,.12);color:#fff;
	-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);
	display:flex;align-items:center;justify-content:center;cursor:pointer;
	box-shadow:0 10px 30px -8px rgba(0,0,0,.4);min-height:0;line-height:1;text-shadow:none;
	transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s,border-color .2s,opacity .2s
}
.arp button.arp-big:hover,.arp button.arp-big:focus-visible{background:var(--arp-primary,#6d5efc);border-color:transparent;transform:scale(1.06);color:#fff}
.arp button.arp-big:focus-visible{outline:2px solid #fff;outline-offset:4px}
.arp .arp-big svg{width:26px;height:26px;margin-left:2px}
.arp.is-ended .arp-big svg{margin:0}
.arp.is-playing .arp-big,.arp.is-error .arp-big{opacity:0;transform:scale(1.25);pointer-events:none}
.arp.arp-no-big:not(.arp-embed) .arp-big{display:none}
.arp.arp-embed{cursor:pointer}

/* ---- spinner / toast ---- */
.arp .arp-spin{position:absolute;z-index:2;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border:2px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;opacity:0;pointer-events:none;transition:opacity .2s}
.arp.is-loading .arp-spin{opacity:1;animation:arp-r .75s linear infinite}
@keyframes arp-r{to{transform:rotate(360deg)}}

.arp .arp-toast{
	position:absolute;z-index:4;top:16%;left:50%;transform:translate(-50%,-4px);padding:6px 14px;border-radius:8px;
	background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-weight:600;white-space:nowrap;
	opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;font-variant-numeric:tabular-nums;unicode-bidi:plaintext
}
.arp .arp-toast.show{opacity:1;transform:translate(-50%,0)}

/* ---- hairline progress, visible only while the controls are hidden ---- */
.arp .arp-mini{position:absolute;z-index:2;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.16);opacity:0;pointer-events:none;transition:opacity .3s}
.arp .arp-mini::after{content:"";position:absolute;inset:0;background:var(--arp-primary,#6d5efc);transform-origin:0 50%;transform:scaleX(var(--pn,0));transition:transform .25s linear}
.arp.is-playing.is-idle .arp-mini{opacity:1}

/* ---- control bar ---- */
.arp .arp-bar{
	position:absolute;z-index:3;left:0;right:0;bottom:0;padding:36px 14px 6px;
	transition:opacity .3s,transform .3s,visibility .3s
}
.arp .arp-bar::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:linear-gradient(to top,var(--arp-ctrl,#000),transparent);opacity:.72}
.arp.arp-s-solid .arp-bar{padding-top:4px}
.arp.arp-s-solid .arp-bar::before{background:var(--arp-ctrl,#000);opacity:1}
.arp.arp-s-glass .arp-bar{left:10px;right:10px;bottom:10px;padding:4px 10px 2px;border-radius:calc(var(--arp-radius,12px)*.75)}
.arp.arp-s-glass .arp-bar::before{background:var(--arp-ctrl,#000);opacity:.46;-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}

.arp:not(.is-started) .arp-bar{opacity:0;visibility:hidden;transform:translateY(6px)}
.arp.is-playing.is-idle{cursor:none}
.arp.is-playing.is-idle .arp-bar{opacity:0;transform:translateY(8px);pointer-events:none}
.arp.is-playing.is-idle .arp-top{opacity:0}

/* ---- progress ---- */
.arp .arp-prog{position:relative;height:16px;display:flex;align-items:center;cursor:pointer;touch-action:none;outline:0}
.arp .arp-trk{position:relative;width:100%;height:3px;border-radius:3px;background:var(--arp-track);transition:height .15s}
.arp .arp-prog:hover .arp-trk,.arp .arp-prog:focus-visible .arp-trk,.arp.is-seeking .arp-trk{height:5px}
.arp .arp-trk i{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:inherit;transform-origin:0 50%}
.arp .arp-buf{background:rgba(255,255,255,.28);transform:scaleX(var(--bn,0))}
.arp .arp-fill{background:var(--arp-primary,#6d5efc);transform:scaleX(var(--pn,0));transition:transform .25s linear}
.arp.is-seeking .arp-fill,.arp.is-seeking .arp-knob{transition:none}
.arp .arp-trk .arp-knob{
	width:12px;height:12px;top:50%;left:calc(var(--pn,0)*100%);border-radius:50%;background:#fff;
	transform:translate(-50%,-50%) scale(0);transform-origin:50% 50%;box-shadow:0 1px 4px rgba(0,0,0,.4);
	transition:transform .15s,left .25s linear
}
.arp .arp-prog:hover .arp-knob,.arp .arp-prog:focus-visible .arp-knob,.arp.is-seeking .arp-knob{transform:translate(-50%,-50%) scale(1)}
.arp .arp-tip{
	position:absolute;bottom:20px;left:0;transform:translateX(-50%);padding:2px 7px;border-radius:5px;background:rgba(0,0,0,.78);
	color:#fff;font-size:11.5px;opacity:0;pointer-events:none;transition:opacity .12s;font-variant-numeric:tabular-nums
}
.arp .arp-prog:hover .arp-tip,.arp.is-seeking .arp-tip{opacity:1}

/* ---- buttons ---- */
.arp .arp-row{display:flex;align-items:center;gap:0;min-height:38px}
.arp .arp-sp{flex:1}
.arp button.arp-b{
	appearance:none;-webkit-appearance:none;position:relative;width:34px;height:34px;min-height:0;margin:0;padding:0;border:0;border-radius:8px;
	background:transparent;color:inherit;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
	opacity:.88;box-shadow:none;text-shadow:none;line-height:1;transition:background .15s,opacity .15s,transform .1s
}
.arp button.arp-b:hover{background:rgba(255,255,255,.12);opacity:1;color:inherit}
.arp button.arp-b:active{transform:scale(.92)}
.arp button.arp-b:focus-visible{outline:2px solid var(--arp-primary,#6d5efc);outline-offset:-2px;opacity:1}
.arp .arp-b svg{width:20px;height:20px;pointer-events:none}
.arp button.arp-b.on{color:var(--arp-primary,#6d5efc);opacity:1}

.arp .arp-time{padding:0 8px;white-space:nowrap;font-variant-numeric:tabular-nums;opacity:.9}
.arp .arp-sep{margin:0 5px;opacity:.45}
.arp .arp-dur{opacity:.7}

/* volume */
.arp .arp-vol{display:flex;align-items:center}
.arp .arp-vr{
	-webkit-appearance:none;appearance:none;width:0;height:3px;margin:0;padding:0;border:0;border-radius:3px;opacity:0;cursor:pointer;outline:0;
	background:linear-gradient(to right,#fff var(--vp,100%),var(--arp-track) var(--vp,100%));
	transition:width .2s,opacity .2s,margin .2s
}
.arp .arp-vol:hover .arp-vr,.arp .arp-vol:focus-within .arp-vr{width:64px;opacity:1;margin:0 10px 0 2px}
.arp .arp-vr::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:#fff;border:0}
.arp .arp-vr::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#fff;border:0}

/* speed */
.arp .arp-sw{position:relative}
.arp button.arp-speed{width:auto;min-width:38px;padding:0 8px;font:600 12.5px/1 inherit;font-family:inherit;font-variant-numeric:tabular-nums}
.arp .arp-menu{
	position:absolute;bottom:calc(100% + 10px);right:0;min-width:96px;padding:4px;border-radius:10px;display:none;direction:rtl;
	background:rgba(16,18,24,.92);border:1px solid rgba(255,255,255,.08);
	-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 14px 34px rgba(0,0,0,.45)
}
.arp .arp-menu.open{display:block}
.arp .arp-menu button{
	appearance:none;display:block;width:100%;margin:0;padding:7px 12px;border:0;border-radius:7px;background:transparent;color:rgba(255,255,255,.85);
	font:500 12.5px/1.3 inherit;font-family:inherit;text-align:center;cursor:pointer;box-shadow:none;min-height:0;font-variant-numeric:tabular-nums
}
.arp .arp-menu button:hover{background:rgba(255,255,255,.08);color:#fff}
.arp .arp-menu button.on{color:var(--arp-primary,#6d5efc);background:rgba(255,255,255,.08);font-weight:700}

/* ---- toggled-off controls ---- */
.arp.arp-no-time .arp-time,
.arp.arp-no-volume .arp-vol,
.arp.arp-no-speed .arp-sw,
.arp.arp-no-pip .arp-pip,
.arp.arp-no-fs .arp-fs,
.arp.arp-no-skip .arp-skip{display:none}

/* ---- small screens / touch ---- */
@media (max-width:560px){
	.arp .arp-skip,.arp .arp-sep,.arp .arp-dur{display:none}
	.arp button.arp-big{width:56px;height:56px;margin:-28px 0 0 -28px}
	.arp .arp-big svg{width:22px;height:22px}
	.arp .arp-bar{padding:28px 10px 2px}
	.arp .arp-ttl{font-size:12.5px}
}
@media (hover:none){.arp .arp-vr{display:none}}
@media (prefers-reduced-motion:reduce){
	.arp *,.arp *::before,.arp *::after{transition:none!important;animation:none!important}
	.arp.is-loading .arp-spin{animation:arp-r 1.6s linear infinite!important}
}
