/**
 * Connect WordPress Plugin — Core Frontend Styles
 *
 * Shared component styles loaded on every page. Contains typography,
 * layout utilities, guest picker, badges, modals, toasts, spinners,
 * and animation keyframes.
 *
 * NOTE: Button styles live in reset.css (theme-protected with !important).
 *       This file handles non-button components that don't need !important
 *       unless specifically noted.
 *
 * Version: 1.0.0
 * Last Updated: 2026-02-14
 */


/* ==========================================================================
   1. TYPOGRAPHY
   Heading hierarchy, body text, and display text styles
   ========================================================================== */

.cwp-root h1,
.cwp-root h2,
.cwp-root h3,
.cwp-root h4,
.cwp-root h5,
.cwp-root h6 {
    font-family: var(--cwp-font-display);
    line-height: var(--cwp-line-height-tight);
    letter-spacing: var(--cwp-letter-spacing-tight);
    color: var(--cwp-text);
    margin: 0;
    padding: 0;
}

.cwp-root h1 {
    font-size: var(--cwp-size-h1);
    font-weight: var(--cwp-weight-bold);
}

.cwp-root h2 {
    font-size: var(--cwp-size-h2);
    font-weight: var(--cwp-weight-bold);
}

.cwp-root h3 {
    font-size: var(--cwp-size-h3);
    font-weight: var(--cwp-weight-semibold);
}

.cwp-root h4 {
    font-size: var(--cwp-size-h4);
    font-weight: var(--cwp-weight-semibold);
}

.cwp-root p {
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body);
    line-height: var(--cwp-line-height-relaxed);
    color: var(--cwp-text-secondary);
    margin: 0 0 var(--cwp-space-md) 0;
}

.cwp-root p:last-child {
    margin-bottom: 0;
}

.cwp-root strong {
    font-weight: var(--cwp-weight-semibold);
    color: var(--cwp-text);
}

.cwp-root small {
    font-size: var(--cwp-size-body-sm);
    color: var(--cwp-text-muted);
}


/* ==========================================================================
   2. LAYOUT UTILITIES
   Container, screen reader, Alpine cloak
   ========================================================================== */

.cwp-container {
    max-width: var(--cwp-container-xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--cwp-space-lg);
    padding-right: var(--cwp-space-lg);
}

.cwp-container--sm {
    max-width: var(--cwp-container-sm);
}

.cwp-container--md {
    max-width: var(--cwp-container-md);
}

.cwp-container--lg {
    max-width: var(--cwp-container-lg);
}

.cwp-container--2xl {
    max-width: var(--cwp-container-2xl);
}

/* Heading utility classes */
.cwp-h6 {
    font-family: var(--cwp-font-display);
    font-size: var(--cwp-size-body-sm);
    font-weight: var(--cwp-weight-semibold);
    color: var(--cwp-text);
    text-transform: uppercase;
    letter-spacing: var(--cwp-letter-spacing-wide);
    line-height: var(--cwp-line-height-tight);
    margin: 0;
}

/* Text color utilities */
.cwp-text-primary {
    color: var(--cwp-text);
}

/* Background utilities */
.cwp-background {
    background: var(--cwp-bg);
}

/* Screen reader only — visually hidden but accessible */
.cwp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Alpine.js cloak — hidden until Alpine initializes */
[x-cloak] {
    display: none !important;
}


/* ==========================================================================
   3. GUEST PICKER
   Shared guest picker dropdown used in search bar & booking sidebar
   ========================================================================== */

.cwp-guest-picker {
    padding: var(--cwp-space-md);
}

.cwp-guest-picker__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--cwp-border);
}

.cwp-guest-picker__row:last-child {
    border-bottom: none;
}

.cwp-guest-picker__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cwp-guest-picker__info strong {
    font-size: var(--cwp-size-body);
    font-weight: var(--cwp-weight-medium);
    color: var(--cwp-text);
}

.cwp-guest-picker__info span {
    font-size: var(--cwp-size-body-sm);
    color: var(--cwp-text-muted);
}

.cwp-guest-picker__controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cwp-guest-picker__count {
    min-width: 32px;
    text-align: center;
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body);
    font-weight: var(--cwp-weight-medium);
    color: var(--cwp-text);
}


/* ==========================================================================
   4. BADGES
   Inline badge variants for property cards, search results, etc.
   ========================================================================== */

.cwp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--cwp-radius-sm);
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-caption);
    font-weight: var(--cwp-weight-semibold);
    white-space: nowrap;
    line-height: 1;
}

.cwp-badge--rare {
    background: var(--cwp-rare-bg);
    color: var(--cwp-rare-text);
}

.cwp-badge--urgency {
    background: var(--cwp-urgency-bg);
    color: var(--cwp-urgency-text);
}

.cwp-badge--superhost {
    background: var(--cwp-accent);
    color: #FFFFFF;
}

.cwp-badge--instant {
    background: var(--cwp-success);
    color: #FFFFFF;
}

.cwp-badge--favourite {
    background: var(--cwp-primary);
    color: #FFFFFF;
}

.cwp-badge--new {
    background: var(--cwp-warning);
    color: #FFFFFF;
}

/* Card badges (positioned absolutely over card image) */
.cwp-card__badge {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--cwp-radius-sm);
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-caption);
    font-weight: var(--cwp-weight-semibold);
    white-space: nowrap;
    line-height: 1;
}

.cwp-card__badge--type,
.cwp-card__type {
    top: 12px;
    left: 12px;
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.92);
    color: var(--cwp-text);
    backdrop-filter: blur(4px);
}

.cwp-card__badge--superhost,
.cwp-card__superhost {
    top: 12px;
    left: 12px;
    background: var(--cwp-accent);
    color: #FFFFFF;
}

.cwp-card__badge--type + .cwp-card__badge--superhost,
.cwp-card__type + .cwp-card__save + .cwp-card__superhost,
.cwp-card__type ~ .cwp-card__superhost {
    top: 42px;
}

