/* 
 * Uptime Booking - Modern CSS Styles
 * تصميم مودرن لموقع حجز الفنادق
 */

/* CSS Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Force Light Mode Only */
:root {
    color-scheme: light only;
}

/* Disable Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: light only;
    }
}

:root {
    /* Modern Color Palette */
    --primary-color: #4a9782;/* � اللون الأخضر الأساسي */
    --primary-dark: #3d7a6a;/* � اللون الأخضر الداكن */
    --primary-light: #5fb49a;/* � اللون الأخضر الفاتح */
    --secondary-color: #52a085;/* � اللون الثانوي الأخضر */
    --accent-color: #f59e0b;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    
    /* Neutral Colors */
    --white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, #fb923c 100%);
    --gradient-hero: linear-gradient(135deg, rgba(74, 151, 130, 0.9) 0%, rgba(82, 160, 133, 0.9) 100%);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Typography */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    /* Spacing */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    
    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;
}

/* Base Typography */
body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--gray-800);
    background-color: #fff;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Arabic RTL Support */
body[dir="rtl"] {
    font-family: 'Segoe UI', 'Tahoma', 'Arial', sans-serif;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-4);
    color: var(--gray-900);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

/* Links */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-dark);
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-4);
}

.container-fluid {
    width: 100%;
    padding: 0 var(--spacing-4);
}

/* Grid System */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(var(--spacing-3) * -1);
}

.col {
    flex: 1;
    padding: 0 var(--spacing-3);
}

.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* Header Styles */
.header {
    background: var(--white);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1100;
    transition: all var(--transition-normal);
    border-bottom: 1px solid var(--gray-100);
}

.header.scrolled {
    box-shadow: var(--shadow-md);
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-3) 0;
    min-height: 70px;
}

/* Brand Section */
.navbar-brand-section {
    flex: 0 0 auto;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.navbar-brand:hover {
    transform: translateY(-1px);
}

.brand-icon {
    width: 45px;
    height: 45px;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-image {
    height: 45px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    transition: all var(--transition-fast);
}

.brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brand-name {
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--gray-900);
    line-height: 1.2;
}

.brand-tagline {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Navigation Center */
.navbar-center {
    flex: 1;
    display: flex;
    justify-content: center;
    max-width: 600px;
    margin: 0 auto;
}

.navbar-nav {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--spacing-2);
    background: var(--gray-50);
    border-radius: var(--radius-xl);
    padding: var(--spacing-1);
}

.nav-item {
    margin: 0;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--gray-600);
    font-weight: 500;
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    text-decoration: none;
    position: relative;
    white-space: nowrap;
}

.nav-link:hover {
    color: var(--primary-color);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.nav-link.active {
    color: var(--primary-color);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

.nav-link i {
    font-size: 1rem;
    width: 16px;
    text-align: center;
}

/* Navbar Actions */
.navbar-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex: 0 0 auto;
}

/* Language Switcher */
.language-switcher {
    position: relative;
}

.language-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    color: var(--gray-700);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
    min-width: 70px;
    justify-content: center;
}

.language-btn:hover {
    background: var(--gray-100);
    border-color: var(--gray-300);
    color: var(--gray-800);
    transform: translateY(-1px);
}

.language-btn i {
    font-size: 0.9rem;
}

/* User Menu */
.user-menu {
    position: relative;
}

.user-menu-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: var(--font-size-sm);
    color: var(--gray-700);
}

.user-menu-btn:hover {
    background: var(--gray-50);
    border-color: var(--gray-300);
    box-shadow: var(--shadow-sm);
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #4a9782;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.2rem;
}

.user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.user-name {
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.2;
}

.user-role {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    line-height: 1.2;
}

.dropdown-arrow {
    font-size: 0.8rem;
    color: var(--gray-400);
    transition: transform var(--transition-fast);
}

.user-menu-btn[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.dropdown {
    position: relative;
    z-index: 1500;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    min-width: 280px;
    padding: var(--spacing-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-fast);
    z-index: 1500;
}

.dropdown.show .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--gray-100);
    margin-bottom: var(--spacing-2);
}

.user-avatar-large {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #4a9782;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.5rem;
}

.user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-details strong {
    color: var(--gray-900);
    font-weight: 600;
}

.user-details small {
    color: var(--gray-500);
    font-size: var(--font-size-xs);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    color: var(--gray-700);
    text-decoration: none;
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    font-weight: 500;
}

.dropdown-item:hover {
    background: var(--gray-50);
    color: var(--gray-900);
}

.dropdown-item i {
    width: 18px;
    text-align: center;
    color: var(--gray-500);
}

.dropdown-item.logout-item {
    color: var(--red-600);
    margin-top: var(--spacing-2);
}

.dropdown-item.logout-item:hover {
    background: var(--red-50);
    color: var(--red-700);
}

.dropdown-item.logout-item i {
    color: var(--red-500);
}

.dropdown-divider {
    height: 1px;
    background: var(--gray-100);
    margin: var(--spacing-2) 0;
}

/* Auth Buttons */
.auth-buttons {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.auth-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-lg);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
    border: 1px solid transparent;
}

.login-btn {
    color: var(--gray-700);
    background: var(--white);
    border-color: var(--gray-200);
}

.login-btn:hover {
    background: var(--gray-50);
    border-color: var(--gray-300);
    color: var(--gray-800);
    transform: translateY(-1px);
}

.register-btn {
    color: var(--white);
    background-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.register-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: var(--white);
}

/* Logout Button */
.logout-section {
    display: flex;
    align-items: center;
}

.logout-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-lg);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
    border: 1px solid var(--red-200);
    color: var(--red-600);
    background: var(--white);
}

.logout-btn:hover {
    background: var(--red-50);
    border-color: var(--red-300);
    color: var(--red-700);
    transform: translateY(-1px);
    text-decoration: none;
}

.logout-btn i {
    color: var(--red-500);
}





/* Header Animations */
@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.mobile-nav.show .mobile-nav-content {
    animation: slideInFromRight 0.3s ease-out;
}

.dropdown.show .dropdown-menu {
    animation: fadeInUp 0.2s ease-out;
}

/* Header Hover Effects */
.navbar-brand:hover .brand-icon {
    transform: rotate(5deg) scale(1.05);
}

.navbar-brand:hover .logo-image {
    transform: scale(1.05);
}

.nav-link:hover i {
    transform: translateY(-1px);
}

.language-btn:hover i {
    transform: rotate(15deg);
}

/* Focus States for Accessibility */
.nav-link:focus,
.language-btn:focus,
.auth-btn:focus,
.user-menu-btn:focus,
.mobile-menu-btn:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .header {
        border-bottom: 2px solid var(--gray-900);
    }

    .nav-link.active {
        background: var(--gray-900);
        color: var(--white);
    }

    .dropdown-menu {
        border: 2px solid var(--gray-900);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .navbar-brand,
    .nav-link,
    .language-btn,
    .auth-btn,
    .user-menu-btn,
    .mobile-menu-btn,
    .dropdown-menu,
    .mobile-nav,
    .hamburger-line {
        transition: none;
    }

    .mobile-nav.show .mobile-nav-content {
        animation: none;
    }

    .dropdown.show .dropdown-menu {
        animation: none;
    }
}

/* Button Styles - أزرار موحدة الحجم */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3) var(--spacing-6);
    font-size: var(--font-size-base);
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    gap: var(--spacing-2);
    min-height: 44px; /* حد أدنى ثابت لارتفاع جميع الأزرار */
    height: 44px; /* ارتفاع ثابت لجميع الأزرار */
    white-space: nowrap; /* منع كسر النص إلى أسطر متعددة */
    flex-shrink: 0; /* منع تقليص الزر */
    box-sizing: border-box; /* ضمان حساب الحدود والحشو ضمن الحجم */
    overflow: hidden; /* إخفاء أي محتوى زائد */
    text-overflow: ellipsis; /* إضافة نقاط للنص الطويل */
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--white);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: var(--white);
}

.btn-secondary {
    background: var(--white);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
}

.btn-secondary:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
    color: var(--gray-800);
}

.btn-accent {
    background: var(--gradient-accent);
    color: var(--white);
}

.btn-accent:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: var(--white);
}

.btn-sm {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
    min-height: 36px; /* ارتفاع ثابت للأزرار الصغيرة */
    height: 36px; /* ارتفاع ثابت */
}

