/*
 * Frontend development overrides (premiumDesign).
 *
 * Loaded after custom.css / responsive.css (see layouts/app.blade.php) so these
 * rules win. Put new/changed frontend CSS here, NOT in the design's custom.css.
 */

/* "Continue with Google" is a navigation (a GET redirect to the OAuth screen),
 * so the element is an <a>. The base .continue-with-google-btn style was authored
 * for a <button> (inline-block, so width:100% + height apply). Give the anchor the
 * same button box-model and strip the default link underline/colour so it renders
 * identically to the button across the sign-in and sign-up pages. */
a.continue-with-google-btn,
a.continue-with-google-btn:hover,
a.continue-with-google-btn:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  color: #07111B;
}

/* Charter / Empty-Leg search widget — select2 From/To placeholder.
 * The design skins the From/To select2 box in custom.css
 * (.form-field-div-box-field .select-div -> 46px bordered box, #102030 bg,
 * 20px/500 #fff), but it only styles the SELECTED text. select2 ships its own grey
 * placeholder (#999), so an unselected From/To reads faded next to the Date fields,
 * whose placeholder the design DOES style
 * (.departing-date .form-control::placeholder -> 20px/500 #fff).
 * Mirror that here ONCE, for every page using the widget: the home booking search
 * (One Way / Round Trip / Multi City legs) and the Empty Leg Deals search. */
.form-field-div-box-field .select-div .select2-container--default .select2-selection--single .select2-selection__placeholder {
  font-size: 20px;
  font-weight: 500;
  color: #fff;
}

/* Long Avitor airport labels ("KTEB, Teterboro Airport, New York, United States")
 * must ellipsis inside the fixed-height box instead of running under the dropdown
 * arrow / clear (x) controls. */
.form-field-div-box-field .select-div .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-right: 30px;
}

/* Charter / Empty-Leg search widget — inline validation.
 * These style a JS CONVENTION, not a page: charter-search.js and empty-leg-deals.js
 * both render a `.charter-search-error` message above the action buttons and tag the
 * offending field's `.form-field-border` with `.search-field-error`. Declaring this
 * once here keeps every widget consistent (the home booking search and the Empty Leg
 * Deals search had already drifted apart on the focus glow).
 * Scoped to the widget hook so it can never leak into unrelated forms. Pages with a
 * different skin (e.g. the white-card submit-request trip widget) still override it
 * from their own @push('styles'), which renders after this file. */
.charter-listing-search-main-div-center .charter-search-error {
  color: #d11a2a;
  font-size: 14px;
  margin: 0 0 12px;
  font-weight: 500;
}

/* Highlight the actual control's border (select2 box / date + passengers input),
 * not the surrounding field div.
 * `.form-field-div-box-field` is deliberate: it is the dark banner widget's own field
 * wrapper (home booking search + Empty Leg Deals). The white-card submit-request trip
 * widget wraps its controls in `.submit-request-form-select-div` instead, and already
 * glows THAT wrapper from its own stylesheet — without this discriminator it would
 * get a second, nested red glow on the inner select2. */
/* ==========================================================================
   Home — "Featured Jets" carousel
   --------------------------------------------------------------------------
   The design CSS only sets the photo's width, so each jet image kept its own
   aspect ratio and every card ended up a different height (worse now that the
   cards are data-driven: some aircraft have no Sleeps/WiFi row, or a two-line
   name). These rules give every card the same image size and the same height at
   every breakpoint, without touching the design stylesheet and without changing
   owl's responsive item counts.
   ========================================================================== */

/* Equal-height cards. Owl floats its items, so make the stage a flex row and let
   each item stretch; flex:0 0 auto preserves the inline width owl calculates,
   which is what keeps the responsive breakpoints intact. */
