/**
 * CW Portal — Frontend Styles
 * Extracted from prototype HTML files.
 *
 * @package TheHouseKee\CWPortal
 */

/* ============ CSS VARIABLES ============ */
:root {
    --cw-navy: #0B1D3A;
    --cw-navy-light: #132d54;
    --cw-navy-dark: #071428;
    --cw-gold: #C9A96E;
    --cw-gold-light: #E8D5B0;
    --cw-gold-hover: #b8963d;
    --cw-cream: #FAF7F2;
    --cw-white: #FFFFFF;
    --cw-gray-50: #F9FAFB;
    --cw-gray-100: #F3F4F6;
    --cw-gray-200: #E5E7EB;
    --cw-gray-300: #D1D5DB;
    --cw-gray-400: #9CA3AF;
    --cw-gray-500: #6B7280;
    --cw-gray-600: #4B5563;
    --cw-gray-700: #374151;
    --cw-gray-800: #1F2937;
    --cw-green: #059669;
    --cw-green-light: #D1FAE5;
    --cw-red: #DC2626;
    --cw-red-light: #FEE2E2;
    --cw-blue: #2563EB;
    --cw-blue-light: #DBEAFE;
    --cw-orange: #D97706;
    --cw-orange-light: #FEF3C7;
    --cw-purple: #7C3AED;
    --cw-purple-light: #EDE9FE;
    --cw-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --cw-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --cw-shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
    --cw-shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
    --cw-shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);
    --cw-radius: 8px;
    --cw-radius-lg: 12px;
    --cw-radius-xl: 16px;
}

/* ============ BASE / RESET (scoped) ============ */
.cw-hero, .cw-stats-section, .cw-featured-section, .cw-properties-section,
.cw-why-section, .cw-inquiry-section, .cw-cta-section, .cw-single-property,
.cw-confirmation-page, .cw-pay-balance-page {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--cw-gray-800);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Override Astra theme forced underline on links inside CW sections. */
.cw-hero a, .cw-stats-section a, .cw-featured-section a, .cw-properties-section a,
.cw-why-section a, .cw-inquiry-section a, .cw-cta-section a, .cw-single-property a,
.cw-confirmation-page a, .cw-pay-balance-page a {
    text-decoration: none !important;
}

.cw-hero h1, .cw-hero h2, .cw-hero h3, .cw-hero h4, .cw-hero h5,
.cw-section-title, .cw-confirm-card h3, .cw-confirm-card h4,
.cw-form-card h3, .cw-order-card h3, .cw-booking-widget h3,
.cw-single-property h1, .cw-single-property h2, .cw-single-property h3,
.cw-confirmation-page h1, .cw-pay-balance-page h3 {
    font-family: 'Playfair Display', Georgia, serif;
    line-height: 1.2;
}

.cw-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    width: 100%;
}

/* ============ BUTTONS ============ */
.cw-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--cw-radius);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    font-family: 'Inter', sans-serif;
    line-height: 1;
    justify-content: center;
}

.cw-btn-primary {
    background: var(--cw-gold);
    color: var(--cw-navy);
}
.cw-btn-primary:hover {
    background: var(--cw-gold-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(201, 169, 110, 0.3);
    color: var(--cw-navy);
    text-decoration: none;
}

.cw-btn-navy {
    background: var(--cw-navy);
    color: var(--cw-white);
}
.cw-btn-navy:hover {
    background: var(--cw-navy-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(11, 29, 58, 0.3);
    color: var(--cw-white);
    text-decoration: none;
}

.cw-btn-outline {
    background: transparent;
    color: var(--cw-white);
    border: 2px solid rgba(255,255,255,0.3);
}
.cw-btn-outline:hover {
    border-color: var(--cw-white);
    background: rgba(255,255,255,0.05);
    color: var(--cw-white);
    text-decoration: none;
}

.cw-btn-gold-outline {
    background: transparent;
    color: var(--cw-gold);
    border: 1.5px solid var(--cw-gold);
}
.cw-btn-gold-outline:hover {
    background: var(--cw-gold);
    color: var(--cw-navy);
    text-decoration: none;
}

.cw-btn-sm {
    padding: 10px 20px;
    font-size: 13px;
}

.cw-btn-full {
    width: 100%;
    justify-content: center;
}

.cw-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ============ HERO ============ */
.cw-hero {
    background: linear-gradient(135deg, var(--cw-navy) 0%, var(--cw-navy-light) 50%, var(--cw-navy) 100%);
    padding: 80px 24px 90px;
    position: relative;
    overflow: hidden;
}

.cw-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 1;
}

.cw-hero::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(to top, var(--cw-cream), transparent);
}

.cw-hero-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.cw-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(201, 169, 110, 0.15);
    border: 1px solid rgba(201, 169, 110, 0.3);
    color: var(--cw-gold);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 28px;
}

.cw-hero h1 {
    color: var(--cw-white);
    font-size: 52px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.15;
}

.cw-hero h1 span { color: var(--cw-gold); }

.cw-hero-subtitle {
    color: rgba(255,255,255,0.7);
    font-size: 19px;
    max-width: 620px;
    margin: 0 auto 32px;
    line-height: 1.6;
    font-weight: 300;
}

.cw-hero-dates {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
    padding: 16px 32px;
    border-radius: 12px;
    margin-bottom: 28px;
    color: var(--cw-white);
}

