/* ==========================================================================
   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; }

/* ---------------------------------------------------------------------------
   PRICE + OFFER on a card.

   The headline is what the guest will be charged for a night, promotion
   already taken off. `.gx-price-was` is the same night at full price and only
   renders when the host is running an offer — a strike-through beside an
   identical number is noise, and a strike-through beside a HIGHER number that
   nobody is charging is a lie.

   The two sit on one line and wrap as a unit, because a card is 160px wide on
   a small phone and "₹3,919 ₹3,219 20% off" breaking mid-price is worse than
   breaking after it.
   --------------------------------------------------------------------------- */

.gx-price-was {
    margin-left: 6px;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--g-text-faint, #9ca3af) !important;
    text-decoration: line-through;
    /* The struck price is context, never the thing being quoted. */
    white-space: nowrap;
}

.gx-off-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: .01em;
    white-space: nowrap;
    /* The design system's own success pair — no new palette. */
    color: var(--g-success, #1e8e4b);
    background: var(--g-success-soft, #e3f7e9);
    border: 1px solid color-mix(in srgb, var(--g-success, #1e8e4b) 22%, transparent);
}

/* On the card the badge shares the price row, so it must not push the rating
   pill onto a second line. */
.categories-single-date .gx-off-badge { margin-top: 0; }

.gx-price-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}
.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.
   The card chrome lives on the OUTER .services-overview-right-container and
   the sticky behaviour on .services-overview-right (its parent .col-lg-5 is
   the only ancestor tall enough to give a sticky child room to travel).
   Both are set in the "DETAILS BOOKING WIDGET" section further down. */
.services-overview-form {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent;
}

/* 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) --------------------- */
/* NOTE: .services-overview-form no longer draws its own card - the outer
   .services-overview-right-container is the single card (see "DETAILS
   BOOKING WIDGET" below). Keeping a second bordered/padded box here is what
   gave the widget two left edges and ~56px of nested padding per side. */
.gx-price-hero {
    display: flex;
    align-items: baseline;
    gap: var(--g-s2);
    font-size: 26px !important;
    font-weight: 800 !important;
    /* !important like its siblings: without it the theme's own rule wins and
       a 26px glyph runs in a 24px line box, clipping the descenders. */
    line-height: 1.15 !important;
    letter-spacing: -.02em;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
    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) ----------------------------------- */

/* (The old .gx-widget-rating block lived here. The booking widget's rating,
   booking-method and cancellation lines are now one .gx-bw-meta pill strip -
   see "DETAILS BOOKING WIDGET" further down.) */

/* Trust row under Book Now - de-emphasised footnote, not a third block */
.gx-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--g-s1) var(--g-s3);
    list-style: none;
    margin: var(--g-s3) 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: 5px;
    /* --g-text-soft (#6f6f76, ~5.3:1) not --g-text-faint (#9c9ca3, ~2.9:1):
       tightening this card briefly dropped these three reassurances below the
       WCAG AA 4.5:1 floor. They are the last thing a guest reads before paying,
       so they are exactly the wrong text to make hard to read. */
    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: 12px; }

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

/* (The trust-aware rating states that lived here - .gx-widget-rating,
   .gx-new-listing, .gx-host-trust, .gx-guest-favorite - were folded into the
   .gx-bw-meta pill strip; see "DETAILS BOOKING WIDGET" further down.) */

/* ==========================================================================
   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;
}
/* Top-left badge stack: host badge ("Rising Host") above the friendly tag
   ("Couple Friendly").

   These were two independently positioned pills — .most-favorite at
   top:16px/left:16px, .gx-card-tag at top:10px/left:10px — pushed apart by a
   hardcoded `.most-favorite ~ .gx-card-tag { top: 46px }`. That step only held
   while the host badge was exactly one line at exactly 14px: a longer badge
   title wrapped and the two pills overlapped, and the 6px difference in `left`
   left their edges visibly misaligned even when they didn't.

   One flex column instead. The gap is real spacing, so the pills cannot touch
   whatever either of them contains. */
.gx-card-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    /* Clear of the wishlist heart in the opposite corner. */
    max-width: calc(100% - 60px);
}

/* Inside the stack the pills are laid out by flex, not by coordinates. */
.gx-card-badges .most-favorite,
.gx-card-badges .gx-card-tag {
    position: static;
    top: auto;
    left: auto;
    max-width: 100%;
}

/* One line each, ellipsised — a wrapping pill is what broke the old stack,
   and a two-line badge on a photo reads as a mistake either way. */
.gx-card-badges .most-favorite a,
.gx-card-badges .gx-card-tag span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gx-card-badges .most-favorite a { font-size: 12px; padding: 6px 12px; line-height: 1.35; }

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

/* ==========================================================================
   Host request countdown (reservation list)
   --------------------------------------------------------------------------
   The old .gx-book-badge block that shared this section is gone: the details
   widget now shows the booking method as a .gx-bw-pill (see "DETAILS BOOKING
   WIDGET"), with the long-form sentence collapsed into its <details>.
   ========================================================================== */
.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;
    }
    /* Exactly one box per field in the sheet too. The two rules above pick
       the element that draws the card (the wrapper for dates, the row itself
       for guests), so the OTHER one in each pair has to stay plain - the
       shared search-bar/details styling would otherwise draw a second border
       inside the first, which is the same nesting the desktop card just lost. */
    #mobileBookingModal .date.booking-date .select-option {
        padding: 0 !important;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    #mobileBookingModal .count {
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0;
        background: transparent;
    }
    #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. `top` has to track the trigger:
       21-services pins it at a hard 72px, which sat *inside* the row. */
    #mobileBookingModal .count-container {
        top: 100% !important;
        /* the hero search bar nudges this dropdown 10px left under 768px;
           in the sheet it has to line up with the field it drops from */
        left: 0 !important;
        right: auto !important;
        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;
    }
    /* ...but the total keeps its rule + breathing room (the blanket
       `ul > div` padding above would otherwise flatten the divider).
       The selector must match that blanket rule's shape, not just the class:
       `#id .class` is (1,1,0) and loses to `#id .class ul > div` at (1,1,2),
       so the short form was dead and the comment above it was describing an
       intention the browser never honoured. */
    #mobileBookingModal .services-overview-form-list ul > div.gx-bw-line--total { padding: 10px 0 0; }
    #mobileBookingModal .services-overview-form-list ul > div.gx-bw-line--foot { padding: 4px 0 0; }
    #mobileBookingModal .gx-bw-meta { margin: 10px 0 8px; }
    #mobileBookingModal .gx-bw-more { margin-bottom: 4px; }
    /* The sheet has room, so the card head divider is not needed there. */
    #mobileBookingModal .gx-bw-head {
        padding-bottom: 0;
        margin-bottom: 4px;
        border-bottom: 0;
    }
    #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;
}

/* Expired enquiry: shown INSTEAD of the composer, never as a disabled input.
   A dead textarea invites typing and explains nothing; the notice says what
   happened and what to do next. Tokens only, per the design-system rule. */