.cwp-card__badge--urgency,
.cwp-card__urgency {
    bottom: 12px;
    left: 12px;
    background: var(--cwp-urgency-bg);
    color: var(--cwp-urgency-text);
}


/* ==========================================================================
   5. DIVIDER
   Horizontal rule/separator between content sections
   ========================================================================== */

.cwp-divider {
    border: none;
    border-top: 1px solid var(--cwp-border);
    margin: var(--cwp-space-xl) 0;
}


/* ==========================================================================
   6. EMPTY STATE / NO RESULTS
   Shown when search returns zero results
   ========================================================================== */

.cwp-empty-state,
.cwp-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--cwp-space-4xl) var(--cwp-space-lg);
    gap: var(--cwp-space-md);
}

.cwp-empty-state__icon,
.cwp-no-results__icon {
    color: var(--cwp-text-muted);
    margin-bottom: var(--cwp-space-sm);
}

.cwp-empty-state__title,
.cwp-no-results__title {
    font-family: var(--cwp-font-display);
    font-size: var(--cwp-size-h2);
    font-weight: var(--cwp-weight-bold);
    color: var(--cwp-text);
    margin: 0;
}

.cwp-empty-state__message,
.cwp-no-results__message {
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body);
    color: var(--cwp-text-muted);
    max-width: 400px;
    margin: 0;
}


/* ==========================================================================
   7. TOAST NOTIFICATIONS
   Slide-in notification messages
   ========================================================================== */

.cwp-toast {
    position: fixed;
    bottom: var(--cwp-space-lg);
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    display: flex;
    align-items: center;
    gap: var(--cwp-space-sm);
    padding: var(--cwp-space-md) var(--cwp-space-lg);
    background: var(--cwp-text);
    color: #FFFFFF;
    border-radius: var(--cwp-radius-lg);
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body-sm);
    font-weight: var(--cwp-weight-medium);
    white-space: nowrap;
    box-shadow: var(--cwp-shadow-xl);
    z-index: var(--cwp-z-toast);
    opacity: 0;
    transition: transform var(--cwp-duration-normal) var(--cwp-ease-out),
                opacity var(--cwp-duration-normal) var(--cwp-ease-out);
    pointer-events: none;
}

.cwp-toast--visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.cwp-toast--success {
    background: var(--cwp-success);
}

.cwp-toast--error {
    background: var(--cwp-error);
}

.cwp-toast--warning {
    background: var(--cwp-warning);
    color: var(--cwp-text);
}

.cwp-toast__icon {
    flex-shrink: 0;
}

.cwp-toast__message {
    flex: 1;
}

.cwp-toast__dismiss {
    flex-shrink: 0;
    opacity: 0.7;
    cursor: pointer;
}

.cwp-toast__dismiss:hover {
    opacity: 1;
}


/* ==========================================================================
   8. MODAL / DIALOG
   Generic modal overlay, container, header, content, footer, close button
   ========================================================================== */

/* Backdrop */
.cwp-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cwp-overlay);
    z-index: var(--cwp-z-modal);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--cwp-duration-normal) var(--cwp-ease-default),
                visibility var(--cwp-duration-normal) var(--cwp-ease-default);
}

.cwp-modal--open {
    opacity: 1;
    visibility: visible;
}

/* Container */
.cwp-modal__container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    background: var(--cwp-surface);
    border-radius: var(--cwp-radius-xl);
    box-shadow: var(--cwp-shadow-xl);
    overflow: hidden;
    transform: translateY(16px) scale(0.98);
    transition: transform var(--cwp-duration-normal) var(--cwp-ease-out);
}

.cwp-modal--open .cwp-modal__container {
    transform: translateY(0) scale(1);
}

/* Header */
.cwp-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--cwp-border);
    flex-shrink: 0;
}

.cwp-modal__title {
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-h4);
    font-weight: var(--cwp-weight-semibold);
    color: var(--cwp-text);
    margin: 0;
}

/* Content */
.cwp-modal__content {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

/* Footer */
.cwp-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--cwp-border);
    flex-shrink: 0;
}

/* Full-width modal variant */
.cwp-modal__container--wide {
    max-width: 900px;
}

.cwp-modal__container--narrow {
    max-width: 420px;
}

/* Mobile full screen */
@media (max-width: 639px) {
    .cwp-modal__container {
        max-width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }
}


/* ==========================================================================
   9. LIGHTBOX
   Fullscreen image viewer overlay (structure, not buttons — those in reset.css)
   ========================================================================== */

/* LIGHTBOX styles moved to connect-public.css Section 12.
   Removed from frontend.css to avoid cascade conflicts.
   The lightbox uses x-teleport="body" and is styled directly
   in connect-public.css with hardcoded values + fallbacks. */


/* ==========================================================================
   10. SPINNER
   Loading indicator animation
   ========================================================================== */

.cwp-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--cwp-border);
    border-top-color: var(--cwp-primary);
    border-radius: var(--cwp-radius-full);
    animation: cwp-spin 0.7s linear infinite;
}

.cwp-spinner--sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.cwp-spinner--lg {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

.cwp-spinner--white {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #FFFFFF;
}

/* Centered spinner container */
.cwp-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cwp-space-3xl);
    width: 100%;
}


/* ==========================================================================
   11. SEARCH BAR LAYOUT
   Structural layout for the search bar (buttons handled in reset.css)
   ========================================================================== */

.cwp-search-bar {
    display: flex;
    align-items: center;
    max-width: var(--cwp-search-max-width);
    height: var(--cwp-search-height);
    background: var(--cwp-surface);
    border: var(--cwp-search-border-width) solid var(--cwp-border);
    border-radius: var(--cwp-search-border-radius);
    box-shadow: var(--cwp-search-shadow);
    margin: 0 auto 0 auto;
    overflow: visible;
    position: relative;
    transition: box-shadow var(--cwp-duration-normal) var(--cwp-ease-default);
}

