/* Blackties Rentals — fleet page. Sixt-style vehicle cards translated into the
   brand: dark panels, purple accents, chip row, studio visual with a diagonal
   outlined ribbon, price row, full-width waitlist CTA strip. */

/* top padding clears the 75px fixed header and leaves a normal section gap —
   150px left 75px of dead space under the header before the kicker */
.fx-intro { padding: 112px 0 90px; }
.fx-intro h1 { font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 0.4em; }
.fx-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
  margin-top: 2.6rem;
}

/* The studio plate covers the WHOLE card — name, car, price and all — so the
   card is one photographed surface rather than a picture pasted into a panel.
   The plate is dark where the text sits and lit where the car stands, and its
   edges resolve to the card colour so nothing shows a border. The car itself is
   a separate transparent PNG placed on top: a side-profile car is wide and a
   card is tall, so a single image containing both would have to crop the car. */
.fx-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden;
  /* Solid base only. The artwork used to be a `background-image` set per card via a
     --card-plate custom property, which meant eight photographs of cars that Google
     Images could not see and a screen reader could not describe. It is now a real <img>
     (.fx-photo below) carrying alt text and a srcset. */
  background: var(--ink-2);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
/* The card artwork. object-fit: cover reproduces exactly what background-size: cover did,
   and the card's own overflow: hidden plus radius clips it identically, so this is a
   like-for-like swap visually. z-index 0 keeps it behind the content, which is lifted to
   1 below because a positioned element would otherwise paint over static siblings. */
/* NOT .fx-plate: that name was already taken further down by the registration-year badge
   ("71 Plate"). Reusing it made the badge absolute and stretched it over the whole card
   footer, and gave the photo the badge's border and padding. Distinct name, distinct job. */
.fx-photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  pointer-events: none;
}
.fx-card > .fx-head,
.fx-card > .fx-visual,
.fx-card > .fx-foot,
.fx-card > .fx-cta { position: relative; z-index: 1; }
.fx-card:hover { transform: translateY(-4px); border-color: rgba(139, 95, 191, 0.5); }

/* Corner offer flash — sits across the card's top-right corner, above everything.
   The card already clips to its radius, so the ribbon's ends are hidden and it
   reads as printed on the card rather than stuck on top. */
.fx-card { position: relative; }
.fx-offer {
  position: absolute; z-index: 4;
  top: 20px; right: -52px; width: 190px;
  transform: rotate(45deg);
  background: linear-gradient(90deg, #1f9d55, #35c46f);
  color: #fff; text-align: center;
  font-family: "Poppins", sans-serif; font-weight: 700;
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 7px 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.38);
  pointer-events: none;
}

.fx-head { padding: 1.4rem 1.5rem 1.1rem; }
.fx-name {
  font-size: 1.22rem; text-transform: uppercase; letter-spacing: 0.02em;
}
.fx-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.9rem; }
.fx-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: rgba(255, 255, 255, 0.07); color: #d6d9e4;
  border-radius: 999px; padding: 0.28rem 0.7rem;
  font-size: 0.76rem; font-weight: 600;
}
.fx-chip svg { width: 14px; height: 14px; fill: currentColor; }

/* The studio plate: a blurred cyclorama (wall wash + a bright floor pool the car
   sits on) whose corners fade to exactly the card colour, so it reads as part of
   the card rather than a picture pasted into it. 16:9 matches the car assets, so
   nothing crops at any card width. */
.fx-visual {
  position: relative; aspect-ratio: 16 / 9;
  background: none;          /* the card's plate shows through */
}
/* No contact shadow here on purpose: the car assets carry their own. */
.fx-visual img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; z-index: 1;
}
.fx-visual:has(img) .fx-wordmark { display: none; }
.fx-wordmark {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 3.2rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.07);
  user-select: none;
}
.fx-ribbon {
  position: absolute; top: 26px; right: 16px; z-index: 3;
  border: 3px solid rgba(255, 255, 255, 0.92); color: #fff;
  background: rgba(13, 13, 19, 0.3);
  padding: 0.3rem 0.9rem;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.05rem;
  letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
  transform: rotate(-7deg);
}
/* Per-car stage tints are gone on purpose: the card owns one continuous
   gradient now, so a tinted box behind the car would reintroduce the seam. */

