/* Global Styles */
:root {
    --primary-color: #9d4edd;
    --primary-dark: #7b2cbf;
    --background-dark: #19031b;  
    --background-darker: #0c021b; 
    --text-light: #c8cdf1;
    --text-white: #ffffff;
    --accent-color: #5a2d88;
    --border-color: rgba(157, 78, 221, 0.2);
    --card-bg: rgba(157, 78, 221, 0.05);
    --sidebar-bg: rgba(30, 30, 30, 0.95);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Stars Background - Based on CodePen example */
html {
    height: 100%;
    background: radial-gradient(ellipse at bottom, #2a1b62 0%, #190328 50%, #0d0118 100%);
    overflow-x: hidden;
    overflow-y: visible; /* Allow vertical overflow */
}

body {
    font-family: 'Quicksand', sans-serif;
    color: var(--text-light);
    min-height: 100vh;
    line-height: 1.6;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    overflow-y: scroll !important; /* Force scroll to always be present */
    position: relative;
}

/* Custom scrollbar styling */
/* For Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(15, 5, 25, 0.1);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, rgba(157, 78, 221, 0.4), rgba(123, 44, 191, 0.4));
    border-radius: 10px;
    border: 2px solid rgba(15, 5, 25, 0.1);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, rgba(157, 78, 221, 0.6), rgba(123, 44, 191, 0.6));
}

/* For Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(157, 78, 221, 0.4) rgba(15, 5, 25, 0.1);
}

/* Adjusting the purple text color to be lighter for the result display */
.generated-image-info .prompt-title, 
.result-container h2,
.result-info-container h2,
.result-prompt-title {
    color: #c49efa !important; /* Lighter purple for titles */
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

/* Reduce opacity on the prompt display panel and improve text visibility */
.prompt-panel, 
.result-panel,
.prompt-container,
.result-container .info-panel,
.result-prompt-container,
.result-info-container {
    background: rgba(30, 15, 50, 0.15) !important; /* Very transparent background */
    border: 1px solid rgba(157, 78, 221, 0.1) !important;
    backdrop-filter: none !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
}

/* Make all purple titles in result area more visible */
.prompt-title,
.prompt-panel h2, 
.result-panel h2, 
.result-panel h3,
.result-container h2,
.result-container h3,
.result-title,
.result-prompt-title,
.info-panel-title,
[class*="Title"] {
    color: #c49efa !important; /* Lighter purple */
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.9) !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Ensure all detail text is visible and correctly colored */
.prompt-details,
.prompt-text,
.result-text,
.result-parameters,
.result-parameters li,
.parameter-name,
.parameter-value,
.prompt-panel p,
.result-panel p,
.info-panel p,
.prompt-container div,
.enhanced-text {
    color: #e0d9ff !important; /* Light lavender color */
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.9) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fix for any missing bullet points and list items */
.prompt-panel ul, 
.result-panel ul,
.result-parameters,
.prompt-panel li,
.result-panel li {
    color: #e0d9ff !important;
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.9) !important;
    list-style-type: disc !important;
    margin-left: 20px !important;
}

/* Style the .sidebar with slightly more opacity to match user's preference */
.sidebar {
    background: rgba(12, 2, 27, 0.3); /* Increased from 0.1 to 0.3 for better visibility */
}

/* Stars layer */
.stars {
    width: 100%;
    height: 100%;
    position: fixed;
    background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png) repeat;
    background-size: 1000px 1000px;
    opacity: 0.6;
    mix-blend-mode: screen;
    z-index: 0;
}

/* Enhanced twinkling solution */
.twinkling {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: transparent;
    z-index: 1;
    pointer-events: none;
}

/* Create twinkling stars with different animations */
.star {
    position: absolute;
    background-color: white;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.5);
}

/* Star variants with different sizes and animations */
.star-1 {
    width: 1px;
    height: 1px;
    animation: twinkle-1 3s infinite ease-in-out;
}

