:root {  
    /* Primary Colors - Safari Green Theme */  
    --primary-color: #2d6a4f;  
    --primary-dark: #1b4332;  
    --primary-light: #40916c;  
    --primary-hover: #52b788;  
  
    /* Accent Colors - Safari Earth Tones */  
    --accent-color: #d4a574;  
    --accent-dark: #b8935f;  
    --accent-light: #e6c9a8;  
  
    /* Secondary Colors */  
    --secondary-color: #52796f;  
    --secondary-light: #74a89b;  
    --secondary-dark: #354f52;  
  
    /* Neutral Colors */  
    --background: #f8f9fa;  
    --surface: #ffffff;  
    --text-primary: #212529;  
    --text-secondary: #6c757d;  
    --text-muted: #adb5bd;  
    --border-color: #dee2e6;  
  
    /* Status Colors */  
    --success: #28a745;  
    --success-light: #d4edda;  
    --warning: #ffc107;  
    --warning-light: #fff3cd;  
    --danger: #dc3545;  
    --danger-light: #f8d7da;  
    --info: #17a2b8;  
    --info-light: #d1ecf1;  
  
    /* Shadows */  
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);  
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);  
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);  
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15);  
  
    /* Border Radius */  
    --radius-sm: 8px;  
    --radius-md: 12px;  
    --radius-lg: 16px;  
    --radius-xl: 24px;  
  
    /* Spacing */  
    --spacing-xs: 4px;  
    --spacing-sm: 8px;  
    --spacing-md: 16px;  
    --spacing-lg: 24px;  
    --spacing-xl: 32px;  
    --spacing-2xl: 48px;
  
    /* Transitions */  
    --transition-fast: all 0.2s ease;  
    --transition-base: all 0.3s ease-in-out;  
    --transition-slow: all 0.5s ease;  
  
    /* Custom Properties */  
    --header-height: 70px;  
    --sidebar-width: 280px;  
}  
  
/* ========== RESET & BASE STYLES ========== */  
*,  
*::before,  
*::after {  
    margin: 0;  
    padding: 0;  
    box-sizing: border-box;  
}  
  
html {  
    scroll-behavior: smooth;  
}  
  
body {  
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;  
    background: var(--background);  
    color: var(--text-primary);  
    line-height: 1.6;  
    overflow-x: hidden;  
    transition: color 0.3s, background-color 0.3s;  
}  
  
a {  
    text-decoration: none;  
    color: inherit;  
    transition: var(--transition-base);  
}  
  
img {  
    max-width: 100%;  
    height: auto;  
    display: block;  
    transition: opacity 0.3s ease;  
}  
  
button, select, input, textarea {  
    font-family: inherit;  
    cursor: pointer;  
    border: none;  
    outline: none;  
    transition: var(--transition-base);  
}  
  
/* ========== APP HEADER ========== */
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);

    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    padding: 0 var(--spacing-lg);
    z-index: 1000;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--spacing-lg);

    transition:
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        backdrop-filter 0.25s ease;
}
.app-header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
}
 
  
.app-header .logo {  
    font-size: 1.5em;  
    font-weight: bold;  
    color: var(--primary-color);  
    animation: slideInLeft 0.5s ease;
    white-space: nowrap;
}  
  
.menu-btn {  
    background: transparent;  
    padding: 10px;  
    border-radius: var(--radius-sm);  
    transition: var(--transition-fast);
    display: grid;
    place-items: center;
}  
  
.menu-btn:hover {  
    background: var(--background);  
    transform: scale(1.05);
}  
  
.menu-icon {  
    font-size: 24px;  
    color: var(--primary-color);  
    transition: color 0.3s;  
}  
  
.header-btn {  
    background: transparent;  
    padding: 10px;  
    border-radius: 50%;  
    position: relative;  
    transition: var(--transition-fast);
    display: grid;
    place-items: center;
}  
  
.header-btn:hover {  
    background: var(--background);  
    transform: scale(1.05);
}  
  
.icon-md {  
    color: var(--primary-color);  
    transition: color 0.3s;  
}  
  
/* ========== SIDEBAR (GRID LAYOUT) ========== */  
.sidebar {  
    position: fixed;  
    top: 0;  
    left: -280px;
    width: var(--sidebar-width);  
    height: 100vh;  
    background: var(--surface);  
    box-shadow: var(--shadow-xl);  
    z-index: 2000;  
    transition: left 0.3s ease, background-color 0.3s;  
    overflow-y: auto;  
    animation: slideInLeft 0.4s ease;
    display: grid;
    grid-template-rows: auto 1fr;
}  
  
.sidebar.active {  
    left: 0;  
}  
  
.sidebar-header {  
    padding: var(--spacing-lg);  
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));  
    color: white;  
    display: grid;
    gap: var(--spacing-sm);
}  
  
.sidebar-header h4 {  
    margin: 0;  
    font-weight: bold;  
    font-size: 1.2em;  
}  
  
.points-icon {  
    color: var(--accent-color);  
}  
  
.profile-edit-btn {  
    background: rgba(255, 255, 255, 0.2);  
    color: white;  
    border: 1px solid rgba(255, 255, 255, 0.3);  
    padding: 6px 16px;  
    font-size: 13px;  
    backdrop-filter: blur(10px);  
    border-radius: var(--radius-sm);  
    transition: background-color 0.3s;  
}  
  
