/* Define colors based on the icon */
:root {
    --primary-blue: #007BFF; /* A vibrant blue */
    --accent-yellow: #FFC107; /* A bright yellow */
    --dark-background: #333333; /* Darkish Gray Background */
    --form-background: #444444; /* Lighter gray for the form container */
    --text-color: #f0f0f0; /* Light text for contrast */
    --input-background: #2a2a2a; /* Darker input fields */
    --input-border: #666666; /* Slightly lighter border for inputs */
    --error-red: #E74C3C;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--dark-background);
    color: var(--text-color);
    min-height: 100vh;
}

/* Main content is now shown by default (Go logic handles hiding it) */
#main-content {
    display: flex; /* Changed from none */
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.icon-container {
    margin-bottom: 30px;
    text-align: center;
}

.icon {
    width: 100px;
    height: auto;
    display: block;
    margin: 0 auto;
}

h2 {
    color: var(--primary-blue);
    text-align: center;
    margin-bottom: 10px;
}

p {
    text-align: center;
    margin-bottom: 30px;
    color: #ccc;
    max-width: 600px;
}

form {
    max-width: 500px;
    width: 100%;
    padding: 30px;
    background-color: var(--form-background);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    border: 1px solid var(--primary-blue);
    box-sizing: border-box;
}

div {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--text-color);
}

/* Grouped all input types for consistent styling */
input[type="text"], input[type="password"], input[type="email"] {
    width: 100%;
    padding: 10px;
    font-size: 1em;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background-color: var(--input-background);
    color: var(--text-color);
    box-sizing: border-box;
}

/* Grouped all input types for consistent styling */
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {
    border-color: var(--primary-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.4);
}

input[type="submit"] {
    background-color: var(--primary-blue);
    color: #000000;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 100%;
}

input[type="submit"]:hover {
    background-color: var(--accent-yellow);
    color: #000000;
    transform: translateY(-2px);
}

/* Auth modal styles */
#auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

#auth-modal {
    background: var(--form-background);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--primary-blue);
    box-shadow: 0 5px 20px rgba(0,0,0,0.7);
    text-align: center;
    width: 90%;
    max-width: 400px;
    box-sizing: border-box;
}

#auth-modal h3 {
    margin-top: 0;
    color: var(--primary-blue);
}

#auth-modal input[type="text"] {
    width: 100%;
}

#auth-modal button {
    background-color: var(--primary-blue);
    color: #000000;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease;
    width: 100%;
    margin-top: 10px;
}

#auth-modal button:hover {
    background-color: var(--accent-yellow);
    color: #000000;
}

/* Styles for the info note */
.info-note {
    max-width: 500px;
    width: 100%;
    padding: 15px;
    margin-top: 20px;
    background-color: var(--form-background);
    border-radius: 8px;
    border-left: 4px solid var(--accent-yellow);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    box-sizing: border-box;
}

.info-note p {
    text-align: left;
    margin: 0;
    line-height: 1.6;
    color: #ddd;
}

.info-note strong {
    color: var(--accent-yellow);
}

/* --- STYLES FOR HELP ICONS AND TOOLTIPS --- */

/* This container holds the label and the (?) icon */
.label-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px; /* Matches the original label margin */
}

/* Override the label's bottom margin when it's in the new container */
.label-container label {
    margin-bottom: 0;
}

/* Styles the new info icon container */
.help-icon {
    /* No explicit width/height here; Font Awesome handles icon size */
    color: var(--accent-yellow); /* Sets the color of the 'i' icon */
    cursor: pointer;
    font-size: 1.2em; /* Makes the icon a bit larger */
    user-select: none; /* Prevents selecting the text */
    transition: transform 0.2s ease;
}

.help-icon:hover {
    transform: scale(1.1);
}

/* --- UPDATED STYLES for animated slide-down --- */

/* This is the base, hidden state for the help text */
.help-text {
    max-height: 0; /* Animated property */
    overflow: hidden; /* Hides content when closed */
    
    /* These properties are static but set for the box */
    background-color: var(--input-background); 
    border-left: 3px solid var(--primary-blue);
    border-radius: 4px;
    color: #ccc;
    font-size: 0.9em;
    line-height: 1.5;
    
    /* Set padding and margin to 0 when closed */
    padding: 0 12px;
    margin-top: 0;
    
    /* This is the animation! */
    transition: max-height 0.3s ease-in-out, 
                padding 0.3s ease-in-out, 
                margin 0.3s ease-in-out;
}

/* This is the new 'active' class that the script will add */
.help-text.active {
    max-height: 300px; /* Set to a large-enough value */
    padding: 12px; /* Animate padding */
    margin-top: 10px; /* Animate margin */
}

/* Styles the "Industry Term:" part */
.help-text strong {
    color: var(--accent-yellow); /* Uses your theme's color */
}

/* --- STYLES FOR FORM SECTIONS --- */

.form-section {
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 20px 20px 0 20px; /* Top/Sides padding, 0 bottom padding */
    margin-bottom: 25px; /* Space between fieldsets */
    background-color: var(--input-background); /* Darker box inside the form */
}

/* This makes sure the last 'div' inside a section has its margin */
.form-section div {
     margin-bottom: 20px;
}

.form-section legend {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--primary-blue);
    padding: 0 10px; /* Gives space around the legend text */
    margin-left: 5px; /* Aligns with padding */
}