/**
 * Vector Fine Art Viewer - Gallery Styles
 * Version: 9.2.3
 * Uses CSS Custom Properties for dynamic styling from ACF options
 */

/* ==========================================================================
   CSS Custom Properties Defaults
   ========================================================================== */
.vfav-gallery {
    /* Layout */
    --vfav-columns-desktop: 4;
    --vfav-columns-tablet-landscape: 3;
    --vfav-columns-tablet-portrait: 2;
    --vfav-columns-mobile-landscape: 2;
    --vfav-columns-mobile-portrait: 1;
    --vfav-gap-desktop: 20px;
    --vfav-gap-tablet: 15px;
    --vfav-gap-mobile: 10px;
    --vfav-row-gap-desktop: 20px;
    --vfav-row-gap-tablet: 15px;
    --vfav-row-gap-mobile: 10px;
    --vfav-align-items: start;
    
    /* Card */
    --vfav-card-bg: #1a1a1a;
    --vfav-card-border-width: 0px;
    --vfav-card-border-color: #333333;
    --vfav-card-border-radius: 8px;
    --vfav-card-padding: 16px;
    --vfav-card-hover-color: #0a84ff;
    
    /* Thumbnail */
    --vfav-thumbnail-padding: 75%;
    --vfav-thumbnail-height: 0;
    --vfav-thumbnail-fit: cover;
    --vfav-thumbnail-radius: 0px;
    --vfav-thumbnail-overlay: rgba(0,0,0,0.2);
    --vfav-play-icon-display: none;
    
    /* Title */
    --vfav-title-size-desktop: 16px;
    --vfav-title-size-tablet-landscape: 15px;
    --vfav-title-size-tablet-portrait: 15px;
    --vfav-title-size-mobile-landscape: 14px;
    --vfav-title-size-mobile-portrait: 14px;
    --vfav-title-line-height-desktop: 1.2;
    --vfav-title-line-height-tablet: 1.2;
    --vfav-title-line-height-mobile: 1.2;
    --vfav-title-weight: 600;
    --vfav-title-color: #ffffff;
    --vfav-title-hover-color: #0a84ff;
    --vfav-title-align: left;
    
    /* Excerpt */
    --vfav-excerpt-font-family: inherit;
    --vfav-excerpt-font-weight: 400;
    --vfav-excerpt-align: left;
    --vfav-excerpt-color: #888888;
    --vfav-excerpt-size-desktop: 14px;
    --vfav-excerpt-size-tablet-landscape: 13px;
    --vfav-excerpt-size-tablet-portrait: 13px;
    --vfav-excerpt-size-mobile-landscape: 12px;
    --vfav-excerpt-size-mobile-portrait: 12px;
    --vfav-excerpt-line-height-desktop: 1.4;
    --vfav-excerpt-line-height-tablet: 1.4;
    --vfav-excerpt-line-height-mobile: 1.4;
    
    /* Button */
    --vfav-button-size: 14px;
    --vfav-button-radius: 6px;
    --vfav-button-bg: #0a84ff;
    --vfav-button-text: #ffffff;
    --vfav-button-hover-bg: #0070e0;
    --vfav-button-hover-text: #ffffff;
    --vfav-button-width: 100%;
}

/* ==========================================================================
   Gallery Container
   ========================================================================== */
.vfav-gallery {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 0;
}

/* ==========================================================================
   Gallery Grid - Default (Grid Layout) with responsive columns
   ========================================================================== */
.vfav-gallery-grid {
    display: grid;
    grid-template-columns: repeat(var(--vfav-columns-desktop), 1fr);
    gap: var(--vfav-row-gap-desktop) var(--vfav-gap-desktop);
    align-items: var(--vfav-align-items);
    width: 100%;
}

/* Base responsive grid (when layout is grid, use correct columns per breakpoint) */
@media (max-width: 1366px) and (min-width: 769px) and (orientation: landscape) {
    .vfav-gallery-grid {
        grid-template-columns: repeat(var(--vfav-columns-tablet-landscape), 1fr);
        gap: var(--vfav-row-gap-tablet) var(--vfav-gap-tablet);
    }
}

