/* --- General Enhancements --- */
/* body { */
    /* Optionally increase base font size slightly if needed */
    /* font-size: 1.05rem; */


/* Improve spacing between major form cards */
#generatorForm > .card {
    margin-bottom: 2rem !important; /* Increased from default mb-4 */
}

/* Slightly larger form labels */
.form-label {
    font-weight: 500; /* Slightly bolder */
    /* font-size: 0.95rem; */ /* Uncomment if labels need to be bigger */
}

/* --- Skill Badges (Form) --- */
.skill-badge {
    font-size: 0.95rem;   /* Slightly larger text */
    padding: 0.5em 1em;   /* More padding */
    margin: 0.3rem;       /* Consistent margin */
    display: inline-flex;
    align-items: center;
    gap: 0.5em;           /* Increased space between icon and text */
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
    border-radius: 0.375rem; /* Standard Bootstrap border-radius */
}

.skill-badge i {
    font-size: 1.2em; /* Slightly larger icon */
}

.skill-badge.active {
    background-color: var(--bs-primary) !important;
    color: var(--bs-light) !important;
    border-color: var(--bs-primary-dark) !important;
}

.skill-badge:not(.active):hover {
    filter: brightness(95%);
    border-color: var(--bs-secondary);
}



/* --- Preview Area Styling --- */
#previewAreaWrapper {
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color); /* Add subtle border */
}

#previewArea {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 1rem; /* Increased base font size for preview */
    line-height: 1.6; /* Increased line height for readability */
    color: var(--bs-body-color);
}

/* Preview Headings */
#previewArea h1,
#previewArea h2,
#previewArea h3 {
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 0.4em;
    margin-top: 2em; /* More space above headings */
    margin-bottom: 1.2em; /* More space below headings */
    line-height: 1.3;
}
#previewArea h1 { font-size: 2em; }   /* Larger */
#previewArea h2 { font-size: 1.6em; } /* Larger */
#previewArea h3 { font-size: 1.3em; } /* Larger */
#previewArea h4 {
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    font-size: 1.1em;
}

/* Preview Paragraphs and Lists */
#previewArea p,
#previewArea ul,
#previewArea ol {
    margin-bottom: 1.2em; /* More space below paragraphs/lists */
}

#previewArea li {
    margin-bottom: 0.6em; /* Space between list items */
}

/* Preview Social Icons */
#previewArea .social-icons-wrapper p {
    margin-bottom: 0; /* Reset paragraph margin if icons are inside */
}
#previewArea .social-icon-link img {
    margin-right: 8px;  /* Increased space between social icons */
    margin-bottom: 8px; /* Increased space below icons if they wrap */
    vertical-align: middle;
}

/* Preview Skill Icons */
#previewArea .skills-section p {
     margin-bottom: 0; /* Reset paragraph margin */
}
#previewArea .skills-section img {
    margin: 8px; /* Add space around each skill icon */
    height: 45px; /* Slightly larger skill icons */
    vertical-align: middle;
}

/* Preview Badges (Stats etc.) */
#previewArea p[align="center"] {
    margin-top: 1.5em;
    margin-bottom: 1.5em; /* Add space around centered blocks */
}
#previewArea p[align="center"] img {
    margin-bottom: 0.5em; /* Space below badges/cards if stacked */
}



.input-group > .form-control:focus {
  z-index: 3;
}

.remove-link-btn {
    font-size: 0.8em;
    padding: 0.2rem 0.4rem;
}

main.container {
    padding-bottom: 2rem;
}

/* --- Preview Area: Social Icons (Simple Icons) --- */
#previewArea .social-icons-wrapper p {
    margin-bottom: 0; /* Reset paragraph margin if icons are inside */
}
#previewArea .social-icon-link img {
    margin-right: 10px; /* Space between social icons */
    margin-bottom: 10px;/* Space below icons if they wrap */
    vertical-align: middle; /* Align icons nicely */
    /* Filter to match theme could be added here if needed */
    /* Example for dark mode: */
    /* [data-bs-theme="dark"] & { filter: invert(1) brightness(1.5); } */
}