.btn-lg {
    padding: var(--spacing-4) var(--spacing-8); /* padding موحد */
    font-size: var(--font-size-lg);
    border-radius: 15px; /* حواف دائرية للزر */
    min-height: 52px; /* ارتفاع ثابت للأزرار الكبيرة */
    height: 52px; /* ارتفاع ثابت */
}

/* زر بدء المحادثة - تصميم مميز وواضح */
.btn-info {
    background: linear-gradient(135deg, #00d4aa, #00b894);
    color: var(--white);
    border: none;
    font-weight: 600;
    font-size: var(--font-size-lg);
    padding: var(--spacing-4) var(--spacing-8);
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 212, 170, 0.4);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.btn-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s;
}

.btn-info:hover::before {
    left: 100%;
}

.btn-info:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 35px rgba(0, 212, 170, 0.6);
    background: linear-gradient(135deg, #00e6c0, #00d4aa);
    color: var(--white);
}

.btn-info:active {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 212, 170, 0.5);
}

/* إضافة أيقونة متحركة لزر المحادثة */
.btn-info i {
    margin-right: 8px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Card Styles */
.card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.card-header {
    padding: var(--spacing-6);
    border-bottom: 1px solid var(--gray-200);
}

.card-body {
    padding: var(--spacing-6);
}

.card-footer {
    padding: var(--spacing-6);
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
}

/* Form Styles */
.form-group {
    margin-bottom: var(--spacing-5);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-2);
    font-weight: 500;
    color: var(--gray-700);
}

.form-control {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-base);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--white);
    transition: all var(--transition-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(74, 151, 130, 0.1);
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right var(--spacing-3) center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    padding-right: var(--spacing-10);
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--gray-600); }
.text-success { color: var(--success-color); }
.text-warning { color: var(--warning-color); }
.text-error { color: var(--error-color); }

.bg-primary { background-color: var(--primary-color); }
.bg-secondary { background-color: var(--gray-100); }
.bg-white { background-color: var(--white); }

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-6 { margin-bottom: var(--spacing-6); }
.mb-8 { margin-bottom: var(--spacing-8); }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--spacing-2); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-6 { margin-top: var(--spacing-6); }
.mt-8 { margin-top: var(--spacing-8); }

.p-0 { padding: 0; }
.p-2 { padding: var(--spacing-2); }
.p-4 { padding: var(--spacing-4); }
.p-6 { padding: var(--spacing-6); }
.p-8 { padding: var(--spacing-8); }

.flex-grow-1 { flex-grow: 1; }

.page-content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Animation Classes */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all var(--transition-slow);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.slide-up {
    transform: translateY(30px);
    opacity: 0;
    transition: all var(--transition-normal);
}

.slide-up.visible {
    transform: translateY(0);
    opacity: 1;
}

.scale-in {
    transform: scale(0.95);
    opacity: 0;
    transition: all var(--transition-normal);
}

.scale-in.visible {
    transform: scale(1);
    opacity: 1;
}

/* Loading Animation */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--gray-300);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 0 var(--spacing-3);
    }
    
    /* Header Responsive */
    .navbar {
        padding: var(--spacing-2) 0;
        min-height: 60px;
    }

    .brand-icon {
        width: 40px;
        height: 40px;
        font-size: 1.3rem;
    }

    .logo-image {
        height: 40px;
        max-width: 150px;
    }

    .brand-name {
        font-size: var(--font-size-lg);
    }

    .brand-tagline {
        display: none;
    }

    /* Hide brand text on mobile to save space */
    .brand-text {
        display: none;
    }

    .navbar-center {
        flex: 1;
        margin: 0 var(--spacing-2);
        max-width: none; /* إزالة تحديد العرض الأقصى */
    }

    .navbar-nav {
        gap: var(--spacing-1);
        padding: var(--spacing-1);
        background: var(--gray-50);
        border-radius: var(--radius-lg);
        justify-content: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .navbar-nav::-webkit-scrollbar {
        display: none;
    }

    .nav-link {
        padding: var(--spacing-2) var(--spacing-3);
        font-size: var(--font-size-sm);
        white-space: nowrap;
        min-width: auto;
    }

    .nav-link span {
        display: none;
    }

    .nav-link i {
        font-size: 1.1rem;
        margin: 0;
    }

    .navbar-actions {
        flex: 1;
        min-width: 0;
        display: flex;
        justify-content: flex-end;
    }

    .language-btn {
        padding: var(--spacing-2);
        min-width: 50px;
        font-size: var(--font-size-sm);
    }

    .language-btn span {
        display: none;
    }

    .auth-btn span {
        display: none;
    }

    .auth-btn {
        padding: var(--spacing-2) var(--spacing-3);
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
        font-size: var(--font-size-sm);
        display: flex;
        align-items: center;
        position: relative;
        z-index: 10;
    }

    /* Allow user info to be displayed on mobile, controlled below */

    .user-menu-btn {
        padding: var(--spacing-2);
        gap: var(--spacing-2);
    }

    .user-name {
        /* display: block; */ /* Let it be a flex item */
        white-space: nowrap; /* Prevent wrapping */
        overflow: visible; /* Ensure it's not hidden */
    }

    .user-role {
        display: none; /* Hide role on mobile to save space */
    }

    .dropdown-menu {
        right: -20px;
        left: 20px;
        min-width: auto;
        max-width: calc(100vw - 40px);
    }
}

/* Extra Small Screens */
@media (max-width: 480px) {
    .navbar {
        padding: var(--spacing-2) 0;
        flex-wrap: nowrap; /* منع التفاف العناصر */
        gap: var(--spacing-1);
        min-height: 55px; /* تقليل الارتفاع */
    }

    .navbar-brand-section {
        flex: 0 1 auto; /* Can shrink, won't grow */
        min-width: 0;
    }

    .navbar-actions {
        flex: 1 1 auto; /* Can grow and shrink */
        min-width: 0; /* Allow shrinking below content size */
        display: flex;
        justify-content: flex-end;
    }

    .navbar-center {
        flex: 0 0 auto; /* Fixed size */
    }

    .brand-name {
        font-size: var(--font-size-sm); /* تصغير النص */
    }

    .brand-tagline {
        display: none; /* إخفاء الشعار الفرعي */
    }

    .brand-icon {
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }

    .logo-image {
        height: 30px; /* تصغير اللوجو */
        max-width: 100px;
    }

    .navbar-nav {
        gap: 1px; /* تقليل المسافات */
        padding: 2px;
        background: transparent; /* إزالة الخلفية */
        border-radius: 0;
    }

    .nav-link {
        padding: var(--spacing-1) var(--spacing-2); /* تقليل الـ padding */
        border-radius: var(--radius-sm);
        font-size: var(--font-size-xs); /* تصغير النص */
    }

    .nav-link span {
        display: none; /* إخفاء النص وإظهار الأيقونات فقط */
    }

    .nav-link i {
        font-size: 0.9rem;
        margin: 0;
    }

    .auth-btn,
    .language-btn {
        padding: var(--spacing-2) var(--spacing-3);
        min-width: 44px; /* زيادة الحد الأدنى للعرض لتحسين قابلية النقر */
        min-height: 44px; /* إضافة حد أدنى للارتفاع */
        font-size: var(--font-size-xs);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 10; /* التأكد من أن الأزرار فوق العناصر الأخرى */
    }

    .language-btn span {
        display: none; /* إخفاء النص وإظهار الأيقونة فقط */
    }

    .user-menu-btn {
        padding: var(--spacing-1);
        gap: var(--spacing-1); /* Further reduce gap */
        /* flex-shrink: 0; */ /* Allow button to shrink */
    }

    .user-avatar {
        width: 24px;
        height: 24px;
        font-size: 0.9rem;
    }

    /* Allow user info to be displayed on mobile */

    .dropdown-arrow {
        display: none; /* إخفاء سهم القائمة */
    }
    
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
    
    h1 { font-size: var(--font-size-3xl); }
    h2 { font-size: var(--font-size-2xl); }
    h3 { font-size: var(--font-size-xl); }
}

@media (max-width: 480px) {
    .col-sm-12 { flex: 0 0 100%; max-width: 100%; }

    .btn {
        width: 100%;
        justify-content: center;
    }

    .card-body {
        padding: var(--spacing-4);
    }
}

/* Hero Section */
.hero {
    background: var(--gradient-hero);
    color: var(--white);
    padding: var(--spacing-20) 0;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.1;
}

