/*
 * Empty Leg — the very small set of rules the charter listing's stylesheet does not
 * already cover.
 *
 * The listing page IS the charter listing: the same cards, notice, empty state,
 * Load More and action bar, styled by development/css/charter-listing.css, which the
 * page loads first. Nothing from there is repeated here.
 *
 * What is left is the two things an empty-leg card has and an aircraft card does not
 * (a struck-through regular price, and a deal that cannot be enquired about), plus
 * the one field the empty-leg confirmation page adds.
 *
 * Colours are taken from the charter listing's own palette on the same dark page
 * surface (#091D31) rather than invented.
 */

/* ------------------------------------------------------------------ *
 |  Landing page — the featured deal cards
 * ------------------------------------------------------------------ *
 | The cards are the design's own. What is added here is only what a DATA-DRIVEN grid
 | needs and the design (four identical mock cards) never had to answer: one photo
 | frame whatever an aircraft's photo happens to be shaped like, one card height
 | whatever a deal has to say, and the two states a real deal can be in — already in
 | the customer's request, or a fleet with nothing published yet.
 |
 | The rule throughout is the Figma card's own proportions: level the cards at the
 | FOOT and let any slack fall above the price divider, rather than padding out the
 | middle, which is what makes a compact design look airy.
 */

/* Equal-height cards, exactly as the home "Featured Jets" carousel was fixed (see
   development/css/frontend.css). The design CSS only sets the photo's WIDTH, so each
   card grew to whatever aspect its aircraft's photo happened to have — and now that
   the grid is data-driven, a card with no aircraft class or no regular price is
   shorter again. Bootstrap already makes the columns equal height; these rules make
   the CARD fill its column and the content line up inside it. */
.featured-empty-leg-deals-area .featured-empty-leg-deal-box {
  display: flex;
  flex-direction: column;
  /* The design gives the box a 20px bottom margin; take it off the height so the
     box fills its column exactly instead of overflowing it. */
  height: calc(100% - 20px);
}

/* Uniform photo: identical ratio on every card, cropped to fill so a portrait or a
   landscape upload both look right (never stretched), and the design's own
   placeholder sits in the same frame as a real aircraft photo.
   The ratio is the DESIGN's own card photo (330x180) — a wide, shallow banner. A
   taller crop is what made the live card deeper than the design. */
.featured-empty-leg-deals-area .deal-image-wrapper {
  aspect-ratio: 330 / 180;
  overflow: hidden;
}
.featured-empty-leg-deals-area .deal-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The body fills the leftover space, and the two rows that actually VARY between real
   deals are held to a fixed number of lines below — so a row of cards is the same
   height by construction and the design's own spacing (12px either side of each
   divider) survives untouched. Whatever little is still left over is taken at the
   FOOT, above the buttons, where the design already has a gap — never in the middle
   of the card, which is what opened a hole under the aircraft class. */
.featured-empty-leg-deals-area .deal-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.featured-empty-leg-deals-area .deal-actions,
.featured-empty-leg-deals-area .deal-requested {
  margin-top: auto;
}

/* The route: one line in the design, two whenever a real city name is long
   ("Río Turbio (SAWT) → Culleredo (LECO)"). Held at two lines so a short route and a
   long one leave the rest of the card at the same height, and a longer one is
   ellipsised rather than pushing the card taller. */
.featured-empty-leg-deals-area .deal-route {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em; /* two lines at the design's own heading line-height */
}

/* A very long aircraft name is ellipsised after two lines rather than pushing the
   whole row taller. */
.featured-empty-leg-deals-area .jet-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Not every aircraft has a published class. The line still occupies its place so the
   divider, the prices and the buttons stay level with the cards beside it — reserving
   ONE line here costs nothing, where letting the card go short pooled all the slack
   under the class of every other card in the row. */
.featured-empty-leg-deals-area .jet-type:empty::before {
  content: "\00a0";
}

.featured-empty-leg-deal-box .deal-jet-info{
    margin-bottom: 0;
}

/* Only a leg whose operator stated the normal fare shows one, and the design lays
   the two prices out edge to edge. A card without that comparison keeps its empty-leg
   price on the RIGHT, where every other card in the row has it, instead of sliding
   across to fill the gap. */
.featured-empty-leg-deals-area .deal-pricing .price-block:only-child {
  margin-left: auto;
  text-align: right;
}

/* "Added" is a statement, not an offer — it reads as done rather than clickable,
   without moving anything on the card. */
.featured-empty-leg-deal-box .btn-add-leg:disabled {
  opacity: 0.75;
  cursor: default;
}

/* The route heads the card and opens its details page; it must not look like plain
   text on hover, nor pick up the browser's link colour. */