.cw-date-icon { font-size: 18px; color: var(--cw-gold); }

.cw-date-text { font-size: 17px; }
.cw-date-text strong { font-weight: 700; }

/* Year Pills */
.cw-year-pills {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 36px;
}

.cw-year-pill {
    padding: 10px 22px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
    font-family: 'Inter', sans-serif;
}

.cw-year-pill.active {
    background: var(--cw-gold);
    color: var(--cw-navy);
}

.cw-year-pill:not(.active) {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    border-color: rgba(255,255,255,0.15);
}

.cw-year-pill:not(.active):hover {
    border-color: var(--cw-gold);
    color: var(--cw-gold);
}

.cw-hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============ STATS ============ */
.cw-stats-section {
    padding: 0;
    margin-top: -40px;
    position: relative;
    z-index: 2;
}

.cw-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.cw-stat-card {
    background: var(--cw-white);
    border-radius: var(--cw-radius-lg);
    padding: 28px 24px;
    text-align: center;
    box-shadow: var(--cw-shadow-lg);
    border: 1px solid rgba(0,0,0,0.04);
}

.cw-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(201, 169, 110, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--cw-gold);
    margin: 0 auto 12px;
}

.cw-stat-value {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--cw-navy);
    margin-bottom: 4px;
}

.cw-stat-label {
    font-size: 13px;
    color: var(--cw-gray-500);
    font-weight: 500;
}

/* ============ SECTIONS ============ */
.cw-featured-section,
.cw-properties-section,
.cw-inquiry-section {
    padding: 80px 0;
}

.cw-section-header {
    text-align: center;
    margin-bottom: 48px;
}

.cw-section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cw-gold);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.cw-section-title {
    font-size: 36px;
    color: var(--cw-navy);
    margin-bottom: 12px;
}

.cw-section-subtitle {
    color: var(--cw-gray-500);
    font-size: 17px;
    max-width: 560px;
    margin: 0 auto;
}

/* ============ FEATURED PROPERTY ============ */
.cw-featured-card {
    background: var(--cw-white);
    border-radius: var(--cw-radius-xl);
    overflow: hidden;
    box-shadow: var(--cw-shadow-xl);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    border: 1px solid rgba(0,0,0,0.04);
}

.cw-featured-image {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    background: var(--cw-gray-100);
}

.cw-featured-image img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: top;
}

.cw-featured-content {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cw-featured-specs {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.cw-featured-spec {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--cw-gray-50);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--cw-gray-700);
}

.cw-featured-spec i { color: var(--cw-gold); }

.cw-featured-desc {
    color: var(--cw-gray-600);
    margin-bottom: 20px;
    font-size: 15px;
}

.cw-featured-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.cw-amenity-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(201, 169, 110, 0.08);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--cw-navy);
}

.cw-amenity-tag i { color: var(--cw-gold); font-size: 11px; }

/* ============ FEATURED CAROUSEL ============ */
.cw-featured-carousel-wrapper {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    gap: 16px;
    align-items: center;
}

/* Single property — no arrows, clip spans full width. */
.cw-featured-track-clip:only-child {
    grid-column: 1 / -1;
}

.cw-featured-track-clip {
    overflow: hidden;
    border-radius: var(--cw-radius-xl);
    min-width: 0;
}

.cw-featured-track {
    display: flex;
    transition: transform 0.5s ease;
    will-change: transform;
}

.cw-featured-slide {
    flex: 0 0 100%;
    min-width: 0;
}

.cw-featured-slide .cw-featured-card {
    height: 420px;
    box-shadow: 0 0 12px rgba(0,0,0,0.08);
}

.cw-featured-slide .cw-featured-image {
    min-height: 360px;
    height: 100%;
}

.cw-carousel-arrow {
    width: 48px;
    height: 48px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid var(--cw-gold);
    background: rgba(255, 255, 255, 0.95);
    color: var(--cw-gold);
    font-size: 18px;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    box-shadow: var(--cw-shadow);
    justify-self: center;
}

.cw-carousel-arrow:hover {
    background: var(--cw-gold);
    color: var(--cw-white);
    box-shadow: var(--cw-shadow-lg);
}

@media (max-width: 1024px) {
    .cw-featured-carousel-wrapper {
        display: block;
        position: relative;
    }
    .cw-carousel-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        width: 40px;
        height: 40px;
        font-size: 15px;
    }
    .cw-carousel-prev { left: 8px; }
    .cw-carousel-next { right: 8px; }
    .cw-featured-slide .cw-featured-card {
        height: auto;
    }
    .cw-featured-slide .cw-featured-image {
        min-height: 300px;
        height: 100%;
    }
}

@media (max-width: 768px) {
    .cw-carousel-arrow {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

/* ============ FILTERS ============ */
.cw-filter-bar {
    background: var(--cw-white);
    border-radius: var(--cw-radius-lg);
    padding: 20px 24px;
    margin-bottom: 32px;
    box-shadow: var(--cw-shadow);
    border: 1px solid rgba(0,0,0,0.04);
}

.cw-filter-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cw-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cw-filter-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--cw-gray-600);
    white-space: nowrap;
}

