/* ==========================================================================
   Guestly modern polish — consumes Appearance tokens (--gx-*) set by
   Admin > Appearance. Scoped to the homepage sections and shared cards.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section rhythm (homepage sections: stays, popular, offers, property)
-------------------------------------------------------------------------- */
.stays-section, .popular, .offer, .property {
    padding-top: calc(var(--gx-section-space, 80px) * .75) !important;
    padding-bottom: calc(var(--gx-section-space, 80px) * .75) !important;
}

/* --------------------------------------------------------------------------
   Cards: stays / category tiles
-------------------------------------------------------------------------- */
.categories-single {
    border-radius: var(--gx-radius, 16px) !important;
    box-shadow: var(--gx-shadow) ;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}
.categories-single-image-container,
.categories-single-image {
    border-radius: calc(var(--gx-radius, 16px) - 4px);
    overflow: hidden;
}
.categories-single img {
    transition: transform .3s ease;
}
@media (hover: hover) {
    .categories-single:hover {
        transform: translateY(calc(var(--gx-hover, 1) * -6px));
        box-shadow: 0 16px 40px rgba(0, 0, 0, calc(var(--gx-hover, 1) * .14));
    }
    .categories-single:hover img {
        transform: scale(calc(1 + var(--gx-hover, 1) * .05));
    }
}

/* --------------------------------------------------------------------------
   Cards: popular destinations
-------------------------------------------------------------------------- */
.popular-single {
    border-radius: var(--gx-radius, 16px) !important;
    overflow: hidden;
    box-shadow: var(--gx-shadow);
    transition: transform .3s ease, box-shadow .3s ease;
}
.popular-image, .popular-image img { border-radius: inherit; }
.popular-image img { transition: transform .3s ease; }
@media (hover: hover) {
    .popular-single:hover {
        transform: translateY(calc(var(--gx-hover, 1) * -6px));
        box-shadow: 0 16px 40px rgba(0, 0, 0, calc(var(--gx-hover, 1) * .14));
    }
    .popular-single:hover .popular-image img {
        transform: scale(calc(1 + var(--gx-hover, 1) * .05));
    }
}
.popular-single-badge {
    border-radius: 999px !important;
    font-weight: 700;
    backdrop-filter: blur(6px);
}

/* --------------------------------------------------------------------------
   Offer banners
-------------------------------------------------------------------------- */
.offer-single {
    border-radius: var(--gx-radius, 16px) !important;
    overflow: hidden;
    box-shadow: var(--gx-shadow);
    transition: transform .3s ease, box-shadow .3s ease;
}
@media (hover: hover) {
    .offer-single:hover { transform: translateY(calc(var(--gx-hover, 1) * -4px)); }
}

/* --------------------------------------------------------------------------
   Property highlight section
-------------------------------------------------------------------------- */
.property-container, .property-content {
    border-radius: var(--gx-radius, 16px);
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Buttons: theme primary button follows the radius token
-------------------------------------------------------------------------- */
.btn-wrapper .btn-single {
    border-radius: 999px !important;
}

/* --------------------------------------------------------------------------
   Carousels: hide scrollbars, momentum scrolling on touch
-------------------------------------------------------------------------- */
.category-swiper-box { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.category-swiper-box::-webkit-scrollbar { display: none; }

/* --------------------------------------------------------------------------
   Mobile: tighter section rhythm, comfortable tap targets
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .stays-section, .popular, .offer, .property {
        padding-top: calc(var(--gx-section-space, 80px) * .5) !important;
        padding-bottom: calc(var(--gx-section-space, 80px) * .5) !important;
    }
    .btn-1 { min-height: 44px; }
}

/* ==========================================================================
   Visible modernization layer
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero search: premium floating pill
-------------------------------------------------------------------------- */
.destination-search-inner {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, .07) !important;
    border-radius: calc(var(--gx-radius, 16px) + 12px) !important;
    box-shadow: 0 14px 44px rgba(0, 0, 0, .16) !important;
    transition: box-shadow .25s ease, transform .25s ease;
}
.destination-search-inner:focus-within {
    box-shadow: 0 20px 56px rgba(0, 0, 0, .22) !important;
    transform: translateY(-2px);
}
.location-search-box input { font-weight: 600; }
.location-search-dropdown, .count-container {
    border-radius: var(--gx-radius, 16px) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .16) !important;
    border: 1px solid rgba(0, 0, 0, .06) !important;
    overflow: hidden;
}
.search-options .search-item { border-radius: 10px; transition: background .15s ease; }
.search-options .search-item:hover { background: #f5f5f5; }

/* --------------------------------------------------------------------------
   Buttons: pill primary with lift
-------------------------------------------------------------------------- */
.btn-1 {
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}
.btn-1:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    filter: brightness(1.05);
}

/* --------------------------------------------------------------------------
   Section headers: bold with brand accent
-------------------------------------------------------------------------- */
.common-title h2, .common-title .section-title, .section-title {
    font-weight: 800 !important;
    letter-spacing: -.02em;
}
.common-title {
    position: relative;
    padding-bottom: 14px;
    margin-bottom: 26px !important;
}
.common-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 52px;
    height: 4px;
    border-radius: 4px;
    background: var(--primary-color, #FF3131);
}

/* --------------------------------------------------------------------------
   Cards: crisp borders + stronger presence
-------------------------------------------------------------------------- */
.categories-single, .popular-single, .offer-single {
    border: 1px solid rgba(0, 0, 0, .06);
    background: #fff;
}
.categories-single-title, .popular-content-title { font-weight: 750 !important; }
.popular-content-btn { border-radius: 999px !important; }

/* ==========================================================================
   STEP 3 — Homepage sections on the design system
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero band around the search (mobile-first, compact above the fold)
-------------------------------------------------------------------------- */
.gx-hero {
    background:
        radial-gradient(900px 340px at 85% -60px, var(--g-primary-soft) 0%, transparent 65%),
        linear-gradient(180deg, var(--g-bg-soft) 0%, var(--g-bg) 100%);
    padding: var(--g-s5) 0 var(--g-s6);
}
.gx-hero-copy { text-align: center; margin-bottom: var(--g-s5); }
.gx-hero-copy h1 {
    font-size: var(--g-fs-hero);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.12;
    color: var(--g-text);
    margin: 0 0 var(--g-s2);
}
.gx-hero-copy p {
    font-size: var(--g-fs-body);
    color: var(--g-text-soft);
    margin: 0 auto;
    max-width: 560px;
}
@media (min-width: 768px) {
    .gx-hero { padding: var(--g-s7) 0 var(--g-s7); }
    .gx-hero-copy { margin-bottom: var(--g-s6); }
}

/* --------------------------------------------------------------------------
   Stays cards (.categories-single): app-quality property cards
-------------------------------------------------------------------------- */
.section-title, .section-title a {
    font-size: var(--g-fs-section) !important;
    font-weight: 800 !important;
    letter-spacing: -.02em;
    color: var(--g-text) !important;
}
.section-title a i { font-size: .7em; color: var(--g-text-soft); }

.categories-single {
    border-radius: var(--g-radius-lg) !important;
    background: var(--g-bg);
}
.categories-single-image-container,
.categories-single-image {
    aspect-ratio: 16 / 10;
}
.categories-single-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.categories-single-content { padding: var(--g-s3) var(--g-s4) var(--g-s4) !important; }
.categories-single-title a {
    font-size: 15.5px !important;
    font-weight: 750 !important;
    line-height: 1.35;
    color: var(--g-text) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.categories-single-date { align-items: center; }
.categories-single-date h5 {
    font-size: 15.5px !important;
    font-weight: 800 !important;
    color: var(--g-text) !important;
}
.categories-single-date h5 span {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--g-text-soft) !important;
}
.categories-single-date .rat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--g-bg-soft);
    border: 1px solid var(--g-border);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
}
.categories-single-date .rat i { color: #f5a623; font-size: 11px; }
.wishlist-icon a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    transition: transform var(--g-fast) var(--g-ease);
}
.wishlist-icon a:active { transform: scale(.85); }
.wishlist-icon .fa-solid.fa-heart { color: var(--g-primary); }

/* --------------------------------------------------------------------------
   Popular destinations: image tiles with gradient overlay
-------------------------------------------------------------------------- */
.popular-single { position: relative; }
.popular-image { display: block; aspect-ratio: 4 / 5; }
.popular-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .55) 100%);
    border-radius: inherit;
    pointer-events: none;
}
.popular-image img { width: 100%; height: 100%; object-fit: cover; }
.popular-single-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: rgba(255, 255, 255, .94) !important;
    color: #222 !important;
    font-size: 11px !important;
    font-weight: 800;
    padding: 4px 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.popular-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--g-s4);
}
.popular-content-title {
    color: #fff !important;
    font-size: var(--g-fs-card) !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
.popular-content-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92) !important;
    color: #222 !important;
    transition: transform var(--g-fast) var(--g-ease);
}
.popular-single:hover .popular-content-btn { transform: rotate(45deg); }

/* --------------------------------------------------------------------------
   Offer banners: cinematic overlay + readable copy
-------------------------------------------------------------------------- */
.offer-single { position: relative; min-height: 240px; }
.offer-single .bg-layer {
    background-size: cover !important;
    background-position: center !important;
}
.offer-single::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(12, 14, 24, .72) 20%, rgba(12, 14, 24, .18) 75%);
    border-radius: inherit;
}
.offer-content { position: relative; z-index: 2; padding: var(--g-s5) !important; }
.offer-content h4 {
    color: #fff !important;
    font-size: var(--g-fs-card) !important;
    font-weight: 800 !important;
    letter-spacing: -.01em;
}
.offer-content p { color: rgba(255, 255, 255, .82) !important; max-width: 380px; }

/* --------------------------------------------------------------------------
   Become-a-host CTA: glass card over the imagery
-------------------------------------------------------------------------- */
.property-container { position: relative; min-height: 320px; }
.property-container .bg-layer {
    background-size: cover !important;
    background-position: center !important;
}
.property-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(12, 14, 24, .55) 0%, rgba(12, 14, 24, .1) 70%);
    border-radius: inherit;
}
.property-content {
    position: relative;
    z-index: 2;
    margin: var(--g-s5);
    max-width: 520px;
    padding: var(--g-s5) !important;
    border-radius: var(--g-radius-lg);
    background: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .25);
}
.property-content h3 {
    color: #fff !important;
    font-size: var(--g-fs-section) !important;
    font-weight: 800 !important;
    letter-spacing: -.02em;
}
.property-content p { color: rgba(255, 255, 255, .85) !important; }
@media (max-width: 650px) {
    .property-content { margin: var(--g-s3); padding: var(--g-s4) !important; }
}

