/* ============================================================
   ИСТОК Reels Player — frontend styles  v1.0.1
   Liquid-glass design, auto-hide controls
   ============================================================ */

/* ── Container ────────────────────────────────────────────── */
.irp-player-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}


/* ── Alignment ────────────────────────────────────────────── */
.irp-align-left   { margin-left: 0;    margin-right: auto; }
.irp-align-center { margin-left: auto; margin-right: auto; }
.irp-align-right  { margin-left: auto; margin-right: 0;    }

/* ── Player shell — position:relative so overlays use it ─── */
.irp-player {
    position: relative;
    display: inline-block;
    width: 100%;
    background: #000;
    border-radius: 16px;
    overflow: hidden;           /* clips everything to rounded corners */
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    box-shadow: 0 12px 40px rgba(0,0,0,0.28), 0 3px 10px rgba(0,0,0,0.14);
}

/* ── Viewport — aspect-ratio box, clips slides only ──────── */
.irp-viewport {
    position: relative;
    width: 100%;
    padding-top: 177.78%;      /* default 9:16; overridden by JS */
    overflow: hidden;
    background: #000;
    border-radius: 16px;
    cursor: pointer;
}
.irp-slides {
    position: absolute;
    inset: 0;
}
.irp-slide {
    display: none;
    position: absolute;
    inset: 0;
}
.irp-slide--active { display: block; }
.irp-slide video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

/* ── All overlay UI: absolute inside .irp-player ─────────── */
/*    They're siblings of .irp-viewport, NOT inside it, so
      the viewport's overflow:hidden never clips them.        */

/* ── Auto-hide: default hidden ───────────────────────────── */
.irp-btn-play-pause,
.irp-btn-prev,
.irp-btn-next,
.irp-overlay-controls,
.irp-counter,
.irp-scrubber-wrap,
.irp-bars {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.30s ease;
}
.irp-player.irp-controls-visible .irp-btn-play-pause,
.irp-player.irp-controls-visible .irp-btn-prev,
.irp-player.irp-controls-visible .irp-btn-next,
.irp-player.irp-controls-visible .irp-overlay-controls,
.irp-player.irp-controls-visible .irp-counter,
.irp-player.irp-controls-visible .irp-scrubber-wrap,
.irp-player.irp-controls-visible .irp-bars {
    opacity: 1;
    pointer-events: auto;
}

/* Annotation visible independently (not tied to controls) */
.irp-annotation {
    position: absolute;
    left: 12px;
    right: 12px;
    z-index: 12;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.45;
    color: #fff;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20);
    transition: opacity 0.25s ease;
}
.irp-annotation[data-pos='top']    { top: 44px; }
.irp-annotation[data-pos='bottom'] { bottom: 80px; }
.irp-annotation--visible { opacity: 1 !important; }

/* ── Story bars — top of player ───────────────────────────── */
.irp-bars {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 15;
    display: flex;
    gap: 4px;
}
.irp-bar-bg {
    flex: 1;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.30);
    overflow: hidden;
}
.irp-bar-fill {
    height: 100%;
    width: 0%;
    background: rgba(255, 255, 255, 0.90);
    border-radius: 3px;
    transition: width 0.1s linear;
}
.irp-bar-fill--done { width: 100% !important; }