.cw-filter-select {
    min-height: 48px;
    padding: 8px 32px 8px 14px;
    border: 1.5px solid var(--cw-gray-200);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--cw-gray-700);
    background: var(--cw-white);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 0.2s;
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
}

.cw-filter-select:focus {
    outline: none;
    border-color: var(--cw-gold);
}

.cw-filter-pills {
    display: flex;
    gap: 6px;
}

.cw-filter-pill {
    padding: 7px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: 1.5px solid var(--cw-gray-200);
    background: var(--cw-white);
    color: var(--cw-gray-600);
    font-family: 'Inter', sans-serif;
}

.cw-filter-pill.active {
    background: var(--cw-navy);
    color: var(--cw-white);
    border-color: var(--cw-navy);
}

.cw-filter-pill:hover:not(.active) {
    border-color: var(--cw-navy);
    color: var(--cw-navy);
}

.cw-results-count {
    margin-left: auto;
    font-size: 13px;
    color: var(--cw-gray-500);
}

/* ============ PROPERTY GRID ============ */
.cw-property-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.cw-property-card {
    background: var(--cw-white);
    border-radius: var(--cw-radius-lg);
    overflow: hidden;
    box-shadow: var(--cw-shadow);
    transition: all 0.3s;
    border: 1px solid rgba(0,0,0,0.04);
}

.cw-property-card:hover {
    box-shadow: var(--cw-shadow-xl);
    transform: translateY(-4px);
}

.cw-property-image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--cw-gray-100);
}

.cw-property-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 0.5s;
}

.cw-property-card:hover .cw-property-image img {
    transform: scale(1.05);
}

.cw-property-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: var(--cw-gray-300);
    background: var(--cw-gray-50);
}

.cw-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 8px;
    z-index: 2;
}

.cw-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.cw-badge-featured {
    background: var(--cw-gold);
    color: var(--cw-navy);
}

.cw-badge-available {
    background: rgba(5, 150, 105, 0.9);
    color: white;
}

.cw-distance-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(11, 29, 58, 0.85);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(4px);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cw-property-body {
    padding: 24px;
}

.cw-property-name {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--cw-navy);
    margin-bottom: 6px;
}

.cw-property-location {
    color: var(--cw-gray-500);
    font-size: 13px;
    margin-bottom: 16px;
}

.cw-property-location i { margin-right: 4px; }

.cw-property-specs {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.cw-property-spec {
    font-size: 13px;
    color: var(--cw-gray-600);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cw-property-spec i { color: var(--cw-gold); font-size: 12px; }

.cw-property-pricing-table {
    background: var(--cw-gray-50);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

/* FIX-015 — 3-column grid (year / rate / optional status badge) replaces the
   previous flex + space-between layout. Under flex, when a row had only year
   + rate (no badge, status='available'), space-between pushed rate to the
   right edge with a large empty gap after the year. The grid pattern
   `auto 1fr auto` places year in col 1, rate in col 2 (left-aligned within
   the flexible middle column so it sits right next to year), and the status
   badge — when present — in col 3 (right edge). When no badge child renders,
   col 3 has zero width and the row collapses cleanly. No HTML change
   required: `render_property_card()` already emits the three spans in order
   with the status span conditional on `status !== 'available'`.
   Gap raised from the initial 12px to 24px after first client review — the
   tighter spacing read as cramped against the rate's bold weight. The
   year→rate gap is the only one that visually matters here; the rate→badge
   gap is dominated by the 1fr column's flex space anyway. */
.cw-pricing-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 6px 0;
}

.cw-pricing-row:not(:last-child) {
    border-bottom: 1px solid var(--cw-gray-200);
}

/* FIX-017 — Active-year highlight is a chip inset from the table edges, not
   a full-bleed band. Three changes from the previous rule:
   (1) Background swapped from `rgba(201, 169, 110, 0.08)` (gold @ 8% — read
       as yellowish against the gray-50 table) to `#FFF8ED` (warm cream that
       sits cleanly between the navy and gold brand colors).
   (2) Negative margin reduced from -16px to -8px (and matching padding from
       16px to 8px). The table's own padding is 16px; the previous rule
       cancelled it entirely so the chip ran flush to the table edges. The
       new values leave an 8px gap between chip and table edge on each side
       while the equal negative-margin + padding pair keeps children aligned
       with non-active rows (no horizontal shift when a row goes active).
   (3) Added `border: 1px solid #E8D5B0` (warm tan, post-client-review) to
       give the chip a soft edge against the table's gray-50 background.
       The `border:` shorthand sets all four sides and (being later in the
       cascade than `.cw-pricing-row:not(:last-child)`) cleanly overrides
       the default gray bottom border on the active row — chip reads as a
       single coherent shape, no mixed-color edges.
   border-radius reduced from 6px to 4px to suit the smaller chip footprint.
   Note: without box-sizing:border-box on the row, the 1px border adds 2px
   to the chip's total width; combined with margin:-8px the chip extends 9px
   past content on each side. Negligible visually but kept in mind if the
   spacing math gets revisited later. */
.cw-pricing-row.cw-year-active {
    background: #FFF8ED;
    border: 1px solid #E8D5B0;
    margin: 0 -8px;
    padding: 6px 8px;
    border-radius: 4px;
}

.cw-year-label {
    font-weight: 600;
    color: var(--cw-navy);
    font-size: 14px;
}

.cw-rate-label {
    font-weight: 700;
    color: var(--cw-navy);
    font-size: 15px;
}

.cw-rate-label small {
    font-weight: 400;
    color: var(--cw-gray-500);
    font-size: 12px;
}

.cw-rate-label.cw-contact {
    color: var(--cw-gold);
    font-style: italic;
    font-weight: 600;
}

.cw-status-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 50px;
}

.cw-status-available { color: var(--cw-green); background: var(--cw-green-light); }
.cw-status-reserved { color: var(--cw-orange); background: var(--cw-orange-light); }
.cw-status-booked { color: var(--cw-red); background: var(--cw-red-light); }
.cw-status-unavailable { color: var(--cw-gray-500); background: var(--cw-gray-100); }

.cw-property-actions {
    display: flex;
    gap: 12px;
}

/* ============ WHY SECTION ============ */
.cw-why-section {
    background: var(--cw-navy);
    padding: 80px 24px;
    position: relative;
    overflow: hidden;
}

.cw-why-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    z-index: 0;
}