/* أنيميشن أيقونات السياحة المتحركة */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        /* نجمة - تقييم */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" opacity="0.25"><path d="M12 2L13.09 8.26L20 9L13.09 9.74L12 16L10.91 9.74L4 9L10.91 8.26L12 2Z"/></svg>'),
        /* طائرة */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" opacity="0.22"><path d="M21 16V14L13 9V7.5C13 6.67 12.33 6 11.5 6S10 6.67 10 7.5V9L2 14V16L10 13.5V19L8 20.5V22L11.5 21L15 22V20.5L13 19V13.5L21 16Z"/></svg>'),
        /* فندق/مبنى */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" opacity="0.2"><path d="M12 3L2 12H5V20H19V12H22L12 3M12 7.5L17 12V18H15V14H9V18H7V12L12 7.5Z"/></svg>'),
        /* موقع */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" opacity="0.18"><path d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22S19 14.25 19 9C19 5.13 15.87 2 12 2M12 11.5C10.62 11.5 9.5 10.38 9.5 9S10.62 6.5 12 6.5 14.5 7.62 14.5 9 13.38 11.5 12 11.5Z"/></svg>'),
        /* حقيبة سفر */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" opacity="0.21"><path d="M17 6H15V4C15 2.9 14.1 2 13 2H11C9.9 2 9 2.9 9 4V6H7C5.9 6 5 6.9 5 8V19C5 20.1 5.9 21 7 21H17C18.1 21 19 20.1 19 19V8C19 6.9 18.1 6 17 6M11 4H13V6H11V4Z"/></svg>'),
        /* كاميرا */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" opacity="0.19"><path d="M4 4H7L9 2H15L17 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4M12 7C9.24 7 7 9.24 7 12S9.24 17 12 17 17 14.76 17 12 14.76 7 12 7M12 9C13.66 9 15 10.34 15 12S13.66 15 12 15 9 13.66 9 12 10.34 9 12 9Z"/></svg>'),
        /* سرير - فندق */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" opacity="0.17"><path d="M7 14C5.9 14 5 13.1 5 12S5.9 10 7 10 9 10.9 9 12 8.1 14 7 14M12.5 11H11V7.5C11 6.1 12.1 5 13.5 5S16 6.1 16 7.5V11H14.5M19 12V20H5V12H2V10H22V12H19Z"/></svg>'),
        /* خريطة */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" opacity="0.16"><path d="M15 5.5L12 3L9 5.5L6 3L3 5.5V19.5L6 17L9 19.5L12 17L15 19.5L18 17L21 19.5V5.5L18 3L15 5.5Z"/></svg>'),
        /* شمس - طقس */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" opacity="0.15"><path d="M12 7C9.24 7 7 9.24 7 12S9.24 17 12 17 17 14.76 17 12 14.76 7 12 7M12 2L14.39 5.42C13.65 5.15 12.84 5 12 5S10.35 5.15 9.61 5.42L12 2M3.34 7L6.76 6.76C6.76 6.76 6.76 6.76 6.76 6.76L3.34 7M20.66 7L17.24 6.76C17.24 6.76 17.24 6.76 17.24 6.76L20.66 7M2 12L5.42 9.61C5.15 10.35 5 11.16 5 12S5.15 13.65 5.42 14.39L2 12M22 12L18.58 14.39C18.85 13.65 19 12.84 19 12S18.85 10.35 18.58 9.61L22 12M3.34 17L6.76 17.24C6.76 17.24 6.76 17.24 6.76 17.24L3.34 17M20.66 17L17.24 17.24C17.24 17.24 17.24 17.24 17.24 17.24L20.66 17M12 22L9.61 18.58C10.35 18.85 11.16 19 12 19S13.65 18.85 14.39 18.58L12 22Z"/></svg>'),
        /* قلب - مفضلة */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" opacity="0.14"><path d="M12 21.35L10.55 20.03C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3C9.24 3 10.91 3.81 12 5.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5C22 12.27 18.6 15.36 13.45 20.03L12 21.35Z"/></svg>'),
        /* سيارة - نقل */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" opacity="0.13"><path d="M5 11L6.5 6.5H17.5L19 11M17.5 16C16.67 16 16 15.33 16 14.5S16.67 13 17.5 13 19 13.67 19 14.5 18.33 16 17.5 16M6.5 16C5.67 16 5 15.33 5 14.5S5.67 13 6.5 13 8 13.67 8 14.5 7.33 16 6.5 16M18.92 6C18.72 5.42 18.16 5 17.5 5H6.5C5.84 5 5.28 5.42 5.08 6L3 12V20C3 20.55 3.45 21 4 21H5C5.55 21 6 20.55 6 20V19H18V20C18 20.55 18.45 21 19 21H20C20.55 21 21 20.55 21 20V12L18.92 6Z"/></svg>'),
        /* مظلة شاطئ */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" opacity="0.12"><path d="M13 22H11V13H7.5C6.67 13 6 12.33 6 11.5S6.67 10 7.5 10H16.5C17.33 10 18 10.67 18 11.5S17.33 13 16.5 13H13V22M12 2C6.48 2 2 6.48 2 12H22C22 6.48 17.52 2 12 2Z"/></svg>');
    background-size: 55px 55px, 50px 50px, 45px 45px, 40px 40px, 48px 48px, 43px 43px, 38px 38px, 35px 35px, 42px 42px, 37px 37px, 40px 40px, 45px 45px;
    background-position:
        3% 12%,
        88% 18%,
        12% 78%,
        92% 88%,
        22% 8%,
        78% 92%,
        35% 15%,
        65% 85%,
        8% 45%,
        95% 55%,
        45% 25%,
        55% 75%;
    background-repeat: no-repeat;
    animation: floatingIcons 25s ease-in-out infinite, fadeInOut 30s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    pointer-events: none;
    z-index: 0;
}

/* أنيميشن الأيقونات المتحركة */
@keyframes floatingIcons {
    0% {
        background-position:
            3% 12%, 88% 18%, 12% 78%, 92% 88%,
            22% 8%, 78% 92%, 35% 15%, 65% 85%,
            8% 45%, 95% 55%, 45% 25%, 55% 75%;
        transform: translateY(0px) rotate(0deg);
        opacity: 1;
    }
    16% {
        background-position:
            6% 15%, 85% 21%, 15% 75%, 89% 85%,
            25% 11%, 75% 89%, 38% 18%, 62% 82%,
            11% 48%, 92% 52%, 48% 28%, 52% 72%;
        transform: translateY(-8px) rotate(1deg);
        opacity: 0.9;
    }
    33% {
        background-position:
            10% 18%, 82% 24%, 18% 72%, 86% 82%,
            28% 14%, 72% 86%, 41% 21%, 59% 79%,
            14% 51%, 89% 49%, 51% 31%, 49% 69%;
        transform: translateY(-15px) rotate(-1deg);
        opacity: 0.8;
    }
    50% {
        background-position:
            13% 21%, 79% 27%, 21% 69%, 83% 79%,
            31% 17%, 69% 83%, 44% 24%, 56% 76%,
            17% 54%, 86% 46%, 54% 34%, 46% 66%;
        transform: translateY(-12px) rotate(2deg);
        opacity: 0.85;
    }
    66% {
        background-position:
            10% 24%, 82% 30%, 18% 66%, 86% 76%,
            28% 20%, 72% 80%, 41% 27%, 59% 73%,
            14% 57%, 89% 43%, 51% 37%, 49% 63%;
        transform: translateY(-5px) rotate(-0.5deg);
        opacity: 0.95;
    }
    83% {
        background-position:
            7% 21%, 85% 27%, 15% 69%, 89% 79%,
            25% 17%, 75% 83%, 38% 24%, 62% 76%,
            11% 54%, 92% 46%, 48% 34%, 52% 66%;
        transform: translateY(-10px) rotate(1.5deg);
        opacity: 0.88;
    }
    100% {
        background-position:
            3% 12%, 88% 18%, 12% 78%, 92% 88%,
            22% 8%, 78% 92%, 35% 15%, 65% 85%,
            8% 45%, 95% 55%, 45% 25%, 55% 75%;
        transform: translateY(0px) rotate(0deg);
        opacity: 1;
    }
}