/* ── Play / Pause — centred ───────────────────────────────── */
.irp-btn-play-pause {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 14;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #fff;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    background: rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 6px 24px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.50);
    transition: opacity .30s ease, transform .15s ease, background .15s ease;
}
.irp-btn-play-pause:hover {
    background: rgba(255,255,255,.28);
    transform: translate(-50%,-50%) scale(1.08);
}
.irp-btn-play-pause:active { transform: translate(-50%,-50%) scale(0.95); }
.irp-btn-play-pause svg { width: 26px; height: 26px; fill: #fff; pointer-events: none; }

.irp-icon-pause { display: none; }
.irp-icon-play  { display: block; }
.irp-player:not(.irp-paused) .irp-icon-pause { display: block; }
.irp-player:not(.irp-paused) .irp-icon-play  { display: none; }

/* ── Prev / Next — left and right, vertically centred ─────── */
.irp-btn-prev,
.irp-btn-next {
    position: absolute;
    top: 50%;
    z-index: 14;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 1px;
    font-size: 22px;
    line-height: 1;
    color: #fff;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 4px 14px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.45);
    transition: opacity .30s ease, background .15s ease, transform .12s ease;
}
.irp-btn-prev { left: 10px;  transform: translateY(-50%); }
.irp-btn-next { right: 10px; transform: translateY(-50%); }

.irp-btn-prev:hover { background: rgba(255,255,255,.28); transform: translateY(-50%) scale(1.08); }
.irp-btn-next:hover { background: rgba(255,255,255,.28); transform: translateY(-50%) scale(1.08); }
.irp-btn-prev:active { transform: translateY(-50%) scale(0.93); }
.irp-btn-next:active { transform: translateY(-50%) scale(0.93); }

/* ── Mute + Expand (top-right column) ────────────────────── */
.irp-overlay-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 14;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.irp-btn-mute,
.irp-btn-expand {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: 0 4px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.45);
    transition: background .15s ease, transform .12s ease;
}
.irp-btn-mute:hover,
.irp-btn-expand:hover  { background: rgba(255,255,255,.28); transform: scale(1.08); }
.irp-btn-mute:active,
.irp-btn-expand:active { transform: scale(0.94); }
.irp-btn-mute svg,
.irp-btn-expand svg { width: 18px; height: 18px; fill: #fff; pointer-events: none; }

.irp-icon-mute  { display: none; }
.irp-icon-sound { display: block; }
.irp-player.irp-muted .irp-icon-sound { display: none; }
.irp-player.irp-muted .irp-icon-mute  { display: block; }

.irp-icon-collapse { display: none; }
.irp-icon-expand   { display: block; }
.irp-is-expanded .irp-icon-expand   { display: none; }
.irp-is-expanded .irp-icon-collapse { display: block; }

/* ── Counter pill (bottom-centre) ─────────────────────────── */
.irp-counter {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 14;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    color: rgba(255,255,255,.90);
    white-space: nowrap;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    background: rgba(0,0,0,.30);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 20px;
    padding: 3px 10px;
    transition: opacity .30s ease;
}

/* ── Scrubber (bottom of player) ──────────────────────────── */
.irp-scrubber-wrap {
    position: absolute;
    bottom: 10px;
    left: 12px;
    right: 12px;
    z-index: 14;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    box-sizing: border-box;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 4px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.20);
    transition: opacity .30s ease;
}
.irp-scrubber-track {
    position: relative;
    height: 4px;
    background: rgba(255,255,255,.25);
    border-radius: 4px;
    overflow: visible;
}
.irp-scrubber-fill {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    width: 0%;
    background: rgba(255,255,255,.90);
    border-radius: 4px;
    pointer-events: none;
    transition: width .05s linear;
}
.irp-scrubber-handle {
    position: absolute;
    top: 50%; left: 0%;
    transform: translate(-50%,-50%);
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,.35);
    pointer-events: none;
    transition: left .05s linear, transform .12s ease;
}
.irp-scrubber-wrap:hover .irp-scrubber-handle,
.irp-scrubbing .irp-scrubber-handle { transform: translate(-50%,-50%) scale(1.3); }
.irp-scrubber-wrap.irp-scrubbing { cursor: grabbing; }

/* ── Expanded / fullscreen overlay ───────────────────────── */
.irp-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: rgba(0,0,0,.80);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: irp-fade-in .2s ease;
}
@keyframes irp-fade-in { from { opacity:0 } to { opacity:1 } }

.irp-is-expanded .irp-player {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    z-index: 99999;
    border-radius: 20px;
    box-shadow: 0 32px 80px rgba(0,0,0,.55);
    animation: irp-pop-in .22s ease;
    max-height: 80vh;
    max-width: 80vw;
}
@keyframes irp-pop-in {
    from { opacity:0; transform:translate(-50%,-50%) scale(.92) }
    to   { opacity:1; transform:translate(-50%,-50%) scale(1) }
}
.irp-is-expanded .irp-viewport { border-radius: 20px; }