.star-2 {
    width: 2px;
    height: 2px;
    animation: twinkle-2 5s infinite ease-in-out;
    box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.6);
}

.star-3 {
    width: 3px;
    height: 3px;
    animation: twinkle-3 7s infinite ease-in-out;
    box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.7);
}

/* Add a larger star size for more dramatic twinkling */
.star-4 {
    width: 4px;
    height: 4px;
    animation: twinkle-4 9s infinite ease-in-out;
    box-shadow: 0 0 6px 3px rgba(255, 255, 255, 0.8);
}

@keyframes twinkle-1 {
    0%, 100% { opacity: 0; }
    40% { opacity: 0.4; }
    60% { opacity: 0.7; }
    80% { opacity: 0.5; }
}

@keyframes twinkle-2 {
    0%, 100% { opacity: 0.05; }
    30% { opacity: 0.4; }
    50% { opacity: 0.9; }
    70% { opacity: 0.6; }
    85% { opacity: 0.2; }
}

@keyframes twinkle-3 {
    0%, 100% { opacity: 0.1; }
    20% { opacity: 0.4; }
    40% { opacity: 0.3; }
    60% { opacity: 1; }
    80% { opacity: 0.5; }
}

/* More dramatic animation for larger stars */
@keyframes twinkle-4 {
    0%, 100% { opacity: 0.1; }
    20% { opacity: 0.6; }
    30% { opacity: 0.3; }
    40% { opacity: 1; }
    60% { opacity: 0.4; }
    80% { opacity: 0.8; }
}

/* Keep existing twinkling stars as additional layers but adjust their position */
.twinkling:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 3px;
    height: 3px;
    background: white;
    box-shadow: 
        20px 30px 2px 1px rgba(255, 255, 255, 0.4),
        90px 80px 2px 1px rgba(255, 255, 255, 0.5),
        150px 20px 2px 0px rgba(255, 255, 255, 0.3),
        200px 130px 2px 1px rgba(255, 255, 255, 0.6),
        260px 40px 1px 0px rgba(255, 255, 255, 0.3),
        300px 180px 2px 0px rgba(255, 255, 255, 0.4),
        350px 50px 1px 1px rgba(255, 255, 255, 0.5),
        400px 200px 1px 0px rgba(255, 255, 255, 0.3),
        450px 70px 2px 0px rgba(255, 255, 255, 0.6),
        500px 250px 1px 1px rgba(255, 255, 255, 0.4),
        560px 90px 2px 0px rgba(255, 255, 255, 0.3),
        600px 230px 1px 0px rgba(255, 255, 255, 0.5),
        650px 110px 2px 1px rgba(255, 255, 255, 0.4),
        700px 280px 2px 0px rgba(255, 255, 255, 0.3),
        750px 130px 1px 0px rgba(255, 255, 255, 0.6),
        800px 300px 2px 1px rgba(255, 255, 255, 0.4),
        850px 150px 1px 0px rgba(255, 255, 255, 0.5),
        900px 320px 2px 1px rgba(255, 255, 255, 0.3),
        950px 170px 1px 0px rgba(255, 255, 255, 0.4),
        1000px 340px 1px 1px rgba(255, 255, 255, 0.6),
        1050px 190px 2px 0px rgba(255, 255, 255, 0.3),
        1100px 220px 1px 1px rgba(255, 255, 255, 0.4),
        1150px 350px 2px 0px rgba(255, 255, 255, 0.5),
        1200px 80px 1px 0px rgba(255, 255, 255, 0.3),
        1250px 370px 2px 1px rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    animation: twinkling-stars-1 5s ease-in-out infinite alternate;
    pointer-events: none;
}

