/* Progress Bar Styles with Your Brand Colors */
        .progress-container {
            background: #FAFBFF;
            border-radius: 10px;
            padding: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            box-sizing: border-box;
            border: 1px solid #f0f0f0;
        }
        
        .progress-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .progress-title {
            margin: 0;
            color: #8F37FF; /* Primary color */
            font-weight: 600;
            font-size: 1.1rem;
        }
        
        .progress-percentage {
            font-size: 1.3rem;
            font-weight: bold;
            color: #8F37FF; /* Primary color */
            min-width: 60px;
            text-align: right;
        }
        
        .progress-status {
            font-size: 0.9rem;
            color: #6c757d;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
        }
        
        #progress-status-text {
            min-width: 200px;
            text-align: left;
            color: #8F37FF; /* Primary color */
        }
        
        #time-remaining {
            min-width: 200px;
            text-align: right;
            color: #641BC0; /* Secondary color */
        }
        
        .progress {
            height: 12px;
            border-radius: 6px;
            background-color: #f8f9fa;
            margin-bottom: 5px;
            overflow: hidden;
        }
        
        .progress-bar {
            background-color: #8F37FF; /* Primary color */
            background-image: linear-gradient(
                45deg,
                rgba(255, 255, 255, 0.15) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, 0.15) 50%,
                rgba(255, 255, 255, 0.15) 75%,
                transparent 75%,
                transparent
            );
            background-size: 1rem 1rem;
            transition: width 0.6s ease;
        }
        
        .progress-steps {
            display: flex;
            justify-content: space-between;
            position: relative;
            margin-top: 25px;
            padding-top: 15px;
        }
        
        .progress-steps::before {
            content: '';
            position: absolute;
            top: 25px;
            left: 15%;
            right: 15%;
            height: 3px;
            background: #f0f0f0;
            z-index: 1;
        }
        
        .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 2;
            width: 25%;
        }
        
        .step-number {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #f0f0f0;
            color: #6c757d;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-bottom: 8px;
            transition: all 0.3s ease;
            border: 2px solid #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .step-label {
            font-size: 0.8rem;
            color: #6c757d;
            text-align: center;
            white-space: nowrap;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 500;
        }
        
        .step.active .step-number {
            background: #8F37FF; /* Primary color */
            color: white;
            transform: scale(1.1);
            box-shadow: 0 3px 6px rgba(143, 55, 255, 0.2);
        }
        
        .step.active .step-label {
            color: #641BC0; /* Secondary color */
            font-weight: 600;
        }
        
        /* Animation for active step */
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(100, 27, 192, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(100, 27, 192, 0); }
            100% { box-shadow: 0 0 0 0 rgba(100, 27, 192, 0); }
        }
        
        .step.active .step-number {
            animation: pulse 1.5s infinite;
        }
        
     /*   #progress-section {
            scroll-margin-top: 100px;
        } */ 

    /* Mobile Progress Bar - Applies below 768px */
    @media (max-width: 767.98px) {
        .progress-container {
            padding: 15px;
            border-radius: 10px;
            margin: 0 10px;
        }
        
        .progress-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }
        
        .progress-title {
            font-size: 1rem;
        }
        
        .progress-percentage {
            font-size: 1.5rem;
            align-self: flex-end;
        }
        
        .progress-status {
            flex-direction: column;
            gap: 5px;
        }
        
        #progress-status-text,
        #time-remaining {
            min-width: 100%;
            text-align: left !important;
        }
        
        .progress-steps {
            margin-top: 15px;
            padding-top: 10px;
        }
        
        .step-label {
            font-size: 0.7rem;
            max-width: 60px;
        }
        
        .step-number {
            width: 24px;
            height: 24px;
            line-height: 24px;
            font-size: 0.8rem;
        }
        
        /* Make progress bar thinner on mobile */
        .progress {
            height: 8px;
        }
    }
    
    




 /* override any lazy/hover rules so your thumbnails actually show */
  .ai-image img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
  }
   .ai-image .spinner-border {
    display: none !important;  
  }

#generated-images img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}




    
    
#gallery-search-wrap {    /* already centred by wrapper → container */
    margin-bottom: 2rem;
}    
    
    
  /* Spinner & image */
#imageModalContent img {
  max-height: 70vh;
  object-fit: contain;
}

/* Prompt toggle text */
#modalPromptText {
  cursor: pointer;
}
.toggle-text {
  color: #8f37ff;
  font-weight: bold;
}

/* Social icons row */
.social-icons {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.social-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px;
  text-decoration: none;
  transition: opacity .3s;
}
.social-btn:hover {
  opacity: .8;
}
.social-facebook { background: #3b5998; }
.social-twitter  { background: #1da1f2; }
.social-linkedin { background: #0077b5; }
.social-whatsapp { background: #25d366; }
.social-pinterest{ background: #e60023; }

/* Download button styling (same as expand) */