.gchat-expired {
    padding: 14px 16px;
    text-align: center;
    border-top: 1px solid var(--g-border, #e6e6e6);
    background: var(--g-bg-soft, #fafafa);
}
.gchat-expired p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--g-muted, #6b7280);
}

/* ── Host onboarding: what are you listing? ─────────────────────────────
   Entire Property today; Private and Shared Rooms are shown as "coming soon"
   rather than hidden, so a host learns what is on the way. The cards are
   driven by the server list, so this styling must work for any number of them.

   Two colour rules this block earns the hard way:

   1. Real tokens only. --g-card / --g-ink / --g-muted are declared nowhere in
      the design system, so every var() here silently resolved to its literal
      fallback and Admin > Appearance had no say over these cards. The DS
      names are --g-bg / --g-text / --g-text-soft.

   2. No page-level dark override lives here. The legacy theme is light-only
      and dark is opt-in per surface (.g-dark / [data-g-theme="dark"] in
      guestly-ds.css). An ungated @media (prefers-color-scheme: dark) used to
      repaint these cards near-black inside an otherwise white page while
      leaving the text colour alone — the option name came out at 1.00:1
      contrast and vanished, which is exactly what a host reported. Consuming
      the tokens means both schemes follow whatever the surface says, with no
      second copy of the palette to keep in sync. */
.gx-space-types {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}
.gx-space-type {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    text-align: left;
    /* A <button> does not inherit type: without this the cards render in the
       UA's 13.33px Arial instead of the page's body font. */
    font: inherit;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--g-border, #e9e9ec);
    background: var(--g-bg, #fff);
    color: var(--g-text, #1f1f23);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}
.gx-space-type:hover { border-color: var(--primary-color, #f23f3f); }
.gx-space-type.is-selected {
    border-width: 2px;
    border-color: var(--primary-color, #f23f3f);
    background: var(--g-primary-soft, rgba(242, 63, 63, .07));
}
.gx-space-type-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gx-space-type-head strong { font-size: var(--g-fs-body, 16px); font-weight: 700; }
.gx-space-type-tagline { font-size: 13px; color: var(--g-text-soft, #6f6f76); }

/* Unavailable: reads as "not yet", never as broken and never as illegible.
   The dimming used to be one blanket `opacity: .55`, which dragged the option
   name to 3.83:1 on white — under the 4.5:1 AA floor at this size — and faded
   the pill and focus ring with it. The state now comes from the surface
   (recessed fill, dashed hairline, dimmed ink), so every piece keeps a
   contrast that can be named. Still focusable and still clickable: the tap is
   what surfaces the explanation, so this is aria-disabled, not [disabled],
   which would swallow the tap and leave the host with silence. */
.gx-space-type.is-unavailable {
    background: var(--g-bg-soft, #f7f7f8);
    border-style: dashed;
    border-color: var(--g-border, #e9e9ec);
    color: var(--g-text-soft, #6f6f76);
    cursor: not-allowed;
}
/* Hover must not promise a selection that cannot happen. */
.gx-space-type.is-unavailable:hover { border-color: var(--g-border, #e9e9ec); }
.gx-space-type.is-unavailable .gx-space-type-head strong {
    /* Dimmed enough to read as unavailable, dark enough to stay comfortably
       legible: measured 6.71:1 on the recessed fill in light and 8.04:1 on a
       .g-dark surface. Where color-mix() is unsupported this declaration
       drops and the name inherits --g-text-soft above, which is still AA. */
    color: color-mix(in srgb, var(--g-text, #1f1f23) 74%, var(--g-bg-soft, #f7f7f8));
}
.gx-space-type.is-unavailable .gx-space-type-tagline { color: var(--g-text-soft, #6f6f76); }
/* The pill sits on the recessed fill, so it borrows the card colour the
   selectable options use — otherwise chip and card are the same grey. */
.gx-space-type.is-unavailable .gx-pill {
    background: var(--g-bg, #fff);
    border: 1px solid var(--g-border, #e9e9ec);
}
.gx-space-type:focus-visible {
    outline: 2px solid var(--primary-color, #f23f3f);
    outline-offset: 2px;
}
.gx-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--g-bg-soft, #f7f7f8);
    color: var(--g-text-soft, #6f6f76);
}
.gx-pill-primary {
    background: var(--g-primary-soft, rgba(242, 63, 63, .1));
    color: var(--primary-color, #f23f3f);
}
.gx-space-trust {
    padding: 14px;
    border-radius: 14px;
    background: var(--g-bg-soft, #f7f7f8);
    color: var(--g-text, #1f1f23);
    font-size: 13px;
}
.gx-space-trust ul { margin: 8px 0 0; padding-left: 18px; }
.gx-space-trust li { color: var(--g-text-soft, #6f6f76); margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   "12 km away" on a property card

   Its own line under the title rather than a third chip in
   .categories-single-date: that row is a space-between flex holding the price
   and the rating, and a third item collapses both at 320px.

   Whole kilometres only — the number comes from GeoOrigin::publishableKm, and
   the rounding there is a privacy control, not formatting. Rendered only when
   the guest actually shared a location, so this element is simply absent for
   everyone else and the card keeps its usual height rhythm.
-------------------------------------------------------------------------- */
.gx-card-distance {
    display: inline-flex;
    align-items: center;
    gap: var(--g-s1);
    margin-bottom: var(--g-s1);
    font-size: var(--g-fs-small);
    font-weight: 600;
    line-height: 1.3;
    color: var(--g-text-soft);
}
/* Muted, not the gold of the rating star two lines down: distance is
   context, not a score. Beats `.categories-single-date .rat i`. */
.gx-card-distance i { font-size: 11px; color: var(--g-text-faint); }

/* ==========================================================================
   DETAILS BOOKING WIDGET - one aligned card
   --------------------------------------------------------------------------
   The widget used to be a card inside a card (.services-overview-right-
   container border+32px padding wrapping .services-overview-form border+24px
   padding), with each field wrapped a second time (.date / .count padding +
   background around an already-bordered .select-option). That produced three
   competing left edges and pushed the card past 960px tall, so "Book Now"
   fell below the fold on a laptop.

   Layout contract now:
     .services-overview-right ............ sticky rail (parent .col-lg-5 is
                                           the only ancestor tall enough to
                                           give a sticky child travel room)
     .services-overview-right-container .. THE card: border, radius, shadow,
                                           one padding, one left edge
     .services-overview-form ............. plain flow, no chrome
     rows ................................ price hero / meta pills /
                                           <details> / dates / guests /
                                           breakdown grid / CTA / trust row

   Secondary information is collapsed, never deleted: the booking-method,
   rating and cancellation sentences live inside .gx-bw-more.
   Everything is token-driven so Admin > Appearance and dark mode still rule.
   ========================================================================== */

/* --- Card head: price + meta pills + disclosure -------------------------- */
.gx-bw-head {
    padding-bottom: var(--g-s3);
    margin-bottom: var(--g-s4);
    border-bottom: 1px solid var(--g-border);
}

.gx-bw-meta {
    --gx-star: #f5a623; /* no gold token in the DS; scoped so it stays local */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--g-s2);
    margin: 0 0 var(--g-s2);
}
.gx-bw-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 5px 10px;
    border: 1px solid var(--g-border);
    border-radius: 999px;
    background: var(--g-bg-soft);
    color: var(--g-text-soft);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.3;
    white-space: nowrap;
    text-decoration: none;
}
.gx-bw-pill:hover { text-decoration: none; }
.gx-bw-pill strong { color: var(--g-text); font-weight: 800; }
.gx-bw-pill i { font-size: 11px; }

/* Ink is the brand hue pulled toward the body text colour, NOT the raw token.
   --g-success / --g-warning are chosen to read on white; on their own -soft
   fills they roughly halve in contrast. Mixing toward --g-text also fixes this
   in dark mode for free: --g-text inverts there, so the ink darkens on a light
   fill and lightens on a dark one, while --g-success itself has no dark
   override at all. */
.gx-bw-pill--instant {
    background: var(--g-success-soft);
    border-color: color-mix(in srgb, var(--g-success) 28%, transparent);
    color: color-mix(in srgb, var(--g-success) 65%, var(--g-text));
}
.gx-bw-pill--instant strong { color: color-mix(in srgb, var(--g-success) 65%, var(--g-text)); }
.gx-bw-pill--favorite {
    background: var(--g-warning-soft);
    border-color: color-mix(in srgb, var(--g-warning) 30%, transparent);
    color: color-mix(in srgb, var(--g-warning) 65%, var(--g-text));
}
.gx-bw-pill--rating { cursor: pointer; transition: border-color var(--g-fast) var(--g-ease); }
.gx-bw-pill--rating i { color: var(--gx-star); }
.gx-bw-pill--rating:hover { border-color: var(--g-text-soft); }
.gx-bw-pill--rating:hover strong { text-decoration: underline; }
/* A policy name can be long ("Strict - long term stays"): let this one wrap
   rather than push the strip wider than the card. */
.gx-bw-pill--policy { cursor: help; white-space: normal; }

/* Disclosure holding the long-form copy for every pill above */
.gx-bw-more { margin: 0; }
.gx-bw-more > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 2px 0;
    list-style: none;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--g-text-soft);
    transition: color var(--g-fast) var(--g-ease);
}
.gx-bw-more > summary::-webkit-details-marker { display: none; }
.gx-bw-more > summary::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--g-fast) var(--g-ease);
}
.gx-bw-more[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.gx-bw-more > summary:hover { color: var(--g-text); }
.gx-bw-more > summary:focus-visible {
    outline: 2px solid var(--g-primary);
    outline-offset: 3px;
    border-radius: 4px;
}
.gx-bw-more-body { margin-top: var(--g-s2); }
.gx-bw-more-body p {
    margin: 0 0 6px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--g-text-soft);
}
.gx-bw-more-body p:last-child { margin-bottom: 0; }
.gx-bw-more-body strong { color: var(--g-text); font-weight: 750; }

/* --- Price breakdown: label/value grid ----------------------------------- */
/* One right-hand column for every figure, tabular numerals so the decimal
   points stack. Rows are <div>s inside the <ul> the theme shipped - the
   mobile sheet styles them as `ul > div`, so the wrapper stays. */
.gx-bw-summary { margin-top: var(--g-s4); }
.gx-bw-summary ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.gx-bw-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--g-s3);
    padding: 3px 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--g-text-soft);
}
.gx-bw-line-label { min-width: 0; }
.gx-bw-line-value {
    justify-self: end;
    text-align: right;
    white-space: nowrap;
    font-weight: 700;
    color: var(--g-text);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
/* Same mix as the pills: the raw token is tuned for white, and this sits on the
   card fill at 13.5px bold, which AA still holds to 4.5:1. */
.gx-bw-line-value--credit { color: color-mix(in srgb, var(--g-success) 65%, var(--g-text)); }
/* The fee disclosure under the nightly line. Informational, not a sum line —
   the charges are INSIDE the figure above it, so this must read as a footnote,
   not as another amount waiting to be added. Collapsed by default: WHAT is
   included is stated; HOW MUCH opens on demand. */
.gx-bw-fee-note {
    padding: 0 0 6px;
    margin-top: -2px;
    font-size: 11.5px;
    color: var(--g-text-faint);
}
.gx-bw-fee-note .gx-bw-line-label { font-weight: 500; }
.gx-incl-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 0;
    border: 0;
    background: none;
    font-size: 11.5px;
    font-weight: 550;
    color: var(--g-text-soft);
    cursor: pointer;
}
.gx-incl-toggle i { font-size: 10px; transition: transform var(--g-fast, .15s) ease; }
.gx-incl-toggle--open i { transform: rotate(180deg); }
.gx-incl-toggle:hover { color: var(--g-text); }
.gx-incl-detail {
    margin: -2px 0 8px;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--g-bg-soft);
}
.gx-bw-line--sub { font-size: 12px; padding: 2px 0; }
.gx-bw-line--sub .gx-bw-line-value { font-weight: 600; color: var(--g-text-soft); font-size: 12px; }

/* The offer's worth, in rupees, on the panel — a note in success green, never
   a subtracting row: the nightly figure above is already post-offer. */
.gx-bw-savings {
    margin: 2px 0 6px;
    padding: 7px 10px;
    border-radius: 10px;
    background: var(--g-success-soft, #e3f7e9);
    font-size: 12px;
    font-weight: 650;
    color: var(--g-success, #1e8e4b);
}
.gx-bw-savings i { margin-right: 4px; font-size: 11px; }
.gx-bw-savings #gx-savings-value { font-weight: 800; }

/* The hero's qualifier moved to its own quiet line: inline it shoved the
   struck price to the far edge and three fragments fought on one baseline. */
.gx-price-hero-sub {
    margin: -4px 0 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--g-text-soft);
    letter-spacing: 0;
}

.gx-bw-line--total {
    margin-top: var(--g-s3);
    padding-top: var(--g-s3);
    border-top: 1px solid var(--g-border);
    font-size: 15px;
    color: var(--g-text);
}
.gx-bw-line--total .gx-bw-line-label { font-weight: 750; }
.gx-bw-line--total .gx-bw-line-value {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.gx-bw-line--foot { padding: 2px 0 0; }
.gx-bw-line--foot .microcopy {
    /* "inclusive of all applicable taxes" is a price disclosure, so it has to
       be legible. It previously carried an INVALID `color: var(--muted)` (that
       token does not exist anywhere in this codebase), which meant the
       declaration was dropped and the text simply inherited the card's dark
       body colour. Replacing it with a real but faint token was therefore a
       regression dressed as a cleanup. */
    font-size: 12px;
    line-height: 1.4;
    color: var(--g-text-soft);
}
.gx-bw-line--foot .price-details-link {
    justify-self: end;
    padding: 0;
    border: 0;
    background: none;
    color: var(--g-primary);
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}
.gx-bw-line--foot .price-details-link:focus-visible {
    outline: 2px solid var(--g-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- Desktop: collapse the nested boxes into one card -------------------- */
/* Scoped to >=992px on purpose: below that the whole form is re-parented into
   #mobileBookingModal, which owns its own (sheet) layout. */
@media (min-width: 992px) {
    /* .page-wrapper carries `overflow: hidden` (01-global.css) to swallow the
       few px of horizontal overflow the theme leaks. That also turns it into
       a scroll container, which silently made every `position: sticky` inside
       it inert - the booking card has never actually stuck. `overflow-x: clip`
       clips exactly the same way WITHOUT creating a scroll container, so the
       rail can stick again. Scoped to this page (only the details template
       renders .mobile-price-bar) to keep the change off every other route. */
    body:has(.mobile-price-bar) .page-wrapper {
        overflow: visible;
        overflow-x: clip;
    }

    .services-overview-right {
        position: sticky;
        top: 88px;
        margin-left: var(--g-s7) !important;
        margin-top: 0 !important;
    }
    .services-overview-right-container {
        padding: var(--g-s5) !important;
        border: 1px solid var(--g-border) !important;
        border-radius: var(--g-radius-lg) !important;
        background: var(--g-bg) !important;
        box-shadow: var(--g-shadow-lg);
    }
    .services-overview-form {
        position: static !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    /* The .date / .count wrappers were a second box around each field: drop
       their padding and background so .select-option is the only bordered
       row and every row starts on the card's single left edge. */
    .services-overview-form .date,
    .services-overview-form .count {
        padding: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        margin-bottom: var(--g-s3) !important;
    }
    .services-overview-form .select-option {
        padding: var(--g-s3) var(--g-s4) !important;
        min-height: 62px;
        line-height: 1.35;
        border-radius: var(--g-radius-sm);
        border-color: var(--g-border);
        background: var(--g-bg);
    }
    .services-overview-form .select-icon { width: 36px; height: 36px; }
    .services-overview-form .select-icon i { font-size: 16px; }
    /* The shared search-bar styling gives every .select-option-content a
       20px bottom margin (it needs it in the horizontal hero bar). Inside
       this vertical card it is just dead space under the value. */
    .services-overview-form .select-option-content { margin-bottom: 0 !important; }
    .services-overview-form .select-option-title {
        line-height: 1.35;
        margin-bottom: 1px !important;
    }
    .services-overview-form .count-counter-inner p { line-height: 1.35; }

    /* The guests dropdown hangs off .count, whose 15px padding just went
       away - anchor it to the trigger instead of a magic 72px. The 12px
       margin-top is a hero-search rule; the offset is in `top` here. */
    .services-overview-form .count-container {
        top: calc(100% + var(--g-s2)) !important;
        margin-top: 0 !important;
        width: 100% !important;
    }

    .services-overview-form-btn { margin: 0; }
    .services-overview-form-btn .btn-1 { margin-top: var(--g-s3) !important; }

    /* Footnote link sits under the card, tight to it. */
    .services-overview-report { margin-top: var(--g-s3) !important; }
}

@media (prefers-reduced-motion: reduce) {
    .gx-bw-pill,
    .gx-bw-more > summary,
    .gx-bw-more > summary::after {
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   RESUME YOUR LISTING  (<x-gx.resume-drafts>)
   An unfinished onboarding session is NOT a listing, so it never appears in
   the listings table. It lives here instead: a box directly below the
   create-a-listing CTA, on the host listings page and on Become a Host.
   Mobile-first (320px up); every colour is a --g-* token so Appearance and
   dark mode govern it.
   ========================================================================== */
.gx-drafts {
    margin: var(--g-s4) 0 var(--g-s5);
    padding: var(--g-s4);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius);
    background: var(--g-bg-soft);
    color: var(--g-text);
}

.gx-drafts-head h4 {
    margin: 0 0 var(--g-s1);
    font-size: var(--g-fs-card);
    font-weight: 700;
    color: var(--g-text);
}

.gx-drafts-head p {
    margin: 0 0 var(--g-s3);
    font-size: var(--g-fs-caption);
    line-height: 1.45;
    color: var(--g-text-soft);
}

.gx-draft-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--g-s3);
}

.gx-draft {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--g-s3);
    padding: var(--g-s3);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    background: var(--g-bg);
}

.gx-draft-thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: var(--g-radius-sm);
    overflow: hidden;
    background: var(--g-bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--g-text-faint);
    font-size: 20px;
}

.gx-draft-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* min-width:0 so a long title truncates instead of pushing the actions off
   a 320px screen. */
.gx-draft-main {
    flex: 1 1 180px;
    min-width: 0;
}

.gx-draft-main h5 {
    margin: 0 0 2px;
    font-size: var(--g-fs-body);
    font-weight: 600;
    color: var(--g-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gx-draft-meta {
    margin: 0 0 var(--g-s2);
    font-size: var(--g-fs-small);
    color: var(--g-text-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.gx-draft-next { color: var(--g-text); font-weight: 600; }
.gx-draft-dot { color: var(--g-text-faint); }

.gx-draft-progress {
    display: flex;
    align-items: center;
    gap: var(--g-s2);
}

.gx-draft-bar {
    flex: 1 1 auto;
    height: 6px;
    min-width: 60px;
    border-radius: 999px;
    background: var(--g-bg-hover);
    overflow: hidden;
}

.gx-draft-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--g-primary);
    transition: width var(--g-normal) var(--g-ease);
}

.gx-draft-pct {
    flex: 0 0 auto;
    font-size: var(--g-fs-small);
    color: var(--g-text-soft);
    white-space: nowrap;
}

.gx-draft-actions {
    display: flex;
    align-items: center;
    gap: var(--g-s2);
    margin-left: auto;
}

/* 320-430px: the row stacks and both controls become full-width, 44px-tall
   targets rather than two cramped pills. */
@media (max-width: 575.98px) {
    .gx-drafts { padding: var(--g-s3); }
    .gx-draft-actions {
        margin-left: 0;
        width: 100%;
    }
    .gx-draft-actions .g-btn {
        flex: 1 1 0;
        justify-content: center;
        min-height: 44px;
    }
    .gx-draft-main { flex-basis: calc(100% - 56px - var(--g-s3)); }
}

@media (prefers-reduced-motion: reduce) {
    .gx-draft-bar > span { transition: none; }
}

/* ---- Footer legal links (LGL-3) -------------------------------------- */
.gx-footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    justify-content: center;
    padding: 14px 0 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 10px;
}
.gx-footer-legal a {
    font-size: 12.5px;
    color: inherit;
    opacity: 0.75;
    text-decoration: none;
}
.gx-footer-legal a:hover { opacity: 1; text-decoration: underline; }

/* ==== Public pages redesign (WEB-P): about / faq / contact / blog /
   team / partners / newsletter. Everything on --g-* tokens. ============= */

.gx-page-kicker {
    display: inline-block;
    font-size: var(--g-fs-small);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--g-primary);
    background: var(--g-primary-soft);
    border-radius: 999px;
    padding: 6px 14px;
    margin-bottom: var(--g-s3);
}
.gx-page-title {
    font-size: clamp(26px, 4.5vw, 40px);
    font-weight: 700;
    line-height: 1.18;
    color: var(--g-text);
    margin-bottom: var(--g-s4);
}

/* ---- About ------------------------------------------------------------ */
.gx-about { padding: clamp(48px, 8vw, 96px) 0 clamp(32px, 5vw, 64px); }
.gx-about-copy .gx-page-title { margin-bottom: var(--g-s4); }
.gx-about-desc {
    color: var(--g-text-soft);
    font-size: var(--g-fs-body);
    line-height: 1.75;
}
.gx-about-desc p { margin-bottom: var(--g-s4); }
.gx-about-collage {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: var(--g-s3);
}
.gx-about-photo {
    border-radius: var(--g-radius-lg);
    overflow: hidden;
    background: var(--g-bg-soft);
    box-shadow: var(--g-shadow);
}
.gx-about-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gx-about-photo--tall { min-height: 320px; }
.gx-about-photo-stack {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: var(--g-s3);
}
.gx-about-photo-stack .gx-about-photo { min-height: 150px; }
@media (max-width: 767.98px) {
    .gx-about-photo--tall { min-height: 220px; }
    .gx-about-photo-stack .gx-about-photo { min-height: 104px; }
}

/* ---- Stats band -------------------------------------------------------- */
.gx-stats { padding: clamp(24px, 4vw, 48px) 0 clamp(48px, 7vw, 80px); }
.gx-stats-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--g-s3);
    background: var(--g-bg-soft);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    padding: clamp(20px, 3vw, 36px);
}
.gx-stat { text-align: center; padding: var(--g-s3); }
.gx-stat-figure {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    color: var(--g-primary);
}
.gx-stat-figure h2 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    color: inherit;
    margin: 0;
}
.gx-stat-figure span { font-size: 22px; font-weight: 700; }
.gx-stat p {
    margin: var(--g-s1) 0 0;
    color: var(--g-text-soft);
    font-size: var(--g-fs-caption);
}

/* ---- FAQ ---------------------------------------------------------------- */
.gx-faq { padding: clamp(48px, 8vw, 96px) 0; }
.gx-faq-intro {
    color: var(--g-text-soft);
    font-size: var(--g-fs-body);
    margin: calc(-1 * var(--g-s2)) 0 0;
}
.gx-faq-search {
    position: relative;
    margin: var(--g-s5) 0;
}

/* Audience switch: segmented on desktop, still two tappable halves at 320px */
.gx-faq-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--g-s1);
    background: var(--g-bg-soft);
    border: 1px solid var(--g-border);
    border-radius: 999px;
    padding: 5px;
    margin-bottom: var(--g-s5);
}
.gx-faq-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--g-text-soft);
    font-size: var(--g-fs-caption);
    font-weight: 600;
    transition: background var(--g-fast) var(--g-ease), color var(--g-fast) var(--g-ease);
}
.gx-faq-tab:hover { color: var(--g-text); }
.gx-faq-tab.is-active {
    background: var(--g-bg);
    color: var(--g-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.gx-faq-tab-count {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--g-bg-hover);
    color: var(--g-text-soft);
    font-size: var(--g-fs-small);
    font-weight: 700;
}
.gx-faq-tab.is-active .gx-faq-tab-count {
    background: var(--g-primary-soft);
    color: var(--g-primary);
}
.gx-faq-panel.is-hidden { display: none; }
.gx-faq-panel-blurb {
    color: var(--g-text-soft);
    font-size: var(--g-fs-caption);
    margin: 0 0 var(--g-s4);
}
.gx-faq-none { color: var(--g-text-soft); padding: var(--g-s5) 0; }
.gx-faq-search i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--g-text-faint);
}
.gx-faq-search input {
    width: 100%;
    min-height: 52px;
    border: 1px solid var(--g-border);
    border-radius: 999px;
    padding: 0 20px 0 46px;
    font-size: var(--g-fs-body);
    background: var(--g-bg);
    transition: border-color var(--g-fast) var(--g-ease), box-shadow var(--g-fast) var(--g-ease);
}
.gx-faq-search input:focus {
    outline: none;
    border-color: var(--g-primary);
    box-shadow: 0 0 0 3px var(--g-primary-soft);
}
.gx-faq-list { display: flex; flex-direction: column; gap: var(--g-s3); }
.gx-faq-item {
    border: 1px solid var(--g-border) !important;
    border-radius: var(--g-radius) !important;
    overflow: hidden;
    background: var(--g-bg);
}
.gx-faq-item .accordion-button {
    font-size: var(--g-fs-body);
    font-weight: 600;
    color: var(--g-text);
    background: var(--g-bg);
    padding: 18px 20px;
    box-shadow: none;
    /* Long questions wrap to the bezel on a 375px screen; keep the chevron
       off the last word. */
    gap: var(--g-s3);
}
.gx-faq-item .accordion-button:not(.collapsed) {
    color: var(--g-primary);
    background: var(--g-bg);
}
.gx-faq-item .accordion-button:focus { box-shadow: 0 0 0 3px var(--g-primary-soft); }
.gx-faq-item .accordion-body {
    padding: 0 20px 18px;
    color: var(--g-text-soft);
    line-height: 1.7;
}
.gx-faq-cta {
    margin-top: var(--g-s6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-s4);
    flex-wrap: wrap;
    background: var(--g-bg-soft);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    padding: clamp(20px, 3vw, 28px);
}
.gx-faq-cta h5 { margin: 0 0 4px; font-weight: 700; color: var(--g-text); }
.gx-faq-cta p { margin: 0; color: var(--g-text-soft); font-size: var(--g-fs-caption); }
.gx-faq-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--g-primary);
    color: #fff;
    font-weight: 600;
    transition: background var(--g-fast) var(--g-ease), transform var(--g-fast) var(--g-ease);
}
.gx-faq-cta-btn:hover { background: var(--g-primary-strong); color: #fff; transform: translateY(-1px); }

/* ---- Contact ------------------------------------------------------------ */
.gx-contact { padding: clamp(48px, 8vw, 96px) 0 clamp(24px, 4vw, 48px); }
.gx-contact-channels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--g-s3);
    margin: var(--g-s5) 0 var(--g-s6);
}
.gx-contact-channel {
    display: flex;
    align-items: center;
    gap: var(--g-s3);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius);
    background: var(--g-bg);
    padding: 16px 18px;
    transition: box-shadow var(--g-fast) var(--g-ease), transform var(--g-fast) var(--g-ease), border-color var(--g-fast) var(--g-ease);
}
a.gx-contact-channel:hover {
    border-color: var(--g-primary);
    box-shadow: var(--g-shadow);
    transform: translateY(-2px);
}
.gx-contact-channel-ico {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--g-primary-soft);
    color: var(--g-primary);
    font-size: 18px;
}
.gx-contact-channel--wa .gx-contact-channel-ico {
    background: color-mix(in srgb, #25d366 14%, #ffffff);
    color: #128c4b;
}
.gx-contact-channel-body { display: flex; flex-direction: column; min-width: 0; }
.gx-contact-channel-body strong { color: var(--g-text); font-size: var(--g-fs-caption); font-weight: 700; }
.gx-contact-channel-body span {
    color: var(--g-text-soft);
    font-size: var(--g-fs-caption);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gx-contact-split {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--g-s4);
    align-items: start;
}
@media (max-width: 991.98px) {
    .gx-contact-split { grid-template-columns: 1fr; }
}
.gx-contact-form {
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    background: var(--g-bg);
    box-shadow: var(--g-shadow);
    padding: clamp(20px, 3vw, 32px);
}
.gx-contact-form h3 {
    font-size: var(--g-fs-card);
    font-weight: 700;
    color: var(--g-text);
    margin-bottom: var(--g-s4);
}
.gx-contact-form .cmn-input {
    width: 100%;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    background: var(--g-bg-soft);
    padding: 13px 16px;
    font-size: var(--g-fs-body);
    transition: border-color var(--g-fast) var(--g-ease), box-shadow var(--g-fast) var(--g-ease);
}
.gx-contact-form .cmn-input:focus {
    outline: none;
    border-color: var(--g-primary);
    background: var(--g-bg);
    box-shadow: 0 0 0 3px var(--g-primary-soft);
}
.gx-contact-agree {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: var(--g-s4) 0;
}
.gx-contact-agree label {
    color: var(--g-text-soft);
    font-size: var(--g-fs-caption);
    line-height: 1.5;
}
.gx-contact-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    background: var(--g-primary);
    color: #fff;
    font-weight: 600;
    font-size: var(--g-fs-body);
    transition: background var(--g-fast) var(--g-ease), transform var(--g-fast) var(--g-ease);
}
.gx-contact-submit:hover { background: var(--g-primary-strong); transform: translateY(-1px); }
.gx-contact-side {
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    background: var(--g-bg-soft);
    padding: clamp(20px, 3vw, 28px);
}
.gx-contact-side h5 { font-weight: 700; color: var(--g-text); margin-bottom: var(--g-s3); }
.gx-contact-side ul { list-style: none; margin: 0; padding: 0; }
.gx-contact-side li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--g-text-soft);
    font-size: var(--g-fs-caption);
    line-height: 1.6;
    margin-bottom: var(--g-s3);
}
.gx-contact-side li i { color: var(--g-primary); margin-top: 3px; }
.gx-contact-side-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--g-primary);
    font-weight: 600;
    font-size: var(--g-fs-caption);
}
.gx-contact-side-link:hover { color: var(--g-primary-strong); }
.gx-contact-map { padding-bottom: clamp(48px, 7vw, 80px); }
.gx-contact-map iframe {
    width: 100%;
    height: 340px;
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow);
}

/* ---- Blog list ----------------------------------------------------------- */
.gx-blog { padding: clamp(48px, 8vw, 96px) 0; }
.gx-blog-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-s3);
    background: var(--g-bg-soft);
    border: 1px solid var(--g-border);
    border-radius: 999px;
    padding: 10px 18px;
    margin: var(--g-s4) 0;
    color: var(--g-text-soft);
    font-size: var(--g-fs-caption);
}
.gx-blog-filter a { color: var(--g-primary); font-weight: 600; white-space: nowrap; }
.gx-blog-empty {
    text-align: center;
    padding: clamp(40px, 8vw, 80px) var(--g-s4);
    color: var(--g-text-soft);
}
.gx-blog-empty i { font-size: 40px; color: var(--g-text-faint); margin-bottom: var(--g-s3); display: block; }
.gx-blog-empty h5 { color: var(--g-text); font-weight: 700; }
.gx-blog-featured {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    overflow: hidden;
    background: var(--g-bg);
    box-shadow: var(--g-shadow);
    margin: var(--g-s5) 0;
    transition: box-shadow var(--g-fast) var(--g-ease), transform var(--g-fast) var(--g-ease);
}
.gx-blog-featured:hover { box-shadow: var(--g-shadow-lg); transform: translateY(-2px); }
.gx-blog-featured-media { min-height: 280px; }
.gx-blog-featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gx-blog-featured-body {
    padding: clamp(20px, 3vw, 36px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--g-s3);
}
.gx-blog-featured-body h3 {
    font-size: clamp(20px, 2.6vw, 26px);
    font-weight: 700;
    color: var(--g-text);
    margin: 0;
    line-height: 1.3;
}
.gx-blog-featured-body p { color: var(--g-text-soft); margin: 0; line-height: 1.65; }
@media (max-width: 767.98px) {
    .gx-blog-featured { grid-template-columns: 1fr; }
    .gx-blog-featured-media { min-height: 200px; }
}
.gx-blog-chip {
    align-self: flex-start;
    font-size: var(--g-fs-small);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--g-primary);
    background: var(--g-primary-soft);
    border-radius: 999px;
    padding: 4px 12px;
}
.gx-blog-meta {
    color: var(--g-text-faint);
    font-size: var(--g-fs-small);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.gx-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--g-s4);
    margin-top: var(--g-s5);
}
.gx-blog-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    overflow: hidden;
    background: var(--g-bg);
    transition: box-shadow var(--g-fast) var(--g-ease), transform var(--g-fast) var(--g-ease);
}
.gx-blog-card:hover { box-shadow: var(--g-shadow); transform: translateY(-3px); }
.gx-blog-card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--g-bg-soft); }
.gx-blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gx-blog-card-body {
    padding: var(--g-s4);
    display: flex;
    flex-direction: column;
    gap: var(--g-s2);
    flex: 1;
}
.gx-blog-card-body h5 {
    font-size: var(--g-fs-card);
    font-weight: 700;
    color: var(--g-text);
    margin: 0;
    line-height: 1.35;
}
.gx-blog-card-body p { color: var(--g-text-soft); font-size: var(--g-fs-caption); margin: 0; line-height: 1.6; }
.gx-blog-read {
    margin-top: auto;
    padding-top: var(--g-s2);
    color: var(--g-primary);
    font-weight: 600;
    font-size: var(--g-fs-caption);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ---- Blog details --------------------------------------------------------- */
.gx-blog-details { padding: clamp(40px, 7vw, 80px) 0; }
.gx-article-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--g-text-soft);
    font-size: var(--g-fs-caption);
    font-weight: 600;
    margin-bottom: var(--g-s4);
}
.gx-article-back:hover { color: var(--g-primary); }
.gx-article-title {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    line-height: 1.22;
    color: var(--g-text);
    margin-bottom: var(--g-s3);
}
.gx-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--g-s2) var(--g-s4);
    color: var(--g-text-faint);
    font-size: var(--g-fs-caption);
    margin-bottom: var(--g-s4);
}
.gx-article-meta i { margin-right: 4px; }
.gx-article-hero {
    border-radius: var(--g-radius-lg);
    overflow: hidden;
    margin-bottom: var(--g-s5);
    background: var(--g-bg-soft);
}
.gx-article-hero img { width: 100%; display: block; }
.gx-article-body {
    color: var(--g-text-soft);
    font-size: 17px;
    line-height: 1.8;
}
.gx-article-body h1, .gx-article-body h2, .gx-article-body h3,
.gx-article-body h4, .gx-article-body h5 {
    color: var(--g-text);
    margin: var(--g-s5) 0 var(--g-s3);
    line-height: 1.3;
}
.gx-article-body p { margin-bottom: var(--g-s4); }
.gx-article-body img { max-width: 100%; border-radius: var(--g-radius); }
.gx-article-body a { color: var(--g-primary); text-decoration: underline; }
.gx-blog-side { display: flex; flex-direction: column; gap: var(--g-s4); }
.gx-blog-side-card {
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    background: var(--g-bg);
    padding: var(--g-s4);
}
.gx-blog-side-card h6 {
    font-size: var(--g-fs-small);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--g-text-faint);
    margin-bottom: var(--g-s3);
}
.gx-blog-side-search { position: relative; }
.gx-blog-side-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--g-text-faint);
}
.gx-blog-side-search input {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--g-border);
    border-radius: 999px;
    padding: 0 16px 0 38px;
    background: var(--g-bg-soft);
    font-size: var(--g-fs-caption);
}
.gx-blog-side-search input:focus {
    outline: none;
    border-color: var(--g-primary);
    box-shadow: 0 0 0 3px var(--g-primary-soft);
}
.gx-blog-side-post {
    display: flex;
    gap: var(--g-s3);
    align-items: center;
    padding: var(--g-s2) 0;
}
.gx-blog-side-post img {
    flex: 0 0 64px;
    width: 64px;
    height: 52px;
    object-fit: cover;
    border-radius: var(--g-radius-sm);
}
.gx-blog-side-post span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--g-text);
    font-size: var(--g-fs-caption);
    font-weight: 600;
    line-height: 1.4;
}
.gx-blog-side-post em {
    font-style: normal;
    color: var(--g-text-faint);
    font-size: var(--g-fs-small);
    font-weight: 400;
}
.gx-blog-side-post:hover span { color: var(--g-primary); }
.gx-blog-tags { display: flex; flex-wrap: wrap; gap: var(--g-s2); }
.gx-blog-tags a {
    border: 1px solid var(--g-border);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: var(--g-fs-small);
    color: var(--g-text-soft);
    transition: border-color var(--g-fast) var(--g-ease), color var(--g-fast) var(--g-ease);
}
.gx-blog-tags a:hover { border-color: var(--g-primary); color: var(--g-primary); }

