/* Artwork Display Styles */
.artwork-display-container {
    max-width: 100vw;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Main Layout: Sidebar + Content */
.artwork-main-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
}

/* Left Sidebar - Filters */
.artwork-filters-sidebar {
    flex: 0 0 300px;
    max-width: 300px;
    width: 300px;
    background: #f8f9fa;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.artwork-filters-sidebar h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

/* Right Content Area */
.artwork-content-area {
    flex: 1;
    min-width: 0;
    max-width: calc(100% - 330px); /* Account for sidebar width + gap */
}

/* View Toggle */
.artwork-view-toggle {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 30px;
    gap: 10px;
}

.view-toggle-btn {
    padding: 10px 15px;
    border: 2px solid #ddd;
    background: white;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.view-toggle-btn.active,
.view-toggle-btn:hover {
    background: #65246D;
    color: white;
    border-color: #65246D;
}

/* Artwork Cards - Override Divi styles */
.artworks-grid .artwork-card,
#artworks-container .artwork-card {
    background: white !important;
    border-radius: 0 !important;
    border: none !important;
    overflow: hidden !important;
    box-shadow: none !important;
    transition: transform 0.3s !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    position: relative !important;
}

.artwork-card:hover {
    transform: translateY(-5px);
    box-shadow: none !important;
}

/* Artwork Image */
.artwork-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.artwork-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.artwork-card:hover .artwork-image img {
    transform: scale(1.05);
}

.artwork-placeholder {
    width: 100%;
    height: 100%;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
}

.artwork-placeholder .dashicons {
    font-size: 48px;
}

/* Artwork Info */
.artwork-info {
    padding: 20px;
}

.artwork-title {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
}

.artwork-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.artwork-title a:hover {
    color: #65256d;
}

.artwork-artist {
    margin: 0 0 8px 0;
    color: #666;
    font-style: italic;
}

.artwork-medium,
.artwork-dimensions {
    margin: 0 0 5px 0;
    color: #777;
    font-size: 14px;
}

.artwork-price {
    margin: 10px 0 0 0;
    font-size: 18px;
    font-weight: 600;
    color: #65256d;
}

/* Filter Styles */
.filter-group {
    margin-bottom: 25px;
}

.filter-group h4 {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

/* Filter Inputs and Dropdowns */
.artwork-filters-sidebar select,
.artwork-filters-sidebar input[type="text"],
#medium-filter,
#style-filter,
#artwork-search,
.artwork-filter-select,
.artwork-search-input {
    width: 100% !important;
    height: 44px !important;
    padding: 0 15px !important;
    border: 2px solid #e9ecef !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    background: white !important;
    box-sizing: border-box !important;
    transition: border-color 0.3s, box-shadow 0.3s !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    line-height: 40px !important;
}

/* Custom dropdown arrow */
.artwork-filters-sidebar select,
#medium-filter,
#style-filter,
.artwork-filter-select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    padding-right: 40px !important;
}

/* Focus states */
.artwork-filters-sidebar select:focus,
.artwork-filters-sidebar input[type="text"]:focus,
#medium-filter:focus,
#style-filter:focus,
#artwork-search:focus,
.artwork-filter-select:focus,
.artwork-search-input:focus {
    outline: none !important;
    border-color: #65256d !important;
    box-shadow: 0 0 0 3px rgba(101, 37, 109, 0.1) !important;
}

/* Placeholder styling */
.artwork-filters-sidebar input[type="text"]::placeholder,
#artwork-search::placeholder,
.artwork-search-input::placeholder {
    color: #999 !important;
    font-style: italic !important;
}

/* Removed - using updated styles above */

.price-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.price-filter-btn {
    padding: 8px 12px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    border-radius: 4px;
    font-size: 12px;
    transition: all 0.3s ease;
}

.price-filter-btn.active,
.price-filter-btn:hover {
    background: #65246D;
    color: white;
    border-color: #65246D;
}

/* Removed - using updated styles above */

.reset-filters-btn {
    width: 100%;
    padding: 12px;
    background: #65246D;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.3s ease;
}

.reset-filters-btn:hover {
    background: #3D1449;
}

/* Loading State */
#artwork-loading {
    text-align: center;
    padding: 40px;
    color: #666;
}

/* Results Count */
.results-count {
    margin-bottom: 20px;
    color: #666;
    font-size: 14px;
}

/* List View Styles */
.artworks-grid.view-list .artwork-card {
    display: flex;
    align-items: center;
    padding: 20px;
}