/* جزيئات متحركة إضافية */
.hero .container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(3px 3px at 15% 25%, rgba(255,255,255,0.4), transparent),
        radial-gradient(2px 2px at 35% 65%, rgba(255,255,255,0.3), transparent),
        radial-gradient(2px 2px at 85% 35%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 65% 15%, rgba(255,255,255,0.4), transparent),
        radial-gradient(3px 3px at 75% 85%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 25% 75%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 95% 60%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 5% 50%, rgba(255,255,255,0.4), transparent),
        radial-gradient(2px 2px at 50% 5%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 45% 95%, rgba(255,255,255,0.5), transparent);
    background-size: 180px 180px, 220px 220px, 160px 160px, 200px 200px, 190px 190px, 140px 140px, 170px 170px, 210px 210px, 150px 150px, 180px 180px;
    animation: sparkle 15s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes sparkle {
    0% { transform: translateY(0px) translateX(0px); opacity: 1; }
    25% { transform: translateY(-20px) translateX(10px); opacity: 0.8; }
    50% { transform: translateY(-10px) translateX(-5px); opacity: 0.6; }
    75% { transform: translateY(-30px) translateX(15px); opacity: 0.9; }
    100% { transform: translateY(0px) translateX(0px); opacity: 1; }
}

@keyframes fadeInOut {
    0% { opacity: 1; }
    30% { opacity: 0.7; }
    60% { opacity: 1; }
    90% { opacity: 0.8; }
    100% { opacity: 1; }
}

/* طبقة إضافية من الأيقونات */
.hero .container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        /* نجوم صغيرة */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" opacity="0.1"><path d="M12 2L13.09 8.26L20 9L13.09 9.74L12 16L10.91 9.74L4 9L10.91 8.26L12 2Z"/></svg>'),
        /* طائرة ورقية */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" opacity="0.08"><path d="M12 2L13.09 8.26L20 9L13.09 9.74L12 16L10.91 9.74L4 9L10.91 8.26L12 2Z"/></svg>'),
        /* بوصلة */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" opacity="0.09"><circle cx="12" cy="12" r="10" stroke="white" stroke-width="2" fill="none"/><path d="M12 6L14 10L18 12L14 14L12 18L10 14L6 12L10 10Z" fill="white"/></svg>'),
        /* جواز سفر */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" opacity="0.07"><path d="M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2M18 20H6V4H13V9H18V20Z"/></svg>'),
        /* كوكتيل */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" opacity="0.06"><path d="M7.5 7L5.5 5H18.5L16.5 7H7.5M6.9 8H17.1L12 13.1L6.9 8M11 15H13V20H17V22H7V20H11V15Z"/></svg>');
    background-size: 25px 25px, 20px 20px, 30px 30px, 22px 22px, 18px 18px;
    background-position:
        18% 35%,
        70% 20%,
        30% 60%,
        85% 70%,
        15% 80%;
    background-repeat: no-repeat;
    animation: floatingIconsSecondary 30s ease-in-out infinite reverse;
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
}

@keyframes floatingIconsSecondary {
    0% {
        background-position: 18% 35%, 70% 20%, 30% 60%, 85% 70%, 15% 80%;
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        background-position: 22% 30%, 75% 25%, 35% 55%, 80% 75%, 20% 75%;
        transform: translateY(-12px) rotate(-2deg);
    }
    50% {
        background-position: 25% 25%, 80% 30%, 40% 50%, 75% 80%, 25% 70%;
        transform: translateY(-8px) rotate(1deg);
    }
    75% {
        background-position: 20% 30%, 72% 35%, 32% 55%, 82% 75%, 18% 75%;
        transform: translateY(-15px) rotate(-1deg);
    }
    100% {
        background-position: 18% 35%, 70% 20%, 30% 60%, 85% 70%, 15% 80%;
        transform: translateY(0px) rotate(0deg);
    }
}

.hero-content {
    position: relative;
    z-index: 4;
    text-align: center;
    margin-top: -30px; /* رفع المحتوى لأعلى */
    padding-top: 40px; /* إضافة مساحة صغيرة من الأعلى */
}

/* تحسينات للشاشات الصغيرة */
@media (max-width: 768px) {
    .hero {
        background-size: contain; /* عرض الصورة كاملة على الموبايل */
        background-position: center top; /* توسيط الصورة من الأعلى */
        background-repeat: no-repeat;
    }
    
    .hero::after {
        background-size: 40px 40px, 35px 35px, 32px 32px, 28px 28px, 35px 35px, 30px 30px, 28px 28px, 25px 25px, 30px 30px, 27px 27px, 28px 28px, 32px 32px;
        animation-duration: 20s;
    }

    .hero .container::before {
        background-size: 150px 150px, 200px 200px, 100px 100px, 180px 180px, 120px 120px;
        animation-duration: 12s;
    }
}

/* تحسينات للشاشات الصغيرة جداً */
@media (max-width: 480px) {
    .hero {
        background-size: contain; /* عرض الصورة كاملة على الموبايل الصغير */
        background-position: center top; /* توسيط الصورة من الأعلى */
        background-repeat: no-repeat;
        min-height: 350px; /* تقليل أكثر للشاشات الصغيرة جداً */
        padding: var(--spacing-10) 0 var(--spacing-18) 0;
        border-radius: 0 0 20px 20px; /* حواف دائرية أصغر */
    }
    
    .hero::after {
        background-size: 30px 30px, 28px 28px, 25px 25px, 22px 22px, 27px 27px, 24px 24px, 22px 22px, 20px 20px, 24px 24px, 21px 21px, 22px 22px, 25px 25px;
        animation-duration: 18s;
    }

    .hero-content {
        margin-top: 0px; /* إلغاء الـ margin السالب للشاشات الصغيرة جداً */
        padding-top: 30px; /* إضافة padding علوي مناسب */
    }

    .hero h1 {
        font-size: var(--font-size-2xl); /* تقليل حجم الخط للشاشات الصغيرة جداً */
        margin-bottom: var(--spacing-4); /* تقليل المسافة السفلية */
    }

    .hero p {
        font-size: var(--font-size-base); /* تقليل حجم الخط للوصف */
    }
}

/* تقليل الحركة للمستخدمين الذين يفضلون ذلك */
@media (prefers-reduced-motion: reduce) {
    .hero::after,
    .hero .container::before {
        animation: none;
    }
}

.hero h1 {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-6);
    color: #111;
}

.hero {
    background: url('../background.png') no-repeat center center;
    background-size: cover;
    color: var(--white);
    padding: var(--spacing-16) 0 var(--spacing-28) 0; /* تقليل الارتفاع قليلاً */
    position: relative;
    overflow: visible; /* السماح للنموذج بالخروج من البرواز */
    margin-bottom: 60px; /* إضافة مساحة أسفل البرواز */
    border-radius: 0 0 30px 30px; /* حواف دائرية في الأسفل فقط */
    min-height: 500px; /* تقليل الحد الأدنى للارتفاع */
}
.search-form {
    background: var(--white);
    border-radius: 25px; /* حواف دائرية أكبر */
    padding: var(--spacing-8) var(--spacing-6); /* زيادة الـ padding العلوي والسفلي لتكبير الارتفاع */
    box-shadow: var(--shadow-xl);
    margin-top: var(--spacing-16); /* زيادة المسافة لدفع النموذج لأسفل */
    position: relative;
    z-index: 10;
    transform: translateY(200px); /* دفع النموذج خارج البرواز قليلاً */
    min-height: 120px; /* تحديد حد أدنى للارتفاع */
}

.search-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    gap: var(--spacing-4);
    align-items: end;
}

.search-group {
    display: flex;
    flex-direction: column;
}

.search-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: var(--spacing-2);
}

.search-input {
    padding: var(--spacing-5); /* زيادة الـ padding لجعل الحقول أكبر */
    border: 1px solid var(--gray-300);
    border-radius: 15px; /* حواف دائرية أكبر للحقول */
    font-size: var(--font-size-base);
    transition: all var(--transition-fast);
    min-height: 50px; /* تحديد حد أدنى لارتفاع الحقول */
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(74, 151, 130, 0.1);
}

/* Hotel Cards */
.hotel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-6);
    margin-top: var(--spacing-8);
}

.hotel-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.hotel-card-link:hover .hotel-card {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.hotel-card {
    background: var(--white);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
    position: relative;
    height: 100%;
}

.hotel-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

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

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

.hotel-badge {
    position: absolute;
    top: var(--spacing-4);
    right: var(--spacing-4);
    background: var(--gradient-accent);
    color: var(--white);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.hotel-info {
    padding: var(--spacing-6);
}

.hotel-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-2);
    color: var(--gray-900);
}

.hotel-location {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-4);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.hotel-rating {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

.stars {
    display: flex;
    gap: var(--spacing-1);
}

.star {
    color: var(--accent-color);
    font-size: var(--font-size-sm);
}

.rating-text {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.hotel-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--spacing-4);
}

.price {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--primary-color);
}

.price-unit {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    margin-left: var(--spacing-2);
}

/* Amenities */
.amenities {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin: var(--spacing-4) 0;
}