.twinkling:after {
    content: '';
    position: fixed;
    top: 30px;
    left: 30px;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow: 
        50px 50px 2px 1px rgba(255, 255, 255, 0.5),
        100px 160px 1px 0px rgba(255, 255, 255, 0.6),
        170px 90px 2px 1px rgba(255, 255, 255, 0.3),
        220px 220px 1px 0px rgba(255, 255, 255, 0.4),
        280px 120px 2px 1px rgba(255, 255, 255, 0.5),
        320px 280px 1px 0px rgba(255, 255, 255, 0.3),
        370px 140px 2px 1px rgba(255, 255, 255, 0.6),
        420px 310px 1px 0px rgba(255, 255, 255, 0.4),
        470px 160px 2px 1px rgba(255, 255, 255, 0.5),
        520px 340px 1px 0px rgba(255, 255, 255, 0.3),
        570px 180px 2px 1px rgba(255, 255, 255, 0.6),
        620px 270px 1px 0px rgba(255, 255, 255, 0.4),
        670px 200px 2px 1px rgba(255, 255, 255, 0.5),
        720px 370px 1px 0px rgba(255, 255, 255, 0.3),
        770px 220px 2px 1px rgba(255, 255, 255, 0.6),
        820px 110px 1px 0px rgba(255, 255, 255, 0.4),
        870px 240px 2px 1px rgba(255, 255, 255, 0.5),
        920px 400px 1px 0px rgba(255, 255, 255, 0.3),
        970px 260px 2px 1px rgba(255, 255, 255, 0.6),
        1020px 150px 1px 0px rgba(255, 255, 255, 0.4),
        1070px 280px 2px 1px rgba(255, 255, 255, 0.5),
        1120px 430px 1px 0px rgba(255, 255, 255, 0.3),
        1170px 300px 2px 1px rgba(255, 255, 255, 0.6),
        1220px 190px 1px 0px rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    animation: twinkling-stars-2 6s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes twinkling-stars-1 {
    0% {
        opacity: 0.1;
    }
    33% {
        opacity: 0.4;
    }
    66% {
        opacity: 0.2;
    }
    100% {
        opacity: 0.7;
    }
}

@keyframes twinkling-stars-2 {
    0% {
        opacity: 0.2;
    }
    25% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.1;
    }
    75% {
        opacity: 0.3;
    }
    100% {
        opacity: 0.6;
    }
}

/* Shooting star effect - thinner with lower opacity */
.shooting-star {
    position: absolute;
    width: 120px;
    height: 2px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 1));
    transform: rotate(45deg);
    animation: shooting 3s linear;
    z-index: 1;
    opacity: 0;
    border-radius: 100%;
    box-shadow: 0 0 20px 3px rgba(255, 255, 255, 0.8);
}

@keyframes shooting {
    0% {
        transform: translateX(0) translateY(0) rotate(45deg);
        opacity: 0;
        width: 0;
    }
    5% {
        opacity: 1;
        width: 120px;
    }
    100% {
        transform: translateX(1000px) translateY(1000px) rotate(45deg);
        opacity: 0;
    }
}

/* Lower shooting star effect - for stars in lower portion of sky */
.shooting-star-lower {
    position: absolute;
    width: 150px;
    height: 2px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 1));
    transform: rotate(225deg);
    animation: shooting-lower 4s linear;
    z-index: 1;
    opacity: 0;
    border-radius: 100%;
    box-shadow: 0 0 20px 3px rgba(255, 255, 255, 0.8);
}

@keyframes shooting-lower {
    0% {
        transform: translateX(0) translateY(0) rotate(225deg);
        opacity: 0;
        width: 0;
    }
    5% {
        opacity: 1;
        width: 150px;
    }
    100% {
        transform: translateX(-1200px) translateY(-1200px) rotate(225deg);
        opacity: 0;
    }
}

/* Commenting out cloud animation
.clouds {
    width: 10000px;
    height: 100%;
    position: fixed;
    background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/clouds_repeat.png) repeat;
    background-size: 4000px 4000px;
    z-index: 2;
    opacity: 0.2;
    
    animation: move-background 150s linear infinite;
}

@keyframes move-background {
    from {
        transform: translate3d(0px, 0px, 0px);
    }
    to { 
        transform: translate3d(-4000px, 0px, 0px);
    }
}
*/

.moon-container {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 3;
}