.cwp-search-bar:focus-within {
    box-shadow: var(--cwp-search-shadow-focus);
    border-color: var(--cwp-border-hover);
}

/*
 * Shortcode wrapper override:
 * wrap_output() adds .cwp-root.cwp-search-bar around the template,
 * which also contains an inner .cwp-search-bar (the actual form).
 * Strip card-like visuals from the outer wrapper so only the inner
 * search bar shows the pill styling.
 */
.cwp-root.cwp-search-bar {
    display: block;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    max-width: none;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    transition: none;
}

.cwp-search-bar__field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--cwp-search-field-padding);
    gap: 2px;
    cursor: pointer;
    position: relative;
    flex: 1;
    min-width: 0;
    /* Dividers handled by ::before pseudo-elements in search.css */
    transition: background var(--cwp-duration-fast) var(--cwp-ease-default);
}

.cwp-search-bar__field:hover {
    background: var(--cwp-surface-alt);
}

.cwp-search-bar__field--active {
    background: var(--cwp-surface-alt);
}

.cwp-search-bar__label {
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-micro);
    font-weight: var(--cwp-weight-semibold);
    color: var(--cwp-text);
    text-transform: uppercase;
    letter-spacing: var(--cwp-letter-spacing-wide);
    line-height: 1;
}

.cwp-search-bar__value {
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body-sm);
    color: var(--cwp-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cwp-search-bar__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 280px;
    background: var(--cwp-surface);
    border: 1px solid var(--cwp-border);
    border-radius: var(--cwp-radius-lg);
    box-shadow: var(--cwp-shadow-lg);
    z-index: var(--cwp-z-dropdown);
    overflow: hidden;
}

.cwp-search-bar__dropdown--guests {
    right: 0;
    left: auto;
    min-width: 320px;
}

.cwp-search-bar__option-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cwp-search-bar__option-text strong {
    font-size: var(--cwp-size-body-sm);
    font-weight: var(--cwp-weight-medium);
    color: var(--cwp-text);
}

.cwp-search-bar__option-text span {
    font-size: var(--cwp-size-caption);
    color: var(--cwp-text-muted);
}

.cwp-search-bar__submit-text {
    display: inline;
}

@media (max-width: 767px) {
    .cwp-search-bar {
        flex-direction: column;
        height: auto;
        border-radius: var(--cwp-radius-xl);
    }

    .cwp-search-bar__field {
        width: 100%;
        border-bottom: 1px solid var(--cwp-border);
        padding: 12px var(--cwp-search-field-padding);
    }

    .cwp-search-bar__field:last-of-type {
        border-bottom: none;
    }

    .cwp-search-bar__submit-text {
        display: inline;
    }
}


/* ==========================================================================
   12. FILTER PILLS BAR
   Horizontal scroll container for filter pills
   ========================================================================== */

.cwp-filters {
    display: flex;
    align-items: center;
    gap: var(--cwp-space-sm);
    margin-bottom: var(--cwp-space-lg);
}

.cwp-filters__scroll {
    display: flex;
    align-items: center;
    gap: var(--cwp-space-sm);
    overflow-x: auto;
    flex: 1;
    min-width: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 2px 0;
}

.cwp-filters__scroll::-webkit-scrollbar {
    display: none;
}

.cwp-filters__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--cwp-badge-min-width);
    height: var(--cwp-badge-height);
    padding: var(--cwp-badge-padding);
    background: var(--cwp-primary);
    color: #FFFFFF;
    border-radius: var(--cwp-badge-border-radius);
    font-size: var(--cwp-badge-font-size);
    font-weight: var(--cwp-badge-weight);
    line-height: 1;
}


/* ==========================================================================
   13. DATE PICKER (Search Page)
   Calendar dropdown wrapper for search date picker
   ========================================================================== */

.cwp-date-picker {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    transform: none;
    background: var(--cwp-surface);
    border: 1px solid var(--cwp-border, #e0e0e0);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    z-index: var(--cwp-z-dropdown);
    padding: 16px 20px;
}


/* ==========================================================================
   14. BOOKING SIDEBAR LAYOUT
   Structural layout for booking widget (buttons handled in reset.css)
   ========================================================================== */

.cwp-booking {
    position: sticky;
    top: var(--cwp-booking-sticky-top);
    width: var(--cwp-booking-width);
    max-width: var(--cwp-booking-max-width);
    max-height: var(--cwp-booking-sticky-max-height);
    padding: var(--cwp-booking-padding);
    background: var(--cwp-surface);
    border: var(--cwp-booking-border-width) solid var(--cwp-booking-border-color);
    border-radius: var(--cwp-booking-border-radius);
    box-shadow: var(--cwp-booking-shadow);
    display: flex;
    flex-direction: column;
    gap: var(--cwp-booking-gap);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.cwp-booking__price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--cwp-space-sm);
}

.cwp-booking__rate {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.cwp-booking__amount {
    font-family: var(--cwp-font-display);
    font-size: var(--cwp-size-h2);
    font-weight: var(--cwp-weight-bold);
    color: var(--cwp-text);
}

.cwp-booking__period {
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body-sm);
    color: var(--cwp-text-muted);
}

.cwp-booking__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body-sm);
    color: var(--cwp-text);
}

.cwp-booking__reviews {
    color: var(--cwp-text-muted);
    text-decoration: underline;
}

.cwp-booking__inputs {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cwp-border);
    border-radius: var(--cwp-radius-lg);
    overflow: hidden;
}

.cwp-booking__dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.cwp-booking__field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--cwp-border);
    transition: background var(--cwp-duration-fast) var(--cwp-ease-default);
}

.cwp-booking__field:hover {
    background: var(--cwp-surface-alt);
}

.cwp-booking__field--active {
    background: var(--cwp-surface-alt);
}

.cwp-booking__field--checkin {
    border-right: 1px solid var(--cwp-border);
}

.cwp-booking__field--guests {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: none;
}