.profile-edit-btn:hover {  
    background: rgba(255, 255, 255, 0.3);  
}  
  
.sidebar-menu {  
    padding: var(--spacing-md) 0;  
    display: grid;
    grid-auto-rows: min-content;
}  
  
.sidebar-menu-item {  
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;  
    gap: 12px;  
    padding: 14px var(--spacing-lg);  
    color: var(--text-primary);  
    transition: var(--transition-base);  
    border-left: 3px solid transparent;  
}  
  
.sidebar-menu-item:hover {  
    background: var(--background);  
    border-left-color: var(--primary-color);  
}  
  
.sidebar-menu-item i {  
    font-size: 20px;  
    color: var(--primary-color);  
    width: 24px;  
    transition: color 0.3s;  
}  
  
/* ========== OVERLAY ========== */  
.overlay {  
    position: fixed;  
    top: 0;  
    left: 0;  
    right: 0;  
    bottom: 0;  
    background: rgba(0, 0, 0, 0.5);  
    z-index: 1500;  
    opacity: 0;  
    visibility: hidden;  
    transition: var(--transition-base);  
}  
  
.overlay.active {  
    opacity: 1;  
    visibility: visible;  
}  
  
.content-area {
    min-height: calc(100vh - var(--header-height));
    transform: translateX(0);
    transition: transform 0.3s ease;
    will-change: transform;

}

  
/* Push content when sidebar is active */  
body.sidebar-active .content-area {  
    margin-left: var(--sidebar-width);  
}  
  
/* ========== HERO SECTION (FULL SCREEN GRID) ========== */  
.hero {  
    border-radius: 0;  
    overflow: hidden;  
    height: calc(100vh - var(--header-height));
    width: 100%;  
    display: grid;
    place-items: center;
    background-size: cover;  
    background-position: center;  
    background-attachment: fixed;
    position: relative;  
    animation: fadeIn 1s ease;
}  
  
.hero::before {  
    content: '';  
    position: absolute;  
    inset: 0;  
    background: linear-gradient(135deg, rgba(0,0,0,0.35), rgba(45, 106, 79, 0.3));
}  
  
.hero .content {  
    position: relative;  
    z-index: 1;  
    text-align: center;  
    color: white;  
    padding: var(--spacing-xl);
    max-width: 900px;
    display: grid;
    gap: var(--spacing-md);
}  
  
.hero h1 {  
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;  
    margin-bottom: var(--spacing-md);  
    text-shadow: 2px 4px 8px rgba(0,0,0,0.4);
    animation: fadeInUp 1s ease;
    letter-spacing: -0.5px;
}  
  
.hero p {  
    font-size: clamp(1rem, 2vw, 1.25rem);
    text-shadow: 1px 2px 4px rgba(0,0,0,0.4);
    max-width: 700px;  
    margin: 0 auto;  
    animation: fadeInUp 1.2s ease;
    line-height: 1.8;
}  
  
/* ========== SEARCH CARD (GRID LAYOUT) ========== */  
.search-card {  
    background: var(--surface);  
    border-radius: var(--radius-lg);  
    padding: var(--spacing-lg);  
    box-shadow: var(--shadow-md);  
    margin-bottom: var(--spacing-xl);  
    animation: slideInRight 0.5s ease;
    display: grid;
    gap: var(--spacing-md);
}  
  
.search-card h5 {  
    color: var(--primary-color);  
    margin-bottom: var(--spacing-md);  
    font-size: 1.3em;  
    font-weight: 600;  
}  
  
.search-card form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: var(--spacing-md);
    align-items: start;
}

.search-card .form-group {
    margin-bottom: 0;
    display: grid;
    gap: var(--spacing-xs);
}
  
.form-label {  
    font-weight: 600;  
    color: var(--text-primary);  
    margin-bottom: var(--spacing-sm);  
    display: block;  
}  
  
.form-select, .form-control {  
    width: 100%;  
    padding: 12px 16px;  
    border: 2px solid var(--border-color);  
    border-radius: var(--radius-md);  
    font-size: 15px;  
    transition: var(--transition-base);  
    appearance: none;  
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");  
    background-repeat: no-repeat;  
    background-position: right 12px center;  
    background-size: 16px;  
}  
  
.form-select:focus, .form-control:focus {  
    border-color: var(--primary-color);  
    box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.1);  
}  
  
.input-group {  
    display: grid;
    grid-template-columns: auto 1fr;
}  
  
.input-group-text {  
    background: var(--primary-color);  
    border: 2px solid var(--primary-color);  
    border-right: none;  
    border-radius: var(--radius-md) 0 0 var(--radius-md);  
    padding: 12px 16px;  
    display: grid;
    place-items: center;
    color: white;  
}  
  
.input-group .form-control {  
    border-left: none;  
    border-radius: 0 var(--radius-md) var(--radius-md) 0;  
}  
  
.form-check {  
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;  
    gap: 8px;  
}  
  
.form-check-label {  
    font-size: 14px;  
    cursor: pointer;  
    color: var(--text-primary);  
}  
  
