/* Base styles */
:root {
    --primary-color: #8b5cf6;
    --primary-dark: #7c3aed;
    --secondary-color: #ec4899;
    --accent-color: #0ea5e9;
    --text-color: #1f2937;
    --light-gray: #f3f4f6;
    --border-color: #d1d5db;
    --shadow-color: rgba(0, 0, 0, 0.1);
  }
  
  .enhance-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-color);
  }
  
  h2.section-title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: var(--primary-color);
    text-align: center;
  }
  
  /* File input styling */
  .file-input-container {
    margin-bottom: 2rem;
    padding: 2rem;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
  }
  
  .file-input-container:hover {
    border-color: var(--primary-color);
  }
  
  .file-input-container label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
  }
  
  input[type="file"] {
    display: block;
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-top: 0.5rem;
  }
  
  /* Image preview */
  #image-preview-container {
    display: none;
    margin: 1rem 0 2rem;
    text-align: center;
  }
  
  #image-preview {
    max-width: 100%;
    max-height: 300px;
    border-radius: 8px;
    box-shadow: 0 4px 6px var(--shadow-color);
  }
  
  /* Enhancement options styling */
  .enhancement-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  
  .enhancement-category {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px var(--shadow-color);
    overflow: hidden;
    transition: all 0.3s ease;
  }
  
  .enhancement-category h3 {
    padding: 1rem;
    margin: 0;
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    color: white;
    cursor: pointer;
    position: relative;
  }
  
  .enhancement-category h3::after {
    content: '+';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
  }
  
  .enhancement-category.active h3::after {
    content: '-';
  }
  
  .enhancement-options-content {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }
  
  .enhancement-category.active .enhancement-options-content {
    padding: 1rem;
    max-height: 1000px;
  }
  
  .enhancement-option {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--light-gray);
  }
  
  .enhancement-option:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  
  .enhancement-option label {
    margin-left: 0.5rem;
    flex-grow: 1;
  }
  
  /* Slider styling */
  .slider-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 0.5rem;
  }
  
  .slider {
    width: 100%;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--light-gray);
    outline: none;
    border-radius: 4px;
  }
  
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
  }
  
  .slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: none;
  }
  
  .slider-value {
    font-size: 0.8rem;
    color: var(--text-color);
    margin-top: 0.25rem;
    text-align: center;
  }
  
  /* Button styles */
  .enhance-button {
    display: block;
    width: 100%;
    padding: 1rem;
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
  }
  
  .enhance-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-color);
  }
  
  /* Loading spinner */
  #loading {
    display: none;
    text-align: center;
    margin: 2rem 0;
  }
  
  .spinner {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 5px solid var(--light-gray);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: spin 1s ease-in-out infinite;
  }
  
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  
  /* Result container */
  #result-container {
    display: none;
    margin-top: 2rem;
    padding: 2rem;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px var(--shadow-color);
    text-align: center;
  }
  
  #result-container h3 {
    margin-top: 0;
    color: var(--primary-color);
  }
  
  #result-image {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 4px var(--shadow-color);
    margin-bottom: 1rem;
  }
  
  .download-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: var(--accent-color);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.3s ease;
  }
  
  .download-button:hover {
    background-color: #0284c7;
    transform: translateY(-2px);
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .enhancement-options {
      grid-template-columns: 1fr;
    }
    
    .enhance-container {
      padding: 1rem;
    }
  }

/* Enhance Image Page Specific Styles */

/* Background animations */
.stars, .twinkling, .clouds {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: -1;
}

.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;
}

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

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

