html { scroll-behavior: smooth; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Cairo', sans-serif; }
body { background-color: #f8f9fa; color: #333; display: flex; flex-direction: column; min-height: 100vh; touch-action: manipulation; padding-top: 80px;} 

/* الشريط العلوي */
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 5%; background-color: #ffffff; box-shadow: 0 2px 10px rgba(0,0,0,0.05); position: fixed; width: 100%; top: 0; z-index: 1000; height: 80px;}
.logo { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.nav-logo-img { max-height: 55px; width: auto; object-fit: contain; }
.nav-links { list-style: none; display: flex; gap: 25px; }
.nav-links a { text-decoration: none; color: #444; font-weight: 700; transition: color 0.3s; font-size: 0.95rem; }
.nav-links a:hover { color: #0056b3; }
.nav-actions { display: flex; gap: 10px; align-items: center; }

/* أيقونات السلة والإشعارات */
.cart-icon-wrapper { position: relative; font-size: 1.5rem; color: #333; cursor: pointer; margin-left: 15px; transition: 0.2s;}
.cart-icon-wrapper:hover { color: #0056b3; transform: scale(1.1);}
.cart-badge { position: absolute; top: -8px; right: -8px; background: #e74c3c; color: white; border-radius: 50%; width: 20px; height: 20px; font-size: 0.75rem; display: flex; justify-content: center; align-items: center; font-weight: bold;}

.login-btn { padding: 10px 20px; background-color: #0056b3; color: white; border: none; border-radius: 25px; font-weight: 700; cursor: pointer; transition: 0.3s; font-size: 0.9rem; }
.login-btn:hover { background-color: #004494; transform: translateY(-1px); }
.login-btn.logged-in { background-color: #1dd1a1; } 

.hamburger-menu { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 5px; z-index: 1001; }
.hamburger-menu span { width: 25px; height: 3px; background-color: #0056b3; border-radius: 3px; transition: 0.3s; }

/* القائمة الجانبية (الموبايل) */
.side-menu { position: fixed; top: 0; right: -300px; width: 280px; height: 100vh; background: #fff; box-shadow: -5px 0 15px rgba(0,0,0,0.1); z-index: 3000; transition: right 0.4s ease; display: flex; flex-direction: column; }
.side-menu.open { right: 0; }
.side-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2999; display: none; }
.side-menu-overlay.show { display: block; }
.close-side-menu { font-size: 2rem; color: #777; cursor: pointer; position: absolute; top: 15px; left: 20px; z-index: 1; }
.side-menu-header { padding: 30px 20px; border-bottom: 1px solid #eee; margin-top: 30px; text-align: center; display: flex; justify-content: center;}
.side-menu-logo-img { max-height: 50px; width: auto; object-fit: contain; }
.side-menu-links { list-style: none; padding: 10px 0; flex-grow: 1; overflow-y: auto;}
.side-menu-links li { border-bottom: 1px solid #f8f9fa; }
.side-menu-links a { display: block; padding: 15px 20px; text-decoration: none; color: #333; font-weight: 700; transition: 0.3s; text-align: right;}
.side-menu-links a:hover { background-color: #f0f8ff; color: #0056b3; }
.side-menu-footer { padding: 20px; background: #f8f9fa; text-align: center; border-top: 1px solid #eee; font-size: 0.9rem; color: #777;}

.social-icons-simple, .social-icons-f { display: flex; justify-content: center; gap: 15px; font-size: 1.5rem; margin-top: 10px; flex-wrap: wrap;}
.social-icons-f { justify-content: flex-start; }
.social-icons-simple a, .social-icons-f a { text-decoration: none; color: #777; transition: 0.3s; display: inline-block;}
.social-icons-simple a:hover .fa-facebook-f { color: #1877F2; transform: scale(1.1); }
.social-icons-simple a:hover .fa-instagram { color: #E4405F; transform: scale(1.1); }
.social-icons-simple a:hover .fa-x-twitter { color: #000; transform: scale(1.1); }
.social-icons-simple a:hover .fa-youtube { color: #FF0000; transform: scale(1.1); }
.social-icons-simple a:hover .fa-tiktok { color: #000; transform: scale(1.1); }

/* السلايدر الرئيسي */
.hero-section { height: 70vh; display: flex; justify-content: center; align-items: center; text-align: center; position: relative; margin-top: -80px; overflow: hidden;}
.hero-slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
.hero-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.5s ease-in-out; }
.hero-slide.active { opacity: 1; }
.hero-slider::after { content: ''; position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.4); z-index: 1;}

.hero-content { position: relative; z-index: 2; }
.hero-content h1 { font-size: 3.5rem; color: #ffffff; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); margin-bottom: 15px; font-weight: 900; }
.hero-content p { font-size: 1.2rem; color: #ffffff; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); margin-bottom: 30px; max-width: 600px; margin-left: auto; margin-right: auto;}
.explore-btn { padding: 15px 35px; font-size: 1.1rem; background-color: #ff6b6b; color: white; border: none; border-radius: 30px; cursor: pointer; font-weight: 900; box-shadow: 0 4px 15px rgba(255, 107, 107, 0.5); transition: 0.3s; }
.explore-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 107, 107, 0.8); }

/* شريط البحث */
.search-section { display: flex; justify-content: center; margin-top: 30px; position: relative; z-index: 10; padding: 0 20px;}
.search-box { background: #ffffff; padding: 20px 40px; border-radius: 50px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); display: flex; gap: 15px; align-items: stretch; border: 1px solid #eee; width: 100%; max-width: 900px; flex-wrap: nowrap;} 
.input-group { display: flex; flex-direction: column; text-align: right; width: 100%; margin-bottom: 15px;}
.search-box .input-group { flex: 1; margin-bottom: 0;}
.input-group label { font-weight: 700; margin-bottom: 5px; color: #555; font-size: 0.9rem; padding-right: 5px;}
.input-group input, .input-group textarea, .input-group select { padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-family: inherit; outline: none; transition: 0.3s; font-size: 16px !important; width: 100%;}
.input-group input:focus, .input-group textarea:focus, .input-group select:focus { border-color: #0056b3; box-shadow: 0 0 0 3px rgba(0,86,179,0.1);}

.suggestions-list { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #eee; border-radius: 10px; list-style: none; max-height: 200px; overflow-y: auto; z-index: 1000; display: none; box-shadow: 0 5px 15px rgba(0,0,0,0.1); margin-top: 5px; }
.suggestions-list li { padding: 12px 15px; cursor: pointer; font-size: 1rem; border-bottom: 1px solid #f8f9fa; text-align: right; transition: 0.2s;}
.suggestions-list li:hover { background-color: #f0f8ff; color: #0056b3; font-weight: bold; }
.search-btn { padding: 0 30px; background-color: #0056b3; color: white; border: none; border-radius: 30px; font-weight: 700; cursor: pointer; transition: 0.3s; font-size: 1rem; height: auto; display: flex; align-items: center; justify-content: center;}
.search-btn:hover { background-color: #004494; }
.search-btn.reset-btn { background-color: #e74c3c; padding: 0 25px; box-shadow: 0 4px 10px rgba(231, 76, 60, 0.2);}
.search-btn.reset-btn:hover { background-color: #c0392b; transform: scale(1.05);}

/* قسم الرحلات */
.tours-section { padding: 60px 5% 80px 5%; text-align: center; flex-grow: 1; }
.section-title { font-size: 2rem; color: #222; margin-bottom: 40px; font-weight: 900; }
.tours-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; justify-items: end; }
.tour-card { background: #ffffff; border-radius: 15px; overflow: hidden; box-shadow: 0 3px 15px rgba(0,0,0,0.04); transition: 0.3s; text-align: right; position: relative; border: 1px solid #eee; display: flex; flex-direction: column; width: 100%; max-width: 400px;}
.tour-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.tour-image { height: 220px; background-size: cover; background-position: center; background-color: #f4f4f4; background-repeat: no-repeat; }
.tour-info { padding: 20px; flex-grow: 1; display: flex; flex-direction: column;}
.tour-info h3 { color: #222; margin-bottom: 8px; font-size: 1.25rem; font-weight: 700; }
.tour-info p { color: #666; font-size: 0.9rem; line-height: 1.6; margin-bottom: 15px; height: 4.8em; overflow: hidden;}
.price-book { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #eee; padding-top: 15px; margin-top: auto;}
.book-btn { padding: 10px 20px; background-color: #1dd1a1; color: white; border: none; border-radius: 20px; cursor: pointer; font-weight: bold; transition: 0.3s; width: 100%; font-size: 1.1rem; }
.book-btn:hover { background-color: #10ac84; }

.admin-actions { display: flex; gap: 8px; margin-top: 12px; border-top: 1px dashed #ddd; padding-top: 12px; }
.admin-action-btn { flex: 1; padding: 7px; border: none; border-radius: 5px; color: white; cursor: pointer; font-weight: bold; font-family: inherit; transition: 0.2s; font-size: 0.8rem;}
.btn-edit { background-color: #f39c12; }
.btn-delete { background-color: #e74c3c; }

/* النوافذ الأساسية */
.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; backdrop-filter: blur(2px); padding: 20px; }
.modal-content { background-color: #fff; padding: 30px; border-radius: 12px; width: 100%; max-width: 400px; position: relative; text-align: right; box-shadow: 0 10px 30px rgba(0,0,0,0.15); animation: fadeInModal 0.3s ease; max-height: 90vh; overflow-y: auto; }
@keyframes fadeInModal { from { opacity: 0; transform: translateY(-15px); } to { opacity: 1; transform: translateY(0); } }
.close-btn { position: absolute; top: 12px; left: 15px; font-size: 24px; font-weight: bold; color: #aaa; cursor: pointer; transition: 0.2s; z-index: 10;}
.close-btn:hover { color: #ff6b6b; }
.submit-btn { width: 100%; padding: 12px; background-color: #1dd1a1; color: white; border: none; border-radius: 8px; font-size: 1.05rem; font-weight: bold; cursor: pointer; transition: 0.3s; margin-top: 10px; }
.submit-btn:hover { background-color: #10ac84; }
.submit-btn:disabled { background-color: #bdc3c7; cursor: not-allowed; }

.divider { text-align: center; margin: 15px 0; color: #bbb; position: relative; font-size: 0.9rem; font-weight: bold;}
.divider::before, .divider::after { content: ""; position: absolute; top: 50%; width: 40%; height: 1px; background-color: #eee; }
.divider::before { left: 0; }
.divider::after { right: 0; }

/* تسجيل الدخول */
.auth-content { max-width: 450px; padding: 40px; border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.2); border: 1px solid #eee;}
.auth-content #modal-title { font-size: 1.8rem; color: #2c3e50; font-weight: 900; margin-bottom: 25px; text-align: center;}
.auth-content .input-group { margin-bottom: 20px; }
.auth-content label { font-size: 0.95rem; margin-bottom: 8px; color: #555; font-weight: bold;}
.auth-content input { padding: 14px; border-radius: 10px; background-color: #fcfcfc; border: 2px solid #eee; transition: all 0.3s ease; font-size: 1rem !important;}
.auth-content input:focus { background-color: #fff; border-color: #1dd1a1; box-shadow: 0 0 0 4px rgba(29, 209, 161, 0.1); }
.auth-content .submit-btn { padding: 14px; font-size: 1.1rem; border-radius: 10px; background-color: #1dd1a1; margin-top: 10px; box-shadow: 0 4px 15px rgba(29, 209, 161, 0.3);}
.auth-content .submit-btn:hover { background-color: #10ac84; transform: translateY(-2px);}
.google-btn { width: 100%; padding: 14px; background-color: #fff; color: #333; border: 2px solid #eee; border-radius: 10px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 10px;}
.google-btn:hover { background-color: #f9f9f9; border-color: #ccc; }
.signup-link { text-align: center; margin-top: 20px; font-size: 0.95rem; color: #777; }
.signup-link a { color: #0056b3; text-decoration: none; font-weight: bold; transition: color 0.3s; }

/* إدارة الحساب */
.profile-riot-style { max-width: 1000px !important; padding: 0; display: flex; overflow: hidden; height: 80vh; flex-direction: row;}
.profile-sidebar { width: 280px; background: #1a252f; color: white; padding: 30px 20px; display: flex; flex-direction: column;}
.profile-tabs { list-style: none; margin-top: 20px; flex-grow: 1;}
.profile-tabs li { padding: 15px; margin-bottom: 5px; cursor: pointer; border-radius: 8px; transition: 0.3s; font-weight: bold; color: #bdc3c7; display:block;} 
.profile-tabs li i { margin-left: 10px; width: 20px; text-align: center;}
.profile-tabs li:hover { background: rgba(255,255,255,0.1); color: #fff;}
.profile-tabs li.active { background: #3498db; color: #fff;}
.profile-main { flex: 1; padding: 40px; overflow-y: auto; background: #ecf0f1; position: relative;}
.prof-tab-content { display: none; animation: fadeInModal 0.3s ease;}
.prof-tab-content.active { display: block !important;} 

#profile-region::-webkit-calendar-picker-indicator { display: none !important; opacity: 0; }
#profile-region { background-color: #fff; cursor: text; border: 1px solid #ddd; border-radius: 8px; padding: 12px; transition: 0.3s;}
#profile-region:focus { border-color: #0056b3; box-shadow: 0 0 0 3px rgba(0,86,179,0.1); }

/* تبويبات الإدارة */
.admin-tabs, .notif-tabs-container { display: flex; gap: 10px; margin-bottom: 25px; border-bottom: 2px solid #eee; padding-bottom: 15px; flex-wrap: wrap; justify-content: center;}
.admin-tab, .notif-tab { flex: 1; min-width: 120px; padding: 12px 15px; background: #f8f9fa; border: 1px solid #ddd; border-radius: 8px; cursor: pointer; font-weight: bold; transition: 0.3s; font-family: inherit; font-size: 1rem; color: #555; text-align: center;}
.admin-tab:hover, .notif-tab:hover { background: #e0f2fe; }
.admin-tab.active, .notif-tab.active { background: #0056b3; color: #fff; border-color: #0056b3;}
.notif-content-area { display: none; animation: fadeInModal 0.3s ease;}
.notif-content-area.active { display: block !important;}
.notif-list-scroll { max-height: 400px; overflow-y: auto; padding-right: 5px;}

/* إدارة الفنادق */
.duration-row { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 12px; background: #fff; padding: 15px; border-radius: 8px; border: 1px solid #e0e0e0; box-shadow: 0 2px 5px rgba(0,0,0,0.02);}
.duration-row .input-group { margin: 0; }
.duration-row input { padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-family: inherit; font-size: 15px;}
.admin-hotel-block { background: #fff; padding: 25px; border: 1px solid #ddd; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.03);}
.hotel-header-inputs { display: flex; gap: 15px; margin-bottom: 15px; flex-wrap: wrap;}
.hotel-header-inputs input { padding: 12px; border-radius: 8px; border: 1px solid #ddd; font-family: inherit; font-size: 15px;}
.h-amenities { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; background: #f8f9fa; padding: 15px; border-radius: 8px; border: 1px solid #eee;}
.h-amenities label { cursor: pointer; font-size: 1rem; color: #333; font-weight: 700; display: flex; align-items: center; gap: 8px;}
.h-amenities input[type="checkbox"] { transform: scale(1.3); cursor: pointer; accent-color: #1dd1a1;}
.h-rooms-table { width: 100%; border-collapse: collapse; margin-bottom: 15px; background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid #eee;}
.h-rooms-table th { background: #2c3e50; color: #fff; padding: 12px; font-size: 0.95rem; text-align: center;}
.h-rooms-table td { padding: 10px; border-bottom: 1px solid #eee; text-align: center; background: #fafafa;}
.h-rooms-table input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; text-align: center; font-family: inherit; font-size: 14px;}
.h-rooms-table input:focus { border-color: #0056b3; outline: none; }
.remove-row-btn { background-color: #ff6b6b; color: white; border: none; padding: 8px 15px; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 0.9rem; transition: 0.2s;}

.editor-toolbar { display: flex; gap: 5px; background: #f8f9fa; padding: 8px 10px; border: 1px solid #ddd; border-bottom: none; border-radius: 8px 8px 0 0; flex-wrap: wrap;}
.editor-btn { background: #fff; border: 1px solid #ccc; border-radius: 4px; padding: 5px 10px; cursor: pointer; color: #444; font-size: 0.9rem; transition: 0.2s;}
.editor-btn:hover { background: #e0f2fe; border-color: #0056b3; color: #0056b3;}
.editor-separator { width: 1px; background: #ddd; margin: 0 5px; }

/* شريط البحث للإدارة */
.search-bar-elegant { display: flex; align-items: center; background: #fff; border: 2px solid #eee; border-radius: 30px; padding: 5px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: 0.3s; }
.search-bar-elegant:focus-within { border-color: #1dd1a1; box-shadow: 0 4px 20px rgba(29, 209, 161, 0.15); }
.search-bar-elegant .search-icon { padding: 0 15px; color: #aaa; font-size: 1.2rem;}
.search-bar-elegant input { flex: 1; border: none; outline: none; padding: 10px 5px; font-size: 1rem; font-family: inherit; background: transparent;}
.search-bar-elegant button { background: #1dd1a1; color: #fff; border: none; border-radius: 25px; padding: 10px 25px; font-weight: bold; cursor: pointer; transition: 0.3s; font-family: inherit; font-size: 1rem;}

/* الدعم الفني */
.support-layout { display: flex; height: 500px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background: #fff;}
.tickets-sidebar { width: 35%; background: #f9f9f9; border-left: 1px solid #ddd; display: flex; flex-direction: column;}
.tickets-list { flex-grow: 1; overflow-y: auto; }
.ticket-item { padding: 15px; border-bottom: 1px solid #eee; cursor: pointer; transition: 0.2s;}
.ticket-item:hover, .ticket-item.active { background-color: #e0f2fe; }
.ticket-item h5 { color: #0056b3; font-size: 0.9rem; margin-bottom: 5px; display: flex; justify-content: space-between; align-items: center;}
.ticket-item p { font-size: 0.8rem; color: #777; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ticket-status { display: inline-block; padding: 2px 5px; border-radius: 4px; font-size: 0.7rem; color: white;}
.status-open { background-color: #1dd1a1; }
.status-closed { background-color: #e74c3c; }

.chat-area { width: 65%; display: flex; flex-direction: column; background: #fff;}
.chat-header { padding: 15px; background: #f1f2f6; border-bottom: 1px solid #ddd; font-weight: bold; color: #333; text-align: center;}
.chat-messages { flex-grow: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;}
.msg-bubble { max-width: 75%; padding: 10px 15px; border-radius: 15px; font-size: 0.9rem; line-height: 1.4;}
.msg-user { background-color: #f1f2f6; align-self: flex-start; border-bottom-right-radius: 0;}
.msg-admin { background-color: #0056b3; color: white; align-self: flex-end; border-bottom-left-radius: 0;}
.chat-controls { padding: 15px; border-top: 1px solid #ddd; display: flex; gap: 10px; flex-wrap: wrap;}
.chat-controls input { flex-grow: 1; padding: 10px; border: 1px solid #ccc; border-radius: 20px; font-family: inherit;}

/* الإشعارات */
.notif-item-box { padding: 15px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; background: #fdfdfd; transition: 0.3s; border-radius: 8px; margin-bottom: 8px;}
.notif-item-box:hover { background: #f0f8ff; }
.notif-btn-goto { background: #3498db; color: white; border: none; padding: 5px 12px; border-radius: 5px; font-size: 0.8rem; cursor: pointer; transition: 0.2s;}
.notif-btn-goto:hover { background: #2980b9; }
.notif-btn-delete { background: #fff0f0; color: #e74c3c; border: 1px solid #ffcccc; padding: 5px 10px; border-radius: 5px; font-size: 0.8rem; cursor: pointer; transition: 0.2s; margin-left: 5px;}
.notif-btn-delete:hover { background: #ff7675; color: white; border-color: #ff7675; }

/* الدعم للزبائن */
.floating-support-btn { position: fixed; bottom: 20px; right: 20px; background-color: #e67e22; color: white; padding: 15px 25px; border-radius: 30px; font-size: 1.1rem; font-weight: bold; border: none; cursor: pointer; box-shadow: 0 4px 15px rgba(230, 126, 34, 0.4); z-index: 1999; transition: 0.3s; font-family: inherit;}
.floating-support-btn:hover { background-color: #d35400; transform: translateY(-3px);}

/* معرض الصور */
.booking-gallery { display: grid; gap: 5px; margin-bottom: 20px; border-radius: 15px; overflow: hidden; height: 350px;}
.bg-single { grid-template-columns: 1fr; }
.bg-grid { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.gal-img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; transition: 0.3s;}
.gal-img:hover { filter: brightness(0.9); }
.gal-main { grid-row: span 2; }
.gal-more-wrapper { position: relative; }
.gal-more-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.6); color: white; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; font-weight: bold; cursor: pointer;}
.booking-hero-img { width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat;}

/* جداول الغرف */
.rooms-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05); text-align: center;}
.rooms-table th { background: #0056b3; color: white; padding: 12px; font-size: 0.9rem;}
.rooms-table td { padding: 12px; border-bottom: 1px solid #eee; font-weight: bold; color: #444;}
.rooms-table tr:hover { background: #f0f8ff; }
.rooms-table input[type="radio"] { transform: scale(1.5); cursor: pointer;}
.sold-out-text { color: #e74c3c; font-size: 0.8rem; font-weight: bold; }

/* شاشة الحجز Overlay */
.full-page-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #f8f9fa; z-index: 2500; overflow-y: auto; animation: slideUpPage 0.4s ease forwards; }
@keyframes slideUpPage { from { transform: translateY(100%); } to { transform: translateY(0); } }
.close-full-page { position: fixed; top: 15px; left: 15px; font-size: 0.9rem; font-weight: bold; color: #333; background: rgba(255,255,255,0.9); padding: 8px 18px; border-radius: 20px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 2510; transition: 0.2s; border: 1px solid #eee; }
.close-full-page:hover { background: #ff6b6b; color: #fff; border-color: #ff6b6b;}
.booking-page-layout { display: flex; flex-wrap: wrap; min-height: 100vh; padding-top: 60px; flex-direction: row-reverse;} 
.booking-details-side { flex: 1.5; background: #fff; padding: 40px 5%; text-align: right; border-left: 1px solid #eee; }
.booking-form-side { flex: 1; padding: 40px 5%; display: flex; flex-direction: column; justify-content: center; background-color: #ffffff; text-align: right;}
#booking-page-title { font-size: 2.2rem; color: #0056b3; margin-bottom: 10px; font-weight: 900; }
.booking-desc { font-size: 1rem; color: #555; line-height: 1.7; margin-bottom: 25px; }
.booking-info-badge { display: inline-block; background: #e0f2fe; color: #0369a1; padding: 8px 15px; border-radius: 8px; font-weight: bold; font-size: 0.95rem; margin-left: 8px; margin-bottom: 8px;}
.bh-amenity-badge { background: #e8f5e9; color: #27ae60; padding: 5px 10px; border-radius: 20px; font-size: 0.85rem; font-weight: bold; border: 1px solid #c8e6c9;}
.estimated-price-box { background-color: #f9f9f9; border: 2px dashed #1dd1a1; padding: 20px; text-align: center; border-radius: 12px; margin: 25px 0; font-size: 1.1rem; color: #333;}

/* الأسماء والسلة */
.passenger-input-box { background: #f8f9fa; padding: 15px; border-radius: 10px; border: 1px solid #eee; margin-bottom: 10px;}
.passenger-input-box label { font-weight: bold; color: #0056b3; margin-bottom: 5px; display: block;}
.passenger-input-box input { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #ccc; font-family: inherit; font-size: 1rem;}

.cart-item-block { border: 1px solid #eee; padding: 20px; border-radius: 12px; margin-bottom: 15px; background: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.02);}
.cart-item-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; border-bottom: 1px solid #f8f9fa; padding-bottom: 15px;}
.name-pile-block { display: inline-flex; align-items: center; gap: 8px; background: #e0f2fe; padding: 5px 12px; border-radius: 15px; border: 1px solid #bae6fd; font-size: 0.9rem; font-weight: bold; color: #0369a1; margin-left: 5px; margin-bottom: 5px;}

/* الصفحات الديناميكية */
.dynamic-page-modal .dynamic-page-content { max-width: 900px; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.dynamic-page-modal #close-dynamic-page { top: 15px; left: 20px; color: #fff; background: #ff6b6b; padding: 5px 12px; border-radius: 15px; font-size: 0.85rem; font-weight: bold; z-index: 10; }
.page-layout { display: flex; min-height: 500px; height: 80vh; }
.page-sidebar { width: 220px; background-color: #f8f9fa; border-left: 1px solid #eee; padding: 40px 15px; display: flex; flex-direction: column; }
.page-sidebar-title { color: #0056b3; font-size: 1.1rem; margin-bottom: 20px; text-align: center; font-weight: 900; }
.page-sidebar-links { list-style: none; }
.page-sidebar-links li { margin-bottom: 5px; }
.page-sidebar-links a { display: block; padding: 12px 15px; text-decoration: none; color: #444; font-weight: 700; border-radius: 8px; transition: 0.2s; font-size: 0.9rem; }
.page-sidebar-links a:hover, .page-sidebar-links a.active { background-color: #e0f2fe; color: #0056b3; }
.page-main-content { flex: 1; padding: 40px 30px; overflow-y: auto; text-align: right; }
.page-main-content h1 { font-size: 2rem; color: #222; margin-bottom: 25px; font-weight: 900; border-bottom: 2px solid #1dd1a1; display: inline-block; padding-bottom: 5px; }
.page-body { font-size: 1rem; color: #555; line-height: 1.8; }
.page-body h3 { color: #0056b3; margin-top: 20px; margin-bottom: 10px; font-weight: 700;}
.page-body p { margin-bottom: 15px; }
.page-body ul { margin-right: 20px; margin-bottom: 15px; list-style-type: disc;}
.page-body li { margin-bottom: 5px;}

/* التذييل السفلي (Footer) */
.site-footer { background-color: #ffffff; border-top: 1px solid #eee; color: #333; padding: 60px 5% 20px 5%; margin-top: auto; }
.footer-container { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-column h4 { color: #0056b3; margin-bottom: 20px; font-weight: 900; font-size: 1.1rem; }
.footer-column ul { list-style: none; }
.footer-column ul li { margin-bottom: 10px; }
.footer-column ul li a { text-decoration: none; color: #666; font-weight: 700; transition: 0.2s; font-size: 0.9rem; }
.footer-column ul li a:hover { color: #0056b3; padding-right: 5px; }
.footer-brand p { font-size: 0.9rem; color: #777; line-height: 1.6; margin-bottom: 20px; max-width: 320px; }
.footer-logo-img { max-height: 60px; width: auto; object-fit: contain; margin-bottom: 15px; }
.footer-bottom { text-align: center; border-top: 1px solid #eee; padding-top: 20px; font-size: 0.85rem; color: #aaa; }

.mobile-bottom-nav { display: none; }

/* الموبايل */
@media (max-width: 768px) {
    body { padding-bottom: 70px; padding-top: 70px; } 
    .navbar { padding: 10px 15px; flex-wrap: nowrap; height: 70px; justify-content: space-between; }
    .hamburger-menu { display: flex; order: 1; }
    .logo { order: 2; flex-grow: 1; display: flex; justify-content: center; }
    .nav-logo-img { max-height: 40px; }
    .nav-actions { order: 3; gap: 5px; } 
    .login-btn { padding: 6px 12px; font-size: 0.8rem; }
    .desktop-only, .desktop-only-footer { display: none !important; }
    
    .hero-section { height: 50vh; margin-top: -70px; }
    .hero-content h1 { font-size: 1.8rem; }
    .hero-content p { font-size: 0.9rem; padding: 0 10px;}
    
    .search-section { padding: 0 10px; margin-top: -20px; }
    .search-box { flex-direction: row; flex-wrap: nowrap; padding: 10px 15px; width: 100%; gap: 10px; border-radius: 15px; align-items: stretch;}
    .search-box .input-group { min-width: 0; margin-bottom: 0; }
    .search-box .input-group input { padding: 10px; font-size: 0.9rem !important; border-radius: 8px;}
    .search-btn { padding: 0 15px; font-size: 0.9rem; border-radius: 8px; white-space: nowrap; margin-right: 0;}
    
    .tours-section { padding: 40px 10px 60px 10px; }
    .section-title { font-size: 1.6rem; margin-bottom: 30px; }
    .tours-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .tour-card { max-width: none; }
    .tour-image { height: 140px; }
    .tour-info { padding: 12px; }
    .tour-info h3 { font-size: 0.9rem; }
    .tour-info p { font-size: 0.75rem; height: 3.6em; margin-bottom: 8px; }
    .book-btn { font-size: 0.85rem; padding: 8px 12px; }
    .admin-action-btn { font-size: 0.7rem; padding: 5px; }
    .wishlist-btn { width: 32px; height: 32px; font-size: 0.9rem; top: 8px; left: 8px; }
    
    .admin-only-btn { display: none !important; }
    
    .modal { padding: 5px; }
    .modal-content { padding: 20px 12px; width: 100%; max-height: 92vh; border-radius: 15px; }
    .close-btn { top: 8px; left: 8px; font-size: 22px; background: rgba(0,0,0,0.08); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
    
    .profile-riot-style { flex-direction: column; height: 92vh; overflow-y: auto; border-radius: 15px; }
    .profile-sidebar { width: 100%; padding: 15px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
    .profile-sidebar > div:first-child { display: flex; align-items: center; gap: 10px; width: 100%; text-align: right; }
    .profile-sidebar > div:first-child > div:first-child { width: 45px; height: 45px; font-size: 1.1rem; margin: 0; flex-shrink: 0; }
    .profile-sidebar > div:first-child h4 { margin: 0; font-size: 1rem; }
    .profile-sidebar > div:first-child p { margin: 0; }
    .profile-tabs { display: flex; overflow-x: auto; white-space: nowrap; gap: 6px; margin-top: 5px; width: 100%; -webkit-overflow-scrolling: touch; }
    .profile-tabs li { margin-bottom: 0; padding: 8px 12px; font-size: 0.8rem; border-radius: 20px; background: rgba(255,255,255,0.15); }
    .profile-tabs li.active { background: #3498db; }
    .profile-tabs li i { margin-left: 5px; }
    #logout-btn { width: auto; padding: 8px 20px; margin: 0; font-size: 0.8rem; border-radius: 20px; order: 99; }
    .profile-main { padding: 15px 12px; }
    .profile-main .close-btn { top: -60px; left: 5px; color: #fff; background: rgba(255,255,255,0.25); }

    .admin-tabs { flex-direction: column; gap: 5px; }
    .admin-tab { min-width: 100%; padding: 10px; }

    .booking-page-layout { flex-direction: column; padding-top: 50px;} 
    .booking-details-side { border-left: none; border-bottom: 1px solid #eee; padding: 25px 15px; order: 1; }
    .booking-form-side { padding: 25px 15px; order: 2; }
    .close-full-page { top: 10px; left: 10px; padding: 6px 14px; font-size: 0.8rem;}
    
    .mobile-bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #ffffff; display: flex; justify-content: space-around; align-items: center; padding: 10px 0; box-shadow: 0 -3px 10px rgba(0,0,0,0.08); z-index: 1000; border-radius: 15px 15px 0 0; border-top: 1px solid #eee; }
    .mobile-nav-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #666; font-size: 0.75rem; font-weight: 700; cursor: pointer; flex: 1; text-align: center; border: none; background: none; }
    .mobile-nav-item.active { color: #0056b3; }
    .mobile-nav-item-icon { font-size: 1.25rem; margin-bottom: 2px; }
    
    .support-layout { flex-direction: column; height: 75vh; }
    .tickets-sidebar { width: 100%; height: 30%; border-left: none; border-bottom: 1px solid #ddd; }
    .chat-area { width: 100%; height: 70%; }
    .floating-support-btn { bottom: 80px; padding: 10px 20px; font-size: 0.9rem; right: 10px;}

    .dynamic-page-modal .page-layout { flex-direction: column; height: auto; }
    .dynamic-page-modal .page-sidebar { width: 100%; border-left: none; border-bottom: 1px solid #eee; padding: 15px; flex-direction: row; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .page-sidebar-title { display: none; } 
    .page-sidebar-links { display: flex; gap: 5px; padding: 0; }
    .page-sidebar-links li { margin-bottom: 0; flex-shrink: 0; }
    .page-sidebar-links a { padding: 8px 12px; font-size: 0.8rem; }
    .page-main-content { padding: 20px 15px 40px 15px; overflow-y: visible; height: auto; }
    .page-main-content h1 { font-size: 1.5rem; margin-bottom: 15px; }
}

/* التنبيهات */
#toast-container { position: fixed; bottom: 20px; left: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { background-color: #333; color: #fff; padding: 15px 25px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); font-size: 1rem; display: flex; align-items: center; gap: 10px; animation: slideInLeft 0.3s ease forwards; }
.toast.success { background-color: #1dd1a1; }
.toast.error { background-color: #ff6b6b; }
.toast.info { background-color: #0056b3; }
.toast.fade-out { animation: fadeOutToast 0.4s ease forwards; }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeOutToast { to { opacity: 0; transform: translateY(20px); } }

/* زر المفضلة (القلب) */
.wishlist-btn { position: absolute; top: 15px; left: 15px; background: rgba(255,255,255,0.9); border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: 0.3s; z-index: 5; color: #ccc; }
.wishlist-btn:hover { transform: scale(1.15); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.wishlist-btn.active { color: #e74c3c; }

/* نظام التقييمات */
.review-stars-input { display: flex; gap: 8px; direction: ltr; }
.star-btn { font-size: 2rem; cursor: pointer; transition: 0.2s; color: #ddd; user-select: none; }
.star-btn:hover, .star-btn.selected { color: #f39c12; }

.review-card { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 15px; margin-bottom: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.03); }
.review-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.review-card-name { font-weight: 700; color: #2c3e50; font-size: 0.95rem; }
.review-card-date { font-size: 0.75rem; color: #aaa; }
.review-card-stars { color: #f39c12; font-size: 1rem; margin-bottom: 5px; letter-spacing: 2px; direction: ltr; display: inline-block; }
.review-card-comment { font-size: 0.9rem; color: #555; line-height: 1.6; }
.review-avg-stars { color: #f39c12; font-size: 1.2rem; letter-spacing: 2px; direction: ltr; display: inline-block; margin-left: 8px; }

/* بطاقة المفضلة */
.wishlist-card { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 15px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; transition: 0.2s; }
.wishlist-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.08); }
.wishlist-card-info h4 { color: #0056b3; margin-bottom: 5px; font-size: 1rem; }
.wishlist-card-info p { color: #777; font-size: 0.85rem; margin: 0; }
.wishlist-card-actions { display: flex; gap: 8px; }
.wishlist-card-btn { padding: 8px 15px; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; font-family: inherit; font-size: 0.85rem; transition: 0.2s; }
.wishlist-card-btn.btn-book { background: #1dd1a1; color: white; }
.wishlist-card-btn.btn-remove { background: #fff0f0; color: #e74c3c; border: 1px solid #ffcccc; }

/* التقييم في بطاقة الرحلة */
.tour-card-rating { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: #f39c12; margin-bottom: 10px; }
.tour-card-rating .rating-count { color: #aaa; font-size: 0.8rem; }

/* Dashboard */
.dash-kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 20px; }
.dash-kpi-card { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 18px; display: flex; align-items: center; gap: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: 0.2s; }
.dash-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.08); }
.dash-kpi-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
.dash-kpi-data { display: flex; flex-direction: column; }
.dash-kpi-label { font-size: 0.8rem; color: #888; font-weight: 700; }
.dash-kpi-value { font-size: 1.4rem; font-weight: 900; color: #2c3e50; }
.dash-kpi-value small { font-size: 0.7rem; font-weight: 700; }
.dash-filter-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; background: #f8f9fa; padding: 12px 15px; border-radius: 10px; border: 1px solid #eee; flex-wrap: wrap; }
.dash-charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.dash-chart-box { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.dash-chart-box h4 { color: #2c3e50; margin-bottom: 15px; font-size: 0.95rem; }
.dash-section { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); margin-bottom: 15px; }
.dash-user-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f0f0f0; font-size: 0.9rem; }
.dash-user-row:last-child { border-bottom: none; }

@media (max-width: 768px) {
    .dash-kpi-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .dash-charts-row { grid-template-columns: 1fr; }
    .dash-kpi-value { font-size: 1.1rem; }
    .dash-kpi-card { padding: 12px; }
}
/* قراءة المزيد */
.desc-expandable { position: relative; }
.desc-expandable .booking-desc,
.desc-expandable #bh-desc { transition: max-height 0.3s ease; overflow: hidden; }
.read-more-btn { background: none; border: none; color: #0056b3; font-weight: 700; cursor: pointer; font-family: inherit; font-size: 0.9rem; padding: 5px 0; margin-top: 5px; }
.read-more-btn:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .desc-expandable .booking-desc.collapsed,
    .desc-expandable #bh-desc.collapsed { max-height: 4.5em; }
}

/* معرض صور الفندق */
.hotel-gallery-slider { position: relative; width: 100%; height: 250px; overflow: hidden; border-radius: 12px; margin-bottom: 15px; }
.hotel-gallery-track { display: flex; transition: transform 0.4s ease; height: 100%; }
.hotel-gallery-track img { min-width: 100%; height: 100%; object-fit: cover; flex-shrink: 0; }
.hotel-gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: #fff; border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 1.1rem; z-index: 3; display: flex; align-items: center; justify-content: center; }
.hotel-gallery-arrow.arr-left { left: 10px; }
.hotel-gallery-arrow.arr-right { right: 10px; }
.hotel-gallery-arrow:hover { background: rgba(0,0,0,0.7); }
.hotel-gallery-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.hotel-gallery-dot { width: 8px; height: 8px; border-radius: 50%; background: #ccc; cursor: pointer; transition: 0.2s; border: none; }
.hotel-gallery-dot.active { background: #0056b3; width: 20px; border-radius: 4px; }

/* تقييمات آخر شي بالموبايل */
@media (max-width: 768px) {
    .booking-details-side { display: flex; flex-direction: column; }
    #booking-reviews-section { order: 99; }
}