/* הנגן המוטמע הקבוע (js/frame.js): בעמוד הצפייה על מקום הנגן, בשאר העמודים — חלון קטן בפינה */
.fp { position: absolute; z-index: 4; background: #000; overflow: hidden; }
.fp[hidden] { display: none; }
.fp-media, .fp-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* שיעור בנגן חיצוני: העמוד שלהם ברוחב טלפון קבוע, מוצג רק החלון של הנגן (המידות ב-frame.js) */
.fp-kh { position: absolute; top: 0; left: 0; overflow: hidden; transform-origin: 0 0; }
.fp-media .fp-kh iframe { inset: auto; }

/* כיסוי משלנו: לפני הניגון, בהשהיה ובסוף — במקום הסרטונים המוצעים */
.fp-cover { position: absolute; inset: 0; display: none; place-items: center; background: #000; }
.fp-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; opacity: .7; }
.fp-play {
  position: relative; width: 68px; height: 68px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(212, 173, 90, .95); color: var(--navy); box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}
.fp[data-kind="yt"]:is([data-state="start"], [data-state="ended"]) .fp-cover { display: grid; }
/* בהשהיה — פס הבקרות של הנגן נשאר פעיל (המשך, מיקום, מהירות, איכות, כתוביות) */
.fp[data-kind="yt"][data-state="paused"] .fp-cover { display: grid; bottom: 48px; }

/* שכבות שקופות מעל מה שמוביל החוצה */
.fp-block { position: absolute; display: none; background: transparent; }
.fp[data-kind="yt"] .fp-top { display: block; inset-inline: 0; top: 0; height: 60px; }
.fp[data-kind="yt"][data-state="bare"] .fp-bottom { display: block; inset-inline: 0; bottom: 0; height: 64px; }

/* מסך מלא — יושב על הלוגו בפינת פס הבקרות (בנגן בעברית: שמאל למטה) */
.fp-fs {
  position: absolute; z-index: 2; left: 0; bottom: 0; width: 84px; height: 48px; display: none; place-items: center;
  border: 0; background: linear-gradient(to right, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); color: #fff; cursor: pointer;
}
.fp[data-kind="yt"].fp-docked .fp-fs, .fp[data-kind="yt"].fp-is-fs .fp-fs { display: grid; }
.fp-fs svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }

/* כפתור הקיפול (חץ למטה, כמו ביוטיוב) — פינה שמאלית עליונה, התפריט מימין */
.fp-collapse, .a-collapse {
  position: absolute; z-index: 3; top: 6px; left: 6px; width: 44px; height: 44px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0, 0, 0, .35); color: #fff; cursor: pointer;
}
.fp-collapse:hover, .a-collapse:hover { color: var(--gold-2); }
.fp:not(.fp-docked) .fp-collapse, .fp.fp-is-fs .fp-collapse { display: none; }

/* החלון הקטן */
.fp-mini-hit, .fp-close { display: none; }
.fp.fp-mini {
  position: fixed; z-index: 28; top: auto; left: auto;
  inset-inline-start: max(12px, env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(240px, 56vw); aspect-ratio: 16 / 9; border-radius: 12px;
  border: 1px solid rgba(212, 173, 90, .55); box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
}
body.has-player .fp.fp-mini { bottom: calc(86px + env(safe-area-inset-bottom)); }
.fp-mini .fp-media { pointer-events: none; }
.fp-mini .fp-mini-hit { display: block; position: absolute; inset: 0; z-index: 4; border: 0; background: transparent; cursor: pointer; }
.fp-mini .fp-close {
  display: grid; place-items: center; position: absolute; z-index: 5; top: 4px; left: 4px; width: 30px; height: 30px;
  border: 0; border-radius: 50%; background: rgba(0, 0, 0, .7); color: #fff; cursor: pointer;
}
.fp-mini .fp-close:hover { color: var(--gold-2); }
.fp-mini .fp-play { width: 40px; height: 40px; }
.fp-mini .fp-play svg { width: 24px; height: 24px; }
.fp-mini[data-state="paused"] .fp-cover { bottom: 0; }

/* מסך מלא בתוך הדף (אייפון, שבו אין מסך מלא לרכיב) */
.fp.fp-fake-fs { position: fixed !important; inset: 0 !important; width: auto !important; height: auto !important; z-index: 70; border-radius: 0; }
body.fp-lock { overflow: hidden; }
.fp:fullscreen { width: 100% !important; height: 100% !important; }

/* סימון מעל/מתחת לנגן כששיעור מתנגן בנגן חיצוני */
.w-ext-note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 16px 0; color: var(--ink-soft); font-size: .8rem; line-height: 1.5; }
.w-ext-note::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .5em; border-radius: 50%; background: var(--gold); }