.moon-img {
    height: 40vh;
    width: 40vh;
    position: absolute;
    right: 20px;
    top: 20px;
    opacity: 0.9;
}

/* Ensure app content is above background */
.app-container {
    display: flex;
    width: 100%;
    min-height: 100vh;
    position: relative;
    z-index: 10;
    overflow-y: visible;
}

/* Sidebar Styles */
.sidebar {
    width: 300px;
    background: rgba(12, 2, 27, 0.3); /* Make nearly transparent, just a hint of color */
    border-right: 1px solid rgba(157, 78, 221, 0.05); /* Very subtle border like content area */
    padding: 1.5rem;
    overflow-y: auto;
    height: 100vh;
    position: sticky;
    top: 0;
    flex-shrink: 0;
    z-index: 11;
    backdrop-filter: none; /* Remove blur to match other containers */
}

/* Add text shadow to all sidebar text elements for readability */
.sidebar, .sidebar-header, .section-title, .control-group label, .style-description, .enhance-description {
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.9);
}

/* Make border elements subtle */
.sidebar-header {
    border-bottom: 1px solid rgba(157, 78, 221, 0.08);
}

.sidebar-section {
    border-bottom: 1px solid rgba(157, 78, 221, 0.08);
}

/* Keep form controls slightly more visible for usability */
select, input[type="number"] {
    background: rgba(50, 10, 70, 0.15);
    border: 1px solid rgba(157, 78, 221, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.sidebar-header {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 500;
    padding-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.sidebar-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.sidebar-section {
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
}

.section-title {
    font-size: 0.9rem;
    margin: 0.7rem 0 0.5rem 0;
    color: var(--text-white);
    font-weight: 500;
}

.control-group {
    margin-bottom: 0.8rem;
}

.control-group label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
}

.control-group label input[type="checkbox"] {
    margin-right: 0.5rem;
}

.value-display {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    color: var(--primary-color);
}

/* Range Input Styling */
input[type="range"] {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    background: rgba(157, 78, 221, 0.1);
    border-radius: 10px;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    cursor: pointer;
    border: none;
}

/* Number Input Styling */
input[type="number"] {
    width: 100%;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-white);
    font-family: 'Quicksand', sans-serif;
}

/* Select Styling */
select {
    width: 100%;
    padding: 0.5rem;
    background: rgba(50, 10, 70, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-white);
    font-family: 'Quicksand', sans-serif;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239d4edd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

select:hover {
    background: rgba(70, 20, 95, 0.9);
    border-color: var(--primary-color);
}

select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(157, 78, 221, 0.3);
}

/* Style dropdown options */
select option {
    background-color: rgba(30, 5, 40, 0.95);
    color: var(--text-white);
}

.style-description {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    color: var(--text-light);
    font-style: italic;
    opacity: 1.0;
}

.enhance-description {
    font-size: 0.8rem;
    margin-top: 0.3rem;
    color: var(--text-light);
    font-style: italic;
    opacity: 1.0;
    transition: opacity 0.3s ease;
}

/* Main Content Area */
.main-content {
    flex: 1;
    padding: 1.5rem;
    overflow-y: visible;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    background: transparent;
    z-index: 10;
}

.main-content > * {
    width: 100%;
    max-width: 1100px;
    position: relative;
    z-index: 10; /* Ensure all direct children are above the stars */
}

.title-container {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1rem;
    background: rgba(23, 3, 25, 0); /* Completely transparent background */
    border-radius: 20px;
    border: 1px solid rgba(157, 78, 221, 0.03); /* Extremely subtle border */
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Very subtle shadow */
    width: 100%;
    z-index: 11;
    backdrop-filter: none; /* Remove blur to see stars behind */
}

.title-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.title-image {
    max-width: 150%;
    height: auto;
    display: block;
    margin: 0 auto;
    transform: scale(1.5);
    position: relative;
    left: 0;
    top: 0;
}

/* Keep these styles for reference but they're no longer used */
.title-text {
    font-family: 'Audiowide', cursive;
    font-size: 3.5rem;
    font-weight: bold;
    background: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 2px;
}

.title-icon {
    font-size: 3.5rem;
    margin-left: 0.5rem;
    color: var(--primary-color);
    display: inline-block;
}

.subtitle-text {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.2rem;
    color: var(--text-light);
    opacity: 1.0;
    font-weight: 300;
    letter-spacing: 0.5px;
    margin-top: 1rem;
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.9);
    font-weight: 400; /* Slightly bolder for better visibility */
}

