/**
 * BOOKING SIDEBAR - MODERN UNIFIED STYLES
 * 
 * Consistent sidebar styling across all booking steps
 * 
 * Version: 1.0
 * Last Updated: 2025-01-07
 */

/* ==========================================================================
   BOOKING SIDEBAR CONTAINER
   ========================================================================== */

.booking-sidebar {
    /* Enhanced positioning and spacing */
    position: sticky;
    top: calc(var(--booking-space-xl) + 80px);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding: var(--booking-space-lg);
    background: var(--booking-white);
    border-radius: var(--booking-radius-xl);
    box-shadow: var(--booking-elevation-2);
    border: 1px solid var(--booking-border);
    transition: all var(--booking-transition-base);
}

.booking-sidebar:hover {
    box-shadow: var(--booking-elevation-3);
    transform: translateY(-1px);
}

/* Scrollbar styling for sidebar */
.booking-sidebar::-webkit-scrollbar {
    width: 6px;
}

.booking-sidebar::-webkit-scrollbar-track {
    background: var(--booking-gray-100);
    border-radius: var(--booking-radius-full);
}

.booking-sidebar::-webkit-scrollbar-thumb {
    background: var(--booking-gray-300);
    border-radius: var(--booking-radius-full);
}

.booking-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--booking-gray-400);
}

/* ==========================================================================
   BOOKING SUMMARY CARD STYLES
   ========================================================================== */

.booking-summary-card {
    background: var(--booking-surface);
    border-radius: var(--booking-radius-lg);
    padding: var(--booking-space-lg);
    margin-bottom: var(--booking-space-lg);
    border: 1px solid var(--booking-border);
    transition: all var(--booking-transition-base);
}

.booking-summary-card:hover {
    background: var(--booking-primary-bg);
    border-color: var(--booking-primary);
}

.summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--booking-space-lg);
    padding-bottom: var(--booking-space-md);
    border-bottom: 1px solid var(--booking-border);
}

.summary-title {
    font-size: var(--booking-text-lg);
    font-weight: var(--booking-font-semibold);
    color: var(--booking-text-primary);
    margin: 0;
}

.instant-booking-badge {
    display: flex;
    align-items: center;
    gap: var(--booking-space-xs);
    background: linear-gradient(135deg, var(--booking-warning) 0%, #f7941e 100%);
    color: var(--booking-white);
    padding: var(--booking-space-xs) var(--booking-space-sm);
    border-radius: var(--booking-radius-full);
    font-size: var(--booking-text-xs);
    font-weight: var(--booking-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    animation: pulse 2s ease-in-out infinite;
}

/* ==========================================================================
   PROPERTY INFO IN SIDEBAR
   ========================================================================== */

.summary-property {
    margin-bottom: var(--booking-space-lg);
    padding-bottom: var(--booking-space-lg);
    border-bottom: 1px solid var(--booking-border);
}

.property-image {
    width: 100%;
    height: 120px;
    border-radius: var(--booking-radius-lg);
    overflow: hidden;
    margin-bottom: var(--booking-space-md);
}

.property-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--booking-transition-base);
}

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

.property-details {
    display: flex;
    flex-direction: column;
    gap: var(--booking-space-sm);
    background-color: var(--bs-gray-800);
    color: rgba(229, 231, 235, 1);
    font-size: var(--booking-text-sm);
    line-height: 1.5;
}

/* Dark mode - property-details */
[data-theme="dark"] .property-details,
[data-theme="dark"] div.property-details,
[data-theme="dark"] .booking-sidebar .property-details,
[data-theme="dark"] .booking-summary-card .property-details,
[data-theme="dark"] .compact-section .property-details,
[data-theme="dark"] .property-header .property-details {
    color: var(--color-text-primary, #f9fafb) !important;
}

.property-details .property-location {
    color: var(--booking-text-secondary, #6b7280);
    font-size: var(--booking-text-sm);
    margin: 0;
}

[data-theme="dark"] .property-details .property-location {
    color: var(--color-text-secondary, #d1d5db) !important;
}

.property-title {
    font-size: var(--booking-text-base);
    font-weight: var(--booking-font-semibold);
    color: var(--booking-text-primary);
    margin: 0;
    line-height: 1.4;
}

.property-location {
    display: flex;
    align-items: center;
    gap: var(--booking-space-xs);
    font-size: var(--booking-text-sm);
    color: var(--booking-text-secondary, #6b7280);
    margin: 0;
}

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

.rating-stars {
    display: flex;
    align-items: center;
    gap: var(--booking-space-xs);
    color: var(--booking-warning);
    font-size: var(--booking-text-sm);
}

.rating-count {
    font-size: var(--booking-text-sm);
    color: var(--booking-text-muted);
}

/* ==========================================================================
   BOOKING DETAILS IN SIDEBAR
   ========================================================================== */

.summary-details {
    margin-bottom: var(--booking-space-lg);
    padding-bottom: var(--booking-space-lg);
    border-bottom: 1px solid var(--booking-border);
}

.details-title {
    font-size: var(--booking-text-lg);
    font-weight: var(--booking-font-semibold);
    color: var(--booking-text-primary);
    margin: 0 0 var(--booking-space-lg) 0;
    display: flex;
    align-items: center;
    gap: var(--booking-space-sm);
}

.details-title i {
    color: var(--booking-primary);
}

[data-theme="dark"] .details-title i {
    color: var(--accent-color, #d4af37) !important; /* Gold accent like property detail */
}

/* ==========================================================================
   ENHANCED STAY DETAILS GRID
   ========================================================================== */

.stay-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--booking-space-md);
}

.stay-detail-card {
    display: flex;
    align-items: flex-start;
    gap: var(--booking-space-sm);
    padding: var(--booking-space-md);
    background: linear-gradient(135deg, var(--booking-white) 0%, var(--booking-surface) 100%);
    border-radius: var(--booking-radius-lg);
    border: 1px solid var(--booking-border);
    transition: all var(--booking-transition-base);
    position: relative;
    overflow: hidden;
}

.stay-detail-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--booking-primary);
    transform: scaleY(0);
    transition: transform var(--booking-transition-base);
}

.stay-detail-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--booking-shadow-md);
    border-color: var(--booking-primary);
}