/* Submit Button */  
.search-card button[type="submit"] {  
    width: 100%;  
    padding: 14px;  
    background: var(--primary-color);  
    color: white;  
    border: none;  
    border-radius: var(--radius-md);  
    font-size: 16px;  
    font-weight: 600;  
    cursor: pointer;  
    transition: var(--transition-base);  
    box-shadow: var(--shadow-sm);
    grid-column: 1 / -1;
}  
  
.search-card button[type="submit"]:hover {  
    background: var(--primary-dark);  
    transform: translateY(-2px);  
    box-shadow: var(--shadow-md);  
}  
  
.search-card button[type="submit"]:active {  
    transform: translateY(0);  
}  
  
.search-card button[type="submit"]:disabled {  
    opacity: 0.6;  
    cursor: not-allowed;  
}  
  
/* ========== SECTION HEADERS ========== */  
.section-header {  
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 700;  
    color: var(--text-primary);  
    margin: var(--spacing-xl) 0 var(--spacing-lg);  
    padding-left: 16px;  
    border-left: 5px solid var(--primary-color);  
    position: relative;  
    animation: slideInLeft 0.6s ease;
    display: grid;
    grid-template-columns: 1fr;
}  
  
.section-header::before {  
    content: '';  
    position: absolute;  
    left: 0;  
    top: 0;  
    bottom: 0;  
    width: 5px;  
    background: var(--primary-color);  
    border-radius: 0 4px 4px 0;  
    opacity: 0;  
    animation: slideInLine 0.5s ease forwards;  
}  
  
@keyframes slideInLine {  
    from {  
        width: 0;  
        opacity: 1;  
    }  
    to {  
        width: 5px;  
        opacity: 1;  
    }  
}  
  
.tour-grid {  
    display: grid;  
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));  
    gap: var(--spacing-lg);  
    margin-bottom: var(--spacing-xl);  
    align-items: stretch;  
    margin: 20px;
    animation: slideInUp 0.7s ease;
}  
  
/* ========== TOUR CARD (GRID LAYOUT) ========== */  
.tour-card {  
    background: var(--surface);  
    border-radius: 16px;  
    overflow: hidden;  
    box-shadow: var(--shadow-md);  
    border: 1px solid var(--border-color);  
    display: grid;
    grid-template-rows: auto 1fr auto;
    transition: box-shadow 0.3s ease, transform 0.3s ease;  
}  
  
.tour-card:hover {  
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}  
  
.tour-card.selected {  
    border-color: var(--primary-color);  
    box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.18);  
}  
  
/* ========== IMAGE ========== */  
.tour-card-image {  
    height: 400px;  
    background: var(--background);  
    overflow: hidden;  
    position: relative;  
}  
  
.tour-card-image img {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
    display: block;  
    transition: transform 0.3s ease-out;  
}  
  
/* ========== CONTENT ========== */  
.tour-card-content {  
    padding: 16px;  
    flex-grow: 1;
    display: grid;
    gap: var(--spacing-sm);
    align-content: start;
}  
  
.tour-title {  
    font-size: 1.1rem;  
    font-weight: 700;  
    color: var(--text-primary);  
    margin-bottom: 6px;  
}  
  
.tour-description {  
    font-size: 14px;  
    line-height: 1.5;  
    color: var(--text-secondary);  
    margin-bottom: 12px;  
}  
  
/* ========== DETAILS ========== */  
.tour-details {  
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;  
    gap: 8px;  
}  
  
.tour-id {  
    font-size: 12px;  
    color: var(--text-muted);  
}  
  
.tour-price {  
    font-size: 17px;  
    font-weight: 700;  
    color: var(--primary-color);  
}  
  
/* ========== FOOTER ========== */  
.tour-footer {  
    padding: 0 16px 16px;  
}  
  
.select-tour-btn {  
    width: 100%;  
    padding: 10px;  
    border-radius: 12px;  
    background: var(--primary-color);  
    color: #fff;  
    font-weight: 600;  
    border: none;  
    display: grid;
    grid-template-columns: auto auto;
    place-items: center;
    gap: 8px;  
    cursor: pointer;  
    transition: var(--transition-base);  
}  
  
.select-tour-btn:hover {  
    background: var(--primary-dark);  
}  
  
.select-tour-btn:active {  
    transform: scale(0.98);  
}  
  
/* ========== USER INFO CARD ========== */  
.user-info-card {  
    background: var(--surface);  
    border-radius: var(--radius-lg);  
    padding: var(--spacing-lg);  
    box-shadow: var(--shadow-md);  
    margin-bottom: var(--spacing-lg);  
    animation: slideInRight 0.5s ease;
    display: grid;
    gap: var(--spacing-md);
}  
  
/* ========== LIST ITEMS ========== */  
.list-item {  
    background: var(--surface);  
    border: 1px solid var(--border-color);  
    border-radius: var(--radius-md);  
    padding: var(--spacing-md);  
    margin-bottom: var(--spacing-md);  
    transition: background-color 0.3s;  
    animation: slideInUp 0.6s ease;
    display: grid;
    gap: var(--spacing-sm);
}  
  
.list-item:hover {  
    background: var(--background);  
}  
  
.status-badge {  
    padding: 4px 8px;  
    border-radius: 20px;  
    font-size: 12px;  
    font-weight: 600;  
}  
  
