/* --- index.php specific styles --- */

body {
  background:#02040a;
}

/* Shell */
.live-page {
  background:#050814;
  border-radius:1rem;
  padding:1rem 1.25rem 1.5rem;
  color:#e3e7ff;
}

.live-page h1,
.live-page label {
  color:#f5f6ff;
}

.live-subtitle {
  color:#a5aac6;
  font-size:0.9rem;
}

/* Filters */
.live-filters .form-control,
.live-filters .form-select {
  background-color:#050814;
  border-color:#262b3f;
  color:#e3e7ff;
}

.live-filters .form-control::placeholder {
  color:#5f6686;
}

.live-filters .form-select:focus,
.live-filters .form-control:focus {
  box-shadow:0 0 0 1px #2e80ff;
  border-color:#2e80ff;
}

.live-filter-go {
  font-weight:600;
}

/* Grid cards */
.model-grid-wrapper {
  margin-top:0.25rem;
}

.model-grid-card {
  background:#050814;
  position:relative;
  overflow:hidden;
  border-radius:0.75rem;
  border:1px solid #111525;
  transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease;
  cursor:pointer;
}

.model-grid-card:hover {
  box-shadow:0 8px 20px rgba(0,0,0,.7);
  transform:translateY(-1px);
  border-color:#2e80ff;
}

.model-grid-thumb {
  position:relative;
  width:100%;
  padding-top:56.25%; /* 16:9 */
  overflow:hidden;
}

.model-grid-img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .25s ease, transform .25s ease;
  background:#050814;
}

.model-grid-card:hover .model-grid-img {
  transform:scale(1.02);
}

.model-grid-video {
  position:absolute;
  inset:0;
  overflow:hidden;
}

.model-grid-video-el {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .25s ease;
}

/* show video only when ready+hover */
.model-grid-card.hovering.video-ready .model-grid-img { opacity:0; }
.model-grid-card.hovering.video-ready .model-grid-video-el { opacity:1; }

/* Status badge */
.model-grid-status-badge {
  position:absolute;
  top:6px;
  left:6px;
  font-size:.7rem;
  padding:2px 8px;
  border-radius:999px;
  z-index:3;
}

/* Bottom overlay */
.model-grid-overlay-bottom {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:8px 10px;
  display:flex;
  align-items:center;
  gap:6px;
  background:linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,0));
  z-index:3;
}

.model-grid-fav {
  color:#fff;
  font-size:1rem;
}

.model-grid-name {
  color:#fff;
  font-size:.9rem;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.model-grid-card a {
  color:inherit;
  text-decoration:none;
  display:block;
}