.stay-detail-card:hover::before {
    transform: scaleY(1);
    background: var(--booking-primary);
}

[data-theme="dark"] .stay-detail-card:hover::before {
    background: var(--accent-color, #d4af37) !important; /* Gold accent like property detail */
}

.stay-detail-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--booking-primary) 0%, var(--booking-primary-dark) 100%);
    color: var(--booking-white);
    border-radius: var(--booking-radius-md);
    font-size: var(--booking-text-lg);
}

.stay-detail-checkin .stay-detail-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.stay-detail-checkout .stay-detail-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.stay-detail-duration .stay-detail-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

[data-theme="dark"] .stay-detail-duration .stay-detail-icon {
    background: linear-gradient(135deg, var(--accent-color-dark, #b49225) 0%, var(--accent-color, #d4af37) 100%) !important; /* Gold gradient */
}

.stay-detail-guests .stay-detail-icon {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.stay-detail-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--booking-space-xs);
}

.stay-detail-label {
    font-size: var(--booking-text-xs);
    color: var(--booking-text-muted);
    font-weight: var(--booking-font-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stay-detail-value {
    font-size: var(--booking-text-base);
    color: var(--booking-text-primary);
    font-weight: var(--booking-font-semibold);
    line-height: 1.3;
}

.stay-detail-subtext {
    font-size: var(--booking-text-xs);
    color: var(--booking-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--booking-space-xs);
    margin-top: var(--booking-space-xs);
}

.stay-detail-subtext i {
    font-size: 10px;
    opacity: 0.7;
}

/* ==========================================================================
   DARK MODE - STAY DETAIL CARDS
   ========================================================================== */

[data-theme="dark"] .stay-detail-card {
    background: var(--color-background-secondary, #1f2937) !important; /* Match property detail */
    border-color: var(--color-border, #374151) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; /* Match property detail shadows */
}

[data-theme="dark"] .stay-detail-card:hover {
    background: var(--color-background-secondary, #1f2937) !important;
    border-color: var(--accent-color, #d4af37) !important; /* Gold border on hover */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important; /* Match property detail hover shadow */
}

[data-theme="dark"] .stay-detail-label {
    color: var(--color-text-secondary, #d1d5db) !important;
}

[data-theme="dark"] .stay-detail-value {
    color: var(--color-text-primary, #f9fafb) !important;
}

[data-theme="dark"] .stay-detail-subtext {
    color: var(--color-text-secondary, #d1d5db) !important;
}

[data-theme="dark"] .stay-detail-subtext i {
    opacity: 0.6;
}

/* Legacy detail-item styles (kept for backward compatibility) */
.detail-item {
    display: flex;
    flex-direction: column;
    gap: var(--booking-space-xs);
    margin-bottom: var(--booking-space-md);
    padding: var(--booking-space-sm);
    background: var(--booking-white);
    border-radius: var(--booking-radius-md);
    border: 1px solid var(--booking-border);
    transition: all var(--booking-transition-base);
}

.detail-item:hover {
    background: var(--booking-surface);
    border-color: var(--booking-primary);
}

.detail-item:last-child {
    margin-bottom: 0;
}

.detail-label {
    display: flex;
    align-items: center;
    gap: var(--booking-space-xs);
    font-size: var(--booking-text-sm);
    color: var(--booking-text-muted);
    font-weight: var(--booking-font-medium);
}

.detail-icon {
    color: var(--booking-primary);
    width: 14px;
    text-align: center;
}

.detail-value {
    font-size: var(--booking-text-base);
    color: var(--booking-text-primary);
    font-weight: var(--booking-font-semibold);
}

.detail-subtext {
    font-size: var(--booking-text-sm);
    color: var(--booking-text-secondary);
    font-style: italic;
}

/* ==========================================================================
   PRICING SECTION IN SIDEBAR
   ========================================================================== */

.summary-pricing {
    margin-bottom: var(--booking-space-lg);
    padding-bottom: var(--booking-space-lg);
    border-bottom: 1px solid var(--booking-border);
}

.pricing-title {
    font-size: var(--booking-text-base);
    font-weight: var(--booking-font-semibold);
    color: var(--booking-text-primary);
    margin: 0 0 var(--booking-space-md) 0;
}

.pricing-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--booking-space-sm);
    margin-bottom: var(--booking-space-md);
}

.pricing-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--booking-space-sm) 0;
    font-size: var(--booking-text-sm);
}

.pricing-label {
    color: var(--booking-text-secondary);
    flex: 1;
}

.pricing-value {
    color: var(--booking-text-primary);
    font-weight: var(--booking-font-medium);
}

.pricing-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--booking-space-md) 0;
    border-top: 2px solid var(--booking-border);
    font-weight: var(--booking-font-semibold);
}

.total-label {
    font-size: var(--booking-text-base);
    color: var(--booking-text-primary);
}

.total-value {
    font-size: var(--booking-text-lg);
    color: var(--booking-primary);
}

/* ==========================================================================
   ACTION BUTTONS IN SIDEBAR
   ========================================================================== */

.booking-continue-btn {
    width: 100%;
    padding: var(--booking-space-lg);
    background: linear-gradient(135deg, var(--booking-primary) 0%, var(--booking-primary-hover) 100%);
    border: none;
    border-radius: var(--booking-radius-lg);
    color: var(--booking-white);
    font-size: var(--booking-text-base);
    font-weight: var(--booking-font-semibold);
    cursor: pointer;
    transition: all var(--booking-transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--booking-space-sm);
    box-shadow: var(--booking-elevation-2);
    margin-bottom: var(--booking-space-md);
    text-transform: none;
    letter-spacing: normal;
}

.booking-continue-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--booking-primary-hover) 0%, var(--booking-primary) 100%);
    transform: translateY(-2px);
    box-shadow: var(--booking-elevation-4);
}

.booking-continue-btn:active {
    transform: translateY(0);
    box-shadow: var(--booking-elevation-1);
}

.booking-continue-btn:disabled {
    background: var(--booking-gray-300);
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

.booking-continue-btn i {
    font-size: var(--booking-text-sm);
}

/* Back link styling */
.booking-back-link {
    text-align: center;
    margin-bottom: var(--booking-space-lg);
}

.booking-back-link a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--booking-space-sm);
    color: var(--booking-text-secondary);
    text-decoration: none;
    font-size: var(--booking-text-sm);
    font-weight: var(--booking-font-medium);
    padding: var(--booking-space-sm);
    border-radius: var(--booking-radius-md);
    transition: all var(--booking-transition-base);
}