/* ==========================================================================
   STEP 4 — Search experience (/stays)
   ========================================================================== */

/* Filter/sort bar */
.services-filer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-s3);
    flex-wrap: wrap;
}
.services-filer-btn { display: flex; align-items: center; gap: var(--g-s2); flex-wrap: wrap; }
.totalPropertiesText { font-weight: 800 !important; letter-spacing: -.01em; }

.gx-sort {
    min-height: 45px;
    padding: 0 var(--g-s4);
    border: 1.5px solid var(--g-border);
    border-radius: 999px;
    background: var(--g-bg);
    color: var(--g-text);
    font-size: var(--g-fs-caption);
    font-weight: 700;
    outline: none;
    cursor: pointer;
    transition: border-color var(--g-fast) var(--g-ease), box-shadow var(--g-fast) var(--g-ease);
}
.gx-sort:hover { border-color: var(--g-text-soft); }
.gx-sort:focus-visible { border-color: var(--g-primary); box-shadow: 0 0 0 3px var(--g-primary-soft); }

/* Search-page card extras */
.property-single-content .categories-single-btn-text h5 {
    font-size: 15.5px !important;
    font-weight: 800 !important;
    color: var(--g-text) !important;
}
.property-single-content .categories-single-btn-text h5 span {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--g-text-soft) !important;
}

/* Map panel */
#map {
    border-radius: var(--g-radius-lg);
    overflow: hidden;
    box-shadow: var(--g-shadow);
}

/* Skeleton result cards */
.gx-skel-card {
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    background: var(--g-bg);
    padding: 0 0 var(--g-s4);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--g-s3);
    margin-bottom: var(--g-s5);
}
.gx-skel-card .media { aspect-ratio: 16 / 10; border-radius: 0; }
.gx-skel-card .line { height: 13px; margin: 0 var(--g-s4); }

/* Filters modal: full DS treatment, bottom sheet on mobile */
#categoriesModal .modal-content {
    border-radius: var(--g-radius-lg);
    border: 1px solid var(--g-border);
    box-shadow: var(--g-shadow-lg);
}
#categoriesModal .modal-header { border-bottom: 1px solid var(--g-border); }
#categoriesModal .modal-title { font-weight: 800; }
@media (max-width: 767px) {
    #categoriesModal .modal-dialog {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        margin: 0;
        max-width: none;
        transform: translateY(100%);
        transition: transform var(--g-normal) var(--g-ease);
    }
    #categoriesModal.show .modal-dialog { transform: translateY(0); }
    #categoriesModal .modal-content {
        border-radius: var(--g-radius-lg) var(--g-radius-lg) 0 0;
        max-height: 88dvh;
    }
    #categoriesModal .modal-body { overflow-y: auto; padding-bottom: calc(var(--g-s5) + env(safe-area-inset-bottom)); }
}

/* Mobile: filter bar wraps cleanly, 44px targets */
@media (max-width: 767px) {
    .services-filer { position: sticky; top: 64px; z-index: 50; background: var(--g-bg); padding: var(--g-s2) 0; }
    .gx-sort { flex: 1; min-width: 150px; }
}

/* ==========================================================================
   STEP 5 — Property details
   ========================================================================== */

/* Gallery: Airbnb-style rounded mosaic */
.gallery-desktop {
    border-radius: var(--g-radius-lg);
    overflow: hidden;
    gap: 8px !important;
}
.service-gallery-left img,
.service-gallery-right-image img {
    transition: transform var(--g-normal) var(--g-ease), filter var(--g-normal) var(--g-ease);
}
@media (hover: hover) {
    .service-gallery-left a:hover img,
    .service-gallery-right-image a:hover img { transform: scale(1.03); filter: brightness(.94); }
}
.gallery-mobile { border-radius: var(--g-radius); overflow: hidden; }
.gallery-mobile .swiper-pagination-bullet-active { background: #fff !important; }

.gx-show-photos {
    position: absolute;
    right: var(--g-s4);
    bottom: var(--g-s4);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: var(--g-s2);
    min-height: 40px;
    padding: 0 var(--g-s4);
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, .1);
    color: #222 !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    transition: transform var(--g-fast) var(--g-ease);
}
.gx-show-photos:hover { transform: translateY(-2px); color: #222; }
.service-gallery-container, .service-gallery { position: relative; }

/* Section titles + rhythm */
.service-details-common-title h3, .service-details-common-title {
    font-weight: 800 !important;
    letter-spacing: -.02em;
}
.service-amenities-list li {
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius);
    padding: var(--g-s3) var(--g-s4) !important;
    transition: border-color var(--g-fast) var(--g-ease);
}
.service-amenities-list li:hover { border-color: var(--g-text-soft); }

/* Host + review + map cards */
.service-details-host, .service-details-review {
    border-radius: var(--g-radius-lg);
}
.service-details-map-container #map,
.service-details-map-container iframe {
    border-radius: var(--g-radius-lg);
    overflow: hidden;
    box-shadow: var(--g-shadow);
}

/* Booking widget: elevated sticky card */
.services-overview-form {
    border: 1px solid var(--g-border) !important;
    border-radius: var(--g-radius-lg) !important;
    box-shadow: var(--g-shadow-lg) !important;
    background: var(--g-bg);
}
@media (min-width: 992px) {
    .services-overview-form { position: sticky; top: 96px; }
}

/* Mobile price bar: glass dock replacing the tab bar on this page */
body:has(.mobile-price-bar) .gx-bottom-nav { display: none !important; }
.mobile-price-bar {
    background: rgba(255, 255, 255, .92) !important;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-top: 1px solid var(--g-border);
    padding: var(--g-s3) 0 calc(var(--g-s3) + env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .08);
}
.mobile-price-bar .price {
    font-size: 18px;
    font-weight: 800;
    color: var(--g-text);
}
.mobile-price-bar .btn-danger,
.mobile-price-bar .reserve-btnsssss {
    background: var(--g-primary) !important;
    border: none !important;
    border-radius: 999px !important;
    min-height: 48px;
    padding: 0 var(--g-s6) !important;
    font-weight: 800 !important;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--g-primary) 35%, transparent);
    transition: transform var(--g-fast) var(--g-ease);
}
.mobile-price-bar .btn-danger:active { transform: scale(.96); }

/* Mobile booking modal reads as a native sheet */
#mobileBookingModal .modal-content {
    border-radius: var(--g-radius-lg) var(--g-radius-lg) 0 0 !important;
    border: none;
}
#mobileBookingModal .modal-footer .btn-danger {
    background: var(--g-primary) !important;
    border-radius: 999px !important;
    min-height: 48px;
    width: 100%;
    font-weight: 800;
    border: none;
}

/* ==========================================================================
   STEP 6 — Checkout (guest info, payment, confirmation)
   ========================================================================== */

/* Guest info + generic checkout inputs */
.booking-container .cmn-input,
.booking-container .form-control {
    min-height: 46px;
    border: 1.5px solid var(--g-border) !important;
    border-radius: var(--g-radius) !important;
    background: var(--g-bg-soft);
    font-size: 16px;
    transition: border-color var(--g-fast) var(--g-ease), box-shadow var(--g-fast) var(--g-ease);
}
.booking-container .cmn-input:focus,
.booking-container .form-control:focus {
    border-color: var(--g-primary) !important;
    box-shadow: 0 0 0 3px var(--g-primary-soft);
    background: var(--g-bg);
}
.booking-container .form-label { font-weight: 700; font-size: var(--g-fs-small); text-transform: uppercase; letter-spacing: .04em; color: var(--g-text-soft); }

/* Payment methods: selectable cards */
.payment-container-list .item { margin-bottom: var(--g-s2); }
.payment-container-list .item .form-check-label {
    display: flex;
    align-items: center;
    gap: var(--g-s3);
    width: 100%;
    border: 1.5px solid var(--g-border);
    border-radius: var(--g-radius);
    padding: var(--g-s3) var(--g-s4);
    cursor: pointer;
    transition: border-color var(--g-fast) var(--g-ease), background var(--g-fast) var(--g-ease), box-shadow var(--g-fast) var(--g-ease);
}
.payment-container-list .item .form-check-label:hover { border-color: var(--g-text-soft); }
.payment-container-list .item .select-payment-method:checked + .form-check-label {
    border-color: var(--g-primary);
    background: var(--g-primary-soft);
    box-shadow: 0 0 0 1px var(--g-primary);
}
.payment-container-list .image-area img { max-height: 34px; border-radius: 6px; }
.payment-container-list .content-area h5 { font-size: 14.5px; font-weight: 750; margin: 0; }
.payment-container-list .content-area span { font-size: 12px; color: var(--g-text-soft); }

/* Summary sidebar */
.booking-summary {
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow);
    background: var(--g-bg);
    padding: var(--g-s4) !important;
}
.booking-summary > img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--g-radius);
    margin-bottom: var(--g-s3);
}
.trip-details {
    border-top: 1px solid var(--g-border);
    padding-top: var(--g-s3);
    margin-top: var(--g-s3);
}

/* Dynamic payment summary */
.show-deposit-summery h5 { font-weight: 800; letter-spacing: -.01em; }
.show-deposit-summery .total h2 {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: var(--g-text) !important;
    letter-spacing: -.02em;
}
.show-deposit-summery li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--g-s3);
    padding: 6px 0;
    font-size: var(--g-fs-caption);
    list-style: none;
}
.show-deposit-summery li strong { color: var(--g-text-soft); font-weight: 650; }

/* Coupon row */
.coupon {
    display: flex;
    gap: var(--g-s2);
    margin: var(--g-s3) 0 var(--g-s1);
}
.coupon input {
    flex: 1;
    min-height: 44px;
    border: 1.5px dashed var(--g-border) !important;
    border-radius: var(--g-radius) !important;
    padding: 0 var(--g-s3);
    font-size: 14px;
    background: var(--g-bg-soft);
}
.coupon input:focus { border-color: var(--g-primary) !important; outline: none; }
.coupon .coupon-apply-btn, .coupon .coupon-remove-btn {
    min-height: 44px;
    padding: 0 var(--g-s4);
    border-radius: 999px !important;
    font-weight: 700;
    border: none;
}
.coupon .coupon-apply-btn { background: var(--g-text) !important; color: var(--g-bg) !important; }
.coupon .coupon-remove-btn { background: var(--g-error-soft) !important; color: var(--g-error) !important; }