.status-badge.confirmed {  
    background: var(--success-light);  
    color: var(--success);  
}  
  
.status-badge.pending {  
    background: var(--warning-light);  
    color: var(--warning);  
}  
  
.status-badge.cancelled {  
    background: var(--danger-light);  
    color: var(--danger);  
}  
  
/* ========== ROUTE CARDS (GRID LAYOUT) ========== */  
.route-card {  
    background: var(--surface);  
    border: 2px solid transparent;  
    border-radius: var(--radius-lg);  
    padding: var(--spacing-lg);  
    margin-bottom: var(--spacing-md);  
    transition: var(--transition-base);  
    animation: slideInUp 0.6s ease;
    display: grid;
    gap: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}  

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

.route-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.route-card:hover::before {
    transform: scaleY(1);
}

.route-card > div {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--spacing-md);
}

.route-card .d-flex.align-items-center:first-child {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    gap: var(--spacing-sm);
}

.route-card .fw-semibold {
    font-size: 1.1rem;
}

.route-card .bi-arrow-right {
    font-size: 1.2rem;
}

.route-card .d-flex.align-items-center.mt-2 {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.route-card .btn {
    white-space: nowrap;
    padding: 10px 20px;
    background-color: var(--primary-color);
    color: white;
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
}

.route-card .btn:hover {
    background-color: var(--primary-dark);
    transform: scale(1.05);
}
  
/* ========== OFFER CARD ========== */  
.offer-card {  
    background: var(--surface);  
    border: 1px solid var(--border-color);  
    border-radius: var(--radius-md);  
    padding: var(--spacing-md);  
    margin-bottom: var(--spacing-md);  
    transition: var(--transition-base);  
    animation: slideInUp 0.6s ease;
    display: grid;
    gap: var(--spacing-sm);
}  
  
/* ========== NOTIFICATIONS ========== */  
.notification-badge {  
    position: absolute;  
    top: 6px;  
    right: 6px;  
    background: var(--danger);  
    color: white;  
    border-radius: 50%;  
    width: 18px;  
    height: 18px;  
    display: grid;
    place-items: center;
    font-size: 10px;  
    font-weight: bold;  
    border: 2px solid white;  
    z-index: 10001;  
    animation: pulse 1.5s infinite;  
}  
  
.notification-badge.hidden {  
    display: none;  
}  
  
.notification-panel {  
    position: fixed;  
    top: var(--header-height);  
    right: 20px;  
    width: 350px;  
    max-height: 500px;  
    background: var(--surface);  
    border-radius: var(--radius-lg);  
    box-shadow: var(--shadow-xl);  
    border: 1px solid var(--border-color);  
    overflow: hidden;  
    transition: var(--transition-base), opacity 0.3s ease, transform 0.3s ease;  
    transform: translateY(-10px);  
    opacity: 0;  
    z-index: 10000;
    display: grid;
    grid-template-rows: auto 1fr;
}  
  
.notification-panel.show {  
    transform: translateY(0);  
    opacity: 1;  
}  
  
.notification-panel.hidden {  
    display: none;  
}  
  
.notification-header {  
    padding: 15px 20px;  
    background: var(--background);  
    border-bottom: 1px solid var(--border-color);  
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;  
}  
  
.notification-header h6 {  
    margin: 0;  
    color: var(--text-primary);  
    font-weight: 600;  
}  
  
.notification-actions {  
    display: grid;
    grid-auto-flow: column;
    gap: 8px;  
}  
  
.btn-link {  
    background: none;  
    border: none;  
    color: var(--text-secondary);  
    padding: 4px;  
    border-radius: 4px;  
    transition: var(--transition-base);  
}  
  
.btn-link:hover {  
    background: var(--border-color);  
    color: var(--text-primary);  
}  
  
.notification-list {  
    max-height: 400px;  
    overflow-y: auto;  
    padding: 0;  
    list-style: none;
    display: grid;
    grid-auto-rows: min-content;
}  
  
.no-notifications {  
    text-align: center;  
    padding: 40px 20px;  
    color: var(--text-muted);
    display: grid;
    place-items: center;
    gap: var(--spacing-sm);
}  
  
.no-notifications i {  
    font-size: 32px;  
    margin-bottom: 10px;  
    opacity: 0.5;  
}  
  
.notification-item {  
    padding: 12px 20px;  
    border-bottom: 1px solid var(--background);  
    cursor: pointer;  
    transition: background-color 0.3s ease;  
    position: relative;  
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;  
    gap: 10px;  
    animation: slideInUp 0.4s ease;  
}  
  
.notification-item:last-child {  
    border-bottom: none;  
}  
  
.notification-item:hover {  
    background: var(--background);  
}  
  
.notification-item.unread {  
    background: rgba(45, 106, 79, 0.05);  
    border-left: 3px solid var(--primary-color);  
}  

.notification-content {  
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;  
    gap: 10px;  
}  
  
.notification-icon {  
    width: 32px;  
    height: 32px;  
    border-radius: 50%;  
    display: grid;
    place-items: center;
    font-size: 14px;  
    flex-shrink: 0;  
    transition: transform 0.2s ease-in-out;  
}  
  
.notification-icon.success {  
    background: var(--success-light);  
    color: var(--success);  
}  
  
.notification-icon.error {  
    background: var(--danger-light);  
    color: var(--danger);  
}  
  
.notification-icon.warning {  
    background: var(--warning-light);  
    color: #856404;  
}  
  
.notification-icon.info {  
    background: var(--info-light);  
    color: var(--info);  
}  
  
.notification-text {  
    flex: 1;
    display: grid;
    gap: 4px;
}  
  
.notification-message {  
    font-size: 14px;  
    color: var(--text-primary);  
    margin: 0;  
    line-height: 1.4;  
}  
  
.notification-time {  
    font-size: 12px;  
    color: var(--text-muted);  
    margin-top: 4px;  
}  
  
.notification-close {  
    background: none;  
    border: none;  
    color: var(--text-secondary);  
    padding: 0;  
    width: 20px;  
    height: 20px;  
    display: grid;
    place-items: center;
    border-radius: 50%;  
    transition: var(--transition-base);  
}  
  
.notification-close:hover {  
    background: var(--border-color);  
    color: var(--text-primary);  
}  
  
/* ========== BOOKING MODAL (GRID LAYOUT) ========== */  
.booking-modal {  
    position: fixed;  
    top: 0;  
    left: 0;  
    right: 0;  
    bottom: 0;  
    background: rgba(0, 0, 0, 0.6);  
    display: grid;
    place-items: center;
    z-index: 10001;  
    padding: 20px;  
    opacity: 0;  
    visibility: hidden;  
    transition: var(--transition-base);  
}  
  
.booking-modal.show {  
    opacity: 1;  
    visibility: visible;  
}  
  
.booking-modal-content {  
    background: var(--surface);  
    border-radius: var(--radius-xl);  
    max-width: 600px;  
    width: 100%;  
    max-height: 90vh;  
    overflow-y: auto;  
    box-shadow: var(--shadow-xl);  
    animation: scaleIn 0.3s ease-out;
    display: grid;
    grid-template-rows: auto 1fr auto;
}  
  
.booking-modal-header {  
    text-align: center;  
    padding: var(--spacing-xl);  
    background: linear-gradient(135deg, var(--primary-light), var(--primary-color));  
    color: white;  
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    display: grid;
    gap: var(--spacing-md);
}  
  
.success-icon {  
    font-size: 48px;  
    display: block;  
    margin-bottom: var(--spacing-md);  
    animation: bounce 1s ease;  
}  
  
.booking-modal-header h2 {  
    margin: 0;  
    font-size: 1.8em;  
}  
  
.booking-modal-body {  
    padding: var(--spacing-xl);
    display: grid;
    gap: var(--spacing-md);
}  
  
.booking-reference {  
    background: var(--background);  
    padding: var(--spacing-md);  
    border-radius: var(--radius-md);  
    text-align: center;  
    font-weight: 600;  
    color: var(--primary-color);  
    margin-bottom: var(--spacing-lg);  
}  
  
.booking-details {  
    margin-bottom: var(--spacing-lg);
    display: grid;
    gap: var(--spacing-xs);
}  
  
.booking-detail-item {  
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;  
    padding: 12px 0;  
    border-bottom: 1px solid var(--border-color);  
}  
  
.booking-detail-item:last-child {  
    border-bottom: none;  
}  
  
.booking-detail-label {  
    color: var(--text-secondary);  
    font-size: 14px;  
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;  
    gap: 8px;  
}  
  
.booking-detail-value {  
    font-weight: 600;  
    color: var(--text-primary);  
    text-align: right;  
}  
  
.booking-modal-footer {  
    padding: 0 var(--spacing-xl) var(--spacing-xl);
    display: grid;
    gap: var(--spacing-md);
}  
  
.next-steps {  
    background: var(--info-light);  
    padding: var(--spacing-md);  
    border-radius: var(--radius-md);  
    margin-bottom: var(--spacing-md);  
}  
  
.next-steps h6 {  
    margin: 0 0 8px;  
    color: var(--info);  
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;  
    gap: 8px;  
}  
  
.next-steps p {  
    margin: 0;  
    font-size: 14px;  
    color: var(--text-primary);  
}  
  
.modal-actions {  
    display: grid;
    grid-auto-flow: column;
    gap: 10px;  
    justify-content: center;  
    flex-wrap: wrap;  
    margin-bottom: var(--spacing-md);  
}  
  
.modal-close-btn {  
    width: 100%;  
    padding: 14px;  
    background: var(--primary-color);  
    color: white;  
    border: none;  
    border-radius: var(--radius-md);  
    font-weight: 600;  
    display: grid;
    grid-template-columns: auto auto;
    place-items: center;
    gap: 8px;  
    transition: var(--transition-base);  
}  
  
.modal-close-btn:hover {  
    background: var(--primary-dark);  
}  
  
/* ========== DATA MANAGEMENT (GRID LAYOUT) ========== */  
#dataManagement {  
    background: var(--surface);  
    border: 2px solid var(--border-color);  
    border-radius: var(--radius-lg);  
    padding: var(--spacing-lg);  
    margin-top: var(--spacing-xl);  
    overflow-x: auto;  
    animation: slideInUp 0.7s ease;
    display: grid;
    gap: var(--spacing-md);
}  
  