.booking-back-link a:hover {
    color: var(--booking-primary);
    background: var(--booking-primary-bg);
    text-decoration: none;
}

/* ==========================================================================
   IMPORTANT NOTES AND INFO
   ========================================================================== */

.summary-notes {
    margin-bottom: var(--booking-space-lg);
}

.note-item {
    display: flex;
    align-items: flex-start;
    gap: var(--booking-space-sm);
    padding: var(--booking-space-sm);
    margin-bottom: var(--booking-space-sm);
    border-radius: var(--booking-radius-md);
    font-size: var(--booking-text-sm);
    line-height: 1.4;
}

.note-item:last-child {
    margin-bottom: 0;
}

.note-item i {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    margin-top: 2px;
}

.note-info {
    background: var(--booking-primary-bg);
    color: var(--booking-primary);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .note-info {
    background: rgba(212, 175, 55, 0.15) !important; /* Gold background */
    color: var(--accent-color, #d4af37) !important; /* Gold text */
    border-color: rgba(212, 175, 55, 0.3) !important; /* Gold border */
}

.note-success {
    background: var(--booking-success-bg);
    color: var(--booking-success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.note-default {
    background: var(--booking-surface);
    color: var(--booking-text-secondary);
    border: 1px solid var(--booking-border);
}

.booking-info {
    text-align: center;
    padding: var(--booking-space-md);
    background: var(--booking-surface);
    border-radius: var(--booking-radius-lg);
    border: 1px solid var(--booking-border);
}

.info-text {
    font-size: var(--booking-text-sm);
    color: var(--booking-text-secondary);
    margin: 0 0 var(--booking-space-sm) 0;
}

.info-highlight {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--booking-space-sm);
    font-size: var(--booking-text-sm);
    color: var(--booking-success);
    font-weight: var(--booking-font-medium);
    margin: 0;
}

/* ==========================================================================
   HOST CONTACT SECTION
   ========================================================================== */

.summary-host {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--booking-space-md);
    background: var(--booking-surface);
    border-radius: var(--booking-radius-lg);
    border: 1px solid var(--booking-border);
    margin-bottom: var(--booking-space-lg);
}

.host-info {
    display: flex;
    align-items: center;
    gap: var(--booking-space-md);
}

.host-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--booking-radius-full);
    object-fit: cover;
}

.host-avatar-default {
    background: var(--booking-primary-bg);
    color: var(--booking-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--booking-text-sm);
}

.host-details {
    display: flex;
    flex-direction: column;
    gap: var(--booking-space-xs);
}

.host-name {
    font-size: var(--booking-text-base);
    font-weight: var(--booking-font-semibold);
    color: var(--booking-text-primary);
}

.host-label {
    font-size: var(--booking-text-sm);
    color: var(--booking-text-muted);
}

.contact-host-btn {
    padding: var(--booking-space-sm) var(--booking-space-md);
    background: var(--booking-primary);
    color: var(--booking-white);
    border: none;
    border-radius: var(--booking-radius-md);
    text-decoration: none;
    font-size: var(--booking-text-sm);
    font-weight: var(--booking-font-medium);
    transition: all var(--booking-transition-base);
    display: flex;
    align-items: center;
    gap: var(--booking-space-xs);
}

.contact-host-btn:hover {
    background: var(--booking-primary-hover);
    color: var(--booking-white);
    text-decoration: none;
    transform: translateY(-1px);
}

/* ==========================================================================
   RESPONSIVE DESIGN - MOBILE FIRST APPROACH
   ========================================================================== */

