/* A video guide playing in place (assets/guide-player.js; Figma 13519-2 "Playing", "Playback error"):
   the screen with the captions in their box and the dark bar -- pause, the time, the progress in the
   brand's yellow, the captions switch -- then the title, its line and the chapters, the one playing
   marked. Then the guides on narrower screens. */

.cil-player { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 96px; animation: cil-player-in .4s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes cil-player-in { from { opacity: 0; transform: translateY(8px); } }
.cil-player__screen { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 16px; background: var(--cil-black); }
.cil-player__media, .cil-player__media iframe, .cil-player__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.cil-player__video { object-fit: contain; background: var(--cil-black); cursor: pointer; }
.cil-player__caption { position: absolute; bottom: 66px; left: 50%; max-width: calc(100% - 48px); margin: 0; padding: 6px 12px; border-radius: 6px;
    background: var(--cil-black); color: var(--cil-white); font-size: 16px; line-height: 1.2; text-align: center; transform: translateX(-50%); pointer-events: none; }
.cil-player__caption[hidden] { display: none; }
.cil-player__bar { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--cil-black); }
.cil-player__bar[hidden] { display: none; }
.cil-help :is(.cil-player__toggle, .cil-player__cc, .cil-player__mute, .cil-player__full) { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin: -4px; padding: 0;
    border: 0; border-radius: 6px; background: none; cursor: pointer; }
.cil-help :is(.cil-player__toggle, .cil-player__cc, .cil-player__mute, .cil-player__full):is(:hover, :focus-visible) { background: color-mix(in srgb, var(--cil-white) 14%, transparent); outline: none; }
.cil-help .cil-player__cc.is-off { opacity: .5; }
.cil-player__cc[hidden], .cil-player__full[hidden] { display: none; }
/* The sound: the speaker, its level as a short track of its own, and the level as a percentage. */
.cil-player__volume { display: flex; flex: none; align-items: center; gap: 10px; }
.cil-player__track.cil-player__level { flex: none; width: 72px; }
.cil-player__percent { flex: none; min-width: 4ch; color: var(--cil-white); font-size: 14px; font-variant-numeric: tabular-nums; text-align: center; }
.cil-player__time { flex: none; color: var(--cil-white); font-size: 14px; font-variant-numeric: tabular-nums; }
/* The progress: a 4px track, the part played in the brand's yellow, filling in the reading direction
   (right to left in Hebrew and Arabic: the bar follows the page, pause at its start). */
