/* 1. FONT FACES */
@font-face { font-family: 'Honk'; src: url('fonts/Honk.ttf'); }
@font-face { font-family: 'PottaOne'; src: url('fonts/PottaOne.ttf'); }
@font-face { font-family: 'ZainBlack'; src: url('fonts/Zain-Black.ttf'); }
@font-face { font-family: 'ZainBold'; src: url('fonts/Zain-Bold.ttf'); }
@font-face { font-family: 'ZainExtraBold'; src: url('fonts/Zain-ExtraBold.ttf'); }
@font-face { font-family: 'ZainRegular'; src: url('fonts/Zain-Regular.ttf'); }

/* 2. BASE RESET */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

html { 
    scroll-behavior: smooth; 
}

body { 
    background-color: white; 
    overflow-x: hidden; 
}

/* 3. HERO SECTION */
.hero {
    height: 100vh;
    width: 100%;
    /* Replace with your high-res hero image path */
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('images/events_cover.png'); 
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    padding: 30px;
    color: white;
        mask-image: linear-gradient(to bottom, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 95%, transparent 100%);
}

.nav {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'ZainBold', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: auto;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding-bottom: 20px;
}

.brand-name {
    font-family: 'ZainExtraBold', sans-serif;
    font-size: 4.8rem;
    line-height: 0.85;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.tagline {
    font-family: 'ZainRegular', sans-serif;
    font-size: 1.1rem;
    line-height: 1.3;
    max-width: 320px;
    margin-bottom: 30px;
}

/* Container for each form row */
.form-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

/* Ensure the label doesn't wrap weirdly */
.form-group label {
    margin-top: 0; /* Remove that top margin we had before */
    flex: 1;
    font-family: 'ZainBold', sans-serif;
    font-size: 1.1rem;
    line-height: 1.2;
}

/* Keep the input at a consistent width on the right */
.form-group input, 
.form-group select {
    flex: 1.5; /* Makes the input slightly wider than the label */
    max-width: 200px; /* Prevents it from getting too long on desktop */
    margin-top: 0;
}
/* 4. BUTTONS & UI */
.cta-button {
    background-color: #E05A33;
    color: white;
    text-decoration: none;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 280px;
    border-radius: 4px;
    font-family: 'ZainBold', sans-serif;
    font-size: 1.2rem;
    transition: transform 0.2s;
}

.cta-button:active {
    transform: scale(0.98);
}

.arrow {
    background: white;
    color: #E05A33;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-weight: bold;
}

/* 5. SIMULATORS SECTION */
.simulators-container {
    padding: 50px 25px;
    background-color: white;
    color: black;
}

.main-title {
    font-family: 'PottaOne', cursive; 
    font-size: 2.5rem;  
    text-transform: uppercase;
    display: block;
        color: #ffffff; /* Pure white */

}

.sub-heading {
    font-family: 'ZainBold', sans-serif;
    font-size: 1.5rem;
    margin: 30px 0 15px 0;
    color: #f8fafc;
}

/* 6. DYNAMIC EVENT CARDS */
.event-card {
    width: 100%;
    height: 140px; 
    margin-bottom: 15px;
      position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: white;
}

.event-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.event-text {
    position: relative;
    z-index: 2;
    text-align: center;
}

.event-subtitle{
      font-family: 'ZainRegular', sans-serif;
       text-transform: uppercase;
      font-size: 14px;
    
}
.event-title {
    font-family: 'ZainBlack', sans-serif;
    font-size: 2rem;
    text-transform: uppercase;
    margin-bottom: -8px;
}

/* 7. FORM INPUTS */
label {
    display: block;
    margin-top: 15px;
    font-family: 'ZainBold', sans-serif;
    font-size: 1.2rem;
}

input[type="number"], select {
    width: 100%;
    padding: 12px;
    border: 4px solid black;
    font-family: 'ZainRegular', sans-serif;
    font-size: 1.1rem;
    outline: none;
    margin-top: 5px;
}

input[type="number"]:focus {
    border-color: #E05A33;
}

/* Remove Arrows from Number Input */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 1. The Select Box itself (The Value once chosen) */
#event-detail-page select {
    background: rgba(255, 255, 255, 0.1);
    color: white; /* This makes the SELECTED value white */
    border: 4px solid white;
    padding: 12px;
    font-family: 'ZainRegular', sans-serif;
    outline: none;
    appearance: none; /* Removes default browser styling to look cleaner */
    -webkit-appearance: none;
}

/* 2. The Options List (While the user is choosing) */
#event-detail-page select option {
    background-color: white; /* Solid background for the list */
    color: black;            /* Black text while choosing */
    font-family: 'ZainRegular', sans-serif;
}

/* 3. Label and Form Row spacing to keep it clean */
.form-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.form-group label {
    color: white; /* Labels stay white to be seen on the background */
    font-family: 'ZainBold';
}