/* 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;
}

.star-3 {
    width: 3px;
    height: 3px;
    animation: twinkle-3 7s infinite ease-in-out;
}

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

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

@keyframes twinkle-2 {
    0%, 100% { opacity: 0.05; }
    30% { opacity: 0.3; }
    50% { opacity: 0.9; }
    70% { opacity: 0.5; }
    85% { opacity: 0.15; }
}

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

@keyframes twinkle-4 {
    0%, 100% { opacity: 0; }
    20% { opacity: 0.5; }
    30% { opacity: 0.2; }
    40% { opacity: 0.9; }
    60% { opacity: 0.3; }
    80% { opacity: 0.7; }
}

.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);
    animation: twinkling-stars-1 25s linear infinite;
}

.twinkling:after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow: 
        50px 50px 1px 0px rgba(255, 255, 255, 0.3),
        100px 150px 1px 0px rgba(255, 255, 255, 0.2),
        125px 220px 1px 1px rgba(255, 255, 255, 0.5),
        150px 50px 1px 0px rgba(255, 255, 255, 0.4),
        220px 90px 1px 0px rgba(255, 255, 255, 0.3),
        280px 130px 1px 1px rgba(255, 255, 255, 0.5),
        335px 170px 1px 0px rgba(255, 255, 255, 0.4),
        380px 90px 1px 0px rgba(255, 255, 255, 0.3),
        430px 130px 1px 1px rgba(255, 255, 255, 0.5),
        480px 170px 1px 0px rgba(255, 255, 255, 0.4);
    animation: twinkling-stars-2 30s linear infinite;
}

@keyframes twinkling-stars-1 {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-1000px);
    }
}

@keyframes twinkling-stars-2 {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-1000px) translateX(500px);
    }
}

.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.4;
    animation: move-background 150s linear infinite;
}

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

/* Improved text input styling */
.input-container textarea {
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 16px;
    transition: all 0.3s ease;
    outline: none;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    resize: vertical;
    font-family: 'Quicksand', sans-serif;
}

.input-container textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 20px rgba(157, 78, 221, 0.3);
}

.input-container textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* Enhancement Controls */
.enhancement-controls {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.control-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}

.control-group {
    flex: 1;
    min-width: 200px;
}

.slider-control {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.slider-control label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.slider-control label span {
    font-weight: bold;
    color: var(--accent-color);
}

.slider-control input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, #1a1a2e, #4a306d);
    outline: none;
    margin: 10px 0;
}

.slider-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #9d4edd;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-control input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 10px #9d4edd;
}

/* Upload Area */
.upload-area {
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    padding: 40px 20px;
    text-align: center;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
    cursor: pointer;
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-area.highlight {
    border-color: #9d4edd;
    background: rgba(0, 0, 0, 0.4);
}

.upload-icon {
    font-size: 48px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.7);
}

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

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

.remove-button {
    margin-top: 10px;
    background: rgba(255, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.remove-button:hover {
    background: rgba(255, 0, 0, 0.8);
}

/* Enhancement Results */
.comparison-view {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.comparison-item {
    flex: 1;
    min-width: 300px;
    background: rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.comparison-item h3 {
    margin-bottom: 15px;
    color: #9d4edd;
}

.comparison-item img {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Loading Overlay */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    border-radius: 10px;
}

.spinner {
    width: 60px;
    height: 60px;
    position: relative;
    margin-bottom: 20px;
}

.double-bounce1, .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #9d4edd;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
    animation-delay: -1.0s;
}

@keyframes sk-bounce {
    0%, 100% { 
        transform: scale(0.0);
    } 50% { 
        transform: scale(1.0);
    }
}

.loading-text {
    color: white;
    font-size: 18px;
    text-align: center;
    margin-top: 10px;
}

/* Enhance button styling */
#enhance-button {
    display: block;
    width: 100%;
    padding: 15px;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    background: linear-gradient(45deg, #7b2cbf, #9d4edd);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

#enhance-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

#enhance-button:disabled {
    background: linear-gradient(45deg, #4a306d, #6b4a8f);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
    .control-row {
        flex-direction: column;
    }
    
    .control-group {
        width: 100%;
    }
    
    .comparison-view {
        flex-direction: column;
    }
    
    .comparison-item {
        width: 100%;
    }
}

/* Update the shooting star animation to match styles.css */
.shooting-star {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
    animation: shooting 10s linear infinite;
    opacity: 0;
    z-index: 1;
    transform-origin: 0 0;
    box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.4);
}

@keyframes shooting {
    0% {
        transform: translateX(0) translateY(0) rotate(215deg);
        opacity: 0;
        width: 0;
    }
    0.1% {
        opacity: 0.6;
        width: 50px;
    }
    5% {
        width: 150px;
        opacity: 0.6;
    }
    10% {
        transform: translateX(300px) translateY(300px) rotate(215deg);
        opacity: 0;
        width: 0;
    }
    100% {
        transform: translateX(300px) translateY(300px) rotate(215deg);
        opacity: 0;
        width: 0;
    }
}