body{margin:0;font-family: Montserrat;}
.main-layout { text-align: center;  }
title {margin-top:0px;font-size: 24px !important ;margin-bottom: 24px;color: #000;font-weight: 700;}

.search-bar-museum {display: flex;align-items: center;background: #fff;border-radius: 24px;padding: 4px 16px;box-shadow: 0 2px 8px #0001;height:50px;margin:auto;}
.search-section{text-align: center;margin-top:50px;}
.search-criteria{display:block;justify-items: center;}

.input-block { position: relative; }

.suggestions {background: #fff;border: 1.5px solid #c3c3c3;border-top: none;border-radius: 0 0 10px 10px;box-shadow: 0 4px 16px rgba(0,0,0,0.12);position: absolute; width: 100%;z-index: 1100;max-height: 180px;overflow-y: auto;display: none;}
    .suggestion {padding: 10px 20px;cursor: pointer;transition: background 0.2s;}
    .suggestion:hover, .suggestion.active {background: #f0f8ff;}
    .suggestion-link { cursor:pointer; padding: 0.4rem 0.8rem; border-radius: 6px; color: #222; text-decoration: none; font-weight: 500; opacity: 0.8; transition: background 0.2s, opacity 0.2s; display: block;text-align:left; }

.artist-input {width: 100%;font-size: 1.1em;padding: 12px 14px;border: 1.5px solid #c3c3c3;border-radius: 10px;outline: none;box-shadow: 0 2px 8px rgba(0,0,0,0.06);transition: border-color 0.2s;background: #fff;}

    .selected-artists {display: none;flex-wrap: wrap;gap: 8px;margin: 8px 0 0 0;}
    .artist-tag {background: #919191;color: #fff;border-radius: 20px;padding: 0px 0px 0px 10px;display: flex;align-items: center;font-size: 12px;margin-bottom: 5px;width: fit-content;}
    .artist-tag button {background: none;border: none;color: #fff;margin-left: 8px;cursor: pointer;font-size: 1.1em;border-radius: 50%;width: 22px;height: 22px;display: flex;align-items: center;justify-content: center;transition: background 0.15s;}
    .artist-tag button:hover { background: #005fa3; }

.search-button-container {margin-bottom:0px;margin-top: 10px;}
    .search-button {width:25%;text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 10px;border-radius: 6px;background-color: #000;border: none;color: #fff;cursor: pointer;transition: background 0.2s;height: 40px;min-width: 100px;}
    .search-button:disabled {text-align: center;text-decoration: none; display: inline-flex; align-items: center; justify-content: center;cursor: pointer;padding: 10px;border-radius: 6px;background-color: #cecece !important;border: none;color: #fff;cursor: pointer;transition: background 0.2s;height: 40px;min-width: 100px;}
    .search-button i {margin-right: 8px;}

.artwork-carousel {width: 630px;margin-top: 10px;position: relative;justify-self: center;}
    .artwork-carousel-inner {display: flex;overflow-x: auto;scroll-behavior: smooth;scroll-snap-type: x mandatory;-webkit-overflow-scrolling: touch;}
    .artwork-carousel-item {scroll-snap-align: start;flex-shrink: 0;width: calc(800px / 3);padding: 10px;box-sizing: border-box;}
    .artwork-carousel-item img {width: 100%;display: block;}
    .artwork-carousel-control {position: absolute;top: 50%;transform: translateY(-50%);background-color: rgba(0, 0, 0, 0.5);color: white;border: none;padding: 10px;cursor: pointer; z-index: 10;}
    .artwork-carousel-control.prev {left: 10px;}
    .artwork-carousel-control.next {right: 10px;}
    .artwork-carousel-artworks {display: flex;overflow-x: auto;width: 100%;justify-content: center;  
 

@media (max-width: 500px) {
    .artwork-carousel {display: flex;justify-content: center;align-items: center;width: 300px;margin: 0 auto;
}
       
}


}
.artist-nav{justify-content:center !important;}
.pagination {display: flex;justify-content: center; align-items: center; gap: 4px; font-size: 1.1em; margin: 15px; }
    .pagination .page, .pagination .next, .pagination .prev {min-width: 36px;height: 36px;display: flex;justify-content: center;align-items: center;border: none;background: none;color: #222;border-radius: 6px;text-decoration: none;font-weight: 500;transition: background 0.15s, color 0.15s;cursor: pointer;outline: none;}
    .pagination .page.active, .pagination a[aria-current="page"] {background: #222;color: #fff;font-weight: 600;pointer-events: none;}
    .pagination a:hover, .pagination .next:hover, .pagination .prev:hover {background: #f0f0f0;color: #222;}
    .pagination .dots {color: #bbb;padding: 0 6px;user-select: none;pointer-events: none;font-size: 1.2em;}


.artwork-random-card {font-size:12px;border-radius: 4px;flex-direction: column;transition: box-shadow 0.2s, border-color 0.2s;max-height: 272px;overflow: hidden;margin: 5px;position: relative;height: 125px;width: 125px;min-width: 125px;}
.artwork-random-card img{height:125px;width:125px}
.artworks-random-bloc {width:100%;display:flex;overflow-y: auto;}
.container-random-artworks{margin-top:20px;display:flex}
.artwork-random-card-name{font-weight:700}
.artwork-random-card-overlay{ height:100%; padding-bottom: 30px;position: absolute;top: 0;left: 0;right: 0;background: rgba(0, 0, 0, 0.6);color: white;padding: 10px;opacity: 0;transition: opacity 0.3s ease;border-radius: 0 0 8px 8px;}
.artwork-random-card:hover .artwork-random-card-overlay {opacity: 1;}


.loader {border: 4px solid rgba(0, 0, 0, 0.1);border-radius: 50%;border-top: 4px solid #242424;width: 10px;height: 10px;animation: spin 2s linear infinite;margin: 5px auto;}

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

.search-bar {display: flex;align-items: center;background: #fff;height: 40px;border-bottom: #BCC1CAFF solid 1px;}
.search-section{width: 90%;justify-self: center;border-radius: 6px;padding: 15px;display: block;margin: auto;}

    .search-name{width:100%;margin:10px;display: block;position: relative;}
    .search-criteria-more{width: 100%;}
    .search-name-advanced{margin-top:15px}
    
.artwork-example-title  {font-weight: normal;font-size: 16px;margin:0;margin-bottom: 15px;margin-top:40px;justify-self: center;}

.artwork-example-container{display:flex;margin: auto;width: fit-content;}
.search-result-count{margin-bottom:20px}

.result-section{margin-top:25px}
.loader-artwork{height:auto;width:200px;margin:auto}

@media (max-width: 900px) 
{
    .search-second-line {display:block; }
    .search-section{border-radius: 6px;padding: 15px;display: block;margin: auto;justify-items: center;}
    .search-criteria {display: block;align-items: center;width: 100%;}
.artwork-example-container{display:flex;    margin: auto;width:auto;overflow-x:auto}
}