@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap');

        * { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --primary-black: #0a0a0a;
            --secondary-black: #1a1a1a;
            --gold: #C9A961;
            --gold-light: #D4AF6A;
            --gold-dark: #B39551;
            --text-white: #ffffff;
            --text-gray: #c0c0c0;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background-color: var(--primary-black);
            color: var(--text-white);
            line-height: 1.6;
            overflow-x: hidden;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Cormorant Garamond', serif;
            font-weight: 300;
            letter-spacing: 2px;
        }

        html[lang="fr"] .en-content { display: none !important; }
        html[lang="en"] .fr-content { display: none !important; }

        /* NAV */
        nav {
            position: fixed; top: 0; width: 100%;
            background: rgba(10, 10, 10, 0.98);
            backdrop-filter: blur(20px);
            z-index: 1000; padding: 1rem 5%;
            border-bottom: 1px solid rgba(201, 169, 97, 0.15);
        }
        .nav-content {
            max-width: 1400px; margin: 0 auto;
            display: flex; justify-content: space-between; align-items: center;
            gap: 2.5rem;  /* prevents nav-links from touching nav-right (e.g. CONSULTANCY ↔ user name) */
            flex-wrap: wrap;
        }
        .logo-container { display: flex; align-items: center; text-decoration: none; }
        .logo-container svg { height: 70px; width: auto; }
        .nav-links { display: flex; gap: 2.5rem; list-style: none; align-items: center; }
        .nav-links a {
            color: var(--text-gray); text-decoration: none; font-size: 0.85rem;
            letter-spacing: 1.5px; text-transform: uppercase; transition: all 0.3s; font-weight: 300; cursor: pointer;
        }
        .nav-links a:hover, .nav-links a.active { color: var(--gold); }
        .nav-right { display: flex; gap: 1rem; align-items: center; }
        .lang-switch {
            cursor: pointer; padding: 0.6rem 1.5rem; border: 1px solid var(--gold);
            background: transparent; color: var(--gold); letter-spacing: 2px;
            transition: all 0.3s; font-size: 0.75rem; font-weight: 400;
        }
        .lang-switch:hover { background: var(--gold); color: var(--primary-black); }

        /* BUTTONS */
        .btn {
            padding: 1rem 2.5rem; text-decoration: none; letter-spacing: 2px;
            transition: all 0.4s; cursor: pointer; font-size: 0.8rem; border: none;
            text-transform: uppercase; font-weight: 400; display: inline-block; font-family: 'Montserrat', sans-serif;
        }
        .btn-primary { background: var(--gold); color: var(--primary-black); }
        .btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(201, 169, 97, 0.3); }
        .btn-secondary { background: transparent; color: var(--text-white); border: 1px solid var(--text-white); }
        .btn-secondary:hover { background: var(--text-white); color: var(--primary-black); }
        .btn-gold-outline { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
        .btn-gold-outline:hover { background: var(--gold); color: var(--primary-black); }
        .btn-sm { padding: 0.6rem 1.5rem; font-size: 0.7rem; }
        .btn-danger { background: #5a2020; color: #ffaaaa; border: 1px solid #8b3030; }
        .btn-danger:hover { background: #8b3030; }

        /* VIEWS */
        .view { display: none; padding-top: 100px; min-height: 100vh; }
        .view.active { display: block; }

        /* HERO */
        .hero-mini {
            padding: 3rem 5%; text-align: center;
            background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.9));
            border-bottom: 1px solid rgba(201, 169, 97, 0.1);
        }
        .hero-mini h1 { font-size: 3rem; color: var(--text-white); margin-bottom: 0.8rem; }
        .hero-mini p { color: var(--text-gray); font-size: 1rem; font-weight: 300; max-width: 600px; margin: 0 auto; }

        /* FILTERS */
        .filters-bar {
            padding: 1.5rem 5%; background: var(--secondary-black);
            border-bottom: 1px solid rgba(201, 169, 97, 0.1);
            display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: center;
        }
        .filter-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }
        .filter-btn {
            padding: 0.5rem 1.2rem; background: transparent; border: 1px solid rgba(201, 169, 97, 0.2);
            color: var(--text-gray); font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase;
            cursor: pointer; transition: all 0.3s; font-family: 'Montserrat', sans-serif;
        }
        .filter-btn:hover, .filter-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(201, 169, 97, 0.08); }

        /* LISTINGS GRID */
        .listings-container { padding: 3rem 5%; max-width: 1400px; margin: 0 auto; }
        .listings-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 2rem;
        }
        .listing-card {
            background: var(--secondary-black); border: 1px solid rgba(201, 169, 97, 0.2);
            overflow: hidden; transition: all 0.4s; cursor: pointer;
            border-radius: 4px;
        }
        .listing-card:hover { border-color: var(--gold); transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.4); }

        .listing-photo {
            height: 220px; background-size: cover; background-position: center;
            position: relative; background-color: #1a1a1a;
        }
        .listing-photo-placeholder {
            height: 220px; background: linear-gradient(135deg, #1a1a1a, rgba(201,169,97,0.06));
            display: flex; align-items: center; justify-content: center; font-size: 4rem; opacity: 0.2;
            position: relative;
        }
        .listing-badge {
            position: absolute; top: 1rem; left: 1rem; padding: 0.4rem 1rem;
            font-size: 0.65rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 500;
        }
        .badge-direct { background: var(--gold); color: var(--primary-black); }
        .badge-auction-up { background: #2E5E3E; color: #A8E6CF; }
        .badge-auction-down { background: #5E3E2E; color: #FFD4A8; }
        .badge-lastminute { background: #8B2E2E; color: #FFD4D4; }

        .listing-info { padding: 1.5rem; }
        .listing-info h3 { font-size: 1.4rem; color: var(--text-white); margin-bottom: 0.3rem; font-weight: 400; }
        .listing-region { color: var(--text-gray); font-size: 0.8rem; letter-spacing: 0.5px; margin-bottom: 1rem; }
        .listing-meta { display: flex; justify-content: space-between; align-items: flex-end; padding-top: 1rem; border-top: 1px solid rgba(201,169,97,0.1); }
        .listing-price { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; color: var(--gold); font-weight: 500; }
        .listing-price-old { text-decoration: line-through; color: var(--text-gray); font-size: 0.85rem; font-family: 'Montserrat', sans-serif; display: block; }
        .listing-date-info { text-align: right; color: var(--text-gray); font-size: 0.8rem; }
        .listing-countdown { color: #D4817A; font-size: 0.7rem; letter-spacing: 1px; text-transform: uppercase; margin-top: 0.2rem; }
        .listing-bids { color: var(--gold-light); font-size: 0.7rem; letter-spacing: 1px; text-transform: uppercase; margin-top: 0.2rem; }

        .empty-state { text-align: center; padding: 5rem 2rem; color: var(--text-gray); }
        .empty-state h3 { color: var(--gold); font-size: 2rem; margin-bottom: 1rem; }

        /* DETAIL VIEW */
        .detail-container { max-width: 1200px; margin: 0 auto; padding: 2rem 5%; }
        .detail-back { color: var(--gold); cursor: pointer; font-size: 0.85rem; letter-spacing: 1px; margin-bottom: 2rem; display: inline-block; text-decoration: none; }
        .detail-back:hover { text-decoration: underline; }

        .detail-gallery { position: relative; margin-bottom: 2rem; }
        .detail-main-photo {
            width: 100%; height: 450px; background-size: cover; background-position: center;
            background-color: #1a1a1a; border: 1px solid rgba(201,169,97,0.15);
        }
        .detail-thumbs { display: flex; gap: 0.5rem; margin-top: 0.5rem; overflow-x: auto; }
        .detail-thumb {
            width: 80px; height: 60px; background-size: cover; background-position: center;
            cursor: pointer; border: 2px solid transparent; transition: all 0.3s; flex-shrink: 0;
            background-color: #1a1a1a;
        }
        .detail-thumb:hover, .detail-thumb.active { border-color: var(--gold); }

        .detail-content { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 3rem; }
        .detail-info h2 { font-size: 2.5rem; color: var(--text-white); margin-bottom: 0.5rem; }
        .detail-region { color: var(--gold); font-size: 1rem; letter-spacing: 1px; margin-bottom: 2rem; }
        .detail-description { color: var(--text-gray); line-height: 1.9; font-size: 0.95rem; margin-bottom: 2rem; }
        .detail-amenities { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
        .amenity-tag {
            padding: 0.4rem 1rem; background: rgba(201,169,97,0.08); border: 1px solid rgba(201,169,97,0.15);
            color: var(--text-gray); font-size: 0.75rem; letter-spacing: 1px;
        }
        .detail-capacity { color: var(--text-gray); font-size: 0.9rem; margin-bottom: 2rem; }
        .detail-capacity strong { color: var(--gold); }

        /* DATES PANEL */
        .dates-panel { background: var(--secondary-black); border: 1px solid rgba(201,169,97,0.15); padding: 2rem; }
        .dates-panel h3 { font-size: 1.8rem; color: var(--gold); margin-bottom: 1.5rem; }
        .date-slot {
            padding: 1.5rem; border: 1px solid rgba(201,169,97,0.1); margin-bottom: 1rem;
            background: rgba(201,169,97,0.02); transition: all 0.3s;
        }
        .date-slot:hover { border-color: rgba(201,169,97,0.3); }
        .date-slot-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; }
        .date-slot-date { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: var(--text-white); }
        .date-slot-type { font-size: 0.65rem; letter-spacing: 1.5px; text-transform: uppercase; padding: 0.3rem 0.8rem; }
        .date-slot-pricing { margin-bottom: 1rem; }
        .date-slot-current { font-family: 'Cormorant Garamond', serif; font-size: 2rem; color: var(--gold); }
        .date-slot-original { text-decoration: line-through; color: var(--text-gray); font-size: 0.85rem; margin-left: 0.5rem; }
        .date-slot-discount { color: #D4817A; font-size: 0.8rem; font-weight: 500; }

        /* AUCTION */
        .auction-box { background: rgba(0,0,0,0.3); padding: 1.2rem; border: 1px solid rgba(201,169,97,0.1); margin-top: 0.8rem; }
        .auction-timer { color: #D4817A; font-size: 0.8rem; letter-spacing: 1px; margin-bottom: 0.8rem; }
        .auction-bids-list { max-height: 120px; overflow-y: auto; margin-bottom: 0.8rem; }
        .auction-bid-item { display: flex; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.8rem; color: var(--text-gray); }
        .auction-bid-item .bid-amount { color: var(--gold); font-weight: 500; }
        .bid-form { display: flex; gap: 0.5rem; }
        .bid-input {
            flex: 1; padding: 0.6rem 1rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(201,169,97,0.2);
            color: var(--text-white); font-size: 0.9rem; font-family: 'Montserrat', sans-serif;
        }
        .bid-input:focus { outline: none; border-color: var(--gold); }
        .bid-input::placeholder { color: rgba(255,255,255,0.3); }

        /* ADD VENUE FORM */
        .form-container { max-width: 900px; margin: 0 auto; padding: 2rem 5%; }
        .form-section { margin-bottom: 3rem; }
        .form-section h3 { font-size: 1.8rem; color: var(--gold); margin-bottom: 1.5rem; }
        .form-group { margin-bottom: 1.5rem; }
        .form-group label {
            display: block; margin-bottom: 0.5rem; color: var(--text-gray);
            font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase;
        }
        .form-input, .form-textarea, .form-select {
            width: 100%; padding: 0.9rem 1.2rem; background: rgba(255,255,255,0.05);
            border: 1px solid rgba(201,169,97,0.2); color: var(--text-white);
            font-size: 0.9rem; font-family: 'Montserrat', sans-serif; transition: border-color 0.3s;
        }
        .form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--gold); }
        .form-textarea { min-height: 120px; resize: vertical; }
        .form-select { appearance: none; cursor: pointer; }
        .form-select option { background: var(--secondary-black); color: var(--text-white); }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

        /* PHOTO UPLOAD */
        .photo-upload-area {
            border: 2px dashed rgba(201,169,97,0.3); padding: 2rem; text-align: center;
            cursor: pointer; transition: all 0.3s; min-height: 150px;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
        }
        .photo-upload-area:hover { border-color: var(--gold); background: rgba(201,169,97,0.03); }
        .photo-upload-area p { color: var(--text-gray); font-size: 0.85rem; }
        .photo-upload-area .upload-icon { font-size: 2rem; margin-bottom: 0.5rem; opacity: 0.5; }
        .photo-previews { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1rem; }
        .photo-preview {
            width: 100px; height: 75px; background-size: cover; background-position: center;
            position: relative; border: 1px solid rgba(201,169,97,0.2);
        }
        .photo-preview .remove-photo {
            position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
            background: #8B2E2E; color: white; border: none; border-radius: 50%;
            cursor: pointer; font-size: 0.7rem; display: flex; align-items: center; justify-content: center;
        }

        /* DATE ENTRIES */
        .date-entry {
            background: rgba(201,169,97,0.03); border: 1px solid rgba(201,169,97,0.12);
            padding: 1.5rem; margin-bottom: 1rem;
        }
        .date-entry-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
        .date-entry-header h4 { color: var(--text-white); font-size: 1.1rem; }
        .conditional-fields { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(201,169,97,0.1); }

        /* DASHBOARD */
        .dashboard-container { max-width: 1200px; margin: 0 auto; padding: 2rem 5%; }
        .dashboard-card {
            background: var(--secondary-black); border: 1px solid rgba(201,169,97,0.12);
            padding: 1.5rem; margin-bottom: 1rem; display: flex; gap: 1.5rem; align-items: center;
        }
        .dashboard-card-photo {
            width: 120px; height: 80px; background-size: cover; background-position: center;
            flex-shrink: 0; background-color: #1a1a1a;
        }
        .dashboard-card-info { flex: 1; }
        .dashboard-card-info h4 { font-size: 1.3rem; color: var(--text-white); margin-bottom: 0.3rem; }
        .dashboard-card-info p { color: var(--text-gray); font-size: 0.85rem; }
        .dashboard-card-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
        .dashboard-bids { margin-top: 1rem; }
        .dashboard-bid-item {
            padding: 0.8rem; background: rgba(201,169,97,0.03); border: 1px solid rgba(201,169,97,0.08);
            margin-bottom: 0.5rem; display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-gray);
        }

        /* MODAL */
        .modal-overlay {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.8); z-index: 2000; display: none;
            align-items: center; justify-content: center;
        }
        .modal-overlay.active { display: flex; }
        .modal-box {
            background: var(--secondary-black); border: 1px solid rgba(201,169,97,0.2);
            padding: 2.5rem; max-width: 500px; width: 90%; position: relative;
        }
        .modal-box h3 { color: var(--gold); margin-bottom: 1rem; font-size: 1.5rem; }
        .modal-box p { color: var(--text-gray); margin-bottom: 1.5rem; font-size: 0.9rem; line-height: 1.7; }
        .modal-close {
            position: absolute; top: 1rem; right: 1rem; background: none; border: none;
            color: var(--text-gray); font-size: 1.5rem; cursor: pointer;
        }

        /* TOAST */
        .toast {
            position: fixed; bottom: 2rem; right: 2rem; padding: 1rem 2rem;
            background: var(--gold); color: var(--primary-black); font-size: 0.85rem;
            letter-spacing: 1px; z-index: 3000; transform: translateY(100px); opacity: 0;
            transition: all 0.4s;
        }
        .toast.show { transform: translateY(0); opacity: 1; }

        /* RESPONSIVE */
        @media (max-width: 1024px) {
            .detail-content { grid-template-columns: 1fr; }
        }
        @media (max-width: 768px) {
            .nav-links { display: none; }
            .hero-mini h1 { font-size: 2rem; }
            .listings-grid { grid-template-columns: 1fr; }
            .form-row { grid-template-columns: 1fr; }
            .detail-main-photo { height: 280px; }
            .dashboard-card { flex-direction: column; }
            .dashboard-card-photo { width: 100%; height: 150px; }
        }

        /* ═══════════════════════════════════════════════════════════
           POLISH PASS — Tier 1 + 2 (luxe minimaliste, Aman / Six Senses)
           Designed June 2026 — purely additive, no behavior change.
           ═══════════════════════════════════════════════════════════ */

        /* Tier 1·a — Listing cards : staggered fade-in on arrival
           Cards arrive smoothly from below with a 60ms cascade, then settle.
           Hover gets a slightly slower curve for a more "considered" feel. */
        @keyframes lcFadeUp {
            from { opacity: 0; transform: translateY(14px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .listing-card {
            opacity: 0;
            animation: lcFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
            will-change: opacity, transform;
        }
        .listing-card:nth-child(1)    { animation-delay: 0ms;   }
        .listing-card:nth-child(2)    { animation-delay: 60ms;  }
        .listing-card:nth-child(3)    { animation-delay: 120ms; }
        .listing-card:nth-child(4)    { animation-delay: 180ms; }
        .listing-card:nth-child(5)    { animation-delay: 220ms; }
        .listing-card:nth-child(6)    { animation-delay: 260ms; }
        .listing-card:nth-child(7)    { animation-delay: 300ms; }
        .listing-card:nth-child(8)    { animation-delay: 340ms; }
        .listing-card:nth-child(9)    { animation-delay: 380ms; }
        .listing-card:nth-child(n+10) { animation-delay: 420ms; }
        .listing-card { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                                    border-color 0.3s, box-shadow 0.35s; }
        .listing-card:hover { transform: translateY(-6px); }

        /* Tier 1·b — Refined focus rings on every form control
           Adds a subtle gold halo (3px, 12% alpha) — visible without being noisy.
           Placeholder opacity bumped from 30% to 28% for sharper readability. */
        .form-input, .form-textarea, .form-select, .bid-input {
            transition: border-color 0.2s ease, box-shadow 0.25s ease, background 0.2s ease;
        }
        .form-input:focus,
        .form-textarea:focus,
        .form-select:focus,
        .bid-input:focus {
            border-color: var(--gold);
            box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.12);
        }
        .form-input::placeholder,
        .form-textarea::placeholder,
        .bid-input::placeholder { color: rgba(255, 255, 255, 0.28); }

        /* Tier 1·c — Detail gallery : smooth cross-fade between photos
           Main photo crossfades via opacity (180ms out → swap → 220ms in).
           Thumbnails breathe : 0.7 opacity → 1 on hover/active, with a tiny lift. */
        .detail-main-photo {
            transition: opacity 0.4s ease-in-out;
        }
        .detail-main-photo.swap-fade { opacity: 0.15; }
        .detail-thumb {
            opacity: 0.65;
            transition: all 0.3s ease;
            border-radius: 2px;
        }
        .detail-thumb:hover  { opacity: 1; transform: translateY(-2px); }
        .detail-thumb.active { opacity: 1; box-shadow: 0 6px 14px rgba(201, 169, 97, 0.25); }

        /* Tier 1·d — Floating Help button : lift + gold halo on hover
           Matches the .btn-primary hover semantics so it doesn't feel detached. */
        #help-button {
            transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
        }
        #help-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 32px rgba(201, 169, 97, 0.4),
                        0 0 0 4px rgba(201, 169, 97, 0.08) !important;
        }

        /* Tier 2·e — Auth modal : role cards hover + keyboard focus ring */
        .role-card { transition: all 0.25s ease !important; }
        .role-card:hover {
            border-color: var(--gold) !important;
            background: rgba(201, 169, 97, 0.04) !important;
            transform: translateY(-2px);
        }
        .role-card:focus-visible {
            outline: 2px solid var(--gold);
            outline-offset: 3px;
        }

        /* Tier 2·f — Filter bar : softer container + breathing space */
        .filters-bar {
            background: linear-gradient(to bottom,
                        var(--secondary-black) 0%,
                        rgba(26, 26, 26, 0.7) 100%);
            padding: 1.8rem 5%;
        }
        .filter-btn { border-radius: 2px; transition: all 0.25s ease; }
        .filter-btn:hover { transform: translateY(-1px); }

        /* Tier 2·g — Hero : more air, less compressed feel */
        .hero-mini { padding: 4rem 5% 3rem; }
        .hero-mini h1 { margin-bottom: 1.2rem; }
        .hero-mini p { line-height: 1.7; }

        /* Tier 2·h — Modal close (×) : meaningful hover with rotation */
        .modal-close {
            width: 36px; height: 36px;
            display: flex; align-items: center; justify-content: center;
            border-radius: 50%;
            transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .modal-close:hover {
            color: var(--gold);
            background: rgba(201, 169, 97, 0.1);
            transform: scale(1.1) rotate(90deg);
        }

        /* Global micro-polish — small touches that compound */
        html { scroll-behavior: smooth; }
        ::selection { background: rgba(201, 169, 97, 0.3); color: var(--text-white); }
        .btn { transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
        .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
        .toast {
            transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
            border-radius: 2px;
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
        }

        /* ─────────────────────────────────────────────
           Tier 3 — deeper refinements (June 2026)
           ───────────────────────────────────────────── */

        /* T3·i — Booking type cards : refined selected state
           When .booking-card-selected is on, a gold left-accent appears with a
           subtle ::after gold check mark. Hover lift on the unselected card too. */
        #booking-type-immediate,
        #booking-type-secured {
            position: relative;
            border-radius: 4px;
            overflow: hidden;
        }
        #booking-type-immediate:hover,
        #booking-type-secured:hover {
            transform: translateY(-1px);
            border-color: rgba(201, 169, 97, 0.45) !important;
        }
        .booking-card-selected {
            box-shadow: inset 4px 0 0 var(--gold);
            background: linear-gradient(to right,
                        rgba(201, 169, 97, 0.08) 0%,
                        rgba(201, 169, 97, 0.02) 100%) !important;
        }
        .booking-card-selected::after {
            content: "✓";
            position: absolute;
            top: 0.9rem; right: 1rem;
            color: var(--gold);
            font-size: 1.1rem;
            font-weight: 600;
            opacity: 0;
            animation: bookingCheckIn 0.3s 0.05s ease-out forwards;
        }
        @keyframes bookingCheckIn {
            from { opacity: 0; transform: scale(0.5); }
            to   { opacity: 1; transform: scale(1); }
        }

        /* T3·ii — Owner dashboard date slots : status-coloured left accent
           Single glance lets owners see active vs sold vs hold without reading. */
        .owner-date-slot {
            position: relative;
            transition: all 0.25s ease;
            padding-left: 1.2rem !important;
        }
        .owner-date-slot::before {
            content: "";
            position: absolute;
            left: 0; top: 0; bottom: 0;
            width: 3px;
            background: rgba(201, 169, 97, 0.2);
            transition: background 0.2s;
        }
        .owner-date-slot[data-status="active"]::before            { background: var(--gold); }
        .owner-date-slot[data-status="sold"]::before              { background: #D4817A; }
        .owner-date-slot[data-status="reservation_hold"]::before  { background: #E0B85F; }
        .owner-date-slot:hover {
            background: rgba(255, 255, 255, 0.04) !important;
            transform: translateX(2px);
        }

        /* T3·iii — Chat thread : Aman/Slack-grade breathing room
           Bigger gap between messages, padding bumped from 0.7→1rem, bigger
           border-radius for a softer feel, gentle entry animation per message. */
        @keyframes chatBubbleIn {
            from { opacity: 0; transform: translateY(6px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        #thread-messages {
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
            padding: 0.4rem 0.6rem;
        }
        .chat-row { margin: 0; }
        .chat-bubble {
            max-width: 72%;
            padding: 0.95rem 1.15rem;
            border-radius: 14px;
            animation: chatBubbleIn 0.35s ease-out backwards;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
        }
        .chat-bubble.is-mine    { border-bottom-right-radius: 4px; }
        .chat-bubble.is-theirs  { border-bottom-left-radius: 4px; }

        /* T3·iv — Checkout pay button : the singular focal point
           The single primary CTA on a financial-decision page deserves more
           presence : bigger padding, refined letter-spacing, gold halo on hover. */
        #checkout-pay-btn {
            padding: 1.4rem 2rem !important;
            font-size: 0.85rem !important;
            letter-spacing: 3px !important;
            font-weight: 500;
            border-radius: 3px;
            box-shadow: 0 6px 18px rgba(201, 169, 97, 0.15);
        }
        #checkout-pay-btn:not(:disabled):hover {
            box-shadow: 0 14px 32px rgba(201, 169, 97, 0.4),
                        0 0 0 4px rgba(201, 169, 97, 0.08);
        }
        #checkout-pay-btn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
            box-shadow: none;
        }

        /* Respect users who prefer no motion — accessibility first. */
        @media (prefers-reduced-motion: reduce) {
            .listing-card { opacity: 1; animation: none; }
            .chat-bubble { animation: none; }
            .booking-card-selected::after { animation: none; opacity: 1; }
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                transition-duration: 0.01ms !important;
            }
        }