.irp-is-expanded .irp-btn-prev,
.irp-is-expanded .irp-btn-next { width:48px; height:48px; font-size:26px; }

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .irp-btn-play-pause { width:56px; height:56px; }
    .irp-btn-play-pause svg { width:22px; height:22px; }
    .irp-btn-mute,
    .irp-btn-expand { width:38px; height:38px; }
    .irp-btn-prev,
    .irp-btn-next   { width:36px; height:36px; font-size:20px; }
    .irp-annotation { font-size:13px; }
}
@media (pointer: coarse) {
    .irp-scrubber-track  { height:6px; }
    .irp-scrubber-handle { width:18px; height:18px; }
    .irp-scrubber-wrap   { padding:14px 12px; }
    /* B1 — keep touch targets at the 44px minimum (overrides the max-width shrink above) */
    .irp-btn-play-pause     { width:64px; height:64px; }
    .irp-btn-play-pause svg { width:24px; height:24px; }
    .irp-btn-mute,
    .irp-btn-expand { width:48px; height:48px; }
    .irp-btn-prev,
    .irp-btn-next   { width:48px; height:48px; font-size:24px; }
}

/* ── Photo / Image slides ───────────────────────────────────────────────── */
.irp-slide img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    border-radius: inherit;
}

/* Hide scrubber for pure manual photo galleries */
.irp-scrubber-wrap.irp-scrubber--hidden {
    opacity: 0;
    pointer-events: none;
}

/* Photo-only player: hide mute button space */
.irp-photo-only .irp-btn-mute { display: none !important; }

/* In slideshow mode: show a subtle "slide" cursor on image */
.irp-slideshow .irp-slide img { cursor: pointer; }

/* Progress bar colour tweak for slideshows (slightly lighter to look like a timer) */
.irp-slideshow .irp-bar-fill {
    background: rgba(255,255,255,0.90);
    transition: none;   /* rAF drives it — no CSS transition needed */
}

/* ── Scrubber hidden state (also used for images in slideshow) ────────────── */
.irp-scrubber--hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── Thumbnail strip ─────────────────────────────────────────────────────── */
.irp-thumbstrip {
    display: flex;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 2px 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(128,128,128,.4) transparent;
    /* align with the player width */
    max-width: 100%;
    box-sizing: border-box;
}
.irp-thumbstrip::-webkit-scrollbar      { height: 3px; }
.irp-thumbstrip::-webkit-scrollbar-track { background: transparent; }
.irp-thumbstrip::-webkit-scrollbar-thumb { background: rgba(128,128,128,.4); border-radius: 3px; }

.irp-thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    padding: 0;
    background: rgba(0,0,0,.18);
    transition: border-color .18s, opacity .18s, transform .18s;
    opacity: 0.55;
    display: flex;
    align-items: center;
    justify-content: center;
    /* reset button styles */
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.irp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.irp-thumb--active {
    border-color: rgba(255,255,255,0.9);
    opacity: 1;
    transform: scale(1.06);
}
.irp-thumb:hover:not(.irp-thumb--active) {
    opacity: 0.85;
}
.irp-thumb-icon {
    font-size: 22px;
    color: rgba(255,255,255,.7);
    pointer-events: none;
}

/* ── Manual photo gallery — prev/next always visible ────────────────────── */
.irp-manual-photo .irp-btn-prev,
.irp-manual-photo .irp-btn-next {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ── Mobile thumb strip ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .irp-thumb { flex: 0 0 54px; width: 54px; height: 54px; }
}

/* ── Photo slideshow: always hide bottom scrubber (story bars are enough) ── */
.irp-photo-only .irp-scrubber-wrap {
    display: none !important;
}

/* ── Expanded photo player: no rounded corners, edge-to-edge ─────────────── */
.irp-is-expanded .irp-photo-only {
    border-radius: 0 !important;
    max-height: 92vh;
    max-width: 92vw;
}
.irp-is-expanded .irp-photo-only .irp-viewport {
    border-radius: 0 !important;
}

/* ============================================================
   Accessibility (added v1.0.5)
   ============================================================ */

/* A1 — visible keyboard focus indicator (WCAG 2.4.7) */
.irp-player:focus-visible,
.irp-btn-play-pause:focus-visible,
.irp-btn-prev:focus-visible,
.irp-btn-next:focus-visible,
.irp-btn-mute:focus-visible,
.irp-btn-expand:focus-visible,
.irp-thumb:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.45);
}