.cwp-booking__label {
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-micro);
    font-weight: var(--cwp-weight-semibold);
    color: var(--cwp-text);
    text-transform: uppercase;
    letter-spacing: var(--cwp-letter-spacing-wide);
    line-height: 1;
}

.cwp-booking__value {
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body-sm);
    color: var(--cwp-text-muted);
}

.cwp-booking__chevron {
    color: var(--cwp-text-secondary);
    flex-shrink: 0;
    transition: transform var(--cwp-duration-fast) var(--cwp-ease-default);
}

.cwp-booking__field--active .cwp-booking__chevron {
    transform: rotate(180deg);
}

.cwp-booking__calendar {
    overflow: hidden;
}

.cwp-booking__guest-picker {
    overflow: hidden;
}

/* Price Breakdown */
.cwp-booking__breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--cwp-space-sm);
}

.cwp-booking__line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body);
    color: var(--cwp-text-secondary);
}

.cwp-booking__line span:first-child {
    text-decoration: underline;
    cursor: help;
}

.cwp-booking__divider {
    border: none;
    border-top: 1px solid var(--cwp-border);
    margin: var(--cwp-space-sm) 0;
}

.cwp-booking__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body);
}

.cwp-booking__note {
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body-sm);
    color: var(--cwp-text-muted);
    text-align: center;
    margin: 0;
}

.cwp-booking__notice {
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body-sm);
    color: var(--cwp-text-muted);
    text-align: center;
    margin: 0;
    padding: var(--cwp-space-sm) 0 0 0;
}


/* ==========================================================================
   15. PROPERTY CARD LAYOUT
   Card structure and content layout (buttons handled in reset.css)
   ========================================================================== */

.cwp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: var(--cwp-card-width);
    max-width: var(--cwp-card-max-width);
    background: var(--cwp-surface);
    border: var(--cwp-card-border-width) solid var(--cwp-card-border-color);
    border-radius: var(--cwp-card-border-radius);
    box-shadow: var(--cwp-card-shadow);
    overflow: hidden;
    transition: var(--cwp-card-transition);
}

.cwp-card:hover {
    box-shadow: var(--cwp-card-shadow-hover);
    transform: translateY(-2px);
}

.cwp-card__image,
.cwp-card__image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: var(--cwp-card-image-aspect);
    overflow: hidden;
    background: var(--cwp-surface-alt);
}

.cwp-card__carousel {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Specificity bump: overrides .cwp-root img { height: auto } (0,1,1) */
.cwp-card .cwp-card__carousel-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cwp-card__carousel-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

.cwp-card__content,
.cwp-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--cwp-space-xs);
    padding: var(--cwp-card-padding);
}

.cwp-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cwp-space-sm);
}

.cwp-card__title {
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body);
    font-weight: var(--cwp-weight-semibold);
    color: var(--cwp-text);
    margin: 0;
    line-height: var(--cwp-line-height-tight);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cwp-card__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body-sm);
    font-weight: var(--cwp-weight-medium);
    color: var(--cwp-text);
    flex-shrink: 0;
}

.cwp-card__review-count {
    color: var(--cwp-text-muted);
    font-weight: var(--cwp-weight-regular);
}

.cwp-card__location {
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body-sm);
    color: var(--cwp-text-muted);
    margin: 0;
}

.cwp-card__specs {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--cwp-space-xs);
    flex-wrap: wrap;
    margin-top: 2px;
}

.cwp-card__spec,
.cwp-pill {
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body-sm);
    color: var(--cwp-text-secondary);
}

.cwp-card__spec + .cwp-card__spec::before,
.cwp-pill + .cwp-pill::before {
    content: "\00B7";
    margin-right: var(--cwp-space-xs);
}

.cwp-card__price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: auto;
    padding-top: var(--cwp-space-sm);
}

.cwp-card__price-amount {
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body);
    font-weight: var(--cwp-weight-semibold);
    color: var(--cwp-text);
}

.cwp-card__price-period,
.cwp-card__price-unit {
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body-sm);
    color: var(--cwp-text-muted);
}


/* ==========================================================================
   16. PROPERTY GRID
   CSS Grid layout for property cards in search results
   ========================================================================== */

.cwp-property-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--cwp-space-lg);
}

@media (max-width: 639px) {
    .cwp-property-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   17. SPLIT VIEW LAYOUT
   Search page split view: results grid + sticky map
   ========================================================================== */

.cwp-split-view {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 0;
    min-height: 600px;
}

.cwp-split-view__results {
    padding-right: var(--cwp-space-lg);
    overflow-y: auto;
}

.cwp-split-view__map {
    position: sticky;
    top: 0;
    height: 100vh;
    border-left: 1px solid var(--cwp-border);
}

@media (max-width: 1023px) {
    .cwp-split-view {
        grid-template-columns: 1fr;
    }

    .cwp-split-view__results {
        padding-right: 0;
    }

    .cwp-split-view__map {
        display: none;
        position: fixed;
        inset: 0;
        z-index: var(--cwp-z-overlay);
        border-left: none;
    }

    .cwp-split-view__map--mobile-visible {
        display: block;
    }
}


/* ==========================================================================
   18. RESULTS HEADER
   Header bar above search results grid
   ========================================================================== */

.cwp-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cwp-space-md);
    margin-bottom: var(--cwp-space-lg);
    flex-wrap: wrap;
}

.cwp-results-header__info {
    flex: 1;
    min-width: 0;
}

.cwp-results-header__title {
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body);
    font-weight: var(--cwp-weight-regular);
    color: var(--cwp-text-secondary);
    margin: 0;
    line-height: var(--cwp-line-height-normal);
}

.cwp-results-header__title strong {
    font-weight: var(--cwp-weight-semibold);
    color: var(--cwp-text);
}

.cwp-results-header__actions {
    display: flex;
    align-items: center;
    gap: var(--cwp-space-sm);
    flex-shrink: 0;
}


/* ==========================================================================
   19. GALLERY GRID
   Bento-style gallery layout on single property page
   ========================================================================== */