.amenity {
    background: var(--gray-100);
    color: var(--gray-700);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

/* Section Styles */
.section {
    padding: var(--spacing-16) 0;
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-12);
}

.section-title {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    margin-bottom: var(--spacing-4);
    color: var(--gray-900);
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--gray-600);
    max-width: 600px;
    margin: 0 auto;
}

/* Footer */
.footer {
    background: var(--gray-900);
    color: var(--gray-300);
    padding: var(--spacing-16) 0 var(--spacing-8);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-8);
}

.footer-section h4 {
    color: var(--white);
    margin-bottom: var(--spacing-4);
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: var(--spacing-2);
}

.footer-links a {
    color: var(--gray-400);
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--white);
}

.footer-bottom {
    border-top: 1px solid var(--gray-800);
    padding-top: var(--spacing-6);
    text-align: center;
    color: var(--gray-500);
}

/* Flash Messages */
.flash-message {
    padding: var(--spacing-4) var(--spacing-6);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-6);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

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

.flash-error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error-color);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.flash-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Guest Selector Styles */
.guest-selector {
    position: relative;
}

.guest-dropdown-btn {
    width: 100%;
    text-align: left;
    background: var(--white);
    border: 1px solid var(--gray-300);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.guest-dropdown-btn::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

.guest-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    display: none !important;
    padding: var(--spacing-4);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.guest-selector.active .guest-dropdown {
    display: block !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Remove hover effects to prevent accidental showing */
/* .guest-selector:hover .guest-dropdown,
.guest-dropdown:hover {
    Removed - only show on click
} */

/* Force hide any stray dropdowns */
.guest-dropdown:not(.guest-selector.active .guest-dropdown) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Ensure no dropdowns show by default */
body .guest-dropdown {
    display: none !important;
}

body .guest-selector.active .guest-dropdown {
    display: block !important;
}

.guest-counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-2) 0;
}

.counter-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.counter-controls button {
    width: 30px;
    height: 30px;
    border: 1px solid var(--gray-300);
    background: var(--white);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.counter-controls button:hover {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

.counter-controls input {
    width: 40px;
    text-align: center;
    border: none;
    background: none;
    font-weight: 600;
}

/* Destinations Grid */
.destinations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-4);
    margin-top: var(--spacing-8);
}

.destination-card {
    background: var(--white);
    padding: var(--spacing-6);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: var(--gray-800);
}

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

.destination-info h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-1);
}

.destination-info p {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
    margin: 0;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-6);
    margin-top: var(--spacing-8);
}

.feature-card {
    background: var(--white);
    padding: var(--spacing-8);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: all var(--transition-normal);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.feature-icon {
    width: 80px;
    height: 80px;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-4);
    color: #000;
    font-size: var(--font-size-2xl);
}

.feature-card h4 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-3);
    color: var(--gray-900);
}

.feature-card p {
    color: var(--gray-600);
    line-height: 1.6;
}

/* Hotel Description */
.hotel-description {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    margin: var(--spacing-3) 0;
}

/* Price Info */
.price-info {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-1);
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .search-row {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }

    .hotel-grid {
        grid-template-columns: 1fr;
    }

    /* Hotel Card Mobile Adjustments */
    .hotel-price {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-3);
        margin-top: var(--spacing-4);
    }

    .price-info {
        justify-content: center;
        text-align: center;
        margin-bottom: var(--spacing-2);
    }

    .hotel-price .btn {
        width: 100%;
        text-align: center;
        padding: var(--spacing-3) var(--spacing-4);
        font-size: var(--font-size-base);
        border-radius: var(--radius-lg);
    }

    .hotel-card {
        margin-bottom: var(--spacing-4);
    }

    .hotel-info {
        padding: var(--spacing-4);
    }

    .hero h1 {
        font-size: var(--font-size-3xl);
    }

    .hero p {
        font-size: var(--font-size-lg);
    }

    .hero-content {
        margin-top: 0px; /* إلغاء الـ margin السالب للشاشات الصغيرة */
        padding-top: 40px; /* زيادة الـ padding العلوي */
    }

    .search-form {
        padding: var(--spacing-6) var(--spacing-4); /* الحفاظ على الارتفاع الجديد */
        margin: var(--spacing-6) var(--spacing-4) 0;
        transform: translateY(30px); /* تقليل المسافة للشاشات الصغيرة */
        border-radius: 20px; /* تقليل الحواف الدائرية قليلاً للشاشات الصغيرة */
        min-height: 100px; /* تقليل الحد الأدنى للارتفاع للشاشات الصغيرة */
    }

    .hero {
        margin-bottom: 40px; /* تقليل المساحة السفلية للشاشات الصغيرة */
        padding: var(--spacing-14) 0 var(--spacing-22) 0; /* تقليل الـ padding أكثر للشاشات الصغيرة */
        min-height: 420px; /* تقليل الحد الأدنى للارتفاع للشاشات الصغيرة */
        border-radius: 0 0 25px 25px; /* تقليل الحواف الدائرية للشاشات الصغيرة */
    }

    .section {
        padding: var(--spacing-12) 0;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }

    .destinations-grid {
        grid-template-columns: 1fr;
    }
}

/* Extra Small Screens - Mobile Phones */
@media (max-width: 480px) {
    .hotel-price {
        gap: var(--spacing-2);
    }

    .price {
        font-size: var(--font-size-xl);
    }

    .price-unit {
        font-size: var(--font-size-xs);
    }

    .hotel-price .btn {
        padding: var(--spacing-2) var(--spacing-3);
        font-size: var(--font-size-sm);
    }

    .hotel-info {
        padding: var(--spacing-3);
    }

    .hotel-title {
        font-size: var(--font-size-lg);
    }

    .hotel-description {
        font-size: var(--font-size-xs);
        line-height: 1.4;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }

    .feature-card {
        padding: var(--spacing-6);
    }

    .feature-icon {
        width: 60px;
        height: 60px;
        font-size: var(--font-size-xl);
    }

    .guest-dropdown {
        position: fixed;
        top: auto;
        bottom: -100%;
        left: 0;
        right: 0;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        max-height: 50vh;
        overflow-y: auto;
        display: none !important;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        transform: translateY(100%);
        pointer-events: none;
    }

    .guest-selector.active .guest-dropdown {
        bottom: 0;
        display: block !important;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* Search Page Styles */
.search-header {
    background: var(--gradient-primary);
    color: #111;
    padding: var(--spacing-8) 0;
}

.search-summary h1 {
    color: var(--white);
    margin-bottom: var(--spacing-2);
}

.search-summary p {
    opacity: 0.9;
    font-size: var(--font-size-lg);
}

.quick-search-form {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-4);
    margin-top: var(--spacing-6);
    box-shadow: var(--shadow-lg);
}

.search-inputs {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    gap: var(--spacing-3);
    align-items: center;
}

.search-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-group i {
    position: absolute;
    left: var(--spacing-3);
    color: var(--gray-500);
    z-index: 1;
}

.search-input-group input,
.search-input-group select {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-10);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
}

.results-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--spacing-8);
    margin-top: var(--spacing-8);
}

/* Filters Sidebar */
.filters-sidebar {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    height: fit-content;
    position: sticky;
    top: var(--spacing-8);
}

.filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--gray-200);
}

.filters-header h3 {
    margin: 0;
    color: var(--gray-900);
}

.clear-filters {
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    font-size: var(--font-size-sm);
    text-decoration: underline;
}

.filter-group {
    margin-bottom: var(--spacing-6);
}

.filter-group h4 {
    margin-bottom: var(--spacing-3);
    color: var(--gray-800);
    font-size: var(--font-size-base);
}

.price-range {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.price-range input {
    flex: 1;
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
}

.star-filters {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.star-filter {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
    padding: var(--spacing-2);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
}

.star-filter:hover {
    background: var(--gray-50);
}

.star-filter input {
    margin: 0;
}

.btn-block {
    width: 100%;
}

/* Results Content */
.results-content {
    min-height: 500px;
}

.sort-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-4);
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.results-count {
    font-weight: 600;
    color: var(--gray-800);
}

.sort-options {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.sort-options label {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.sort-options select {
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--white);
}

/* Hotel Result Cards */
.hotels-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.hotel-result-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all var(--transition-normal);
    display: grid;
    grid-template-columns: 250px 1fr auto;
    gap: var(--spacing-4);
}

.hotel-result-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.hotel-result-card .hotel-image {
    height: 200px;
    overflow: hidden;
}

.hotel-result-card .hotel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.hotel-result-card:hover .hotel-image img {
    transform: scale(1.05);
}

.hotel-details {
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hotel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-3);
}

