/* ==========================================================================
   Global variables (safe defaults)
   ========================================================================== */
:root{
  --radius-sm:.5rem;
  --radius:.75rem;
  --radius-lg:1rem;
  --shadow-soft:0 6px 18px rgba(0,0,0,.12);
  --shadow-hover:0 10px 28px rgba(0,0,0,.18);
  --chip-bg:rgba(0,0,0,.45);
  --chip-br:rgba(255,255,255,.18);
}

/* ==========================================================================
   Base (keep Bootstrap look; no global overrides to layout)
   ========================================================================== */
img{image-rendering:auto; -ms-interpolation-mode: bicubic;}
figure{margin:0}

/* Smooth scrolling for anchor jumps (e.g. #results) */
html{scroll-behavior:smooth}

/* ==========================================================================
   Reusable utilities (opt-in)
   ========================================================================== */
.hover-raise{transition:transform .18s ease, box-shadow .18s ease}
.hover-raise:hover{transform:translateY(-2px); box-shadow:var(--shadow-hover)!important}

.shadow-soft{box-shadow:var(--shadow-soft)!important}

.rounded-sm{border-radius:var(--radius-sm)!important}
.rounded-md{border-radius:var(--radius)!important}
.rounded-lg{border-radius:var(--radius-lg)!important}

/* Glass / chip badges */
.badge.chip, .glass-badge{
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: var(--chip-bg);
  color:#fff;
  border:1px solid var(--chip-br);
}

/* Live pulsing dot */
.live-dot{width:.55rem;height:.55rem;border-radius:50%;background:#ff3b30;display:inline-block;margin-right:.35rem;vertical-align:middle;box-shadow:0 0 0 0 rgba(255,59,48,.6);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,59,48,.6)}70%{box-shadow:0 0 0 12px rgba(255,59,48,0)}100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}

/* Aspect-ratio helpers for thumbs/video */
.ar-16x9{position:relative;aspect-ratio:16/9;background:#111;overflow:hidden;border-radius:var(--radius)}
.ar-1x1{position:relative;aspect-ratio:1/1;background:#111;overflow:hidden;border-radius:var(--radius)}
.ar-16x9 > img, .ar-1x1 > img,
.ar-16x9 > video, .ar-1x1 > video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block
}

/* Subtle overlay for play hover */
.thumb-overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,rgba(0,0,0,.0),rgba(0,0,0,.35));opacity:0;transition:opacity .2s}
.ar-16x9:hover .thumb-overlay, .ar-1x1:hover .thumb-overlay{opacity:1}

/* Sticky blur header bar (used on recordings) */
.sticky-blur{position:sticky;top:0;z-index:1020;background:rgba(255,255,255,.9);backdrop-filter:blur(6px)}
@media (prefers-color-scheme: dark){
  .sticky-blur{background:rgba(15,17,21,.85)}
}

/* ==========================================================================
   Gallery grid & modal
   ========================================================================== */
.gallery-grid{--g: .5rem; display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:var(--g)}
.gallery-grid img{width:100%;height:140px;object-fit:cover;border-radius:var(--radius);display:block}
@media(min-width:576px){ .gallery-grid img{height:180px} }
@media(min-width:992px){ .gallery-grid img{height:220px} }

/* Lightbox modal (dark theme content) */
.modal-dark .modal-content{background:#0f1115;color:#e6e6e6;border:1px solid rgba(255,255,255,.06)}
.modal-dark .btn-close{filter:invert(1)}

/* ==========================================================================
   Recordings grid cards
   ========================================================================== */
.record-card .meta{font-size:.9rem;color:#6c757d}
@media (prefers-color-scheme: dark){
  .record-card .meta{color:#c0c6d0}
}

/* ==========================================================================
   Pagination polish
   ========================================================================== */
.pagination .page-link{border-radius:.5rem; margin:0 .125rem}
.pagination .page-item.active .page-link{box-shadow:none}

/* ==========================================================================
   Select2 tweaks for country flags
   ========================================================================== */
.select2-container .select2-selection--single{height: calc(1.5em + .5rem + 2px)}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height: calc(1.5em + .5rem);
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
  height: calc(1.5em + .5rem);
}
.select2-selection__rendered img,
.select2-results__option img{
  width:16px;height:12px;margin-right:6px;vertical-align:middle;border-radius:2px
}

/* ==========================================================================
   Toast animation (kept from your file)
   ========================================================================== */
.toast.fade-custom{opacity:0;transform:translateY(-20px);transition:opacity .4s ease, transform .4s ease}
.toast.fade-custom.show{opacity:1;transform:translateY(0)}

/* ==========================================================================
   Footer tweaks (dark footer readability)
   ========================================================================== */
footer a{color:rgba(255,255,255,.88);text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
footer .text-muted{color:rgba(255,255,255,.65)!important}
footer .link-secondary{color:rgba(255,255,255,.80)!important}
footer .border-top{border-top-color:rgba(255,255,255,.12)!important}
footer h6{color:#fff;letter-spacing:.02em}
footer .text-bg-light{background-color:#2a2f36!important;color:#f2f4f7!important;border:1px solid rgba(255,255,255,.12)!important}

/* ==========================================================================
   Optional: skeleton loader (use class .skeleton on elements)
   ========================================================================== */
.skeleton{position:relative;overflow:hidden;background:linear-gradient(90deg,#e9ecef 25%,#f8f9fa 37%,#e9ecef 63%);background-size:400% 100%;animation:shimmer 1.25s infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ==========================================================================
   Dark scheme polish (keeps Bootstrap styles; gentle accents)
   ========================================================================== */
@media (prefers-color-scheme: dark){
  body{background:#0f1115;color:#e6e6e6}
  .card{background:#171a21;color:#e6e6e6;border:1px solid rgba(255,255,255,.06)}
  .page-link{background:#171a21;border-color:rgba(255,255,255,.08);color:#e6e6e6}
  .page-item.active .page-link{background:#0d6efd;border-color:#0d6efd}
}
