/**
 * Cloudstay Listing V2 - Wander Style
 *
 * Modern, desktop-focused property detail page styles.
 * Uses BEM naming convention: .cloudstay-listing-v2__*
 *
 * @package Cloudstay
 * @since 1.3.0
 */

/* ==========================================================================
   Mobile Scroll Fix
   ========================================================================== */
@media (max-width: 767px) {
    html,
    body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: auto !important;
        touch-action: pan-y !important;
        height: auto !important;
        min-height: 100% !important;
    }

    /* Hide scrollbar when gallery/lightbox modals are open */
    html:has(.gallery-grid-modal.active),
    html:has(.gallery-grid-modal.active) body,
    body:has(.gallery-grid-modal.active),
    html:has(.lightbox-modal.active),
    html:has(.lightbox-modal.active) body,
    body:has(.lightbox-modal.active) {
        overflow: hidden !important;
    }

    .cloudstay-listing-v2,
    .cloudstay-listing-widget {
        overflow: visible !important;
        height: auto !important;
        min-height: auto !important;
        touch-action: pan-y !important;
    }
}

/* Desktop: Hide html/body scrollbar when gallery/lightbox modals are open */
html:has(.gallery-grid-modal.active),
body:has(.gallery-grid-modal.active),
html:has(.lightbox-modal.active),
body:has(.lightbox-modal.active) {
    overflow: hidden !important;
}

/* ==========================================================================
   Lucide Icons - Global Default Styles
   ========================================================================== */

/* Ensure Lucide icons have default dimensions before JS processes them */
[data-lucide] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

