/*
 * Charter aircraft listing — the small set of rules the production design does not
 * ship, layered on top of premiumDesign/css/custom.css.
 *
 * The page itself (.listing-page-*) is the DESIGN's own CSS and is deliberately not
 * touched here. What the design has no markup for — because it was drawn with dummy
 * data — is what lives below:
 *
 *   • the "live availability is down" notice,
 *   • the no-results state,
 *   • the "clear all filters" action (the design has one primary button only),
 *   • the busy state of Load More (server-paginated here, not a show/hide toggle),
 *   • the price-on-request card, and cards with no checkbox,
 *   • the amenities filter panel's scroll (the mockup drew a handful of rows; the
 *     real catalogue runs much longer).
 *
 * Everything sits on the design's dark page surface (#091D31), so colours are taken
 * from the same palette rather than invented.
 */

/* ------------------------------------------------------------------ *
 |  Selection action bar
 * ------------------------------------------------------------------ *
 |
 | A search can return dozens of aircraft, so the design's "Inquire Selected"
 | button scrolls out of reach long before the customer has finished choosing.
 |
 | The header row is deliberately NOT pinned. "Popular Filters" is the heading of
 | the categories/price sidebar sitting directly beneath it — pinning that label to
 | the top of the results would say the wrong thing about what it belongs to.
 |
 | So the ACTION travels instead: once a selection exists and the design's button
 | has scrolled away, this bar takes over at the foot of the viewport. It is the
 | same action, wired to the same handler, and only ever one of the two is on
 | screen — so the customer never sees two Inquire buttons at once. The listing
 | layout itself is untouched.
 */
.listing-action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  padding: 12px 0;
  background-color: #0C2B4A;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 -10px 24px -12px rgba(0, 0, 0, 0.85);
  /* Parked off-screen rather than display:none, so it slides rather than blinks. */
  transform: translateY(105%);
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0.25s;
}
.listing-action-bar.is-visible {
  transform: translateY(0);
  visibility: visible;
}

.listing-action-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  /* Clear of the bottom-right floating buttons (scroll-to-top + accessibility). */
  padding-right: 80px;
}
.listing-action-bar-count {
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
}
.listing-action-bar-count span {
  color: #F5D78C;
  font-weight: 600;
}

/* The site's shared bottom-right button stack reads this variable (see
   partials/scroll-to-top), so lifting it here keeps those buttons clear of the bar
   instead of leaving them stranded on top of it. */
body.has-listing-action-bar {
  --avatar-fab-bottom: 90px;
}

@media (max-width: 575.98px) {
  .listing-action-bar-inner {
    /* One thumb-width action, with the count above it. */
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-right: 0;
  }
  .listing-action-bar-count {
    font-size: 14px;
    text-align: center;
  }
  .listing-action-bar .listing-page-btn-inquire {
    width: 100%;
  }
  body.has-listing-action-bar {
    --avatar-fab-bottom: 130px;
  }
}

/* ------------------------------------------------------------------ *
 |  "N Jets Found" — the design's header row has no count at all
 * ------------------------------------------------------------------ *
 |
 | .listing-page-header is display:flex; justify-content:space-between, expecting
 | exactly two children (the title, the Inquire button). Grouping the count with the
 | button in one wrapper keeps that contract intact — the row still has two flex
 | children — while putting the count where the design's own button already sits, at
 | the far right, with the SAME "white text / gold number" pairing
 | .listing-action-bar-count uses below for the same kind of figure.
 */
.listing-page-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.listing-page-jets-count {
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
}
.listing-page-jets-count span {
  color: #F5D78C;
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .listing-page-header-actions {
    gap: 10px;
  }
  .listing-page-jets-count {
    font-size: 13px;
  }
}

/* ------------------------------------------------------------------ *
 |  Cards the design did not draw
 * ------------------------------------------------------------------ */

/* Onboarding aircraft carry no checkbox (they cannot join an Avitor charter
   request), so the subtitle loses the indent that aligns it under one. */
.listing-page-card-onboarding .listing-page-card-subtitle {
  padding-left: 0;
}

/* An aircraft with no rate on record: the word replaces a figure, so it must not
   be set at the figure's size. */
.listing-page-price-value.listing-page-price-on-request {
  font-size: 20px;
}