#dataManagement h3 {  
    margin-bottom: var(--spacing-md);  
    color: var(--primary-color);  
    font-size: 1.5em;  
}  
  
#dataManagement table {  
    width: 100%;  
    border-collapse: collapse;  
    margin-bottom: var(--spacing-md);
    display: grid;
}  
  
#dataManagement th,  
#dataManagement td {  
    padding: 10px;  
    text-align: left;  
    border-bottom: 1px solid var(--border-color);  
    font-size: 0.9em;  
}  
  
#dataManagement th {  
    background: var(--background);  
    font-weight: 600;  
    color: var(--text-primary);  
}  
  
#dataManagement tr:hover {  
    background: var(--background);  
}  
  
#dataManagement .data-actions {  
    display: grid;
    grid-auto-flow: column;
    gap: 6px;  
}  

.btn-group-sm {  
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-sm);
}  

#dataManagement .btn-group-sm button {
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition-base);
    display: grid;
    grid-template-columns: auto 1fr;
    place-items: center;
    gap: var(--spacing-sm);
}

#dataManagement small {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: var(--spacing-sm);
    background: var(--background);
    border-radius: var(--radius-sm);
}
  
/* ========== LOADING SPINNER ========== */  
.loading-spinner {  
    display: inline-block;  
    width: 24px;  
    height: 24px;  
    border: 3px solid rgba(255,255,255,0.3);  
    border-top-color: white;  
    border-radius: 50%;  
    animation: spin 0.6s linear infinite;  
}  
  