.content-area {
    background: rgba(23, 3, 25, 0); /* Completely transparent */
    opacity: 1.0; /* Keep text fully visible */
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid rgba(157, 78, 221, 0.03); /* Extremely subtle border */
    margin-bottom: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* Barely visible shadow */
    position: relative;
    z-index: 11;
    backdrop-filter: none;
}

/* Add stronger text shadow to improve readability against transparent background */
.content-area, .input-prompt, .subtitle-text {
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.9);
}

#prompt-input, #create-button, .download-button {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Slightly stronger shadow for interactive elements */
}

.input-prompt {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.2rem;
    color: var(--text-light);
    opacity: 1.0;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 400;
}

.input-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

#prompt-input {
    width: 100%;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: white;
    font-size: 16px;
    transition: all 0.3s ease;
    outline: none;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    font-family: 'Quicksand', sans-serif;
}

#prompt-input:focus {
    border-color: #9d4edd;
    box-shadow: 0 0 20px rgba(157, 78, 221, 0.3);
}

#prompt-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

#create-button {
    background: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
    color: white;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0.75rem 2rem;
    border-radius: 12px;
    border: none;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Quicksand', sans-serif;
}

#create-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(157, 78, 221, 0.3);
}

.result-container {
    margin-top: 2rem;
    display: none;
}

.result-container.active {
    display: block;
}

.image-wrapper {
    position: relative;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: transform 0.3s ease;
    display: inline-block;
}

.image-wrapper:hover {
    transform: scale(1.02);
}

.image-wrapper::after {
    content: '🔍';
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-wrapper:hover::after {
    opacity: 1;
}

.generated-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.download-button {
    background: linear-gradient(45deg, var(--primary-dark), var(--accent-color));
    color: white;
    font-size: 1rem;
    padding: 0.6rem 1.5rem;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
    display: inline-block;
    font-family: 'Quicksand', sans-serif;
}

.download-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(157, 78, 221, 0.3);
}

.loading-indicator {
    display: none;
    text-align: center;
    padding: 2rem;
}

.loading-indicator.active {
    display: block;
}

.loading-text {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(157, 78, 221, 0.2);
    border-top: 5px solid var(--primary-color);
    border-radius: 50%;
    margin: 0 auto;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .app-container {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
        overflow-y: visible;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
    
    .title-image {
        max-width: 110%;
        transform: scale(1.05);
    }
}

@media (max-width: 576px) {
    .title-image {
        max-width: 200%;
        transform: scale(1);
    }
    
    .sidebar-section, .content-area {
        padding: 1rem;
    }
}

/* Fix specifically for the dark purple Parameters heading and labels */
.parameters-heading,
.parameters-title,
.parameter-label,
h2,
h3,
h4,
strong,
b,
.title-label,
.prompt-label,
.parameter-title,
.parameter-heading,
div[class*="Parameter"] > div:first-child,
div[class*="parameters"] > div:first-child,
[class*="label"],
[class*="Label"] {
    color: #c49efa !important; /* Lighter purple */
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.9) !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Make the image title and text under it more visible */
.image-title,
.result-title,
.result-image-title,
.image-subtitle,
.image-description,
.result-title-text,
h1 {
    color: #d9b6ff !important; /* Very light purple */
    text-shadow: 0 0 15px rgba(0, 0, 0, 1) !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 1.5rem !important;
}

/* Handle any inline styles that might be overriding our CSS */
[style*="color"] {
    color: #c49efa !important;
}

/* Lighten the dark purple text in the sidebar */
.sidebar-header,
.section-title,
.sidebar label,
.sidebar .value-display,
.sidebar-section h2,
.sidebar-section h3,
.sidebar-section h4,
.sidebar input,
.sidebar .dropdown-text,
.sidebar span,
.sidebar select,
.sidebar option,
.sidebar input[type="number"],
.sidebar-header span,
.sidebar button span,
.sidebar a {
    color: #c49efa !important; /* Lighter purple to match the rest of the interface */
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.9) !important;
    opacity: 1 !important;
}