.cw-why-section > .cw-container {
    position: relative;
    z-index: 1;
}

.cw-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1320px;
    margin: 0 auto;
}

.cw-why-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--cw-radius-lg);
    padding: 36px 28px;
    transition: all 0.3s;
}

.cw-why-card:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(201, 169, 110, 0.3);
    transform: translateY(-4px);
}

.cw-why-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(201, 169, 110, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--cw-gold);
    margin-bottom: 20px;
}

.cw-why-card h3 {
    color: var(--cw-white);
    font-size: 18px;
    margin-bottom: 10px;
}

.cw-why-card p {
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    line-height: 1.6;
}

/* ============ INQUIRY FORM ============ */
.cw-inquiry-section {
    background: var(--cw-cream);
}

.cw-inquiry-form-wrapper {
    max-width: 720px;
    margin: 0 auto;
}

/* ============ FORM ELEMENTS ============ */
.cw-form-card {
    background: var(--cw-white);
    border-radius: var(--cw-radius-lg);
    box-shadow: var(--cw-shadow);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.04);
}

.cw-form-card-header {
    padding: 20px 28px;
    border-bottom: 1px solid var(--cw-gray-100);
    display: flex;
    align-items: center;
    gap: 12px;
}

.cw-form-card-header i {
    color: var(--cw-gold);
    font-size: 18px;
}

.cw-form-card-header h3 {
    font-size: 18px;
    color: var(--cw-navy);
    margin: 0;
}

.cw-form-card-body {
    padding: 28px;
}

.cw-form-group {
    margin-bottom: 16px;
}

.cw-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--cw-gray-700);
    margin-bottom: 6px;
}

.cw-required { color: var(--cw-red); }

.cw-form-group input,
.cw-form-group select,
.cw-form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--cw-gray-200);
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: var(--cw-gray-700);
    transition: border-color 0.2s;
    background: var(--cw-white);
    box-sizing: border-box;
}

.cw-form-group select {
    min-height: 48px;
}

.cw-form-group input:focus,
.cw-form-group select:focus,
.cw-form-group textarea:focus {
    outline: none;
    border-color: var(--cw-gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.1);
}

.cw-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.cw-form-response {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
}

.cw-form-response.success {
    background: var(--cw-green-light);
    color: var(--cw-green);
    border: 1px solid var(--cw-green);
}

.cw-form-response.error {
    background: var(--cw-red-light);
    color: var(--cw-red);
    border: 1px solid var(--cw-red);
}

/* ============ CTA SECTION ============ */
.cw-cta-section {
    padding: 80px 0;
}

.cw-cta-inner {
    background: linear-gradient(135deg, var(--cw-navy) 0%, var(--cw-navy-light) 100%);
    border-radius: var(--cw-radius-xl);
    padding: 60px 40px;
    text-align: center;
}

.cw-cta-inner h2 {
    color: var(--cw-white);
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    margin-bottom: 12px;
}

.cw-cta-inner p {
    color: rgba(255,255,255,0.7);
    font-size: 17px;
    margin-bottom: 28px;
}

.cw-cta-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============ SINGLE PROPERTY ============ */
.cw-single-property {
    background: var(--cw-cream);
    padding-bottom: 80px;
    /* FIX-001 — defensive containment so the page doesn't push outside
       Boostly/Homey's narrower content column. box-sizing on every
       descendant so paddings don't add to declared widths; max-width on
       all replaced elements so a wide image/iframe never overflows. */
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

.cw-single-property *,
.cw-single-property *::before,
.cw-single-property *::after {
    box-sizing: border-box;
}

.cw-single-property img,
.cw-single-property iframe,
.cw-single-property video,
.cw-single-property table {
    max-width: 100%;
}

.cw-property-nav {
    background: var(--cw-white);
    padding: 16px 0;
    border-bottom: 1px solid var(--cw-gray-200);
    margin-bottom: 32px;
}

.cw-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cw-navy);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
}

.cw-back-link:hover { color: var(--cw-gold); }

.cw-property-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
    align-items: start;
    /* FIX-001 — minmax(0,1fr) on the main column lets it shrink below
       its intrinsic content width (without this, a wide pricing table
       can blow out the grid in a constrained theme). max-width on the
       layout itself caps it to the parent. */
    max-width: 100%;
    width: 100%;
}

