/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #1C1C1C;
    color: white;
    font-family: "Roboto", sans-serif;
    padding: 20px;
}

/* Blurred background for popup */
.blurred {
    filter: blur(5px);
}

/* Content wrapper */
#content-wrapper {
    transition: filter 0.3s ease;
}

.main-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.left-sidebar {
    width: 280px;
    border-radius: 16px;
    background: #101010;
    padding: 24px;
    position: fixed;
    left: 20px;
    top: 20px;
    bottom: 20px;
    z-index: 1;
    transition: all 0.3s ease;
}

div#content-wrapper {
    flex-basis: calc(100% - 280px - 24px);
    margin-left: 304px;
    transition: all 0.3s ease;
}

.content-wrapper-inner {
    border-radius: 16px;
    background: #101010;
    padding: 24px 40px;
}

/* Toggled Sidebar State */
body.toggle-sidebar .left-sidebar {
    width: 80px;
    padding: 24px 16px;
}

body.toggle-sidebar div#content-wrapper {
    flex-basis: calc(100% - 80px - 24px);
    margin-left: 104px;
}

/* Hide text when sidebar is toggled */
body.toggle-sidebar .sidebar-menu-item a {
    justify-content: center;
}

body.toggle-sidebar .sidebar-menu-item a span:not(.sidebar-menu-icon) {
    display: none;
}

body.toggle-sidebar .sidebar-header img {
    display: none;
}

/* Popup 18+ styles */
.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 30px;
    border-radius: 10px;
    z-index: 9999;
    display: none;
    max-width: 500px;
    text-align: center;
}

.popup p {
    margin-bottom: 20px;
    line-height: 1.6;
}

.popup button {
    background-color: #8A38F5;
    color: white;
    border: none;
    padding: 12px 30px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
    margin: 0 10px;
}

.popup button:hover {
    background-color: #8A38F5;
}

/* Header */
.header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0px 0px 20px;
    background-color: black;
    color: white;
}

.nav-links {
    display: flex;
    gap: 30px;
    font-size: 18px;
    color: white;
}

.nav-links a {
    color: white;
    text-decoration: none;
}

.nav-links a:hover {
    color: #1e90ff;
}

/* Search Bar */
.search-bar {
    display: flex;
    margin-bottom: 20px;
    justify-content: center;
}

.search-bar input[type="text"] {
    color: white;
    border: 1px solid #333;
    border-radius: 64px 0 0 64px;
    border-right: 1px solid #89898A;
    background: #2C2C2C;
    font-family: 'Roboto';
    padding: 8px 32px 8px 64px;
    font-size: 16px;
    height: 50px;
    font-weight: 400;
}

form.search-bar {
    position: relative;
}

span.header-icon {
    position: absolute;
    left: 23px;
    top: 13px;
}

.search-bar button {
    border: none;
    cursor: pointer;
    border-radius: 0 64px 64px 0;
    background: #2C2C2C;
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding: 0px 20px;
    font-family: Roboto;
}

.search-bar button:hover {
    background-color: #0066cc;
}

/* Grid Layout */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, calc(33% - 13px));
    gap: 24px;
    justify-content: center;
}

/* Card */
.card {
    width: 100%;
    border-radius: 8px;
    background: #1E1E1E;
    overflow: hidden;
    padding: 8px;
}

.card img {
    width: 100%;
    display: block;
}

.card-content {
    padding: 10px;
    color: white;
}

.date {
    padding: 0;
    color: #89898A;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    margin-top: 8px;
    display: block;
}

/* Post Title */
.post-title {
    margin: 5px 0;
    color: #FFF;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    margin-bottom: 8px;
}

.post-title:hover {
    color: #1e90ff;
}

/* Post Artists */
.post-artists {
    font-family: "open sans", sans-serif;
    font-size: 0.65rem;
    color: #1e90ff;
    margin: 5px 0;
}

.artist-link {
    text-decoration: none;
    color: #1e90ff;
    font-weight: bold;
}

.artist-link:hover {
    text-decoration: underline;
}