.cwp-gallery {
    position: relative;
    margin-bottom: var(--cwp-space-xl);
}

.cwp-gallery__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cwp-gallery-gap);
    border-radius: var(--cwp-gallery-border-radius);
    overflow: hidden;
    position: relative;
}

.cwp-gallery__cell,
.cwp-gallery__item {
    border-radius: var(--cwp-gallery-border-radius);
    overflow: hidden;
}

.cwp-gallery__main {
    grid-row: 1;
    grid-column: 1;
    aspect-ratio: var(--cwp-gallery-hero-aspect);
    cursor: pointer;
    overflow: hidden;
}

.cwp-gallery__secondary {
    grid-row: 1;
    grid-column: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--cwp-gallery-gap);
}

.cwp-gallery__item {
    cursor: pointer;
    overflow: hidden;
}

.cwp-gallery__item--placeholder {
    background: var(--cwp-surface-alt);
    cursor: default;
}

.cwp-gallery__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--cwp-duration-normal) var(--cwp-ease-default);
}

.cwp-gallery__main:hover .cwp-gallery__image,
.cwp-gallery__item:hover .cwp-gallery__image {
    transform: scale(1.03);
}

@media (max-width: 639px) {
    .cwp-gallery__grid {
        grid-template-columns: 1fr;
    }

    .cwp-gallery__secondary {
        grid-column: 1;
        grid-row: 2;
    }

    .cwp-gallery__main {
        aspect-ratio: var(--cwp-gallery-image-aspect);
    }
}


/* ==========================================================================
   20. SINGLE PROPERTY PAGE LAYOUT
   Two-column layout: content + sticky booking sidebar
   ========================================================================== */

.cwp-property-page {
    max-width: var(--cwp-container-xl);
    margin: 0 auto;
    padding: var(--cwp-space-lg);
}

.cwp-property-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--cwp-space-lg);
}

.cwp-property-nav__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body-sm);
    color: var(--cwp-text);
    text-decoration: none;
}

.cwp-property-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--cwp-space-sm);
}

.cwp-property-layout {
    display: grid;
    grid-template-columns: 1fr var(--cwp-booking-width);
    gap: clamp(24px, 4vw + 12px, 80px);
    align-items: flex-start;
}

.cwp-property-content {
    min-width: 0;
}

.cwp-property-sidebar {
    position: relative;
}

@media (max-width: 1279px) {
    .cwp-property-page {
        max-width: 100%;
    }
}

@media (max-width: 1023px) {
    .cwp-property-layout {
        grid-template-columns: 1fr;
        gap: var(--cwp-space-xl);
    }
}

/* Property Header */
.cwp-property-header {
    margin-bottom: 0;
}

.cwp-property-header__title {
    font-family: var(--cwp-font-display);
    font-size: var(--cwp-size-h1);
    font-weight: var(--cwp-weight-bold);
    color: var(--cwp-text);
    margin: 0 0 var(--cwp-space-sm) 0;
    line-height: var(--cwp-line-height-tight);
    letter-spacing: var(--cwp-letter-spacing-tight);
}

.cwp-property-header__meta {
    display: flex;
    align-items: center;
    gap: var(--cwp-space-md);
    flex-wrap: wrap;
    margin-bottom: var(--cwp-space-md);
}

.cwp-property-header__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body-sm);
    font-weight: var(--cwp-weight-medium);
    color: var(--cwp-text);
}

.cwp-property-header__reviews {
    color: var(--cwp-text-muted);
    text-decoration: underline;
}

.cwp-property-header__location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body-sm);
    color: var(--cwp-text-secondary);
}

.cwp-property-header__specs {
    display: flex;
    align-items: center;
    gap: var(--cwp-space-sm);
    flex-wrap: wrap;
}

.cwp-property-header__spec {
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body);
    color: var(--cwp-text-secondary);
}

.cwp-property-header__spec + .cwp-property-header__spec::before {
    content: "\00B7";
    margin-right: var(--cwp-space-sm);
}


/* ==========================================================================
   21. PROPERTY DESCRIPTION
   ========================================================================== */

.cwp-property-description {
    margin-bottom: 0;
}

.cwp-property-description__text {
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body);
    line-height: var(--cwp-line-height-relaxed);
    color: var(--cwp-text-secondary);
    max-height: 200px;
    overflow: hidden;
    position: relative;
}

.cwp-property-description__text--expanded {
    max-height: none;
}

.cwp-property-description__text:not(.cwp-property-description__text--expanded)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(transparent, var(--cwp-surface));
    pointer-events: none;
}


/* ==========================================================================
   22. CALENDAR (Availability View)
   Two-month grid calendar for property page
   ========================================================================== */

.cwp-property-calendar {
    margin-bottom: 0;
}

.cwp-calendar-legend {
    display: flex;
    align-items: center;
    gap: var(--cwp-space-lg);
    margin-top: var(--cwp-space-md);
}

.cwp-calendar-legend__item {
    display: flex;
    align-items: center;
    gap: var(--cwp-space-sm);
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body-sm);
    color: var(--cwp-text-secondary);
}

.cwp-calendar-legend__indicator {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: var(--cwp-radius-sm);
}

.cwp-calendar-legend__indicator--available {
    background: var(--cwp-calendar-available-bg);
    border: 1px solid var(--cwp-border);
}

.cwp-calendar-legend__indicator--booked {
    background: var(--cwp-calendar-booked-bg);
}

.cwp-calendar-legend__indicator--blocked {
    background: var(--cwp-text-muted);
    opacity: 0.4;
}


/* ==========================================================================
   23. SIMILAR PROPERTIES CAROUSEL
   Horizontal scrolling carousel for related properties
   ========================================================================== */

.cwp-similar-properties {
    margin-top: var(--cwp-space-2xl);
    padding-top: var(--cwp-space-xl);
    border-top: 1px solid var(--cwp-border);
}