/* ---- Team ------------------------------------------------------------------ */
.gx-team { padding: clamp(32px, 5vw, 64px) 0; }
.gx-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--g-s4);
    margin-top: var(--g-s5);
}
.gx-team-card {
    text-align: center;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    background: var(--g-bg);
    padding: var(--g-s4);
    transition: box-shadow var(--g-fast) var(--g-ease), transform var(--g-fast) var(--g-ease);
}
.gx-team-card:hover { box-shadow: var(--g-shadow); transform: translateY(-2px); }
.gx-team-photo {
    width: 108px;
    height: 108px;
    margin: 0 auto var(--g-s3);
    border-radius: 50%;
    overflow: hidden;
    background: var(--g-bg-soft);
}
.gx-team-photo img { width: 100%; height: 100%; object-fit: cover; }
.gx-team-card h5 { font-weight: 700; color: var(--g-text); margin: 0 0 2px; font-size: var(--g-fs-body); }
.gx-team-card p { color: var(--g-text-soft); font-size: var(--g-fs-caption); margin: 0; }

/* ---- Partner logos ----------------------------------------------------------- */
.gx-partners { padding: clamp(24px, 4vw, 48px) 0; }
.gx-partners-title {
    text-align: center;
    font-size: var(--g-fs-small);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--g-text-faint);
    margin-bottom: var(--g-s4);
}
.gx-partner-logo {
    display: grid;
    place-items: center;
    padding: var(--g-s3);
    opacity: .65;
    filter: grayscale(1);
    transition: opacity var(--g-fast) var(--g-ease), filter var(--g-fast) var(--g-ease);
}
.gx-partner-logo:hover { opacity: 1; filter: none; }
.gx-partner-logo img { max-height: 44px; width: auto; }

