/* static/css/gallery_detail.css */

.masonry-container { padding: 3rem 0 5rem 0; background: #f8f9fa; }

/* Filter Header Styles */
.filter-header { margin-bottom: 3.5rem; text-align: center; }
.header-top-row { text-align: left; margin-bottom: 1rem; }
.back-link { color: var(--accent-color); font-weight: 600; text-decoration: none; }
.back-link i { margin-right: 0.5rem; }
.filter-header h1 { font-size: 2.8rem; color: var(--primary-color); margin: 0; }
.filter-header .subtitle { font-size: 1.1rem; color: #6c757d; margin-top: 0.5rem; margin-bottom: 1.5rem; }
.viewing-status { font-weight: 600; color: #495057; }

/* Custom Dropdown Styles */
#category-filter-form { position: relative; display: inline-block; }
.custom-dropdown-container { position: relative; }
.dropdown-button { background: var(--white); border: 1px solid #ced4da; border-radius: 8px; padding: 0.8rem 1.5rem; font-size: 1rem; font-weight: 600; color: var(--primary-color); cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-width: 250px; transition: all 0.2s ease; }
.dropdown-button:hover, .dropdown-button.active { border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-color-light); }
.dropdown-button .fa-chevron-down { margin-left: 1rem; transition: transform 0.2s ease; }
.dropdown-button.active .fa-chevron-down { transform: rotate(180deg); }
.dropdown-panel { display: none; position: absolute; top: 110%; left: 50%; transform: translateX(-50%); width: 350px; background: var(--white); border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); z-index: 10; border: 1px solid #e9ecef; overflow: hidden; }
.dropdown-panel.show { display: block; }
.dropdown-options { max-height: 250px; overflow-y: auto; padding: 0.5rem; }
.dropdown-option { display: flex; align-items: center; padding: 0.75rem 1rem; cursor: pointer; border-radius: 6px; }
.dropdown-option:hover { background-color: #f8f9fa; }
.dropdown-option input[type="checkbox"] { width: 1.15em; height: 1.15em; margin-right: 1rem; border: 1px solid #adb5bd; cursor: pointer; }
.dropdown-option span { font-weight: 500; color: #495057; }
/* [THE FIX] Removed the style for .dropdown-actions */

/* --- Styles for the Grid Wrapper and Loading Indicator --- */
.masonry-grid-wrapper {
    position: relative;
    min-height: 250px; /* Reserves vertical space while loading */
}
.loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: #6c757d;
}
.loading-indicator .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--accent-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.no-images-message {
  text-align: center;
  padding: 3rem;
  color: #6c757d;
  font-size: 1.1rem;
}

/* --- Masonry Grid Styles --- */
.masonry-grid { margin: 0 auto; opacity: 0; transition: opacity 0.5s ease; }
.masonry-grid.loaded { opacity: 1; }
.masonry-grid:after { content: ''; display: block; clear: both; }
.masonry-item { width: 33.333%; float: left; padding: 0.75rem; box-sizing: border-box; }
.masonry-item a { display: block; border-radius: 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); background-color: #e9ecef; aspect-ratio: 3 / 2; }
.masonry-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Responsive adjustments */
@media (max-width: 992px) { .masonry-item { width: 50%; } }
@media (max-width: 576px) { .masonry-item { width: 100%; } }