/* Make the number values more visible */
.sidebar input[type="number"],
.sidebar .value-display,
.sidebar span:has(+ input),
.sidebar span:contains("1024"),
.sidebar span:contains("42") {
    color: #d9b6ff !important; /* Brighter purple for numeric values */
}

/* Fix color of value displays in sidebar */
.sidebar input[type="number"] {
    color: #d9b6ff !important;
    background: rgba(50, 10, 70, 0.25); /* Slightly more visible background */
}

/* Improve range slider color */
input[type="range"]::-webkit-slider-thumb {
    background: linear-gradient(90deg, #c49efa, #9d4edd);
}

input[type="range"]::-moz-range-thumb {
    background: linear-gradient(90deg, #c49efa, #9d4edd);
}

/* Make dropdown text and input field values white */
.sidebar select,
.sidebar option,
.sidebar input[type="number"],
.sidebar input[type="text"],
select,
option,
input[type="number"],
input[type="text"] {
    color: var(--text-white) !important; /* White text */
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8) !important;
}

/* Fix dropdown options */
select option {
    color: var(--text-white) !important;
}

/* Adjust the sidebar selectors to avoid changing dropdown text color */
.sidebar-header,
.section-title,
.sidebar label,
.sidebar .value-display,
.sidebar-section h2,
.sidebar-section h3,
.sidebar-section h4,
.sidebar-header span,
.sidebar button span,
.sidebar a {
    color: #c49efa !important; /* Keep these elements light purple */
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.9) !important;
    opacity: 1 !important;
}

/* Override for dropdown display text */
.sidebar select, 
select option,
.dropdown-display-text,
.dropdown-text,
.dropdown-value,
.sidebar input::placeholder {
    color: var(--text-white) !important;
}

/* Target specific sidebar sections to make them white */
.sidebar span:contains("Canvas Width"),
.sidebar span:contains("Canvas Height"),
.sidebar span:contains("Seed"),
.sidebar span:contains("Image Model"),
.sidebar span:contains("Art Style"),
.sidebar span:contains("Remove Watermark"),
.sidebar span:contains("Keep Private"),
.sidebar span:contains("Enhance Prompt"),
.sidebar-section:contains("Canvas Settings") .section-title,
.sidebar-section:contains("Seed Settings") .section-title,
.sidebar-section:contains("Model & Style") .section-title,
.sidebar-section:contains("Settings") .section-title,
.sidebar label[for="width"],
.sidebar label[for="height"],
.sidebar label[for="seed"],
.sidebar label[for="model"],
.sidebar label[for="style"],
.sidebar label[for="watermark"],
.sidebar label[for="private"],
.sidebar label[for="enhance"],
.enhance-description,
.sidebar .style-description {
    color: var(--text-white) !important;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.9) !important;
}

/* Use more direct selectors for these specific elements */
.sidebar .section-title,
.style-description,
.enhance-description {
    color: var(--text-white) !important;
}

/* Target the enhancement description more specifically */
.enhance-description,
.sidebar-section:last-child .style-description,
.sidebar div:contains("transform your prompt") {
    color: var(--text-white) !important;
    opacity: 0.8 !important;
}