[data-lucide] svg {
    width: 100%;
    height: 100%;
    display: block;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* Common icon sizes */
.cloudstay-listing-v2 [data-lucide] {
    width: 20px;
    height: 20px;
}

.cloudstay-listing-v2 [data-lucide] svg {
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
    /* Colors - Mapped to design tokens with fallbacks */
    --clv2-primary: var(--cs-gray-900, #1a1a1a);
    --clv2-secondary: var(--cs-gray-500, #666666);
    --clv2-accent: var(--cs-primary, #e35323);
    --clv2-success: var(--cs-success, #16a34a);
    --clv2-error: var(--cs-error, #dc2626);
    --clv2-background: var(--cs-white, #ffffff);
    --clv2-surface: var(--cs-gray-50, #f9fafb);
    --clv2-border: var(--cs-gray-200, #e5e7eb);
    --clv2-border-light: var(--cs-gray-100, #f3f4f6);

    /* Typography - Mapped to design tokens */
    --clv2-font-display: var(--e-global-typography-primary-font-family, inherit);
    --clv2-font-body: var(--e-global-typography-text-font-family, inherit);

    /* Spacing - Mapped to design tokens */
    --clv2-container-width: var(--cs-container-max, 1400px);
    --clv2-container-padding: var(--cs-space-6, 24px);
    --clv2-section-spacing: 64px;
    --clv2-gap: var(--cs-space-6, 24px);

    /* Gallery */
    --clv2-gallery-height: 500px;
    --clv2-gallery-gap: var(--cs-space-2, 8px);
    --clv2-gallery-radius: var(--cs-radius-lg, 12px);

    /* Layout */
    --clv2-main-width: 65%;
    --clv2-sidebar-width: 35%;
    --clv2-sidebar-max-width: 400px;

    /* Transitions - Mapped to design tokens */
    --clv2-transition: var(--cs-transition-base, 0.2s ease);
    --clv2-transition-slow: var(--cs-transition-slow, 0.3s ease);

    /* Shadows - Mapped to design tokens */
    --clv2-shadow-sm: var(--cs-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
    --clv2-shadow-md: var(--cs-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
    --clv2-shadow-lg: var(--cs-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
    --clv2-shadow-xl: var(--cs-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));

    /* Rating - Inherits from widget builder setting */
    --clv2-star-color: var(--lp-reviews-rating, #facc15);

    /* Z-index layers - Mapped to design tokens */
    --clv2-z-sticky: var(--cs-z-sticky, 100);
    --clv2-z-modal: var(--cs-z-modal, 1000);
    --clv2-z-toast: var(--cs-z-toast, 1100);
}

/* ==========================================================================
   Base Container
   ========================================================================== */

.cloudstay-listing-v2 {
    font-family: var(--clv2-font-body);
    color: var(--clv2-primary);
    background-color: var(--lp-section-bg, var(--clv2-background));
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cloudstay-listing-v2 *,
.cloudstay-listing-v2 *::before,
.cloudstay-listing-v2 *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   Header Section
   ========================================================================== */

.cloudstay-listing-v2__header {
    border-bottom: 1px solid var(--clv2-border);
    background: var(--lp-section-bg, var(--clv2-background));
}

.cloudstay-listing-v2__header-container {
    max-width: var(--clv2-container-width);
    margin: 0 auto;
    padding: 16px var(--clv2-container-padding);
}

.cloudstay-listing-v2__search-bar {
    margin-bottom: 16px;
}

.cloudstay-listing-v2__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.cloudstay-listing-v2__title {
    font-family: var(--clv2-font-display);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    color: var(--clv2-primary);
    letter-spacing: -0.01em;
}

/* Location text (small caps above title) */
.cloudstay-listing-v2__location-text {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--clv2-secondary);
    margin: 0 0 8px 0;
}

/* Title actions container (wishlist + share buttons) */
.cloudstay-listing-v2__title-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Wishlist button */
.cloudstay-listing-v2__wishlist-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--clv2-border);
    border-radius: 8px;
    background: var(--clv2-background);
    color: var(--clv2-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--clv2-transition);
    white-space: nowrap;
}

.cloudstay-listing-v2__wishlist-btn:hover {
    background: var(--clv2-surface);
    border-color: var(--clv2-primary);
}

.cloudstay-listing-v2__wishlist-btn svg {
    width: 18px;
    height: 18px;
}

.cloudstay-listing-v2__wishlist-btn.active svg {
    fill: #ef4444;
    color: #ef4444;
}

.cloudstay-listing-v2__share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--clv2-border);
    border-radius: 8px;
    background: var(--clv2-background);
    color: var(--clv2-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--clv2-transition);
    white-space: nowrap;
    flex-shrink: 0;
}

.cloudstay-listing-v2__share-btn:hover {
    background: var(--clv2-surface);
    border-color: var(--clv2-primary);
}

.cloudstay-listing-v2__share-btn svg {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   Gallery Section
   ========================================================================== */

.cloudstay-listing-v2__gallery {
    max-width: var(--clv2-container-width);
    margin: 0 auto;
    padding: 0 var(--clv2-container-padding);
    margin-top: 24px;
}

.cloudstay-listing-v2__gallery-grid {
    display: grid;
    grid-template-columns: 50% 25% 25%;
    grid-template-rows: 1fr 1fr;
    gap: var(--clv2-gallery-gap);
    height: var(--clv2-gallery-height);
    border-radius: var(--clv2-gallery-radius);
    overflow: hidden;
    position: relative;
}

/* Wander-style gallery: 3 columns */
.cloudstay-listing-v2__gallery-grid--wander {
    grid-template-columns: 50% calc(25% - 4px) calc(25% - 4px);
}

.cloudstay-listing-v2__gallery-main {
    grid-row: span 2;
    position: relative;
    display: block;
    overflow: hidden;
    /* Button reset for lightbox trigger */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.cloudstay-listing-v2__gallery-main::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.1) 100%);
    pointer-events: none;
}

.cloudstay-listing-v2__gallery-stack {
    display: flex;
    flex-direction: column;
    gap: var(--clv2-gallery-gap);
}

.cloudstay-listing-v2__gallery-stack--top,
.cloudstay-listing-v2__gallery-stack--bottom {
    grid-row: span 1;
}

.cloudstay-listing-v2__gallery-thumb {
    flex: 1;
    position: relative;
    display: block;
    overflow: hidden;
    /* Button reset for lightbox trigger */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.cloudstay-listing-v2__gallery-thumb--last {
    position: relative;
}

.cloudstay-listing-v2__gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--clv2-transition-slow);
}

.cloudstay-listing-v2__gallery-main:hover .cloudstay-listing-v2__gallery-image,
.cloudstay-listing-v2__gallery-thumb:hover .cloudstay-listing-v2__gallery-image {
    transform: scale(1.02);
}

.cloudstay-listing-v2__gallery-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    transition: background var(--clv2-transition);
}

.cloudstay-listing-v2__gallery-thumb--last:hover .cloudstay-listing-v2__gallery-more {
    background: rgba(0, 0, 0, 0.65);
}

.cloudstay-listing-v2__gallery-video {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #000;
}

.cloudstay-listing-v2__gallery-video-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Gallery columns for Wander layout */
.cloudstay-listing-v2__gallery-column {
    display: flex;
    flex-direction: column;
    gap: var(--clv2-gallery-gap);
    grid-row: span 2;
}

.cloudstay-listing-v2__gallery-column--middle,
.cloudstay-listing-v2__gallery-column--right {
    height: 100%;
}

.cloudstay-listing-v2__gallery-column .cloudstay-listing-v2__gallery-thumb {
    flex: 1;
    min-height: 0;
}

/* Video wrapper for gallery */
.cloudstay-listing-v2__gallery-video-wrapper {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #000;
}

.cloudstay-listing-v2__gallery-video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity var(--clv2-transition);
}

.cloudstay-listing-v2__gallery-video-wrapper:hover .cloudstay-listing-v2__gallery-video-overlay {
    opacity: 1;
}

.cloudstay-listing-v2__gallery-video-overlay svg {
    width: 48px;
    height: 48px;
    color: white;
}

/* Show all photos button */
.cloudstay-listing-v2__gallery-show-all {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--lp-photos-btn-bg, var(--clv2-background, #ffffff));
    border: 1px solid var(--lp-photos-btn-text, var(--clv2-primary, #1f1f1f));
    border-radius: 8px;
    color: var(--lp-photos-btn-text, var(--clv2-primary, #1f1f1f));
    font-size: var(--lp-photos-btn-size, 14px);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--clv2-transition);
    z-index: 10;
}

.cloudstay-listing-v2__gallery-show-all:hover {
    background: var(--lp-photos-btn-hover-bg, var(--clv2-primary, #1f1f1f));
    color: var(--lp-photos-btn-bg, var(--clv2-background, #ffffff));
}

.cloudstay-listing-v2__gallery-show-all svg {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   Details Row
   ========================================================================== */

.cloudstay-listing-v2__details-row {
    border-bottom: 1px solid var(--clv2-border);
    padding: 24px 0;
}

.cloudstay-listing-v2__details-container {
    max-width: var(--clv2-container-width);
    margin: 0 auto;
    padding: 0 var(--clv2-container-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

/* Feature Pills (Wander-style prominent amenity row) */
.cloudstay-listing-v2__feature-pills {
    font-size: 16px;
    font-weight: 500;
    color: var(--clv2-primary);
    letter-spacing: 0.02em;
}

.cloudstay-listing-v2__feature-tags {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cloudstay-listing-v2__feature-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--clv2-surface);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    color: var(--clv2-primary);
}

.cloudstay-listing-v2__feature-tag svg {
    width: 16px;
    height: 16px;
    color: var(--clv2-accent);
}

/* Meta row with Lucide icons */
.cloudstay-listing-v2__meta-row {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.cloudstay-listing-v2__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--clv2-secondary);
}

.cloudstay-listing-v2__meta-item svg {
    width: 18px;
    height: 18px;
    color: var(--clv2-primary);
}

.cloudstay-listing-v2__stats {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.cloudstay-listing-v2__stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--clv2-secondary);
}

.cloudstay-listing-v2__stat svg {
    width: 18px;
    height: 18px;
    color: var(--clv2-primary);
}

.cloudstay-listing-v2__floorplan-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--clv2-border);
    border-radius: 8px;
    background: var(--clv2-background);
    color: var(--clv2-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--clv2-transition);
}

.cloudstay-listing-v2__floorplan-trigger:hover {
    background: var(--clv2-surface);
    border-color: var(--clv2-primary);
}

.cloudstay-listing-v2__floorplan-trigger svg {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   Two-Column Content Layout
   ========================================================================== */

.cloudstay-listing-v2__content {
    padding: var(--clv2-section-spacing) 0;
}

.cloudstay-listing-v2__content-container {
    max-width: var(--clv2-container-width);
    margin: 0 auto;
    padding: 0 var(--clv2-container-padding);
    display: grid;
    grid-template-columns: 1fr var(--clv2-sidebar-max-width);
    gap: 64px;
}

/* ==========================================================================
   Main Content Column
   ========================================================================== */

.cloudstay-listing-v2__main {
    min-width: 0;
}

.cloudstay-listing-v2__section {
    padding-bottom: var(--clv2-section-spacing);
    border-bottom: 1px solid var(--clv2-border);
    margin-bottom: var(--clv2-section-spacing);
}

.cloudstay-listing-v2__section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.cloudstay-listing-v2__section-title {
    font-family: var(--clv2-font-display);
    font-size: 24px;
    font-weight: 400;
    margin: 0 0 24px 0;
    color: var(--clv2-primary);
}

/* ==========================================================================
   Guarantee Section
   ========================================================================== */

.cloudstay-listing-v2__guarantee {
    padding: 0;
    border: none;
    margin-bottom: 32px;
}

.cloudstay-listing-v2__guarantee-trigger {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px 24px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 12px;
    cursor: pointer;
    transition: all var(--clv2-transition);
    text-align: left;
}

.cloudstay-listing-v2__guarantee-trigger:hover {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    border-color: #7dd3fc;
}

.cloudstay-listing-v2__guarantee-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clv2-background);
    border-radius: 50%;
    flex-shrink: 0;
}

.cloudstay-listing-v2__guarantee-icon svg {
    width: 24px;
    height: 24px;
    color: var(--clv2-accent);
}

.cloudstay-listing-v2__guarantee-content {
    flex: 1;
}

.cloudstay-listing-v2__guarantee-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--clv2-primary);
}

.cloudstay-listing-v2__guarantee-text {
    font-size: 14px;
    margin: 0;
    color: var(--clv2-secondary);
}

.cloudstay-listing-v2__guarantee-arrow {
    width: 20px;
    height: 20px;
    color: var(--clv2-secondary);
    flex-shrink: 0;
}

/* ==========================================================================
   Reviews Section
   ========================================================================== */

.cloudstay-listing-v2__reviews-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.cloudstay-listing-v2__reviews-rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cloudstay-listing-v2__star-icon {
    width: 20px;
    height: 20px;
    fill: var(--lp-reviews-rating, var(--clv2-star-color, #facc15));
    color: var(--lp-reviews-rating, var(--clv2-star-color, #facc15));
}

.cloudstay-listing-v2__rating-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--lp-reviews-score, var(--clv2-primary, #1f1f1f));
}

.cloudstay-listing-v2__rating-count {
    font-size: 14px;
    color: var(--lp-reviews-score-count, var(--clv2-secondary, #6b7280));
}

.cloudstay-listing-v2__reviews-carousel {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 calc(var(--clv2-container-padding) * -1);
    padding: 0 var(--clv2-container-padding);
}

.cloudstay-listing-v2__reviews-carousel::-webkit-scrollbar {
    display: none;
}

.cloudstay-listing-v2__reviews-track {
    display: flex;
    gap: 16px;
}

.cloudstay-listing-v2__review-card {
    flex-shrink: 0;
    width: 320px;
    padding: 24px;
    background: var(--lp-reviews-card-bg, var(--clv2-surface, #f9fafb));
    border-radius: var(--lp-reviews-card-radius, 12px);
    scroll-snap-align: start;
}

.cloudstay-listing-v2__review-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.cloudstay-listing-v2__review-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--lp-reviews-avatar-bg, var(--clv2-border, #e5e7eb));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--lp-reviews-avatar-text, var(--clv2-secondary, #6b7280));
}

.cloudstay-listing-v2__review-meta {
    flex: 1;
}

.cloudstay-listing-v2__review-name {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 2px 0;
    color: var(--lp-reviews-author, var(--clv2-primary, #1f1f1f));
}

.cloudstay-listing-v2__review-date {
    font-size: 13px;
    color: var(--lp-reviews-date, var(--clv2-secondary, #6b7280));
}

.cloudstay-listing-v2__review-stars {
    display: flex;
    gap: 2px;
}

.cloudstay-listing-v2__review-stars svg {
    width: 14px;
    height: 14px;
    fill: var(--lp-reviews-rating, var(--clv2-star-color, #facc15));
    color: var(--lp-reviews-rating, var(--clv2-star-color, #facc15));
}

.cloudstay-listing-v2__review-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--lp-reviews-text, var(--clv2-primary, #1f1f1f));
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cloudstay-listing-v2__review-skeleton {
    flex-shrink: 0;
    width: 320px;
    height: 180px;
    background: linear-gradient(90deg, var(--clv2-surface) 25%, var(--clv2-border-light) 50%, var(--clv2-surface) 75%);
    background-size: 200% 100%;
    animation: clv2-shimmer 1.5s infinite;
    border-radius: 12px;
}

@keyframes clv2-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   About / Description Section
   ========================================================================== */

.cloudstay-listing-v2__description {
    position: relative;
}

.cloudstay-listing-v2__description-text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--clv2-primary);
}

.cloudstay-listing-v2__description-short {
    display: block;
}

.cloudstay-listing-v2__description-full {
    display: none;
}

.cloudstay-listing-v2__description--expanded .cloudstay-listing-v2__description-short {
    display: none;
}

.cloudstay-listing-v2__description--expanded .cloudstay-listing-v2__description-full {
    display: block;
}

.cloudstay-listing-v2__read-more-btn {
    display: inline-block;
    margin-top: 12px;
    padding: 0;
    border: none;
    background: none;
    color: var(--clv2-accent);
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color var(--clv2-transition);
}

.cloudstay-listing-v2__read-more-btn:hover {
    color: var(--clv2-primary);
}

/* ==========================================================================
   Listing Description (Show More)
   ========================================================================== */

.listing-description-wrapper {
    position: relative;
}

.listing-description {
    font-size: 16px;
    line-height: 1.7;
    color: var(--lp-about-text, var(--clv2-primary, #1f1f1f));
    max-height: 200px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: transparent !important;
    background-color: transparent !important;
}

/* Strip any inline background colors from pasted content */
.listing-description *:not(img):not(video):not(iframe) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-text-fill-color: inherit !important;
    color: inherit !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.listing-description[style],
.listing-description [style],
.listing-description [style*="background"],
.listing-description mark,
.listing-v2-about .listing-description,
.listing-v2-about .listing-description * {
    background: transparent !important;
    background-color: transparent !important;
}

.listing-description.expanded,
.listing-v2-about .listing-description.expanded {
    max-height: 5000px !important;
    overflow: visible !important;
}

/* Gradient fade when content overflows */
.listing-description-wrapper.has-overflow .listing-description:not(.expanded)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, var(--lp-section-bg, var(--clv2-background, #ffffff)));
    pointer-events: none;
}

/* Show more button - always visible, styled as text link */
.show-more-description-btn {
    display: inline-block !important;
    margin-top: 16px;
    padding: 12px 24px !important;
    border: 1px solid var(--clv2-border, #333) !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--clv2-primary, #ffffff) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.show-more-description-btn:hover {
    background: var(--clv2-border, #333) !important;
    color: var(--clv2-primary, #ffffff) !important;
}

/* ==========================================================================
   Map Section
   ========================================================================== */

.cloudstay-listing-v2__location-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--clv2-secondary);
    margin: 0 0 16px 0;
}

.cloudstay-listing-v2__location-text svg {
    width: 18px;
    height: 18px;
    color: var(--clv2-primary);
}

.cloudstay-listing-v2__map {
    height: var(--lp-map-height, 400px);
    border-radius: var(--lp-map-radius, 12px);
    border: 1px solid var(--lp-map-border, transparent);
    overflow: hidden;
    background: var(--clv2-surface, #f9fafb);
}

/* Leaflet overrides */
.cloudstay-listing-v2__map .leaflet-control-attribution {
    font-size: 10px;
}

/* Custom map marker styles */
.cloudstay-map-marker {
    background: transparent;
    border: none;
}

.cloudstay-map-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.cloudstay-map-pin svg {
    width: 32px;
    height: 32px;
}

/* ==========================================================================
   Amenities Section
   ========================================================================== */

.cloudstay-listing-v2__amenities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.cloudstay-listing-v2__amenity {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--clv2-surface);
    border-radius: 8px;
    font-size: 14px;
    color: var(--clv2-primary);
}

.cloudstay-listing-v2__amenity svg {
    width: 20px;
    height: 20px;
    color: var(--clv2-accent);
    flex-shrink: 0;
}

.cloudstay-listing-v2__amenity--hidden {
    display: none;
}

.cloudstay-listing-v2__amenities--expanded .cloudstay-listing-v2__amenity--hidden {
    display: flex;
}

.cloudstay-listing-v2__amenities-toggle {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 24px;
    border: 1px solid var(--clv2-border);
    border-radius: 8px;
    background: var(--clv2-background);
    color: var(--clv2-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--clv2-transition);
}

.cloudstay-listing-v2__amenities-toggle:hover {
    background: var(--clv2-surface);
    border-color: var(--clv2-primary);
}

/* ==========================================================================
   Bedrooms Section (Where You'll Sleep)
   ========================================================================== */

.cloudstay-listing-v2__bedrooms-carousel {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 calc(var(--clv2-container-padding) * -1);
    padding: 0 var(--clv2-container-padding);
}

.cloudstay-listing-v2__bedrooms-carousel::-webkit-scrollbar {
    display: none;
}

.cloudstay-listing-v2__bedrooms-track {
    display: flex;
    gap: 16px;
}

.cloudstay-listing-v2__bedroom-card {
    flex-shrink: 0;
    width: 240px;
    background: var(--clv2-surface);
    border-radius: 12px;
    overflow: hidden;
    scroll-snap-align: start;
}

.cloudstay-listing-v2__bedroom-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.cloudstay-listing-v2__bedroom-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cloudstay-listing-v2__bedroom-placeholder {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clv2-border);
}

.cloudstay-listing-v2__bedroom-placeholder svg {
    width: 48px;
    height: 48px;
    color: var(--clv2-secondary);
    opacity: 0.5;
}

.cloudstay-listing-v2__bedroom-info {
    padding: 16px;
}

.cloudstay-listing-v2__bedroom-name {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--clv2-primary);
}

.cloudstay-listing-v2__bedroom-beds {
    font-size: 14px;
    margin: 0;
    color: var(--clv2-secondary);
}

/* ==========================================================================
   Nearby Section
   ========================================================================== */

.cloudstay-listing-v2__nearby-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.cloudstay-listing-v2__nearby-subtitle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
    color: var(--clv2-primary);
}

.cloudstay-listing-v2__nearby-subtitle svg {
    width: 20px;
    height: 20px;
    color: var(--clv2-accent);
}

.cloudstay-listing-v2__nearby-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cloudstay-listing-v2__nearby-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--clv2-border-light);
}

.cloudstay-listing-v2__nearby-item:last-child {
    border-bottom: none;
}

.cloudstay-listing-v2__nearby-name {
    font-size: 14px;
    color: var(--clv2-primary);
}

.cloudstay-listing-v2__nearby-distance {
    font-size: 13px;
    color: var(--clv2-secondary);
}

/* ==========================================================================
   House Rules Section
   ========================================================================== */

.cloudstay-listing-v2__rules-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.cloudstay-listing-v2__rules-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cloudstay-listing-v2__rule-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--clv2-primary);
}

.cloudstay-listing-v2__rule-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.cloudstay-listing-v2__rule-icon--allowed {
    color: var(--clv2-success);
}

.cloudstay-listing-v2__rule-icon--denied {
    color: var(--clv2-error);
}

.cloudstay-listing-v2__rule-content {
    display: flex;
    flex-direction: column;
}

.cloudstay-listing-v2__rule-label {
    font-size: 12px;
    color: var(--clv2-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cloudstay-listing-v2__rule-value {
    font-size: 15px;
    font-weight: 500;
    color: var(--clv2-primary);
}

.cloudstay-listing-v2__rules-details {
    margin-top: 8px;
}

.cloudstay-listing-v2__rules-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--clv2-surface);
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: var(--clv2-primary);
    list-style: none;
}

.cloudstay-listing-v2__rules-summary::-webkit-details-marker {
    display: none;
}

.cloudstay-listing-v2__rules-summary svg {
    width: 20px;
    height: 20px;
    transition: transform var(--clv2-transition);
}

.cloudstay-listing-v2__rules-details[open] .cloudstay-listing-v2__rules-summary svg {
    transform: rotate(180deg);
}

.cloudstay-listing-v2__rules-expanded {
    padding: 16px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--clv2-secondary);
}

/* ==========================================================================
   Contact Section (Full Width)
   ========================================================================== */

.cloudstay-listing-v2__contact-section {
    background: var(--lp-contact-bg, #ffffff);
    padding: var(--clv2-section-spacing) 0;
    margin-top: var(--clv2-section-spacing);
}

.cloudstay-listing-v2__contact-container {
    max-width: var(--clv2-container-width);
    margin: 0 auto;
    padding: 0 var(--clv2-container-padding);
    text-align: center;
}

.cloudstay-listing-v2__contact-section .cloudstay-listing-v2__section-title {
    margin-bottom: 16px;
}

.cloudstay-listing-v2__contact-section .cloudstay-listing-v2__contact-buttons {
    justify-content: center;
}

.cloudstay-listing-v2__contact-text {
    font-size: 15px;
    color: var(--clv2-secondary);
    margin: 0 0 20px 0;
}

.cloudstay-listing-v2__contact-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.cloudstay-listing-v2__contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--clv2-transition);
}

.cloudstay-listing-v2__contact-btn svg {
    width: 20px;
    height: 20px;
}

.cloudstay-listing-v2__contact-btn--phone {
    background: var(--clv2-primary);
    color: var(--clv2-background);
    border: none;
}

.cloudstay-listing-v2__contact-btn--phone:hover {
    background: #333;
}

.cloudstay-listing-v2__contact-btn--chat {
    background: var(--clv2-background);
    color: var(--clv2-primary);
    border: 1px solid var(--clv2-border);
}

.cloudstay-listing-v2__contact-btn--chat:hover {
    background: var(--clv2-surface);
    border-color: var(--clv2-primary);
}

/* ==========================================================================
   Sidebar (Booking Widget)
   ========================================================================== */

.cloudstay-listing-v2__sidebar {
    min-width: 0;
}

.cloudstay-listing-v2__sidebar-sticky {
    position: sticky;
    top: var(--lp-sidebar-sticky-offset, 100px);
}

/* ==========================================================================
   Modals
   ========================================================================== */

.cloudstay-listing-v2__modal {
    position: fixed;
    inset: 0;
    z-index: var(--clv2-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.cloudstay-listing-v2__modal[hidden] {
    display: none;
}

.cloudstay-listing-v2__modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.cloudstay-listing-v2__modal-content {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--clv2-background);
    border-radius: 16px;
    padding: 32px;
    box-shadow: var(--clv2-shadow-xl);
}

.cloudstay-listing-v2__modal-content--large {
    max-width: 800px;
}

.cloudstay-listing-v2__modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--clv2-surface);
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--clv2-transition);
}

.cloudstay-listing-v2__modal-close:hover {
    background: var(--clv2-border);
}

.cloudstay-listing-v2__modal-close svg {
    width: 20px;
    height: 20px;
    color: var(--clv2-primary);
}

.cloudstay-listing-v2__modal-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 24px;
}

.cloudstay-listing-v2__modal-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-radius: 50%;
    margin-bottom: 16px;
}

.cloudstay-listing-v2__modal-icon svg {
    width: 32px;
    height: 32px;
    color: var(--clv2-accent);
}

.cloudstay-listing-v2__modal-title {
    font-family: var(--clv2-font-display);
    font-size: 24px;
    font-weight: 400;
    margin: 0;
    color: var(--clv2-primary);
}

.cloudstay-listing-v2__guarantee-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cloudstay-listing-v2__guarantee-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--clv2-border-light);
    font-size: 15px;
    color: var(--clv2-primary);
}

.cloudstay-listing-v2__guarantee-list li:last-child {
    border-bottom: none;
}

.cloudstay-listing-v2__guarantee-list li svg {
    width: 20px;
    height: 20px;
    color: var(--clv2-success);
    flex-shrink: 0;
}

.cloudstay-listing-v2__floorplan-image {
    margin-top: 16px;
}

.cloudstay-listing-v2__floorplan-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ==========================================================================
   Toast Notification
   ========================================================================== */

.cloudstay-listing-v2__toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--clv2-z-toast);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: var(--clv2-primary);
    color: var(--clv2-background);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--clv2-shadow-lg);
    animation: clv2-toast-in 0.3s ease;
}

.cloudstay-listing-v2__toast[hidden] {
    display: none;
}

.cloudstay-listing-v2__toast svg {
    width: 18px;
    height: 18px;
    color: var(--clv2-success);
}

@keyframes clv2-toast-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ==========================================================================
   Gallery Lightbox
   ========================================================================== */

.cloudstay-listing-v2__lightbox {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cloudstay-listing-v2__lightbox[hidden] {
    display: none;
}

.cloudstay-listing-v2__lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: var(--lp-lightbox-backdrop, rgba(0, 0, 0, 0.95));
}

.cloudstay-listing-v2__lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--lp-lightbox-nav-bg, rgba(255, 255, 255, 0.1));
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}

.cloudstay-listing-v2__lightbox-close:hover {
    background: var(--lp-lightbox-nav-hover-bg, rgba(255, 255, 255, 0.2));
}

.cloudstay-listing-v2__lightbox-close svg {
    width: 24px;
    height: 24px;
    color: var(--lp-lightbox-close, #fff);
}

.cloudstay-listing-v2__lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--lp-lightbox-nav-bg, rgba(255, 255, 255, 0.1));
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}

.cloudstay-listing-v2__lightbox-nav:hover {
    background: var(--lp-lightbox-nav-hover-bg, rgba(255, 255, 255, 0.2));
}

.cloudstay-listing-v2__lightbox-nav svg {
    width: 28px;
    height: 28px;
    color: var(--lp-lightbox-nav, #fff);
}

.cloudstay-listing-v2__lightbox-nav--prev {
    left: 20px;
}

.cloudstay-listing-v2__lightbox-nav--next {
    right: 20px;
}

.cloudstay-listing-v2__lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cloudstay-listing-v2__lightbox-image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
}

.cloudstay-listing-v2__lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 16px;
    background: var(--lp-gallery-counter-bg, rgba(0, 0, 0, 0.6));
    border-radius: 20px;
    color: var(--lp-lightbox-counter, #fff);
    font-size: 14px;
    font-weight: 500;
    z-index: 10;
}

/* Mobile adjustments for lightbox */
@media (max-width: 768px) {
    .cloudstay-listing-v2__lightbox-nav {
        width: 44px;
        height: 44px;
    }

    .cloudstay-listing-v2__lightbox-nav svg {
        width: 22px;
        height: 22px;
    }

    .cloudstay-listing-v2__lightbox-nav--prev {
        left: 10px;
    }

    .cloudstay-listing-v2__lightbox-nav--next {
        right: 10px;
    }

    .cloudstay-listing-v2__lightbox-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
    }
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

/* Large screens */
@media (max-width: 1400px) {
    :root {
        --clv2-container-padding: 20px;
    }

    .cloudstay-listing-v2__content-container {
        gap: 48px;
    }
}

/* Tablets / Small laptops */
@media (max-width: 1024px) {
    :root {
        --clv2-gallery-height: 400px;
        --clv2-section-spacing: 48px;
    }

    .cloudstay-listing-v2__title {
        font-size: 28px;
    }

    .cloudstay-listing-v2__content-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .cloudstay-listing-v2__sidebar {
        order: -1;
    }

    .cloudstay-listing-v2__sidebar-sticky {
        position: static;
    }

    .cloudstay-listing-v2__amenities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablets */
@media (max-width: 768px) {
    :root {
        --clv2-gallery-height: 300px;
        --clv2-container-padding: 16px;
        --clv2-section-spacing: 32px;
    }

    .cloudstay-listing-v2__gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
    }

    .cloudstay-listing-v2__gallery-main {
        grid-row: span 1;
        aspect-ratio: 16 / 10;
    }

    .cloudstay-listing-v2__gallery-stack {
        display: none;
    }

    .cloudstay-listing-v2__title-row {
        flex-direction: column;
        gap: 16px;
    }

    .cloudstay-listing-v2__share-btn {
        align-self: flex-start;
    }

    .cloudstay-listing-v2__details-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .cloudstay-listing-v2__stats {
        gap: 16px;
    }

    .cloudstay-listing-v2__section-title {
        font-size: 22px;
    }

    .cloudstay-listing-v2__rules-grid,
    .cloudstay-listing-v2__nearby-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .cloudstay-listing-v2__contact-buttons {
        flex-direction: column;
    }

    .cloudstay-listing-v2__contact-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .cloudstay-listing-v2__title {
        font-size: 24px;
    }

    .cloudstay-listing-v2__feature-tags {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin: 0 -16px;
        padding: 0 16px;
    }

    .cloudstay-listing-v2__feature-tags::-webkit-scrollbar {
        display: none;
    }

    .cloudstay-listing-v2__feature-tag {
        flex-shrink: 0;
    }

    .cloudstay-listing-v2__amenities-grid {
        grid-template-columns: 1fr;
    }

    .cloudstay-listing-v2__modal-content {
        padding: 24px;
        border-radius: 12px;
    }

    .cloudstay-listing-v2__review-card,
    .cloudstay-listing-v2__bedroom-card {
        width: 280px;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .cloudstay-listing-v2__share-btn,
    .cloudstay-listing-v2__floorplan-trigger,
    .cloudstay-listing-v2__contact-buttons,
    .cloudstay-listing-v2__sidebar,
    .cloudstay-listing-v2__modal,
    .cloudstay-listing-v2__toast {
        display: none !important;
    }

    .cloudstay-listing-v2__gallery-grid {
        height: auto;
        page-break-inside: avoid;
    }

    .cloudstay-listing-v2__gallery-main {
        max-height: 300px;
    }

    .cloudstay-listing-v2__content-container {
        display: block;
    }

    .cloudstay-listing-v2__amenity--hidden {
        display: flex !important;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .cloudstay-listing-v2 *,
    .cloudstay-listing-v2 *::before,
    .cloudstay-listing-v2 *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Focus Styles (Accessibility)
   ========================================================================== */

.cloudstay-listing-v2 :focus-visible {
    outline: 2px solid var(--clv2-accent);
    outline-offset: 2px;
}

.cloudstay-listing-v2 button:focus:not(:focus-visible),
.cloudstay-listing-v2 a:focus:not(:focus-visible) {
    outline: none;
}

/* ==========================================================================
   High Contrast Mode
   ========================================================================== */

@media (prefers-contrast: high) {
    :root {
        --clv2-border: #000000;
        --clv2-border-light: #666666;
    }

    .cloudstay-listing-v2__feature-tag,
    .cloudstay-listing-v2__amenity {
        border: 1px solid var(--clv2-border);
    }
}

/* ==========================================================================
   Responsive Utility Classes
   ========================================================================== */

/* Desktop-only elements: visible on screens > 768px */
.desktop-only {
    display: block;
}

/* Mobile-only elements: hidden on desktop */
.mobile-only {
    display: none;
}

/* Mobile breakpoint: < 768px */
@media (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }

    /* Mobile bottom bar needs flex */
    .cloudstay-v2-bottom-bar.mobile-only {
        display: flex !important;
    }

    /* Mobile header needs flex (unless hidden for airbnb hero) */
    .cloudstay-v2-mobile-header.mobile-only {
        display: flex !important;
    }
    .cloudstay-v2-mobile-header.mobile-only.cloudstay-v2-mobile-header--hidden {
        display: none !important;
    }

    /* Mobile quick stats needs flex */
    .cloudstay-v2-quick-stats.mobile-only {
        display: flex !important;
    }


    .listing-v2-header__back-btn {
        display: none !important;
    }

    /* Hide section carousel nav buttons on mobile - users swipe */
    .carousel-nav,
    .carousel-nav-btn,
    .listing-v2-similar .carousel-nav,
    .listing-v2-reviews .carousel-nav {
        display: none !important;
    }

    /* Hide desktop header share/save buttons on mobile - using mobile header instead */
    .listing-v2-header__actions,
    .listing-v2-header__share-btn,
    .listing-v2-header__wishlist-btn {
        display: none !important;
    }
}

/* ==========================================================================
   Mobile Header Styles
   ========================================================================== */

.cloudstay-v2-mobile-header {
    position: relative;
    width: 100%;
    height: 56px;
    background: var(--clv2-background, #fff);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 16px;
    padding-right: 16px;
    border-bottom: 1px solid var(--clv2-border, #e5e7eb);
    box-sizing: border-box;
}

.cloudstay-v2-mobile-back,
.cloudstay-v2-mobile-share {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.cloudstay-v2-mobile-back:active,
.cloudstay-v2-mobile-share:active {
    background-color: var(--clv2-surface);
}

.cloudstay-v2-mobile-back svg,
.cloudstay-v2-mobile-share svg {
    width: 24px;
    height: 24px;
    stroke: var(--clv2-primary);
}

.cloudstay-v2-mobile-title {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin: 0;
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   Mobile Photo Carousel
   ========================================================================== */

.cloudstay-v2-photo-carousel {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: var(--clv2-surface);
}

.cloudstay-v2-carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cloudstay-v2-carousel-track::-webkit-scrollbar {
    display: none;
}

.cloudstay-v2-carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
}

.cloudstay-v2-carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cloudstay-v2-photo-counter {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: var(--lp-gallery-counter-bg, rgba(0, 0, 0, 0.7));
    color: var(--lp-gallery-counter-color, white);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.cloudstay-v2-wishlist-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.cloudstay-v2-wishlist-btn svg {
    width: 22px;
    height: 22px;
    stroke: var(--clv2-primary);
    fill: none;
    transition: fill 0.2s, stroke 0.2s;
}

.cloudstay-v2-wishlist-btn.active svg {
    fill: #ef4444;
    stroke: #ef4444;
}

/* ==========================================================================
   Mobile Quick Stats
   ========================================================================== */

.cloudstay-v2-quick-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--clv2-surface);
    border-bottom: 1px solid var(--clv2-border);
}

.cloudstay-v2-quick-stats-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cloudstay-v2-quick-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--clv2-secondary);
}

.cloudstay-v2-quick-stat svg {
    width: 16px;
    height: 16px;
    stroke: var(--clv2-secondary);
}

.cloudstay-v2-quick-stats-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cloudstay-v2-quick-link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: var(--clv2-background);
    border: 1px solid var(--clv2-border);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--clv2-primary);
    cursor: pointer;
    transition: background-color 0.2s;
}

.cloudstay-v2-quick-link:active {
    background: var(--clv2-surface);
}

.cloudstay-v2-quick-link svg {
    width: 14px;
    height: 14px;
}

/* ==========================================================================
   Mobile Feature Tags
   ========================================================================== */

.cloudstay-v2-feature-tags {
    padding: 12px 0;
    border-bottom: 1px solid var(--clv2-border);
    overflow: hidden;
}

.cloudstay-v2-feature-tags-scroll {
    display: flex;
    gap: 8px;
    padding: 0 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cloudstay-v2-feature-tags-scroll::-webkit-scrollbar {
    display: none;
}

.cloudstay-v2-feature-tag {
    flex-shrink: 0;
    padding: 6px 14px;
    background: var(--clv2-surface);
    border: 1px solid var(--clv2-border);
    border-radius: 20px;
    font-size: 13px;
    color: var(--clv2-primary);
    white-space: nowrap;
    scroll-snap-align: start;
}

/* ==========================================================================
   Mobile Fixed Bottom Bar
   ========================================================================== */

.cloudstay-v2-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(80px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--lp-mobile-bar-bg, var(--clv2-background, #ffffff));
    border-top: 1px solid var(--lp-mobile-bar-border, var(--clv2-border, #e5e7eb));
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 16px;
    padding-right: 16px;
    z-index: 200;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
}

.cloudstay-v2-bottom-bar-left {
    flex: 1;
    min-width: 0;
}

.cloudstay-v2-date-selector {
    text-align: left;
    min-height: 44px;
    padding: 8px 0;
    background: none;
    border: none;
    cursor: pointer;
}

.cloudstay-v2-dates-display {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--clv2-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cloudstay-v2-nights-display {
    display: block;
    font-size: 12px;
    color: var(--clv2-secondary);
    margin-top: 2px;
}

.cloudstay-v2-bottom-bar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cloudstay-v2-price-display {
    text-align: right;
}

.cloudstay-v2-total-price {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--lp-mobile-bar-price, var(--clv2-primary, #1f1f1f));
}

.cloudstay-v2-price-label {
    display: block;
    font-size: 12px;
    color: var(--lp-mobile-bar-price-label, var(--clv2-secondary, #6b7280));
}

.cloudstay-v2-reserve-btn {
    padding: 14px 24px;
    background: var(--lp-mobile-bar-btn-bg, var(--clv2-accent, #e35323));
    color: var(--lp-mobile-bar-btn-text, #ffffff);
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--lp-mobile-bar-btn-radius, 8px);
    border: none;
    min-height: 44px;
    white-space: nowrap;
    cursor: pointer;
}

.cloudstay-v2-reserve-btn:active {
    opacity: 0.9;
}

/* ==========================================================================
   Mobile Modals
   ========================================================================== */

.cloudstay-v2-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.3s, opacity 0.3s;
}

.cloudstay-v2-modal[aria-hidden="false"] {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.3s;
}

.cloudstay-v2-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.cloudstay-v2-modal-content {
    position: relative;
    width: 100%;
    max-height: 90vh;
    background: var(--clv2-background);
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
}

.cloudstay-v2-modal[aria-hidden="false"] .cloudstay-v2-modal-content {
    transform: translateY(0);
}

.cloudstay-v2-modal-content--bottom-sheet {
    max-height: 60vh;
}

.cloudstay-v2-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--clv2-border);
    background: var(--clv2-background);
    position: sticky;
    top: 0;
    z-index: 10;
}

.cloudstay-v2-modal-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.cloudstay-v2-modal-close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--clv2-surface);
    border: none;
    cursor: pointer;
}

.cloudstay-v2-modal-close svg {
    width: 20px;
    height: 20px;
}

.cloudstay-v2-modal-clear {
    font-size: 14px;
    font-weight: 500;
    color: var(--clv2-secondary);
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
}

.cloudstay-v2-modal-body {
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.cloudstay-v2-modal-footer {
    padding: 16px;
    border-top: 1px solid var(--clv2-border);
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.cloudstay-v2-modal-apply {
    width: 100%;
    padding: 16px;
    background: var(--clv2-accent);
    color: white;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    min-height: 44px;
    cursor: pointer;
}

/* Guest Counter */
.cloudstay-v2-guest-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--clv2-border);
}

.cloudstay-v2-guest-row:last-child {
    border-bottom: none;
}

.cloudstay-v2-guest-info h4 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 2px 0;
}

.cloudstay-v2-guest-info p {
    font-size: 13px;
    color: var(--clv2-secondary);
    margin: 0;
}

.cloudstay-v2-guest-counter {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cloudstay-v2-counter-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--clv2-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    cursor: pointer;
    transition: border-color 0.2s, opacity 0.2s;
}

.cloudstay-v2-counter-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.cloudstay-v2-counter-btn:not(:disabled):active {
    border-color: var(--clv2-primary);
}

.cloudstay-v2-counter-btn svg {
    width: 16px;
    height: 16px;
}

.cloudstay-v2-counter-value {
    width: 24px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
}

/* Share Options */
.cloudstay-v2-share-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.cloudstay-v2-share-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    min-height: 44px;
    background: none;
    border: none;
    cursor: pointer;
}

.cloudstay-v2-share-option svg {
    width: 24px;
    height: 24px;
    stroke: var(--clv2-primary);
}

.cloudstay-v2-share-option span {
    font-size: 12px;
    color: var(--clv2-secondary);
}

/* Calendar Container */
.cloudstay-v2-calendar-container {
    max-height: 60vh;
    overflow-y: auto;
}

/* ==========================================================================
   Availability Calendar Section
   ========================================================================== */

.cloudstay-listing-v2__availability-calendar {
    background: var(--lp-cal-bg, var(--clv2-surface, #ffffff));
    border: 1px solid var(--lp-cal-border, transparent);
    border-radius: var(--lp-cal-radius, 12px);
    padding: 24px;
}

.cloudstay-listing-v2__calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    background: var(--lp-cal-header-bg, transparent);
}

.cloudstay-listing-v2__calendar-month {
    font-size: 18px;
    font-weight: 600;
    color: var(--lp-cal-header-text, var(--clv2-primary, #1f1f1f));
}

.cloudstay-listing-v2__calendar-nav {
    display: flex;
    gap: 8px;
}

.cloudstay-listing-v2__calendar-nav-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--lp-cal-nav-border, var(--clv2-border, #e5e7eb));
    border-radius: 50%;
    background: var(--lp-cal-nav-bg, var(--clv2-background, #ffffff));
    color: var(--lp-cal-nav-color, var(--clv2-primary, #6b7280));
    cursor: pointer;
    transition: all var(--clv2-transition);
}

.cloudstay-listing-v2__calendar-nav-btn:hover {
    background: var(--lp-cal-hover-bg, var(--clv2-surface, #f3f4f6));
    color: var(--lp-cal-nav-hover, var(--clv2-primary, #1f1f1f));
    border-color: var(--lp-cal-nav-hover, var(--clv2-primary, #1f1f1f));
}

.cloudstay-listing-v2__calendar-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.cloudstay-listing-v2__calendar-nav-btn svg {
    width: 18px;
    height: 18px;
}

.cloudstay-listing-v2__calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.cloudstay-listing-v2__calendar-weekday {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--lp-cal-weekday, var(--clv2-secondary, #6b7280));
    padding: 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cloudstay-listing-v2__calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.cloudstay-listing-v2__calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--lp-cal-font-size, 14px);
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--clv2-transition);
    border: none;
    background: transparent;
    color: var(--lp-cal-day, var(--clv2-primary, #1f1f1f));
}

.cloudstay-listing-v2__calendar-day:hover:not(:disabled):not(.cloudstay-listing-v2__calendar-day--unavailable) {
    background: var(--lp-cal-hover-bg, var(--clv2-border, #f3f4f6));
}

.cloudstay-listing-v2__calendar-day--today {
    font-weight: 600;
    border: 2px solid var(--lp-cal-today-border, var(--clv2-accent, #1f1f1f));
    background: var(--lp-cal-today-bg, transparent);
}

.cloudstay-listing-v2__calendar-day--selected {
    background: var(--lp-cal-selected-bg, var(--clv2-accent, #1f1f1f)) !important;
    color: var(--lp-cal-selected-text, #ffffff) !important;
}

.cloudstay-listing-v2__calendar-day--in-range {
    background: var(--lp-cal-range-bg, rgba(31, 31, 31, 0.1));
    border-radius: 0;
}

.cloudstay-listing-v2__calendar-day--range-start {
    border-radius: 50% 0 0 50%;
}

.cloudstay-listing-v2__calendar-day--range-end {
    border-radius: 0 50% 50% 0;
}

.cloudstay-listing-v2__calendar-day--unavailable {
    background: var(--lp-cal-blocked-bg, #f3f4f6);
    color: var(--lp-cal-blocked-text, var(--clv2-border, #9ca3af));
    text-decoration: line-through;
    cursor: not-allowed;
    border-radius: 0;
}

.cloudstay-listing-v2__calendar-day--past {
    color: var(--lp-cal-blocked-text, var(--clv2-border, #9ca3af));
    cursor: not-allowed;
    border-radius: 0;
}

.cloudstay-listing-v2__calendar-day--empty {
    visibility: hidden;
}

.cloudstay-listing-v2__calendar-legend {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--lp-cal-border, var(--clv2-border, #e5e7eb));
}

.cloudstay-listing-v2__calendar-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--lp-cal-legend-text, var(--clv2-secondary, #6b7280));
}

.cloudstay-listing-v2__calendar-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.cloudstay-listing-v2__calendar-legend-dot--available {
    background: var(--clv2-success, #22c55e);
}

.cloudstay-listing-v2__calendar-legend-dot--unavailable {
    background: var(--lp-cal-blocked-bg, var(--clv2-border, #e5e7eb));
}

.cloudstay-listing-v2__calendar-legend-dot--selected {
    background: var(--lp-cal-selected-bg, var(--clv2-accent, #1f1f1f));
}

/* Calendar price display under dates */
.cloudstay-listing-v2__calendar-day-price {
    font-size: 10px;
    color: var(--lp-cal-price, #6b7280);
}

/* Two-month calendar display for desktop */
.cloudstay-listing-v2__calendar-months {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

@media (max-width: 768px) {
    .cloudstay-listing-v2__calendar-months {
        grid-template-columns: 1fr;
    }
}

.cloudstay-listing-v2__calendar-month-container {
    min-width: 0;
}

/* Calendar loading state */
.cloudstay-listing-v2__calendar-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--clv2-secondary);
}

.cloudstay-listing-v2__calendar-loading svg {
    width: 24px;
    height: 24px;
    animation: clv2-spin 1s linear infinite;
}

@keyframes clv2-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   iPro Calendar Styles (Exmoore - half-dates, allowed indicators)
   ========================================================================== */

/* iPro: Allowed date indicator (green circle) for checkout-calendar-day */
.checkout-calendar-day .ipro-allowed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border: 2px solid #1e8f3c !important;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.checkout-calendar-day:not(.disabled):not(.selected):not(.blocked) .ipro-allowed:hover {
    background-color: #1e8f3c !important;
    color: #ffffff !important;
}

.checkout-calendar-day.selected .ipro-allowed {
    border-color: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
}

/* iPro: Half-date styles for mobile checkout calendar */
.checkout-calendar-day.checkin-date-half,
.checkout-calendar-day.checkout-date-half {
    position: relative;
    overflow: hidden;
}

/* Check-in only (closedToDeparture): diagonal stripe top-left */
.checkout-calendar-day.checkin-date-half::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 50%;
    bottom: 50%;
    background: linear-gradient(135deg, rgba(30, 143, 60, 0.15) 0%, rgba(30, 143, 60, 0.15) 50%, transparent 50%);
    pointer-events: none;
}

/* Check-out only (closedToArrival): diagonal stripe bottom-right */
.checkout-calendar-day.checkout-date-half::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0;
    bottom: 0;
    background: linear-gradient(315deg, rgba(30, 143, 60, 0.15) 0%, rgba(30, 143, 60, 0.15) 50%, transparent 50%);
    pointer-events: none;
}

/* Half-dates should still be clickable */
.checkout-calendar-day.checkin-date-half:not(.disabled):not(.blocked),
.checkout-calendar-day.checkout-date-half:not(.disabled):not(.blocked) {
    cursor: pointer;
    opacity: 0.85;
}

.checkout-calendar-day.checkin-date-half:not(.disabled):not(.blocked):hover,
.checkout-calendar-day.checkout-date-half:not(.disabled):not(.blocked):hover {
    opacity: 1;
    background-color: rgba(30, 143, 60, 0.1);
}

/* ==========================================================================
   Similar Properties Section
   ========================================================================== */

.cloudstay-listing-v2__similar {
    background: var(--clv2-surface);
    padding: var(--clv2-section-spacing) 0;
    margin-top: var(--clv2-section-spacing);
}

.cloudstay-listing-v2__similar-container {
    max-width: var(--clv2-container-width);
    margin: 0 auto;
    padding: 0 var(--clv2-container-padding);
}

.cloudstay-listing-v2__similar .cloudstay-listing-v2__section-title {
    margin-bottom: 32px;
}

.cloudstay-listing-v2__similar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 1200px) {
    .cloudstay-listing-v2__similar-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .cloudstay-listing-v2__similar-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .cloudstay-listing-v2__similar-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.cloudstay-listing-v2__similar-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--lp-similar-card-bg, var(--clv2-background, #ffffff));
    border: 1px solid var(--lp-similar-card-border, transparent);
    border-radius: var(--lp-similar-card-radius, 12px);
    overflow: hidden;
    box-shadow: var(--clv2-shadow-sm);
    transition: transform var(--clv2-transition), box-shadow var(--clv2-transition);
}

.cloudstay-listing-v2__similar-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--clv2-shadow-md);
}

.cloudstay-listing-v2__similar-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.cloudstay-listing-v2__similar-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--clv2-transition-slow);
}

.cloudstay-listing-v2__similar-card:hover .cloudstay-listing-v2__similar-image img {
    transform: scale(1.05);
}

.cloudstay-listing-v2__similar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clv2-border);
}

.cloudstay-listing-v2__similar-placeholder svg {
    width: 48px;
    height: 48px;
    color: var(--clv2-secondary);
    opacity: 0.5;
}

.cloudstay-listing-v2__similar-rating {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--clv2-primary);
}

.cloudstay-listing-v2__similar-rating svg {
    width: 14px;
    height: 14px;
    fill: var(--clv2-star-color);
    color: var(--clv2-star-color);
}

.cloudstay-listing-v2__similar-info {
    padding: 16px;
}

.cloudstay-listing-v2__similar-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 6px 0;
    color: var(--lp-similar-title, var(--clv2-primary, #1f1f1f));
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cloudstay-listing-v2__similar-location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--lp-similar-location, var(--clv2-secondary, #6b7280));
    margin: 0 0 10px 0;
}

.cloudstay-listing-v2__similar-location svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.cloudstay-listing-v2__similar-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.cloudstay-listing-v2__similar-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--clv2-secondary);
}

.cloudstay-listing-v2__similar-meta svg {
    width: 14px;
    height: 14px;
}

.cloudstay-listing-v2__similar-price {
    margin: 0;
}

.cloudstay-listing-v2__similar-price-amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--lp-similar-price, var(--clv2-primary, #1f1f1f));
}

.cloudstay-listing-v2__similar-price-unit {
    font-size: 14px;
    color: var(--lp-similar-price-label, var(--clv2-secondary, #6b7280));
}

/* ==========================================================================
   Similar Properties Section (alternate class names)
   Fix carousel nav positioning to stay within section
   ========================================================================== */

.similar-properties-section,
.similar-listings-section {
    position: relative;
}

/* Header row with title and nav buttons */
.similar-properties-section h2,
.similar-listings-section h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

/* Nav container positioned inside the header */
.similar-properties-section .carousel-nav,
.similar-listings-section .carousel-nav {
    display: flex;
    gap: 8px;
    position: static;
}

/* Override absolute positioning for nav buttons in this context */
.similar-properties-section .carousel-nav .carousel-nav-btn,
.similar-listings-section .carousel-nav .carousel-nav-btn {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    background: var(--lp-section-bg, #333333);
    border: 1px solid var(--clv2-border, #444444) !important;
    color: var(--clv2-primary, #ffffff);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.similar-properties-section .carousel-nav .carousel-nav-btn:hover,
.similar-listings-section .carousel-nav .carousel-nav-btn:hover {
    background: var(--clv2-border, #444444);
}

.similar-properties-section .carousel-nav .carousel-nav-btn:disabled,
.similar-listings-section .carousel-nav .carousel-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Carousel container */
.similar-properties-carousel {
    position: relative;
    overflow: hidden;
}

/* Hide any direct child nav buttons (use header nav instead) */
.similar-properties-carousel > .carousel-nav-btn {
    display: none !important;
}

/* ========================================
   More Attractions - Horizontal Scroll Grid
   (Listing Page Desktop View)
   ======================================== */
.listing-more-attractions {
    padding: 48px 0;
    background: #f9fafb;
    margin-top: 32px;
}

.listing-more-attractions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.listing-more-attractions-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1f1f1f;
    margin: 0;
}

.listing-more-attractions-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
    padding-bottom: 16px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
}

.listing-more-attractions-scroll::-webkit-scrollbar {
    height: 6px;
}

.listing-more-attractions-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.listing-more-attractions-scroll::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.listing-more-attractions-scroll::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

.listing-more-attractions-grid {
    display: flex;
    gap: 20px;
    width: max-content;
}

.listing-more-attractions-card {
    flex: 0 0 280px;
    min-width: 280px;
    max-width: 280px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s, transform 0.2s;
    text-decoration: none;
    color: inherit;
    display: block;
}

.listing-more-attractions-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.listing-more-attractions-card__image {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.listing-more-attractions-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.listing-more-attractions-card__distance {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.listing-more-attractions-card__content {
    padding: 14px;
}

.listing-more-attractions-card__name {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 6px 0;
    line-height: 1.3;
    color: #1f1f1f;
}

.listing-more-attractions-card__category {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 8px;
    display: block;
}

.listing-more-attractions-card__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
}

.listing-more-attractions-card__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #f59e0b;
}

.listing-more-attractions-card__rating svg {
    width: 14px;
    height: 14px;
}

/* Desktop: wider cards, no margin adjustments */
@media (min-width: 1024px) {
    .listing-more-attractions-scroll {
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .listing-more-attractions-card {
        flex: 0 0 320px;
        min-width: 320px;
        max-width: 320px;
    }
}

/* Tablet: medium cards */
@media (max-width: 1023px) and (min-width: 641px) {
    .listing-more-attractions-card {
        flex: 0 0 280px;
        min-width: 280px;
        max-width: 280px;
    }
}

/* Mobile: smaller cards and padding */
@media (max-width: 640px) {
    .listing-more-attractions {
        padding: 32px 0;
    }

    .listing-more-attractions-title {
        font-size: 1.5rem;
    }

    .listing-more-attractions-card {
        flex: 0 0 260px;
        min-width: 260px;
        max-width: 260px;
    }
}

/* =============================================
   Custom Embed Section - Responsive 16:9
   ============================================= */
.listing-embed-section {
    margin-bottom: var(--csg-section-spacing, 48px);
}

.listing-embed-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: var(--csg-radius-lg, 12px);
}

.listing-embed-wrapper iframe,
.listing-embed-wrapper object,
.listing-embed-wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Handle wrapped iframes (e.g., inside <center> tags) */
.listing-embed-wrapper center,
.listing-embed-wrapper div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.listing-embed-wrapper center iframe,
.listing-embed-wrapper div iframe {
    width: 100% !important;
    height: 100% !important;
    position: static;
}