/* Post Date */
.post-date {
    font-size: 0.65rem;
    color: #888888;
    text-align: right;
    margin: 0;
}

/* Tags */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

.tags span {
    font-size: 0.65rem;
    color: white;
    background-color: transparent;
    padding: 1px 3px;
    border-radius: 12px;
}

.tag-link {
    text-decoration: none;
    color: inherit;
}

.tag-link:hover span {
    color: #1e90ff;
}

/* Post Duration */
.post-duration {
    font-size: 0.7rem;
    color: #ccc;
    margin: 5px 0 0;
}

/* Image Container with Overlay */
.image-container {
    position: relative;
}

.image-container img {
    width: 100%;
    display: block;
    border-radius: 4px;
}

.paysite-overlay {
    position: absolute;
    bottom: 4px;
    left: 4px;
    padding: 3px 4px 1px;
    color: #FFF;
    font-size: 8px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    text-transform: uppercase;
    border-radius: 2px;
    background: rgba(51, 51, 51, 0.70);
}

/* Pagination */
.pagination {
    text-align: center;
    margin: 40px 0 0px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
}

.pagination nav {
    display: inline-block;
}

.pagination a,
.pagination span {
    display: inline-block;
    margin: 2px 4px;
    padding: 8px 14px;
    font-size: 14px;
    color: white;
    text-decoration: none;
    background-color: #444;
    border-radius: 3px;
    transition: background-color 0.3s;
}

.pagination a:hover {
    background-color: #666;
}

.pagination .active,
.pagination span[aria-current="page"] {
    font-weight: bold;
    background-color: #1e90ff;
    cursor: default;
}

.pagination .disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.image-container img {
    height: 230px;
    object-fit: cover;
}

.card-content-inner {
    height: 100%;
    display: flex;
}

.card-content {
    height: auto;
}

p.post-artists {
    margin-top: auto;
}

.card-content-inner a:hover {
    color: #fff;
}

.card-content-inner a:hover h2 {
    color: #fff;
}


/* Responsive */
@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr;
    }
    
    .card {
        width: 100%;
    }
    
    .header {
        flex-direction: column;
        gap: 15px;
    }
    
    .search-bar {
        width: 100%;
    }
}