.cil-player__track { --p: 0%; --fill: to right; flex: 1; min-width: 0; height: 16px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.cil-player__track::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(var(--fill), var(--cil-yellow) var(--p), var(--cil-black-light-4) var(--p)); }
.cil-player__track::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(var(--fill), var(--cil-yellow) var(--p), var(--cil-black-light-4) var(--p)); }
.cil-player__track::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--cil-yellow); -webkit-appearance: none; appearance: none; opacity: 0; transition: opacity .2s ease; }
.cil-player__track::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--cil-yellow); opacity: 0; }
.cil-player__track:is(:hover, :focus-visible)::-webkit-slider-thumb { opacity: 1; }
.cil-player__track:is(:hover, :focus-visible)::-moz-range-thumb { opacity: 1; }
.lang-to-css-rtl .cil-player__track { --fill: to left; }
.cil-player__track:focus-visible { outline: 2px solid var(--cil-yellow); outline-offset: 2px; }
/* Full screen: the screen fills it edge to edge, its corners square; the close button waits outside. */
.cil-player__screen:is(:fullscreen, :-webkit-full-screen) { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.cil-player__screen:is(:fullscreen, :-webkit-full-screen) .cil-player__close { display: none; }
.cil-player__screen:is(:fullscreen, :-webkit-full-screen) .cil-player__caption { bottom: 80px; font-size: 22px; }

/* Closing the guide: the popup's button (popup/assets/frontend-modal.css), in the screen's
   reading-end corner. It drops in from above the screen's top edge, where the screen's rounded clip
   hides it, with the light spin; on hover a black iris opens from its centre and the cross turns white. */
.cil-player__close {
    position: absolute; top: 16px; left: auto; right: auto; inset-inline-end: 16px; z-index: 3;
    box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    overflow: hidden; isolation: isolate; border-radius: 50%; background: var(--cil-white); color: var(--cil-black);
    -webkit-mask-image: radial-gradient(circle, #fff 100%, #000 100%); mask-image: radial-gradient(circle, #fff 100%, #000 100%);
    transition: color .1s ease;
}
.cil-help .cil-player__close button {
    position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    margin: 0; padding: 0; border: 0; background: none; color: inherit; line-height: 0; cursor: pointer;
}
.cil-help .cil-player__close button:is(:hover, :focus, :active) { background: none; color: inherit; }
.cil-help .cil-player__close button:focus-visible { outline: 3px solid var(--cil-yellow); outline-offset: -3px; border-radius: 50%; }
.cil-player__close svg { display: block; width: 16px; height: 16px; }
.cil-player__iris { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; border-radius: 50%; background: var(--cil-black);
    pointer-events: none; transform: scale(0); transition: transform .35s cubic-bezier(.55, 0, .8, .2); }
.cil-player__close:hover .cil-player__iris { transform: scale(1); transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.cil-player__close:hover { color: var(--cil-white); transition-delay: .08s; }
@media (prefers-reduced-motion: no-preference) {
    .cil-player__close { animation: cil-player-close-drop .65s cubic-bezier(.22, 1, .36, 1) .25s both; }
    .cil-player.is-closing { opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .3s cubic-bezier(.4, 0, .2, 1); }
}
@keyframes cil-player-close-drop {
    from { transform: translateY(-72px) rotate(-120deg); }
    to   { transform: translateY(0) rotate(0deg); }
}

/* The video would not play: the design's message, a retry and the same video on YouTube. */
.cil-player__error { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    width: 100%; height: 100%; padding: 24px; background: var(--cil-black); color: var(--cil-white); text-align: center; }
.cil-player__error[hidden] { display: none; }
.cil-player.is-failed .cil-player__bar, .cil-player.is-failed .cil-player__caption { display: none; }
.cil-player__errorTitle { margin: 0; font-size: 18px; font-weight: 700; }
.cil-player__errorText { max-width: 420px; margin: 0; font-size: 16px; line-height: 1.2; }
.cil-player__errorActions { display: flex; align-items: center; gap: 16px; }
.cil-help .cil-player__retry { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border: 1px solid var(--cil-black); border-radius: 24px;
    background: var(--cil-white); color: var(--cil-black); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: box-shadow .2s ease; }
.cil-help .cil-player__retry:is(:hover, :focus-visible) { background: var(--cil-white); color: var(--cil-black); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cil-white) 35%, transparent); outline: none; }
.cil-help .cil-player__yt { color: var(--cil-white); font-size: 14px; font-weight: 600; text-decoration: none; }
.cil-help .cil-player__yt:is(:hover, :focus-visible) { color: var(--cil-white); text-decoration: underline; text-underline-offset: 3px; }
.cil-player__yt[hidden] { display: none; }

/* The title, its line, the chapters. */
.cil-player__info { display: flex; flex-direction: column; gap: 10px; }
.cil-guides .cil-player__title { margin: 0; color: var(--cil-black); font-size: 18px; font-weight: 700; line-height: 1.2; }   /* by its letters, at the page's edge (guides.css) */
.cil-player__title:focus { outline: none; }
.cil-player__meta { margin: 0; color: var(--cil-black-regular-7); font-size: 16px; }
.cil-player__chapters { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; }
.cil-player__chapters[hidden] { display: none; }
.cil-player__chaptersLabel { margin: 0; color: var(--cil-black); font-size: 16px; font-weight: 700; }
.cil-help .cil-player__chapter { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 8px 12px; border: 0; border-radius: 8px;
    background: none; color: var(--cil-black); font: inherit; text-align: start; cursor: pointer; transition: background-color .25s ease; }
.cil-help .cil-player__chapter:is(:hover, :focus-visible) { background: var(--cil-blue-light-1); color: var(--cil-black); outline: none; }
.cil-player__chapterTitle { flex: 1; min-width: 0; font-size: 16px; }
.cil-player__chapterTime { flex: none; color: var(--cil-black-regular-7); font-size: 14px; font-variant-numeric: tabular-nums; }
.cil-help .cil-player__chapter.is-current { background: var(--cil-blue-light-1); }
.cil-player__chapter.is-current .cil-player__chapterTitle { color: var(--cil-blue-dark-1); font-weight: 700; }

/* ---- Narrower screens: the shelf a rail of cards, the library one column, the filters a scrolling row ---- */
@media (max-width: 1079px) {
    .cil-guides__row { display: flex; gap: 16px; overflow-x: auto; margin-inline: -16px; padding: 4px 16px 12px; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .cil-guides__row::-webkit-scrollbar { display: none; }
    .cil-guides__row .cil-guide { flex: none; width: 280px; scroll-snap-align: start; }
    .cil-guides__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .cil-guides .cil-guides__title { font-size: 20px; }
    .cil-guides__icon { width: 32px; height: 32px; }
    .cil-guides__filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 2px 16px 6px; scrollbar-width: none; }
    .cil-guides__filters::-webkit-scrollbar { display: none; }
    .cil-help .cil-guides__filter { flex: none; }
    .cil-help__guidesItem { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
}
@media (max-width: 640px) {
    .cil-guides__grid { grid-template-columns: minmax(0, 1fr); }
    .cil-guides__intro { font-size: 14px; }
    .cil-player__screen { border-radius: 12px; }
    .cil-player__caption { bottom: 52px; font-size: 14px; }
    .cil-player__bar { gap: 10px; padding: 8px 12px; }
    .cil-player__level, .cil-player__percent { display: none; }
    .cil-player__errorText { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .cil-guide, .cil-guide__picture, .cil-guide__play, .cil-player, .cil-guide.is-entering, .cil-player__close, .cil-player__iris, .cil-guideRow, .cil-guideRow__play, .cil-help .cil-guideRow__watch { transition: none; animation: none; }
    .cil-guide:hover, .cil-guide:hover .cil-guide__picture { transform: none; }
    .cil-guide__thumb.is-loading { animation: none; }
}