.cwp-property-carousel {
    position: relative;
    margin-top: var(--cwp-space-lg);
}

.cwp-carousel-track {
    display: flex;
    gap: var(--cwp-space-md);
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: var(--cwp-space-xs) 0;
}

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

.cwp-carousel-track > .cwp-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
    max-width: 300px;
}


/* ==========================================================================
   24. PROPERTY FOOTER
   Report listing section at bottom of single property
   ========================================================================== */

.cwp-property-footer {
    display: flex;
    justify-content: center;
    padding: var(--cwp-space-xl) 0;
    margin-top: var(--cwp-space-xl);
}


/* ==========================================================================
   24.5. FORM INPUT COMPONENTS
   Styled form elements for plugin forms
   ========================================================================== */

/* Shared input base */
.cwp-root input[type="text"],
.cwp-root input[type="email"],
.cwp-root input[type="tel"],
.cwp-root input[type="number"],
.cwp-root input[type="url"],
.cwp-root input[type="search"],
.cwp-root input[type="date"],
.cwp-root textarea,
.cwp-root select {
    display: block;
    width: 100%;
    padding: var(--cwp-space-sm, 8px) var(--cwp-space-md, 16px);
    font-family: var(--cwp-font-body, sans-serif);
    font-size: var(--cwp-size-body, 15px);
    line-height: var(--cwp-line-height-normal, 1.5);
    color: var(--cwp-text, #1A2B3C);
    background: var(--cwp-surface, #FFFFFF);
    border: 1px solid var(--cwp-border, #D4E0E8);
    border-radius: var(--cwp-radius-md, 8px);
    outline: none;
    transition: border-color var(--cwp-duration-fast, 150ms) var(--cwp-ease-default),
                box-shadow var(--cwp-duration-fast, 150ms) var(--cwp-ease-default);
    -webkit-appearance: none;
    appearance: none;
}

.cwp-root input[type="text"]:focus,
.cwp-root input[type="email"]:focus,
.cwp-root input[type="tel"]:focus,
.cwp-root input[type="number"]:focus,
.cwp-root input[type="url"]:focus,
.cwp-root input[type="search"]:focus,
.cwp-root input[type="date"]:focus,
.cwp-root textarea:focus,
.cwp-root select:focus {
    border-color: var(--cwp-primary, #1B6B93);
    box-shadow: 0 0 0 3px rgba(var(--cwp-primary-rgb, 27, 107, 147), 0.15);
}

.cwp-root input::placeholder,
.cwp-root textarea::placeholder {
    color: var(--cwp-text-muted, #8899A6);
    opacity: 1;
}

/* Textarea */
.cwp-root textarea {
    min-height: 120px;
    resize: vertical;
}

/* Select */
.cwp-root select {
    padding-right: var(--cwp-space-xl, 32px);
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%234A6274' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--cwp-space-sm, 8px) center;
    background-size: 12px;
    cursor: pointer;
}

/* Checkbox & Radio */
.cwp-root input[type="checkbox"],
.cwp-root input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--cwp-primary, #1B6B93);
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.cwp-root input[type="radio"] {
    border-radius: 50%;
}

/* Form Group */
.cwp-form-group {
    margin-bottom: var(--cwp-space-md, 16px);
}

.cwp-form-group:last-child {
    margin-bottom: 0;
}

.cwp-form-label {
    display: block;
    margin-bottom: var(--cwp-space-xs, 4px);
    font-family: var(--cwp-font-body, sans-serif);
    font-size: var(--cwp-size-body-sm, 13px);
    font-weight: var(--cwp-weight-semibold, 600);
    color: var(--cwp-text, #1A2B3C);
}

.cwp-form-help {
    display: block;
    margin-top: var(--cwp-space-xs, 4px);
    font-size: var(--cwp-size-caption, 12px);
    color: var(--cwp-text-muted, #8899A6);
}

/* Inline Checkbox/Radio Group */
.cwp-checkbox-group,
.cwp-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--cwp-space-sm, 8px);
}

.cwp-checkbox-group label,
.cwp-radio-group label {
    display: flex;
    align-items: center;
    gap: var(--cwp-space-sm, 8px);
    font-size: var(--cwp-size-body, 15px);
    color: var(--cwp-text, #1A2B3C);
    cursor: pointer;
}

/* Disabled state */
.cwp-root input:disabled,
.cwp-root textarea:disabled,
.cwp-root select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--cwp-surface-alt, #F0F7FA);
}

/* Error state */
.cwp-root input.cwp-input--error,
.cwp-root textarea.cwp-input--error,
.cwp-root select.cwp-input--error {
    border-color: var(--cwp-error, #DC3545);
}

.cwp-root input.cwp-input--error:focus,
.cwp-root textarea.cwp-input--error:focus,
.cwp-root select.cwp-input--error:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

.cwp-form-error {
    display: block;
    margin-top: var(--cwp-space-xs, 4px);
    font-size: var(--cwp-size-caption, 12px);
    color: var(--cwp-error, #DC3545);
}


/* ==========================================================================
   25. SKELETON / SHIMMER LOADING
   Placeholder loading states
   ========================================================================== */

.cwp-skeleton {
    background: linear-gradient(90deg,
        var(--cwp-skeleton-base, #e8ecef) 25%,
        var(--cwp-skeleton-highlight, #d5dbe0) 50%,
        var(--cwp-skeleton-base, #e8ecef) 75%
    );
    background-size: 200% 100%;
    animation: cwp-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--cwp-radius-md);
}

.cwp-skeleton--text {
    height: 14px;
    width: 100%;
    margin-bottom: var(--cwp-space-sm);
}

.cwp-skeleton--text:last-child {
    width: 60%;
}

.cwp-skeleton--title {
    height: 20px;
    width: 70%;
    margin-bottom: var(--cwp-space-md);
}

.cwp-skeleton--image {
    width: 100%;
    aspect-ratio: var(--cwp-card-image-aspect);
}

.cwp-skeleton--avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--cwp-radius-full);
}

.cwp-skeleton--button {
    height: 48px;
    width: 120px;
    border-radius: var(--cwp-radius-lg);
}


/* ==========================================================================
   26. ANIMATION KEYFRAMES
   ========================================================================== */

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

/* ==========================================================================
   27. LAZY SECTION LOADING
   Progressive section loader states (IntersectionObserver)
   ========================================================================== */

.cwp-lazy-section {
    min-height: 120px;
    opacity: 1;
    transition: opacity 300ms ease;
}

.cwp-lazy-section--loaded {
    animation: cwp-fadeIn 300ms ease forwards;
}

.cwp-lazy-section__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--cwp-space-md, 16px);
    padding: var(--cwp-space-xl, 32px) var(--cwp-space-md, 16px);
    text-align: center;
}

.cwp-lazy-section__error p {
    color: var(--cwp-text-secondary, #64748b);
    font-size: var(--cwp-size-body, 15px);
    margin: 0;
}

.cwp-lazy-section__retry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border: 1px solid var(--cwp-border, #e2e8f0);
    border-radius: var(--cwp-radius-md, 8px);
    background: var(--cwp-surface, #ffffff);
    color: var(--cwp-text, #1e293b);
    font-size: var(--cwp-size-sm, 14px);
    font-family: var(--cwp-font-body, sans-serif);
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
}

.cwp-lazy-section__retry:hover {
    background: var(--cwp-surface-alt, #f8fafc);
    border-color: var(--cwp-border-dark, #cbd5e1);
}

/* Skeleton layout helpers for lazy sections */
.cwp-skeleton-amenities__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--cwp-space-sm, 8px);
}

.cwp-skeleton-amenities__item {
    display: flex;
    align-items: center;
    gap: var(--cwp-space-sm, 8px);
    padding: var(--cwp-space-xs, 4px) 0;
}

.cwp-skeleton-calendar__months {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cwp-space-lg, 24px);
}

.cwp-skeleton-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.cwp-skeleton-calendar__day {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--cwp-radius-sm, 4px);
}

.cwp-skeleton-location__map {
    width: 100%;
    height: 400px;
    border-radius: var(--cwp-radius-lg, 12px);
    margin-bottom: var(--cwp-space-md, 16px);
}

.cwp-skeleton-reviews__header {
    display: flex;
    align-items: center;
    gap: var(--cwp-space-sm, 8px);
    margin-bottom: var(--cwp-space-lg, 24px);
}

.cwp-skeleton-reviews__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--cwp-space-md, 16px);
}

.cwp-skeleton-reviews__card {
    padding: var(--cwp-space-md, 16px);
}

.cwp-skeleton-reviews__card-header {
    display: flex;
    align-items: center;
    gap: var(--cwp-space-sm, 8px);
    margin-bottom: var(--cwp-space-sm, 8px);
}

.cwp-skeleton-host {
    display: flex;
    flex-direction: column;
    gap: var(--cwp-space-md, 16px);
}

.cwp-skeleton-host__header {
    display: flex;
    align-items: center;
    gap: var(--cwp-space-md, 16px);
}

.cwp-skeleton-host__stats {
    display: flex;
    gap: var(--cwp-space-lg, 24px);
}

.cwp-skeleton-similar__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--cwp-space-md, 16px);
}

.cwp-skeleton-similar__card {
    border-radius: var(--cwp-radius-lg, 12px);
    overflow: hidden;
    border: 1px solid var(--cwp-border, #e2e8f0);
}

@media (max-width: 768px) {
    .cwp-skeleton-amenities__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cwp-skeleton-calendar__months {
        grid-template-columns: 1fr;
    }

    .cwp-skeleton-reviews__grid {
        grid-template-columns: 1fr;
    }

    .cwp-skeleton-similar__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@keyframes cwp-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cwp-fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

@keyframes cwp-slideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cwp-scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Utility animation classes */
.cwp-animate-fadeInUp {
    animation: cwp-fadeInUp var(--cwp-duration-normal) var(--cwp-ease-out) forwards;
    opacity: 0;
}

.cwp-animate-fadeIn {
    animation: cwp-fadeIn var(--cwp-duration-normal) var(--cwp-ease-default) forwards;
    opacity: 0;
}

.cwp-animate-scaleIn {
    animation: cwp-scaleIn var(--cwp-duration-normal) var(--cwp-ease-out) forwards;
    opacity: 0;
}


/* ==========================================================================
   27. REDUCED MOTION
   Disable animations for users who prefer reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .cwp-root *,
    .cwp-root *::before,
    .cwp-root *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ==========================================================================
   28. CUSTOM SCROLLBARS
   Styled scrollbars for scroll containers inside .cwp-root
   ========================================================================== */

/* Webkit (Chrome, Safari, Edge) */
.cwp-root ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.cwp-root ::-webkit-scrollbar-track {
    background: transparent;
}

.cwp-root ::-webkit-scrollbar-thumb {
    background: var(--cwp-scrollbar);
    border-radius: var(--cwp-radius-full);
    opacity: 0.5;
}

.cwp-root ::-webkit-scrollbar-thumb:hover {
    opacity: 0.8;
}

/* Firefox */
.cwp-root * {
    scrollbar-width: thin;
    scrollbar-color: var(--cwp-scrollbar) transparent;
}


/* ==========================================================================
   29. IMAGE UTILITIES
   Common image presentation styles
   ========================================================================== */

.cwp-root img {
    max-width: 100%;
    height: auto;
    display: block;
}

.cwp-root svg {
    flex-shrink: 0;
}


/* ==========================================================================
   30. TOOLTIP
   Lightweight tooltip component
   ========================================================================== */

.cwp-tooltip {
    position: absolute;
    max-width: var(--cwp-tooltip-max-width);
    padding: var(--cwp-tooltip-padding);
    background: var(--cwp-tooltip-bg);
    color: var(--cwp-tooltip-text);
    border-radius: var(--cwp-tooltip-border-radius);
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-tooltip-font-size);
    line-height: var(--cwp-tooltip-line-height);
    box-shadow: var(--cwp-tooltip-shadow);
    z-index: var(--cwp-tooltip-z);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--cwp-tooltip-duration) var(--cwp-ease-default);
    white-space: normal;
}

.cwp-tooltip--visible {
    opacity: 1;
}

.cwp-tooltip::after {
    content: "";
    position: absolute;
    border: var(--cwp-tooltip-arrow-size) solid transparent;
}

.cwp-tooltip--top::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--cwp-tooltip-bg);
}