/* Links */
a {
    color: #1e90ff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

p.post-artists a {
    color: #E2CCFF;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 14.4px */
}

p.post-artists {
    color: #E2CCFF;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 14.4px */
}

form.search-bar {
    width: 100%;
    max-width: 550px;
}

.search-bar input[type="text"] {
    width: 100%;
}

.sidebar-header img {
    max-width: 72px;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

button.sidebar-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all 0.3s ease;
}

button.sidebar-toggle:hover {
    opacity: 0.7;
}

button.sidebar-toggle span {
    width: 20px;
    height: 2px;
    display: block;
    background: #fff;
    transition: all 0.3s ease;
}


ul.sidebar-menu {
    list-style: none;
}

li.sidebar-menu-item a {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    color: #FFF;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

li.sidebar-menu-item {
    margin-bottom: 8px;
}

li.sidebar-menu-item a span {
    margin-right: 16px;
}

a.active {
    border-radius: 4px;
    background: rgba(138, 56, 245, 0.18);
}

.sidebar-content {
    margin-top: 24px;
}

li.sidebar-menu-item a {
    transition: all 0.3s ease-in-out;
}

li.sidebar-menu-item a:hover {
    background: rgb(138 56 245 / 8%);
    text-decoration: none;
}

.content-wrapper-inner {
    border-radius: 16px;
    background: #101010;
    padding: 24px 40px;
}

.footer {
    border-radius: 16px;
    background: #101010;
    padding: 24px 40px;
    margin-top: 16px;
}

.footer-logo img {
    max-width: 72px;
}

.footer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

a.support-link {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: var(--font-weight-400, 400);
    line-height: 24px; /* 150% */
}

a.support-link:hover {
    text-decoration: none;
}

a.support-link span {
    margin-right: 8px;
    position: relative;
    display: flex;
    align-items: center;
}

.footer-copytight {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #3D3D3D;
    margin-top: 15px;
    padding: 15px 0px;
}

.footer-copytight ul {
    list-style: none;
    display: flex;
}

.footer-copytight ul li a {
    color: #FFF;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: var(--font-weight-400, 400);
    line-height: 1.5; /* 150% */
}

.footer-copytight ul li {
    margin-right: 15px;
}

.footer-copytight-text {
    color: #89898A;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

.pagination nav span, .pagination nav a {
    border-radius: 8px;
    background: #2C2C2C;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-family: Roboto;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.pagination nav {
    display: flex;
    align-items: center;
}

.pagination .active, .pagination span[aria-current="page"] {
    background: #8A38F5;
    font-weight: 400;
}

.pagination nav .dots {
    background: transparent;
    color: #333 !important;
}

.image-container {
    border-radius: 4px;
    overflow: hidden;
}

.card .image-container:before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="41" height="40" viewBox="0 0 41 40" fill="none"><path d="M16.3333 25.9734V14.0268C16.3336 13.8773 16.374 13.7306 16.4504 13.6022C16.5268 13.4737 16.6364 13.3682 16.7676 13.2966C16.8988 13.225 17.0469 13.19 17.1963 13.1954C17.3456 13.2007 17.4908 13.2461 17.6166 13.3268L26.91 19.2984C27.0277 19.3738 27.1245 19.4776 27.1915 19.6002C27.2586 19.7228 27.2937 19.8603 27.2937 20.0001C27.2937 20.1399 27.2586 20.2774 27.1915 20.4C27.1245 20.5226 27.0277 20.6264 26.91 20.7018L17.6166 26.6751C17.4908 26.7558 17.3456 26.8012 17.1963 26.8065C17.0469 26.8118 16.8988 26.7769 16.7676 26.7053C16.6364 26.6337 16.5268 26.5282 16.4504 26.3997C16.374 26.2712 16.3336 26.1246 16.3333 25.9751V25.9734Z" fill="%2389898A"/><path d="M2.16669 20.0001C2.16669 9.87508 10.375 1.66675 20.5 1.66675C30.625 1.66675 38.8334 9.87508 38.8334 20.0001C38.8334 30.1251 30.625 38.3334 20.5 38.3334C10.375 38.3334 2.16669 30.1251 2.16669 20.0001ZM20.5 4.16675C16.3008 4.16675 12.2735 5.8349 9.30416 8.80422C6.33484 11.7736 4.66669 15.8008 4.66669 20.0001C4.66669 24.1993 6.33484 28.2266 9.30416 31.1959C12.2735 34.1653 16.3008 35.8334 20.5 35.8334C24.6993 35.8334 28.7266 34.1653 31.6959 31.1959C34.6652 28.2266 36.3334 24.1993 36.3334 20.0001C36.3334 15.8008 34.6652 11.7736 31.6959 8.80422C28.7266 5.8349 24.6993 4.16675 20.5 4.16675Z" fill="%2389898A"/></svg>');
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(30, 30, 30, 0.60);
    opacity: 0;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card:hover .image-container:before {
    opacity: 1;
}

.add-to-favorites {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12.001 4.52853C14.35 2.42 17.98 2.49 20.2426 4.75736C22.5053 7.02472 22.583 10.637 20.4786 12.993L11.9999 21.485L3.52138 12.993C1.41705 10.637 1.49571 7.01901 3.75736 4.75736C6.02157 2.49315 9.64519 2.41687 12.001 4.52853ZM18.827 6.1701C17.3279 4.66794 14.9076 4.60701 13.337 6.01687L12.0019 7.21524L10.6661 6.01781C9.09098 4.60597 6.67506 4.66808 5.17157 6.17157C3.68183 7.66131 3.60704 10.0473 4.97993 11.6232L11.9999 18.6543L19.0201 11.6232C20.3935 10.0467 20.319 7.66525 18.827 6.1701Z" fill="white"/></svg>');
    width: 24px;
    height: 24px;
}

.card-content-inner {
    align-items: flex-start;
    justify-content: space-between;
}

span.heart-icon {
    margin-top: 3px;
    margin-left: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
}


/* In favorites - filled heart */
span.heart-icon.add-to-favorites.in_favorites {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 20 19" fill="none"><path d="M10.001 1.52853C12.35 -0.579999 15.98 -0.509999 18.2426 1.75736C20.5053 4.02472 20.583 7.637 18.4786 9.993L9.9999 18.485L1.52138 9.993C-0.582952 7.637 -0.504292 4.01901 1.75736 1.75736C4.02157 -0.506849 7.64519 -0.583129 10.001 1.52853Z" fill="white"/></svg>');
}


/* Animation when adding to favorites */
span.heart-icon.in_favorites {
    animation: heartBeat 0.5s ease;
}

@keyframes heartBeat {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.3);
    }
    50% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(1.2);
    }
}

