/* Basic Reset & General Body Styling */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* Modern system font stack */
    line-height: 1.6;
    padding: 20px;
    background-color: #f4f7f9; /* Lighter page background */
    color: #333;
}

h1 { /* Style the main page heading */
    text-align: center;
    color: #2c3e50;
    margin-bottom: 10px;
    padding-top: 20px; /* Add some space at the top */
}
body > p { /* Style the intro paragraph */
    text-align: center;
    color: #555;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

hr { /* Style the separator */
    max-width: 800px; /* Match form width roughly */
    margin: 40px auto;
    border: 0;
    height: 1px;
    background: #e0e0e0;
}


/* --- Modern Form Styling --- */

#resumeForm {
    max-width: 750px; /* Constrain width for better readability */
    margin: 40px auto; /* Center form on page with top/bottom margin */
    background: #ffffff;
    padding: 35px 50px; /* Increased padding inside the form */
    border-radius: 12px; /* Slightly larger radius */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); /* Softer, deeper shadow */
    border: 1px solid #e0e0e0; /* Subtle border */
}

#resumeForm h2 {
    font-size: 1.4em;
    color: #333;
    margin-bottom: 25px; /* More space below headings */
    padding-bottom: 10px;
    border-bottom: 1px solid #eee; /* Separator line */
    margin-top: 30px; /* Space above subsequent headings */
}
#resumeForm h2:first-of-type {
    margin-top: 0; /* No top margin for the very first heading */
}


#resumeForm label {
    display: block;
    margin: 20px 0 8px; /* Increased top margin for spacing, smaller bottom margin */
    font-weight: 600; /* Semi-bold */
    font-size: 0.9em;
    color: #444; /* Slightly softer black */
}

#resumeForm input[type="text"],
#resumeForm input[type="email"],
#resumeForm input[type="tel"],
#resumeForm input[type="url"],
#resumeForm textarea {
    width: 100%;
    padding: 12px 15px; /* Comfortable padding inside inputs */
    margin-bottom: 10px; /* Standard space below inputs */
    border: 1px solid #ccc; /* Lighter border */
    border-radius: 6px; /* Consistent radius */
    font-size: 1rem;
    background-color: #fcfcfc; /* Very light background */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
}

/* Style for input focus */
#resumeForm input[type="text"]:focus,
#resumeForm input[type="email"]:focus,
#resumeForm input[type="tel"]:focus,
#resumeForm input[type="url"]:focus,
#resumeForm textarea:focus {
    outline: none; /* Remove default browser outline */
    border-color: #0056b3; /* Use accent blue for focus border */
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15); /* Subtle focus glow */
    background-color: #fff;
}

#resumeForm textarea {
    min-height: 120px; /* Ensure decent height */
    resize: vertical; /* Allow vertical resize only */
    line-height: 1.5;
}


#resumeForm input[type="file"] {
    display: block; /* Make it block level */
    margin-top: 8px;
    padding: 10px;
    border: 1px dashed #ccc; /* Dashed border for file input */
    border-radius: 6px;
    background-color: #f9f9f9;
    cursor: pointer;
    font-size: 0.95em; /* Slightly smaller font */
    color: #555;
}
#resumeForm input[type="file"]::file-selector-button {
    /* Style the button inside the file input */
    padding: 8px 15px;
    border-radius: 4px;
    border: none;
    background-color: #e0e0e0;
    color: #333;
    cursor: pointer;
    margin-right: 15px;
    transition: background-color 0.2s ease;
}
#resumeForm input[type="file"]::file-selector-button:hover {
    background-color: #d5d5d5;
}


#resumeForm small {
    display: block;
    margin-top: -5px; /* Bring closer to the file input */
    margin-bottom: 15px;
    font-size: 0.85em;
    color: #666;
}

#resumeForm button {
    display: block; /* Make button block level */
    width: 100%; /* Full width button */
    background: linear-gradient(to right, #0056b3, #003d82); /* Gradient background */
    color: white;
    padding: 15px 25px; /* Larger padding */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: bold;
    text-transform: uppercase; /* Uppercase text */
    letter-spacing: 0.5px;
    margin-top: 30px; /* More space above the button */
    transition: all 0.3s ease; /* Smooth transition for hover */
    box-shadow: 0 4px 10px rgba(0, 86, 179, 0.2); /* Button shadow */
}