.cw-property-main {
    min-width: 0;
}

.cw-booking-sidebar {
    min-width: 0;
    max-width: 100%;
}

/* Gallery */
.cw-property-gallery {
    margin-bottom: 32px;
}

.cw-gallery-main {
    position: relative;
    border-radius: var(--cw-radius-lg);
    overflow: hidden;
    height: 450px;
    background: var(--cw-gray-100);
    margin-bottom: 12px;
}

/* FIX-004 + FIX-007 — gallery prev/next nav arrows.
   White SVG chevrons (no background) with a drop-shadow filter so the
   icons stay visible against any underlying photo color. Semi-transparent
   by default, fully opaque on hover. */
.cw-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background: transparent;
    color: #ffffff;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.7;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    transition: opacity 0.2s ease;
    z-index: 2;
}

.cw-gallery-nav:hover,
.cw-gallery-nav:focus {
    opacity: 1;
}

.cw-gallery-nav:focus {
    outline: none;
}

.cw-gallery-nav-icon {
    display: block;
    pointer-events: none;
}

.cw-gallery-prev { left: 16px; }
.cw-gallery-next { right: 16px; }

.cw-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cw-gallery-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--cw-gray-400);
    font-size: 48px;
}

.cw-gallery-placeholder p {
    font-size: 16px;
    margin-top: 12px;
}

.cw-gallery-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
}

.cw-gallery-thumb {
    width: 80px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
    flex-shrink: 0;
}

.cw-gallery-thumb.active,
.cw-gallery-thumb:hover {
    border-color: var(--cw-gold);
}

.cw-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Property Header */
.cw-property-header {
    margin-bottom: 32px;
}

.cw-property-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.cw-single-property h1 {
    font-size: 32px;
    color: var(--cw-navy);
    margin-bottom: 8px;
}

.cw-property-address {
    color: var(--cw-gray-500);
    font-size: 14px;
}

.cw-property-address i { color: var(--cw-gold); margin-right: 4px; }

.cw-property-specs-bar {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding: 16px 0;
    border-top: 1px solid var(--cw-gray-200);
    border-bottom: 1px solid var(--cw-gray-200);
}

.cw-spec-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--cw-gray-700);
    font-weight: 500;
}

.cw-spec-item i { color: var(--cw-gold); }

/* Pricing Table */
.cw-pricing-section {
    margin-bottom: 32px;
}

.cw-pricing-section h2,
.cw-property-description h2,
.cw-amenities-section h2,
.cw-property-inquiry h2,
.cw-directions-section h2 {
    font-size: 22px;
    color: var(--cw-navy);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cw-pricing-section h2 i,
.cw-property-description h2 i,
.cw-amenities-section h2 i,
.cw-property-inquiry h2 i,
.cw-directions-section h2 i {
    color: var(--cw-gold);
    font-size: 18px;
}

.cw-pricing-table {
    width: 100%;
    background: var(--cw-white);
    border-radius: var(--cw-radius-lg);
    overflow: hidden;
    box-shadow: var(--cw-shadow);
    border: 1px solid var(--cw-gray-200);
    border-collapse: collapse;
}

.cw-pricing-table thead th {
    background: var(--cw-navy);
    color: var(--cw-white);
    padding: 14px 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
}

.cw-pricing-table tbody td {
    padding: 16px 20px;
    font-size: 14px;
    border-bottom: 1px solid var(--cw-gray-100);
}

.cw-year-cell { font-weight: 600; color: var(--cw-navy); }
.cw-rate-cell { font-weight: 700; color: var(--cw-navy); font-size: 16px; }
.cw-deposit-cell { color: var(--cw-green); font-weight: 600; }
.cw-action-cell { text-align: right; }

.cw-unavailable-text {
    color: var(--cw-gray-400);
    font-style: italic;
    font-size: 13px;
}

/* Description */
.cw-property-description {
    margin-bottom: 32px;
}

.cw-description-content {
    color: var(--cw-gray-700);
    font-size: 15px;
    line-height: 1.7;
}

.cw-description-content p { margin-bottom: 16px; }

/* Amenities */
.cw-amenities-section {
    margin-bottom: 32px;
}

.cw-amenities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.cw-amenity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--cw-white);
    border-radius: var(--cw-radius);
    border: 1px solid var(--cw-gray-200);
    font-size: 14px;
    font-weight: 500;
    color: var(--cw-gray-700);
}

.cw-amenity-item i {
    color: var(--cw-gold);
    font-size: 16px;
    width: 20px;
    text-align: center;
}

/* Inquiry Form (on property page) */
.cw-property-inquiry {
    background: var(--cw-white);
    border-radius: var(--cw-radius-lg);
    padding: 28px;
    box-shadow: var(--cw-shadow);
    border: 1px solid rgba(0,0,0,0.04);
}

.cw-inline-inquiry .cw-form-row {
    margin-bottom: 0;
}

/* Directions Map */
.cw-directions-section {
    margin-top: 32px;
}

.cw-map-container {
    border-radius: var(--cw-radius-lg);
    overflow: hidden;
    box-shadow: var(--cw-shadow);
    border: 1px solid rgba(0,0,0,0.04);
}

.cw-map-container iframe {
    display: block;
    width: 100%;
    height: 400px;
}

@media (max-width: 768px) {
    .cw-map-container iframe {
        height: 300px;
    }
}