/* ========== UTILITY CLASSES ========== */  
.text-primary-color { color:var(--primary-color); }  
.text-secondary-color { color: var(--secondary-color); }  
.text-accent-color { color: var(--accent-color); }  
.text-muted { color: var(--text-muted); }  
.text-dark { color: var(--text-primary); }  
.text-white { color: white; }  
  
.bg-primary-color { background: var(--primary-color); }  
.bg-light { background: var(--background); }  
  
.fw-semibold { font-weight: 600; }  
.fw-bold { font-weight: 700; }  
  
.fs-11 { font-size: 11px; }  
.fs-12 { font-size: 12px; }  
.fs-14 { font-size: 14px; }  
  
.mb-1 { margin-bottom: 4px; }  
.mb-2 { margin-bottom: 8px; }  
.mb-3 { margin-bottom: 12px; }  
.mt-1 { margin-top: 4px; }  
.mt-2 { margin-top: 8px; }  
.me-1 { margin-right: 4px; }  
.me-2 { margin-right: 8px; }  
.me-3 { margin-right: 12px; }  
.ms-2 { margin-left: 8px; }  
.ms-3 { margin-left: 12px; }  
.mx-2 { margin-left: 8px; margin-right: 8px; }  
  
.p-1 { padding: 4px; }  
.p-2 { padding: 8px; }  
.p-3 { padding: 12px; }  
  
.d-flex { display: flex; }  
.d-block { display: block; }  
.align-items-center { align-items: center; }  
.align-items-start { align-items: flex-start; }  
.justify-content-between { justify-content: space-between; }  
.justify-content-center { justify-content: center; }  
  
.text-center { text-align: center; }  
  
.rounded-3 { border-radius: var(--radius-md); }  
  
.w-100 { width: 100%; }  
  
.small { font-size: 14px; }  
  
.border { border: 1px solid var(--border-color); }  
  
.btn-sm {  
    padding: 6px 10px;  
    font-size: 13px;  
    border-radius: var(--radius-sm);  
}  
  
.btn-outline-secondary {  
    background: transparent;  
    border: 1px solid var(--secondary-color);  
    color: var(--secondary-color);  
}  
  
.btn-outline-secondary:hover {  
    background: var(--secondary-color);  
    color: white;  
}  
  
.btn-outline-danger {  
    background: transparent;  
    border: 2px solid var(--danger);  
    color: var(--danger);  
}  
  
.btn-outline-danger:hover {  
    background: var(--danger);  
    color: white;
    transform: translateY(-2px);
}  
  
.btn-outline-warning {  
    background: transparent;  
    border: 1px solid var(--warning);  
    color: #856404;  
}  
  
.btn-outline-warning:hover {  
    background: var(--warning);  
    color: #856404;  
}  
  
/* ========== ANIMATIONS ========== */  
@keyframes pulse {  
    0%, 100% {  
        opacity: 1;  
    }  
    50% {  
        opacity: 0.5;  
    }  
}  
  
@keyframes spin {  
    to {  
        transform: rotate(360deg);  
    }  
}  
  
@keyframes slideIn {  
    from {  
        opacity: 0;  
        transform: translateX(100%);  
    }  
    to {  
        opacity: 1;  
        transform: translateX(0);  
    }  
}  
  
@keyframes slideOut {  
    from {  
        opacity: 1;  
        transform: translateX(0);  
    }  
    to {  
        opacity: 0;  
        transform: translateX(100%);  
    }  
}  
  
@keyframes slideUp {  
    from {  
        opacity: 0;  
        transform: translateY(50px);  
    }  
    to {  
        opacity: 1;  
        transform: translateY(0);  
    }  
}  
  
@keyframes bounce {  
    0%, 20%, 50%, 80%, 100% {  
        transform: translateY(0);  
    }  
    40% {  
        transform: translateY(-20px);  
    }  
    60% {  
        transform: translateY(-10px);  
    }  
}  
  