#resumeForm button:hover {
    background: linear-gradient(to right, #004a9a, #00306a); /* Darker gradient on hover */
    box-shadow: 0 6px 15px rgba(0, 86, 179, 0.3); /* Slightly larger shadow on hover */
    transform: translateY(-2px); /* Slight lift effect */
}
#resumeForm button:active {
    transform: translateY(0); /* Press down effect */
    box-shadow: 0 2px 5px rgba(0, 86, 179, 0.2);
}


/* --- Resume Output Template Styling (#resumeOutput) --- */
/* NOTE: THIS REMAINS THE SAME TO PRESERVE PDF APPEARANCE! */

.resume-container {
    width: 800px; /* Adjust width as needed - Should match PDF target */
    margin: 20px auto; /* Centering for potential preview */
    border: 1px solid #ccc; /* Optional border for structure */
    background-color: #fff; /* White background for content area */
    font-family: Arial, Helvetica, sans-serif; /* Specific font for PDF output */
    color: #333; /* Default text color for PDF output */
    /* display: none; */ /* Set by JS, but keep here for reference */
}

.resume-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align items to the top */
    background-color: #003399; /* Dark Blue */
    color: white;
    padding: 25px;
}

.header-text {
    flex-grow: 1;
}

.header-text h1 {
    font-size: 2em;
    font-weight: bold;
    color: white;
    margin-bottom: 5px;
    text-align: left; /* Override general h1 centering */
    padding-top: 0; /* Override general h1 padding */
}
.header-text h1 span { /* For the first name part */
     /* You can add specific styling if needed */
}

.header-text p {
    font-size: 0.9em;
    margin-bottom: 5px;
    line-height: 1.4;
    text-align: left; /* Override general p centering */
}

.contact-info {
    margin-top: 15px;
}
.contact-info p {
     font-size: 0.85em;
}

.header-image {
    flex-basis: 180px; /* Adjust size as needed */
    flex-shrink: 0;
    margin-left: 20px;
    text-align: center; /* Center image if container is wider */
}

.header-image img {
    max-width: 100%;
    height: auto;
    max-height: 180px; /* Control max height */
    border-radius: 8px; /* Slightly rounded corners */
    border: 3px solid white; /* Optional border */
    background-color: #eee; /* Background for transparent images */
    object-fit: cover; /* Cover the area nicely */
}

.resume-body {
    display: flex;
}

.left-column {
    width: 35%; /* Adjust ratio */
    background-color: white; /* Match image */
    padding: 20px;
    border-right: 1px solid #eee; /* Subtle separator */
}

.right-column {
    width: 65%; /* Adjust ratio */
    padding: 20px;
    background-color: white;
}

.left-column section,
.right-column section {
    margin-bottom: 25px;
}

.left-column h2,
.right-column h2 {
    font-size: 1.1em;
    color: #003399; /* Blue headings */
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.left-column ul,
.right-column ul {
    list-style-type: none; /* Remove default bullets */
    padding-left: 0;
}

.left-column li,
.right-column li {
    margin-bottom: 6px;
    font-size: 0.9em;
    padding-left: 1.2em; /* Make room for pseudo-element */
    position: relative; /* Needed for absolute positioning of pseudo-element */
}

/* Add bullet points back visually */
.left-column ul:not(#outputExperience) li::before { /* Exclude experience list if it uses different icons */
    content: "•"; /* Unicode bullet */
    color: #003399; /* Blue bullet */
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

/* Specific styling for experience list if needed */
#outputExperience li::before {
     content: "+"; /* Use plus sign */
     color: #003399;
     font-weight: bold;
     position: absolute;
     left: 0;
     top: 0;
}


.right-column .about-me p {
    font-size: 0.95em;
    line-height: 1.7;
    text-align: justify; /* Justify text like in example */
}

.training-box {
    background-color: #4a90e2; /* Medium Blue */
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    margin-top: 20px;
}

.training-box p {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 0.9em;
}

.training-box ul {
     padding-left: 5px;
}

.training-box li {
    font-size: 0.9em;
    margin-bottom: 5px;
    position: relative;
    padding-left: 20px; /* Make space for checkmark */
}

/* Add checkmark */
.training-box li::before {
    content: '✓'; /* Checkmark character */
    position: absolute;
    left: 0;
    top: 1px; /* Adjust vertical alignment */
    color: white;
    font-weight: bold;
}

/* Simple icons (using emojis here for simplicity) */
.icon {
    display: inline-block;
    margin-right: 8px;
    font-style: normal; /* Prevent italics if using <i> */
}


/* Placeholder Image styling (if needed) */
#outputImage[src="placeholder-avatar.png"] {
    background-color: #ddd; /* Placeholder background */
}