/* ============================================
   ISS Locator - Professional Theme Styles
   ============================================ */

/* Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600;700&display=swap');

/* CSS Variables */
:root {
    --iss-primary: #0096ff;
    --iss-secondary: #00d4ff;
    --iss-dark: #0a0e27;
    --iss-darker: #050816;
    --iss-accent: #ff6b35;
    --iss-text: #e8f4f8;
    --iss-text-muted: #a0b8c4;
    --iss-card-bg: rgba(10, 14, 39, 0.8);
    --iss-card-border: rgba(0, 150, 255, 0.3);
    --iss-shadow: rgba(0, 150, 255, 0.2);
}

/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Rajdhani', sans-serif;
    background: linear-gradient(135deg, var(--iss-darker) 0%, var(--iss-dark) 50%, #0f1a2e 100%);
    color: var(--iss-text);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    padding-top: 80px;
    padding-bottom: 80px;
}

/* Animated Stars Background */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 0;
    pointer-events: none;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    animation: twinkle 3s infinite;
}

.stars::before {
    box-shadow: 
        100px 200px white,
        300px 100px white,
        500px 300px white,
        700px 150px white,
        900px 250px white,
        1100px 80px white,
        1300px 180px white,
        200px 400px white,
        400px 500px white,
        600px 450px white,
        800px 350px white,
        1000px 480px white,
        1200px 420px white,
        150px 600px white,
        350px 700px white,
        550px 650px white,
        750px 750px white,
        950px 680px white,
        1150px 720px white;
    animation-delay: 0s;
}

.stars::after {
    box-shadow: 
        150px 250px white,
        350px 150px white,
        550px 350px white,
        750px 200px white,
        950px 300px white,
        1150px 130px white,
        250px 450px white,
        450px 550px white,
        650px 500px white,
        850px 400px white,
        1050px 530px white,
        1250px 470px white,
        200px 650px white,
        400px 750px white,
        600px 700px white,
        800px 800px white,
        1000px 730px white;
    animation-delay: 1.5s;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* Navigation Bar */
.iss-navbar {
    background: rgba(5, 8, 22, 0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--iss-card-border);
    padding: 1rem 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.iss-logo {
    width: 40px;
    height: 40px;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.brand-text {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    background: linear-gradient(135deg, var(--iss-primary), var(--iss-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.navbar-nav .nav-link {
    color: var(--iss-text) !important;
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0 0.5rem;
    padding: 0.5rem 1rem !important;
    border-radius: 6px;
    transition: all 0.3s ease;
    position: relative;
}

.navbar-nav .nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--iss-primary);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.navbar-nav .nav-link:hover::before {
    width: 80%;
}

.navbar-nav .nav-link:hover {
    color: var(--iss-secondary) !important;
    background: rgba(0, 150, 255, 0.1);
}

/* Hero Section */
.hero-section {
    position: relative;
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    z-index: 1;
}

.hero-content {
    z-index: 2;
    position: relative;
}

.hero-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 3.5rem;
    line-height: 1.2;
    text-shadow: 0 0 30px rgba(0, 150, 255, 0.5);
}

.hero-subtitle {
    font-size: 1.3rem;
    color: var(--iss-text-muted);
    line-height: 1.6;
    max-width: 90%;
}

.hero-stats {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
    padding: 1rem;
    background: var(--iss-card-bg);
    border: 1px solid var(--iss-card-border);
    border-radius: 12px;
    min-width: 120px;
    backdrop-filter: blur(10px);
}

.stat-number {
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--iss-primary);
    line-height: 1;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--iss-text-muted);
    margin-top: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ISS Illustration */
.iss-illustration {
    position: relative;
    z-index: 2;
}

.iss-image {
    width: 100%;
    max-width: 500px;
    filter: drop-shadow(0 0 30px rgba(0, 150, 255, 0.6));
    animation: orbit 20s linear infinite;
}

.orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    border: 2px dashed rgba(0, 150, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: rotate 30s linear infinite;
}

@keyframes orbit {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

@keyframes rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Buttons */
.btn-iss-primary {
    background: linear-gradient(135deg, var(--iss-primary), var(--iss-secondary));
    border: none;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 0.75rem 2rem;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--iss-shadow);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
}

.btn-iss-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 150, 255, 0.4);
    color: white;
}

.btn-iss-secondary {
    background: transparent;
    border: 2px solid var(--iss-primary);
    color: var(--iss-primary);
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.btn-iss-secondary:hover {
    background: var(--iss-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--iss-shadow);
}

/* Page Titles */
.page-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 3rem;
    color: white;
    text-shadow: 0 0 20px rgba(0, 150, 255, 0.5);
}

.page-subtitle {
    font-size: 1.2rem;
    color: var(--iss-text-muted);
}

/* Map Page */
.map-page {
    position: relative;
    min-height: calc(100vh - 80px);
    z-index: 1;
}

/* Data Cards */
.iss-data-card,
.iss-info-card {
    background: var(--iss-card-bg);
    border: 1px solid var(--iss-card-border);
    border-radius: 16px;
    padding: 0;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.card-header-custom {
    background: linear-gradient(135deg, rgba(0, 150, 255, 0.2), rgba(0, 212, 255, 0.1));
    padding: 1.5rem;
    border-bottom: 1px solid var(--iss-card-border);
}

.card-title-custom {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--iss-primary);
    margin: 0;
    display: flex;
    align-items: center;
}

.card-body-custom {
    padding: 1.5rem;
}

.data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(0, 150, 255, 0.1);
}