/* Pay CTA + mobile dock */
.pay-btn, .confirmBtn {
    border-radius: 999px !important;
    font-weight: 800 !important;
    min-height: 50px;
    background: var(--g-primary) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--g-primary) 35%, transparent);
    transition: transform var(--g-fast) var(--g-ease), filter var(--g-fast) var(--g-ease);
}
.pay-btn:hover { filter: brightness(1.07); }
.pay-btn:active { transform: scale(.97); }

body:has(.booking-container) .gx-bottom-nav { display: none !important; }
.booking-container .sticky-mobile {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--g-z-sticky);
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-top: 1px solid var(--g-border);
    padding: var(--g-s3) var(--g-s4) calc(var(--g-s3) + env(safe-area-inset-bottom));
}
.booking-container .sticky-mobile .pay-btn { width: 100%; }
@media (min-width: 768px) { .booking-container .sticky-mobile { display: none; } }
@media (max-width: 767px) { body:has(.booking-container) { padding-bottom: 90px; } }

/* Trust strip */
.card.trust {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--g-s3) var(--g-s5);
    justify-content: center;
    border: 1px solid var(--g-border) !important;
    border-radius: var(--g-radius-lg) !important;
    box-shadow: none !important;
    color: var(--g-text-soft);
    font-size: var(--g-fs-caption);
    font-weight: 600;
}

/* ==========================================================================
   STEP 7 — User dashboard (wishlist cards, profile hub polish)
   ========================================================================== */

.gx-wish-card .g-card-media { aspect-ratio: 16 / 10; }
.gx-wish-card .g-card-body { display: flex; flex-direction: column; gap: 4px; }
.gx-wish-title {
    font-size: 15.5px;
    font-weight: 750;
    line-height: 1.35;
    color: var(--g-text) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.35em);
    text-decoration: none;
}
.gx-wish-location {
    font-size: 12px;
    color: var(--g-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.4em;
}
.gx-wish-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--g-s2);
    border-top: 1px solid var(--g-border);
    padding-top: var(--g-s2);
    margin-top: var(--g-s2);
}
.gx-wish-price { font-size: 16px; font-weight: 800; color: var(--g-text); }
.gx-wish-price small { font-size: 11.5px; font-weight: 600; color: var(--g-text-soft); }
.gx-wish-saved { font-size: 11px; color: var(--g-text-faint); white-space: nowrap; }

/* Profile hub (user/profile pages): cards + list rows on tokens */
.personal-info-title h4 { font-weight: 800; letter-spacing: -.02em; }
.profile-content-single, .personal-info-single, .account-single {
    border: 1px solid var(--g-border) !important;
    border-radius: var(--g-radius-lg) !important;
    box-shadow: var(--g-shadow);
    transition: transform var(--g-normal) var(--g-ease), box-shadow var(--g-normal) var(--g-ease);
}
@media (hover: hover) {
    .profile-content-single:hover, .account-single:hover {
        transform: translateY(-4px);
        box-shadow: var(--g-shadow-lg);
    }
}

/* ==========================================================================
   STEP 8 — Host dashboard (overview, listings, earnings, payouts)
   ========================================================================== */

/* Overview stat + metric cards */
.card.stat-card, .metric-card {
    border: 1px solid var(--g-border) !important;
    border-radius: var(--g-radius-lg) !important;
    box-shadow: var(--g-shadow) !important;
    transition: transform var(--g-normal) var(--g-ease), box-shadow var(--g-normal) var(--g-ease);
}
@media (hover: hover) {
    .card.stat-card:hover, .metric-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--g-shadow-lg) !important;
    }
}
.stat-info h3, .stat-info .h3, .metric-card h3 {
    font-weight: 800 !important;
    letter-spacing: -.02em;
}
.stat-info p, .metric-header { color: var(--g-text-soft); font-size: var(--g-fs-small); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }

/* Info / payment rows on the overview */
.info-item, .payment-item {
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius);
    padding: var(--g-s3) var(--g-s4);
    margin-bottom: var(--g-s2);
    background: var(--g-bg);
}
.payment-label { color: var(--g-text-soft); font-size: var(--g-fs-caption); }
.payment-value { font-weight: 750; }

/* Listings table: card-like rows, pill badges, contained scroll */
.vendor-property-table, .shop-view-content .table {
    border-collapse: separate !important;
    border-spacing: 0 var(--g-s2);
}
.shop-view-content .table tbody tr {
    background: var(--g-bg);
    box-shadow: 0 0 0 1px var(--g-border);
    border-radius: var(--g-radius);
}
.shop-view-content .table tbody td { border: none !important; vertical-align: middle; }
.shop-view-content .table tbody td:first-child { border-radius: var(--g-radius) 0 0 var(--g-radius); }
.shop-view-content .table tbody td:last-child { border-radius: 0 var(--g-radius) var(--g-radius) 0; }
.shop-view-content .badge {
    border-radius: 999px !important;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 10px !important;
    letter-spacing: .04em;
    padding: 4px 10px !important;
}
.listing-image img { border-radius: var(--g-radius-sm); object-fit: cover; }

/* Earnings */
.earning, .earning-list, .mobile-card, .gross-earnings {
    border: 1px solid var(--g-border) !important;
    border-radius: var(--g-radius-lg) !important;
}
.earning-list, .mobile-card { box-shadow: var(--g-shadow); background: var(--g-bg); }
.gross-earnings h3, .gross-earnings .amount { font-weight: 800 !important; letter-spacing: -.02em; }
.earning-list-border { border-color: var(--g-border) !important; }

/* Host bottom nav (vendor pages): glass to match the guest tab bar */
.bottom-nav.fixed-bottom {
    background: rgba(255, 255, 255, .88) !important;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-top: 1px solid var(--g-border);
    padding-bottom: calc(4px + env(safe-area-inset-bottom)) !important;
}

/* Payout pages */
.payout-container, .payout-info-box {
    border: 1px solid var(--g-border) !important;
    border-radius: var(--g-radius-lg) !important;
    box-shadow: var(--g-shadow);
    background: var(--g-bg);
}

/* ==========================================================================
   STEP 10 — Optimization pass
   ========================================================================== */

/* Bridge legacy feature palettes onto the canonical tokens so
   Admin > Appearance (primary color, radius) governs those pages too.
   This file loads after chat.css / host-calendar.css / reservation-cards.css,
   so these equal-specificity declarations win. */
.gchat {
    --gc-primary: var(--g-primary);
    --gc-radius: var(--g-radius);
}
.hcal {
    --hc-primary: var(--g-primary);
}
.rsv {
    --rsv-primary: var(--g-primary);
}

/* Reduced motion: silence the decorative animation layer added by this
   file (the design system already covers its own components). */
@media (prefers-reduced-motion: reduce) {
    .categories-single, .popular-single, .offer-single,
    .categories-single img, .popular-image img,
    .gx-hero, .btn-1, .gx-skel-card .g-skeleton,
    .rsv-card, .rsv-card .rsv-media img,
    .card.stat-card, .metric-card {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* ==========================================================================
   PIXEL POLISH PASS (screenshot review round 2)
   ========================================================================== */

/* --- Homepage: hero rhythm (issues 2, 7) --------------------------------- */
.gx-hero { padding: var(--g-s4) 0 var(--g-s5); }
@media (min-width: 768px) { .gx-hero { padding: var(--g-s5) 0 var(--g-s6); } }
.gx-hero-copy { margin-bottom: var(--g-s4); }
@media (min-width: 768px) { .gx-hero-copy { margin-bottom: var(--g-s5); } }
.newCategory, .categories.newCategory { padding-top: var(--g-s6) !important; }
.category-item { margin-bottom: var(--g-s6); }

/* --- Homepage: search bar as a balanced grid (issues 3, 4, 5) ------------ */
.destination-search-inner {
    display: flex !important;
    align-items: stretch !important;
    gap: 0;
    padding: var(--g-s2) !important;
}
.destination-search-inner .location-search-box,
.destination-search-inner .date,
.destination-search-inner .count {
    flex: 1 1 0 !important;
    min-width: 0;
    display: flex;
    align-items: center;
}
.destination-search-inner .select-option {
    display: flex !important;
    align-items: center !important;
    gap: var(--g-s3);
    width: 100%;
    padding: var(--g-s3) var(--g-s4);
}
.destination-search-inner .select-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
/* Desktop only: the search bar is a flex row with a vertical divider. On
   mobile the theme flattens .hr-line to a full-width 1px hairline - an
   unscoped height here turned it into gray slabs between the fields. */
@media (min-width: 992px) {
    .destination-search-inner .hr-line { align-self: center; height: 32px; }
}
@media (max-width: 991.98px) {
    .destination-search-inner .hr-line {
        width: 100%;
        height: 1px;
        align-self: stretch;
        margin: 4px 0;
    }
}
.destination-search-inner > .btn-1,
.destination-search-inner button[type="submit"].btn-1 {
    align-self: stretch !important;
    display: inline-flex;
    align-items: center;
    min-height: 56px;
    margin: 0 !important;
}

/* Dropdowns float with breathing room (issue 1) */
.location-search-dropdown, .count-container {
    margin-top: var(--g-s3) !important;
    z-index: 1200 !important;
}

/* --- Homepage: cards & carousel (issues 6, 8, 9, 10) --------------------- */
.categories-single-content { padding: var(--g-s3) var(--g-s4) var(--g-s4) !important; }
.categories-single-date {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    gap: var(--g-s2);
    min-height: 30px;
}
.wishlist-icon { top: 12px !important; right: 12px !important; }
/* Scoped to the property rails ONLY: the generic .swiper-button-* form of
   this rule was also grabbing the popular/offer section arrows (which the
   theme parks beside the title at top:-65px) and dragging the prev arrow
   onto the heading text. */
.category-swiper-box .category-swiper-button-next,
.category-swiper-box .category-swiper-button-prev {
    top: 42% !important;
}
.category-swiper-box .category-swiper-button-next { right: 4px !important; }
.category-swiper-box .category-swiper-button-prev { left: 4px !important; }

/* --- Details: booking widget (issues 2, 3, 4, 9, 10) --------------------- */
.services-overview-form {
    padding: var(--g-s5) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06) !important;
}
.gx-price-hero {
    display: flex;
    align-items: baseline;
    gap: var(--g-s2);
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -.02em;
    margin-bottom: var(--g-s2) !important;
}
.gx-price-hero small {
    font-size: 14px;
    font-weight: 600;
    color: var(--g-text-soft);
    letter-spacing: 0;
}
.services-overview-form .select-option { padding: var(--g-s3) var(--g-s4); }
.services-overview-form .reserve-btn,
.services-overview-form button[type="submit"] {
    min-height: 56px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
}

/* --- Details: content column (issues 1, 5, 6, 7, 8) ---------------------- */
.services-overview-title h1, .services-overview-left h1 {
    font-size: clamp(24px, 3vw, 30px) !important;
    line-height: 1.25 !important;
    letter-spacing: -.02em;
}
.service-amenities-list li {
    display: flex !important;
    align-items: center !important;
    gap: var(--g-s3);
    min-height: 56px;
    transition: border-color var(--g-fast) var(--g-ease), transform var(--g-fast) var(--g-ease), box-shadow var(--g-fast) var(--g-ease);
}
@media (hover: hover) {
    .service-amenities-list li:hover { transform: translateY(-2px); box-shadow: var(--g-shadow); }
}
.services-host { padding: var(--g-s4) !important; }
.host-image img { width: 64px !important; height: 64px !important; border-radius: 50%; object-fit: cover; }
#toggle-description {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--g-primary) !important;
    transition: gap var(--g-fast) var(--g-ease);
}
#toggle-description:hover { gap: 10px; }