/* ------------------------------------------------------------------ *
 |  Filters — the amenities panel scrolls
 * ------------------------------------------------------------------ *
 |
 | The delivered accordion (premiumDesign/listing-page.html) drew ten sample rows with
 | nothing to contain them; the real catalogue runs well past that, and letting the
 | panel grow to fit it pushes Price and Apply Filters off the sidebar entirely on an
 | ordinary screen. A fixed height + scroll keeps every other panel where the design
 | put it regardless of how many amenities a tenant has configured.
 */
.listing-page-amenities-scroll {
  max-height: 260px;
  overflow-y: auto;
}

/* ------------------------------------------------------------------ *
 |  Filters — secondary action + disabled states
 * ------------------------------------------------------------------ */

/* "Clear All Filters" is the outline twin of the design's Apply button: same size,
   radius and type, same #3F73A8, so the two read as one pair with an obvious
   primary. The design ships only the solid button, so the outline is defined here
   from its own values rather than a new colour. */
.listing-page-btn-clear {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  font-size: 16px;
  font-weight: 400;
  color: #3F73A8;
  background-color: #ffffff;
  border: 1px solid #3F73A8;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s;
}
.listing-page-btn-clear:hover:not(:disabled) {
  background-color: #3F73A8;
  color: #ffffff;
}

/* Both filter buttons spend time disabled (nothing selected / nothing applied), so
   they must LOOK unavailable — a custom-coloured button gets no dimming for free. */
.listing-page-btn-apply:disabled,
.listing-page-btn-clear:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.listing-page-btn-apply:disabled:hover {
  background-color: #3F73A8;
}

/* Validation feedback inside the white sidebar, matching the frontend's shared
   .is-invalid / .invalid-feedback convention used by every other form. */
.listing-page-price-inputs .is-invalid {
  border-color: #DC3545;
}
.listing-page-sidebar .invalid-feedback {
  font-size: 12px;
  margin-top: 4px;
}

/* ------------------------------------------------------------------ *
 |  Notices and empty state (on the dark page surface)
 * ------------------------------------------------------------------ */

.cl-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  border: 1px solid rgba(245, 215, 140, 0.45);
  border-radius: 6px;
  background: rgba(245, 215, 140, 0.12);
  font-size: 14px;
  color: #F5D78C;
}

.cl-empty {
  padding: 50px 20px;
  text-align: center;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 6px;
}
.cl-empty-icon {
  font-size: 40px;
  color: #F5D78C;
  margin-bottom: 12px;
}
.cl-empty-title {
  font-size: 20px;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 6px;
}
.cl-empty-text {
  max-width: 560px;
  margin: 0 auto;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
}
.cl-empty-text a {
  color: #F5D78C;
}

/* ------------------------------------------------------------------ *
 |  Load More — server-paginated, so it has a busy state
 * ------------------------------------------------------------------ */

.listing-page-btn-load-more.is-loading {
  opacity: 0.7;
  cursor: progress;
}

/* Already requested — this customer has an open request for this aircraft (or this
   empty leg), so the card carries no checkbox and says why instead.

   It sits BESIDE the aircraft name, because that is what it is about, and the title
   row is allowed to wrap so a long name and the badge never fight for the line.
   Colours are the design's own gold on the card's white surface — dark enough to
   read as a statement, not as a disabled control. */
.listing-page-card-title {
  flex-wrap: wrap;
}
.listing-page-requested {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid rgba(125, 94, 37, 0.45);
  border-radius: 999px;
  background: #FBF3E2;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  color: #7D5E25;
}
.listing-page-requested i {
  font-size: 13px;
}

/* On a phone the name takes the whole line, so the badge starts the next one —
   aligned with the subtitle beneath it rather than floating on its own. */
@media (max-width: 575.98px) {
  .listing-page-requested {
    white-space: normal;
  }
}

/* --- How far an aircraft is BASED from the searched departure --------------
   The listing is ordered nearest-first, and this is the line that says so. It
   sits under the base airport's place and is quieter than it — the order is the
   message, this only explains it. Absent on a browse listing, which has no
   departure to measure against. */
.listing-page-airport-distance {
    margin: 2px 0 0;
    font-size: 12px;
    color: #8A8A8A;
}