.hotel-name {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin: 0;
    color: var(--gray-900);
}

.hotel-rating {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.rating-score {
    background: var(--primary-color);
    color: var(--white);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.hotel-location {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--gray-600);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-3);
}

.hotel-booking {
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    text-align: right;
    min-width: 200px;
}

.price-section {
    margin-bottom: var(--spacing-4);
}

.price-section .price {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--primary-color);
}

.price-section .price-unit {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.booking-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    width: 100%;
}

.booking-actions .btn {
    width: 100%;
    justify-content: center;
}

/* No Results */
.no-results {
    text-align: center;
    padding: var(--spacing-16);
    color: var(--gray-600);
}

.no-results i {
    font-size: 4rem;
    margin-bottom: var(--spacing-4);
    color: var(--gray-400);
}

.no-results h3 {
    margin-bottom: var(--spacing-2);
    color: var(--gray-800);
}

/* Mobile Responsive for Search Page */
@media (max-width: 768px) {
    .search-inputs {
        grid-template-columns: 1fr;
        gap: var(--spacing-3);
    }

    .results-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }

    .filters-sidebar {
        position: static;
        order: 2;
    }

    .hotel-result-card {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .hotel-result-card .hotel-image {
        height: 150px;
    }

    .hotel-booking {
        padding: var(--spacing-4);
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        min-width: auto;
    }

    .booking-actions {
        flex-direction: row;
        width: auto;
        gap: var(--spacing-2);
    }

    .booking-actions .btn {
        width: auto;
        padding: var(--spacing-2) var(--spacing-4);
        font-size: var(--font-size-sm);
    }

    .sort-bar {
        flex-direction: column;
        gap: var(--spacing-3);
        align-items: stretch;
    }

    .sort-options {
        justify-content: space-between;
    }
}

/* Hotel Detail Page Styles */
.hotel-hero {
    background: var(--gray-50);
    padding: var(--spacing-8) 0;
}

.hotel-hero-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-8);
    align-items: start;
}

.hotel-images .main-image {
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.hotel-images .main-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.hotel-info-header {
    background: var(--white);
    padding: var(--spacing-8);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
}

.hotel-title-section h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-4);
    color: var(--gray-900);
}

.hotel-meta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.hotel-rating {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.rating-score {
    background: var(--primary-color);
    color: var(--white);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-lg);
    font-weight: 600;
}

.review-count {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
}

.hotel-location {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--gray-600);
}

.hotel-actions {
    margin-top: var(--spacing-6);
    padding-top: var(--spacing-6);
    border-top: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4);
}

/* محاذاة الأزرار في صف واحد */
.hotel-actions .btn {
    width: 100%;
    max-width: 280px;
    margin: 0 !important; /* إزالة الهوامش الخارجية */
}

/* ترتيب الأزرار تحت بعضها البعض على جميع أحجام الشاشات */
@media (min-width: 768px) {
    .hotel-actions {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--spacing-4);
    }
    
    .hotel-actions .btn {
        width: 100%;
        max-width: 280px;
        flex: 0 0 auto;
    }
}

.price-from {
    margin-bottom: var(--spacing-4);
    text-align: center;
}

.price-from .label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    margin-bottom: var(--spacing-1);
}

.price-from .price {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--primary-color);
}

.price-from .unit {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

/* Hotel Details Layout */
.hotel-details {
    padding: var(--spacing-12) 0;
}

.details-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-8);
}

.hotel-main-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.content-section {
    background: var(--white);
    padding: var(--spacing-8);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
}

.content-section h2 {
    margin-bottom: var(--spacing-6);
    color: var(--gray-900);
    font-size: var(--font-size-2xl);
}

/* Amenities Grid */
.amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-4);
}

.amenity-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
}

.amenity-item i {
    color: var(--success-color);
    font-size: var(--font-size-sm);
}

/* Rooms Grid */
.rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-6);
}

.room-card {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    transition: all var(--transition-normal);
}

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

.room-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-4);
}

.room-header h3 {
    font-size: var(--font-size-xl);
    margin: 0;
    color: var(--gray-900);
}

.room-price {
    text-align: right;
}

.room-price .price {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--primary-color);
}

.room-price .unit {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.room-description {
    color: var(--gray-600);
    margin-bottom: var(--spacing-4);
    line-height: 1.6;
}

.room-details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.room-detail {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--gray-600);
    font-size: var(--font-size-sm);
}

.room-detail i {
    color: var(--primary-color);
    width: 16px;
}

.room-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

.room-amenities .amenity {
    background: var(--gray-100);
    color: var(--gray-700);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
}

/* Room Cards */
.room-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: all var(--transition-normal);
    margin-bottom: var(--spacing-6);
}

.room-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.rooms-grid {
    display: grid;
    gap: var(--spacing-6);
}

@media (min-width: 768px) {
    .rooms-grid {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    }
}

/* Reviews */
.reviews-summary {
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-6);
    border-bottom: 1px solid var(--gray-200);
}

.rating-overview {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.rating-score-large {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
}

.rating-details .stars {
    margin-bottom: var(--spacing-2);
}

.reviews-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.review-item {
    padding-bottom: var(--spacing-6);
    border-bottom: 1px solid var(--gray-200);
}

.review-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-3);
}

.reviewer-info h4 {
    margin: 0 0 var(--spacing-1);
    font-size: var(--font-size-base);
    color: var(--gray-900);
}

.reviewer-location {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.review-rating {
    text-align: right;
}

.review-date {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    margin-left: var(--spacing-2);
}

.review-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-bottom: var(--spacing-2);
    color: var(--gray-900);
}

.review-text {
    color: var(--gray-700);
    line-height: 1.6;
    margin: 0;
}

/* Sidebar */
.hotel-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.sidebar-card {
    background: var(--white);
    padding: var(--spacing-6);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.sidebar-card h3 {
    margin-bottom: var(--spacing-4);
    color: var(--gray-900);
    font-size: var(--font-size-lg);
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.contact-item i {
    color: var(--primary-color);
    width: 16px;
}

.contact-item a {
    color: var(--gray-700);
    text-decoration: none;
}

.contact-item a:hover {
    color: var(--primary-color);
}

.map-container {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.booking-card {
    position: sticky;
    top: var(--spacing-8);
}

.quick-booking-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

/* Mobile Responsive for Hotel Page */
@media (max-width: 768px) {
    .hotel-hero-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }

    .hotel-images .main-image img {
        height: 250px;
    }

    .hotel-info-header {
        padding: var(--spacing-6);
    }

    .details-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }

    .hotel-sidebar {
        order: -1;
    }

    .content-section {
        padding: var(--spacing-6);
    }

    .amenities-grid {
        grid-template-columns: 1fr;
    }

    .rooms-grid {
        grid-template-columns: 1fr;
    }

    .room-header {
        flex-direction: column;
        gap: var(--spacing-2);
        align-items: flex-start;
    }

    .room-price {
        text-align: left;
    }

    .rating-overview {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-2);
    }

    .review-header {
        flex-direction: column;
        gap: var(--spacing-2);
    }

    .review-rating {
        text-align: left;
    }

    .booking-card {
        position: static;
    }
}

/* ===================================
   Tourism Services Navigation Bar
   =================================== */

.tourism-services-bar {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.95) 100%);
    border-bottom: 1px solid var(--gray-200);
    padding: 2rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(20px);
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.services-nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: nowrap;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 2rem;
}

.service-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1rem;
    border-radius: 15px;
    text-decoration: none;
    color: var(--gray-700);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background: var(--white);
    border: 2px solid var(--gray-100);
    box-shadow: var(--shadow-md);
    width: 140px; /* عرض ثابت لجميع الأزرار */
    height: 120px; /* ارتفاع ثابت لجميع الأزرار */
    justify-content: center; /* توسيط المحتوى عمودياً */
    flex-shrink: 0; /* منع تقليص الزر */
}

.service-nav-item:hover {
    color: var(--primary-color);
    background: var(--white);
    transform: translateY(-8px);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-xl);
}

