/* Modern Gradient Styles for Flight Application */

:root { 
   /* ─── PRIMARY PALETTE ─────────────────────────────────────────────────── */ 
   /* Sky → Horizon */ 
   --color-primary-light: #2866c7;   /* soft sky */ 
   --color-primary-base:  #0D47A1;   /* clear day - darker */ 
   --color-primary-dark:  #0A2351;   /* twilight - darker */ 
   --card-background-light:  #f4f7ff;   /* twilight - darker */ 
 
   /* Teal ocean accents */ 
   --color-accent-light: #B2EBF2;    /* sea foam */ 
   --color-accent-base:  #006064;    /* tropical sea - darker */ 
   --color-accent-dark:  #00363A;    /* deep ocean - darker */ 
 
   /* Sunset coral for CTAs */ 
   --color-cta-light: #FFCCBC;       /* dawn glow */ 
   --color-cta-base:  #BF360C;       /* warm coral - darker */ 
   --color-cta-dark:  #7F0000;       /* ember - darker */ 
 
   /* ─── NEUTRAL SCALE ───────────────────────────────────────────────────── */ 
   --gray-100: #F5F5F5; 
   --gray-200: #E0E0E0; 
   --gray-300: #CCCCCC; 
   --gray-400: #BDBDBD; 
   --gray-500: #9E9E9E; 
   --gray-600: #616161; 
   --gray-700: #424242; 
   --gray-800: #212121; 
   --gray-900: #121212; 
 
   /* Text */ 
   --text-primary:   #121212; 
   --text-secondary: #212121; 
   --text-inactive:  #616161; 
   --text-on-dark:   #FFFFFF; 
 
   /* ─── UTILITY COLORS ──────────────────────────────────────────────────── */ 
   --success: #1B5E20; 
   --info:    #01579B; 
   --warning: #E65100; 
   --danger:  #B71C1C; 
 
   /* ─── GRADIENTS ───────────────────────────────────────────────────────── */ 
   /* Background hero or section accents - smoother transitions */ 
   --gradient-primary: linear-gradient(135deg, var(--color-primary-base) 0%, var(--color-primary-dark) 100%); 
   --gradient-cta:     linear-gradient(135deg, #BF360C 0%, #E65100 100%); 
   --gradient-alt:     linear-gradient(135deg, #0A2351 0%, #00363A 100%); 
   --gradient-success: linear-gradient(135deg, #1B5E20 0%, #0A3D0A 100%);
   --gradient-info:    linear-gradient(135deg, #01579B 0%, #003663 100%);
   --gradient-warning: linear-gradient(135deg, #E65100 0%, #BF360C 100%);
   --gradient-danger:  linear-gradient(135deg, #B71C1C 0%, #7F0000 100%);
 
   /* ─── SPACING & BORDERS ───────────────────────────────────────────────── */ 
   --radius-sm:   4px; 
   --radius-md:   8px; 
   --radius-lg:   16px; 
   --radius-round:4px; 
 
   /* Shadows */ 
   --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); 
   --shadow-md: 0 4px 6px rgba(0,0,0,0.10); 
   --shadow-lg: 0 10px 20px rgba(0,0,0,0.12); 
 
   /* Transitions */ 
   --transition-fast: all 0.15s ease-in-out; 
   --transition-base: all 0.3s ease-in-out; 
   --transition-slow: all 0.5s ease-in-out; 
 
   /* Legacy Variables (for backward compatibility) */
   --primary-color: var(--color-primary-dark);
   --secondary-color: var(--color-primary-base);
   --accent-color: var(--color-cta-base);
   --bg-white: #ffffff;
   --bg-light: var(--gray-100);
   --bg-gray: var(--gray-300);
   --text-white: var(--text-on-dark);
}

/* Modern Navbar Styles */
.navbar-modern {
    background: var( --bg-white);
    padding: 15px 0;
    box-shadow: var(--shadow-md);
}

.navbar-modern .navbar-brand {
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.navbar-modern .nav-link {
    color: var(--text-primary);
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--radius-round);
    transition: var(--transition-base);
}

.navbar-modern .nav-link:hover {
    color: var(--color-primary-base);
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar-modern .dropdown-toggle {
    color: var(--text-secondary);
    border: none;
    background: transparent;
}



.navbar-modern .btn-profile {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: var(--text-white);
    transition: var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.navbar-modern .btn-profile:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Authentication Button Styles */
.btn-auth {
    padding: 8px 16px;
    border-radius: var(--radius-round);
    background: var(--gradient-primary);
    color: var(--text-white);
    font-weight: 500;
    transition: var(--transition-base);
    border: none;
    box-shadow: var(--shadow-sm);
}

.btn-auth:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: var(--text-white);
}

.btn-auth-outline {
    padding: 8px 16px;
    border-radius: var(--radius-round);
    background: transparent;
    color: var(--color-primary-base);
    font-weight: 500;
    transition: var(--transition-base);
    border: 1px solid var(--color-primary-base);
}

.btn-auth-outline:hover {
    background: rgba(13, 71, 161, 0.1);
    transform: translateY(-2px);
    color: var(--color-primary-base);
}

/* Modern Footer Styles */
.footer-modern {
    background: linear-gradient(135deg, var(--color-primary-base) 0%, var(--color-primary-dark) 100%);
    color: var(--text-white);
    padding: 60px 0 30px;
    position: relative;
    overflow: hidden;
}



.footer-modern h5 {
    color: var(--text-white);
    font-weight: 600;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.footer-modern h5::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: var(--accent-color);
}

.footer-modern .nav-link {
    color: rgba(255, 255, 255, 0.7);
    padding: 8px 0;
    transition: var(--transition-base);
}

.footer-modern .nav-link:hover {
    color: var(--text-white);
    transform: translateX(5px);
}

.footer-modern .input-group {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-round);
    overflow: hidden;
    padding: 3px;
}

.footer-modern .form-control {
    background-color: transparent;
    border: none;
    color: var(--text-white);
    padding: 10px 15px;
}

.footer-modern .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.footer-modern .input-group .btn {
    background: var(--gradient-accent);
    border: none;
    color: var(--text-white);
    border-radius: var(--radius-round);
    padding: 10px 20px;
    font-weight: 500;
    transition: var(--transition-base);
}

.footer-modern .input-group .btn:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.footer-modern .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-white);
    transition: var(--transition-base);
    margin-right: 10px;
}

.footer-modern .social-icon:hover {
    background-color: var(--accent-color);
    transform: translateY(-3px);
}

.footer-modern .copyright {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

/* Modern Card Styles */
.card-modern {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
    overflow: hidden;
}

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

.card-modern .card-header {
    background: var(--gradient-primary);
    color: var(--text-white);
    border: none;
    padding: 20px;
}

.card-modern .card-body {
    padding: 25px;
}

/* Modern Button Styles */
.btn-gradient-primary {
    background: var(--gradient-primary);
    color: var(--text-white);
    border: none;
    border-radius: var(--radius-round);
    padding: 12px 25px;
    font-weight: 500;
    transition: var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.btn-gradient-primary:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.btn-gradient-secondary {
    background: var(--gradient-secondary);
    color: var(--text-white);
    border: none;
    border-radius: var(--radius-round);
    padding: 12px 25px;
    font-weight: 500;
    transition: var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.btn-gradient-secondary:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.btn-gradient-accent {
    background: var(--gradient-accent);
    color: var(--text-white);
    border: none;
    border-radius: var(--radius-round);
    padding: 12px 25px;
    font-weight: 500;
    transition: var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.btn-gradient-accent:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Modern Form Styles */
.form-control-modern {
    border: 1px solid var(--bg-gray);
    border-radius: var(--radius-md);
    padding: 12px 15px;
    transition: var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.form-control-modern:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(78, 67, 118, 0.1);
}

/* Modern Search Form */
.search-form-modern {
    border-radius: var(--radius-lg);
    padding: 30px;
    position: relative;
    z-index: 10;
}

.search-form-modern .form-group {
    position: relative;
    margin-bottom: 20px;
}

.search-form-modern label {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.search-form-modern .form-control {
    border-radius: var(--radius-md);
    padding: 12px 15px;
    border: 1px solid var(--bg-gray);
    transition: var(--transition-base);
}

.search-form-modern .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(78, 67, 118, 0.1);
}

.search-form-modern .btn-search,.modify-search-btn {
    background: linear-gradient(135deg, var(--color-primary-base) 0%, var(--color-primary-dark) 100%);
    color: var(--text-white);
    border: none;
    border-radius: var(--radius-round);
    padding: 14px 30px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: var(--transition-base);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.search-form-modern .btn-search:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

/* Modern Weather Card */
.weather-card-modern {
    background: var(--gradient-info);
    border-radius: var(--radius-lg);
    padding: 30px;
    color: var(--text-white);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.weather-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
    opacity: 0.2;
}

.weather-card-modern .weather-icon {
    background-color: rgba(255, 255, 255, 0.2);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-right: 15px;
    box-shadow: var(--shadow-md);
}

.weather-card-modern .temp-value {
    font-size: 3rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Modern Destination Card */
.destination-card-modern {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
    margin-bottom: 25px;
    position: relative;
}

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

.destination-card-modern .destination-image {
    height: 100%;
    min-height: 150px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.destination-card-modern .destination-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.4), transparent);
}

.destination-card-modern .destination-details {
    padding: 20px;
    background-color: var(--bg-white);
}

.destination-card-modern h5 {
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--text-primary);
}

.destination-card-modern .flight-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-color);
    text-align: right;
}

/* Modern News Card */
.news-card-modern {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
    margin-bottom: 30px;
    background-color: var(--bg-white);
}

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

.news-card-modern .news-image {
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.news-card-modern .news-content {
    padding: 25px;
}

.news-card-modern .news-category {
    display: inline-block;
    padding: 5px 12px;
    background: var(--gradient-accent);
    color: var(--text-white);
    border-radius: var(--radius-round);
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 15px;
}

.news-card-modern h5 {
    margin-bottom: 15px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.news-card-modern .news-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-secondary);
}