/* A2 — keyboard-focus reveal is handled in JS (see bindControlVisibility), gated
   on input modality. Using CSS :focus-within here pinned the controls open after
   a mouse click on a control (the button keeps focus), so they only hid once focus
   left the player — broken for mouse users, and impossible to dismiss in the
   expanded view. The JS approach reveals on keyboard focus only. */

/* A5 — legibility that does not depend on the underlying video frame */
.irp-annotation {
    background: rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.irp-counter { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.irp-btn-play-pause svg,
.irp-btn-mute svg,
.irp-btn-expand svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); }
.irp-btn-prev,
.irp-btn-next { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }

/* A4 — respect reduced-motion preferences (vestibular safety) */
@media (prefers-reduced-motion: reduce) {
    .irp-player,
    .irp-player *,
    .irp-backdrop,
    .irp-thumbstrip,
    .irp-thumb,
    .irp-annotation,
    .irp-bar-fill,
    .irp-scrubber-fill,
    .irp-scrubber-handle {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   UX states (added v1.0.5)
   ============================================================ */

/* B2 — single-item players: no navigation, counter, or story bars */
.irp-single .irp-btn-prev,
.irp-single .irp-btn-next,
.irp-single .irp-counter,
.irp-single .irp-bars { display: none !important; }

/* B3 — loading / buffering indicator (shown on the active slide) */
.irp-spinner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    z-index: 13;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: rgba(255, 255, 255, 0.9);
    pointer-events: none;
    animation: irp-spin 0.8s linear infinite;
}
.irp-slide.irp-loading .irp-spinner { display: block; }
.irp-slide.irp-error   .irp-spinner { display: none; }
@keyframes irp-spin { to { transform: rotate(360deg); } }

/* B4 — failed-media overlay */
.irp-media-error {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 13;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: none;
}
.irp-media-error::before { content: '\26A0'; font-size: 28px; line-height: 1; }
.irp-slide.irp-error .irp-media-error { display: flex; }

/* Mobile "expand": fill almost the whole screen. Replaces the old native
   per-element fullscreen so the playlist keeps playing across slides. */
@media (max-width: 767px) {
    .irp-is-expanded .irp-player,
    .irp-is-expanded .irp-photo-only { max-height: 96vh; max-width: 98vw; }
}

/* ============================================================
   Photo-gallery navigation (added v1.0.5)
   ============================================================ */

/* Windowed photo gallery: smaller, edge-tucked, semi-transparent arrows so they
   intrude on the photo as little as possible (swipe + thumbnails are primary). */
.irp-photo-only .irp-btn-prev,
.irp-photo-only .irp-btn-next {
    width: 34px;
    height: 34px;
    font-size: 18px;
    background: rgba(0, 0, 0, 0.30);
    border-color: rgba(255, 255, 255, 0.22);
}
.irp-photo-only .irp-btn-prev { left: 4px; }
.irp-photo-only .irp-btn-next { right: 4px; }
@media (max-width: 767px) {
    .irp-photo-only .irp-btn-prev,
    .irp-photo-only .irp-btn-next { width: 30px; height: 30px; font-size: 16px; }
}

/* Expanded view: the arrows are moved (in JS) into the backdrop and pinned to the
   screen margins beside the photo — off the image, and fixed to the viewport edges
   so they no longer shift with the photo's orientation. */
.irp-backdrop > .irp-btn-prev,
.irp-backdrop > .irp-btn-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    font-size: 28px;
    opacity: 1;
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.15);
    z-index: 100000;
}
.irp-backdrop > .irp-btn-prev { left: 16px;  }
.irp-backdrop > .irp-btn-next { right: 16px; }
.irp-backdrop > .irp-btn-prev:hover,
.irp-backdrop > .irp-btn-next:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-50%) scale(1.08);
}
@media (max-width: 767px) {
    .irp-backdrop > .irp-btn-prev,
    .irp-backdrop > .irp-btn-next { width: 44px; height: 44px; font-size: 24px; }
    .irp-backdrop > .irp-btn-prev { left: 8px;  }
    .irp-backdrop > .irp-btn-next { right: 8px; }
}