/*
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 */

/* ============================================================================
   Megahomestay childtheme header overrides
   (extracted from the live megahomestay.vn SingleFile export — these rules
   are loaded by WordPress's child-theme stylesheet enqueue and were not in
   the parent traveler-layout.css)
   ============================================================================ */

header {
    border-bottom: 1px solid var(--light-grey-color, #EAEEF3);
}
header::after {
    content: "";
    display: table;
    clear: both;
}

/* Right-side header buttons (cart + user) */
.header__right .items {
    margin-bottom: 0;
}
.header__right .items li {
    list-style: none;
}
.header__right .items li:not(:first-child) {
    margin-left: 20px;
}
.header__right .items .dropdown .dropdown-toggle {
    color: var(--heading-color);
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
}
.header__right .items .dropdown .dropdown-menu {
    border: 1px solid #DEDEDE;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    padding: 25px 30px;
}
.header__right .items .dropdown.dropdown-currency .dropdown-menu li a:hover {
    color: var(--link-color-hover);
}

/* Cart (bag) icon as 44px circular pill button */
.header__right .items .dropdown.dropdown-minicart .dropdown-toggle {
    width: 44px;
    height: 44px;
    background: #FFFFFF;
    border: 1px solid #DEDEDE;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px rgba(0, 0, 0, 0.05);
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.header__right .items .dropdown.dropdown-minicart .dropdown-toggle .stt-icon {
    color: #000;
    font-size: 20px;
}
.header__right .items .dropdown.dropdown-minicart .dropdown-menu {
    top: 22px !important;
    min-width: 320px;
    right: 0 !important;
}

/* User (account) icon as 44px circular pill button */
.header__right .items .dropdown.dropdown-user-dashboard .dropdown-toggle {
    width: 44px;
    height: 44px;
    background: #FFFFFF;
    border: 1px solid #DEDEDE;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px rgba(0, 0, 0, 0.05);
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header__right .items .dropdown.dropdown-user-dashboard .dropdown-toggle .stt-icon {
    color: #000;
    font-size: 20px;
}

/* Hide caret on the dropdown toggle in the header */
header .dropdown-toggle::after {
    display: none;
}

/* Utility: hide elements that carry the .sf-hidden marker (used by gTranslate popup
   overlay, popup panel, and any other widget that should be off by default and only
   shown after JS interaction). Without this rule those elements render visible. */
.sf-hidden {
    display: none !important;
}

/* ============================================================================
 * TOP DESTINATIONS (home-section-2-destinations)
 * Mirrors the megahomestay.vn stylesheet for `.st-list-destination.normal` so
 * the destination cards render with a dark overlay, centered title, and a
 * 1.1x zoom hover on the image — exactly like the original.
 * ============================================================================ */

.st-list-destination .destination-item {
    margin-bottom: 24px;
}

.st-list-destination .destination-item .image {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.st-list-destination .destination-item .image:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.2;
    z-index: 0;
    transition: opacity 0.3s;
}

.st-list-destination .destination-item:hover .image:after {
    opacity: 0.35;
}

.st-list-destination .destination-item img {
    width: 100%;
    height: 250px;
    border-radius: 8px;
    transition: all 1.5s cubic-bezier(0, 0, 0.2, 1);
    object-fit: cover;
    display: block;
}

.st-list-destination .destination-item:hover .image img {
    transform: scale3d(1.1, 1.1, 1.1);
}

.st-list-destination .destination-item .content {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 1;
    text-align: center;
    width: 100%;
    padding: 10px;
}

.st-list-destination .destination-item .content .title {
    margin-bottom: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
}

.st-list-destination .destination-item .content .title a {
    color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    text-decoration: none;
}

.st-list-destination .destination-item .content .desc a {
    color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.st-list-destination a {
    display: block;
}

/* Stretch the image link across the entire card so clicking anywhere on the
 * destination card (image, overlay, title area) navigates to the search page,
 * not only when hitting the title text. Backed by .st-link::after. */
.st-list-destination .destination-item {
    position: relative;
}

.st-list-destination .destination-item a.st-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}

.st-list-destination .destination-item .content {
    z-index: 3;
}

.st-list-destination .destination-item .image {
    z-index: 1;
}

/* ============================================================================
 * TESTIMONIALS (home-section-4-testimonials) — "Họ nói gì về chúng tôi"
 * Mirrors the megahomestay.vn stylesheet for `.service-testimonial-wrapper` so
 * the testimonial cards render with white background, soft shadow, 24px
 * rounded corners, and amber-coloured star icons — exactly like the original.
 * ============================================================================ */

.st-testimonial-modern-slider .st-testimonial .swiper-container,
.st-testimonial-modern-slider .st-testimonial .service-testimonial-wrapper {
    overflow: hidden;
    position: relative;
}

.service-testimonial-wrapper {
    padding: 4px;
}

.service-testimonial-wrapper .swiper-slide {
    height: 283px !important;
}

.service-testimonial-wrapper .item {
    padding: 48px;
    background: #FFFFFF;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px rgba(0, 0, 0, 0.05);
    border-radius: 24px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.service-testimonial-wrapper .item:hover {
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.10), 0px 12px 32px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.service-testimonial-wrapper .item .st-content {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    font-family: var(--mh-system-font), sans-serif;
    color: #7A7A7A;
    margin-bottom: 30px;
    margin-top: 0;
}

.service-testimonial-wrapper .item .review-testimonial {
    font-size: 14px;
    color: #FFB21D;
    margin-right: 2px;
    line-height: 1;
    font-style: normal;
}

.service-testimonial-wrapper .item .st-stars {
    display: block;
    margin-bottom: 18px;
    line-height: 1;
}

.service-testimonial-wrapper .item .author-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
    max-height: 100%;
}

.service-testimonial-wrapper .item .author-meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.service-testimonial-wrapper .item .author-meta .name {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    color: var(--heading-color, #1A2B48);
    margin-bottom: 0;
    margin-top: 0;
}

.service-testimonial-wrapper .item .author-meta .office-testimonial {
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: var(--grey-color, #5E6D77);
    margin-bottom: 0;
    margin-top: 0;
}

/* Pagination bullets inside the testimonial slider */
.st-testimonial .swiper-pagination {
    position: relative;
    margin-top: 10px;
    bottom: auto;
    left: auto;
    width: 100%;
}

.st-testimonial .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #D5D8DC;
    opacity: 1;
    margin: 0 5px;
    transition: background 0.3s, transform 0.3s;
}

.st-testimonial .swiper-pagination-bullet-active {
    background: var(--main-color, #ff5c02);
    transform: scale(1.25);
}

/* Navigation arrows inside the testimonial slider */
.st-testimonial-modern-slider .st-testimonial .st-button-prev,
.st-testimonial-modern-slider .st-testimonial .st-button-next {
    width: 40px;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #DEDEDE;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    transform: translateY(-50%);
}

.st-testimonial-modern-slider .st-testimonial .st-button-prev span,
.st-testimonial-modern-slider .st-testimonial .st-button-next span {
    display: block;
    background: none;
    color: var(--heading-color, #1A2B48);
    width: auto;
    height: auto;
    font-size: 14px;
    position: relative;
    line-height: 1;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .service-testimonial-wrapper .item {
        padding: 30px 15px;
        border-radius: 16px;
    }
}

/* Reset native input look inside the search banner so the form fields feel like
   flat text rows (no browser default 2px inset border, no opaque background). */
input,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"] {
    border: none !important;
    width: 100%;
    background: transparent;
    outline: unset;
    box-shadow: none;
    border-radius: 3px;
}

/* gTranslate language-switcher popup styling */
.gt_black_overlay {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 10000;
    -moz-opacity: 0.8;
    opacity: 0.80;
    filter: alpha(opacity=80);
}
.gt_white_content {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 980px;
    height: 375px;
    margin: -187.5px 0 0 -490px;
    padding: 6px 16px;
    background-color: #fff;
    color: #000;
    z-index: 19881205;
    overflow: auto;
    text-align: left;
}
.gt_white_content::-webkit-scrollbar-track {
    background-color: #F5F5F5;
}
.gt_white_content::-webkit-scrollbar {
    width: 5px;
}
.gt_white_content::-webkit-scrollbar-thumb {
    background-color: #888;
}
.gt_container-rsyznv a.glink span {
    margin-right: 5px;
    font-size: 15px;
    vertical-align: middle;
}

/* Transparent-header overlay (used by st-menu-transparent) */
header-transparent.st-bg-feature::after {
    content: "";
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 1;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.3);
}

/* Rental booking form: only the inner small box (no outer wrapper) */
.st-form-book-wrapper .form-book-wrapper { padding: 0 !important; border: none !important; box-sizing: border-box !important; border-radius: 0 !important; background: transparent !important; }
.st-form-book-wrapper .form-book-wrapper .booking-fields-inner { border: 1px solid #DEDEDE; border-radius: 16px; overflow: hidden; background: #FFFFFF; margin: 0 16px; }
.st-form-book-wrapper .form-book-wrapper .booking-fields-inner > .form-date-field { border: none !important; border-radius: 0 !important; }
.st-form-book-wrapper .form-book-wrapper .booking-fields-inner > .field-guest { border: none !important; border-radius: 0 !important; }
.st-form-book-wrapper .form-book-wrapper .booking-fields-inner .form-guest-search { border-top: none !important; }
.st-form-book-wrapper .form-book-wrapper .booking-fields-inner .guest-wrapper { border-bottom: none !important; padding: 15px 20px !important; }
.st-form-book-wrapper .form-book-wrapper .booking-fields-inner > .field-guest > .form-guest-search > .guest-wrapper:not(:last-child) { border-bottom: 1px solid #DEDEDE !important; }
.st-form-book-wrapper .form-booking-price { border-bottom: none !important; padding-bottom: 12px !important; }
.st-form-book-wrapper #total-price-row.total-price-book { border-top: none !important; border-bottom: none !important; padding-top: 12px !important; padding-bottom: 12px !important; margin: 0 !important; }
.st-form-book-wrapper .form-book-wrapper .booking-fields-inner > .field-guest > .form-guest-search > .guest-wrapper:first-child { border-top: 1px solid #DEDEDE !important; }
.st-form-book-wrapper .form-book-wrapper .booking-fields-inner > .field-guest > .form-guest-search > .guest-wrapper:last-child { border-bottom: none !important; padding-bottom: 15px !important; }
.st-form-book-wrapper .form-book-wrapper .booking-fields-inner > .field-guest,
.st-form-book-wrapper .form-book-wrapper .booking-fields-inner > .field-guest > .form-guest-search { border-bottom: none !important; padding-bottom: 0 !important; }
.st-form-book-wrapper .form-book-wrapper .booking-fields-inner { border-bottom: 1px solid #DEDEDE !important; }