/* ==========================================
   Global Styles
   These styles apply to the entire page layout.
========================================== */

body {
    font-family: Arial, sans-serif; /* Set a clean, readable font. */
    margin: 0; /* Remove default browser spacing. */
    background-color: #f4f6f8; /* Light background for a modern look. */
    color: #333; /* Set a soft dark text color for readability. */
    line-height: 1.6; /* Improve spacing between lines of text. */
}


/* ==========================================
   Header and Navigation Styles
   Styles for the top navigation bar and title.
========================================== */

header {
    background-color: transparent; /* Remove full-width bar */
    padding: 20px;
}

/* Floating card container */
.header-container {
    max-width: 1000px;
    margin: 0 auto;
    background-color: #2c3e50;
    border-radius: 12px;
    padding: 15px 20px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); /* Soft floating effect */
}

/* Title */
header h1 {
    margin: 0;
    font-size: 1.5rem;
    color: white;
}

/* Nav container */
nav {
    display: flex;
    gap: 12px;
}

/* Nav links */
nav a {
    color: white;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: bold;

    transition: all 0.2s ease;
}

/* Hover effect */
nav a:hover {
    background-color: #34495e;
    transform: translateY(-1px);
}

/* Active page highlight */
nav a.active {
    background-color: #3498db;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
    .header-container {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    nav {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ==========================================
   Main Layout Styles
   Controls spacing and alignment of page content.
========================================== */

main {
    padding: 20px; /* Add space around main content. */
}


/* ==========================================
   Card Component Styles
   Used to create a clean container for each form.
========================================== */

.card {
    background: white; /* White background for contrast. */
    padding: 20px; /* Add spacing inside the card. */
    margin: 20px auto; /* Center the card horizontally. */
    max-width: 600px; /* Limit width for readability. */
    border-radius: 8px; /* Round the corners slightly. */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Add a soft, professional shadow. */
}


/* ==========================================
   Form Styles
   Styles for form layout and input elements.
========================================== */

.form-group {
    margin-bottom: 15px; /* Add space between form fields. */
}

label {
    display: block; /* Place label above input field. */
    margin-bottom: 5px; /* Add spacing below label. */
    font-weight: bold; /* Make labels easier to notice. */
}

input[type="text"],
input[type="email"],
input[type="number"],
select {
    width: 100%; /* Make inputs fill the container width. */
    padding: 8px; /* Add internal spacing. */
    border: 1px solid #ccc; /* Add a subtle border. */
    border-radius: 4px; /* Slightly round the corners. */
    box-sizing: border-box; /* Keep padding from affecting total width. */
}


/* ==========================================
   Radio Button Group Styles
   Arranges radio buttons neatly in a row.
========================================== */

.radio-group {
    display: flex; /* Align radio options horizontally. */
    gap: 15px; /* Add spacing between options. */
    flex-wrap: wrap; /* Allow wrapping on smaller screens. */
}

.radio-group label {
    display: flex; /* Keep radio button and text together. */
    align-items: center; /* Vertically align radio buttons and labels. */
    gap: 5px; /* Add spacing between radio button and text. */
    font-weight: normal; /* Keep radio labels from looking too heavy. */
}


/* ==========================================
   Button Styles
   Styles for the submit button.
========================================== */

button {
    background-color: #3498db; /* Blue button color. */
    color: white; /* White text for contrast. */
    border: none; /* Remove default border. */
    padding: 10px 16px; /* Add balanced spacing inside the button. */
    border-radius: 4px; /* Round the corners. */
    cursor: pointer; /* Show pointer on hover. */
    font-size: 1rem; /* Keep button text readable. */
}

button:hover {
    background-color: #2980b9; /* Darker blue on hover. */
}


/* ==========================================
   Focus Styles
   Improves accessibility and usability when typing.
========================================== */

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus,
button:focus {
    outline: 2px solid #3498db; /* Highlight selected field. */
    outline-offset: 2px; /* Add spacing around the outline. */
}


/* ==========================================
   Error and Success Message Styles
   Provides visual feedback to the user.
========================================== */

.error {
    color: red; /* Display error messages in red. */
    font-size: 0.9em; /* Slightly smaller text for errors. */
}

.success-message {
    background-color: #d4edda; /* Light green background. */
    color: #155724; /* Dark green text. */
    padding: 10px; /* Add spacing inside the message box. */
    border-radius: 4px; /* Round the corners. */
    margin-bottom: 15px; /* Add space below the message. */
}


/* ==========================================
   Footer Styles
   Styles for the page footer.
========================================== */

footer {
    text-align: center; /* Center footer text. */
    padding: 10px; /* Add spacing inside the footer. */
    background-color: #2c3e50; /* Match header color. */
    color: white; /* Ensure text is readable. */
    margin-top: 20px; /* Add breathing room above the footer. */
}