/* Shared styling for the Photo Drop (2026) + Slideshow (2025) pages. Pairs with
   the base stage rules in slideshow.css. */

/* Smooth ~0.6s crossfade between photos (overrides slideshow.css's 1s rule). */
#slide { transition: opacity .6s ease-in-out; }

/* prev/next arrows live over the stage so they work in fullscreen too */
.ss-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; background: rgba(0,0,0,.45); color: #fff; border: none; width: 46px; height: 46px; border-radius: 50%; font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.ss-arrow.left { left: 8px; }
.ss-arrow.right { right: 8px; }
.ss-arrow:active { background: rgba(0,0,0,.72); }

/* "Full view" shows the WHOLE photo (contain) vs. cover-crop. */
.slideshow-stage.full-view img { object-fit: contain; background: #000; cursor: zoom-out; }

/* photo counter (top-right) + credit (bottom-left) + mute (bottom-right) */
.ss-count-badge { position: absolute; top: 8px; right: 10px; z-index: 6; background: rgba(0,0,0,.5); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.ss-cred { position: absolute; bottom: 8px; left: 10px; z-index: 6; background: rgba(0,0,0,.5); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 999px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-mute { position: absolute; bottom: 10px; right: 12px; z-index: 7; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(0,0,0,.5); color: #fff; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ss-mute:active { background: rgba(0,0,0,.72); }
.ss-restart { position: absolute; top: 8px; left: 10px; z-index: 7; width: 38px; height: 38px; border-radius: 999px; border: none; background: rgba(0,0,0,.5); color: #fff; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ss-restart:active { background: rgba(0,0,0,.72); }
/* pause/resume — sits just to the right of the ⏮ Start-from-beginning button */
.ss-pausebtn { position: absolute; top: 8px; left: 54px; z-index: 7; width: 38px; height: 38px; border-radius: 999px; border: none; background: rgba(0,0,0,.5); color: #fff; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ss-pausebtn:active { background: rgba(0,0,0,.72); }
/* black "unfilled song" tail hint */
.ss-blacktail { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 24px; color: rgba(255,255,255,.85); font-size: 15px; font-weight: 600; z-index: 5; pointer-events: none; }

/* upload card */
.pd-upload-card { display: flex; flex-direction: column; gap: 8px; }
.pd-upload-btn { background: var(--scvfs-red); color: #fff; border: none; padding: 14px 18px; border-radius: 10px; font-weight: 800; font-size: 15px; cursor: pointer; font-family: inherit; }
.pd-upload-btn:disabled { opacity: .6; cursor: default; }
.pd-status { font-size: 13px; min-height: 18px; }
.pd-status.ok { color: #15803d; }
.pd-status.err { color: #c8102e; }

/* thumbnail filmstrip carousel */
.pd-thumbs-wrap { display: flex; align-items: center; gap: 4px; margin: 0 0 12px; }
.pd-thumbs { display: flex; gap: 6px; overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: 4px 2px; flex: 1; min-width: 0; scroll-snap-type: x proximity; }
.pd-thumbs::-webkit-scrollbar { height: 0; }
.pd-thumb { flex: 0 0 auto; width: 64px; height: 48px; padding: 0; border: 2px solid transparent; border-radius: 7px; overflow: hidden; background: #000; cursor: pointer; scroll-snap-align: center; -webkit-tap-highlight-color: transparent; }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-thumb.active { border-color: var(--scvfs-red); box-shadow: 0 0 0 2px rgba(200,16,46,.35); }
.pd-thumb-nav { flex: 0 0 auto; background: var(--grey-100); color: var(--ink); border: 1px solid var(--grey-300); width: 30px; height: 48px; border-radius: 7px; font-size: 16px; cursor: pointer; font-family: inherit; line-height: 1; }
.pd-thumb-nav:active { background: var(--grey-300); }

/* coach-only thumbnail controls (re-order / delete). Hidden entirely otherwise. */
.pd-thumbs.admin .pd-thumb { width: 66px; height: auto; overflow: visible; border: none; background: transparent; }
.pd-thumbs.admin .pd-thumb img { height: 48px; border: 2px solid transparent; border-radius: 7px; }
.pd-thumbs.admin .pd-thumb.active img { border-color: var(--scvfs-red); box-shadow: 0 0 0 2px rgba(200,16,46,.35); }
.pd-adm { display: flex; gap: 2px; margin-top: 3px; }
.pd-adm button { flex: 1; background: #eef1f4; border: 1px solid #d1d5db; border-radius: 4px; font-size: 11px; line-height: 1; padding: 3px 0; cursor: pointer; font-family: inherit; color: #1f2937; -webkit-tap-highlight-color: transparent; }
.pd-adm button.danger { color: #c8102e; }
.pd-adm button:active { background: #dfe4ea; }

/* coach drag-to-reorder (active only while the show is paused) */
.pd-thumbs.admin.drag-mode { scroll-snap-type: none; }
.pd-thumbs.admin.drag-mode .pd-thumb { cursor: grab; touch-action: none; }
.pd-thumbs.admin.drag-mode .pd-thumb:active { cursor: grabbing; }
.pd-thumb.dragging { opacity: .35; }
.pd-thumb-clone {
  position: fixed; z-index: 9999; margin: 0; pointer-events: none;
  opacity: .95; transform: scale(1.06) rotate(-2deg);
  box-shadow: 0 8px 22px rgba(0,0,0,.45); border-radius: 7px;
}
.pd-thumb-clone .pd-adm { display: none; }
.pd-thumb-clone img { height: 48px; border-radius: 7px; display: block; }