.modal-container {
    background-color: rgba(0, 0, 0, 0.8);
    bottom: 0;
    left: 0;
    display: none;
    padding: 0px;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 0.2s;
    overflow: scroll;
    z-index: 9999;
}

.modal-search a {
    text-decoration: none;
    color: black;
}

.modal-container:target {
    display: block;
    pointer-events: auto;
}

.modal-container .modal-inner {
    background: white;
    left: 50%;
    max-width: 800px;
    position: relative;
    top: 0;
    transform: translate(-50%, 0);
    width: 100%;
    border-radius: 15px;
    margin: 20px 0;
}

.modal-container .modal-small {
    max-width: 400px;
}

.modal-container .modal-header,
.modal-container .modal-body {
    padding: 20px 30px;
}

.modal-close {
    color: black;
    display: flex;
    font-family: Arial;
    font-size: 16px;
    justify-content: flex-end;
    text-decoration: none;
    position: absolute;
    top: 25px;
    right: 25px;
}

.modal-body h2.modal-heading {
    font-size: 26px;
    margin: 0 0 30px 0;
}

.modal-body .modal-latest {
    text-align: center;
}

/* .modal-body .modal-latest img {
    max-width: 100%;
    border-radius: 100%;
    margin-bottom: 10px;
} */

.popular-on-cos-container .data img {
    object-fit: cover;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 10px;
}

.popular-on-cos-container .data .artist img {
    border-radius: 100%;
}

.popular-on-cos-container .event {
    text-align: left;
}

.artists-on-cos-container .data img {
    object-fit: cover;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 15px;
}

.events-in-cos-container .data img {
    object-fit: cover;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 15px;
}

.venues-in-cos-container .data img {
    object-fit: cover;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 15px;
}

.events-near-me-container .data img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
}

.modal-body .modal-latest h2 {
    font-size: 18px;
    text-transform: capitalize;
    margin: 0 0 5px 0;
}

.modal-body .modal-latest h3 {
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

.modal-body .modal-latest h4 {
    font-size: 14px;
    text-transform: capitalize;
    margin: 0;
}

.modal-body .modal-latest p {
    margin: 0;
}

.modal-body form {
    margin: 0 0 20px 0;
}

.modal-body .modal-search {
    padding: 0px;
    border: 1px solid #ccc;
    width: 90%;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #ccc;
    margin: 0 0 30px 0;
    overflow: hidden;
}

.modal-body .modal-search .search-box {
    float: left;
    border: none;
    width: 90%;
    margin: 0;
    padding: 15px;
}

.modal-body .modal-search .search-box:focus {
    outline: none;
    /* Remove the default outline */
    border: none;
}

.modal-body .modal-search input[type=submit] {
    float: left;
    background-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: 30%;
    width: 10%;
    padding: 15px;
    display: inline-block;
    border: 1px solid transparent;
    display: inline-block;
    margin: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

@media screen and (max-width: 900px) {
    .modal-container .modal-inner {
        max-width: 350px;
        border-radius: 5px;
    }

    .modal-container .modal-header,
    .modal-container .modal-body {
        padding: 20px;
    }

    .modal-body h2.modal-heading {
        font-size: 20px;
        margin: 0 0 20px 0;
    }

    .modal-close {
        top: 15px;
        right: 15px;
    }

    .modal-close svg {
        width: 20px;
        height: 20px;
    }

    .modal-body .modal-latest {
        margin-bottom: 25px;
    }

    .modal-body .owl-dots {
        display: none;
    }

    .modal-body .modal-search input[type=text] {
        width: 75%;
    }

    .modal-body .modal-search input[type=submit] {
        width: 25%;
    }
}

.no-results-box {
    width: 100%;
    max-width: 600px;
    /* Optional: Set a max width for larger screens */
    margin: 20px auto;
    /* Center the box horizontally */
    padding: 100px;
    text-align: center;
    /* Center text */
    font-family: Arial, sans-serif;
    /* Optional: Change font */
}

.popular-on-cos-container .loading div div div div,
.artists-on-cos-container .loading div div div div,
.events-in-cos-container .loading div div div div,
.venues-in-cos-container .loading div div div div,
.events-near-me-container .loading div div div div {
    background-color: rgba(0, 0, 0, 0.1);
    height: 20px;
    margin-bottom: 10px;
    margin-right: 5px;
    position: relative;
    overflow: hidden;
}

.popular-on-cos-container .loading div.img {
    height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    margin-bottom: 10px;
}

.popular-on-cos-container .loading .artist div.img {
    border-radius: 50%;
}

.artists-on-cos-container .loading .img {
    height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

.events-in-cos-container .loading .img {
    height: 100%;
    border-radius: 10px;
    aspect-ratio: 1 / 1;
}

.venues-in-cos-container .loading .img {
    height: 100%;
    border-radius: 10px;
    aspect-ratio: 1 / 1;
}

.events-in-cos-container .modal-latest {
    text-align: left;
}

.events-near-me-container .loading .img {
    height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
}

.popular-on-cos-container .loading div div div div::after,
.artists-on-cos-container .loading div div div div::after,
.events-in-cos-container .loading div div div div::after,
.events-near-me-container .loading div div div div::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 0.7) 50%, rgba(250, 250, 250, 0) 100%);
    animation: shimmer 1.5s infinite;
}


/* Shimmer animation */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}


/* RESPONSIVE */
@media screen and (max-width: 900px) {
    .modal-body .modal-search {
        margin: 0 0 10px 0;
        overflow: hidden;
    }

    .modal-search input,
    .modal-search select,
    .modal-body .modal-search input[type=submit] {
        padding: 10px;
        font-size: 14px;
    }

    .modal-body .modal-search .search-box {
        float: left;
        border: none;
        width: 90%;
        margin: 0;
        padding: 10px;
    }

    .modal-body .modal-latest h2,
    .modal-body .modal-latest h4 {
        font-size: 12px;
        height: 18px;
        overflow: hidden;
    }

    .popular-on-cos-container .data img {
        width: 50%;
    }

    .modal-body .modal-latest p {
        display: none;
    }

    .modal-body .mb-5 {
        margin-bottom: 10px !important;
    }

    .modal-body .modal-latest {
        margin-bottom: 15px;
        text-align: center;
    }
}