/* AlahlyVideosCore.Web — small overrides on top of the design system */

/* Empty/loading skeleton placeholder */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-16) var(--sp-6);
  color: var(--muted);
  text-align: center;
  gap: var(--sp-3);
}
.empty-state h3 {
  color: var(--ink-80);
  font-size: var(--text-xl);
  font-weight: 800;
}
.empty-state p { font-size: var(--text-sm); max-width: 480px; }

.skeleton {
  background: linear-gradient(90deg, var(--border) 0%, var(--surface) 50%, var(--border) 100%);
  background-size: 200% 100%;
  animation: skel 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes skel { 0%,100% { background-position: 200% 0; } 50% { background-position: 0 0; } }
.skeleton-thumb { aspect-ratio: 16/9; }
.skeleton-line { height: 14px; margin-top: var(--sp-2); }
.skeleton-line.short { width: 60%; }

/* Off-canvas drawer (mobile) */
#drawer {
  position: fixed; inset: 0 0 0 auto; width: 86vw; max-width: 360px;
  background: var(--white); z-index: 1000;
  transform: translateX(100%); transition: transform .25s ease;
  box-shadow: var(--shadow-lg);
  padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
#drawer.open { transform: translateX(0); }
#drawerBackdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 999; opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
#drawerBackdrop.open { opacity: 1; pointer-events: auto; }
#drawer .nav-link { padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }

/* ── Hover preview ──────────────────────────────────────── */
.vcard-thumb { position: relative; overflow: hidden; }
.vcard-thumb.is-previewing img { opacity: 0; transition: opacity .2s; }
.vcard-thumb.is-previewing .vcard-play,
.vcard-thumb.is-previewing .vcard-cat,
.vcard-thumb.is-previewing .vcard-duration { opacity: 0; transition: opacity .2s; }
.vcard-thumb iframe { position: absolute; inset: 0; pointer-events: none; }

/* ── Search overlay ─────────────────────────────────────── */
.search-overlay {
  position: fixed; inset: 0;
  background: rgba(14,14,16,.78); backdrop-filter: blur(4px);
  z-index: 1100;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh; padding-inline: var(--sp-4);
}
.search-overlay[hidden] { display: none; }
.search-overlay-card {
  width: min(680px, 100%);
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.search-overlay-form {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
  color: var(--ink-60);
}
.search-overlay-form input {
  flex: 1; border: 0; outline: 0;
  font-family: inherit; font-size: var(--text-md); color: var(--ink);
  background: transparent;
}
.search-overlay-close {
  border: 0; background: transparent; color: var(--muted);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 0 var(--sp-2);
}
.search-overlay-results { max-height: 60vh; overflow: auto; }
.search-overlay-item {
  display: grid; grid-template-columns: 80px 1fr;
  gap: var(--sp-3); align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: var(--ink);
  transition: background .12s;
}
.search-overlay-item:hover { background: var(--surface); }
.search-overlay-item img {
  width: 80px; height: 45px; object-fit: cover; border-radius: var(--r-sm);
  background: var(--ink);
}
.search-overlay-item-title {
  font-size: var(--text-sm); font-weight: 600; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.search-overlay-empty {
  padding: var(--sp-6); text-align: center; color: var(--muted); font-size: var(--text-sm);
}
.search-overlay-hint {
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface); border-top: 1px solid var(--border);
  font-size: var(--text-xs); color: var(--muted); text-align: center;
}