/* styles/form-generator.css */

.generator-main {
    max-width: 1400px;
    margin: 2rem auto;
    padding: 4 0rem;
}

.generator-container {
    background-color: var(--card-bg);
    padding: 2.5rem;
    border-radius: 10px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    max-width: 1050px;
}

.generator-container h1 {
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.dark-mode .generator-container h1 {
    color: #a5d6a7;
}

.subtitle {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 2.5rem auto;
    color: var(--text-color);
    opacity: 0.9;
}

.form-generator-area {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    min-height: 300px; /* Increased overall form area height */
}

#html-input {
    width: 100%;
    flex-grow: 1; /* Allow textarea to fill the new space */
    min-height: 250px; /* Kept a min-height for initial state */
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    resize: vertical;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* More specific fix for dark mode input background and text color */
body.dark-mode #html-input {
    background-color: var(--card-bg); /* Using the correct variable */
    color: var(--text-color); /* Using the correct variable */
    border-color: var(--border-color);
}

#html-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}

body.dark-mode #html-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
}

#generate-btn {
    align-self: center;
    padding: 0.8rem 2.5rem;
    font-size: 1.1rem;
}

.generator-container h2 {
    margin-bottom: 1.5rem;
    color: var(--secondary-color);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 0.5rem;
}

.dark-mode .generator-container h2 {
    color: #8db8a2;
}

#output-area .code-example-container {
    margin: 0;
}

.faq-section {
    padding: 4rem 0;
    max-width: 900px;
    margin: 0 auto;
}

/* Ad container width fix */
.main-with-ads .ad-container {
    width: 160px;
}

/* --- Fix for Generated Code Visibility in Light Mode --- */
body:not(.dark-mode) #output-area .code-editor-body pre code {
    background-color: #f6f8fa; /* GitHub light theme background */
    color: #24292e; /* Default text color */
}

body:not(.dark-mode) #output-area .hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    color: #24292e;
    background: #f6f8fa;
}

body:not(.dark-mode) #output-area .hljs-comment,
body:not(.dark-mode) #output-area .hljs-quote {
    color: #6a737d;
}

body:not(.dark-mode) #output-area .hljs-keyword,
body:not(.dark-mode) #output-area .hljs-selector-tag,
body:not(.dark-mode) #output-area .hljs-subst {
    color: #d73a49;
}

body:not(.dark-mode) #output-area .hljs-number,
body:not(.dark-mode) #output-area .hljs-literal,
body:not(.dark-mode) #output-area .hljs-variable,
body:not(.dark-mode) #output-area .hljs-template-variable,
body:not(.dark-mode) #output-area .hljs-tag .hljs-attr {
    color: #005cc5;
}

body:not(.dark-mode) #output-area .hljs-string,
body:not(.dark-mode) #output-area .hljs-doctag {
    color: #032f62;
}

body:not(.dark-mode) #output-area .hljs-title,
body:not(.dark-mode) #output-area .hljs-section,
body:not(.dark-mode) #output-area .hljs-selector-id {
    color: #6f42c1;
}

body:not(.dark-mode) #output-area .hljs-subst {
    font-weight: normal;
}

body:not(.dark-mode) #output-area .hljs-type,
body:not(.dark-mode) #output-area .hljs-class .hljs-title {
    color: #e36209;
}

body:not(.dark-mode) #output-area .hljs-tag,
body:not(.dark-mode) #output-area .hljs-name,
body:not(.dark-mode) #output-area .hljs-attribute {
    color: #22863a;
    font-weight: normal;
}

body:not(.dark-mode) #output-area .hljs-regexp,
body:not(.dark-mode) #output-area .hljs-link {
    color: #032f62;
}

body:not(.dark-mode) #output-area .hljs-symbol,
body:not(.dark-mode) #output-area .hljs-bullet {
    color: #735c0f;
}

body:not(.dark-mode) #output-area .hljs-built_in,
body:not(.dark-mode) #output-area .hljs-builtin-name {
    color: #005cc5;
}

body:not(.dark-mode) #output-area .hljs-meta {
    color: #1f78d1;
}

body:not(.dark-mode) #output-area .hljs-deletion {
    background: #fdd;
}

body:not(.dark-mode) #output-area .hljs-addition {
    background: #dfd;
}

body:not(.dark-mode) #output-area .hljs-emphasis {
    font-style: italic;
}

body:not(.dark-mode) #output-area .hljs-strong {
    font-weight: bold;
}