/* Responsive Flowy Gallery Layout */

#rcore-gallery {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    /* Ensure no extra vertical space */
    line-height: 0 !important;
}

#rcore-gallery::after {
  content: '' !important;
  flex-grow: 99999 !important;
}

#rcore-gallery .gallery-item {
    /* Allow items to size based on content, no forced dimensions */
    flex: 0 1 auto;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

#rcore-gallery img {
    /* Display images at their natural size, no rescaling */
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
}

/* Zoom effect */
#rcore-gallery img.zoomable {
    transform: scale(1);
    transition: transform 0.3s ease-in-out;
}

#rcore-gallery img.zoomable:hover {
    transform: scale(1.1);
    cursor: pointer;
}

/* -----------------------------------------------------------
   Filters Styling
----------------------------------------------------------- */
.rcore-gallery-filters {
    text-align: center !important;
    margin-bottom: 30px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    gap: 15px !important;
    justify-content: center !important;
    align-items: center !important;
    overflow-x: auto !important;
}

.rcore-gallery-filters form {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    gap: 15px !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

.rcore-gallery-select {
    display: inline-block !important;
    padding: 10px 15px !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-family: inherit !important;
    color: #333 !important;
    background-color: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
    cursor: pointer !important;
    appearance: none !important; /* Remove default arrow in some browsers for custom feel, or keep it */
    -webkit-appearance: menulist !important; /* Keep default arrow for usability but styled */
    transition: border-color 0.3s, box-shadow 0.3s !important;
    flex: 0 0 auto !important;
    min-width: 150px !important;
    max-width: 250px !important;
    width: auto !important;
    white-space: nowrap !important;
}

.rcore-gallery-select:hover,
.rcore-gallery-select:focus {
    border-color: #aaa !important;
    outline: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* -----------------------------------------------------------
   Pagination Styling ("Painting")
----------------------------------------------------------- */
#rcore-gallery-pagination {
    margin-top: 40px !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
}

#rcore-gallery-pagination .item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 35px !important;
    height: 35px !important;
    padding: 0 10px !important;
    margin: 0 2px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    color: #555 !important;
    background-color: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

#rcore-gallery-pagination .item:hover {
    background-color: #f5f5f5 !important;
    border-color: #ccc !important;
    color: #333 !important;
}

#rcore-gallery-pagination .item.current {
    background-color: #333 !important; /* Dark theme or primary color */
    color: #fff !important;
    border-color: #333 !important;
    /* font-weight: bold !important; */
    pointer-events: none !important;
}

/* Hide not found message initially if needed, logic handles removal */
#rcore-gallery-nothing-found {
    margin: 50px 0 !important;
    color: #888 !important;
}

/* Admin Edit Link */
.rcore-gallery-edit-link {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    color: #fff !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    border-radius: 3px !important;
    text-decoration: none !important;
    z-index: 10 !important;
    opacity: 0.6 !important;
    transition: opacity 0.2s ease !important;
}

.rcore-gallery-edit-link:hover {
    opacity: 1 !important;
    background-color: #0073aa !important; /* WP Admin Color */
}

/* Loading Overlay */
.rcore-loading-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1000 !important;
}

.rcore-spinner {
    width: 50px !important;
    height: 50px !important;
    border: 4px solid #f3f3f3 !important;
    border-top: 4px solid #333 !important;
    border-radius: 50% !important;
    animation: rcore-spin 1s linear infinite !important;
}

@keyframes rcore-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Make wrapper position relative for overlay */
#rcore-gallery-wrapper {
    position: relative !important;
}

/* Lightbox caption styling - position at top with bigger font */
.lb-data .lb-caption {
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #fff !important;
    margin-right: 40px !important; /* Make space for close button */
}

.lb-data .lb-details {
    width: 100% !important;
}

/* Position lightbox data container at top */
.lightbox .lb-dataContainer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    bottom: auto !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%) !important;
    padding: 20px !important;
    pointer-events: none !important; /* Allow clicking through empty parts */
}

/* Make content clickable again */
.lb-data {
    pointer-events: auto !important;
}

/* Ensure close button is visible and clickable */
.lb-data .lb-close {
    float: right !important;
    width: 30px !important;
    height: 30px !important;
    background-size: contain !important;
    opacity: 0.8 !important;
    transition: opacity 0.2s !important;
    margin-top: 5px !important;
}

.lb-data .lb-close:hover {
    opacity: 1 !important;
}


/* Ensure close button stays on top */
.lb-close {
    z-index: 9999 !important;
}