/* --- Global rhythm (consistency batch) ------------------------------------ */
.btn-1 { min-height: 48px; }
.common-title { margin-top: 0; }

/* Dropdown overlap fix (round 3): the dropdown's z-index only competes
   inside its ancestor's stacking context, and later sections were painting
   over it. Elevate the whole hero/search wrapper into its own context above
   all content sections, and make the panels solid. */
.gx-hero,
.destination-search,
.destination-search-six {
    position: relative;
    z-index: 900;
}
.location-search-dropdown,
.count-container {
    background: #ffffff !important;
    opacity: 1 !important;
}

/* --- Details additions (review round 3) ----------------------------------- */

/* Rating under the price hero */
.gx-widget-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    margin: calc(var(--g-s2) * -1) 0 var(--g-s3);
    color: var(--g-text-soft);
}
.gx-widget-rating i { color: #f5a623; font-size: 12px; }
.gx-widget-rating strong { color: var(--g-text); font-weight: 800; }

/* Trust row under Book Now */
.gx-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--g-s2) var(--g-s4);
    list-style: none;
    margin: var(--g-s4) 0 0;
    padding: var(--g-s3) 0 0;
    border-top: 1px solid var(--g-border);
}
.gx-trust-row li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 650;
    color: var(--g-text-soft);
    white-space: nowrap;
}
.gx-trust-row li i { color: var(--g-success); font-size: 13px; }

/* Quick facts as icon tiles */
.services-overview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--g-s2);
    margin: var(--g-s3) 0 var(--g-s4);
}
.services-overview-meta > .rat {
    display: inline-flex;
    align-items: center;
    gap: var(--g-s2);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius);
    background: var(--g-bg);
    padding: var(--g-s2) var(--g-s4);
    min-height: 44px;
    font-size: 13.5px;
    font-weight: 650;
    transition: border-color var(--g-fast) var(--g-ease), box-shadow var(--g-fast) var(--g-ease);
}
@media (hover: hover) {
    .services-overview-meta > .rat:hover { border-color: var(--g-text-soft); box-shadow: var(--g-shadow); }
}
.services-overview-meta > .rat i { color: var(--g-primary); }

/* --- Property Highlights: premium pastel pills ----------------------------- */
.gx-highlights-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--g-text-soft);
    margin: var(--g-s4) 0 var(--g-s3);
}
.gx-highlights {
    margin-bottom: var(--g-s4);
    padding-bottom: var(--g-s1);
}
.gx-highlight {
    display: inline-flex;
    align-items: center;
    gap: var(--g-s2);
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    transition: transform var(--g-fast) var(--g-ease), box-shadow var(--g-fast) var(--g-ease);
}
@media (hover: hover) {
    .gx-highlight:hover { transform: translateY(-2px); box-shadow: var(--g-shadow); }
}
.gx-highlight img { height: 18px; width: auto; }
.gx-highlight i { font-size: 14px; }