/* Enhancement page specific styles */
.nav-link {
    display: block;
    padding: 0.5rem 0.8rem;
    color: var(--text-light);
    text-decoration: none;
    border-radius: 6px;
    margin-bottom: 0.3rem;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.nav-link:hover {
    background: rgba(157, 78, 221, 0.1);
    color: var(--primary-color);
}

.nav-link.active {
    background: rgba(157, 78, 221, 0.15);
    color: var(--primary-color);
    font-weight: 500;
}

.upload-area {
    width: 100%;
    min-height: 200px;
    border: 2px dashed rgba(157, 78, 221, 0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    padding: 1rem;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.03);
    position: relative;
}

.upload-area:hover {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.05);
}

.upload-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.upload-button {
    background: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
    color: white;
    font-size: 1rem;
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    margin-top: 1rem;
    font-family: 'Quicksand', sans-serif;
}

.upload-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(157, 78, 221, 0.3);
}

#upload-content {
    text-align: center;
    width: 100%;
}

#preview-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#preview-image {
    max-width: 100%;
    max-height: 300px;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.remove-button {
    background: rgba(255, 87, 87, 0.8);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    margin-top: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.remove-button:hover {
    background: rgba(255, 87, 87, 1);
}

.comparison-view {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.comparison-item {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.comparison-item h3 {
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 5, 30, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    z-index: 1000;
}

.loading-text {
    color: var(--primary-color);
    margin-top: 1rem;
}

/* Make the enhance button more prominent */
#enhance-button {
    background: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
    color: white;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0.75rem 2rem;
    border-radius: 12px;
    border: none;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Quicksand', sans-serif;
}

#enhance-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(157, 78, 221, 0.3);
}

#enhance-button:disabled {
    background: linear-gradient(45deg, rgba(157, 78, 221, 0.3), rgba(123, 44, 191, 0.3));
    cursor: not-allowed;
}

/* Lightbox styles */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-image {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(157, 78, 221, 0.4);
}

.lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
    transition: all 0.3s ease;
}

.lightbox-close:hover {
    color: var(--primary-color);
    transform: scale(1.2);
}

.lightbox-title {
    margin-top: 15px;
    color: white;
    font-size: 1.2rem;
    text-align: center;
    max-width: 90%;
    font-weight: 500;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

.lightbox-download-btn {
    margin-top: 15px;
    padding: 0 20px;
    background: linear-gradient(135deg, #4c9aed 0%, #2c63bf 100%);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 44px;
    text-align: center;
    font-family: 'Quicksand', sans-serif;
    box-sizing: border-box;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1;
}

.lightbox-download-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(157, 78, 221, 0.4);
}

/* Action button style */
.action-button {
    padding: 0 20px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Quicksand', sans-serif;
    width: 160px;
    height: 44px;
    text-align: center;
    box-sizing: border-box;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1;
    position: relative;
    margin: 0;
    flex-shrink: 0;
}

.action-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(157, 78, 221, 0.3);
}

.download-button, .view-button {
    position: relative;
    top: 0;
    bottom: 0;
    height: 44px;
}

.download-button {
    background: linear-gradient(135deg, #4c9aed 0%, #2c63bf 100%);
}

.view-button {
    background: linear-gradient(135deg, #9d4edd 0%, #7b2cbf 100%);
}

.button-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 1rem;
    flex-wrap: nowrap;
    align-items: center;
    position: relative;
}

/* Force exact alignment of button content */
.action-button span {
    display: inline-block;
    transform: translateY(0);
    font-size: 1rem;
    line-height: 1;
    position: relative;
    top: 0;
    margin-right: 2px;
}

/* Force both buttons to be at exactly the same height */
.button-container .action-button {
    transform: translateY(0);
    top: 0;
}

/* Override any potential browser-specific emoji rendering differences */
.download-button span,
.view-button span {
    font-size: 16px;
    height: 16px;
    line-height: 16px;
}

/* Feature note styles */
.feature-note {
    background: rgba(157, 78, 221, 0.1);
    border-radius: 8px;
    padding: 10px;
    margin-top: 5px;
    border: 1px dashed rgba(157, 78, 221, 0.3);
}

.feature-note p {
    margin: 5px 0;
    font-size: 0.9rem;
    color: var(--text-light);
}