/* =================================================================
   مشغّل الأعمال (player.js) — منقول من مشغّل شدو، بألوان الموقع: ذهبي #FFC83D على أسود
   ================================================================= */
.sp{--fg:#F4F4F0;--lit:#FFC83D;--muted:rgba(244,244,240,.55);--font:"Almarai",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;--ease:cubic-bezier(.22,.7,.18,1);
	position:absolute;inset:0;overflow:hidden;background:#000;color:var(--fg);font-family:var(--font);
	container-type:inline-size;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;outline:none}
.sp .sp-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}   /* .sp prefix beats .ws-player video{cover} */
.sp:not(.sp--ui)[data-state="playing"]{cursor:none}

/* bottom scrim — only while the controls are up */
.sp-shade{position:absolute;inset:auto 0 0 0;height:46%;pointer-events:none;opacity:0;
	background:linear-gradient(to top,rgba(0,0,0,.74),rgba(0,0,0,.28) 55%,rgba(0,0,0,0));transition:opacity .5s var(--ease)}
.sp--ui .sp-shade,.sp:not([data-state="playing"]) .sp-shade{opacity:1}

/* big centre button (play · replay) — same language as the consult button */
.sp-big{position:absolute;left:50%;top:50%;z-index:2;width:clamp(62px,9cqi,86px);aspect-ratio:1;border-radius:50%;
	display:grid;place-items:center;cursor:pointer;color:var(--lit);
	background:rgba(12,11,9,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
	border:1px solid rgba(255,200,61,.55);box-shadow:0 18px 50px rgba(0,0,0,.45);
	transform:translate(-50%,-50%);transition:background .35s,color .35s,border-color .35s,opacity .45s var(--ease),transform .5s var(--ease)}
.sp-big svg{width:36%;height:36%}
.sp-big svg .f{fill:currentColor}
.sp-big svg path:not(.f){fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sp-big:hover{background:var(--lit);color:#0a0a0a;border-color:var(--lit);transform:translate(-50%,-50%) scale(1.06)}
.sp[data-state="playing"] .sp-big,.sp--loading .sp-big{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.88)}

/* loading — the site's star, turning */
.sp-load{position:absolute;left:50%;top:50%;z-index:2;width:30px;height:30px;margin:-15px 0 0 -15px;color:var(--lit);
	opacity:0;transition:opacity .3s;pointer-events:none}
.sp-load svg{width:100%;height:100%;fill:currentColor;filter:drop-shadow(0 0 10px rgba(255,200,61,.55))}
.sp--loading .sp-load{opacity:1}
.sp--loading .sp-load svg{animation:sp-turn 1.6s var(--ease) infinite}
@keyframes sp-turn{0%{transform:rotate(0) scale(.82)}50%{transform:rotate(180deg) scale(1.06)}100%{transform:rotate(360deg) scale(.82)}}

.sp-msg{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
	background:rgba(6,6,6,.78);font-size:15px;color:var(--fg);direction:rtl}
.sp-msg[hidden]{display:none}
.sp-retry{font:inherit;font-size:13px;color:var(--lit);background:none;border:1px solid rgba(255,200,61,.45);border-radius:999px;padding:9px 18px;cursor:pointer}
.sp-retry:hover{background:var(--lit);color:#0a0a0a}

/* control dock — floating glass bar (same language as the consult button) */
/* the fade lives on the dock itself: an ancestor with opacity < 1 switches backdrop-filter off,
   so fading a wrapper made the blur pop in only at the end */
.sp-ui{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 clamp(10px,2cqi,20px) clamp(10px,2cqi,20px);pointer-events:none}
.sp-dock{opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.sp--ui .sp-dock,.sp:not([data-state="playing"]):not([data-state="idle"]) .sp-dock{opacity:1;transform:none;pointer-events:auto}
.sp-hit{position:absolute;inset:0;z-index:1;-webkit-tap-highlight-color:transparent}
.sp-dock{display:flex;align-items:center;gap:clamp(4px,1cqi,10px);height:52px;padding:0 10px 0 6px;border-radius:16px;
	background:rgba(12,11,9,.5);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
	box-shadow:0 18px 50px rgba(0,0,0,.45)}
.sp-shade{height:34%}

/* buttons + icons */
.sp-btn{position:relative;width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:12px;border:0;background:none;
	color:var(--fg);cursor:pointer;transition:color .3s,background .3s}
.sp-btn::before{content:"";position:absolute;inset:3px;border-radius:10px;background:radial-gradient(circle,rgba(255,200,61,.16),rgba(255,200,61,0) 70%);
	opacity:0;transform:scale(.6);transition:opacity .35s,transform .45s var(--ease)}
.sp-btn:hover{color:var(--lit)}
.sp-btn:hover::before{opacity:1;transform:none}
.sp-btn svg{position:relative;width:19px;height:19px;overflow:visible}
.sp-btn svg .f{fill:currentColor}
.sp-btn svg path:not(.f){fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sp-toggle svg{width:20px;height:20px;animation:sp-pop .35s var(--ease)}
@keyframes sp-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.sp-btn:focus-visible,.sp-qbtn:focus-visible,.sp-big:focus-visible,.sp-track:focus-visible{outline:1px solid var(--lit);outline-offset:2px}

/* volume icon — waves follow the level */
.sp-mute svg .w1,.sp-mute svg .w2,.sp-mute svg .x{transition:opacity .3s,transform .4s var(--ease);transform-origin:12px 12px}
.sp-mute svg .x{opacity:0;transform:scale(.4)}
.sp-mute[data-level="1"] svg .w2{opacity:0;transform:scale(.7)}
.sp-mute[data-level="muted"] svg .w1,.sp-mute[data-level="muted"] svg .w2{opacity:0;transform:scale(.6)}
.sp-mute[data-level="muted"] svg .x{opacity:1;transform:none}

/* fullscreen icon — corners breathe outward on hover (inward when leaving fullscreen) */
.sp-fs svg path{transition:transform .4s var(--ease)}
.sp-fs:hover .c1{transform:translate(-1.5px,-1.5px)}
.sp-fs:hover .c2{transform:translate(1.5px,-1.5px)}
.sp-fs:hover .c3{transform:translate(1.5px,1.5px)}
.sp-fs:hover .c4{transform:translate(-1.5px,1.5px)}
.sp--fs .sp-fs:hover .c1{transform:translate(1.5px,1.5px)}
.sp--fs .sp-fs:hover .c2{transform:translate(-1.5px,1.5px)}
.sp--fs .sp-fs:hover .c3{transform:translate(-1.5px,-1.5px)}
.sp--fs .sp-fs:hover .c4{transform:translate(1.5px,-1.5px)}

/* times at both ends of the timeline */
.sp-t{flex:none;min-width:38px;font:500 12px/1 var(--mono);letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--fg);text-align:center}
.sp-dur{color:var(--muted)}
.sp-div{flex:none;width:1px;height:20px;margin:0 2px;background:rgba(240,237,230,.14)}

/* timeline */
.sp-track{position:relative;flex:1;min-width:60px;height:36px;display:flex;align-items:center;cursor:pointer;touch-action:none;outline:none}
.sp-rail{position:relative;width:100%;height:3px;border-radius:3px;background:rgba(240,237,230,.13);overflow:hidden;transition:height .3s var(--ease)}
.sp-track:hover .sp-rail,.sp--drag .sp-rail{height:5px}
.sp-buf,.sp-done{position:absolute;left:0;top:0;bottom:0;width:0}
.sp-buf{background:rgba(240,237,230,.2);transition:width .4s linear}
.sp-done{background:linear-gradient(90deg,rgba(255,200,61,.25),rgba(255,200,61,.85) 70%,#FFE3A3)}
.sp-knob{position:absolute;top:50%;left:0;width:15px;height:15px;color:#FFE3A3;pointer-events:none;
	transform:translate(-50%,-50%) scale(.72);transition:transform .45s var(--ease),filter .3s}
.sp-knob svg{display:block;width:100%;height:100%;fill:currentColor;filter:drop-shadow(0 0 6px rgba(255,200,61,.75))}
.sp-track:hover .sp-knob{transform:translate(-50%,-50%) scale(1)}
.sp--drag .sp-knob{transform:translate(-50%,-50%) scale(1.25) rotate(90deg)}
.sp-hair{position:absolute;top:50%;left:0;width:1px;height:16px;margin-top:-8px;background:rgba(240,237,230,.55);pointer-events:none;opacity:0;transition:opacity .2s}
.sp-track:hover .sp-hair{opacity:1}
.sp--drag .sp-hair{opacity:0}
.sp-tip{position:absolute;bottom:34px;left:0;transform:translateX(-50%);pointer-events:none;white-space:nowrap;
	font:500 11px/1 var(--mono);letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--fg);padding:7px 9px;border-radius:8px;
	background:rgba(12,11,9,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
	opacity:0;transform:translate(-50%,4px);transition:opacity .2s,transform .3s var(--ease)}
.sp-track:hover .sp-tip,.sp--drag .sp-tip{opacity:1;transform:translate(-50%,0)}

/* quality chip */
.sp-q{position:relative;flex:none;display:flex;align-items:center}   /* flex, not inline: a line box added descender space and pushed the chip off-centre */
.sp-q[hidden]{display:none}
.sp-qbtn{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 7px;border-radius:6px;cursor:pointer;white-space:nowrap;overflow:hidden;box-sizing:border-box;
	background:rgba(255,255,255,.07);border:0;color:var(--fg);transition:width .45s var(--ease),color .3s,background .3s}
.sp-qbtn:hover,.sp-q.open .sp-qbtn{color:var(--lit);background:rgba(255,200,61,.12)}
.sp-qa{font:400 12px/1 var(--font);transform:translateY(-2px)}   /* Arabic ink sits low (ي tail, dots) — measured, re-centred */
.sp-qr{font:600 10px/1 var(--mono);letter-spacing:.05em;color:var(--muted)}
.sp-qbtn:hover .sp-qr{color:inherit}
.sp-qr.is-4k{padding:2px 4px;border-radius:3px;color:#0a0a0a;background:var(--lit)}
.sp-menu{position:absolute;bottom:44px;right:-6px;min-width:136px;padding:6px;border-radius:14px;
	background:rgba(14,13,11,.9);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
	box-shadow:0 24px 60px rgba(0,0,0,.6);
	opacity:0;visibility:hidden;transform:translateY(8px) scale(.97);transform-origin:bottom right;transition:opacity .25s,transform .3s var(--ease),visibility .25s}
.sp-q.open .sp-menu{opacity:1;visibility:visible;transform:none}
.sp-menu button{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;height:34px;padding:0 10px;border:0;border-radius:9px;
	background:none;color:var(--fg);cursor:pointer;font:500 12px/1 var(--mono);letter-spacing:.06em;direction:rtl}
.sp-menu button:first-child{font-family:var(--font);letter-spacing:0}
.sp-menu button:hover{background:rgba(255,255,255,.06);color:var(--lit)}
.sp-menu button[aria-checked="true"]{color:var(--lit)}
.sp-menu button[aria-checked="true"]::after{content:"";width:10px;height:10px;flex:none;background:currentColor;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C12.5 7.5 16.5 11.5 22 12C16.5 12.5 12.5 16.5 12 22C11.5 16.5 7.5 12.5 2 12C7.5 11.5 11.5 7.5 12 2Z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C12.5 7.5 16.5 11.5 22 12C16.5 12.5 12.5 16.5 12 22C11.5 16.5 7.5 12.5 2 12C7.5 11.5 11.5 7.5 12 2Z'/%3E%3C/svg%3E") center/contain no-repeat}

/* volume — folded; opens on hover */
.sp-vol{display:flex;align-items:center;flex:none}
.sp-volr{--v:100%;-webkit-appearance:none;appearance:none;width:0;height:24px;margin:0;background:none;opacity:0;cursor:pointer;
	transition:width .4s var(--ease),opacity .3s,margin .4s var(--ease)}
.sp-vol:hover .sp-volr,.sp-volr:focus-visible{width:76px;opacity:1;margin:0 8px 0 0}
.sp-volr::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--lit) var(--v),rgba(240,237,230,.18) var(--v))}
.sp-volr::-moz-range-track{height:3px;border-radius:3px;background:rgba(240,237,230,.18)}
.sp-volr::-moz-range-progress{height:3px;border-radius:3px;background:var(--lit)}
.sp-volr::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;margin-top:-4px;border-radius:50%;background:#FFE3A3;border:0;box-shadow:0 0 8px rgba(255,200,61,.7)}
.sp-volr::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#FFE3A3;border:0;box-shadow:0 0 8px rgba(255,200,61,.7)}

/* fullscreen */
.sp--fs .sp-ui{padding:0 max(28px,4cqi) max(24px,3cqi)}
.sp--fs .sp-dock{height:58px;max-width:1100px;margin:0 auto}

/* small frames (portrait works, phones) */
/* narrow frames (portrait works, phones): one compact row — duration hidden (the drag tip shows times),
   quality shrinks to its number. `.sp` prefix out-ranks the touch sizes below. */
@container (max-width:520px){
	.sp .sp-ui{padding:0 8px 8px}
	.sp .sp-dock{height:44px;gap:1px;padding:0 6px 0 2px;border-radius:13px}
	.sp .sp-btn{width:34px;height:40px}
	.sp .sp-btn svg{width:17px;height:17px}
	.sp .sp-toggle svg{width:18px;height:18px}
	.sp .sp-t{min-width:0;font-size:11px;padding:0 3px}
	.sp .sp-dur,.sp .sp-div,.sp .sp-qa,.sp .sp-volr{display:none}
	.sp .sp-track{min-width:40px;height:40px}
	.sp .sp-qbtn{height:18px;padding:0 5px;border-radius:5px}
	.sp .sp-tip{bottom:30px}
}
@container (max-width:280px){
	.sp .sp-vol{display:none}
}
@media (hover:none){
	.sp-volr{display:none}
	.sp-btn{width:42px;height:42px}
	.sp-knob{transform:translate(-50%,-50%) scale(1)}
}
@media (prefers-reduced-motion:reduce){
	.sp--loading .sp-load svg{animation-duration:4s}
}

/* ---- motion for every change (nothing jumps) ---- */
@keyframes sp-fade{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:none}}
@keyframes sp-star{from{opacity:0;transform:scale(.3) rotate(-90deg)}to{opacity:1;transform:none}}
.sp-qbtn>span{animation:sp-fade .45s var(--ease) both}          /* quality label cross-fades as the chip resizes */
.sp-q.is-new{animation:sp-fade .5s var(--ease) both}
.sp-big svg,.sp-fs svg{animation:sp-pop .35s var(--ease)}       /* icon swaps (play ↔ replay, enter ↔ exit fullscreen) */
.sp-menu button[aria-checked="true"]::after{animation:sp-star .45s var(--ease) both}
.sp-msg:not([hidden]){animation:sp-fade .4s var(--ease)}
.sp--jump .sp-done{transition:width .34s var(--ease)}            /* click / arrow-key seeks glide; dragging stays 1:1 */
.sp--jump .sp-knob{transition:left .34s var(--ease),transform .45s var(--ease)}
@media (prefers-reduced-motion:reduce){
	.sp-qbtn>span,.sp-q.is-new,.sp-big svg,.sp-fs svg,.sp-toggle svg,.sp-menu button::after,.sp-msg{animation:none}
	.sp-qbtn,.sp--jump .sp-done,.sp--jump .sp-knob{transition:none}
}