@media (max-width: 1366px) and (min-width: 769px) and (orientation: portrait) {
    .vfav-gallery-grid {
        grid-template-columns: repeat(var(--vfav-columns-tablet-portrait), 1fr);
        gap: var(--vfav-row-gap-tablet) var(--vfav-gap-tablet);
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    .vfav-gallery-grid {
        grid-template-columns: repeat(var(--vfav-columns-mobile-landscape), 1fr);
        gap: var(--vfav-row-gap-mobile) var(--vfav-gap-mobile);
    }
}

@media (max-width: 768px) and (orientation: portrait) {
    .vfav-gallery-grid {
        grid-template-columns: repeat(var(--vfav-columns-mobile-portrait), 1fr);
        gap: var(--vfav-row-gap-mobile) var(--vfav-gap-mobile);
    }
}

/* ==========================================================================
   Desktop Layout Switching (>1366px - above iPad Pro landscape)
   ========================================================================== */
@media (min-width: 1367px) {
    /* Desktop - Masonry: thumbnail auto-height (grid layout handled by JS) */
    .vfav-gallery[data-layout-desktop="masonry"] .vfav-gallery-thumbnail {
        padding-top: 0 !important;
        height: auto !important;
        position: relative !important;
    }

    .vfav-gallery[data-layout-desktop="masonry"] .vfav-gallery-thumbnail img {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        aspect-ratio: auto !important;
        display: block !important;
    }
}

/* ==========================================================================
   Tablet Landscape Layout Switching (769px - 1366px, landscape)
   ========================================================================== */
@media (max-width: 1366px) and (min-width: 769px) and (orientation: landscape) {
    /* Tablet Landscape - Grid (must reset masonry properties) */
    .vfav-gallery[data-layout-tablet-landscape="grid"] .vfav-gallery-grid {
        display: grid !important;
        grid-template-columns: repeat(var(--vfav-columns-tablet-landscape), 1fr);
        gap: var(--vfav-row-gap-tablet) var(--vfav-gap-tablet);
    }
    
    .vfav-gallery[data-layout-tablet-landscape="grid"] .vfav-gallery-grid .vfav-gallery-item {
        grid-row-end: auto !important;
    }
    
    /* Tablet Landscape - Masonry: thumbnail auto-height */
    .vfav-gallery[data-layout-tablet-landscape="masonry"] .vfav-gallery-thumbnail {
        padding-top: 0 !important;
        height: auto !important;
        position: relative !important;
    }
    
    .vfav-gallery[data-layout-tablet-landscape="masonry"] .vfav-gallery-thumbnail img {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        aspect-ratio: auto !important;
        display: block !important;
    }
}

/* ==========================================================================
   Tablet Portrait Layout Switching (769px - 1366px, portrait)
   ========================================================================== */
@media (max-width: 1366px) and (min-width: 769px) and (orientation: portrait) {
    .vfav-gallery[data-layout-tablet-portrait="grid"] .vfav-gallery-grid {
        display: grid !important;
        grid-template-columns: repeat(var(--vfav-columns-tablet-portrait), 1fr);
        gap: var(--vfav-row-gap-tablet) var(--vfav-gap-tablet);
    }
    
    .vfav-gallery[data-layout-tablet-portrait="grid"] .vfav-gallery-grid .vfav-gallery-item {
        grid-row-end: auto !important;
    }
    
    /* Tablet Portrait - Masonry: thumbnail auto-height */
    .vfav-gallery[data-layout-tablet-portrait="masonry"] .vfav-gallery-thumbnail {
        padding-top: 0 !important;
        height: auto !important;
        position: relative !important;
    }
    
    .vfav-gallery[data-layout-tablet-portrait="masonry"] .vfav-gallery-thumbnail img {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        aspect-ratio: auto !important;
        display: block !important;
    }
}

/* ==========================================================================
   Mobile Landscape Layout Switching
   ========================================================================== */
@media (max-width: 768px) and (orientation: landscape) {
    .vfav-gallery[data-layout-mobile-landscape="grid"] .vfav-gallery-grid {
        display: grid !important;
        grid-template-columns: repeat(var(--vfav-columns-mobile-landscape), 1fr);
        gap: var(--vfav-row-gap-mobile) var(--vfav-gap-mobile);
    }
    
    .vfav-gallery[data-layout-mobile-landscape="grid"] .vfav-gallery-grid .vfav-gallery-item {
        grid-row-end: auto !important;
    }
    
    /* Mobile Landscape - Masonry: thumbnail auto-height */
    .vfav-gallery[data-layout-mobile-landscape="masonry"] .vfav-gallery-thumbnail {
        padding-top: 0 !important;
        height: auto !important;
        position: relative !important;
    }
    
    .vfav-gallery[data-layout-mobile-landscape="masonry"] .vfav-gallery-thumbnail img {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        aspect-ratio: auto !important;
        display: block !important;
    }
}

/* ==========================================================================
   Mobile Portrait Layout Switching
   ========================================================================== */
@media (max-width: 768px) and (orientation: portrait) {
    .vfav-gallery[data-layout-mobile-portrait="grid"] .vfav-gallery-grid {
        display: grid !important;
        grid-template-columns: repeat(var(--vfav-columns-mobile-portrait), 1fr);
        gap: var(--vfav-row-gap-mobile) var(--vfav-gap-mobile);
    }
    
    .vfav-gallery[data-layout-mobile-portrait="grid"] .vfav-gallery-grid .vfav-gallery-item {
        grid-row-end: auto !important;
    }
    
    /* Mobile Portrait - Masonry: thumbnail auto-height */
    .vfav-gallery[data-layout-mobile-portrait="masonry"] .vfav-gallery-thumbnail {
        padding-top: 0 !important;
        height: auto !important;
        position: relative !important;
    }
    
    .vfav-gallery[data-layout-mobile-portrait="masonry"] .vfav-gallery-thumbnail img {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        aspect-ratio: auto !important;
        display: block !important;
    }
}

/* ==========================================================================
   Gallery Card
   ========================================================================== */
.vfav-gallery-item {
    width: 100%;
}

/* Masonry: hide grid from first paint until JS has set row spans */
.vfav-masonry-pending {
    visibility: hidden;
    position: absolute;
    width: 100%;
}

/* Masonry loading overlay — visible from server render, removed by JS */
.vfav-masonry-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    width: 100%;
}

