/*
Theme Name:     Traveler Childtheme
Description:    Traveler Child Theme
Theme URI:      https://travelerwp.com/
Author:         the ShineTheme
Author URI:     http://shinetheme.com
Version:        1.0
Template:       traveler
*/

.st-banner-search-form .search-form,
.search-form {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.st-banner-search-form .search-form form.d-flex,
.search-form form.d-flex {
    gap: 0;
    align-items: center;
}

.st-banner-search-form .search-form form.d-flex > .destination-search,
.search-form form.d-flex > .destination-search {
    flex: 1 1 36%;
    min-width: 0;
    padding-right: 18px;
    border-right: none !important;
    border-right-color: transparent !important;
    border-right-style: none !important;
    border-right-width: 0 !important;
    border-left: none !important;
    border-left-color: transparent !important;
    border-left-style: none !important;
    border-left-width: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background-image: none !important;
}

.st-banner-search-form .search-form form.d-flex > .form-date-field,
.search-form form.d-flex > .form-date-field {
    flex: 1 1 46%;
    min-width: 0;
    padding: 0 18px;
    border-left: none;
    border-right: none;
    position: relative;
}

.st-banner-search-form .search-form form.d-flex > .button-search-wrapper,
.search-form form.d-flex > .button-search-wrapper {
    flex: 0 0 auto;
    padding-left: 18px;
    border-left: none;
    border-right: none;
    position: relative;
}

.st-banner-search-form .search-form form.d-flex > .field-guest,
.search-form form.d-flex > .field-guest {
    flex: 0 0 auto;
    border-left: 1px solid #d7dce3;
}

/* Constrain the white search form panel on the rental search page
   to 900px wide and center it. The parent .st-banner-search-form
   .container otherwise stretches the .st-search-form-el wrapper
   to the full container width. */
.st-banner-search-form .st-search-form-el,
.page-rental-search-sidebar .st-search-form-el {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* The rental loop amenities row originally has 4 items (People, Bed,
   Bathroom, Square). The "Square" span was removed from the template,
   leaving only 3 items. The parent theme's default left-justified
   layout makes the row look uneven.

   The previous attempts (flex + width:100% + margin:auto fallbacks)
   still failed because the .amenities element shrinks to its content
   width in some cards (it sits inside .content-item whose exact width
   is constrained by the grid column), so justify-content:space-between
   cannot push items to the edges.

   The reliable fix is CSS Grid with an explicit 3-column layout:
     1fr | auto | 1fr
   The two outer columns each claim half of the remaining space, so the
   middle (auto) column is mathematically centered between them. The
   grid track sizing is independent of the children's natural widths,
   so the row always lines up with the title above — no matter what
   .content-item does to its children's widths. */
.services-item .content-item .amenities,
.services-item .content-item .amenities.d-flex.align-items-center.clearfix,
.stt-item-rental-loop .content-item .amenities {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
}

/* Pin each span to its grid column edge: first to start, middle to
   center, last to end. These rules survive even if a third-party
   plugin tries to override .amenity margins. */
.services-item .content-item .amenities .amenity:first-child,
.stt-item-rental-loop .content-item .amenities .amenity:first-child {
    grid-column: 1 !important;
    justify-self: start !important;
    margin-right: 0 !important;
}
.services-item .content-item .amenities .amenity:nth-child(2),
.stt-item-rental-loop .content-item .amenities .amenity:nth-child(2) {
    grid-column: 2 !important;
    justify-self: center !important;
}
.services-item .content-item .amenities .amenity:last-of-type,
.stt-item-rental-loop .content-item .amenities .amenity:last-of-type {
    grid-column: 3 !important;
    justify-self: end !important;
    margin-left: 0 !important;
}

/* The "Square" amenity is removed in template — no CSS needed */