/* Booking Sidebar */
.cw-booking-sidebar {
    position: sticky;
    top: 100px;
}

.cw-booking-widget {
    background: var(--cw-white);
    border-radius: var(--cw-radius-lg);
    box-shadow: var(--cw-shadow-lg);
    border: 1px solid rgba(0,0,0,0.04);
    overflow: hidden;
}

.cw-bw-header {
    padding: 24px;
    border-bottom: 1px solid var(--cw-gray-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cw-bw-price {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--cw-navy);
}

.cw-bw-price small {
    font-size: 14px;
    font-weight: 400;
    color: var(--cw-gray-500);
}

.cw-nights-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: var(--cw-gold-light);
    color: var(--cw-navy);
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
}

.cw-bw-body {
    padding: 24px;
}

.cw-bw-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.cw-bw-date {
    background: var(--cw-gray-50);
    padding: 12px;
    border-radius: 8px;
}

.cw-bw-date label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--cw-gray-500);
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.cw-bw-date span {
    font-size: 14px;
    font-weight: 600;
    color: var(--cw-navy);
}

.cw-bw-breakdown {
    margin-bottom: 20px;
}

.cw-bw-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

.cw-bw-row .cw-label { color: var(--cw-gray-600); }
.cw-bw-row .cw-value { font-weight: 600; color: var(--cw-navy); }

.cw-bw-divider {
    height: 1px;
    background: var(--cw-gray-200);
    margin: 8px 0;
}

.cw-bw-total {
    font-size: 16px;
}

.cw-bw-total .cw-value {
    font-weight: 700;
    font-size: 18px;
}

.cw-bw-deposit {
    background: var(--cw-green-light);
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
    text-align: center;
}

.cw-deposit-label {
    font-size: 13px;
    color: var(--cw-green);
    font-weight: 600;
    margin-bottom: 4px;
}

.cw-deposit-amount {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--cw-green);
}

/* FIX-018 — Booking-widget tax note. Sits below the deposit amount when
   the admin has configured a non-zero tax rate, signalling to guests that
   the figure they see is pre-tax and the final charge at checkout will
   include taxes/fees. Tight margin so it reads as part of the deposit
   group, not a separate block. */
.cw-bw-tax-note {
    margin: 8px 0 0;
    font-size: 11px;
    color: var(--cw-gray-500);
    font-style: italic;
    line-height: 1.4;
}

.cw-bw-tax-note i {
    color: var(--cw-gray-500);
    margin-right: 4px;
}

.cw-bw-note {
    margin-top: 16px;
    font-size: 12px;
    color: var(--cw-gray-500);
    text-align: center;
}

.cw-bw-note i { color: var(--cw-gold); margin-right: 4px; }

/* FIX-006 — Terms & Conditions link below the Reserve button. */
.cw-bw-terms {
    margin-top: 12px;
    font-size: 12px;
    text-align: center;
}

.cw-bw-terms a {
    color: var(--cw-gray-600);
    text-decoration: underline;
}

.cw-bw-terms a:hover { color: var(--cw-navy); }

/* FIX-009 — Booking-widget Reserve button: explicit 1px border so the
   Boostly/Homey theme's default-thick button border doesn't leak through.
   `cw-reserve-btn--stacked` modifier accommodates the new two-line label. */
#cw-reserve-btn,
.cw-reserve-btn--stacked {
    border: 1px solid var(--cw-gold);
    line-height: 1.3;
    padding-top: 12px;
    padding-bottom: 12px;
}

#cw-reserve-btn:hover,
.cw-reserve-btn--stacked:hover {
    border-color: var(--cw-gold-hover);
}

/* FIX-010 — Mobile-only pricing cards. Hidden on desktop; the existing
   pricing table is hidden on mobile via the responsive @media block
   below. Same data, different layout. */
.cw-pricing-cards {
    display: none;
}

.cw-pricing-card {
    background: var(--cw-white);
    border: 1px solid var(--cw-gray-200);
    border-radius: var(--cw-radius-lg);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.cw-pricing-card:last-child {
    margin-bottom: 0;
}

.cw-pricing-card-year {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--cw-navy);
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cw-gray-200);
}

.cw-pricing-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    font-size: 14px;
    gap: 12px;
}

.cw-pricing-card-label {
    color: var(--cw-gray-600);
    flex-shrink: 0;
}

.cw-pricing-card-value {
    font-weight: 600;
    color: var(--cw-navy);
    text-align: right;
}

.cw-pricing-card-status {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--cw-gray-200);
}

.cw-pricing-card-action {
    margin-top: 12px;
}

/* ============ CONFIRMATION ============ */
.cw-confirmation-page {
    background: var(--cw-cream);
    padding-bottom: 80px;
}

.cw-success-banner {
    background: linear-gradient(135deg, var(--cw-navy) 0%, var(--cw-navy-light) 100%);
    padding: 60px 24px;
    text-align: center;
}