/* 1. FORCE FULLSCREEN & BACKGROUND */
#event-detail-page {
    min-height: 100vh; /* Takes up full height of the device */
    width: 100%;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    padding: 40px 25px; /* Added more top padding for breathing room */
    color: white;
    box-sizing: border-box;
    /* The Magic: A mask that fades the bottom 20% of the container to black */
    mask-image: linear-gradient(to bottom, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 95%, transparent 100%);
}

/* 2. MATCH INPUTS TO DROPDOWN (BLURRED GLASS) */
#event-detail-page input[type="number"] {
    background: rgba(255, 255, 255, 0.1); /* Transparent white */
    backdrop-filter: blur(10px);          /* This creates the blur effect */
    -webkit-backdrop-filter: blur(10px);   /* Safari support */
    color: white;
    border: 3px solid white;               /* Slightly thinner for a cleaner look */
    padding: 12px;
    font-family: 'ZainRegular', sans-serif;
    font-size: 1.1rem;
    outline: none;
    border-radius: 0;                      /* Keeps it sharp and rectangular */
}



/* 4. FIX FOR INPUTS ON FOCUS */
#event-detail-page input:focus, 
#event-detail-page select:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: #E05A33; /* Orange highlight when typing */
}

/* Target the back link specifically */
.back-link {
    color: #E05A33 !important; /* Force it to be white */
    text-decoration: none;   /* Remove the default underline */
    font-family: 'ZainBold', sans-serif;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 20px;
    transition: color 0.3s ease;
}


#results-container h2 {
    font-family: 'ZainBold', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.result-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);di
    padding: 8px 0;
}

.result-label {
    color: #ddd;
    font-size: 0.95rem;
}

.result-value {
    color: #ffffff;
    font-weight: bold;
    font-size: 1.1rem;
}



#results-container {
      font-family: 'ZainRegular', sans-serif; /* Force the font */
   line-height: 1.6;
    background: rgba(0, 0, 0, 0.3); /* Darker tint to help the blur pop */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 25px;
    margin-top: 30px;
    backdrop-filter: blur(10px); /* The blur you requested */
    -webkit-backdrop-filter: blur(10px); /* Safari support */
}

/* This fixes the font color of the labels */
.result-label {
    color: #f2f2f2 !important; /* A nice light grey/silver */
    font-family: 'ZainRegular', sans-serif !important;
    font-size: 1.1rem;
}

.result-value {
    color: #ffffff !important; /* Pure white for the answers */
    font-family: 'ZainBold', sans-serif !important;
    font-size: 1.2rem;
}

/* The main dark background area */
.main-content-area {
    background-color: #0f1015; /* Deep dark blue-black */
    color: #ffffff;
    padding: 60px 20px 20px 20px;
    margin-top: -30px; /* Slight overlap with the girl image for a seamless look */
    border-top: 2px solid rgba(255, 255, 255, 0.1);
}

/* Section Title: SIMULATORS */
.section-title {
    font-family: 'ZainBold', sans-serif;
    font-size: 2.5rem;
    color: #ffffff;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* Disclaimer / Description Text */
.section-desc {
    font-family: 'ZainRegular', sans-serif;
    color: #cbd5e1; /* Soft silver */
    max-width: 800px;
    line-height: 1.5;
    margin-bottom: 40px;
    font-size: 1.1rem;
}

.section-desc strong {
    color: #ffcc00; /* Yellow/Gold for the Disclaimer tag */
}



/* 1. Set global page background to remove white areas */
body {
    margin: 0;
    padding: 0;
    background-color: #0d1117; /* Deepest black for the bottom */
    color: #ffffff;
}

/* 2. The Gradient Section that starts after the hero image */
.section-dark-gradient {
    /* Gradient starts at Deep Navy (matches blazer) and ends at Black */
    background: linear-gradient(to bottom, #161b22 0%, #0d1117 100%);
    margin-top: -30px; /* Overlap effect */
    padding: 60px 20px 100px 20px; /* Large bottom padding to keep footer area dark */
    min-height: 80vh; /* Ensures it fills the screen even if list is short */
}

/* 3. The Disclaimer Styling */
.disclaimer-box {
    display: block;
    padding: 15px;
    background: rgba(255, 204, 0, 0.05);
    border-left: 4px solid #ffcc00;
    color: #8892b0;
    font-size: 0.95rem;
    margin-top: 15px;
}

/* 4. Footer Styling - ensuring it stays dark */
footer {
    background-color: #0d1117; /* Must match the bottom of the gradient */
    padding: 40px 20px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

footer p {
  font-size: 14px;
    font-family: 'ZainRegular', sans-serif;
    color: #cbd5e1;
    margin: 0;
}

/* Styling for the section headers inside the list */
#current-events-list .sub-heading {
    font-family: 'ZainBold';
    color: #ffffff;
    text-transform: uppercase;
    font-size: 1.8rem;
    border-left: 4px solid #ffcc00; /* Gold accent bar */
    padding-left: 15px;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

/* Ensure the cards wrap nicely */
.event-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}