.service-nav-item::after {
    content: '';
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.service-nav-item:hover::after {
    width: 80%;
}

.service-nav-item .service-icon {
    width: 45px;
    height: 45px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem; /* حجم ثابت وموحد لجميع الأيقونات */
    color: var(--white);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.service-nav-item .service-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--accent-color) 0%, #ff6b35 100%);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-nav-item .service-icon i {
    position: relative;
    z-index: 2;
    font-size: inherit; /* وراثة حجم الخط من العنصر الأب */
    width: 1em; /* عرض ثابت نسبي */
    height: 1em; /* ارتفاع ثابت نسبي */
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-nav-item:hover .service-icon {
    transform: scale(1.15) rotate(10deg);
    box-shadow: var(--shadow-xl);
}

.service-nav-item:hover .service-icon::before {
    transform: scale(1);
}

.service-nav-item span {
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0.5px;
    word-wrap: break-word; /* كسر الكلمات الطويلة */
    hyphens: auto; /* إضافة شرطات للكلمات الطويلة */
    max-width: 100%; /* ضمان عدم تجاوز العرض */
    overflow-wrap: break-word; /* كسر الكلمات عند الحاجة */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* تحديد عدد الأسطر إلى سطرين كحد أقصى */
    line-clamp: 2; /* Standard property for compatibility */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* إضافة نقاط في نهاية النص المقطوع */
    height: 2.4em; /* ارتفاع ثابت للنص (سطرين) */
}

/* Active state for current page */
.service-nav-item.active {
    color: var(--primary-color);
    background: var(--white);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.service-nav-item.active::after {
    width: 80%;
}

.service-nav-item.active .service-icon {
    background: var(--gradient-accent);
    transform: scale(1.1);
}

/* Responsive Design for Services Navigation */
@media (max-width: 1024px) {
    .services-nav {
        gap: 1.5rem;
        max-width: 600px;
    }

    .service-nav-item {
        width: 120px; /* عرض ثابت للشاشات المتوسطة */
        height: 110px; /* ارتفاع ثابت للشاشات المتوسطة */
        padding: 1rem 1rem;
    }

    .service-nav-item .service-icon {
        width: 40px;
        height: 40px;
        font-size: 1.3rem; /* حجم موحد للشاشات المتوسطة */
    }
}

@media (max-width: 768px) {
    .tourism-services-bar {
        padding: 1rem 0;
    }

    .services-nav {
        gap: 1.2rem;
        flex-wrap: wrap;
        max-width: 600px;
        padding: 0 1rem;
    }

    .service-nav-item {
        padding: 0.6rem 0.4rem;
        width: 105px; /* زيادة العرض قليلاً */
        height: 115px; /* زيادة الارتفاع لاستيعاب النص بشكل أفضل */
        flex: none; /* إزالة المرونة */
    }

    .service-nav-item .service-icon {
        width: 36px;
        height: 36px;
        font-size: 1.2rem; /* حجم موحد للشاشات الصغيرة */
        margin-bottom: 0.5rem; /* مسافة مناسبة بين الأيقونة والنص */
    }

    .service-nav-item span {
        font-size: 0.75rem;
        line-height: 1.2; /* تحسين المسافة بين الأسطر */
        height: auto; /* إزالة الارتفاع الثابت للنص */
        -webkit-line-clamp: unset; /* إزالة تحديد عدد الأسطر */
        line-clamp: unset; /* إزالة تحديد عدد الأسطر */
        overflow: visible; /* إظهار النص كاملاً */
        text-overflow: unset; /* إزالة النقاط */
        display: block; /* تغيير العرض لإظهار النص كاملاً */
        white-space: normal; /* السماح بكسر الأسطر */
    }
}

/* Hide services bar on mobile when scrolling down */
.tourism-services-bar.hide-on-scroll {
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
}

@media (max-width: 768px) {
    .tourism-services-bar {
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    }
}

@media (max-width: 480px) {
    .services-nav {
        gap: 0.8rem;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
    }

    .service-nav-item {
        padding: 0.5rem 0.3rem;
        width: 90px; /* زيادة العرض قليلاً */
        height: 110px; /* زيادة الارتفاع لاستيعاب النص بشكل أفضل */
        flex: none; /* إزالة المرونة */
    }

    .service-nav-item .service-icon {
        width: 32px;
        height: 32px;
        font-size: 1rem; /* حجم موحد للشاشات الصغيرة جداً */
        margin-bottom: 0.4rem; /* مسافة مناسبة بين الأيقونة والنص */
    }

    .service-nav-item span {
        font-size: 0.7rem;
        font-weight: 600;
        line-height: 1.2; /* تحسين المسافة بين الأسطر */
        height: auto; /* إزالة الارتفاع الثابت للنص */
        -webkit-line-clamp: unset; /* إزالة تحديد عدد الأسطر */
        line-clamp: unset; /* إزالة تحديد عدد الأسطر */
        overflow: visible; /* إظهار النص كاملاً */
        text-overflow: unset; /* إزالة النقاط */
        display: block; /* تغيير العرض لإظهار النص كاملاً */
        white-space: normal; /* السماح بكسر الأسطر */
    }
}

/* Pulse animation for active service */
@keyframes servicePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(74, 151, 130, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(74, 151, 130, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(74, 151, 130, 0);
    }
}

.service-nav-item.active .service-icon {
    animation: servicePulse 2s infinite;
}

/* Floating animation */
@keyframes serviceFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-3px);
    }
}

.service-nav-item:hover {
    animation: serviceFloat 2s ease-in-out infinite;
}

/* ===================================
   Tour Guides Page Styles
   =================================== */

.hero-small {
    background: var(--gradient-hero);
    color: var(--white);
    padding: 4rem 0 2rem;
    text-align: center;
}

.hero-small .hero-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.hero-small .hero-content p {
    font-size: 1.1rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

/* Search and Filter Styles */
.search-filters-card {
    background: var(--white);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    margin-top: -2rem;
    position: relative;
    z-index: 10;
}

.search-filters-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.filters-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.filter-group {
    display: flex;
    flex-direction: column;
}

.filter-label {
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.filter-label i {
    color: var(--primary-color);
    width: 16px;
}

.filter-input {
    padding: 0.75rem 1rem;
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: var(--white);
}

.filter-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(74, 151, 130, 0.1);
}

.filters-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}

.filters-actions .btn {
    padding: 0.875rem 2rem;
    font-weight: 600;
}

/* Results Header */
.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--gray-100);
}

.results-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.results-count {
    color: var(--gray-600);
    font-weight: 500;
}

/* Guides Grid */
.guides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
}

.guide-card {
    background: var(--white);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    transition: all 0.4s ease;
    cursor: pointer;
    border: 1px solid var(--gray-100);
    position: relative;
    overflow: hidden;
}

.guide-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.guide-card:hover::before {
    transform: scaleX(1);
}

.guide-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.guide-avatar {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
}

.guide-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--primary-color);
}

.guide-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--accent-color);
    color: var(--white);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    box-shadow: var(--shadow-md);
}

.guide-info {
    text-align: center;
}

.guide-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.guide-speciality {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.guide-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: 12px;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--gray-600);
}

.detail-item i {
    color: var(--primary-color);
    width: 16px;
    text-align: center;
}

.guide-rating {
    margin-bottom: 1rem;
}

.guide-rating .stars {
    margin-bottom: 0.25rem;
}

.guide-rating .stars .star {
    color: var(--accent-color);
}

.guide-rating .stars i:not(.star) {
    color: var(--gray-300);
}

.rating-text {
    font-size: 0.9rem;
    color: var(--gray-600);
}

.guide-price {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--gradient-primary);
    color: var(--white);
    border-radius: 12px;
}

.guide-price .price {
    font-size: 1.5rem;
    font-weight: 700;
}

.guide-price .price-unit {
    font-size: 0.9rem;
    opacity: 0.9;
}

.guide-actions {
    display: flex;
    gap: 0.75rem;
}

.guide-actions .btn {
    flex: 1;
    padding: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
}

/* No Results */
.no-results {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-600);
}

.no-results-icon {
    font-size: 4rem;
    color: var(--gray-400);
    margin-bottom: 1.5rem;
}

.no-results h3 {
    font-size: 1.5rem;
    color: var(--gray-700);
    margin-bottom: 1rem;
}

.no-results p {
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-small .hero-content h1 {
        font-size: 2rem;
    }

    .search-filters-card {
        margin: -1rem 1rem 0;
        padding: 1.5rem;
    }

    .filters-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .filters-actions {
        flex-direction: column;
    }

    .results-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .guides-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .guide-card {
        padding: 1.5rem;
    }

    .guide-details {
        padding: 0.75rem;
    }

    .guide-actions {
        flex-direction: column;
    }
}

/* ===================================
   Tour Guide Profile Page Styles
   =================================== */