.cw-success-icon {
    width: 72px;
    height: 72px;
    background: var(--cw-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 32px;
    color: var(--cw-white);
    animation: cwScaleIn 0.5s ease;
}

@keyframes cwScaleIn {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.cw-confirmation-page h1 {
    color: var(--cw-white);
    font-size: 36px;
    margin-bottom: 12px;
}

.cw-success-banner > p {
    color: rgba(255,255,255,0.7);
    font-size: 17px;
    max-width: 500px;
    margin: 0 auto 24px;
}

.cw-booking-ref {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 12px 24px;
    border-radius: 8px;
    color: var(--cw-white);
    font-size: 15px;
}

.cw-ref-number {
    font-weight: 700;
    color: var(--cw-gold);
    letter-spacing: 1px;
}

.cw-confirm-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    padding-top: 40px;
}

.cw-confirm-card {
    background: var(--cw-white);
    border-radius: var(--cw-radius-lg);
    box-shadow: var(--cw-shadow);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.04);
    margin-bottom: 24px;
}

.cw-confirm-card-header {
    padding: 20px 28px;
    border-bottom: 1px solid var(--cw-gray-100);
    display: flex;
    align-items: center;
    gap: 12px;
}

.cw-confirm-card-header i {
    color: var(--cw-gold);
    font-size: 18px;
}

.cw-confirm-card-header h3 {
    font-size: 18px;
    color: var(--cw-navy);
    margin: 0;
}

.cw-confirm-card-body {
    padding: 28px;
}

.cw-confirm-property {
    display: flex;
    gap: 16px;
    align-items: center;
}

.cw-confirm-thumb {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--cw-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cw-confirm-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cw-confirm-thumb i {
    font-size: 24px;
    color: var(--cw-gray-400);
}

.cw-confirm-property-info h4 {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    color: var(--cw-navy);
    margin-bottom: 4px;
}

.cw-confirm-property-info p {
    font-size: 13px;
    color: var(--cw-gray-500);
    margin-bottom: 2px;
}

.cw-confirm-property-info i {
    color: var(--cw-gold);
    margin-right: 4px;
}

.cw-confirm-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--cw-gray-100);
}

.cw-confirm-row:last-child { border-bottom: none; }

.cw-confirm-paid {
    color: var(--cw-green);
}

.cw-confirm-paid i { margin-right: 4px; }

.cw-confirm-balance {
    color: var(--cw-orange);
}

.cw-confirm-due-date {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--cw-orange-light);
    border-radius: 8px;
    font-size: 13px;
    color: var(--cw-orange);
    font-weight: 600;
}

.cw-confirm-due-date i { margin-right: 6px; }

/* Timeline */
.cw-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cw-timeline-item {
    display: flex;
    gap: 16px;
    padding-bottom: 24px;
    position: relative;
}

.cw-timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 34px;
    bottom: 0;
    width: 2px;
    background: var(--cw-gray-200);
}

.cw-timeline-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

.cw-dot-green { background: var(--cw-green-light); color: var(--cw-green); }
.cw-dot-blue { background: var(--cw-blue-light); color: var(--cw-blue); }
.cw-dot-gold { background: var(--cw-orange-light); color: var(--cw-orange); }
.cw-dot-purple { background: var(--cw-purple-light); color: var(--cw-purple); }

.cw-timeline-content h4 {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--cw-navy);
    margin-bottom: 4px;
}

.cw-timeline-content p {
    font-size: 13px;
    color: var(--cw-gray-500);
    margin-bottom: 6px;
}

.cw-date-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--cw-gray-400);
    font-weight: 500;
}

/* Sidebar Actions */
.cw-confirm-sidebar .cw-confirm-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.cw-confirm-contact-card {
    background: var(--cw-white);
    border-radius: var(--cw-radius-lg);
    padding: 24px;
    box-shadow: var(--cw-shadow);
    border: 1px solid rgba(0,0,0,0.04);
}

.cw-confirm-contact-card h4 {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    color: var(--cw-navy);
    margin-bottom: 8px;
}

.cw-confirm-contact-card p {
    font-size: 14px;
    color: var(--cw-gray-500);
    margin-bottom: 16px;
}

.cw-confirm-contact-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cw-confirm-contact-card li {
    padding: 8px 0;
    font-size: 14px;
}

.cw-confirm-contact-card li i {
    color: var(--cw-gold);
    margin-right: 8px;
    width: 16px;
}

.cw-confirm-contact-card li a {
    color: var(--cw-navy);
    text-decoration: none;
    font-weight: 500;
}

.cw-confirm-contact-card li a:hover {
    color: var(--cw-gold);
}

/* ============ BALANCE PAYMENT PAGE ============ */
.cw-pay-balance-page {
    background: var(--cw-cream);
    padding: 60px 0;
}

.cw-balance-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}

.cw-balance-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--cw-blue-light);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    font-size: 14px;
    color: var(--cw-blue);
}

.cw-balance-info-banner i { margin-top: 2px; }

.cw-stripe-element-wrapper {
    margin-bottom: 24px;
}

.cw-stripe-element-wrapper label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--cw-gray-700);
    margin-bottom: 8px;
}

.cw-stripe-element {
    padding: 14px 16px;
    border: 1.5px solid var(--cw-gray-200);
    border-radius: 8px;
    background: var(--cw-white);
    transition: border-color 0.2s;
}

.cw-stripe-element:focus-within {
    border-color: var(--cw-gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.1);
}

.cw-card-errors {
    color: var(--cw-red);
    font-size: 13px;
    margin-top: 8px;
    min-height: 20px;
}

