.hotel-card { 
            background-color: var(--bs-card-bg);
            color: var(--bs-body-color);
            padding: 20px; 
            border-radius: 10px; 
            box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
            margin-top: 20px; 
            border: 1px solid var(--bs-border-color);
        }
        
        /* Dark mode adjustments */
        [data-bs-theme="dark"] .hotel-card {
            background-color: var(--bs-dark);
            border-color: var(--bs-border-color-translucent);
            box-shadow: 0 2px 10px rgba(255,255,255,0.1);
        }
        
        p { margin-bottom: 10px !important; }
        h5 { font-size: .8rem !important; }
        .star-rating { direction: rtl; display: inline-block; }
        .star-rating input { display: none; }
        .star-rating label { font-size: 30px; color: var(--bs-secondary-color); cursor: pointer; }
        .star-rating input:checked~label, .star-rating label:hover, .star-rating label:hover~label { color: #f0d35f; }
        .review-submit { width: 100%; padding: 10px; background-color: #0129ff; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; }
        .review-submit:hover { background-color: #001ec1; }
        
        /* Tab Styles with Dark Mode Support */
        .booking-tabs {
            background: var(--bs-card-bg);
            color: var(--bs-body-color);
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            overflow: hidden;
            border: 1px solid var(--bs-border-color);
        }
        
        [data-bs-theme="dark"] .booking-tabs {
            background: var(--bs-dark);
            border-color: var(--bs-border-color-translucent);
            box-shadow: 0 2px 10px rgba(255,255,255,0.1);
        }
        
        .tab-nav {
            display: flex;
            background: var(--bs-tertiary-bg);
            border-bottom: 1px solid var(--bs-border-color);
        }
        
        .tab-nav-item {
            flex: 1;
            text-align: center;
            padding: 15px 20px;
            cursor: pointer;
            border: none;
            background: transparent;
            font-weight: 500;
            color: var(--bs-secondary-color);
            transition: all 0.3s ease;
            position: relative;
        }
        
        .tab-nav-item:hover {
            background: var(--bs-secondary-bg);
            color: var(--bs-body-color);
        }
        
        .tab-nav-item.active {
            background: #c1372a;
            color: white;
        }
        
        .tab-nav-item .badge {
            background: #dc3545;
            color: white;
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 10px;
            margin-left: 5px;
        }
        
        .tab-nav-item.active .badge {
            background: rgba(255,255,255,0.2);
        }
        
        .tab-content {
            display: none;
            padding: 20px;
            min-height: 300px;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: var(--bs-secondary-color);
        }
        
        .empty-state img {
            max-width: 200px;
            margin-bottom: 20px;
            opacity: 0.7;
        }
        
        .tab-icon {
            margin-right: 8px;
        }
        
        /* Text color adjustments for dark mode */
        .text-secondary {
            color: var(--bs-secondary-color) !important;
        }
        
        /* Modal dark mode support */
        [data-bs-theme="dark"] .modal-content {
            background-color: var(--bs-dark);
            color: var(--bs-body-color);
            border-color: var(--bs-border-color-translucent);
        }
        
        [data-bs-theme="dark"] .modal-header {
            border-bottom-color: var(--bs-border-color-translucent);
        }
        
        @media (max-width: 768px) {
            .tab-nav {
                flex-direction: column;
            }
            
            .tab-nav-item {
                border-bottom: 1px solid var(--bs-border-color);
            }
            
            .tab-nav-item:last-child {
                border-bottom: none;
            }
        }