/* ---- Footer newsletter --------------------------------------------------------- */
.gx-newsletter {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--g-radius-lg);
    padding: 20px;
}
.gx-newsletter-title {
    color: #fff;
    font-weight: 700;
    font-size: var(--g-fs-body);
    margin-bottom: 6px;
}
.gx-newsletter-sub {
    color: rgba(255, 255, 255, 0.65);
    font-size: var(--g-fs-caption);
    line-height: 1.55;
    margin-bottom: 14px;
}
.gx-newsletter-row {
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 5px;
}
.gx-newsletter-row input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    color: #fff;
    padding: 0 14px;
    min-height: 42px;
    font-size: var(--g-fs-caption);
}
.gx-newsletter-row input::placeholder { color: rgba(255, 255, 255, 0.45); }
.gx-newsletter-row input:focus { outline: none; }
.gx-newsletter-row button {
    border: 0;
    border-radius: 999px;
    background: var(--g-primary);
    color: #fff;
    font-weight: 600;
    font-size: var(--g-fs-caption);
    padding: 0 20px;
    min-height: 42px;
    white-space: nowrap;
    transition: background var(--g-fast) var(--g-ease);
}
.gx-newsletter-row button:hover { background: var(--g-primary-strong); }
.gx-newsletter-note {
    color: rgba(255, 255, 255, 0.45);
    font-size: var(--g-fs-small);
    margin: 10px 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .gx-contact-channel, .gx-blog-featured, .gx-blog-card,
    .gx-team-card, .gx-faq-cta-btn, .gx-contact-submit { transition: none; }
}