.wrapper-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 40px;
}

a.tag {
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    padding: 8px 15px;
    color: #FFF;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    margin: 2px;
    line-height: normal;
}

a.tag.active {
    border-radius: 4px;
    background: #8A38F5;
}

a.tag:hover {
    text-decoration: none;
    background: rgb(138 56 245 / 14%);
}

a:hover {
    text-decoration: none !important;
}


body.toggle-sidebar .sidebar-menu-item a .sidebar-menu-icon {
    margin: 0;
}

.toggle-sidebar button.sidebar-toggle {
    margin-left: 6px;
}


@media (max-width: 1360px) {
    .grid {
        grid-template-columns: repeat(auto-fit, calc(33% - 15px));
    }

    .grid {
        grid-template-columns: repeat(auto-fit, calc(33% - 15px));
    }
    
    .wrapper-tags {
        margin-bottom: 20px;
    }
    
    .search-bar {
        margin-bottom: 10px;
    }
    
    a.tag {
        font-size: 14px;
    }
    
    .post-title {
        font-size: 14px;
    }
    
    .content-wrapper-inner {
        padding: 20px;
    }
    
    .footer {
        padding: 20px;
    }
    
    .left-sidebar {
        padding: 20px;
    }

    .pagination {
        margin-top: 20px;
    }

    .image-container img {
        height: 174px;
    }
}


@media (max-width: 1140px) {
    .wrapper-tags {
        justify-content: flex-start;
    }
    
    .search-bar input[type="text"] {
        height: 40px;
        padding-left: 45px;
    }
    
    span.header-icon {
        top: 8px;
        left: 15px;
    }
    
    .left-sidebar {
        width: 240px;
    }
    
    div#content-wrapper {
        flex-basis: calc(100% - 240px - 24px);
        margin-left: 264px;
    }
    
    .grid {
        gap: 10px;
        grid-template-columns: repeat(auto-fit, calc(33% - 5px));
    }
}


@media (max-width: 991px) {

    .grid {
        grid-template-columns: repeat(auto-fit, calc(50% - 5px));
    }

    .pagination nav span, .pagination nav a {
        width: auto;
        height: 30px;
    }

    li.sidebar-menu-item a {
        font-size: 14px;
        padding: 7px 15px;
    }
}