.artworks-grid.view-list .artwork-image {
    flex: 0 0 150px;
    height: 120px;
    margin-right: 20px;
}

.artworks-grid.view-list .artwork-info {
    flex: 1;
    padding: 0;
}

/* Mobile Filter Toggle Button - Hidden by default */
.mobile-filter-toggle {
    display: none !important;
}

/* Responsive Design */
@media (max-width: 980px) {
    .artwork-main-layout {
        flex-direction: column;
    }

    .artwork-filters-sidebar {
        flex: none;
        margin-bottom: 30px;
    }

    .price-filter-buttons {
        justify-content: center;
    }

    .price-filter-btn {
        flex: 1;
        min-width: 80px;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .artwork-display-container {
        padding: 20px 15px;
    }

    /* Show mobile filter toggle - full width */
    .mobile-filter-toggle {
        display: flex !important;
        position: sticky;
        top: 20px;
        z-index: 1000;
        background: #65246D;
        color: white;
        border: none;
        padding: 0 20px;
        height: 44px;
        border-radius: 8px;
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
        margin-bottom: 20px;
        box-shadow: 0 4px 12px rgba(61, 21, 72, 0.3);
        transition: all 0.3s ease;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .mobile-filter-toggle:hover {
        background: #3D1449;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(61, 21, 72, 0.4);
    }

    .mobile-filter-toggle:active,
    .mobile-filter-toggle:focus,
    .mobile-filter-toggle.active {
        background: #3D1449 !important;
        color: white !important;
    }

    .mobile-filter-toggle .toggle-icon {
        margin-left: 8px;
        transition: transform 0.3s ease;
    }

    .mobile-filter-toggle.active .toggle-icon {
        transform: rotate(180deg);
    }

    /* Mobile filter sidebar - completely hidden when collapsed */
    .artwork-filters-sidebar {
        display: none !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        box-sizing: border-box !important;
        margin-bottom: 0;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .artwork-filters-sidebar.mobile-expanded {
        display: block !important;
        padding: 20px;
        margin-bottom: 30px;
        width: 100% !important;
        max-width: 100% !important;
        background: #f8f9fa;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    /* Ensure filter content is visible when expanded */
    .artwork-filters-sidebar.mobile-expanded .filters-header,
    .artwork-filters-sidebar.mobile-expanded .filter-group,
    .artwork-filters-sidebar.mobile-expanded form {
        opacity: 1;
        transition: opacity 0.3s ease 0.1s;
    }

    .artwork-filters-sidebar:not(.mobile-expanded) .filters-header,
    .artwork-filters-sidebar:not(.mobile-expanded) .filter-group,
    .artwork-filters-sidebar:not(.mobile-expanded) form {
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .artwork-view-toggle {
        justify-content: center;
    }

    .artworks-grid.view-list .artwork-card {
        flex-direction: column;
        text-align: center;
    }

    .artworks-grid.view-list .artwork-image {
        flex: none;
        margin-right: 0;
        margin-bottom: 15px;
    }

    .price-filter-btn {
        width: 100%;
        text-align: center;
    }

    /* Improve mobile filter styling */
    .artwork-filters-sidebar .filter-group {
        margin-bottom: 20px;
    }

    .artwork-filters-sidebar .filter-group label {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .artwork-filters-sidebar select,
    .artwork-filters-sidebar input[type="text"] {
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 12px;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Full width filter form elements */
    .artwork-filters-sidebar .filter-group {
        width: 100% !important;
    }

    .artwork-filters-sidebar form {
        width: 100% !important;
    }

    /* Ensure content area has proper spacing on mobile */
    .artwork-content-area {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 !important;
    }

    /* Full width container on mobile */
    .artwork-main-layout {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Mobile grid improvements - full width cards */
    .artworks-flexbox-grid {
        gap: 20px !important;
        padding: 0 !important;
    }

    /* Full width artwork cards on mobile */
    .artwork-flex-item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .artwork-card {
        margin-bottom: 0;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Ensure artwork card content spans full width */
    .artwork-card-link {
        width: 100% !important;
        display: block !important;
    }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
    .artwork-display-container {
        padding: 15px 10px;
    }

    .mobile-filter-toggle {
        height: 40px;
        padding: 0 16px;
        font-size: 13px;
        top: 15px;
    }

    .artwork-filters-sidebar {
        padding: 15px;
    }

    .artwork-filters-sidebar.mobile-expanded {
        padding: 15px;
    }
}


/* ===== Migrated from inline CSS in artwork-display-shortcode.php ===== */
/* Flexbox Grid Container */
.artworks-flexbox-grid,
#artworks-container.artworks-flexbox-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin-bottom: 40px !important;
    width: 100% !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
}

/* Flexbox Grid Items - Desktop (4 columns) */
.artwork-flex-item {
    flex: 0 0 calc(25% - 15px) !important;
    max-width: calc(25% - 15px) !important;
    box-sizing: border-box !important;
}

/* Clickable artwork card link wrapper */
.artwork-card-link { text-decoration: none; color: inherit; display: block; width: 100%; height: 100%; }
.artwork-card-link:hover { text-decoration: none; color: inherit; }

/* Artwork Cards inside flex items */
.artwork-flex-item .artwork-card { width: 100% !important; height: 100% !important; }

/* Fix dropdown overflow */
.artwork-filters-sidebar select { max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; }

/* Range Slider Styles */
.dimension-slider-group { margin-bottom: 12px; }
.slider-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.slider-label { font-weight: 500; color: #333; font-size: 14px; margin: 0; }
.range-slider-container { position: relative; padding: 8px 0; }
.range-slider { position: relative; height: 6px; background: #e9ecef; border-radius: 3px; cursor: pointer; }
.range-track { position: absolute; width: 100%; height: 100%; background: #e9ecef; border-radius: 3px; }
.range-fill { position: absolute; height: 100%; background: #65256d; border-radius: 3px; pointer-events: none; }
.range-thumb { position: absolute; width: 18px; height: 18px; background: #65256d; border: 2px solid white; border-radius: 50%; cursor: grab; top: 50%; transform: translate(-50%, -50%); box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 2; transition: box-shadow 0.2s ease; }
.range-thumb:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
.range-thumb:active { cursor: grabbing; box-shadow: 0 6px 12px rgba(0,0,0,0.4); }
.slider-values { font-size: 13px; color: #666; font-weight: 500; }
.reset-dimensions-btn { background: #f8f9fa; border: 1px solid #dee2e6; color: #6c757d; padding: 8px 16px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: all 0.3s ease; width: 100%; margin-top: 10px; }
.reset-dimensions-btn:hover { background: #65256d; color: white; border-color: #65256d; }

/* Responsive Breakpoints */
@media (max-width: 980px) {
    .artwork-flex-item { flex: 0 0 calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; }
}
@media (max-width: 767px) {
    .artwork-flex-item { flex: 0 0 100% !important; max-width: 100% !important; }
    .artworks-flexbox-grid { gap: 15px !important; }
}

/* Results Header */
.artwork-results-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 1px solid #e9ecef;
}
.artwork-results-header .results-count { font-size: 16px; color: #666; font-weight: 500; }
.sort-options { display: flex; align-items: center; gap: 10px; }
.sort-options label { font-size: 14px; color: #666; font-weight: 500; margin: 0; }
.sort-options select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; background: white; cursor: pointer; transition: border-color 0.3s; }
.sort-options select:hover,
.sort-options select:focus { border-color: #3D1548; outline: none; }

/* Pagination - Artist Style (reused) */
.artist-pagination { margin-top: 40px; text-align: center; }
.artist-pagination .page-numbers { display: inline-block; padding: 8px 12px; margin: 0 2px; border: 1px solid #ddd; color: #666; text-decoration: none; border-radius: 4px; transition: all 0.3s; }
.artist-pagination .page-numbers:hover,
.artist-pagination .page-numbers.current { background: #5E0430; color: white; border-color: #5E0430; }

/* Artwork Card Improvements */
.artwork-card { display: flex; flex-direction: column; height: 100%; }
.artwork-image { position: relative; flex-shrink: 0; }
.artwork-info { display: flex; flex-direction: column; flex-grow: 1; padding: 15px; }

/* Featured Item Styling - Purple Border with Glow */
.artwork-image.featured-item { border: 3px solid #65256D; box-shadow: 0 0 20px rgba(101, 37, 109, 0.7); border-radius: 4px; position: relative; }
.artwork-image.featured-item::after { content: "\2605"; position: absolute; top: 8px; right: 8px; background: #65256D; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; z-index: 10; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }

/* Minor text spacing tweaks */
.artwork-title { margin-bottom: 2px !important; }
.artwork-artist { margin-top: 2px !important; margin-bottom: 8px !important; }
.artwork-artist a { color: #5E0430; text-decoration: none; font-weight: 500; }
.artwork-artist a:hover { text-decoration: underline; }
.artwork-actions { margin-top: auto; padding-top: 15px; }