/* ps5-rentals.css */
/* Shared styles for the dynamic PS5 Rentals grid, used by ps5-rentals/index.php
   and all genre sub-pages (action/sports/racing/adventure). Consolidates what
   used to be five separate, drifting copies of this same markup/CSS. */

.ps5-filter-bar-section {
  position: sticky;
  top: 72px;
  z-index: 40;
  background: rgba(5, 5, 5, .92);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border-subtle);
  padding: 16px 0;
}
.ps5-filter-bar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ps5-grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}
.ps5-grid-actions { display: flex; gap: 8px; align-items: center; }
#ps5SortSelect {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
}

.rental-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.rent-card {
  background: rgba(12,12,12,0.95);
  border: 1px solid var(--border-subtle);
  border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: all .4s ease;
  position: relative;
  cursor: pointer;
}
.rent-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0,0,0,.7), 0 0 24px rgba(0,100,255,.08);
}
.rent-card:hover .rent-img img { transform: scale(1.03); }
.rent-img { position: relative; height: 240px; overflow: hidden; background: #0a0a0a; }
.rent-img img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .8s ease;
}
.rent-img-overlay { position:absolute;inset:0;background:linear-gradient(to top, rgba(10,10,10,.95) 0%, transparent 60%); }
.rent-body { padding: 20px; flex:1; display:flex; flex-direction:column; }
.rent-title {
  font-size:18px; font-weight:700; margin-bottom:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rent-desc {
  font-size:13px; color:var(--text-muted); line-height:1.5; flex:1; margin-bottom:16px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  max-height:2.9em;
}
.rent-footer { display:flex; align-items:flex-end; justify-content:space-between; padding-top:16px; border-top:1px solid var(--border-subtle); gap:12px; }
.rent-price { font-size:22px; font-weight:800; color:var(--gold); }
.rent-price span { font-size:13px; font-weight:400; color:var(--text-faint); }
.rent-price .rent-price-strike { font-size:13px; font-weight:400; text-decoration:line-through; color:var(--text-faint); margin-right:4px; }
.rent-card-disabled { opacity:.65; filter:grayscale(30%); cursor:default; }
.rent-card-disabled .rent-img { cursor:default; }

.status-dot { width:7px;height:7px;border-radius:50%;display:inline-block; }
.dot-green  { background:#4ade80; animation:ps5Pulse 2s ease infinite; }
.dot-orange { background:var(--orange); }
.dot-grey   { background:var(--text-faint); }
.dot-gold   { background:var(--gold); animation:ps5Pulse 2s ease infinite; }
.dot-blue   { background:#818cf8; }
@keyframes ps5Pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }

.ps5-card-status-available  { color: #4ade80; border-color: rgba(74,222,128,.4); background: rgba(74,222,128,.08); }
.ps5-card-status-limited    { color: var(--orange); border-color: rgba(255,122,0,.4); background: rgba(255,122,0,.08); }
.ps5-card-status-out        { color: var(--text-faint); border-color: var(--border-subtle); background: rgba(255,255,255,.03); }
.ps5-card-status-overbooked { color: #f87171; border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.08); }
.ps5-card-status-prebooking { color: var(--gold); border-color: rgba(212,175,55,.4); background: rgba(212,175,55,.08); }
.ps5-card-status-coming     { color: #818cf8; border-color: rgba(129,140,248,.4); background: rgba(129,140,248,.08); }

.duration-selector { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.dur-btn {
  padding:6px 14px; border-radius:4px;
  font-family:'JetBrains Mono',monospace;
  font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  border: 1px solid var(--border-subtle); color:var(--text-muted);
  cursor:pointer; transition:all .2s ease; background:none;
}
.dur-btn:hover,.dur-btn.selected { border-color:var(--gold); color:var(--gold); background:rgba(212,175,55,.08); }
.dur-btn.disabled-btn { opacity:.4; cursor:not-allowed; }

.rent-btn-disabled {
  opacity: .5;
  cursor: not-allowed !important;
  pointer-events: none;
  filter: grayscale(60%);
}

.ps5-prebook-badge {
  position:absolute;top:16px;left:16px;z-index:5;
}

/* Fit lock — phone / tablet */
@media (max-width: 900px) {
  /* Genre chips + search must scroll with the page on phones (same pattern as
     train-sim catalogue sidebars). Sticky kept eating half the viewport and
     covering product cards under All Titles. */
  .ps5-filter-bar-section {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }
  .ps5-filter-bar-row {
    flex-direction: column;
    align-items: stretch;
  }
  .ps5-filter-bar-row .filter-bar {
    width: 100%;
    max-width: 100%;
  }
  .ps5-filter-bar-row .search-bar,
  .ps5-filter-bar-row .fluid-search {
    width: 100% !important;
    max-width: 100%;
  }
  .rental-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  }
  .rent-footer {
    flex-wrap: wrap;
  }
}
@media (max-width: 480px) {
  .rental-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .rent-img { height: min(52vw, 220px); }
  .ps5-grid-header { align-items: flex-start; }
  .ps5-grid-actions { width: 100%; }
  #ps5SortSelect { width: 100%; }
  .rent-body { padding: 16px; }
  .rent-title { font-size: 16px; }
}
body.has-admin-bar .ps5-filter-bar-section {
  top: 120px;
}