@media (max-width: 768px) {
    .main-wrapper {
        flex-direction: column;
    }
    
    div#content-wrapper {
        flex-basis: 100%;
        margin-left: 0;
    }
    
    .left-sidebar {
        width: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: auto;
        padding: 10px;
    }
    
    .sidebar-header img {
        max-width: 44px;
        margin-right: auto;
    }
    
    .sidebar-header a {
        margin-right: auto;
        margin-left: 5px;
    }
    
    body {
        padding: 0;
    }
    
    .grid {
        grid-template-columns: repeat(auto-fit, 100%);
    }
    
    .sidebar-content {
        position: fixed;
        top: 40px;
        bottom: 0;
        background: #0f0f0f;
        right: 30px;
        left: 0;
        transform: translate(-100%, 0px);
        opacity: 0;
    }
    
    .wrapper-tags {
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow-x: scroll;
        max-width: 100vw;
    }
    
    .content-wrapper-inner {
        padding: 10px;
    }

    body.toggle-sidebar div#content-wrapper {
        margin: 0;
        flex-basis: 100%;
    }
    
    body.toggle-sidebar .left-sidebar {
        padding: 10px;
        width: auto;
    }
    
    body.toggle-sidebar .sidebar-header img {
        display: block;
    }
    
    .toggle-sidebar button.sidebar-toggle {
        position: absolute;
        transform: translate(calc(100vw - 60px), 0px);
    }
    
    .toggle-sidebar button.sidebar-toggle span:first-child {
        transform: rotate(45deg);
        position: relative;
        top: 4px;
    }
    
    .toggle-sidebar button.sidebar-toggle span:nth-child(2) {
        opacity: 0;
    }
    
    .toggle-sidebar button.sidebar-toggle span:last-child {
        transform: rotate(-45deg);
        position: relative;
        top: -8px;
    }
    
    .toggle-sidebar .sidebar-content {
        opacity: 1;
        transform: translate(0px, 0px);
        padding: 20px;
        z-index: 5;
    }
    
    .sidebar-content {
        transition: all 0.3s ease-in-out;
    }
    
    body.toggle-sidebar .sidebar-menu-item a span:not(.sidebar-menu-icon) {
        display: block;
    }
    
    body.toggle-sidebar .sidebar-menu-item a .sidebar-menu-icon {
        margin-right: 15px;
    }
    
    body.toggle-sidebar .sidebar-menu-item a {
        justify-content: flex-start;
    }

    .search-bar {
        position: fixed;
        top: 10px;
        z-index: 1;
        right: 10px;
        margin: 0;
        width: 50px;
    }
    
    .search-bar button {
        display: none;
    }
    
    form.search-bar {
        max-width: 50px;
        right: 0;
        top: 0;
    }
    
    .search-bar input[type="text"] {
        padding: 0;
        opacity: 0;
    }
    
    span.header-icon svg path {
        fill: #fff;
    }
    
    span.header-icon {
        z-index: 4;
    }

    body.toggle-sidebar .left-sidebar {
        z-index: 5;
    }

    form.search-bar {
        /* transition: all 0.3s ease-in-out; */
    }
    
    .search-active form.search-bar {
        max-width: 100%;
        left: -5px;
    }
    
    .search-bar {
        /* transition: all 0.3s ease-in-out; */
    }
    
    .search-active .search-bar {
        max-width: 100%;
        width: calc(100% - 10px);
        left: 10px;
        right: 5px;
    }
    
    .search-active span.header-icon {
        right: 10px;
        left: auto;
        /* position: fixed; */
    }
    
    span.header-icon {
        left: auto;
        right: 10px;
    }
    
    .search-active .search-bar input[type="text"] {
        opacity: 1;
        padding: 20px;
        border-radius: 30px;
        border: 1px solid #89898A;
    }
    
    .search-active span.header-icon svg {
        display: none;
    }
    
    .search-active span.header-icon {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z" fill="white"/></svg>');
    }

    h1.models-title {
        margin-top: 40px;
        margin-bottom: 20px;
    }

    .content-wrapper-inner {
        padding: 10px;
        /* margin: 0px 10px; */
        width: 100%;
        max-width: 100%;
    }
    
    .grid {
        gap: 0;
        display: block;
    }
    
    .left-sidebar {
        border-radius: 0;
    }
    
    .card {
        margin-bottom: 10px;
    }

    div#content-wrapper {
        width: 100%;
    }

    .pagination nav {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    div#popup {
        width: 90%;
    }

    .image-container img {
        height: auto;
    }

    .wrapper-tags {
        margin-top: 60px;
    }

    .pagination nav {
        flex-wrap: wrap;
        justify-content: center;
    }
}

.search-bar input[type="text"]:focus {
    outline: none;
    box-shadow: none;
}