/* style.css */
/* Styles the generator tool page */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

body {
    font-family: 'Montserrat', Arial, sans-serif;
    line-height: 1.6;
    margin: 20px;
    background-color: #111111;
    color: #e0e0e0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1, body > p:first-of-type {
     text-align: center;
     max-width: 600px;
     width: 100%;
     box-sizing: border-box;
     margin-left: auto;
     margin-right: auto;
}

body > p:first-of-type {
    margin-bottom: 20px;
}


h1, h2 {
    color: #ffffff;
    border-bottom: 1px solid #cc0000; /* Stern Red */
    padding-bottom: 5px;
    margin-top: 25px;
    margin-bottom: 15px; /* Consistent bottom margin */
    width: 100%;
    box-sizing: border-box;
}
h2:first-of-type { /* Less top margin for the very first H2 (Preview) */
    margin-top: 0;
}

h2 { /* General H2 alignment */
    max-width: 600px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

.form-container {
    background: #222222;
    padding: 25px;
    border-radius: 5px;
    margin-bottom: 30px;
    max-width: 600px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #444444;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #ffffff;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="url"],
select {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px; /* Consistent bottom margin for most inputs */
    border: 1px solid #555555;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #333333;
    color: #ffffff;
    height: 40px;
}

/* Styles for Office Phone and Extension grouping */
.phone-group {
    display: flex;
    gap: 10px; /* Space between phone and extension fields */
    align-items: flex-start; /* Align items to the top if labels cause height diff */
    margin-bottom: 5px; /* Reduce bottom margin before field note */
}

.phone-field {
    flex-grow: 1; /* Allows phone field to take up more space */
}

.ext-field {
    flex-basis: 120px; /* Fixed base width for extension, adjust as needed */
    flex-grow: 0;
    flex-shrink: 0;
}

.phone-field input, .ext-field input {
    margin-bottom: 0; /* Remove bottom margin from inputs inside group */
}
/* End Phone and Extension Group Styles */


/* Updated Field Note Styling */
.field-note {
    display: block; /* Put on its own line */
    font-size: 0.8em;
    color: #aaaaaa; /* Light gray */
    margin-top: 5px; /* Space below the phone/ext group */
    margin-bottom: 20px; /* Space before next label */
    padding-left: 2px; /* Slight indent */
    clear: both; /* Ensure it clears floated elements if any (though flex is used here) */
}
/* End Field Note Styling */


input[readonly] {
    background-color: #444444;
    cursor: not-allowed;
    color: #bbbbbb;
}

select option {
    background-color: #333333;
    color: #ffffff;
}

/* Styling for the generate buttons */
#generateBtn, #generateMobileBtn {
    background-color: #cc0000; /* Stern Red */
    color: white;
    padding: 10px 15px; /* Adjusted padding for two buttons */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em; /* Slightly smaller font if needed */
    font-weight: bold;
    height: 40px;
    transition: background-color 0.2s ease;
    /* flex-grow: 1; is handled by inline style in HTML for the button-group */
}

#generateBtn:hover, #generateMobileBtn:hover {
    background-color: #a30000; /* Darker Red on hover */
}


/* Validation Error Styling */
.validation-error {
    color: #ff6b6b; /* A light red for errors */
    font-weight: bold;
    font-size: 0.9em;
    text-align: center;
    min-height: 1.2em; /* Prevents layout shift when message appears/disappears */
    margin-bottom: 10px;
    margin-top: 5px; /* Space above if a field-note is not directly above */
}


.signature-preview {
    border: 1px dashed #555555;
    padding: 15px;
    margin-top: 0; /* Aligns with H2 bottom border */
    margin-bottom: 10px;
    background: #ffffff; /* White background to mimic email client */
    max-width: 600px;
    width: 100%;
    box-sizing: border-box;
    overflow: auto; /* Add scroll if content overflows */
    min-height: 80px; /* Minimum height to show the box even if empty */
}

/* Ensure text inside preview is dark for readability on white background */
.signature-preview * {
    color: #333333 !important; /* Default text color inside preview */
}
.signature-preview a {
    color: #1155cc !important; /* Link color inside preview */
}
/* Specific overrides if needed for elements within the signature HTML, ensuring they are visible */
.signature-preview strong[style*="color: #000000"] {
    color: #000000 !important;
}
.signature-preview span[style*="color: #555555"] {
    color: #555555 !important;
}
.signature-preview span[style*="color: #777777"] {
    color: #777777 !important;
}
.signature-preview span[style*="color: #888888"] {
    color: #888888 !important;
}


.copy-button-container {
    max-width: 600px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    margin-top: 5px; /* Space above the copy button */
    margin-bottom: 25px; /* Space below the copy button */
    height: 40px; /* Match button height */
}

/* CORRECTED: Copy button now uses Stern Red */
button#copyBtn {
    background-color: #cc0000; /* Stern Red */
    color: white;
    padding: 10px 25px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    height: 100%;
    transition: background-color 0.2s ease;
}

button#copyBtn:hover {
    background-color: #a30000; /* Darker Red on hover */
}

.copy-feedback {
    display: inline-block;
    margin-left: 15px;
    font-size: 0.9em;
    /* Color will be set by JavaScript (green for success, red for error) */
    font-style: italic;
    vertical-align: middle;
    line-height: 40px; /* Align with button */
}

.instructions {
    max-width: 600px;
    width: 100%;
    box-sizing: border-box;
    background-color: #2a2a2a; /* Darker background for instructions block */
    border: 1px solid #555555;
    border-radius: 4px;
    padding: 15px 20px 15px 20px; /* More horizontal padding */
    margin-top: 0; /* Aligns with H2 bottom border */
    margin-bottom: 0; /* No bottom margin before the Gmail link container */
    font-size: 0.9em;
    color: #cccccc; /* Light gray text for instructions */
}
.instructions strong {
    display: block;
    margin-bottom: 10px;
    color: #ffffff; /* White for the "Instructions" heading */
    font-weight: bold;
}
.instructions ol {
    margin: 0;
    padding-left: 25px; /* Standard padding for ordered list */
}
.instructions li {
    margin-bottom: 8px; /* Space between list items */
    line-height: 1.5; /* Improved readability for list items */
}

.gmail-link-container {
    max-width: 600px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    margin-top: 15px; /* Space above the Gmail link */
    margin-bottom: 30px; /* Space below the Gmail link */
}

a.gmail-button {
    display: inline-block;
    padding: 8px 18px;
    background-color: #cc0000; /* Stern Red */
    color: #ffffff !important; /* Ensure white text, !important if needed */
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.2s ease;
    font-size: 0.9em;
}
a.gmail-button:hover {
    background-color: #a30000; /* Darker Red on hover */
    color: #ffffff !important; /* Ensure white text on hover */
    text-decoration: none;
}

.gmail-link-container small {
    display: block;
    margin-top: 5px;
    font-size: 0.8em;
    color: #aaaaaa; /* Light gray for the small text */
}

p.disclaimer {
    max-width: 600px;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.8em;
    color: #aaaaaa; /* Light gray for disclaimer */
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    font-style: italic;
}

.tool-credit {
    max-width: 600px;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.85em;
    color: #888888; /* Medium gray for tool credit */
    text-align: center;
    margin-top: 30px; /* Space above the credit */
    margin-bottom: 20px; /* Space below the credit */
    padding-top: 15px; /* Space above the border */
    border-top: 1px solid #444444; /* Separator line */
}