/* override any lazy/hover rules so your thumbnails actually show */
/* grid thumbnails only */
#default-images .ai-image,
#generated-images .ai-image {
  aspect-ratio: 1/1;
  overflow: hidden;
}
#default-images .ai-image img,
#generated-images .ai-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ai-image img.loaded {
    visibility: visible;
}
.image-grid .ai-image { position:relative; }
.image-grid .ai-image::before { content:''; display:block; padding-top:100%; }
.image-grid .ai-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

#default-images .ai-image,
#generated-images .ai-image{
    position:relative
}
#default-images .ai-image::before,

#default-images .ai-image img,
#generated-images .ai-image img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover
      
      
        .modal-body .ai-image-img{width:100%;height:auto}    /* give wrapper natural height */
  .modal-body .ai-image-img img{display:block;width:100%;height:auto}
}



.ai-image-image { position:relative; }
.ai-image-image::before { content:''; display:block; padding-top:100%; }
.ai-image-imagee img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }





/* make sure the main image in the modal is always shown */
.img-fluid .rounded-3 .w-100 .ai-image-img img,
.ai-image-image img{           /* covers both spellings */
    display:block;
    width:100%;
    height:auto;
}


.card-v .prompt-container {
        padding: 15px;
        margin-top: 10px;
    }
    
    .card-v .prompt-container .ai-image-details-title {
        font-weight: 500;
        margin-bottom: 10px;
    }
    
    .card-v .prompt-container .ai-image-details-text {
        margin-bottom: 10px;
    }
    
    /* If you need to match the right panel exactly */
    .card-v .prompt-container .expandable-text-container {
        width: 100%;
    }




 #gallery-search-wrap {    /* already centred by wrapper → container */
    margin-bottom: 2rem;
}


/* Center title in header (w-100 & text-center do this) */

/* Spinner & image */
#imageModalContent img {
  max-height: 70vh;
  object-fit: contain;
}

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

/* Social icons row */


/* Download button styling (same as expand) */
#downloadBtn {
  background: #8e44ad;
  color: #fff;
  padding: .5rem 1.5rem;
  border: none;
}
#downloadBtn:hover {
  background: #9b59b6; 
}
 #progress-section, #generated-images {
  scroll-margin-top: 20vh; /* Creates breathing room at top */
}
.ai-image {
  min-height: 320px;
}


 
.modal-body .ai-image-img img, ai-image-img.position-relative {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    width:100% !important;
    height:auto !important;
}


/*.ai-image-img img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
  }*/


/*#generated-images {
  scroll-margin-top: 80px;  
  display: block !important;
  visibility: visible !important;
}*/




figure.image img {
  width: 100%; /* Makes the image responsive */
  max-width: 700px; /* Limits the maximum width to 700px */
  height: auto; /* Maintains aspect ratio */
  border-radius: 8px; /* Optional: rounded corners */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: subtle shadow */
}

figure.image {
  max-width: 100%; /* Ensures the figure doesn’t overflow */
  margin: 1rem auto; /* Center the image and add spacing */
  text-align: center; /* Centers the caption (if any) */
}
@media (max-width: 600px) {
  figure.image img {
    width: 100%; /* Ensures it takes full width on smaller screens */
    max-width: 100%; /* Removes the max-width on small screens */
  }
}

.generator-search.v2 .generator-options {
  padding: 20px !important;
}

.form-select.form-select-md {
  font-size: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.card-v {
padding: 20px;}
.ai-image {
    width: 320px; /* Match your thumbnail width */
    height: 320px; /* Match your thumbnail height */
    margin: 10px;
    overflow: hidden;
}

.ai-image img {

    visibility: hidden;
    width: 100%;
    height: 100%;
    object-fit: **cover**; /* <-- change from 'fill' to 'cover' */
    transition: 0.3s;
  object-position: center center;
}
  



/* Testimonial section styling to match FAQ accordion */

/* Light mode (default) styles */
.testimonial-box {
  border-radius: 10px;              /* Rounded corners (all 4 corners) */
  padding: 20px;                    /* Inner padding for content */
  background-color: #fff;           /* White background (light mode) */
  border: 1px solid #eee;           /* Light gray border */
  max-width: 800px;                 /* Limit width to FAQ box width (example value) */
  margin: 0 auto;                   /* Center the testimonial box horizontally */
}

/* Dark mode styles */
.dark .testimonial-box {
  background-color: var(--darkModePrimaryColor);  /* Same background as FAQ in dark mode */
  border: 1px solid var(--darkModeThirdColor);    /* Same border color as FAQ in dark mode */
}



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

/* .generator-options {
  display: inline-block;     /* shrink to content 
  width: auto;               /* let its contents decide the width
  max-width: 240px;          /* or whatever max works for you 
  padding: 0.5rem;           /* tighten the padding 
  font-size: 0.85rem;        /* shrink all text inside 
  line-height: 1.2;                                            
}*/

#generator {margin-bottom: 5px;}
.generator-options .form-label {
  font-size: 1rem;
  margin-bottom: 0.3rem;
}

.generator-options .form-control,
.generator-options .form-select {
  font-size: 0.9rem;
  padding: 0.3rem 0.3rem;
}

.generator-options .mb-2 {
  margin-bottom: 0.3rem;
}

.generator-options .form-control {
  font-size: 0.9rem;
  padding: 0.3rem 0.3rem;
}

#generate-button {
  font-size: 1rem;
  padding: 0.25rem 0.6rem;
   /* width: auto !important;/* remove any w-100 / full-width */
  max-height: 3rem;
}

.generator-search.v2 .btn {
  border-radius: 7px;
  max-height: 3.5rem;
  font-size: 14px;
}
.generator-search.v2 .form-control {
  max-height:3.5rem;
  font-size: 14px;
}