/* --- Booking widget rating: trust-aware states ----------------------------- */
.gx-widget-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 14px;
    margin: var(--g-s3) 0 var(--g-s4);
    color: var(--g-text-soft);
    text-decoration: none;
}
.gx-widget-rating i { color: #f5a623; font-size: 14px; }
.gx-widget-rating strong { color: var(--g-text); font-weight: 800; font-size: 16px; }
.gx-widget-rating.clickable { cursor: pointer; border-radius: 8px; transition: opacity var(--g-fast) var(--g-ease); }
.gx-widget-rating.clickable:hover { opacity: .75; text-decoration: none; }
.gx-widget-rating.clickable:hover strong { text-decoration: underline; }

.gx-widget-rating.stacked { flex-direction: column; align-items: flex-start; gap: 3px; }
.gx-new-listing { font-size: 14.5px; font-weight: 750; color: var(--g-text); }
.gx-new-sub { font-size: 12.5px; color: var(--g-text-soft); }
.gx-host-trust { font-size: 12.5px; color: var(--g-text-soft); display: inline-flex; align-items: center; gap: 5px; }
.gx-host-trust i { font-size: 11px; }
.gx-host-trust strong { font-size: 13px; }

.gx-guest-favorite {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f9eede;
    color: #6e5426;
    border: 1px solid #e3c9a1;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 750;
    margin-left: var(--g-s1);
}

/* ==========================================================================
   Fixed-element manager - the bottom edge of the mobile viewport
   --------------------------------------------------------------------------
   Exactly one element owns the bottom edge at a time:
     browsing pages ......... .bottom-nav (z 1030), WhatsApp float raised above
     details/reserve pages .. .mobile-price-bar (z 1050), nav + float step aside
     booking funnel ......... .sticky-mobile CTA (z 1045); the layouts skip the
                              nav/float entirely (isBookingFlowRequest()) and
                              body carries .gx-booking-flow
   z-scale: nav 1030 < reserve bar 1040-1050 < sticky CTA 1045 < float 1055
   < Bootstrap modal (1055+). All bottom-fixed elements pad with
   env(safe-area-inset-bottom) (viewport-fit=cover is set in the layouts).
   ========================================================================== */

/* --- Canonical sticky booking CTA (guest info, payment, review steps) --- */
.sticky-mobile {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1045;
    background: #fff;
    border-top: 1px solid var(--g-border, #e9e9ec);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
}
.sticky-mobile .reserve-btn,
.sticky-mobile .pay-btn {
    display: block;
    width: 100%;
    min-height: 56px;
    padding: 14px 16px;
    border: none;
    border-radius: 14px;
    background: var(--primary-color, #F23F3F);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(242, 63, 63, .3);
    cursor: pointer;
}
.sticky-mobile .reserve-btn:active,
.sticky-mobile .pay-btn:active {
    transform: scale(.98);
}
@media (min-width: 768px) {
    /* Desktop uses the in-flow CTA (.btn-second / .cta-box) instead */
    .sticky-mobile { display: none; }
}

/* --- Content clearance -------------------------------------------------- */
/* Booking funnel: reserve room for the sticky CTA (56 button + 24 padding
   + border) + 16px breathing space + the device safe area. */
@media (max-width: 767.98px) {
    body.gx-booking-flow .booking-container {
        padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
    }
}
/* Browsing pages: keep content clear of the fixed bottom nav. */
@media (max-width: 991.98px) {
    body:has(.bottom-nav.fixed-bottom) {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }
}

/* --- Booking funnel belt-and-braces ------------------------------------- */
/* The layouts already skip these server-side; this guards partials that
   might still render one (cached views, third-party embeds). */
body.gx-booking-flow .bottom-nav.fixed-bottom,
body.gx-booking-flow .gx-bottom-nav,
body.gx-booking-flow .whatsapp-float {
    display: none !important;
}

/* --- Details / reserve-bar pages ---------------------------------------- */
/* The fixed price bar owns the bottom edge: the nav underneath it was dead
   weight (painted over) and the WhatsApp float sat on the Reserve button. */
body:has(.mobile-price-bar.fixed-bottom) .bottom-nav.fixed-bottom {
    display: none;
}
.mobile-price-bar.fixed-bottom {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (max-width: 991.98px) {
    body:has(.mobile-price-bar.fixed-bottom) .whatsapp-float {
        bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }
}
@media (max-width: 991.98px) {
    /* The reserve bar is taller than the nav - reserve more room (wins over
       the .bottom-nav clearance rule above by source order). */
    body:has(.mobile-price-bar.fixed-bottom) {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }
}

/* ==========================================================================
   Guest / Host workspaces
   --------------------------------------------------------------------------
   Two visually distinct modes over the same backend: browsing pages carry
   body.gx-guest-mode (light, travel-focused), the vendor dashboard area
   carries body.gx-host-mode (professional, red-accented). The .gx-mode-chip
   in each header is the always-visible mode indicator, and [data-gx-switch]
   links get a soft fade when jumping between the workspaces.
   ========================================================================== */

/* --- Persistent mode indicator ------------------------------------------ */
.gx-mode-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
    line-height: 1;
    -webkit-user-select: none;
    user-select: none;
}
.gx-mode-chip i { font-size: 12px; }
.gx-mode-chip--guest {
    background: #f4f4f5;
    border: 1px solid #e6e6ea;
    color: #3c3c43;
}
.gx-mode-chip--host {
    background: color-mix(in srgb, var(--primary-color, #F23F3F) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--primary-color, #F23F3F) 30%, #fff);
    color: var(--primary-color, #F23F3F);
}
@supports not (background: color-mix(in srgb, red 10%, white)) {
    .gx-mode-chip--host { background: #fdeaea; border-color: #f5b5b5; }
}
@media (max-width: 575px) {
    .gx-mode-chip { padding: 4px 9px; font-size: 10.5px; }
}

/* --- Sectioned profile menus ---------------------------------------------- */
.gx-menu-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px 4px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #9a9aa2;
}
.gx-menu-label i { font-size: 11px; }
.gx-menu-label--host { color: var(--primary-color, #F23F3F); }

.gx-switch-link {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 4px 10px;
    padding: 9px 12px !important;
    border-radius: 10px;
    font-weight: 700;
    background: #f6f6f8;
}
.gx-switch-link--host {
    background: color-mix(in srgb, var(--primary-color, #F23F3F) 8%, #fff);
    color: var(--primary-color, #F23F3F) !important;
}
@supports not (background: color-mix(in srgb, red 8%, white)) {
    .gx-switch-link--host { background: #fdeeee; }
}

/* --- Host workspace treatment --------------------------------------------- */
body.gx-host-mode { background: #f6f7f9; }
/* Thin brand rail pinned to the very top of the host workspace */
body.gx-host-mode::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 100001;
    background: linear-gradient(90deg,
        var(--primary-color, #F23F3F),
        color-mix(in srgb, var(--primary-color, #F23F3F) 55%, #ffb199));
    pointer-events: none;
}
body.gx-host-mode .stat-card { border-left: 3px solid var(--primary-color, #F23F3F); }

/* --- Dashboard identity blocks -------------------------------------------- */
.gx-mode-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.gx-mode-eyebrow--host { color: var(--primary-color, #F23F3F); }
.gx-mode-eyebrow--guest { color: #8a6d3b; }

.gx-guest-hello {
    margin: 8px 0 26px;
    padding: 22px 24px;
    border-radius: 18px;
    background: linear-gradient(120deg, #fff7ef, #fdeff0 60%, #f6f0ff);
    border: 1px solid #f3e4d8;
}
.gx-guest-hello h3 { margin: 0 0 4px; font-size: clamp(20px, 3.4vw, 26px); font-weight: 750; }
.gx-guest-hello p { margin: 0; color: #6f6f76; font-size: 14px; }
.gx-guest-hello .gx-hello-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--primary-color, #F23F3F);
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.gx-guest-hello .gx-hello-cta:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(242, 63, 63, .3);
}

/* --- Mode switch fade ------------------------------------------------------ */
body.gx-mode-leave {
    opacity: 0;
    transition: opacity .22s ease;
}
body.gx-mode-enter { animation: gx-mode-in .5s ease; }
@keyframes gx-mode-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    body.gx-mode-leave { transition: none; }
    body.gx-mode-enter { animation: none; }
}

/* ==========================================================================
   "More places by this host" - scroll-snap card rail on property details
   ========================================================================== */
.gx-hostmore { margin: 8px 0 44px; }
.gx-hostmore-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.gx-hostmore-head h2 {
    font-size: clamp(19px, 3vw, 24px);
    font-weight: 750;
    margin: 0;
}
.gx-hostmore-head p {
    margin: 2px 0 0;
    font-size: 13px;
    color: #6f6f76;
}
.gx-hostmore-all {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 700;
    color: #1c2b4a;
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 3px;
    border-bottom: 1.5px solid transparent;
    transition: border-color .15s ease, color .15s ease;
}
.gx-hostmore-all:hover { color: var(--primary-color, #F23F3F); border-color: currentColor; }

.gx-hostmore-rail {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 4px 2px 12px;
    -webkit-overflow-scrolling: touch;
}
.gx-hostmore-rail::-webkit-scrollbar { display: none; }

.gx-hostmore-card {
    flex: 0 0 auto;
    width: min(72vw, 268px);
    scroll-snap-align: start;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--g-border, #ececef);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .22s ease, box-shadow .22s ease;
}
.gx-hostmore-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .12);
    color: inherit;
}
.gx-hostmore-card:focus-visible {
    outline: 2px solid var(--primary-color, #F23F3F);
    outline-offset: 2px;
}
.gx-hostmore-media { aspect-ratio: 4 / 3; overflow: hidden; }
.gx-hostmore-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.gx-hostmore-card:hover .gx-hostmore-media img { transform: scale(1.04); }
.gx-hostmore-body { padding: 12px 14px 14px; }
.gx-hostmore-body h3 {
    font-size: 14.5px;
    font-weight: 700;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gx-hostmore-place {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 8px;
    font-size: 12.5px;
    color: #6f6f76;
}
.gx-hostmore-price { margin: 0; font-size: 13px; color: #6f6f76; }
.gx-hostmore-price strong { font-size: 15px; color: #111; font-weight: 800; }

/* ==========================================================================
   Guest dashboard - upcoming trip card + quick shortcuts
   ========================================================================== */
.gx-next-trip {
    display: flex;
    gap: 14px;
    align-items: stretch;
    margin-top: 16px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid #f0e2d6;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
}
.gx-next-trip:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .1);
    color: inherit;
}
.gx-next-trip img {
    width: 92px;
    height: 76px;
    border-radius: 10px;
    object-fit: cover;
    flex: 0 0 auto;
}
.gx-next-trip-body { min-width: 0; align-self: center; }
.gx-next-trip-body .gx-trip-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--primary-color, #F23F3F);
    margin-bottom: 3px;
}
.gx-next-trip-body h4 {
    font-size: 15px;
    font-weight: 750;
    margin: 0 0 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gx-next-trip-body p { margin: 0; font-size: 12.5px; color: #6f6f76; }

.gx-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.gx-quick-links a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .8);
    border: 1px solid #eadfd4;
    color: #33333a;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}
.gx-quick-links a:hover {
    background: #fff;
    transform: translateY(-1px);
    color: #111;
}

/* ==========================================================================
   Search results - active filter chips (each chip removes its filter)
   ========================================================================== */
.gx-fchips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -6px 0 18px;
}
.gx-fchip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 7px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--g-border, #e6e6ea);
    color: #2c2c33;
    font-size: 12.5px;
    font-weight: 650;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.gx-fchip span {
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gx-fchip i { font-size: 11.5px; color: #8a8a92; }
.gx-fchip .gx-fchip-x { color: #b3b3ba; }
.gx-fchip:hover {
    color: #111;
    border-color: #c9c9cf;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .07);
}
.gx-fchip:hover .gx-fchip-x { color: var(--primary-color, #F23F3F); }
.gx-fchip--clear {
    background: transparent;
    border-color: transparent;
    color: var(--primary-color, #F23F3F);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.gx-fchip--clear:hover {
    color: var(--primary-color, #F23F3F);
    box-shadow: none;
    border-color: transparent;
}

/* ==========================================================================
   Property card overlays: heart, friendly tag, slider arrows
   ========================================================================== */
/* The heart glyph was white on a white glass circle - invisible.
   style.css loads after this sheet and re-whitens it, so the override
   must out-rank it (!important + higher specificity). */
.wishlist-icon a,
.categories-single .wishlist-icon a,
.categories-item .wishlist-icon a {
    color: #26262b !important;
    font-size: 17px !important;
}
.wishlist-icon a i { line-height: 1; }
.wishlist-icon a .fa-solid.fa-heart,
.wishlist-icon .fa-solid.fa-heart {
    color: var(--primary-color, #F23F3F) !important;
}

/* Friendly tag: glass pill, replaces the 8px inline-styled badge */
.gx-card-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 72%;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
    font-size: 11px;
    font-weight: 700;
    color: #26262b;
    line-height: 1;
    pointer-events: none;
}
.gx-card-tag img { height: 14px; width: auto; display: block; }
.gx-card-tag i { font-size: 12px; }
.gx-card-tag span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* If a host badge occupies the top-left corner, the tag steps below it */
.most-favorite ~ .gx-card-tag { top: 46px; }

/* In-card image arrows: small centered circles, consistent both sides */
.categories-single button.owl-prev,
.categories-single button.owl-next {
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    background: rgba(255, 255, 255, .88) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
}
.categories-single button.owl-prev { left: 8px; }
.categories-single button.owl-next { right: 8px; }

/* Rail-level swiper arrows overlap the cards on phones, where the rail
   swipes natively anyway - desktop only. */
@media (max-width: 991.98px) {
    .category-swiper-button-next,
    .category-swiper-button-prev { display: none !important; }
}

/* ==========================================================================
   MOBILE APP LAYER (<992px)
   --------------------------------------------------------------------------
   The phone build of Guestly: compact glass app bar, search pill opening a
   full-screen sheet, bottom-sheet pickers, app typography and page enter
   fade. Everything lives behind max-width queries - desktop is untouched.
   ========================================================================== */
@media (max-width: 991.98px) {

    /* --- App bar: compact, sticky, glass, safe-area aware ---------------- */
    .main-header {
        position: sticky !important;
        top: 0;
        background: rgba(255, 255, 255, .86);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        border-bottom: 1px solid rgba(0, 0, 0, .05);
    }
    .main-header .header-lower {
        background: transparent !important;
        box-shadow: none !important;
        padding-top: env(safe-area-inset-top, 0px);
    }
    .main-header .header-lower .inner-container {
        min-height: 56px;
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .main-header .header-lower .logo img { max-height: 28px !important; }
    /* The scroll-clone header is a desktop artifact */
    .main-header .sticky-header { display: none !important; }

    /* --- Page enter: app-style fade instead of an abrupt paint ----------- */
    body { animation: gx-app-in .22s ease; }

    /* --- App typography & spacing rhythm --------------------------------- */
    .container { padding-left: 16px; padding-right: 16px; }
    .section-title, .common-title h2 { font-size: 22px !important; }
    .gx-hero-copy h1 { font-size: 26px; }
    .gx-hero-copy p { font-size: 14px; margin-bottom: 14px; }

    /* --- Search pill ------------------------------------------------------ */
    .gx-search-pill {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 54px;
        padding: 0 18px;
        border: 1px solid rgba(0, 0, 0, .08);
        border-radius: 999px;
        background: #fff;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
        font-size: 15px;
        font-weight: 650;
        color: #3c3c43;
        margin: 2px 0 8px;
        -webkit-tap-highlight-color: transparent;
        transition: transform .15s ease;
    }
    .gx-search-pill:active { transform: scale(.985); }
    .gx-search-pill i { color: var(--primary-color, #F23F3F); font-size: 15px; }
    .gx-search-pill .gx-search-pill-end { margin-left: auto; color: #8a8a92; }

    /* --- Full-screen search sheet ---------------------------------------- */
    .gx-hero form, form.gx-search-sheet { display: none; }
    body.gx-search-open { overflow: hidden; }
    body.gx-search-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 100000;
        background: rgba(0, 0, 0, .45);
    }
    /* .gx-hero is a stacking context (z-index 900): lift the whole
       context above the backdrop while the sheet is open, otherwise the
       veil paints over the sheet and swallows every tap. */
    body.gx-search-open .gx-hero { z-index: 100001; }
    body.gx-search-open form.gx-search-sheet {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: max(5dvh, env(safe-area-inset-top, 0px));
        z-index: 100001;
        background: #fff;
        border-radius: 22px 22px 0 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 0 16px calc(20px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -20px 60px rgba(0, 0, 0, .28);
        animation: gx-sheet-up .28s ease;
    }
    body.gx-search-open .destination-search-inner {
        box-shadow: none !important;
        border: 0 !important;
    }
    .gx-search-sheet-head {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 2px 10px;
        background: #fff;
        font-size: 16px;
        font-weight: 750;
        color: #16161a;
    }
    .gx-search-sheet-head button {
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 50%;
        background: #f4f4f5;
        color: #26262b;
        font-size: 15px;
        -webkit-tap-highlight-color: transparent;
    }
}

/* Sheet head never renders on desktop (d-lg-none also guards the markup) */
.gx-search-pill, .gx-search-sheet-head { display: none; }
@media (max-width: 991.98px) {
    .gx-search-pill { display: flex; }
    body.gx-search-open .gx-search-sheet-head { display: flex; }
}

/* Date picker opened from the search sheet: it attaches to <body>, so
   without this it renders underneath the sheet backdrop (invisible) and
   at coordinates computed against the document instead of the sheet. */
@media (max-width: 991.98px) {
    body.gx-search-open .daterangepicker {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 100003 !important;
        border-radius: 20px 20px 0 0;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -18px 50px rgba(0, 0, 0, .25);
    }
    body.gx-search-open .daterangepicker .drp-calendar.left,
    body.gx-search-open .daterangepicker .drp-calendar.right {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* --- Bottom sheets: guest picker (hero) and search filters --------------- */
@media (max-width: 767.98px) {
    .destination-search .count-container {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: none !important;
        border-radius: 20px 20px 0 0 !important;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        box-shadow: 0 -18px 50px rgba(0, 0, 0, .25) !important;
        z-index: 100002 !important;
        animation: gx-sheet-up .24s ease;
    }

    #categoriesModal .modal-dialog {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
        align-items: flex-end;
    }
    #categoriesModal .modal-content {
        border-radius: 20px 20px 0 0;
        max-height: 88dvh;
    }
    #categoriesModal .modal-body { overscroll-behavior: contain; }
    #categoriesModal .modal-footer {
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
    #categoriesModal.fade .modal-dialog {
        transform: translateY(100%);
        transition: transform .28s ease;
    }
    #categoriesModal.show .modal-dialog { transform: none; }
}

@keyframes gx-app-in {
    from { opacity: .35; }
    to { opacity: 1; }
}
@keyframes gx-sheet-up {
    from { transform: translateY(28px); opacity: .6; }
    to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    body { animation: none !important; }
    body.gx-search-open .gx-hero form,
    .destination-search .count-container { animation: none !important; }
    #categoriesModal.fade .modal-dialog { transition: none; }
}

/* ==========================================================================
   Homepage property rails: hearts, slideshow, explore cues, card geometry
   ========================================================================== */

/* --- Wishlist heart: unmissable, animated ------------------------------- */
.wishlist-icon a,
.categories-single .wishlist-icon a {
    width: 38px !important;
    height: 38px !important;
    background: rgba(255, 255, 255, .92) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .22) !important;
    font-size: 18px !important;
    transition: transform .16s ease, box-shadow .16s ease !important;
}
@media (hover: hover) {
    .wishlist-icon a:hover {
        transform: scale(1.1);
        box-shadow: 0 5px 14px rgba(0, 0, 0, .28) !important;
    }
}
.wishlist-icon a:active { transform: scale(.86) !important; }
.wishlist-icon .fa-solid.fa-heart {
    animation: gx-heart-pop .35s cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes gx-heart-pop {
    0% { transform: scale(.4); }
    60% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* --- No arrows inside card images: slideshow + swipe only ---------------- */
.categories-single .owl-nav,
.categories-single button.owl-prev,
.categories-single button.owl-next { display: none !important; }

/* Slideshow progress dots on the image (subtle, Airbnb-style) */
.categories-single .owl-dots {
    display: flex !important;
    justify-content: center;
    gap: 5px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 2;
    pointer-events: none;
}
.categories-single .owl-dots .owl-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: background .2s ease, transform .2s ease;
}
.categories-single .owl-dots .owl-dot.active {
    background: #fff;
    transform: scale(1.25);
}
.categories-single .owl-dots .owl-dot span { display: none; }

/* --- Card geometry: equal heights, stable image ratio (no layout shift) -- */
.category-swiper .swiper-slide { height: auto; display: flex; }
.category-swiper .swiper-slide .categories-single {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.category-swiper .categories-single-content { flex: 1 1 auto; }
.categories-single .categories-single-image a { display: block; }
.categories-single .categories-single-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.categories-single-title a {
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.35;
}

/* --- "There's more" cues -------------------------------------------------- */
.gx-rail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.gx-rail-hint {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 650;
    color: #8a8a92;
    white-space: nowrap;
}
.gx-rail-hint i { animation: gx-hint-nudge 2.2s ease-in-out infinite; }
@keyframes gx-hint-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

/* Right-edge gradient: content continues past the fold */
.category-swiper-box { position: relative; }
.category-swiper-box::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 44px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9));
}

@media (prefers-reduced-motion: reduce) {
    .wishlist-icon .fa-solid.fa-heart { animation: none; }
    .gx-rail-hint i { animation: none; }
}

/* ==========================================================================
   Header <-> hero: one seamless section
   --------------------------------------------------------------------------
   The hero's radial glow is anchored 60px ABOVE its own top edge - its
   center actually lives in the header zone. On hero pages the header
   carries the missing top half of that exact gradient on a ::before
   underlay (same size, color, and x-anchor), so the two elements paint one
   continuous wash with no horizontal seam. On scroll the theme adds
   .fixed-header: the warm layer cross-fades out (opacity, 300ms) over the
   solid glass background that app-shell.css already applies - a smooth
   warm -> white transition with no gradient snapping, flicker, or layout
   shift. Non-hero pages are untouched (scoped with :has).
   ========================================================================== */
body:has(.gx-hero) .main-header .header-lower {
    position: relative;
}
/* .main-header owns a stacking context (z-index 99999), so a negative-z
   pseudo would fall BEHIND .header-lower's background. Instead the wash
   sits at z0 over the background and the bar's content is lifted to z1. */
body:has(.gx-hero) .main-header .header-lower > * {
    position: relative;
    z-index: 1;
}
body:has(.gx-hero) .main-header .header-lower::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(900px 340px at 85% calc(100% + 60px),
            var(--g-primary-soft, #ffeaea) 0%, transparent 65%),
        linear-gradient(180deg,
            var(--g-bg-soft, #f7f7f8) 0%,
            var(--g-bg-soft, #f7f7f8) 100%);
    opacity: 1;
    transition: opacity .3s ease;
    pointer-events: none;
}
body:has(.gx-hero) .main-header.fixed-header .header-lower::before {
    opacity: 0;
}
/* No dividing line while blended; the scrolled state's hairline + shadow
   come from the existing .fixed-header rules. */
body:has(.gx-hero) .main-header:not(.fixed-header) .header-lower {
    border-bottom: 1px solid transparent;
    box-shadow: none;
}
/* The transparent border still occupies 1px and the underlay stops at the
   padding box - the bar's white background peeked through that band as a
   thin line. Stretch the wash 1px past the bottom so it paints over the
   border zone (and the mobile app bar's hairline) with the correct
   gradient at every x. */
body:has(.gx-hero) .main-header:not(.fixed-header) .header-lower::before {
    bottom: -1px;
}
/* Tuck the hero 1px under the header so sub-pixel rounding can never
   open a hairline gap at the junction. */
body:has(.gx-hero) .gx-hero { margin-top: -1px; }

/* Mobile app bar: same concept - warm at top, glass white once scrolled */
@media (max-width: 991.98px) {
    body:has(.gx-hero) .main-header {
        transition: background .3s ease, border-color .3s ease;
    }
    body:has(.gx-hero) .main-header:not(.fixed-header) {
        background: transparent;
        border-bottom-color: transparent;
    }
    /* The ::before underlay must cover the safe-area padding too */
    body:has(.gx-hero) .main-header:not(.fixed-header) .header-lower::before {
        top: calc(-1 * env(safe-area-inset-top, 0px));
    }
}

/* ==========================================================================
   Host onboarding wizard shell
   --------------------------------------------------------------------------
   One task per screen: compact top bar, human progress, focused ~660px
   column, big friendly type, and a sticky Continue bar on phones. Applies
   to every step via the shared cmn_header + the listing-details sections.
   ========================================================================== */
.gx-wiz-top {
    padding: 14px 0 6px !important;
    margin-bottom: 0 !important;
}
.gx-wiz-top .logo img { max-height: 34px; }

.gx-wiz-progress {
    width: min(660px, 100%);
    margin: 2px auto 8px;
}
.gx-wiz-progress .progress-header { font-size: 13px; color: #6f6f76; margin-bottom: 7px; }
.gx-wiz-progress .gx-wiz-phase { font-weight: 750; color: #16161a; }
.gx-wiz-progress .gx-wiz-count { font-variant-numeric: tabular-nums; }
.gx-wiz-progress .progress {
    height: 6px;
    border-radius: 999px;
    background: #eeeef1;
    overflow: hidden;
}
.gx-wiz-progress .progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-color, #F23F3F), #ff7d5c);
    transition: width .4s ease;
}
.gx-wiz-progress .gx-wiz-meta { margin: 7px 0 0; font-size: 12px; }
.gx-wiz-progress .progress-steps { display: none !important; } /* dot noise */

/* Kill the dead space between progress and content, focus the column */
section.listing-details-1 {
    padding-top: 10px !important;
    padding-bottom: 80px !important;
    min-height: auto !important;
}
section.listing-details-1 .heading-box { margin-top: 26px; }
section.listing-details-1 .heading h3 {
    font-size: clamp(24px, 3.6vw, 30px);
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1.2;
}
section.listing-details-1 .heading p {
    font-size: 14.5px;
    color: #6f6f76;
    margin-top: 6px;
}
section.listing-details-1 .location-form label {
    font-size: 13.5px;
    font-weight: 700;
    color: #26262b;
}
section.listing-details-1 .location-form textarea,
section.listing-details-1 .location-form input,
section.listing-details-1 .form-control {
    font-size: 16px; /* stops iOS focus zoom */
    border-radius: 14px;
}

/* Step actions: generous targets; sticky bar on phones */
.next-prev-btn .next-btn,
.next-prev-btn .prev-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.next-prev-btn .next-btn {
    min-width: 140px;
    border-radius: 999px;
    font-weight: 700;
}
@media (max-width: 767.98px) {
    .next-prev-btn {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        margin: 0 !important;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, .94);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-top: 1px solid rgba(0, 0, 0, .06);
    }
    .next-prev-btn .next-btn { flex: 1; margin-left: 16px; }
    section.listing-details-1 { padding-bottom: 130px !important; }
}

/* ==========================================================================
   Booking method badge (details widget) + host request countdown
   ========================================================================== */
.gx-book-badge {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin: 10px 0 4px;
    padding: 9px 12px;
    border-radius: 12px;
    background: #f7f7f8;
    border: 1px solid #ececef;
    font-size: 12.5px;
    color: #5c5c63;
}
.gx-book-badge strong { color: #16161a; font-weight: 750; }
.gx-book-badge span { flex-basis: 100%; font-size: 12px; color: #8a8a92; }
.gx-book-badge--instant {
    background: #f0faf3;
    border-color: #cdeeda;
}
.gx-book-badge--instant strong { color: #146c43; }

.gx-approval-timer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff6e8;
    border: 1px solid #f3ddb5;
    color: #8a5a00;
    font-size: 12px;
    font-weight: 700;
}
.gx-approval-timer--late { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }

/* ==========================================================================
   GX BOOKING APP LAYER (mobile < 992px)
   --------------------------------------------------------------------------
   The booking funnel (guest details -> payment -> confirmation) renders as
   an app screen on mobile: the site header is replaced by the compact
   .gx-bookbar (partials/gx_bookbar.blade.php), the footer disappears, and
   every form group becomes a tappable card. Desktop (>= 992px) keeps the
   normal website chrome - the bar is d-lg-none and everything in this
   layer is scoped to body.gx-booking-flow under 991.98px.
   z-scale: the bookbar sits at 1044 (below the sticky CTA 1045, above
   content); it owns the TOP edge the way .sticky-mobile owns the bottom.
   ========================================================================== */

/* --- App bar ------------------------------------------------------------ */
.gx-bookbar {
    position: sticky;
    top: 0;
    z-index: 1044;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 0;
}
.gx-bookbar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
}
.gx-bookbar-back,
.gx-bookbar-help {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #f4f4f5;
    color: #1f1f24;
    font-size: 16px;
    text-decoration: none;
}
.gx-bookbar-back:active,
.gx-bookbar-help:active { transform: scale(.94); }
span.gx-bookbar-help { background: transparent; }
.gx-bookbar-title {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    line-height: 1.15;
}
.gx-bookbar-title strong {
    display: block;
    font-size: 16.5px;
    font-weight: 750;
    color: #131316;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gx-bookbar-title span {
    font-size: 11.5px;
    font-weight: 600;
    color: #8b8b93;
}

/* --- Stepper ------------------------------------------------------------ */
.gx-bookbar-steps {
    display: flex;
    justify-content: center;
    gap: 26px;
    list-style: none;
    margin: 0;
    padding: 6px 0 10px;
}
.gx-bookbar-steps li {
    display: flex;
    align-items: center;
    gap: 7px;
    position: relative;
}
.gx-bookbar-steps li + li::before {
    content: '';
    position: absolute;
    left: -22px;
    top: 50%;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #e6e6ea;
}
.gx-bookbar-steps li.done + li::before { background: #1e9e5a; }
.gx-step-dot {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ececef;
    color: #8b8b93;
    font-size: 11px;
    font-weight: 750;
}
.gx-step-label {
    font-size: 12px;
    font-weight: 650;
    color: #8b8b93;
}
.gx-bookbar-steps li.active .gx-step-dot {
    background: var(--primary-color, #F23F3F);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(242, 63, 63, .14);
}
.gx-bookbar-steps li.active .gx-step-label { color: #131316; }
.gx-bookbar-steps li.done .gx-step-dot { background: #1e9e5a; color: #fff; }
.gx-bookbar-steps li.done .gx-step-label { color: #1e9e5a; }

/* Desktop keeps the site header; the app bar disappears with d-lg-none.
   Mobile funnel pages drop the website chrome entirely: */
@media (max-width: 991.98px) {
    body.gx-booking-flow .main-header,
    body.gx-booking-flow .main-footer,
    body.gx-booking-flow .common-banner {
        display: none !important;
    }
    body.gx-booking-flow {
        background:
            radial-gradient(640px 300px at 100% -4%, rgba(242, 63, 63, .05), transparent 60%),
            #fbfafa;
    }

    /* --- Shared funnel typography / spacing (8-16-24 rhythm) ------------ */
    body.gx-booking-flow .booking-container {
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 8px;
    }
    body.gx-booking-flow .booking-container h3 {
        font-size: 21px;
        font-weight: 800;
        letter-spacing: -.02em;
        color: #131316;
        margin: 8px 0 4px;
    }

    /* --- Guest information: grouped cards ------------------------------- */
    body.gx-booking-flow .traveller-box {
        background: #fff;
        border: 1px solid rgba(0, 0, 0, .06) !important;
        border-radius: 20px !important;
        box-shadow: 0 10px 30px rgba(15, 17, 21, .06) !important;
        padding: 18px 16px !important;
        margin-bottom: 16px !important;
    }
    body.gx-booking-flow .traveller-box h5 {
        font-size: 16.5px;
        font-weight: 750;
        color: #131316;
        margin-bottom: 4px !important;
    }
    body.gx-booking-flow .gx-gi-section {
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px dashed #ececef;
    }
    body.gx-booking-flow .gx-gi-section-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .6px;
        text-transform: uppercase;
        color: #8b8b93;
        margin: 0 0 4px;
    }
    body.gx-booking-flow .gx-gi-section-title i { color: var(--primary-color, #F23F3F); font-size: 12px; }
    body.gx-booking-flow .form-label {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .3px;
        text-transform: uppercase;
        color: #6f6f76;
        margin-bottom: 6px;
    }
    /* 16px inputs stop iOS zoom; 50px+ targets are one-thumb friendly */
    body.gx-booking-flow .cmn-input,
    body.gx-booking-flow input.form-control {
        min-height: 50px;
        font-size: 16px;
        border-radius: 14px;
        border: 1.5px solid #e7e7ea;
        background: #fff;
    }
    body.gx-booking-flow .cmn-input:focus,
    body.gx-booking-flow .phone-input-group:focus-within {
        border-color: var(--primary-color, #F23F3F);
        box-shadow: 0 0 0 3px rgba(242, 63, 63, .12);
    }
    body.gx-booking-flow .nice-select {
        min-height: 50px;
        height: 50px !important;
        line-height: 48px !important;
        border-radius: 14px;
        border: 1.5px solid #e7e7ea;
        font-size: 16px;
    }
    body.gx-booking-flow .phone-input-group {
        border-radius: 14px;
        border: 1.5px solid #e7e7ea;
        height: 50px;
        overflow: hidden;
    }
    body.gx-booking-flow .phone-code-wrapper .nice-select {
        height: 47px !important;
        line-height: 47px !important;
        border: none !important;
        border-radius: 0;
    }
    body.gx-booking-flow .phone-input { font-size: 16px; }

    /* --- "Imported from your profile" chip ------------------------------- */
    .gx-autofill-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 11px;
        border-radius: 999px;
        background: #eefaf2;
        border: 1px solid #cdeeda;
        color: #17794a;
        font-size: 12px;
        font-weight: 700;
        margin: 2px 0 6px;
    }
    .gx-autofill-chip i { font-size: 11px; }

    /* --- Payment: methods become large tappable cards -------------------- */
    body.gx-booking-flow .payment-container-list { display: grid; gap: 10px; }
    body.gx-booking-flow .payment-container-list .item .form-check-label {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 64px;
        padding: 12px 14px !important;
        background: #fff;
        border: 1.5px solid #e7e7ea;
        border-radius: 16px;
        transition: border-color .15s ease, background .15s ease;
    }
    body.gx-booking-flow .payment-container-list .image-area img {
        width: 44px;
        height: 44px;
        object-fit: contain;
        border-radius: 10px;
    }
    body.gx-booking-flow .payment-container-list .form-check-input[type=radio]:checked + .form-check-label {
        border-color: var(--primary-color, #F23F3F);
        background: #fff6f5;
        box-shadow: 0 6px 18px rgba(242, 63, 63, .10);
    }
    body.gx-booking-flow .booking-container .payment-methods-scroll { padding: 0; }

    /* --- Collapsible trip summary (payment page) ------------------------- */
    .gx-trip-summary {
        background: #fff;
        border: 1px solid rgba(0, 0, 0, .06);
        border-radius: 18px;
        box-shadow: 0 8px 24px rgba(15, 17, 21, .05);
        margin-bottom: 16px;
        overflow: hidden;
    }
    .gx-trip-summary summary {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        list-style: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .gx-trip-summary summary::-webkit-details-marker { display: none; }
    .gx-trip-summary summary img {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        object-fit: cover;
        flex: 0 0 auto;
    }
    .gx-trip-summary .gx-ts-info { flex: 1 1 auto; min-width: 0; }
    .gx-trip-summary .gx-ts-info strong {
        display: block;
        font-size: 14.5px;
        font-weight: 750;
        color: #131316;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .gx-trip-summary .gx-ts-info span { font-size: 12.5px; color: #8b8b93; font-weight: 600; }
    .gx-trip-summary .gx-ts-chevron {
        flex: 0 0 auto;
        color: #8b8b93;
        transition: transform .2s ease;
    }
    .gx-trip-summary[open] .gx-ts-chevron { transform: rotate(180deg); }
    .gx-trip-summary .gx-ts-body {
        padding: 0 14px 14px;
        border-top: 1px dashed #ececef;
    }

    /* --- Details page: "Select details" becomes a bottom sheet ----------- */
    #mobileBookingModal .modal-dialog {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        margin: 0;
        max-width: none;
        width: 100%;
        /* neutralize .modal-fullscreen-sm-down's 100% height so the sheet
           hugs the bottom instead of pinning to the top */
        height: auto !important;
        display: flex;
        align-items: flex-end;
        transform: translateY(24px);
        transition: transform .28s cubic-bezier(.2, .8, .3, 1);
    }
    #mobileBookingModal.show .modal-dialog { transform: translateY(0); }
    #mobileBookingModal .modal-content {
        border: 0;
        border-radius: 24px 24px 0 0 !important;
        width: 100%;
        max-height: 94dvh;
        box-shadow: 0 -18px 50px rgba(0, 0, 0, .22);
        overflow: hidden;
    }
    #mobileBookingModal .modal-header {
        position: relative;
        justify-content: center;
        padding: 22px 18px 10px;
        border-bottom: 0;
    }
    /* Drag-handle affordance */
    #mobileBookingModal .modal-header::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 42px;
        height: 4px;
        border-radius: 999px;
        background: #dcdce1;
    }
    #mobileBookingModal .modal-header h5 {
        font-size: 17px;
        font-weight: 800;
        letter-spacing: -.01em;
        margin: 0;
    }
    #mobileBookingModal .modal-header .btn-close {
        position: absolute;
        right: 14px;
        top: 14px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background-color: #f4f4f5;
        background-size: 12px;
        opacity: 1;
    }
    #mobileBookingModal .modal-body {
        padding: 4px 16px 8px;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    #mobileBookingModal .modal-footer {
        border-top: 1px solid rgba(0, 0, 0, .06);
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #fff;
    }
    #mobileBookingModal .modal-footer .reserve-btn {
        display: block;
        width: 100%;
        min-height: 56px;
        margin: 0;
        border: none;
        border-radius: 16px;
        background: var(--primary-color, #F23F3F);
        font-size: 16.5px;
        font-weight: 750;
        box-shadow: 0 8px 22px rgba(242, 63, 63, .30);
    }
    #mobileBookingModal .modal-footer .reserve-btn:active { transform: scale(.985); }

    /* Sheet content: the re-parented booking form drops its desktop card
       chrome and its rows become app cards. */
    #mobileBookingModal .services-overview-right-container,
    #mobileBookingModal .services-overview-form {
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }
    #mobileBookingModal .gx-price-hero {
        font-size: 30px;
        font-weight: 850;
        letter-spacing: -.02em;
        margin-bottom: 8px;
    }
    #mobileBookingModal .gx-price-hero small {
        font-size: 13.5px;
        font-weight: 600;
        color: #8b8b93;
        margin-left: 6px;
    }
    #mobileBookingModal .date.booking-date,
    #mobileBookingModal .count-counter.select-option {
        background: #fff;
        border: 1.5px solid #e7e7ea;
        border-radius: 16px;
        padding: 12px 14px;
        margin: 12px 0 0;
        min-height: 64px;
    }
    #mobileBookingModal .date.booking-date:active,
    #mobileBookingModal .count-counter.select-option:active { border-color: var(--primary-color, #F23F3F); }
    #mobileBookingModal .select-option { display: flex; align-items: center; gap: 12px; }
    #mobileBookingModal .select-icon {
        flex: 0 0 auto;
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: #f6f6f7;
        font-size: 17px;
        color: #131316;
    }
    #mobileBookingModal .select-option-content { flex: 1 1 auto; min-width: 0; }
    #mobileBookingModal .select-option-title {
        display: block;
        font-size: 11.5px;
        font-weight: 750;
        letter-spacing: .4px;
        text-transform: uppercase;
        color: #8b8b93;
        margin-bottom: 2px;
    }
    /* The picked range was clipping ("08/07/202..."): give the input the
       full row and let it shrink type before it truncates. */
    #mobileBookingModal #date-picker {
        width: 100%;
        border: 0;
        padding: 0;
        background: transparent;
        font-size: clamp(13.5px, 4vw, 16px);
        font-weight: 700;
        color: #131316;
        text-overflow: ellipsis;
    }
    #mobileBookingModal .count-input { display: flex; gap: 14px; }
    #mobileBookingModal .count-counter-inner { display: flex; align-items: baseline; gap: 4px; }
    #mobileBookingModal .count-counter-inner span { font-size: 16px; font-weight: 750; color: #131316; }
    #mobileBookingModal .count-counter-inner p { font-size: 13px; color: #8b8b93; margin: 0; font-weight: 600; }

    /* Guest stepper rows inside the sheet */
    #mobileBookingModal .count-container {
        border: 1.5px solid #e7e7ea;
        border-radius: 16px;
        margin-top: 8px;
        padding: 4px 14px;
        background: #fff;
    }
    #mobileBookingModal .count-single {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
    }
    #mobileBookingModal .count-single + .count-single { border-top: 1px dashed #ececef; }
    #mobileBookingModal .count-single-text h6 { font-size: 15px; font-weight: 700; margin: 0; }
    #mobileBookingModal .count-single-text p { font-size: 12px; color: #8b8b93; margin: 2px 0 0; }
    #mobileBookingModal .count-single-inner { display: flex; align-items: center; gap: 14px; }
    #mobileBookingModal .count-single-inner button {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1.5px solid #d9d9de;
        background: #fff;
        color: #131316;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
    }
    #mobileBookingModal .count-single-inner button:active {
        border-color: var(--primary-color, #F23F3F);
        color: var(--primary-color, #F23F3F);
        transform: scale(.92);
    }
    #mobileBookingModal .count-single-inner span { font-size: 16px; font-weight: 750; min-width: 18px; text-align: center; }

    /* Price breakdown card */
    #mobileBookingModal .services-overview-form-list {
        background: #f9f9fa;
        border: 1px solid #ececef;
        border-radius: 16px;
        padding: 14px;
        margin-top: 14px;
    }
    #mobileBookingModal .services-overview-form-list ul { margin: 0; padding: 0; }
    #mobileBookingModal .services-overview-form-list ul > div {
        font-size: 14px;
        color: #4b4b52;
        padding: 3px 0;
    }
    #mobileBookingModal .gx-book-badge { margin: 10px 0 8px; }
    #mobileBookingModal .gx-trust-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
        margin: 14px 0 4px;
        padding: 0;
    }

    /* Confirmation / gateway pages inherit the same shell */
    body.gx-booking-flow .card.trust {
        border: 1px solid rgba(0, 0, 0, .06);
        border-radius: 16px;
    }
}

/* --- Payment loading overlay (methods page + gateway bridge) ------------ */
/* One continuous "Preparing your secure payment" state replaces the old
   visible redirect page between Pay & Confirm and the gateway checkout. */
.gx-paybridge-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000; /* above page chrome, below the gateway's own modal */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: opacity .3s ease;
}
.gx-paybridge-overlay.gx-hide { opacity: 0; pointer-events: none; }
.gx-paybridge-overlay .gx-pb-spinner {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 4px solid #f0d3d3;
    border-top-color: var(--primary-color, #F23F3F);
    animation: gx-pb-spin .8s linear infinite;
}
@keyframes gx-pb-spin { to { transform: rotate(360deg); } }
.gx-paybridge-overlay p {
    font-size: 15px;
    font-weight: 700;
    color: #131316;
    margin: 0;
}
.gx-paybridge-overlay small { color: #8b8b93; font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) {
    .gx-paybridge-overlay .gx-pb-spinner { animation-duration: 1.6s; }
}

/* Keyboard open (any field focused): the sticky CTA steps aside so it never
   covers the input being typed in; it returns on blur. */
@media (max-width: 991.98px) {
    body.gx-kb-open .sticky-mobile {
        transform: translateY(120%);
        transition: transform .2s ease;
    }
    .sticky-mobile { transition: transform .2s ease; }
}

@media (prefers-reduced-motion: reduce) {
    #mobileBookingModal .modal-dialog { transition: none; }
    .gx-trip-summary .gx-ts-chevron { transition: none; }
    body.gx-kb-open .sticky-mobile, .sticky-mobile { transition: none; }
}

/* ============================================================
   Guestly Property - the platform-managed premium tier
   ============================================================ */
/* Image-corner badge (cards): quiet dark glass, gold star */
.gx-guestly-badge {
    position: absolute;
    bottom: 12px;
    left: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(22, 22, 27, .80);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #fff;
    line-height: 1;
    pointer-events: none;
}
.gx-guestly-badge .gx-gstar { color: #F6C244; font-size: 11px; }

/* Details-page trust card */
.gx-guestly-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin: 18px 0;
    padding: 18px;
    border: 1px solid #EFE3C8;
    border-radius: 16px;
    background: linear-gradient(135deg, #FFFDF7 0%, #FBF4E4 100%);
}
.gx-guestly-card .gx-gc-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #16161B;
    color: #F6C244;
    font-size: 18px;
}
.gx-guestly-card h5 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 800;
    color: #16161B;
}
.gx-guestly-card p {
    margin: 0 0 10px;
    font-size: 13px;
    color: #55555e;
}
.gx-guestly-card ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.gx-guestly-card ul li {
    font-size: 12.5px;
    font-weight: 600;
    color: #33333a;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.gx-guestly-card ul li i { color: #B98A1E; font-size: 12px; }

/* Amenities preview: top items + "Show all" opener */
.gx-amenities-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 18px;
    border: 1px solid #d8d8de;
    border-radius: 10px;
    background: #fff;
    font-size: 13.5px;
    font-weight: 700;
    color: #26262b;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.gx-amenities-more:hover { background: #f6f6f8; border-color: #b9b9c2; }

/* Filter modal: Guestly-only switch row */
.gx-guestly-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #ECECEF;
    border-radius: 14px;
    background: #FFFDF7;
    margin-bottom: 16px;
}
.gx-guestly-filter .gx-gf-copy b { display: block; font-size: 14px; color: #16161B; }
.gx-guestly-filter .gx-gf-copy small { color: #6a6a73; font-size: 12px; }

/* Premium card polish: softer depth, gentle hover lift */
.categories-single {
    border-radius: 18px;
    transition: transform .22s ease, box-shadow .22s ease;
}
.categories-single:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(22, 22, 27, .12);
}
.categories-single .categories-single-image-container,
.categories-single .categories-single-image img {
    border-radius: 16px;
}