@keyframes fadeIn {  
    from {  
        opacity: 0;  
    }  
    to {  
        opacity: 1;  
    }  
}  
  
@keyframes fadeInUp {  
    from {  
        opacity: 0;  
        transform: translateY(20px);  
    }  
    to {  
        opacity: 1;  
        transform: translateY(0);  
    }  
}  
  
@keyframes scaleIn {  
    from {  
        opacity: 0;  
        transform: scale(0.9);  
    }  
    to {  
        opacity: 1;  
        transform: scale(1);  
    }  
}  
  
@keyframes slideInLeft {  
    from {  
        opacity: 0;  
        transform: translateX(-100%);  
    }  
    to {  
        opacity: 1;  
        transform: translateX(0);  
    }  
}  
  
@keyframes slideInRight {  
    from {  
        opacity: 0;  
        transform: translateX(100%);  
    }  
    to {  
        opacity: 1;  
        transform: translateX(0);  
    }  
}  

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
  
/* ========== TOAST NOTIFICATIONS (GRID LAYOUT) ========== */  
.toast-container {  
    position: fixed;  
    top: 20px;  
    right: 20px;  
    z-index: 9999;  
    max-width: 350px;
    display: grid;
    gap: 8px;
}  
  
.toast {  
    margin-bottom: 8px;  
    border-radius: var(--radius-md);  
    opacity: 0;  
    transform: translateX(100%);  
    transition: var(--transition-base);  
    font-family: inherit;  
    font-size: 13px;  
    line-height: 1.4;  
    min-width: 280px;  
    animation: slideIn 0.4s ease forwards;  
    box-shadow: var(--shadow-lg);  
}  
  
.toast.show {  
    opacity: 1;  
    transform: translateX(0);  
}  
  
.toast-success {  
    background: var(--surface);  
    border: 1px solid #c3e6cb;  
    border-left: 4px solid var(--success);  
}  
  
.toast-error {  
    background: var(--surface);  
    border: 1px solid #f5c6cb;  
    border-left: 4px solid var(--danger);  
}  
  
.toast-warning {  
    background: var(--surface);  
    border: 1px solid #ffeaa7;  
    border-left: 4px solid var(--warning);  
}  
  
.toast-info {  
    background: var(--surface);  
    border: 1px solid #bee5eb;  
    border-left: 4px solid var(--info);  
}  
  
.toast-body {  
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;  
    padding: 10px;  
    gap: 8px;  
}  
  
.toast-icon {  
    font-size: 15px;  
    flex-shrink: 0;  
}  
  
.toast-success .toast-icon {  
    color: var(--success);  
}  
  
.toast-error .toast-icon {  
    color: var(--danger);  
}  
  
.toast-warning .toast-icon {  
    color: var(--warning);  
}  
  
.toast-info .toast-icon {  
    color: var(--info);  
}  
  
.toast-message {  
    flex: 1;  
    font-weight: 500;  
    font-size: 13px;  
    color: var(--text-primary);  
}  
  
.toast-close {  
    background: none;  
    border: none;  
    font-size: 16px;  
    cursor: pointer;  
    opacity: 0.7;  
    padding: 0;  
    margin-left: 6px;  
    width: 18px;  
    height: 18px;  
    display: grid;
    place-items: center;
    border-radius: 50%;  
    transition: var(--transition-base);  
    color: var(--text-secondary);  
}  
  
.toast-close:hover {  
    opacity: 1;  
    background: rgba(0,0,0,0.1);  
}  
  
/* ========== SCROLLBAR STYLING ========== */  
::-webkit-scrollbar {  
    width: 6px;  
    height: 6px;  
}  
  
::-webkit-scrollbar-track {  
    background: var(--background);  
}  
  
::-webkit-scrollbar-thumb {  
    background: var(--text-muted);  
    border-radius: 3px;  
}  
  
::-webkit-scrollbar-thumb:hover {  
    background: var(--text-secondary);  
}  
  
/* ========== FORM VALIDATION STATES ========== */  
.form-control:invalid:not(:placeholder-shown),  
.form-select:invalid:not(:placeholder-shown) {  
    border-color: var(--danger);  
    box-shadow: none;  
}  
  
.form-control:valid:not(:placeholder-shown),  
.form-select:valid:not(:placeholder-shown) {  
    border-color: var(--success);  
    box-shadow: none;  
}  
  
/* ========== ALERT COMPONENTS (GRID LAYOUT) ========== */  
.alert {  
    padding: 10px;  
    border-radius: var(--radius-md);  
    margin-bottom: 10px;  
    border-left: 4px solid;
    display: grid;
    gap: 6px;
}  
  
.alert h5 {  
    margin: 0 0 6px;  
    font-size: 1em;  
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;  
    gap: 6px;  
}  
  
.alert p {  
    margin: 0;  
    font-size: 13px;  
}  
  
.alert-warning {  
    background: var(--warning-light);  
    border-color: var(--warning);  
    color: #856404;  
}  
  
.alert-info {  
    background: var(--info-light);  
    border-color: var(--info);  
    color: #004085;  
}  
  
.alert-success {  
    background: var(--success-light);  
    border-color: var(--success);  
    color: #155724;  
}  
  