/* Soft scrim under the price block: each card's photo has its own floor
   brightness, and without this the badge and price can land on a light patch.
   Starts fully transparent so it never shows as a band. */
.fx-foot {
  padding: 1.15rem 1.5rem 1.25rem; margin-top: auto;
  background: linear-gradient(180deg,
    rgba(16, 14, 26, 0) 0%, rgba(16, 14, 26, 0.55) 30%,
    rgba(16, 14, 26, 0.85) 65%, rgba(16, 14, 26, 0.95) 100%);
}
.fx-foot .badge { position: static; display: inline-block; vertical-align: middle; }
.badge-off {
  background: rgba(255, 255, 255, 0.07); color: #9aa0b0;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
/* registration year, sits beside the availability badge */
.fx-plate {
  display: inline-block; vertical-align: middle; margin-left: 0.5rem;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em;
  color: #d6d9e4;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 4px;
  padding: 0.22rem 0.5rem;
}
.fx-incl { color: #7fd6a4; font-size: 0.84rem; margin: 0.8rem 0 0.7rem; }
.fx-incl::before { content: "✓ "; font-weight: 700; }
.fx-price { font-family: "Poppins", sans-serif; }
.fx-price strong { font-size: 1.65rem; font-weight: 600; color: var(--accent-bright); }
/* available cars price in green, matching their badge and booking button */
.fx-price-live strong { color: #7fd6a4; }
.fx-price span { font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.8rem; color: var(--muted); margin-left: 0.3rem; }

.fx-cta {
  width: 100%; border: 0; cursor: pointer;
  padding: 1.05rem 1rem;
  background: linear-gradient(90deg, #6b46c1, #9f43fe);
  color: #fff; font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em;
  transition: filter 0.2s ease;
}
.fx-cta:hover { filter: brightness(1.12); }
.fx-cta.on {
  background: rgba(96, 190, 130, 0.12); color: #7fd6a4;
  border-top: 1px solid rgba(96, 190, 130, 0.35);
  cursor: default;
}
/* a car that's actually on the forecourt gets a green booking button */
.fx-cta-book { background: linear-gradient(90deg, #1f9d55, #35c46f); }
.fx-cta-book.on {
  background: rgba(96, 190, 130, 0.12); color: #7fd6a4;
  border-top: 1px solid rgba(96, 190, 130, 0.35);
}


/* ---------- My Waitlist ---------- */
.wl-state {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px;
  padding: 2.2rem 1.8rem; text-align: center; margin-top: 2.2rem;
}
.wl-state p { color: var(--muted); margin-bottom: 1.2rem; }

/* the callback number, above the cars */
.wl-phone {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 0.9rem 1.1rem; margin-top: 2.2rem;
}
.wl-phone-label {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}
.wl-phone-value {
  flex: 1 1 auto; min-width: 0;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1.02rem;
}
.wl-phone-value.wl-phone-none { color: var(--muted); font-weight: 500; font-style: italic; }
.wl-phone-btn {
  flex: 0 0 auto; cursor: pointer;
  background: transparent; color: var(--accent-bright);
  border: 1px solid rgba(139, 95, 191, 0.5); border-radius: 999px;
  padding: 0.5rem 1.1rem; font: 600 0.85rem "Plus Jakarta Sans", sans-serif;
  transition: background 0.2s ease;
}
.wl-phone-btn:hover { background: var(--accent-soft); }

.wl-list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.wl-item {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 0.9rem 1.1rem;
}
.wl-thumb {
  width: 92px; height: 52px; flex: 0 0 auto; border-radius: 8px;
  background: #14121f center / 150% no-repeat;
}
.wl-name {
  flex: 1 1 auto; min-width: 0;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1.02rem;
}
.wl-remove {
  flex: 0 0 auto; cursor: pointer;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.5rem 1.1rem; font: 600 0.85rem "Plus Jakarta Sans", sans-serif;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.wl-remove:hover:not(:disabled) { color: #ff8c8c; border-color: rgba(255, 140, 140, 0.5); }
.wl-remove:disabled { opacity: 0.6; cursor: default; }
.wl-err { flex: 1 0 100%; color: #ff8c8c; font-size: 0.82rem; }
.wl-foot { margin-top: 1.6rem; color: var(--muted); font-size: 0.9rem; }
.wl-foot a { color: var(--accent-bright); }

/* Sign out: quiet by design, and it asks before it does anything. */
.wl-signout {
  margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
}
.wl-signout-btn {
  background: none; border: 0; cursor: pointer; padding: 0.3rem 0;
  color: var(--muted); font: 500 0.86rem "Plus Jakarta Sans", sans-serif;
  text-decoration: underline; text-underline-offset: 3px;
}
.wl-signout-btn:hover { color: var(--text); }
.wl-signout-confirm {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  color: var(--text); font-size: 0.88rem;
}
.wl-signout-confirm strong { font-weight: 600; }
.wl-signout-yes, .wl-signout-no {
  cursor: pointer; border-radius: 999px; padding: 0.42rem 0.95rem;
  font: 600 0.82rem "Plus Jakarta Sans", sans-serif;
}
.wl-signout-yes {
  background: transparent; color: #ff8c8c; border: 1px solid rgba(255, 140, 140, 0.5);
}
.wl-signout-yes:hover { background: rgba(255, 140, 140, 0.1); }
.wl-signout-no {
  background: transparent; color: var(--muted); border: 1px solid var(--line);
}
.wl-signout-no:hover { color: var(--text); }
@media (max-width: 480px) {
  .wl-thumb { width: 68px; height: 40px; }
  .wl-name { font-size: 0.94rem; }
  .wl-remove { padding: 0.45rem 0.9rem; }
  /* label on its own line so the number and its button keep a full row */
  .wl-phone-label { flex: 1 0 100%; }
  .wl-phone { gap: 0.5rem 0.8rem; }
}

/* "Load more" — only ever shown on phones, where eight stacked cards is a very
   long scroll. Hidden by default so it never appears if scripting is off, in
   which case every card is simply visible. */
.fx-more {
  display: none;
  width: 100%; margin-top: 1.6rem; padding: 0.95rem 1.2rem;
  background: transparent; color: var(--accent-bright);
  border: 1px solid rgba(139, 95, 191, 0.5); border-radius: 12px;
  font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.95rem; font-weight: 600;
  cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.fx-more:hover { background: var(--accent-soft); }
.fx-more:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
@media (max-width: 640px) {
  .fx-more:not([hidden]) { display: block; }
}

@media (max-width: 1020px) {
  .fx-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .fx-grid { grid-template-columns: 1fr; }
  .fx-intro { padding: 96px 0 70px; }
  /* A narrow card is proportionally taller, so a 16:9 spacer puts the price
     block up where the car's wheels are. Give the car more room. */
  .fx-visual { aspect-ratio: 3 / 2; }
}
@media (max-width: 400px) {
  /* Keep the chip row on one line on small phones: "Plug-in hybrid" + seats +
     bags is otherwise too wide and wraps, which makes those cards taller than
     their neighbours. */
  /* 0.72rem is the floor for comfortable reading on a phone; the padding and
     gaps give back the width so the row still fits on one line. */
  .fx-chip { font-size: 0.72rem; padding: 0.26rem 0.5rem; gap: 0.25rem; }
  .fx-chip svg { width: 12px; height: 12px; }
  .fx-chips { gap: 0.3rem; }
  /* "Mercedes-Benz E-Class" and "…S580e" wrap to two lines otherwise, which
     makes those cards taller than the rest of the column. */
  .fx-name { font-size: 1.02rem; }
}
@media (max-width: 360px) {
  /* Below ~340px the card is proportionally much taller than the artwork, and
     `cover` would crop ~8% off each side, clipping the car's bumpers. `contain`
     fits the full width instead; the artwork's top and bottom edges are the same
     near-black as the card, so the letterboxing is invisible. */
  .fx-photo { object-fit: contain; }
}