/* ==== Host payout account (PB) ======================================== */

/* Entry card on the Payouts page. The missing state is deliberately loud —
   an unpaid payout with no destination reads as withheld money. */
.gx-po-account {
    display: flex;
    align-items: center;
    gap: var(--g-s3);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius);
    background: var(--g-bg);
    padding: 14px 18px;
    margin-bottom: var(--g-s4);
    color: var(--g-text);
    transition: border-color var(--g-fast) var(--g-ease), box-shadow var(--g-fast) var(--g-ease);
}
.gx-po-account:hover { border-color: var(--g-primary); box-shadow: var(--g-shadow); color: var(--g-text); }
.gx-po-account--missing { border-color: var(--g-warning); background: var(--g-warning-soft); }
.gx-po-account-ico {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--g-primary-soft);
    color: var(--g-primary);
    font-size: 17px;
}
.gx-po-account--missing .gx-po-account-ico { background: #fff; color: var(--g-warning); }
.gx-po-account-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.gx-po-account-body strong { font-size: var(--g-fs-caption); font-weight: 700; }
.gx-po-account-body span {
    font-size: var(--g-fs-small);
    color: var(--g-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The form page */
.gx-payout-account { padding: clamp(24px, 5vw, 56px) 0; }
.gx-pa-head h3 { font-weight: 700; color: var(--g-text); margin-bottom: 6px; }
.gx-pa-head p { color: var(--g-text-soft); font-size: var(--g-fs-caption); line-height: 1.6; }
.gx-pa-current,
.gx-pa-empty {
    display: flex;
    align-items: center;
    gap: var(--g-s3);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius);
    padding: 16px 18px;
    margin: var(--g-s4) 0;
    background: var(--g-bg);
}
.gx-pa-empty { border-color: var(--g-warning); background: var(--g-warning-soft); }
.gx-pa-current-ico {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--g-primary-soft);
    color: var(--g-primary);
}
.gx-pa-current > div,
.gx-pa-empty > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gx-pa-current strong,
.gx-pa-empty strong { color: var(--g-text); font-size: var(--g-fs-body); font-weight: 700; letter-spacing: .04em; }
.gx-pa-current span,
.gx-pa-empty span { color: var(--g-text-soft); font-size: var(--g-fs-caption); }
.gx-pa-empty > i { color: var(--g-warning); font-size: 20px; }
.gx-pa-pill {
    flex: 0 0 auto;
    background: var(--g-success-soft);
    color: var(--g-success);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: var(--g-fs-small);
    font-weight: 700;
}
.gx-pa-form {
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    background: var(--g-bg);
    padding: clamp(18px, 3vw, 28px);
}
.gx-pa-form h5 { font-weight: 700; color: var(--g-text); margin-bottom: var(--g-s4); }
.gx-pa-field { margin-bottom: var(--g-s4); }
.gx-pa-field label {
    display: block;
    font-size: var(--g-fs-caption);
    font-weight: 600;
    color: var(--g-text);
    margin-bottom: 6px;
}
.gx-pa-field input {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    background: var(--g-bg-soft);
    padding: 0 16px;
    font-size: var(--g-fs-body);
    transition: border-color var(--g-fast) var(--g-ease), box-shadow var(--g-fast) var(--g-ease);
}
.gx-pa-field input:focus {
    outline: none;
    border-color: var(--g-primary);
    background: var(--g-bg);
    box-shadow: 0 0 0 3px var(--g-primary-soft);
}
.gx-pa-field small { display: block; margin-top: 6px; color: var(--g-text-faint); font-size: var(--g-fs-small); }
.gx-pa-error { display: block; margin-top: 6px; color: var(--g-error); font-size: var(--g-fs-small); }
.gx-pa-submit {
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 999px;
    background: var(--g-primary);
    color: #fff;
    font-weight: 600;
    font-size: var(--g-fs-body);
    transition: background var(--g-fast) var(--g-ease);
}
.gx-pa-submit:hover { background: var(--g-primary-strong); }
/* Step-up before a money-routing change. Sits between the details and Save so
   it reads as the last gate, not an optional extra. */
.gx-pa-otp {
    margin: var(--g-s4) 0 var(--g-s4);
    padding: var(--g-s4);
    border: 1px solid var(--g-border);
    border-radius: var(--g-r-md);
    background: var(--g-surface-2, var(--g-surface));
}
.gx-pa-otp > label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: var(--g-fs-small);
}
.gx-pa-otp-hint,
.gx-pa-otp-sent {
    margin: 0 0 10px;
    font-size: var(--g-fs-small);
    line-height: 1.5;
}
.gx-pa-otp-hint { color: var(--g-text-muted); }
.gx-pa-otp-sent { color: var(--g-success); }
.gx-pa-otp-row { display: flex; gap: 10px; flex-wrap: wrap; }
.gx-pa-otp-row input {
    flex: 1 1 140px;
    min-width: 0;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-r-sm);
    background: var(--g-surface);
    color: var(--g-text);
    letter-spacing: 0.3em;
    font-size: var(--g-fs-body);
}
.gx-pa-otp-row input:focus {
    outline: none;
    border-color: var(--g-primary);
    box-shadow: 0 0 0 3px var(--g-primary-soft);
}
.gx-pa-otp-send {
    flex: 0 0 auto;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid var(--g-primary);
    border-radius: 999px;
    background: transparent;
    color: var(--g-primary);
    font-weight: 600;
    font-size: var(--g-fs-small);
    transition: background var(--g-fast) var(--g-ease);
}
.gx-pa-otp-send:hover { background: var(--g-primary-soft); }