.alert-danger {  
    background: var(--danger-light);  
    border-color: var(--danger);  
    color: #721c24;  
}  
  
/* ========== DASHBOARD GRIDS ========== */  
.dashboard-grid {  
    display: grid;  
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));  
    gap: var(--spacing-lg);  
    margin-bottom: var(--spacing-xl);  
}  
  
/* ========== RESPONSIVE DESIGN ========== */  
@media (max-width: 768px) {  
    .app-header {  
        padding: 0 var(--spacing-md);
        grid-template-columns: auto 1fr auto;
    }  
  
    .hero {  
        height: 60vh;
    }  
  
    .hero h1 {  
        font-size: 1.8em;  
    }  
  
    .hero p {  
        font-size: 0.9em;  
    }  
  
    .search-card {  
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md);  
    }  

    .search-card form {
        grid-template-columns: 1fr;
    }
  
    .tour-grid {  
        grid-template-columns: 1fr;  
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-md);  
    }  
  
    .tour-card-image {  
        height: 200px;  
    }  
  
    .notification-panel {  
        width: calc(100% - 20px);  
        right: 10px;  
        top: var(--header-height);
    }  
  
    .booking-modal-content {  
        margin: 5px;  
    }  
  
    #dataManagement th,  
    #dataManagement td {  
        padding: 6px;  
        font-size: 0.8em;  
    }  
    
    #dataManagement {  
        padding: var(--spacing-sm);  
        margin-top: var(--spacing-md);  
    }  

    .btn-group-sm {
        grid-template-columns: 1fr;
    }
  
    .sidebar {  
        width: 220px;  
        left: -220px;  
    }  
  
    body.sidebar-active .content-area {  
        margin-left: 220px;  
    }  

    .route-card .d-flex.align-items-center:first-child {
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
    }

    .route-card .bi-arrow-right {
        transform: rotate(90deg);
    }

    .route-card > div {
        grid-template-columns: 1fr;
    }
}  

@media (max-width: 480px) {
    .app-header .logo {
        font-size: 1.2rem;
    }

    .hero h1 {
        font-size: 1.75rem;
    }

    .hero p {
        font-size: 0.95rem;
    }
}
  
/* ========== ACCESSIBILITY ========== */  
.visually-hidden {  
    position: absolute;  
    width: 1px;  
    height: 1px;  
    padding: 0;  
    margin: -1px;  
    overflow: hidden;  
    clip: rect(0, 0, 0, 0);  
    white-space: nowrap;  
    border: 0;  
}  
  
button:focus-visible,  
a:focus-visible,  
input:focus-visible,  
select:focus-visible {  
    outline: 2px solid var(--primary-color);  
    outline-offset: 2px;  
}  
  
/* ========== LOADING STATES ========== */  
.skeleton {  
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);  
    background-size: 200% 100%;  
    animation: loading 1.5s ease-in-out infinite;  
}  
  
@keyframes loading {  
    0% {  
        background-position: 200% 0;  
    }  
    100% {  
        background-position: -200% 0;  
    }  
}  
  
/* ========== CUSTOM CHECKBOX/RADIO ========== */  
.form-check-input {  
    width: 16px;  
    height: 16px;  
    border: 2px solid var(--border-color);  
    border-radius: 4px;  
    cursor: pointer;  
}  
  
.form-check-input:checked {  
    background-color: var(--primary-color);  
    border-color: var(--primary-color);  
}  
  
.form-check-input:focus {  
    box-shadow: 0 0 0 2px rgba(45, 106, 79, 0.2);  
}  
  
/* ========== BADGE STYLES ========== */  
.badge {  
    display: inline-block;  
    padding: 3px 6px;  
    font-size: 11px;  
    font-weight: 600;  
    border-radius: 3px;  
}  
  
.badge-primary {  
    background: var(--primary-color);  
    color: white;  
}  
  
.badge-success {  
    background: var(--success);  
    color: white;  
}  
  
.badge-warning {  
    background: var(--warning);  
    color: #856404;  
}  
  
.badge-danger {  
    background: var(--danger);  
    color: white;  
}  
  
/* ========== TOOLTIP (Optional Enhancement) ========== */  
[data-tooltip] {  
    position: relative;  
}  
  
[data-tooltip]::after {  
    content: attr(data-tooltip);  
    position: absolute;  
    bottom: 100%;  
    left: 50%;  
    transform: translateX(-50%);  
    padding: 5px 8px;  
    background: rgba(0, 0, 0, 0.9);  
    color: white;  
    font-size: 11px;  
    white-space: nowrap;  
    border-radius: 3px;  
    opacity: 0;  
    pointer-events: none;  
    transition: opacity 0.3s;  
    margin-bottom: 3px;  
}  
  
[data-tooltip]:hover::after {  
    opacity: 1;  
}  
  
/* ========== END OF STYLESHEET ========== */  
.btn-outline-primary {  
    background: transparent;  
    border: 1px solid var(--primary-color);  
    color: var(--primary-color);  
}  
  
.btn-outline-primary:hover {  
    background: var(--primary-color);  
    color: white;  
}  
  
.btn-outline-primary:disabled {  
    opacity: 0.6;  
    cursor: not-allowed;  
}