.guide-hero {
    background: var(--gradient-hero);
    color: var(--white);
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

.guide-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

.guide-hero-content {
    display: flex;
    align-items: center;
    gap: 3rem;
    position: relative;
    z-index: 2;
}

.guide-hero-avatar {
    position: relative;
    flex-shrink: 0;
}

.guide-hero-avatar img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--shadow-xl);
}

.hero-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--accent-color);
    color: var(--white);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.guide-hero-info {
    flex: 1;
}

.guide-hero-name {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.guide-hero-speciality {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    font-weight: 500;
}

.guide-hero-stats {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    opacity: 0.8;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.stat-label .stars {
    margin-bottom: 0.25rem;
}

.stat-label .stars .star {
    color: var(--accent-color);
}

.stat-label .stars i:not(.star) {
    color: rgba(255, 255, 255, 0.3);
}

.guide-hero-price {
    margin-bottom: 2rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    display: inline-block;
}

.guide-hero-price .price {
    font-size: 2rem;
    font-weight: 700;
}

.guide-hero-price .price-unit {
    font-size: 1rem;
    opacity: 0.8;
}

.guide-hero-actions {
    display: flex;
    gap: 1rem;
}

.guide-hero-actions .btn {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Guide Details Grid */
.guide-details-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

.details-card {
    background: var(--white);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    border: 1px solid var(--gray-100);
}

.card-header {
    background: var(--gradient-primary);
    color: var(--white);
    padding: 1.5rem 2rem;
}

.card-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.card-content {
    padding: 2rem;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--gray-100);
}

.info-item:last-child {
    border-bottom: none;
}

.info-icon {
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.info-content {
    flex: 1;
}

.info-label {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin-bottom: 0.25rem;
}

.info-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
}

.bio-text {
    line-height: 1.8;
    color: var(--gray-700);
    font-size: 1rem;
}

.no-bio {
    color: var(--gray-500);
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

/* Experiences Timeline */
.experiences-section,
.reviews-section {
    margin-bottom: 3rem;
}

.section-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--gray-100);
}

.section-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.experiences-timeline {
    position: relative;
    padding-left: 2rem;
}

.experiences-timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--primary-color);
}

.timeline-item {
    position: relative;
    margin-bottom: 2rem;
    background: var(--white);
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-100);
}

.timeline-marker {
    position: absolute;
    left: -2.25rem;
    top: 1.5rem;
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    border-radius: 50%;
    border: 3px solid var(--white);
    box-shadow: var(--shadow-sm);
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.timeline-header h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-800);
    flex: 1;
}

.timeline-year {
    background: var(--primary-color);
    color: var(--white);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.timeline-company {
    color: var(--gray-600);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.timeline-description {
    color: var(--gray-700);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.timeline-duration {
    color: var(--gray-500);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Reviews Grid */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.review-card {
    background: var(--white);
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-100);
    transition: all 0.3s ease;
}

.review-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.reviewer-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.reviewer-avatar {
    width: 40px;
    height: 40px;
    background: var(--gray-200);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
}

.reviewer-details h5 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 0.25rem;
}

.review-date {
    font-size: 0.8rem;
    color: var(--gray-500);
}

.review-rating {
    display: flex;
    gap: 2px;
}

.review-rating .star {
    color: var(--accent-color);
}

.review-rating i:not(.star) {
    color: var(--gray-300);
}

.review-comment {
    color: var(--gray-700);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.review-verified {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--success-color);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
    .guide-hero {
        padding: 2rem 0;
    }

    .guide-hero-content {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }

    .guide-hero-avatar img {
        width: 150px;
        height: 150px;
    }

    .guide-hero-name {
        font-size: 2rem;
    }

    .guide-hero-stats {
        justify-content: center;
        gap: 1.5rem;
    }

    .guide-hero-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .guide-details-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .card-content {
        padding: 1.5rem;
    }

    .experiences-timeline {
        padding-left: 1.5rem;
    }

    .timeline-marker {
        left: -1.75rem;
    }

    .timeline-header {
        flex-direction: column;
        gap: 0.5rem;
    }

    .reviews-grid {
        grid-template-columns: 1fr;
    }
}

/* Room Availability Styles */
.room-option.room-unavailable {
    pointer-events: none;
}

.room-option input[type="radio"]:disabled {
    cursor: not-allowed;
}

.availability-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-top: var(--spacing-4);
    text-align: center;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.availability-badge.available {
    background-color: #dcfce7;
    color: #166534;
    border: 2px solid #22c55e;
}

.availability-badge.unavailable {
    background-color: #fef2f2;
    color: #dc2626;
    border: 2px solid #ef4444;
    font-weight: 700;
}

.availability-badge i {
    font-size: var(--font-size-sm);
}

.availability-badge small {
    font-weight: 400;
    opacity: 0.8;
}

.room-availability {
    margin-top: var(--spacing-4);
}

/* Booking Form Room Selection */
.rooms-selection {
    display: grid;
    gap: var(--spacing-4);
}

.room-option {
    cursor: pointer;
    transition: all var(--transition-normal);
}

.room-option.room-unavailable {
    opacity: 0.8;
    cursor: not-allowed;
}

.room-option.room-unavailable .room-card {
    background-color: #fafafa;
    border-color: #e5e5e5;
}

.room-option.room-unavailable .room-header h4 {
    color: #6b7280;
}

.room-option.room-unavailable .room-price .price {
    color: #9ca3af;
}

.room-option input[type="radio"] {
    display: none;
}

.room-option input[type="radio"]:checked + .room-card {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(74, 151, 130, 0.2);
    background-color: rgba(74, 151, 130, 0.02);
}

.room-option:not(.room-unavailable):hover .room-card {
    border-color: var(--primary-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Alert Styles */
.alert-error {
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
    border: 2px solid #dc2626 !important;
    padding: 15px 20px !important;
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-4);
    font-weight: 700 !important;
    font-size: 16px !important;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2) !important;
    border-left: 5px solid #dc2626 !important;
}

.alert-error i {
    color: #dc2626 !important;
    font-size: 18px !important;
    margin-right: 8px;
}

.alert-error::before {
    content: "";
}

/* Additional error alert classes for consistency */
.alert-danger {
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
    border: 2px solid #dc2626 !important;
    padding: 15px 20px !important;
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-4);
    font-weight: 700 !important;
    font-size: 16px !important;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2) !important;
    border-left: 5px solid #dc2626 !important;
}

.alert-danger i {
    color: #dc2626 !important;
    font-size: 18px !important;
    margin-right: 8px;
}

.alert-danger::before {
    content: "";
}

.alert-success {
    background-color: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-4);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.alert-success::before {
    content: "✅";
    font-size: var(--font-size-lg);
}

/* Date Search Form Styles */
.date-search-form {
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-8);
    box-shadow: var(--shadow-lg);
    transition: var(--transition-normal);
}

.date-search-form:hover {
    border-color: var(--primary-light);
    box-shadow: 0 10px 25px rgba(74, 151, 130, 0.15);
}

.search-dates-form {
    width: 100%;
}

.date-inputs-row {
    display: flex;
    gap: var(--spacing-4);
    align-items: end;
    flex-wrap: wrap;
}

.date-input-group {
    flex: 1;
    min-width: 200px;
}

.date-input-group label {
    display: block;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-sm);
}

.date-input-group input[type="date"] {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    transition: var(--transition-fast);
    background: var(--white);
    color: var(--gray-700);
}

.date-input-group input[type="date"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(74, 151, 130, 0.1);
}

.date-input-group input[type="date"]:hover {
    border-color: var(--primary-light);
}

.search-button-group {
    flex-shrink: 0;
}

.search-btn {
    padding: var(--spacing-3) var(--spacing-6);
    background: var(--gradient-primary);
    color: var(--white);
    border: none;
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: var(--transition-normal);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    min-height: 48px;
    box-shadow: var(--shadow-md);
}

.search-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.search-btn:active {
    transform: translateY(0);
}

.search-btn i {
    font-size: var(--font-size-sm);
}

/* Responsive Design for Date Search */
@media (max-width: 768px) {
    .date-inputs-row {
        flex-direction: column;
        gap: var(--spacing-4);
    }
    
    .date-input-group {
        min-width: 100%;
    }
    
    .search-button-group {
        width: 100%;
    }
    
    .search-btn {
        width: 100%;
        justify-content: center;
    }
    
    .date-search-form {
        padding: var(--spacing-4);
    }
}

@media (max-width: 480px) {
    .date-search-form {
        margin: 0 -var(--spacing-4) var(--spacing-6) -var(--spacing-4);
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}