.cw-security-note {
    text-align: center;
    font-size: 12px;
    color: var(--cw-gray-400);
    margin-top: 16px;
}

.cw-security-note i { color: var(--cw-green); margin-right: 4px; }

.cw-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--cw-navy);
    border-top-color: transparent;
    border-radius: 50%;
    animation: cwSpin 0.6s linear infinite;
}

@keyframes cwSpin {
    to { transform: rotate(360deg); }
}

/* Order Card */
.cw-order-card {
    background: var(--cw-white);
    border-radius: var(--cw-radius-lg);
    box-shadow: var(--cw-shadow-lg);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.04);
}

.cw-order-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--cw-gray-100);
}

.cw-order-header h3 {
    font-size: 18px;
    color: var(--cw-navy);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cw-order-header i { color: var(--cw-gold); }

.cw-order-body {
    padding: 24px;
}

.cw-order-property {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 20px;
}

.cw-order-thumb {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--cw-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cw-order-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cw-order-thumb i { font-size: 20px; color: var(--cw-gray-400); }

.cw-order-property-info h4 {
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    color: var(--cw-navy);
    margin-bottom: 2px;
}

.cw-order-property-info p {
    font-size: 13px;
    color: var(--cw-gray-500);
}

.cw-order-divider {
    height: 1px;
    background: var(--cw-gray-200);
    margin: 14px 0;
}

.cw-order-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
}

.cw-order-row .cw-label { color: var(--cw-gray-600); }
.cw-order-row .cw-value { font-weight: 600; color: var(--cw-navy); }

.cw-paid-row .cw-label { color: var(--cw-green); }
.cw-paid-row .cw-value { color: var(--cw-green); }

.cw-order-total .cw-label { font-weight: 700; color: var(--cw-navy); }
.cw-order-total .cw-value { font-weight: 700; color: var(--cw-navy); font-size: 18px; }

.cw-booking-ref-card {
    margin-top: 16px;
    padding: 14px 20px;
    background: var(--cw-white);
    border-radius: var(--cw-radius);
    border: 1px solid var(--cw-gray-200);
    font-size: 13px;
    color: var(--cw-gray-600);
    text-align: center;
}

.cw-booking-ref-card i { color: var(--cw-gold); margin-right: 6px; }

/* No Results */
.cw-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--cw-gray-500);
}

.cw-no-results i {
    font-size: 48px;
    color: var(--cw-gray-300);
    margin-bottom: 16px;
}

.cw-no-results h3 {
    color: var(--cw-navy);
    margin-bottom: 8px;
}

/* Notice */
.cw-notice {
    padding: 20px 24px;
    border-radius: var(--cw-radius);
    background: var(--cw-blue-light);
    color: var(--cw-blue);
    font-size: 15px;
    margin: 40px 0;
}

.cw-notice-error {
    background: var(--cw-red-light);
    color: var(--cw-red);
}

/* ============ WOO CHECKOUT OVERRIDES ============ */
.cw-price-breakdown th,
.cw-price-breakdown td {
    font-size: 14px;
}

.cw-full-total td { color: var(--cw-navy); font-weight: 600; }
.cw-deposit-now td { color: var(--cw-green); font-weight: 700; }
.cw-balance-later td { color: var(--cw-gray-500); }

.cw-deposit-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.cw-full-price {
    color: var(--cw-gray-500);
}

.cw-guest-fields {
    margin-bottom: 24px;
    padding: 20px;
    background: var(--cw-gray-50);
    border-radius: var(--cw-radius);
    border: 1px solid var(--cw-gray-200);
}

.cw-guest-fields h3 {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    color: var(--cw-navy);
    margin-bottom: 16px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
    .cw-property-layout {
        grid-template-columns: 1fr;
    }

    .cw-booking-sidebar {
        position: static;
    }

    .cw-confirm-layout {
        grid-template-columns: 1fr;
    }

    .cw-balance-layout {
        grid-template-columns: 1fr;
    }

    .cw-featured-card {
        grid-template-columns: 1fr;
    }

    .cw-featured-image {
        min-height: 300px;
    }

    .cw-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cw-hero h1 {
        font-size: 32px;
    }

    .cw-hero-subtitle {
        font-size: 16px;
    }

    .cw-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cw-property-grid {
        grid-template-columns: 1fr;
    }

    .cw-form-row {
        grid-template-columns: 1fr;
    }

    .cw-filter-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .cw-results-count {
        margin-left: 0;
    }

    .cw-section-title {
        font-size: 28px;
    }

    .cw-why-grid {
        grid-template-columns: 1fr;
    }

    .cw-amenities-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cw-gallery-main {
        height: 280px;
    }

    .cw-property-specs-bar {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* FIX-010 — swap the pricing table out for the card layout on mobile.
       The table overflowed Boostly's narrow content column; cards stack
       vertically and stay within any container width. */
    .cw-pricing-table {
        display: none;
    }

    .cw-pricing-cards {
        display: block;
    }

    .cw-cta-inner {
        padding: 40px 24px;
    }

    .cw-cta-inner h2 {
        font-size: 24px;
    }

    .cw-hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .cw-cta-actions {
        flex-direction: column;
        align-items: center;
    }

    .cw-confirmation-page h1 {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .cw-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .cw-stat-card {
        padding: 20px 16px;
    }

    .cw-stat-value {
        font-size: 22px;
    }
}