.cwp-tooltip--bottom::after {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--cwp-tooltip-bg);
}

/* ==========================================================================
   31. RESPONSIVE — Tablet Landscape (≤1024px)
   ========================================================================== */

@media (max-width: 1024px) {
    /* Container: reduce padding on tablet */
    .cwp-container {
        padding-left: var(--cwp-space-md, 16px);
        padding-right: var(--cwp-space-md, 16px);
    }

    /* Booking sidebar: un-sticky on tablet (content first) */
    .cwp-booking {
        position: static;
        width: 100%;
        max-width: 600px;
        max-height: none;
    }

    /* Property layout: clamp() handles gap automatically, but enforce ceiling */
    .cwp-property-layout {
        gap: clamp(20px, 3vw + 8px, 48px);
    }

    /* Skeleton similar: 3-col on tablet */
    .cwp-skeleton-similar__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   32. RESPONSIVE — Tablet Portrait (≤768px)
   ========================================================================== */

@media (max-width: 768px) {
    /* Property header title: scale down */
    .cwp-property-header__title {
        font-size: var(--cwp-size-h2, 24px);
    }

    /* Booking dates: keep 2-col but tighter field padding */
    .cwp-booking__field {
        padding: 10px 12px;
    }

    /* Guest picker controls: tighter gap */
    .cwp-guest-picker__controls {
        gap: var(--cwp-space-sm, 8px);
    }

    /* Toast: full-width centered on tablet */
    .cwp-toast {
        left: var(--cwp-space-md, 16px);
        right: var(--cwp-space-md, 16px);
        transform: translateY(100%);
        white-space: normal;
        text-align: center;
    }

    .cwp-toast--visible {
        transform: translateY(0);
    }

    /* Skeleton similar: 2-col */
    .cwp-skeleton-similar__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   33. RESPONSIVE — Mobile (≤640px)
   ========================================================================== */

@media (max-width: 640px) {
    /* Container: compact mobile padding */
    .cwp-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Booking dates: stack vertically on mobile */
    .cwp-booking__dates {
        grid-template-columns: 1fr;
    }

    .cwp-booking__field--checkin {
        border-right: none;
        border-bottom: 1px solid var(--cwp-border);
    }

    /* Guest picker count: larger for touch */
    .cwp-guest-picker__count {
        min-width: 36px;
        font-size: 16px;
    }

    /* Property layout: compact gap on mobile */
    .cwp-property-layout {
        gap: 20px;
    }

    /* Toast: safe-area on notched phones */
    .cwp-toast {
        bottom: max(var(--cwp-space-md, 16px), calc(env(safe-area-inset-bottom) + 8px));
        left: 12px;
        right: 12px;
        font-size: 13px;
        padding: 10px 16px;
    }

    /* Modal: full-screen bottom sheet on mobile */
    .cwp-modal__content {
        width: 100%;
        max-width: 100%;
        max-height: 90vh;
        border-radius: var(--cwp-radius-lg, 12px) var(--cwp-radius-lg, 12px) 0 0;
        align-self: flex-end;
    }

    .cwp-modal__header {
        padding: var(--cwp-space-md, 16px);
    }

    .cwp-modal__body {
        padding: var(--cwp-space-md, 16px);
    }

    /* Lightbox: larger nav buttons on mobile */
    .cwp-lightbox__nav {
        width: 44px;
        height: 44px;
    }

    /* Skeleton similar: 1-col */
    .cwp-skeleton-similar__grid {
        grid-template-columns: 1fr;
    }

    /* Property header: stack meta */
    .cwp-property-header__meta {
        flex-direction: column;
        gap: var(--cwp-space-xs, 4px);
    }
}

/* ==========================================================================
   34. RESPONSIVE — Small Mobile (≤480px)
   ========================================================================== */

@media (max-width: 480px) {
    /* Container: minimum padding */
    .cwp-container {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Property header title: compact */
    .cwp-property-header__title {
        font-size: var(--cwp-size-h3, 20px);
    }

    /* Booking: compact */
    .cwp-booking {
        padding: var(--cwp-space-md, 16px);
        gap: var(--cwp-space-sm, 8px);
    }

    .cwp-booking__amount {
        font-size: var(--cwp-size-h3, 20px);
    }

    /* Modal: full-screen on small phones */
    .cwp-modal__content {
        max-height: 100vh;
        border-radius: 0;
        height: 100%;
    }

    /* Toast: compact */
    .cwp-toast {
        left: 8px;
        right: 8px;
        padding: 8px 12px;
        font-size: 12px;
        border-radius: var(--cwp-radius-md, 8px);
    }
}

/* ==========================================================================
   35. RESPONSIVE — Wide Screen (≥1536px)
   ========================================================================== */

@media (min-width: 1536px) {
    /* Container: wider but capped for readability */
    .cwp-container {
        max-width: 1536px;
    }

    /* Property layout: generous gap on wide screens */
    .cwp-property-layout {
        gap: clamp(48px, 5vw, 96px);
    }

    /* Property header: larger */
    .cwp-property-header__title {
        font-size: var(--cwp-size-hero, 36px);
    }

    /* Booking: wider */
    .cwp-booking {
        width: 420px;
        max-width: 420px;
    }
}

@media (min-width: 1920px) {
    /* Ultra-wide cap */
    .cwp-container {
        max-width: 1600px;
    }
}