 
        :root { --primary: #398787; --dark: #082b35; --bg: #f8fafc; }
        body { font-family: 'Tajawal', sans-serif; background-color: var(--bg); color: var(--dark); }
        .glass { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.3); }
        .main-card { margin-top: -50px; border-radius: 45px 45px 0 0; box-shadow: 0 -20px 50px rgba(0,0,0,0.08); }
        .btn-hover { transition: all 0.3s ease; }
        .btn-hover:active { transform: scale(0.95); }
        .step-dot.active { background: var(--primary); width: 30px; }
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        #map { height: 250px; border-radius: 24px; z-index: 10; }
        
        @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
        .animate-slide-up { animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1); }

        /* ستايلات التقويم */
        .date-btn { transition: all 0.2s ease; }
        .date-btn:hover { transform: translateY(-2px); }
        .date-btn.selected { background: linear-gradient(135deg, #398787, #2a6b6b); color: white; box-shadow: 0 4px 12px rgba(57, 135, 135, 0.3); }
        .date-btn.booked { background: #fecaca; color: #991b1b; cursor: not-allowed; opacity: 0.5; }
        .date-btn.hold { background: #fef3c7; color: #92400e; cursor: not-allowed; opacity: 0.7; }
        .date-btn.disabled { background: #e5e7eb; color: #9ca3af; cursor: not-allowed; }
        .date-btn.available:hover { background: #e6f7f7; }
        
        /* ستايلات النجوم */
        .stars-container { display: inline-flex; direction: ltr; }
        .star { color: #d1d5db; cursor: pointer; font-size: 1.5rem; margin: 0 2px; }
        .star.active { color: #fbbf24; }
        .star.half-active { background: linear-gradient(to right, #fbbf24 50%, #d1d5db 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        
        /* ستايلات خطوة الحجز */
        .selected-dates-container { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
        .selected-date-chip { background: #e6f7f7; color: #398787; padding: 6px 12px; border-radius: 20px; font-size: 14px; display: flex; align-items: center; gap: 5px; }
        .remove-date { cursor: pointer; font-size: 12px; }
        
        /* ستايلات إدخال كود التأكيد */
        .code-input { 
            width: 60px; 
            height: 60px; 
            text-align: center; 
            font-size: 24px; 
            font-weight: bold;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            outline: none;
            transition: all 0.3s ease;
        }
        .code-input:focus { 
            border-color: #398787;
            box-shadow: 0 0 0 3px rgba(57, 135, 135, 0.1);
        }
        .code-input.filled { 
            border-color: #10b981;
            background-color: #f0fdf4;
        }
        
        /* ستايلات طرق الدفع */
        .payment-method { transition: all 0.3s ease; cursor: pointer; }
        .payment-method.selected { border-color: #398787; background-color: #f0fdf4; }
        .wallet-option { transition: all 0.2s ease; }
        .wallet-option.selected { background-color: #398787; color: white; }
   