.featured-empty-leg-deal-box .deal-route-link {
  text-decoration: none;
  color: inherit;
}
.featured-empty-leg-deal-box .deal-route-link:hover .deal-route {
  text-decoration: underline;
}

.featured-empty-leg-deals-empty {
  padding: 28px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1.6;
}

/* ------------------------------------------------------------------ *
 |  "Never Miss a Deal" — the subscribe box
 * ------------------------------------------------------------------ *
 | The field fails exactly like every other Premium Design form (the Contact Us form
 | on How it Works is the reference): Bootstrap's red border, its (!) marker inside
 | the field, and the message in #DC3545 below it. Nothing here restyles that — the
 | rules below only undo the two things the DESIGN does to this particular box that
 | would otherwise swallow the standard treatment.
 |
 | The message itself sits in .subscribe-error under the box (data-error-target on
 | the input): the box is position:relative with the Subscribe button absolutely
 | placed INSIDE it, so a message dropped straight after the field would land
 | beneath the button.
 */

.never-miss-empty-leg-deal-content-box-form-input-box .form-control.is-invalid {
  /* The design sets `border: 0` on this field, so Bootstrap's border-COLOUR alone
     draws nothing — state the whole border to get the same red outline. */
  border: 1px solid #DC3545;
  /* Bootstrap parks its (!) marker at the field's right edge, which here is behind
     the Subscribe button; sit it just left of the button instead. The field's own
     140px right padding already keeps the typed address clear of both. */
  background-position: right 150px center;
}

/* ------------------------------------------------------------------ *
 |  Listing card — the empty-leg-only bits
 * ------------------------------------------------------------------ */

/* What the same flight normally costs, beside the deal price. Quieter than the
   figure above it, because it is the comparison and not the offer. */
.el-regular-price {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.el-regular-price s {
  color: rgba(255, 255, 255, 0.45);
}

/* Departure and arrival: date on its own line, time under it, caption under that.
   Each part is a whole unit, so a narrow card wraps BETWEEN date and time rather
   than inside "Aug 12, 2026" — which is what made the tiles read as three ragged
   lines. The time is a shade quieter than the date because it qualifies it. */
.el-when-date,
.el-when-time {
  display: block;
  white-space: nowrap;
}
.el-when-time {
  font-size: 0.93em;
  /* opacity: 0.88; */
}

/* The card carries TWO actions where an aircraft card carries one — "View Details"
   and the "Request Quote" shortcut. They share the design's button, so the second is
   set apart as the quieter of the two rather than competing with it. */
.el-btn-request {
  margin-top: 8px;
  background: transparent;
  border: 1px solid currentColor;
}

/* A Charter Network deal that names no operator cannot be enquired about. It takes
   the place of the card's button, so it keeps the button's spacing rather than
   letting the card's foot jump up. */
.el-unavailable {
  display: block;
  margin-top: 12px;
  padding: 10px 0;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

/* The route replaces the aircraft card's single base airport, so the two ends need
   to sit on one line without wrapping mid-arrow on a narrow card. */
.listing-page-airport-code i,
.listing-page-airport-location i {
  font-size: 0.8em;
  opacity: 0.7;
}

/* ------------------------------------------------------------------ *
 |  Details page
 * ------------------------------------------------------------------ *
 | The page IS the charter details page (development/css/aircraft-detail.css, loaded
 | first) — the flight is stated in its "Request a Quote" card and the aircraft in the
 | page's own sections, so there is almost nothing to add here.
 |
 | On the details page the "currently unavailable" note sits on white, not on the
 | listing's dark surface.
 */
.aircraft-detail-request-quote-box .el-unavailable {
  color: rgba(9, 29, 49, 0.6);
}

/* ------------------------------------------------------------------ *
 |  Quote page — the airport under each end of the route
 * ------------------------------------------------------------------ *
 | The empty-leg confirmation carries no trip summary, so each card states its own
 | route in full. The airport name sits in the spec tile's LABEL slot, which the
 | design sized for one short word — this lets it wrap instead of being clipped.
 */
.submit-request-display-aircraft-item .submit-request-display-label {
  white-space: normal;
  line-height: 1.35;
}

/* The featured card's twin of .listing-page-requested: with the deal already in an
   open request there is nothing left to do on the card, so the two buttons give way
   to the statement — and it keeps their footprint, so the cards stay level. */
.featured-empty-leg-deal-box .deal-requested {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(245, 215, 140, 0.55);
  border-radius: 5px;
  background: rgba(245, 215, 140, 0.12);
  font-size: 14px;
  font-weight: 500;
  color: #F5D78C;
}