.vfav-masonry-loader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    letter-spacing: 0.5px;
}

.vfav-masonry-loader .vfav-spinner {
    width: 36px;
    height: 36px;
}

/* Masonry layout: hide grid while JS measures and sets row spans */
.vfav-masonry-laying-out {
    visibility: hidden;
}

.vfav-masonry-laid-out {
    visibility: visible;
}

.vfav-gallery-card {
    background: var(--vfav-card-bg);
    border: var(--vfav-card-border-width) solid var(--vfav-card-border-color);
    border-radius: var(--vfav-card-border-radius);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Hover Effects */
.vfav-hover-lift .vfav-gallery-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.vfav-hover-glow .vfav-gallery-card:hover {
    box-shadow: 0 0 20px var(--vfav-card-hover-color);
}

.vfav-hover-border .vfav-gallery-card:hover {
    border-color: var(--vfav-card-hover-color);
}

.vfav-hover-none .vfav-gallery-card:hover {
    /* No hover effect */
}

/* ==========================================================================
   Gallery Thumbnail
   ========================================================================== */
.vfav-gallery-thumbnail {
    position: var(--vfav-thumbnail-position, relative);
    width: 100%;
    padding-top: var(--vfav-thumbnail-padding);
    height: var(--vfav-thumbnail-height);
    overflow: hidden;
    cursor: pointer;
    background: #1a1a1a;
    border-radius: var(--vfav-thumbnail-radius);
}

/* Skeleton loading animation */
.vfav-gallery-thumbnail.vfav-loading {
    background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: vfav-skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes vfav-skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.vfav-gallery-thumbnail img {
    position: var(--vfav-thumbnail-img-position, absolute);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--vfav-thumbnail-fit);
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}

/* Hide image while loading */
.vfav-gallery-thumbnail.vfav-loading img {
    opacity: 0;
}

/* Fix for auto aspect ratio */
.vfav-gallery-thumbnail img[style*="position: static"],
.vfav-gallery[style*="--vfav-thumbnail-padding: 0"] .vfav-gallery-thumbnail img {
    position: static;
    height: auto;
}

.vfav-gallery-card:hover .vfav-gallery-thumbnail img {
    transform: scale(1.05);
}

/* Overlay on hover */
.vfav-gallery-thumbnail::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    pointer-events: none;
}

