/* Fix for overlapping labels in Heart Emoji Generator */

/* Reset all label positioning to prevent overlaps */
.generator-card label,
.generator-card .input-label,
.generator-card .control-label,
.input-label,
.control-label,
label {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    margin-bottom: 0.5rem !important;
    z-index: auto !important;
}

/* Ensure proper spacing for control groups */
.control-group,
.input-group,
.generator-card .control-group {
    margin-bottom: 1.5rem !important;
    position: relative !important;
}

/* Make sure inputs have proper spacing */
.generator-card input,
.generator-card select,
.generator-card textarea,
input.input-premium,
select.input-premium {
    display: block !important;
    width: 100% !important;
    position: static !important;
    margin-top: 0.25rem !important;
}

/* Fix any floating placeholder labels */
input::placeholder,
select::placeholder,
textarea::placeholder {
    opacity: 0.7 !important;
}

/* Ensure icons next to labels don't cause overlaps */
.input-label i,
.control-label i,
label i {
    display: inline-block !important;
    margin-right: 0.5rem !important;
    vertical-align: middle !important;
}

/* Fix preset buttons layout */
.preset-buttons,
.quick-presets {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin-top: 1rem !important;
}

.preset-buttons button,
.quick-presets button {
    position: static !important;
    transform: none !important;
}

/* Ensure text is readable */
.generator-card,
.generator-main {
    line-height: 1.5 !important;
}

/* Fix any absolute positioned elements that might overlap */
.generator-card *[style*="position: absolute"],
.generator-card *[style*="position:absolute"] {
    position: relative !important;
}

/* Ensure proper text rendering */
* {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Fix overlapping elements in the output area */
.output-display,
.heart-pattern-output {
    position: relative !important;
    padding: 1rem !important;
    margin-top: 1rem !important;
}