/* مشغّل صوت Drive (assets/drive-audio.js). كل القواعد تحت .rw-aud فلا تمسّ بقية الموقع. */
.rw-aud { --aud-a: var(--rw-primary, #0a6f8f); position: relative; width: 100%; max-width: 100%; box-sizing: border-box;
	background: var(--rw-surface, #fff); color: var(--rw-text, #14303b); border: 1px solid var(--rw-border, #d9e8ee); border-radius: 14px; overflow: hidden; }
.rw-aud [hidden] { display: none !important; }
.rw-aud audio { display: block; width: 100%; }
.rw-aud--on audio { display: none; }

.rw-aud__ui { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px 18px 16px; direction: ltr; }
.rw-aud__seek { display: flex; width: 100%; align-items: center; gap: 12px; min-width: 0; }
.rw-aud__t { flex: none; min-width: 40px; white-space: nowrap; text-align: center; color: var(--rw-muted, #52707c); font-size: .82rem; font-variant-numeric: tabular-nums; }

.rw-aud__wave { position: relative; flex: 1; min-width: 0; height: 48px; cursor: pointer; touch-action: none; border-radius: 8px; }
.rw-aud__wave:focus-visible { outline: 2px solid var(--aud-a); outline-offset: 3px; }
.rw-aud__layer { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; pointer-events: none; overflow: hidden; }
.rw-aud__layer i { flex: 1 1 0; min-width: 0; border-radius: 2px; background: currentColor; }
.rw-aud__base { color: #c5d6dd; color: color-mix(in srgb, var(--rw-muted, #52707c) 35%, var(--rw-surface, #fff)); }
.rw-aud__fill { color: var(--aud-a); clip-path: inset(0 calc(100% - var(--p, 0) * 100%) 0 0); }
.rw-aud__tip { position: absolute; bottom: calc(100% + 6px); left: 0; transform: translateX(-50%); padding: 2px 7px; border-radius: 6px; font-size: .72rem; line-height: 1.5;
	background: var(--rw-text, #14303b); color: var(--rw-surface, #fff); pointer-events: none; opacity: 0; white-space: nowrap; }
@media (hover: hover) { .rw-aud__wave:hover .rw-aud__tip:not(:empty) { opacity: 1; } }

.rw-aud__ctrl { display: flex; align-items: center; justify-content: center; gap: 8px; }
.rw-aud__btn { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; display: inline-grid; place-items: center; cursor: pointer;
	background: transparent; color: inherit; transition: background .15s, transform .15s; -webkit-tap-highlight-color: transparent; }
.rw-aud__btn:hover { background: rgba(10, 111, 143, .1); }
.rw-aud__btn:focus-visible { outline: 2px solid var(--aud-a); outline-offset: 2px; }
.rw-aud__btn svg { width: 22px; height: 22px; }
.rw-aud__main { width: 54px; height: 54px; margin-inline: 4px; background: var(--rw-accent, #e8ac40); color: var(--rw-on-accent, #3a2a08); }
.rw-aud__main:hover { background: var(--rw-btn-hover-bg, #cf9528); transform: scale(1.06); }
.rw-aud__main svg { width: 24px; height: 24px; }
.rw-aud__rate { width: auto; min-width: 52px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--rw-border, #d9e8ee); font-weight: 800; font-size: .85rem; direction: ltr; unicode-bidi: isolate; }
.rw-aud__spacer { width: 52px; flex: none; }
.rw-aud.is-loading .rw-aud__main { animation: rw-aud-breathe 1s ease-in-out infinite; }
@keyframes rw-aud-breathe { 50% { opacity: .55; } }

/* مشغّل Drive المضمّن (الخطة البديلة) */
.rw-aud__embed iframe { display: block; width: 100%; height: 160px; border: 0; background: transparent; }
.rw-aud.is-error .rw-aud__t[data-r="dur"] { color: #b3261e; }

/* في الدروس يعلو زرُّ التنزيل زاويةَ المشغّل العلوية اليسرى: نفسح له مكانًا فلا يغطي العدّاد */
.rw-lesson__media .rw-aud .rw-aud__ui { padding-top: 62px; }

@media (max-width: 600px) {
	.rw-lesson__media .rw-aud .rw-aud__ui { padding-top: 54px; }
	.rw-aud__ui { padding: 14px 12px 12px; gap: 10px; }
	.rw-aud__seek { gap: 8px; }
	.rw-aud__t { min-width: 36px; font-size: .78rem; }
	.rw-aud__wave { height: 40px; }
	.rw-aud__layer { gap: 1px; } /* الشريط ضيّق: فراغات أقل كي لا تختفي أعمدة الموجة */
	.rw-aud__ctrl { gap: 4px; }
	.rw-aud__btn { width: 40px; height: 40px; }
	.rw-aud__main { width: 50px; height: 50px; margin-inline: 4px; }
	.rw-aud__rate { min-width: 46px; padding: 0 10px; }
	.rw-aud__spacer { width: 46px; }
}
@media (prefers-reduced-motion: reduce) { .rw-aud.is-loading .rw-aud__main { animation: none; } }