/* Gallery Styles */
.rapidviz-pane {
    margin-top: 40px;
    backdrop-filter: blur(15px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 24px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 0 30px 30px 30px; /* Top padding removed for sticky header */
    animation: fadeIn 0.5s ease-out;
    box-sizing: border-box;
    
    /* Enable manual vertical resizing */
    resize: vertical;
    overflow: auto;
    max-height: 850px; /* Default max height ~4 rows */
    height: auto;
    min-height: 200px;
}

#imageGallery,
.rapidviz-video-gallery-container {
    /* Reset styles as they are now inner containers */
    margin-top: 0;
    backdrop-filter: none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    padding: 0;
    animation: none;
    resize: none;
    overflow: visible;
    min-height: auto;
}

/* Slider Styling */
input[type=range] {
    -webkit-appearance: none;
    background: transparent;
}
input[type=range]:focus {
    outline: none;
}
/* Webkit Thumb */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: #667eea;
    cursor: pointer;
    margin-top: -5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
/* Webkit Track */
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #ddd;
    border-radius: 2px;
}
/* Firefox Thumb */
input[type=range]::-moz-range-thumb {
    height: 14px;
    width: 14px;
    border: none;
    border-radius: 50%;
    background: #667eea;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
/* Firefox Track */
input[type=range]::-moz-range-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #ddd;
    border-radius: 2px;
}

.gallery-header {
    display: flex;
    justify-content: space-between; /* Ensure title and controls are spaced */
    align-items: center;
    margin-bottom: 20px;
    padding: 30px 0 10px 0; /* Top padding matches pane padding */
    background: #ffffff; /* Opaque white background */
    position: sticky;
    top: 0;
    z-index: 100; /* Ensure it stays above content */
    /* backdrop-filter: blur(15px); Removed blur since it's opaque */
    border-bottom: 1px solid rgba(0,0,0,0.05); /* Subtle separator */
    margin-top: 0;
}

/* Ensure h4 is visible now */
.gallery-header h4, 
.video-gallery-header h3 {
    display: block !important;
    margin: 0;
    color: #333;
    font-size: 18px; /* Consistent size */
}

.clear-gallery-btn {
    padding: 4px 10px;
    background: transparent;
    color: #999;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 400;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.clear-gallery-btn:hover {
    background: #f5f5f5;
    color: #666;
    border-color: #ccc;
}

.gallery-grid,
.video-gallery-grid {
    display: grid;
    /* Dynamic columns based on slider variable, defaulting to ~5 cols on desktop (assuming ~1000px container -> 200px) */
    grid-template-columns: repeat(auto-fill, minmax(var(--gallery-min-width, 200px), 1fr));
    gap: 15px;
    max-width: 100%;
}

/* Responsive Columns override handled by auto-fill mostly, but keep media queries for finer control if needed? 
   Actually auto-fill replaces the need for explicit media queries for column count usually.
   I'll comment out specific column overrides to let auto-fill work.
*/
/* 
@media (max-width: 1400px) { ... } 
*/

.gallery-item {
    position: relative;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    /* max-width: 300px; Removed max-width to fit grid */
    /* height: 200px; Removed fixed height for dynamic aspect ratio */
    aspect-ratio: 1 / 1; /* Default square, or 16/9 if preferred */
    display: flex;
    flex-direction: column;
}

/* Allow video items to be 16:9 */
.video-gallery-item {
    aspect-ratio: 16 / 9;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    display: block;
    border-radius: 8px 8px 0 0;
    transition: transform 0.3s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.gallery-image:hover {
    transform: scale(1.05);
}

.gallery-image:active {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.gallery-actions {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 5px;
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

.gallery-download-btn,
.gallery-edit-btn,
.gallery-delete-btn {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    padding: 6px 8px; /* Slightly reduced padding */
    font-size: 11px; /* Smaller font size for better fit */
    border-radius: 4px;
    cursor: pointer;
    border: none;
    text-decoration: none;
    -webkit-transition: background 0.3s ease;
    -o-transition: background 0.3s ease;
    transition: background 0.3s ease;
    white-space: nowrap; /* Prevent text breaking inside button */
    min-width: 60px; /* Minimum width for touch targets */
}

.gallery-download-btn {
    background-color: #28a745;
    color: white;
}

.gallery-download-btn:hover {
    background-color: #218838;
    color: white;
    text-decoration: none;
}

.gallery-edit-btn {
    background-color: #007bff;
    color: white;
}

.gallery-edit-btn:hover {
    background-color: #0069d9;
}

.gallery-delete-btn {
    background-color: #dc3545 !important;
    background: #dc3545 !important;
    color: white;
}

.gallery-delete-btn:hover {
    background-color: #c82333 !important;
}

/* Overlay adjustments for mobile */
.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9)); /* Darker gradient for better visibility */
    color: white;
    padding: 15px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Push content to bottom */
    z-index: 10; /* Ensure it's above image */
    max-height: 100%;
    overflow-y: auto; /* Allow scrolling if content is too tall */
}

/* Ensure overlay is visible on hover/focus/active for touch devices */
.gallery-item:hover .gallery-overlay,
.gallery-item:focus .gallery-overlay,
.gallery-item:active .gallery-overlay,
.gallery-item.touched .gallery-overlay {
    transform: translateY(0);
}

.gallery-info {
    margin-bottom: 10px;
    overflow: hidden;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Watermark Overlay for Try It Mode */
.gallery-item.has-watermark::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--watermark-url, none);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--watermark-opacity, 0.5);
    pointer-events: none; /* Allow clicks to pass through */
    z-index: 5;
}

/* Gallery Selection Checkbox Styles */
.rapidviz-gallery-checkbox-container {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 50; /* High z-index to sit above overlay and everything else */
    opacity: 0;
    transition: opacity 0.3s ease;
    /* Remove background as requested */
    background: transparent;
    border-radius: 4px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Show on hover or touch */
.gallery-item:hover .rapidviz-gallery-checkbox-container,
.gallery-item:focus-within .rapidviz-gallery-checkbox-container,
.gallery-item.touched .rapidviz-gallery-checkbox-container,
.gallery-item.is-selected .rapidviz-gallery-checkbox-container {
    opacity: 1;
}

/* Highlight when selected - minimal background */
.gallery-item.is-selected .rapidviz-gallery-checkbox-container {
    background: rgba(0,0,0,0.2); /* Very subtle background only when selected */
    opacity: 1 !important; /* Ensure it stays visible */
}

/* Ensure it's clickable */
.rapidviz-gallery-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin: 0;
    padding: 0;
    accent-color: #667eea; /* Default primary */
    accent-color: var(--rapidviz-primary, #667eea);
    pointer-events: auto;
}

/* Slider Styling */
input[type=range] {
    -webkit-appearance: none;
    background: transparent;
}
input[type=range]:focus {
    outline: none;
}
/* Webkit Thumb */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: #667eea;
    cursor: pointer;
    margin-top: -5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
/* Webkit Track */
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #ddd;
    border-radius: 2px;
}
/* Firefox Thumb */
input[type=range]::-moz-range-thumb {
    height: 14px;
    width: 14px;
    border: none;
    border-radius: 50%;
    background: #667eea;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
/* Firefox Track */
input[type=range]::-moz-range-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #ddd;
    border-radius: 2px;
}