.vfav-gallery-card:hover .vfav-gallery-thumbnail::after {
    background: var(--vfav-thumbnail-overlay);
}

/* Eye icon overlay (changed from play icon) */
.vfav-gallery-thumbnail::before {
    content: '';
    display: var(--vfav-play-icon-display);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 2;
    /* Eye icon SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px;
    pointer-events: none;
}

.vfav-gallery-card:hover .vfav-gallery-thumbnail::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ==========================================================================
   Gallery Card Content
   ========================================================================== */
.vfav-gallery-card-content {
    padding: var(--vfav-card-padding);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.vfav-gallery-title {
    font-size: var(--vfav-title-size-desktop) !important;
    font-weight: var(--vfav-title-weight) !important;
    font-family: var(--vfav-title-font-family, inherit) !important;
    font-style: var(--vfav-title-font-style, normal) !important;
    color: var(--vfav-title-color) !important;
    text-align: var(--vfav-title-align);
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    line-height: var(--vfav-title-line-height-desktop, 1.2) !important;
    cursor: pointer;
    transition: color 0.2s ease;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.vfav-gallery-title:hover {
    color: var(--vfav-title-hover-color) !important;
}

.vfav-gallery-excerpt {
    font-size: var(--vfav-excerpt-size-desktop) !important;
    font-family: var(--vfav-excerpt-font-family, inherit) !important;
    font-weight: var(--vfav-excerpt-font-weight, 400) !important;
    color: var(--vfav-excerpt-color) !important;
    text-align: var(--vfav-excerpt-align) !important;
    line-height: var(--vfav-excerpt-line-height-desktop, 1.4) !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    flex: 1;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* Reset paragraph styles inside excerpt (from WYSIWYG) */
.vfav-gallery-excerpt p {
    margin: 0 0 0.5em 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
}

.vfav-gallery-excerpt p:last-child {
    margin-bottom: 0 !important;
}

/* Tablet Landscape title size */
@media (max-width: 1366px) and (min-width: 769px) and (orientation: landscape) {
    .vfav-gallery-title {
        font-size: var(--vfav-title-size-tablet-landscape) !important;
        line-height: var(--vfav-title-line-height-tablet) !important;
    }
    .vfav-gallery-excerpt {
        font-size: var(--vfav-excerpt-size-tablet-landscape) !important;
        line-height: var(--vfav-excerpt-line-height-tablet) !important;
    }
}

/* Tablet Portrait title size */
@media (max-width: 1366px) and (min-width: 769px) and (orientation: portrait) {
    .vfav-gallery-title {
        font-size: var(--vfav-title-size-tablet-portrait) !important;
        line-height: var(--vfav-title-line-height-tablet) !important;
    }
    .vfav-gallery-excerpt {
        font-size: var(--vfav-excerpt-size-tablet-portrait) !important;
        line-height: var(--vfav-excerpt-line-height-tablet) !important;
    }
}

/* Mobile Landscape title size */
@media (max-width: 768px) and (orientation: landscape) {
    .vfav-gallery-title {
        font-size: var(--vfav-title-size-mobile-landscape) !important;
        line-height: var(--vfav-title-line-height-mobile) !important;
    }
    .vfav-gallery-excerpt {
        font-size: var(--vfav-excerpt-size-mobile-landscape) !important;
        line-height: var(--vfav-excerpt-line-height-mobile) !important;
    }
}

/* Mobile Portrait title size */
@media (max-width: 768px) and (orientation: portrait) {
    .vfav-gallery-title {
        font-size: var(--vfav-title-size-mobile-portrait) !important;
        line-height: var(--vfav-title-line-height-mobile) !important;
    }
    .vfav-gallery-excerpt {
        font-size: var(--vfav-excerpt-size-mobile-portrait) !important;
        line-height: var(--vfav-excerpt-line-height-mobile) !important;
    }
}

/* ==========================================================================
   Gallery Button
   ========================================================================== */
.vfav-gallery-btn {
    display: inline-block;
    padding: var(--vfav-button-padding-v, 10px) var(--vfav-button-padding-h, 20px);
    background: var(--vfav-button-bg);
    color: var(--vfav-button-text);
    border: var(--vfav-button-border-width, 0px) solid var(--vfav-button-border-color, transparent);
    border-radius: var(--vfav-button-border-radius, 6px);
    font-size: var(--vfav-button-font-size, 14px);
    font-weight: var(--vfav-button-font-weight, 500);
    font-family: var(--vfav-button-font-family, inherit);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    width: var(--vfav-button-width, 100%);
    height: var(--vfav-button-height, auto);
    box-sizing: border-box;
    text-decoration: none;
}

/* Link mode - ensure <a> elements match button styling */
a.vfav-gallery-btn {
    text-decoration: none !important;
}

a.vfav-gallery-thumbnail {
    display: block;
    text-decoration: none;
}

/* Title link styling */
.vfav-gallery-title a {
    color: inherit;
    text-decoration: none;
}

.vfav-gallery-title a:hover {
    text-decoration: none;
    opacity: 0.8;
}

/* Button alignment wrapper */
.vfav-gallery-card-content {
    display: flex;
    flex-direction: column;
}

.vfav-gallery-btn-wrapper {
    display: flex;
    justify-content: var(--vfav-button-align, center);
    width: 100%;
}

.vfav-gallery-btn:hover {
    background: var(--vfav-button-hover-bg);
    color: var(--vfav-button-hover-text);
    border-color: var(--vfav-button-hover-border, var(--vfav-button-border-color));
    transform: translateY(-1px);
}

.vfav-gallery-btn:active {
    transform: translateY(0);
}

/* ==========================================================================
   Empty State
   ========================================================================== */
.vfav-gallery-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #666;
    font-size: 16px;
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.vfav-gallery-pagination {
    margin-top: 40px;
    text-align: center;
}

/* Load More Button */
.vfav-load-more-btn {
    display: inline-block;
    padding: var(--vfav-load-more-padding-v, 14px) var(--vfav-load-more-padding-h, 40px);
    background: var(--vfav-load-more-bg, #0a84ff);
    color: var(--vfav-load-more-text, #ffffff);
    border: var(--vfav-load-more-border-width, 0px) solid var(--vfav-load-more-border-color, #333);
    border-radius: var(--vfav-load-more-border-radius, 8px);
    font-size: var(--vfav-load-more-font-size, 15px);
    font-weight: var(--vfav-load-more-font-weight, 500);
    cursor: pointer;
    transition: all 0.2s ease;
}

.vfav-load-more-btn:hover {
    background: var(--vfav-load-more-hover-bg, #0070e0);
    color: var(--vfav-load-more-hover-text, #ffffff);
    transform: translateY(-2px);
}

.vfav-load-more-btn:active {
    transform: translateY(0);
}

.vfav-load-more-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Page Numbers */
.vfav-pagination-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vfav-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: var(--vfav-pagination-bg, #1a1a1a);
    color: var(--vfav-pagination-text, #ffffff);
    border: none;
    border-radius: var(--vfav-pagination-border-radius, 6px);
    font-size: var(--vfav-pagination-font-size, 14px);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vfav-page-btn:hover {
    background: var(--vfav-pagination-hover-bg, #333333);
}

.vfav-page-btn.active {
    background: var(--vfav-pagination-active-bg, #0a84ff);
    color: var(--vfav-pagination-active-text, #ffffff);
}

.vfav-page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.vfav-page-prev,
.vfav-page-next {
    padding: 0 16px;
}

.vfav-load-more-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Standard Pagination */
.vfav-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vfav-pagination ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px;
}

.vfav-pagination li {
    margin: 0;
}

.vfav-pagination a,
.vfav-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: #1a1a1a;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
}

.vfav-pagination a:hover {
    background: #333;
}

.vfav-pagination .current {
    background: #0a84ff;
}

/* ==========================================================================
   Filter Bar
   ========================================================================== */
.vfav-filter-bar {
    margin-bottom: 24px !important;
    padding: var(--vfav-filter-bar-padding, 16px) !important;
    background: var(--vfav-filter-bar-bg, #1a1a1a) !important;
    border-radius: var(--vfav-filter-bar-border-radius, 8px) !important;
    border: var(--vfav-filter-bar-border-width, 0px) solid var(--vfav-filter-bar-border-color, #333333) !important;
}

/* No background variant */
.vfav-filter-bar.vfav-filter-bar-no-bg {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

/* Main filter row - everything inline */
.vfav-filter-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Search Wrapper - uses CSS variable for width */
.vfav-search-wrapper {
    position: relative !important;
    width: var(--vfav-search-width-desktop, 250px) !important;
    flex-shrink: 0 !important;
}

.vfav-search-input {
    width: 100% !important;
    height: 40px !important;
    padding: 10px 14px 10px 38px !important;
    margin: 0 !important;
    background: var(--vfav-filter-select-bg, #111) !important;
    color: var(--vfav-filter-select-color, #fff) !important;
    border: var(--vfav-filter-select-border-width, 1px) solid var(--vfav-filter-select-border-color, #333) !important;
    border-radius: var(--vfav-filter-select-border-radius, 6px) !important;
    font-size: var(--vfav-filter-select-font-size, 14px) !important;
    transition: border-color 0.2s ease !important;
    box-sizing: border-box !important;
}

.vfav-search-input:focus {
    outline: none !important;
    border-color: #0a84ff !important;
}

.vfav-search-input::placeholder {
    color: #666 !important;
}

.vfav-search-icon {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #666 !important;
    pointer-events: none !important;
}

/* Filter Toggle Button */
.vfav-filter-toggle {
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 10px 14px !important;
    height: 40px !important;
    box-sizing: border-box !important;
    background: var(--vfav-filter-select-bg, #111) !important;
    color: var(--vfav-filter-select-color, #fff) !important;
    border: var(--vfav-filter-select-border-width, 1px) solid var(--vfav-filter-select-border-color, #333) !important;
    border-radius: var(--vfav-filter-select-border-radius, 6px) !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
    flex-shrink: 0 !important;
}

.vfav-filter-toggle:hover {
    border-color: #555 !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.vfav-filter-toggle[aria-expanded="true"] {
    border-color: #0a84ff !important;
    background: rgba(10, 132, 255, 0.1) !important;
}

.vfav-filter-icon {
    flex-shrink: 0 !important;
}

/* Filter count - simple number beside icon */
.vfav-filter-count {
    font-size: 13px !important;
    color: inherit !important;
    font-weight: normal !important;
}

/* Filter Options Container - inline by default */
.vfav-filter-options {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Collapsible filter options - hidden by default */
.vfav-filter-options-collapsible {
    display: none !important;
}

/* When filters are expanded */
.vfav-filter-options-collapsible.vfav-expanded {
    display: flex !important;
}

.vfav-filter-group {
    flex: 0 1 auto !important;
    min-width: 130px !important;
    max-width: 200px !important;
}

.vfav-filter-select,
.vfav-filter-bar select,
.vfav-filter-bar .vfav-filter-select {
    width: 100% !important;
    height: 40px !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    background: var(--vfav-filter-select-bg, #111) !important;
    color: var(--vfav-filter-select-color, #fff) !important;
    border: var(--vfav-filter-select-border-width, 1px) solid var(--vfav-filter-select-border-color, #333) !important;
    border-radius: var(--vfav-filter-select-border-radius, 6px) !important;
    font-size: var(--vfav-filter-select-font-size, 14px) !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 20px !important;
    padding-right: 36px !important;
}

.vfav-filter-select:hover,
.vfav-filter-bar select:hover {
    border-color: #555 !important;
}

.vfav-filter-select:focus,
.vfav-filter-bar select:focus {
    outline: none !important;
    border-color: #0a84ff !important;
}

.vfav-filter-select option,
.vfav-filter-bar select option {
    background: var(--vfav-filter-select-bg, #111) !important;
    color: var(--vfav-filter-select-color, #fff) !important;
}

/* Collapsible behavior - Desktop */
.vfav-filter-bar.vfav-collapsible-desktop .vfav-filter-toggle {
    display: flex !important;
}

/* Collapsible behavior - Tablet */
@media (max-width: 1024px) {
    .vfav-filter-bar.vfav-collapsible-tablet .vfav-filter-toggle {
        display: flex !important;
    }
    
    /* Tablet search width */
    .vfav-search-wrapper {
        width: var(--vfav-search-width-tablet, 200px) !important;
    }
    
    /* Keep filters on one row - shrink to fit */
    .vfav-filter-row {
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }
    
    .vfav-filter-options,
    .vfav-filter-options-collapsible.vfav-expanded {
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }
    
    .vfav-filter-group {
        min-width: 0 !important;
        max-width: none !important;
        flex: 1 1 0 !important;
    }
    
    .vfav-filter-select,
    .vfav-filter-bar select,
    .vfav-filter-bar .vfav-filter-select {
        font-size: 12px !important;
        padding: 8px 28px 8px 10px !important;
        height: 36px !important;
    }
    
    .vfav-search-input {
        font-size: 12px !important;
        height: 36px !important;
    }
}

/* Collapsible behavior - Mobile */
@media (max-width: 768px) {
    .vfav-filter-bar.vfav-collapsible-mobile .vfav-filter-toggle {
        display: flex !important;
    }
    
    .vfav-filter-row {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    /* Mobile: search takes remaining space, toggle stays compact */
    .vfav-search-wrapper {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
    }
    
    .vfav-filter-toggle {
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 10px 12px !important;
    }
    
    /* Filter options appear below on their own row */
    .vfav-filter-options,
    .vfav-filter-options-collapsible.vfav-expanded {
        flex-basis: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }
    
    .vfav-filter-group {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
}

/* ==========================================================================
   Loading Spinner
   ========================================================================== */
.vfav-loading-spinner {
    display: flex;
    justify-content: center;
    padding: 20px;
}

.vfav-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #0a84ff;
    border-radius: 50%;
    animation: vfav-spin 0.8s linear infinite;
}

@keyframes vfav-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   Modal
   ========================================================================== */
.vfav-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vfav-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    cursor: pointer;
}

.vfav-modal-container {
    position: relative;
    width: 95vw;
    height: 95vh;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.vfav-modal-close {
    position: absolute;
    top: 2%;
    left: 2%;
    width: 24px;
    height: 24px;
    padding: 0;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.vfav-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.vfav-modal-close svg {
    width: 60%;
    height: 60%;
    pointer-events: none;
}

.vfav-modal-content {
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* Modal Loading State */
.vfav-modal-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #888;
}

.vfav-modal-loading .vfav-spinner {
    margin: 0 auto 15px;
}

.vfav-modal-loading span {
    font-size: 14px;
}

/* ==========================================================================
   Modal Viewer Content Adjustments
   ========================================================================== */
.vfav-modal-content .vfav-shortcode-wrapper {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

.vfav-modal-content #viewer-container,
.vfav-modal-content #vfav-app {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
}

/* Ensure modal close button stays above viewer content */
.vfav-modal-container {
    position: relative;
}

.vfav-modal-content {
    position: relative;
    z-index: 1;
}

/* Adjust controls position in modal */
.vfav-modal-content #controls {
    bottom: 0 !important;
    border-radius: 10px !important;
    z-index: 50 !important;
}

/* Ensure crop overlay in modal doesn't cover close button */
.vfav-modal-content #crop-overlay {
    z-index: 100 !important;
}

/* Loading overlay in viewer shouldn't block close */
.vfav-modal-content #loading-overlay {
    z-index: 90 !important;
}

/* ==========================================================================
   Animation Classes
   ========================================================================== */
.vfav-modal.vfav-modal-opening {
    animation: vfav-fade-in 0.3s ease forwards;
}

.vfav-modal.vfav-modal-opening .vfav-modal-container {
    animation: vfav-scale-in 0.3s ease forwards;
}

.vfav-modal.vfav-modal-closing {
    animation: vfav-fade-out 0.2s ease forwards;
}

.vfav-modal.vfav-modal-closing .vfav-modal-container {
    animation: vfav-scale-out 0.2s ease forwards;
}

@keyframes vfav-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes vfav-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes vfav-scale-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes vfav-scale-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* ==========================================================================
   Gallery Item Animation (on load)
   ========================================================================== */
.vfav-gallery-item {
    opacity: 0;
    animation: vfav-item-fade-in 0.4s ease forwards;
}

.vfav-gallery-item:nth-child(1) { animation-delay: 0.05s; }
.vfav-gallery-item:nth-child(2) { animation-delay: 0.1s; }
.vfav-gallery-item:nth-child(3) { animation-delay: 0.15s; }
.vfav-gallery-item:nth-child(4) { animation-delay: 0.2s; }
.vfav-gallery-item:nth-child(5) { animation-delay: 0.25s; }
.vfav-gallery-item:nth-child(6) { animation-delay: 0.3s; }
.vfav-gallery-item:nth-child(7) { animation-delay: 0.35s; }
.vfav-gallery-item:nth-child(8) { animation-delay: 0.4s; }
.vfav-gallery-item:nth-child(9) { animation-delay: 0.45s; }
.vfav-gallery-item:nth-child(10) { animation-delay: 0.5s; }
.vfav-gallery-item:nth-child(11) { animation-delay: 0.55s; }
.vfav-gallery-item:nth-child(12) { animation-delay: 0.6s; }

@keyframes vfav-item-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Items loaded via AJAX don't need staggered animation */
.vfav-gallery-item.vfav-loaded {
    animation: vfav-item-fade-in 0.3s ease forwards;
    animation-delay: 0s;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media (max-width: 768px) {
    .vfav-gallery {
        padding: 15px 0;
    }
    
    .vfav-gallery-card-content {
        padding: 12px;
    }
    
    .vfav-gallery-title {
        font-size: 14px;
    }
    
    .vfav-gallery-excerpt {
        font-size: 13px;
        margin-bottom: 12px;
    }
    
    .vfav-gallery-btn {
        padding: 8px 16px;
        font-size: 13px;
    }
    
    .vfav-modal-container {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
    
    .vfav-modal-close {
        top: 10px;
        left: 10px;
    }
}

@media (max-width: 480px) {
    .vfav-gallery-card-content {
        padding: 10px;
    }
    
    .vfav-gallery-title {
        font-size: 13px;
    }
    
    .vfav-gallery-excerpt {
        font-size: 12px;
    }
    
    .vfav-load-more-btn {
        padding: 12px 30px;
        font-size: 14px;
        width: 100%;
    }
}

/* ==========================================================================
   Body scroll lock when modal open
   ========================================================================== */
body.vfav-modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}