/* Tablet and Mobile Layout */
@media (max-width: 1023px) {
    .booking-sidebar {
        position: relative;
        top: auto;
        max-height: none;
        margin-top: var(--booking-space-lg);
        order: 1; /* Show sidebar first on mobile */
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Mobile Optimizations */
@media (max-width: 767px) {
    .booking-sidebar {
        /* Static positioning on mobile - in natural flow */
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        max-height: none;
        overflow-y: visible;

        /* Visual styling */
        padding: var(--booking-space-md);
        margin: var(--booking-space-lg) auto;
        border-radius: var(--booking-radius-xl);
        box-shadow: var(--booking-shadow-md);

        /* Layout */
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        z-index: auto;
    }
    
    .booking-summary-card {
        padding: var(--booking-space-md);
        margin: 0 auto var(--booking-space-md);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .booking-continue-btn {
        padding: var(--booking-space-lg) var(--booking-space-xl);
        font-size: var(--booking-text-base);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        position: relative;
        bottom: auto;
        z-index: auto;
        margin: var(--booking-space-lg) 0;
        min-height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--booking-space-sm);
    }
    
    .property-image {
        height: 180px;
        width: 100%;
        border-radius: var(--booking-radius-md);
    }
    
    .property-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* Enhanced stay details grid on mobile */
    .stay-details-grid {
        grid-template-columns: 1fr;
        gap: var(--booking-space-sm);
    }
    
    .stay-detail-card {
        padding: var(--booking-space-sm);
    }
    
    .stay-detail-icon {
        width: 36px;
        height: 36px;
        font-size: var(--booking-text-base);
    }
    
    .stay-detail-value {
        font-size: var(--booking-text-sm);
    }
    
    .summary-host {
        flex-direction: column;
        gap: var(--booking-space-md);
        text-align: center;
        padding: var(--booking-space-md);
    }
    
    .pricing-breakdown {
        gap: var(--booking-space-xs);
    }
    
    .pricing-item {
        padding: var(--booking-space-xs) 0;
        font-size: var(--booking-text-sm);
    }
    
    .pricing-total {
        padding: var(--booking-space-md) 0;
        font-size: var(--booking-text-base);
    }
    
    .summary-notes {
        margin-bottom: var(--booking-space-md);
    }
    
    .note-item {
        padding: var(--booking-space-sm);
        font-size: var(--booking-text-sm);
    }
    
    /* Fix detail items on mobile */
    .detail-item {
        padding: var(--booking-space-sm);
        margin-bottom: var(--booking-space-sm);
    }
    
    .detail-value {
        font-size: var(--booking-text-sm);
    }
    
    .detail-subtext {
        font-size: var(--booking-text-xs);
    }
}

/* iPhone 12 Pro and similar (390px) */
@media (max-width: 390px) {
    .booking-sidebar {
        padding: var(--booking-space-sm);
        margin: var(--booking-space-md) auto;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .booking-summary-card {
        padding: var(--booking-space-sm);
        margin: 0 auto var(--booking-space-md);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Extra Small Mobile */
@media (max-width: 479px) {
    .booking-sidebar {
        padding: var(--booking-space-sm);
        margin: var(--booking-space-md) auto;
        width: 100%;
        max-width: 100%;
    }
    
    .booking-summary-card {
        padding: var(--booking-space-sm);
        margin: 0 auto var(--booking-space-md);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .summary-title {
        font-size: var(--booking-text-base);
    }
    
    .property-title {
        font-size: var(--booking-text-sm);
        line-height: 1.3;
    }
    
    .property-location {
        font-size: var(--booking-text-xs);
    }
    
    .details-title,
    .pricing-title {
        font-size: var(--booking-text-sm);
        margin-bottom: var(--booking-space-sm);
    }
    
    .stay-details-grid {
        grid-template-columns: 1fr;
    }
    
    .stay-detail-card {
        padding: var(--booking-space-sm);
    }
    
    .stay-detail-icon {
        width: 32px;
        height: 32px;
        font-size: var(--booking-text-sm);
    }
}

/* ==========================================================================
   DARK MODE - COMPREHENSIVE FIXES
   ========================================================================== */

/* Main sidebar container */
[data-theme="dark"] .booking-sidebar {
    background: var(--color-background-secondary, #1f2937) !important; /* Match property detail sidebar */
    border-color: var(--color-border, #374151) !important;
    color: var(--color-text-primary, #f9fafb) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; /* Match property detail shadows */
}

/* Scrollbar styling for dark mode */
[data-theme="dark"] .booking-sidebar::-webkit-scrollbar-track {
    background: var(--booking-background);
}

[data-theme="dark"] .booking-sidebar::-webkit-scrollbar-thumb {
    background: var(--booking-border);
}

[data-theme="dark"] .booking-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--booking-border-hover);
}

/* Summary card */
[data-theme="dark"] .booking-summary-card {
    background: var(--color-background-secondary, #1f2937) !important; /* Match property detail */
    border-color: var(--color-border, #374151) !important;
}

[data-theme="dark"] .booking-summary-card:hover {
    background: var(--color-background-secondary, #1f2937) !important;
    border-color: var(--accent-color, #d4af37) !important; /* Gold border on hover */
}

/* Summary header */
[data-theme="dark"] .summary-header {
    border-bottom-color: var(--booking-border);
}

[data-theme="dark"] .summary-title {
    color: var(--color-text-primary, #f9fafb) !important;
}

/* Property section */
[data-theme="dark"] .summary-property {
    border-bottom-color: var(--color-border, #374151) !important;
    background: var(--color-background-secondary, #1f2937) !important; /* Match property detail */
}

/* Dark mode - property-title */
[data-theme="dark"] .property-title,
[data-theme="dark"] h4.property-title,
[data-theme="dark"] .booking-sidebar .property-title,
[data-theme="dark"] .booking-summary-card .property-title,
[data-theme="dark"] .compact-section .property-title,
[data-theme="dark"] .property-header .property-title {
    color: var(--color-text-primary, #f9fafb) !important;
}

[data-theme="dark"] .property-location {
    color: var(--color-text-secondary, #d1d5db) !important;
}

[data-theme="dark"] .rating-count {
    color: var(--booking-text-muted);
}

/* Booking details */
[data-theme="dark"] .summary-details {
    border-bottom-color: var(--booking-border);
}

[data-theme="dark"] .details-title {
    color: var(--color-text-primary, #f9fafb) !important;
}

[data-theme="dark"] .details-title i {
    color: var(--accent-color, #d4af37) !important; /* Gold accent like property detail */
}

[data-theme="dark"] .detail-item {
    background: var(--color-background-secondary, #1f2937) !important; /* Match property detail */
    border-color: var(--color-border, #374151) !important;
}

[data-theme="dark"] .detail-item:hover {
    background: var(--color-background-secondary, #1f2937) !important;
    border-color: var(--accent-color, #d4af37) !important; /* Gold border on hover */
}

[data-theme="dark"] .detail-label {
    color: var(--color-text-secondary, #d1d5db) !important;
}

[data-theme="dark"] .detail-icon {
    background: rgba(212, 175, 55, 0.2) !important; /* Gold background */
    color: var(--accent-color, #d4af37) !important; /* Gold icon */
}

[data-theme="dark"] .detail-value {
    color: var(--color-text-primary, #f9fafb) !important;
}

[data-theme="dark"] .detail-subtext {
    color: var(--color-text-secondary, #d1d5db) !important;
}

/* Pricing section */
[data-theme="dark"] .summary-pricing {
    border-bottom-color: var(--booking-border);
}

[data-theme="dark"] .pricing-title {
    color: var(--color-text-primary, #f9fafb) !important;
}

[data-theme="dark"] .pricing-label {
    color: var(--color-text-secondary, #d1d5db) !important;
}

[data-theme="dark"] .pricing-value {
    color: var(--color-text-primary, #f9fafb) !important;
}

[data-theme="dark"] .pricing-total {
    border-top-color: var(--color-border, #374151) !important;
}

[data-theme="dark"] .total-label {
    color: var(--color-text-primary, #f9fafb) !important;
}

[data-theme="dark"] .total-value {
    color: var(--accent-color, #d4af37) !important; /* Gold accent like property detail */
}

/* Action buttons */
[data-theme="dark"] .booking-continue-btn:disabled {
    background: var(--booking-border);
    color: var(--booking-text-muted);
}

[data-theme="dark"] .booking-back-link a {
    color: var(--booking-text-secondary);
}

[data-theme="dark"] .booking-back-link a:hover {
    color: var(--accent-color, #d4af37) !important; /* Gold accent like property detail */
    background: rgba(212, 175, 55, 0.1) !important; /* Gold background */
}

/* Notes section */
[data-theme="dark"] .note-info {
    background: var(--booking-info-bg);
    color: var(--booking-info);
    border-color: var(--booking-info-border);
}

[data-theme="dark"] .note-success {
    background: var(--booking-success-bg);
    color: var(--booking-success);
    border-color: var(--booking-success-border);
}

[data-theme="dark"] .note-default {
    background: var(--booking-background);
    color: var(--booking-text-secondary);
    border-color: var(--booking-border);
}

/* Booking info */
[data-theme="dark"] .booking-info {
    background: var(--booking-background);
    border-color: var(--booking-border);
}

[data-theme="dark"] .info-text {
    color: var(--booking-text-secondary);
}

[data-theme="dark"] .info-highlight {
    color: var(--booking-success);
}

/* Host section */
[data-theme="dark"] .summary-host {
    background: var(--booking-background);
    border-color: var(--booking-border);
}

[data-theme="dark"] .host-avatar-default {
    background: rgba(96, 165, 250, 0.1);
    color: var(--booking-primary);
}

[data-theme="dark"] .host-name {
    color: var(--booking-text-primary);
}

[data-theme="dark"] .host-label {
    color: var(--booking-text-muted);
}

[data-theme="dark"] .contact-host-btn {
    background: var(--booking-primary);
    color: var(--booking-white);
}

[data-theme="dark"] .contact-host-btn:hover {
    background: var(--booking-primary-hover);
    color: var(--booking-white);
}

/* Loading state */
[data-theme="dark"] .booking-sidebar.loading::after {
    background: rgba(0, 0, 0, 0.8);
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
    }
}

/* Loading state */
.booking-sidebar.loading {
    opacity: 0.7;
    pointer-events: none;
}

.booking-sidebar.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--booking-radius-xl);
    z-index: 100;
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .booking-sidebar {
        position: static;
        box-shadow: none;
        border: 1px solid #000;
        page-break-inside: avoid;
    }
    
    .booking-continue-btn,
    .booking-back-link,
    .contact-host-btn {
        display: none;
    }
}

/* ==========================================================================
   COMPACT SIDEBAR LAYOUT FIXES
   ========================================================================== */

@media (min-width: 1200px) {
    .booking-compact-sidebar {
        max-height: none !important;
        overflow-y: visible !important;
        position: sticky;
        top: var(--compact-space-2xl);
        z-index: 10;
        height: fit-content;
        min-height: auto;
    }
    
    .booking-compact-sidebar.force-scroll {
        max-height: calc(100vh - var(--compact-space-2xl) * 2);
        overflow-y: auto;
    }
}

@media (min-width: 1400px) {
    .booking-compact-sidebar {
        max-height: none !important;
        overflow-y: visible !important;
        padding: var(--compact-space-2xl);
    }
    
    .compact-booking-card {
        padding: var(--compact-space-2xl);
        margin-bottom: var(--compact-space-2xl);
    }
}

.booking-continue-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 56px !important;
    padding: var(--booking-space-lg) var(--booking-space-xl) !important;
    position: relative !important;
    z-index: 1 !important;
    margin: var(--booking-space-lg) 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--booking-space-sm) !important;
    background: linear-gradient(135deg, var(--booking-primary) 0%, var(--booking-primary-hover) 100%) !important;
    color: var(--booking-white) !important;
    border: none !important;
    border-radius: var(--booking-radius-lg) !important;
    font-size: var(--booking-text-base) !important;
    font-weight: var(--booking-font-semibold) !important;
    cursor: pointer !important;
    transition: all var(--booking-transition-base) !important;
    box-shadow: var(--booking-shadow-md) !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}

.booking-continue-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--booking-primary-hover) 0%, var(--booking-primary-dark) 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--booking-shadow-lg) !important;
}

.booking-continue-btn:active {
    transform: translateY(0) !important;
    box-shadow: var(--booking-shadow-sm) !important;
}

.booking-continue-btn:disabled {
    background: var(--booking-gray-300) !important;
    color: var(--booking-text-muted) !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    opacity: 0.6 !important;
}

.booking-compact-sidebar .compact-booking-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: var(--compact-space-lg) !important;
}

.booking-compact-sidebar .compact-pricing-summary {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: var(--compact-space-lg) !important;
}

.booking-compact-sidebar .booking-back-link {
    margin-top: var(--compact-space-lg) !important;
    margin-bottom: 0 !important;
}

.booking-compact-sidebar .booking-back-link a {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--booking-space-sm) !important;
    color: var(--booking-text-secondary) !important;
    text-decoration: none !important;
    font-size: var(--booking-text-sm) !important;
    padding: var(--booking-space-sm) var(--booking-space-md) !important;
    border-radius: var(--booking-radius-md) !important;
    transition: all var(--booking-transition-base) !important;
}

.booking-compact-sidebar .booking-back-link a:hover {
    color: var(--booking-primary) !important;
    background: var(--booking-primary-bg) !important;
    text-decoration: none !important;
}

@media (min-width: 768px) and (max-width: 1199px) {
    .booking-compact-sidebar {
        position: relative !important;
        top: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        padding: var(--compact-space-xl) !important;
    }
    
    .booking-continue-btn {
        padding: var(--booking-space-lg) var(--booking-space-xl) !important;
        min-height: 52px !important;
    }
}

@media (max-width: 767px) {
    .booking-compact-sidebar {
        position: relative !important;
        top: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        padding: var(--compact-space-lg) !important;
        margin: var(--compact-space-lg) 0 !important;
    }
    
    /* Ensure all buttons in sidebar are properly positioned in flow */
    .booking-compact-sidebar .btn-primary,
    .booking-compact-sidebar .btn.btn-primary,
    .booking-compact-sidebar button.btn-primary,
    .booking-compact-sidebar #continueBtn,
    .booking-compact-sidebar #submit-payment,
    .booking-sidebar .btn-primary,
    .booking-sidebar .btn.btn-primary,
    .booking-sidebar button.btn-primary,
    .booking-sidebar #continueBtn,
    .booking-sidebar #submit-payment,
    .booking-continue-btn {
        position: relative !important;
        width: 100% !important;
        margin: var(--booking-space-lg) 0 !important;
        padding: var(--booking-space-lg) var(--booking-space-xl) !important;
        min-height: 56px !important;
        font-size: var(--booking-text-base) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--booking-space-sm) !important;
        border-radius: var(--booking-radius-lg) !important;
    }
    
    .compact-booking-card {
        padding: var(--compact-space-lg) !important;
        margin-bottom: var(--compact-space-lg) !important;
    }
}

[data-theme="dark"] .booking-compact-sidebar {
    background: var(--color-background-secondary, #1f2937) !important; /* Match property detail sidebar */
    border-color: var(--color-border, #374151) !important;
    color: var(--color-text-primary, #f9fafb) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; /* Match property detail shadows */
}

[data-theme="dark"] .booking-compact-sidebar .compact-booking-card {
    background: var(--color-background-secondary, #1f2937) !important; /* Match property detail */
    border-color: var(--color-border, #374151) !important;
    color: var(--color-text-primary, #f9fafb) !important;
}

[data-theme="dark"] .booking-compact-sidebar .compact-pricing-summary {
    background: var(--color-background-secondary, #1f2937) !important; /* Match property detail */
    border-color: var(--color-border, #374151) !important;
    color: var(--color-text-primary, #f9fafb) !important;
}

[data-theme="dark"] .booking-compact-sidebar .booking-back-link a {
    color: var(--color-text-secondary, #d1d5db) !important;
}

[data-theme="dark"] .booking-compact-sidebar .booking-back-link a:hover {
    color: var(--accent-color, #d4af37) !important; /* Gold accent like property detail */
    background: rgba(212, 175, 55, 0.1) !important; /* Gold background */
}

[data-theme="dark"] .booking-continue-btn:disabled {
    background: var(--booking-border) !important;
    color: var(--booking-text-muted) !important;
}

.booking-compact-sidebar.auto-scroll {
    max-height: calc(100vh - var(--compact-space-2xl) * 2);
    overflow-y: auto;
}

.booking-compact-sidebar.no-scroll {
    max-height: none;
    overflow-y: visible;
}

/* ==========================================================================
   AIRBNB-STYLE DATE PICKER (Sidebar)
   ========================================================================== */

.airbnb-date-picker {
    width: 100%;
    margin-bottom: var(--booking-space-lg);
}

.date-picker-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--booking-border);
    border: 1px solid var(--booking-border);
    border-radius: var(--booking-radius-lg);
    overflow: hidden;
}

.date-picker-box {
    background: var(--booking-background);
    padding: var(--booking-space-md);
    cursor: pointer;
    transition: all var(--booking-transition-base);
}

.date-picker-box:hover {
    background: var(--booking-surface);
}

.date-picker-checkin {
    border-right: 1px solid var(--booking-border);
}

.date-picker-label {
    display: block;
    font-size: var(--booking-text-xs);
    font-weight: var(--booking-font-semibold);
    color: var(--booking-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--booking-space-1);
}

.date-picker-value {
    display: block;
    font-size: var(--booking-text-sm);
    color: var(--booking-text-secondary);
    font-weight: var(--booking-font-regular);
}

.date-picker-box.has-value .date-picker-value {
    color: var(--booking-text-primary);
    font-weight: var(--booking-font-medium);
}

/* Compact Summary Group */
.compact-summary-group {
    margin-bottom: var(--booking-space-lg);
}

.compact-form-label {
    display: block;
    font-size: var(--booking-text-sm);
    font-weight: var(--booking-font-semibold);
    color: var(--booking-text-primary);
    margin-bottom: var(--booking-space-sm);
}

.compact-guests-display {
    padding: var(--booking-space-md);
    background: var(--booking-surface);
    border: 1px solid var(--booking-border);
    border-radius: var(--booking-radius-lg);
}

.guest-count {
    font-size: var(--booking-text-base);
    font-weight: var(--booking-font-semibold);
    color: var(--booking-text-primary);
    margin-right: var(--booking-space-1);
}

.guest-label {
    font-size: var(--booking-text-sm);
    color: var(--booking-text-secondary);
}

/* Compact Pricing Summary */
.compact-pricing-summary {
    margin-top: var(--booking-space-lg);
    padding-top: var(--booking-space-lg);
    border-top: 1px solid var(--booking-border);
}

.compact-pricing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--booking-space-sm);
}

.compact-pricing-label {
    font-size: var(--booking-text-sm);
    color: var(--booking-text-secondary);
}

.compact-pricing-value {
    font-size: var(--booking-text-sm);
    font-weight: var(--booking-font-semibold);
    color: var(--booking-text-primary);
}

.compact-pricing-total {
    margin-top: var(--booking-space-md);
    padding-top: var(--booking-space-md);
    border-top: 1px solid var(--booking-border);
}

.compact-pricing-total .compact-pricing-label,
.compact-pricing-total .compact-pricing-value {
    font-size: var(--booking-text-base);
}

.pricing-divider {
    margin: var(--booking-space-md) 0;
    border: none;
    border-top: 1px solid var(--booking-border);
}

/* Airbnb Reserve Button */
.airbnb-reserve-btn {
    width: 100%;
    padding: var(--booking-space-md);
    background: var(--booking-primary);
    color: var(--booking-white);
    font-size: var(--booking-text-base);
    font-weight: var(--booking-font-semibold);
    border: none;
    border-radius: var(--booking-radius-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--booking-space-sm);
    transition: all var(--booking-transition-base);
    margin-top: var(--booking-space-lg);
}

.airbnb-reserve-btn:hover:not(:disabled) {
    background: var(--booking-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--booking-shadow-md);
}

.airbnb-reserve-btn:disabled {
    background: var(--booking-gray-300);
    color: var(--booking-gray-500);
    cursor: not-allowed;
    transform: none;
}

[data-theme="dark"] .airbnb-reserve-btn {
    background: linear-gradient(135deg, var(--accent-color-dark, #b49225) 0%, var(--accent-color, #d4af37) 100%) !important; /* Gold gradient */
    color: var(--color-text-primary, #f9fafb) !important;
    border: 1px solid var(--accent-color, #d4af37) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; /* Match property detail shadows */
}

[data-theme="dark"] .airbnb-reserve-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--accent-color, #d4af37) 0%, var(--accent-color-light, #e5c85a) 100%) !important; /* Lighter gold gradient */
    border-color: var(--accent-color-light, #e5c85a) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4) !important; /* Gold shadow on hover */
}

[data-theme="dark"] .airbnb-reserve-btn:disabled {
    background: var(--color-background-secondary, #1f2937) !important;
    color: var(--color-text-secondary, #6b7280) !important;
    border-color: var(--color-border, #374151) !important;
    opacity: 0.5;
}

.reserve-btn-icon {
    font-size: var(--booking-text-sm);
}

/* Booking Disclaimer */
.booking-disclaimer {
    margin-top: var(--booking-space-md);
    padding: var(--booking-space-sm);
    background: var(--booking-surface);
    border-radius: var(--booking-radius-md);
}

.disclaimer-text {
    font-size: var(--booking-text-xs);
    color: var(--booking-text-muted);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--booking-space-1);
}

/* Compact Booking Card */
.compact-booking-card {
    background: var(--booking-white);
    border-radius: var(--booking-radius-xl);
    overflow: hidden;
}

.compact-booking-header {
    padding: var(--booking-space-lg);
    border-bottom: 1px solid var(--booking-border);
}

.compact-price-display {
    margin-bottom: var(--booking-space-sm);
}

.compact-price-amount {
    font-size: var(--booking-text-2xl);
    font-weight: var(--booking-font-bold);
    color: var(--booking-primary);
}

.compact-price-period {
    font-size: var(--booking-text-sm);
    color: var(--booking-text-secondary);
    margin-left: var(--booking-space-1);
}

.compact-rating-display {
    display: flex;
    align-items: center;
    gap: var(--booking-space-1);
    font-size: var(--booking-text-sm);
    color: var(--booking-text-secondary);
}

.compact-rating-display .fa-star {
    color: var(--accent-color);
}

.compact-booking-body {
    padding: var(--booking-space-lg);
}

.compact-booking-footer {
    padding: var(--booking-space-lg);
    border-top: 1px solid var(--booking-border);
}

.compact-booking-info {
    text-align: center;
}

.compact-info-text {
    font-size: var(--booking-text-sm);
    color: var(--booking-text-secondary);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--booking-space-sm);
}

.compact-info-text .fa-shield-alt {
    color: var(--booking-success);
}

/* Dark Mode */
[data-theme="dark"] .airbnb-date-picker .date-picker-box {
    background: var(--booking-surface);
}

[data-theme="dark"] .airbnb-date-picker .date-picker-box:hover {
    background: var(--booking-background);
}

[data-theme="dark"] .compact-guests-display {
    background: var(--booking-background);
}

[data-theme="dark"] .compact-booking-card {
    background: var(--color-background-secondary, #1f2937) !important; /* Match property detail */
    border-color: var(--color-border, #374151) !important;
    color: var(--color-text-primary, #f9fafb) !important;
}

[data-theme="dark"] .compact-booking-header {
    background: var(--color-background-secondary, #1f2937) !important;
    border-bottom-color: var(--color-border, #374151) !important;
    color: var(--color-text-primary, #f9fafb) !important;
}

[data-theme="dark"] .compact-booking-body {
    background: var(--color-background-secondary, #1f2937) !important;
    color: var(--color-text-primary, #f9fafb) !important;
}

[data-theme="dark"] .compact-booking-footer {
    background: var(--color-background-secondary, #1f2937) !important;
    border-top-color: var(--color-border, #374151) !important;
    color: var(--color-text-primary, #f9fafb) !important;
}

[data-theme="dark"] .compact-price-amount {
    color: var(--accent-color, #d4af37) !important; /* Gold accent like property detail */
}

[data-theme="dark"] .compact-price-period {
    color: var(--color-text-secondary, #d1d5db) !important;
}

[data-theme="dark"] .compact-rating-display {
    color: var(--color-text-secondary, #d1d5db) !important;
}

[data-theme="dark"] .compact-info-text {
    color: var(--color-text-secondary, #d1d5db) !important;
}

[data-theme="dark"] .compact-summary-group {
    color: var(--color-text-primary, #f9fafb) !important;
}

[data-theme="dark"] .compact-form-label {
    color: var(--color-text-primary, #f9fafb) !important;
}

[data-theme="dark"] .compact-guests-display {
    background: var(--color-background-secondary, #1f2937) !important; /* Match property detail */
    border-color: var(--color-border, #374151) !important;
    color: var(--color-text-primary, #f9fafb) !important;
}

[data-theme="dark"] .guest-count {
    color: var(--color-text-primary, #f9fafb) !important;
}

[data-theme="dark"] .guest-label {
    color: var(--color-text-secondary, #d1d5db) !important;
}

[data-theme="dark"] .compact-pricing-row {
    color: var(--color-text-primary, #f9fafb) !important;
}

[data-theme="dark"] .compact-pricing-label {
    color: var(--color-text-secondary, #d1d5db) !important;
}

[data-theme="dark"] .compact-pricing-value {
    color: var(--color-text-primary, #f9fafb) !important;
}

[data-theme="dark"] .compact-pricing-total {
    border-top-color: var(--color-border, #374151) !important;
}

[data-theme="dark"] .compact-pricing-total .compact-pricing-label {
    color: var(--color-text-primary, #f9fafb) !important;
}

[data-theme="dark"] .compact-pricing-total .compact-pricing-value {
    color: var(--accent-color, #d4af37) !important; /* Gold accent like property detail */
}

[data-theme="dark"] .pricing-divider {
    border-top-color: var(--color-border, #374151) !important;
}

[data-theme="dark"] .booking-disclaimer {
    background: var(--color-background-secondary, #1f2937) !important; /* Match property detail */
    border-color: var(--color-border, #374151) !important;
}

[data-theme="dark"] .disclaimer-text {
    color: var(--color-text-secondary, #d1d5db) !important;
}

[data-theme="dark"] .airbnb-date-picker .date-picker-box {
    background: var(--color-background-secondary, #1f2937) !important; /* Match property detail */
    border-color: var(--color-border, #374151) !important;
    color: var(--color-text-primary, #f9fafb) !important;
}

[data-theme="dark"] .airbnb-date-picker .date-picker-box:hover {
    background: var(--color-background-secondary, #1f2937) !important;
    border-color: var(--accent-color, #d4af37) !important; /* Gold border on hover */
}

[data-theme="dark"] .date-picker-label {
    color: var(--color-text-secondary, #d1d5db) !important;
}

[data-theme="dark"] .date-picker-value {
    color: var(--color-text-secondary, #d1d5db) !important;
}

[data-theme="dark"] .date-picker-box.has-value .date-picker-value {
    color: var(--color-text-primary, #f9fafb) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .date-picker-row {
        grid-template-columns: 1fr;
    }

    .date-picker-checkin {
        border-right: none;
        border-bottom: 1px solid var(--booking-border);
    }
}