.home-featured-jet-box-carousel.owl-carousel .owl-stage {
  display: flex;
}
.home-featured-jet-box-carousel.owl-carousel .owl-item {
  display: flex;
  flex: 0 0 auto;
  height: auto;
}
.home-featured-jet-box-carousel.owl-carousel .owl-item > .item {
  display: flex;
  width: 100%;
}
.home-featured-jet-box-carousel .home-featured-jet-box {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* The photograph is sized with the rest of the aircraft slots, further down this
   stylesheet — the ratio is the design's own card photo, so a real picture occupies
   exactly the frame index.html draws. */

/* Body fills the leftover space, and the INFO ROW absorbs whatever is left over, so
   the divider and price row sit at the foot of every card with the design's own
   spacing intact. (Pushing the <hr> down with margin-top:auto also levelled the
   cards, but it overrode the margin the design gives that rule, so on a full card
   the divider hugged the info row instead of standing off it.) */
.home-featured-jet-box-carousel .home-featured-jet-box-des {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.home-featured-jet-box-carousel .home-featured-jet-box-info {
  flex: 1 1 auto;
}

/* A very long aircraft name is ellipsised after two lines rather than pushing the
   whole carousel taller. NO minimum height: reserving a second line put a gap
   between the name and the info row on every one-line card, which is not how the
   design's card reads — the cards are levelled at the FOOT instead (the auto margin
   above), so any slack falls where the design has none of its own to show. */
.home-featured-jet-box-carousel .home-featured-jet-box-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The card opens the aircraft's details page: the photo, the name and the design's
   own arrow are all the same link. The design styled them as plain content, so the
   links inherit it completely rather than picking up the browser's link colour and
   underline — the card looks exactly as it did, and now it goes somewhere. */
.home-featured-jet-box-img > a,
.home-featured-jet-box-title > a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.home-featured-jet-box-title > a:hover,
.home-featured-jet-box-title > a:focus {
  color: inherit;
  text-decoration: underline;
}

/* ── Design buttons keep their paint in EVERY state ───────────────────────────
   Bootstrap repaints a .btn on :active, :focus-visible and :disabled from its
   --bs-btn-active-* / -hover-* / -disabled-* variables, and only the .btn-*
   colour variants ever define those. A premiumDesign button is a plain .btn that
   paints itself from custom.css with a single-class rule, which Bootstrap's state
   selectors outrank (`:not(.btn-check)+.btn:active` is 0,3,0 against 0,1,0). The
   undefined variables then resolve to nothing, so the gold fill and border fell
   away the moment the button was pressed and it looked like it had disappeared.

   The fix is to hand the design's own colours to Bootstrap through its variables,
   so every state repaints to the same gold instead of to nothing. Source of the
   values: premiumDesign/css/custom.css → .how-it-works-page-btn-submit(:hover).
   A new design button that paints itself needs the same twelve lines. */
.btn.how-it-works-page-btn-submit {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #a16f05;
  --bs-btn-border-color: #f5d78c;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #a67c1e;
  --bs-btn-hover-border-color: #f5d78c;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #a67c1e;
  --bs-btn-active-border-color: #f5d78c;
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: #a16f05;
  --bs-btn-disabled-border-color: #f5d78c;
}

/* -------------------------------------------------------------------------
   In-page anchors (anchor-scroll.js)
   Contact Us is a SECTION on How it Works, linked from the header and footer of
   every page, so the section must not land flush against the top edge when it is
   scrolled to. scroll-margin is the one property that applies to the SCROLL, so
   the layout itself is untouched.
   ------------------------------------------------------------------------- */
#contact-us {
  scroll-margin-top: 24px;
}

/* ---- An aircraft photograph fills its slot, whatever shape it arrives in ----
   The design sized these boxes around ITS OWN pictures (a 330x265 featured card, a
   330x180 deal): the rule is `width: 100%` and nothing else, so a real photograph —
   a portrait one, a panorama, a phone snap an operator uploaded — sets the height of
   the card it lands in and the row loses its line. Fixing the ratio and cropping to
   it keeps the design's proportions and gives every card the same shape.

   The gallery and the saved-aircraft thumbnail already do this in the design's own
   stylesheet; these are the slots it missed. */
.home-featured-jet-box-img {
  aspect-ratio: 330 / 265;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}
/* The ANCHOR is sized too, not only the image inside it. The card wraps its picture
   in a link, and an inline <a> has no height for a percentage to resolve against —
   so styling the <img> alone left it at its natural size, and a short photograph sat
   in a tall frame with a band of card showing beneath it. */
.home-featured-jet-box-img a,
.home-featured-jet-box-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The empty-leg card is fixed inside the Featured Deals carousel (empty-leg.css) and
   nowhere else — it is also drawn on the deals listing and the customer dashboard. */
.featured-empty-leg-deal-box .deal-image-wrapper {
  aspect-ratio: 330 / 180;
  overflow: hidden;
}
.featured-empty-leg-deal-box .deal-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Social sign-in buttons (partials/social-login).

   The design ships ONE of these — .continue-with-google-btn, a white 54px field with a
   border — and it is the social button of this design rather than a Google-specific one,
   so every provider wears it. What is added here is only what the design never had to
   say: how two of them sit together, and what mark the providers with no delivered icon
   carry (a Font Awesome brand glyph, loaded site-wide, in the brand's own colour). */
.continue-with-social-btn + .continue-with-social-btn {
  margin-top: 12px;
}
.continue-with-social-btn .continue-with-google-btn-icon i {
  font-size: 20px;
  position: relative;
  top: 3px;
}
.continue-with-social-btn-facebook .continue-with-google-btn-icon i {
  color: #1877F2;
}
.continue-with-social-btn-linkedin .continue-with-google-btn-icon i {
  color: #0A66C2;
}