.data-row:last-child {
    border-bottom: none;
}

.data-label {
    font-size: 1rem;
    color: var(--iss-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.data-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--iss-secondary);
}

.info-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    color: var(--iss-primary);
    margin-bottom: 1rem;
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-list li {
    padding: 0.5rem 0;
    color: var(--iss-text);
    border-bottom: 1px solid rgba(0, 150, 255, 0.1);
}

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

.info-list li strong {
    color: var(--iss-secondary);
}

/* Map Container */
.map-container {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

/* Info Page */
.info-page {
    position: relative;
    min-height: calc(100vh - 80px);
    z-index: 1;
}

.info-card {
    background: var(--iss-card-bg);
    border: 1px solid var(--iss-card-border);
    border-radius: 16px;
    padding: 2rem;
    height: 100%;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 150, 255, 0.3);
    border-color: var(--iss-primary);
}

.info-icon {
    color: var(--iss-primary);
    margin-bottom: 1rem;
}

.info-card-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--iss-primary);
    margin-bottom: 1rem;
}

.info-card-text {
    color: var(--iss-text);
    line-height: 1.8;
    font-size: 1.05rem;
}

/* Timeline */
.timeline-card {
    background: var(--iss-card-bg);
    border: 1px solid var(--iss-card-border);
    border-radius: 16px;
    padding: 2rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.timeline-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--iss-primary);
    margin-bottom: 2rem;
    text-align: center;
}

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

.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--iss-primary), var(--iss-secondary));
}

.timeline-item {
    position: relative;
    margin-bottom: 3rem;
    padding-left: 3rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 0.5rem;
    width: 16px;
    height: 16px;
    background: var(--iss-primary);
    border-radius: 50%;
    border: 3px solid var(--iss-dark);
    box-shadow: 0 0 10px var(--iss-primary);
}

.timeline-year {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--iss-secondary);
    margin-bottom: 0.5rem;
}

.timeline-content h4 {
    font-family: 'Orbitron', sans-serif;
    color: var(--iss-primary);
    margin-bottom: 0.5rem;
}

.timeline-content p {
    color: var(--iss-text-muted);
    line-height: 1.6;
}

/* Footer */
.iss-footer {
    background: rgba(5, 8, 22, 0.95);
    border-top: 1px solid var(--iss-card-border);
    padding: 1.5rem 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.iss-footer p {
    color: var(--iss-text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.footer-link {
    color: var(--iss-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--iss-secondary);
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .page-title {
        font-size: 2rem;
    }
    
    .hero-stats {
        justify-content: center;
    }
    
    .stat-item {
        min-width: 100px;
    }
    
    .iss-image {
        max-width: 300px;
    }
    
    .timeline {
        padding-left: 1.5rem;
    }
    
    .timeline-item {
        padding-left: 2rem;
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--iss-darker);
}

::-webkit-scrollbar-thumb {
    background: var(--iss-primary);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--iss-secondary);
}