/* =========================================================================
   RENT NOW — dedicated styling. Loaded ONLY on rent.html.
   Scoped under body.page-rent so nothing here can ever affect any other
   page, even though several selectors below (.car-card, .featured-grid)
   are shared class names with style.css.
   ========================================================================= */

/* ---------------------------------------------------------------------
   THE GOLDEN GALAXY WAVE — a single <canvas>, drawn and animated by
   rent.js. A canvas was chosen deliberately over dozens of DOM layers:
   drawing a few flowing curves plus a couple hundred small particles is
   far cheaper on one canvas than the same visual built from many CSS-
   animated elements, and it's what lets the particle field feel dense
   without becoming a performance problem. Fixed + behind everything
   (z-index:0); the header (z-index 200) and the page content (both
   default position/z-index:auto, later in DOM order) paint over it
   automatically, same as the rest of the site's cinematic backdrops.
   --------------------------------------------------------------------- */
body.page-rent .rentverse{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}
body.page-rent .rentverse-wave{
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.6s ease-out;
}
body.page-rent .rentverse-wave.is-live{
  opacity: 1;
}

body.page-rent .catalogue,
body.page-rent .site-footer{
  position: relative;
}

/* Feature bullet list — an addition to the card body for vehicles that
   have a features list (not every card has one), styled to match the
   existing .car-desc/.car-specs typography and gold accent language
   rather than introducing a new visual style. */
body.page-rent .car-features{
  margin: .7rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
body.page-rent .car-features li{
  position: relative;
  padding-left: 1.1em;
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.5;
}
body.page-rent .car-features li::before{
  content: '';
  position: absolute;
  left: 0;
  top: .58em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

/* A real availability sentence reads poorly in the short uppercase
   "link" style built for labels like "View Details →", so it sits on
   its own line below the price instead — plain sentence case, matching
   .car-desc's muted body-text treatment. */
body.page-rent .car-availability{
  margin: .7rem 0 0;
  font-size: .74rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Cards 1–12 use real, tall/portrait source photos (car occupying the
   lower half of the frame). The card media box is a 4:3 landscape
   crop, so a plain centred object-position would cut the wheels off
   the bottom while keeping excess tree canopy at the top — nudging the
   crop down keeps the full car in frame instead. */
body.page-rent .featured-grid .car-card:nth-child(1) .car-media img,
body.page-rent .featured-grid .car-card:nth-child(2) .car-media img,
body.page-rent .featured-grid .car-card:nth-child(3) .car-media img,
body.page-rent .featured-grid .car-card:nth-child(4) .car-media img,
body.page-rent .featured-grid .car-card:nth-child(5) .car-media img,
body.page-rent .featured-grid .car-card:nth-child(6) .car-media img,
body.page-rent .featured-grid .car-card:nth-child(7) .car-media img,
body.page-rent .featured-grid .car-card:nth-child(8) .car-media img,
body.page-rent .featured-grid .car-card:nth-child(9) .car-media img,
body.page-rent .featured-grid .car-card:nth-child(10) .car-media img,
body.page-rent .featured-grid .car-card:nth-child(11) .car-media img,
body.page-rent .featured-grid .car-card:nth-child(12) .car-media img{
  object-position: center 78%;
}

/* ---------------------------------------------------------------------
   CATEGORY FILTER — ALL / SEDAN / SUV / LUXURY / VAN. Reuses the site's
   existing gold accent language (same tones as .book-now-btn/.eyebrow)
   rather than inventing a new control style. Filtering itself re-runs
   the same fade+rise entrance already defined on .car-card/.is-visible
   in style.css (see js/rent.js), so switching categories always plays
   the site's own premium reveal instead of an instant, basic toggle.
   --------------------------------------------------------------------- */
body.page-rent .category-nav{
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 0 auto 2.6rem;
}
body.page-rent .category-tab{
  padding: .62em 1.4em;
  font-family: 'Montserrat', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
  transition: color .3s, border-color .3s, background .3s;
}
body.page-rent .category-tab:hover{
  color: var(--text);
  border-color: var(--border-strong);
}
body.page-rent .category-tab.is-active{
  color: #0a0906;
  background: linear-gradient(120deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
  border-color: var(--gold);
}

/* Cards outside the active category leave the grid flow entirely (so
   the remaining cards reflow cleanly, no gaps) — the cinematic part is
   entirely in how the newly-shown set re-enters, handled by JS toggling
   .is-visible off/on with a per-card stagger, not by anything here. */
body.page-rent .car-card.is-filtered-out{
  display: none;
}

/* ---------------------------------------------------------------------
   BOOK NOW — compact gold CTA sitting beside the daily price. Uses the
   same gold gradient language as the site's primary .btn, just sized to
   fit the card footer rather than the full button scale.
   --------------------------------------------------------------------- */
body.page-rent .book-now-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .6em 1.15em;
  font-family: 'Montserrat', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #0a0906;
  background: linear-gradient(120deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
  background-size: 200% 100%;
  border: 1px solid var(--gold);
  border-radius: 2px;
  transition: background-position .4s, transform .25s, box-shadow .25s;
}
body.page-rent .book-now-btn:hover{
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(201,169,98,.6);
}
body.page-rent .book-now-btn:active{ transform: translateY(0); }

@media (max-width: 400px){
  body.page-rent .car-footer{ flex-wrap: wrap; gap: .6rem; }
  body.page-rent .book-now-btn{ padding: .55em .95em; font-size: .64rem; }
}

/* The wave still renders under reduced motion (so the environment is
   present, per the site's original brief) but as one static frame with
   no loop — see js/rent.js. The catalogue grid itself is already a
   plain, non-scroll-linked layout for everyone, so no further fallback
   is needed here. */
@media (prefers-reduced-motion: reduce){
  body.page-rent .rentverse-wave{
    transition: none;
    opacity: 1;
  }
}