.gx-pa-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: var(--g-s4) 0 0;
    color: var(--g-text-faint);
    font-size: var(--g-fs-small);
    line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
    .gx-po-account, .gx-pa-field input, .gx-pa-submit, .gx-pa-otp-send { transition: none; }
}

/* A payout hold the host did not cause needs to read as information, not
   decoration — amber, not the calm grey of the standard notice. */
.gx-po-notice--warn {
    background: var(--g-warning-soft);
    border: 1px solid var(--g-warning);
    color: var(--g-text);
}

/* ==========================================================================
   PHONE FEED — large stay cards under the swipe rails
   --------------------------------------------------------------------------
   The Android home ends with a vertical list of full-width cards, and the web
   phone stopped at the rails. A rail is a curated slice you swipe past; this
   is the bookable list you scroll, which is what people actually browse with.

   PHONE ONLY, by display. A desktop rail already shows four stays across, so
   repeating the same listings at full width below would be pure duplication.
   Tokens only (--g-*), so Admin > Appearance governs these cards like the
   rest of the page.
   ========================================================================== */

.gx-feed { display: none; }

.gx-near-ask { display: none; }

@media (max-width: 767.98px) {

    /* ----------------------------- ask card ---------------------------- */

    /*
     * Only rendered when there is no origin cookie, and only UNHIDDEN by the
     * script once it knows geolocation can actually work. A control that
     * cannot do its job should not occupy a row.
     */
    .gx-near-ask:not([hidden]) {
        display: flex;
        align-items: center;
        gap: 13px;
        width: 100%;
        margin: 4px 0 26px;
        padding: 15px 16px;
        border: 1px solid var(--g-border, #e8eaed);
        border-radius: var(--g-radius, 16px);
        background: var(--g-bg, #fff);
        color: var(--g-text, #16181d);
        text-align: left;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .gx-near-ask-ico {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--g-bg-soft, #f7f8f9);
        color: var(--g-primary, #ef4444);
        font-size: 16px;
    }

    .gx-near-ask-txt { flex: 1 1 auto; min-width: 0; }
    .gx-near-ask-txt strong {
        display: block;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.25;
    }
    .gx-near-ask-txt small {
        display: block;
        margin-top: 2px;
        font-size: 12px;
        line-height: 1.35;
        color: var(--g-text-soft, #6b7280);
    }

    .gx-near-ask-chev { font-size: 12px; color: var(--g-text-faint, #9aa0a8); flex: 0 0 auto; }

    /* Working state: the fix can take a few seconds, and a dead-looking
       button gets tapped four more times. */
    .gx-near-ask[data-busy="1"] { opacity: .6; pointer-events: none; }

    /* ------------------------------- feed ------------------------------ */

    .gx-feed { display: block; margin-top: 6px; }

    .gx-feed-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }
    .gx-feed-head h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 800;
        letter-spacing: -.02em;
        color: var(--g-text, #16181d);
    }
    .gx-feed-head a {
        flex: 0 0 auto;
        font-size: 13.5px;
        font-weight: 650;
        color: var(--g-primary, #ef4444);
        text-decoration: underline;
    }

    .gx-feed-card {
        display: block;
        margin-bottom: 22px;
        color: inherit;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .gx-feed-card:last-child { margin-bottom: 4px; }
    .gx-feed-card:hover,
    .gx-feed-card:focus { color: inherit; text-decoration: none; }

    .gx-feed-media {
        position: relative;
        /* 3:2 rather than a fixed height: the card is full-bleed inside the
           container, so a height would crop differently on every phone. */
        aspect-ratio: 3 / 2;
        border-radius: var(--g-radius, 16px);
        overflow: hidden;
        background: var(--g-bg-soft, #f7f8f9);
    }
    .gx-feed-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

    .gx-feed-flag,
    .gx-feed-dist {
        position: absolute;
        top: 12px;
        padding: 5px 10px;
        border-radius: 999px;
        font-size: 11.5px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }
    .gx-feed-flag {
        left: 12px;
        background: var(--g-primary, #ef4444);
        color: #fff;
    }
    .gx-feed-dist {
        right: 12px;
        background: rgba(255, 255, 255, .94);
        color: var(--g-text, #16181d);
    }
    .gx-feed-dist i { font-size: 10px; margin-right: 3px; }

    .gx-feed-body { padding: 11px 2px 0; }

    .gx-feed-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
    }
    .gx-feed-top h4 {
        margin: 0;
        font-size: 15.5px;
        font-weight: 700;
        line-height: 1.3;
        color: var(--g-text, #16181d);
        overflow-wrap: anywhere;
    }
    .gx-feed-rate {
        flex: 0 0 auto;
        font-size: 13.5px;
        font-weight: 650;
        color: var(--g-text, #16181d);
    }
    .gx-feed-rate i { font-size: 11.5px; margin-right: 3px; }

    /*
     * !important is not decoration here — it is the only thing that works.
     *
     * 01-global.css carries `.fa-star { color: #e8c821 !important }` for the
     * whole site, so a plain `.gx-feed-rate i { color }` loses no matter how
     * specific it is. The rail card next to this one solves it exactly the
     * same way (06-categories.css `.categories-single-date .rat .fa-star`),
     * and two ratings on one screen in two different colours would read as
     * two different scales.
     */
    .gx-feed-rate .fa-star { color: var(--primary-color, #f23f3f) !important; }

    .gx-feed-loc {
        margin: 3px 0 0;
        font-size: 13.5px;
        color: var(--g-text-soft, #6b7280);
    }

    .gx-feed-price { margin: 7px 0 0; font-size: 14px; color: var(--g-text, #16181d); }
    .gx-feed-price strong { font-size: 16px; font-weight: 800; }
    .gx-feed-price span { color: var(--g-text-soft, #6b7280); }
    .gx-feed-price s { margin-left: 7px; color: var(--g-text-faint, #9aa0a8); }
}

/* ==========================================================================
   LAST-MINUTE OFFERS — the tonight-only rail
   --------------------------------------------------------------------------
   Deliberately NOT styled like the neutral "Stay in <city>" rails. This one
   expires at midnight, so it earns a warm tinted band, a live pulse and a
   countdown; the curated rails stay quiet underneath. Renders on every width
   (unlike the phone feed) because a tonight-only price is worth the same on a
   laptop.

   Tokens only, so Admin > Appearance still governs it.
   ========================================================================== */

.gx-lm {
    /* A tint of the brand rather than an invented accent, so a re-themed site
       re-tints this band with everything else. */
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--g-primary, #f23f3f) 8%, transparent),
            transparent 78%);
    border: 1px solid color-mix(in srgb, var(--g-primary, #f23f3f) 18%, transparent);
    border-radius: var(--g-radius-lg, 20px);
    padding: 18px 0 20px;
    margin: 0 0 34px;
}

/* color-mix is recent; a flat tint keeps older browsers from getting a
   transparent band with a hairline. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .gx-lm { background: #fff5f5; border-color: #f7d4d4; }
}

.gx-lm-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 0 18px;
    margin-bottom: 15px;
}

.gx-lm-head h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 3px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--g-text, #16181d);
}

.gx-lm-head p {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--g-text-soft, #6b7280);
}

/* The live dot. Motion is the only thing on this band that says "right now",
   so it is also the first thing to go for a guest who asked for less of it. */
.gx-lm-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: var(--g-primary, #f23f3f);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--g-primary, #f23f3f) 55%, transparent);
    animation: gxLmPulse 2s ease-out infinite;
}

@keyframes gxLmPulse {
    70%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--g-primary, #f23f3f) 0%, transparent); }
    100% { box-shadow: 0 0 0 0  color-mix(in srgb, var(--g-primary, #f23f3f) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .gx-lm-dot { animation: none; }
}

.gx-lm-clock {
    flex: 0 0 auto;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--g-primary, #f23f3f);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}
.gx-lm-clock:empty { display: none; }

/* ------------------------------- the rail ------------------------------ */

/*
 * A plain scroll-snap strip, not a Swiper. The theme's rails are Swiper
 * instances initialised by name in the theme JS; a new one would need its own
 * init and would break silently if that JS ever failed. Native overflow needs
 * nothing, works with a trackpad, a touch drag and a keyboard, and cannot
 * fail to initialise.
 */
.gx-lm-scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 2px 18px 6px;
    scrollbar-width: none;
}
.gx-lm-scroll::-webkit-scrollbar { display: none; }

.gx-lm-card {
    flex: 0 0 232px;
    width: 232px;
    scroll-snap-align: start;
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.gx-lm-card:hover,
.gx-lm-card:focus { color: inherit; text-decoration: none; }
.gx-lm-card:focus-visible { outline: 2px solid var(--g-primary, #f23f3f); outline-offset: 3px; border-radius: var(--g-radius, 16px); }

.gx-lm-media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--g-radius, 16px);
    overflow: hidden;
    background: var(--g-bg-soft, #f7f8f9);
}
.gx-lm-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gx-lm-off,
.gx-lm-km {
    position: absolute;
    top: 10px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}
.gx-lm-off { left: 10px; background: var(--g-primary, #f23f3f); color: #fff; }
.gx-lm-km  { right: 10px; background: rgba(255,255,255,.94); color: var(--g-text, #16181d); font-weight: 700; }

.gx-lm-body { padding: 10px 2px 0; }
.gx-lm-body h4 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--g-text, #16181d);
    overflow-wrap: anywhere;
}
.gx-lm-loc { margin: 2px 0 0; font-size: 12.5px; color: var(--g-text-soft, #6b7280); }

.gx-lm-price { margin: 6px 0 0; font-size: 13.5px; color: var(--g-text, #16181d); }
.gx-lm-price strong { font-size: 15.5px; font-weight: 800; }
.gx-lm-price s { margin-left: 6px; color: var(--g-text-faint, #9aa0a8); }
.gx-lm-price span { color: var(--g-text-soft, #6b7280); }

@media (max-width: 767.98px) {
    .gx-lm { margin: 0 0 26px; border-radius: var(--g-radius, 16px); }
    .gx-lm-head { padding: 0 14px; }
    .gx-lm-head h3 { font-size: 17.5px; }
    .gx-lm-scroll { padding: 2px 14px 6px; gap: 12px; }
    /* Just under half the narrowest phone, so the next card always peeks and
       the strip reads as scrollable without a hint. */
    .gx-lm-card { flex-basis: 196px; width: 196px; }
}

/* ==========================================================================
   HEADER — no account control on phones
   --------------------------------------------------------------------------
   The top-right user icon is removed below 768px. It is not lost: the guest
   tab bar's fourth tab is the account, and the hamburger drawer carries the
   same links, so the phone has two routes to it already and the header was
   the third.

   Both signed-out and signed-in states are `.login-btn` (an <a> to /login, or
   the account dropdown's toggle). The signed-in one sits inside a `.dropdown`
   wrapper, so that is collapsed too — hiding only the toggle would leave the
   wrapper holding the flex gap and the row would keep a phantom slot.

   !important is required, not habitual: layouts/app.blade.php links
   gx-modern.css BEFORE style.css, so an equal-specificity rule in the theme's
   own header CSS would win on source order.
   ========================================================================== */

@media (max-width: 767.98px) {
    .header-right-btn-area .login-btn { display: none !important; }
    .header-right-btn-area .dropdown:has(> .login-btn) { display: none !important; }
}

/* ==========================================================================
   OFFER TAGS — naming the discount
   --------------------------------------------------------------------------
   A struck-through price says "cheaper than usual" and nothing else. These
   say why: "Last-minute deal", "Weekly discount". The last-minute one is the
   only urgent one, so it is the only one that gets colour — a weekly discount
   is a standing fact and a page where every tag shouts has no emphasis left.
   ========================================================================== */

.gx-offer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.gx-offer-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--g-border, #e8eaed);
    background: var(--g-bg-soft, #f7f8f9);
    color: var(--g-text-soft, #6b7280);
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.45;
    white-space: nowrap;
}

.gx-offer-tag--hot {
    border-color: transparent;
    background: color-mix(in srgb, var(--g-primary, #f23f3f) 12%, transparent);
    color: var(--g-primary, #f23f3f);
    font-weight: 750;
}
.gx-offer-tag--hot i { font-size: 10px; }

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .gx-offer-tag--hot { background: #fdeaea; }
}

/* On the detail page the tag sits under a large price, so it gets a little
   more room than it does on a card. */
.gx-price-hero + .gx-offer-tags { margin-top: 8px; margin-bottom: 2px; }

/* A breakdown line's offer name — "Host promotion · Last-minute deal". Set as
   a chip rather than plain text so it reads as a named thing the guest
   qualified for, not as a parenthetical. */
.gx-line-detail {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--g-primary, #f23f3f) 12%, transparent);
    color: var(--g-primary, #f23f3f);
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .gx-line-detail { background: #fdeaea; }
}

/* The "₹10,044 × 3 nights" line under a stay total. Secondary on purpose —
   the total is the number being compared between listings; this is the
   working, there so the figure can be checked rather than trusted. */
.gx-stay-note {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--g-text-soft, #6b7280);
}

/* ==========================================================================
   "Stay More, Save More" — offer vouchers
   --------------------------------------------------------------------------
   These cards are vouchers: a photograph, a saving, and a code to carry to
   checkout. They are styled as tickets — notched sides, a dashed code chip —
   because that shape already means "this is worth money" to everyone, and it
   costs two pseudo-elements rather than an illustration.

   Namespaced gx-offr-* on purpose. gx-modern.css is linked BEFORE style.css,
   so anything sharing a class name with the theme (.offer-single, .offer-
   content) loses on source order at equal specificity. New names sidestep the
   whole argument instead of escalating into !important.

   Light-only, deliberately: dark mode is an app feature on this product, and
   the website does not follow the OS.
   ========================================================================== */

.gx-offr .common-title { margin-bottom: 22px; }

.gx-offr-lede {
    margin: 6px 0 0;
    max-width: 56ch;
    color: var(--g-muted, #6b7280);
    font-size: 1rem;
    line-height: 1.55;
}

.gx-offr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--g-radius-lg, 20px);
    background: var(--g-card, #fff);
    border: 1px solid var(--g-border, #e6e8eb);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px -18px rgba(16, 24, 40, .28);
    transition: transform .28s ease, box-shadow .28s ease;
    height: 100%;
}

.gx-offr-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 26px 44px -22px rgba(16, 24, 40, .38);
}

/* The perforation. Two notches on the seam between photo and body — the
   detail that makes the eye read "ticket" before it reads any of the words. */
.gx-offr-card::before,
.gx-offr-card::after {
    content: "";
    position: absolute;
    top: 200px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--g-bg, #f7f7f8);
    border: 1px solid var(--g-border, #e6e8eb);
    transform: translateY(-50%);
    z-index: 2;
}
.gx-offr-card::before { left: -14px; }
.gx-offr-card::after  { right: -14px; }

.gx-offr-media {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: var(--g-bg-soft, #eef0f2);
}

/* The panel is DRAWN (inline SVG), not photographed — see offer.blade.php.
   No object-fit, no crop to get wrong, no decode, and it stays sharp on any
   display because it is vector. */
.gx-offr-art {
    width: 100%;
    height: 100%;
    display: block;
    transform: scale(1.01);          /* hides the sub-pixel seam while it pans */
    transform-origin: center;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.gx-offr-card:hover .gx-offr-art { transform: scale(1.05); }

/* Kept for the scrim's sake if a photograph is ever restored. */
.gx-offr-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gx-offr-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(9, 12, 18, .00) 0%,
        rgba(9, 12, 18, .06) 55%,
        rgba(9, 12, 18, .22) 100%);
    pointer-events: none;
}

/* The saving, as HTML over the drawn panel.
   It used to be <text> inside the SVG, where preserveAspectRatio="slice"
   cropped it on narrow cards (the ₹ vanished, "OFF" became "F F") and pinned
   its size to the viewBox rather than to the screen. clamp() against vw makes
   it genuinely big on a phone and still balanced on a wide card. */
.gx-offr-amount {
    position: absolute;
    left: 22px;
    bottom: 14px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    line-height: .88;
    pointer-events: none;
}

.gx-offr-amount-value {
    font-size: clamp(2.6rem, 11vw, 3.9rem);
    font-weight: 800;
    letter-spacing: -.025em;
    color: #fff;
    /* The panel is a gradient, so a faint lift keeps the number readable at
       the light end without resorting to a heavier scrim. */
    text-shadow: 0 2px 16px rgba(9, 12, 18, .22);
}

.gx-offr-amount-unit {
    margin-top: 7px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .3em;
    color: rgba(255, 255, 255, .88);
}

.gx-offr-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 22px 20px;
    flex: 1 1 auto;
}

.gx-offr-title {
    margin: 0;
    font-size: clamp(1.15rem, 1.9vw, 1.4rem);
    line-height: 1.25;
    font-weight: 700;
    color: var(--g-ink, #111827);
    letter-spacing: -0.01em;
}

.gx-offr-sub {
    margin: 0;
    color: var(--g-muted, #6b7280);
    font-size: .95rem;
    line-height: 1.55;
}

/* The real conditions, read straight off the coupon row. Small, quiet, and
   present — a voucher that hides its terms until checkout is the reason people
   distrust vouchers. */
.gx-offr-terms {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 0;
    padding: 0;
}

.gx-offr-terms li {
    font-size: .76rem;
    font-weight: 600;
    color: var(--g-muted, #6b7280);
    background: var(--g-bg-soft, #f1f2f4);
    border: 1px solid var(--g-border, #e6e8eb);
    border-radius: 999px;
    padding: 4px 10px;
    line-height: 1.3;
}

/* Honest urgency only — a real deadline or a genuinely small remaining count.
   PublicOffers returns null rather than manufacturing pressure, so this badge
   simply does not exist on an offer that is not actually running out. */
.gx-offr-urgency {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(9, 12, 18, .58);
    -webkit-backdrop-filter: saturate(140%) blur(6px);
    backdrop-filter: saturate(140%) blur(6px);
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.gx-offr-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;                /* actions sit on the floor of the card,
                                        so cards of unequal copy still line up */
    padding-top: 6px;
}

/* The code. Dashed, monospaced, and obviously liftable — it is the one thing
   on the card the guest has to physically carry to checkout. */
.gx-offr-code {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1.5px dashed var(--g-primary, #ff3131);
    background: var(--g-primary-soft, rgba(255, 49, 49, .07));
    color: var(--g-ink, #111827);
    font: inherit;
    cursor: pointer;
    transition: background .2s ease, transform .12s ease;
}

.gx-offr-code:hover { background: rgba(255, 49, 49, .12); }
.gx-offr-code:active { transform: scale(.98); }

.gx-offr-code-label {
    font-size: .68rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--g-muted, #6b7280);
}

.gx-offr-code-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    font-size: .98rem;
    letter-spacing: .04em;
    color: var(--g-primary, #ff3131);
}

.gx-offr-code-hint {
    font-size: .72rem;
    font-weight: 600;
    color: var(--g-muted, #6b7280);
}

/* Confirmation has to be a WORD, not just a colour: "it went green" is not
   feedback if you cannot see green. */
.gx-offr-code.is-copied {
    border-style: solid;
    border-color: #12855a;
    background: rgba(18, 133, 90, .10);
}
.gx-offr-code.is-copied .gx-offr-code-hint::after { content: "ied"; }
.gx-offr-code.is-copied .gx-offr-code-hint { color: #12855a; }
.gx-offr-code.is-copied .gx-offr-code-value { color: #0f6f4b; }

.gx-offr-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 999px;
    background: var(--g-ink, #111827);
    color: #fff;
    font-weight: 600;
    font-size: .93rem;
    text-decoration: none;
    transition: background .2s ease, transform .12s ease;
}

.gx-offr-cta:hover { background: #000; color: #fff; transform: translateX(2px); }
.gx-offr-cta i { font-size: .85em; }

/* Focus must be visible on both controls — these are the two things on the
   card anyone actually operates. */
.gx-offr-code:focus-visible,
.gx-offr-cta:focus-visible {
    outline: 2px solid var(--g-primary, #ff3131);
    outline-offset: 3px;
}

@media (max-width: 575.98px) {
    .gx-offr-media { height: 176px; }
    .gx-offr-card::before,
    .gx-offr-card::after { top: 176px; }
    .gx-offr-body { padding: 18px 18px 16px; }
    /* Full-width controls stacked: at 360px the code and the CTA side by side
       leave the CTA about 90px wide, which is under the touch-target floor. */
    .gx-offr-actions { gap: 10px; }
    .gx-offr-code, .gx-offr-cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .gx-offr-card,
    .gx-offr-media img,
    .gx-offr-cta,
    .gx-offr-code { transition: none; }
    .gx-offr-card:hover { transform: none; }
    .gx-offr-card:hover .gx-offr-art { transform: scale(1.01); }
    .gx-offr-cta:hover { transform: none; }
}

/* ==========================================================================
   About — the Guestly story
   --------------------------------------------------------------------------
   An editorial page, not a marketing block: generous measure, real hierarchy,
   and chapters that alternate so the eye has somewhere to go. Everything is on
   --g-* tokens; light-only, because dark mode is an app feature here.
   ========================================================================== */

.gx-story { --story-measure: 62ch; }

.gx-story .container { max-width: 1140px; }

/* --- opening ------------------------------------------------------------ */

.gx-story-open {
    padding: clamp(48px, 8vw, 96px) 0 clamp(28px, 4vw, 48px);
}

.gx-story-kicker {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--g-primary, #ff3131);
    margin-bottom: 18px;
}

.gx-story-headline {
    margin: 0 0 22px;
    max-width: 20ch;                 /* a headline that wraps 2-3 times reads
                                        as a statement; one long line does not */
    font-size: clamp(2.1rem, 6vw, 4rem);
    line-height: 1.05;
    letter-spacing: -.03em;
    font-weight: 800;
    color: var(--g-ink, #111827);
}

.gx-story-lede,
.gx-story-lede p {
    max-width: var(--story-measure);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.65;
    color: var(--g-muted, #6b7280);
    margin: 0 0 14px;
}

/* --- chapters ----------------------------------------------------------- */

.gx-story-chapter {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
    padding: clamp(32px, 5vw, 64px) 0;
}

/* Alternating sides keeps a long read from becoming a column of slabs. */
.gx-story-chapter--reverse .gx-story-chapter-copy { order: 2; }
.gx-story-chapter--reverse .gx-story-figure { order: 1; }

.gx-story-chapter-copy p {
    max-width: var(--story-measure);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--g-ink, #111827);
    margin: 0 0 16px;
}

.gx-story-num {
    display: block;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .2em;
    color: var(--g-primary, #ff3131);
    margin-bottom: 10px;
}

.gx-story-chapter-copy h2 {
    margin: 0 0 18px;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.2;
    letter-spacing: -.02em;
    font-weight: 800;
    color: var(--g-ink, #111827);
}

.gx-story-figure {
    margin: 0;
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--g-bg-soft, #f1f2f4);
    box-shadow: 0 20px 44px -26px rgba(16, 24, 40, .42);
}

.gx-story-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The frictions. A list of grievances reads better with a hard left edge than
   with bullets — it looks like evidence rather than decoration. */
.gx-story-frictions {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    max-width: var(--story-measure);
}

.gx-story-frictions li {
    position: relative;
    padding: 10px 0 10px 20px;
    border-left: 2px solid var(--g-border, #e6e8eb);
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--g-ink, #111827);
}

.gx-story-frictions li + li { margin-top: 2px; }
.gx-story-frictions li:hover { border-left-color: var(--g-primary, #ff3131); }

/* --- the turn ----------------------------------------------------------- */

.gx-story-turn {
    margin: clamp(24px, 4vw, 48px) 0;
    padding: clamp(40px, 7vw, 88px) 0;
    background: var(--g-ink, #111827);
    color: #fff;
}

.gx-story-turn p {
    margin: 0 0 16px;
    max-width: 24ch;
    font-size: clamp(1.6rem, 4.2vw, 2.9rem);
    line-height: 1.2;
    letter-spacing: -.025em;
    font-weight: 700;
}

.gx-story-turn cite {
    font-style: normal;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--g-primary, #ff3131);
}

/* --- principles --------------------------------------------------------- */

.gx-story-principles {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin: 8px 0 clamp(32px, 5vw, 64px);
    padding: 0;
}

.gx-story-principles li {
    padding: 24px;
    border-radius: 18px;
    background: var(--g-card, #fff);
    border: 1px solid var(--g-border, #e6e8eb);
}

.gx-story-principles h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--g-ink, #111827);
}

.gx-story-principles p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--g-muted, #6b7280);
}

/* --- the acknowledgement ------------------------------------------------ */

.gx-story-thanks {
    padding: clamp(40px, 6vw, 80px) 0;
    background: var(--g-bg-soft, #f5f6f7);
}

.gx-story-thanks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.gx-story-thanks-card {
    padding: clamp(24px, 3vw, 34px);
    border-radius: 20px;
    background: var(--g-card, #fff);
    border: 1px solid var(--g-border, #e6e8eb);
}

.gx-story-thanks-to {
    display: block;
    margin-bottom: 12px;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--g-primary, #ff3131);
}

.gx-story-thanks-card p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--g-ink, #111827);
}

.gx-story-signoff {
    margin: 28px auto 0;
    max-width: 58ch;
    text-align: center;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--g-muted, #6b7280);
}

/* --- two doors ---------------------------------------------------------- */

.gx-story-doors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: clamp(32px, 5vw, 64px) 0 clamp(48px, 7vw, 88px);
}

.gx-story-door {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 26px 28px;
    border-radius: 18px;
    text-decoration: none;
    background: var(--g-card, #fff);
    border: 1px solid var(--g-border, #e6e8eb);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.gx-story-door:hover {
    transform: translateY(-3px);
    border-color: var(--g-ink, #111827);
    box-shadow: 0 18px 34px -22px rgba(16, 24, 40, .4);
}

.gx-story-door--host { background: var(--g-ink, #111827); border-color: var(--g-ink, #111827); }
.gx-story-door--host:hover { border-color: var(--g-primary, #ff3131); }

.gx-story-door-kicker {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--g-muted, #6b7280);
}

.gx-story-door-title {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--g-ink, #111827);
}

.gx-story-door-go { font-size: 1.2rem; color: var(--g-primary, #ff3131); }

.gx-story-door--host .gx-story-door-kicker { color: rgba(255, 255, 255, .66); }
.gx-story-door--host .gx-story-door-title { color: #fff; }

.gx-story-door:focus-visible {
    outline: 2px solid var(--g-primary, #ff3131);
    outline-offset: 3px;
}

/* --- narrow ------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .gx-story-principles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
    /* One column, and the photograph goes BELOW its chapter — a portrait
       image above the words pushes the actual reading off the first screen. */
    .gx-story-chapter { grid-template-columns: 1fr; gap: 24px; }
    .gx-story-chapter--reverse .gx-story-chapter-copy,
    .gx-story-chapter--reverse .gx-story-figure { order: 0; }
    .gx-story-figure { aspect-ratio: 3 / 2; }
    .gx-story-principles,
    .gx-story-thanks-grid,
    .gx-story-doors { grid-template-columns: 1fr; }
    .gx-story-headline { max-width: none; }
    .gx-story-turn p { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .gx-story-door { transition: none; }
    .gx-story-door:hover { transform: none; }
}

/* FIX-7 (owner, mobile screenshot): the theme's global `section{padding:60px 0}`
   put a ~60px void between the navbar and "See all properties" on phones —
   fine under the tall desktop header, dead space on mobile. Class selector
   outranks the bare `section` element rule, so no !important and no load-order
   dependence (this file loads BEFORE style.css). Desktop is untouched. */
@media (max-width: 767.98px) {
    section.service-gallery { padding-top: 10px; }
}