/* YouTube-style playlist cards on the search results page.
   Markup: VPlaylistsearch::card() / inlineBlock() (f_core/f_classes/class.playlistsearch.php).
   Loaded after custom.min.css; theme CSS is minified so overrides use !important. */

ul.fileThumbs.big.pl-search {
    display: block !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    max-width: 1030px;
}
ul.fileThumbs.big.pl-search::before,
ul.fileThumbs.big.pl-search::after { display: none !important; }

ul.fileThumbs.big.pl-search > li.pl-search-card {
    display: flex !important;
    align-items: flex-start;
    gap: 16px;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    list-style: none;
    box-sizing: border-box;
}

/* stacked thumbnail */
.pl-search-thumb {
    position: relative;
    flex: 0 0 360px;
    width: 360px;
    max-width: 50%;
    padding-top: 8px;
}
.pl-search-thumb-link { display: block; position: relative; text-decoration: none !important; }
.pl-search-stack {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 4px;
    border-radius: 12px 12px 0 0;
    background: rgba(0, 0, 0, .25);
}
.pl-search-stack-1 { top: -4px; width: 94%; background: rgba(0, 0, 0, .35); }
.pl-search-stack-2 { top: -8px; width: 88%; }
body.dark .pl-search-stack-1 { background: rgba(255, 255, 255, .28); }
body.dark .pl-search-stack-2 { background: rgba(255, 255, 255, .16); }

.pl-search-figure {
    position: relative;
    margin: 0 !important;
    padding-top: 56.25%;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}
.pl-search-figure img {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}
.pl-search-count {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 2px 6px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    color: #fff;
    background: rgba(0, 0, 0, .8);
    border-radius: 4px;
    white-space: nowrap;
}
.pl-search-count i { font-size: 11px; margin-right: 2px; }
.pl-search-playall {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    background: rgba(0, 0, 0, .7);
    opacity: 0;
    transition: opacity .15s ease;
}
.pl-search-thumb-link:hover .pl-search-playall { opacity: 1; }

/* text column */
.pl-search-meta { flex: 1 1 auto; min-width: 0; padding-top: 8px; }
.pl-search-title {
    margin: 0 0 4px !important;
    padding: 0 !important;
    font-size: 18px !important;
    line-height: 26px !important;
    font-weight: 400 !important;
    text-align: left !important;
}
.pl-search-title a {
    color: #0f0f0f !important;
    text-decoration: none !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pl-search-owner {
    font-size: 12px;
    line-height: 18px;
    color: #606060;
    margin-bottom: 12px;
}
.pl-search-owner a.channel_name { color: #606060 !important; text-decoration: none !important; font-size: 12px !important; }
.pl-search-owner a.channel_name:hover { color: #0f0f0f !important; }
.pl-search-sep { margin: 0 4px; }

.pl-search-items {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.pl-search-items li {
    font-size: 12px;
    line-height: 18px;
    color: #606060;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
.pl-search-items li a { color: #606060 !important; text-decoration: none !important; }
.pl-search-items li a:hover { color: #0f0f0f !important; }
.pl-search-dur { color: #606060; }

.pl-search-viewfull {
    display: inline-block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    color: #0f0f0f !important;
    text-decoration: none !important;
}
.pl-search-viewfull:hover { text-decoration: underline !important; }
.pl-search-descr {
    margin: 6px 0 0 !important;
    font-size: 12px;
    line-height: 18px;
    color: #606060;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* inline block above regular results */
.pl-search-inline { margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, .08); }
body.dark .pl-search-inline { border-top-color: rgba(255, 255, 255, .1); }
.pl-search-inline-title {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 12px !important;
}
.pl-search-inline-all {
    margin-left: auto;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none !important;
}
.pl-search-inline-all i { font-size: 11px; }

/* tf=5 standalone results: type toggle, sort chips, pager */
.pls-toolbar { margin: 12px 0 16px; }
.pls-types {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
body.dark .pls-types { border-bottom-color: rgba(255, 255, 255, .1); }
.pls-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 92px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: #0f0f0f !important;
    text-decoration: none !important;
    white-space: nowrap;
}
.pls-type i { font-size: 18px; line-height: 1; color: var(--primary-color, #06a2cb); }
.pls-type:hover { background: #f2f2f2; }
.pls-type.active { background: #e8e8e8; font-weight: 600; }
body.dark .pls-type { color: #f1f1f1 !important; }
body.dark .pls-type:hover { background: #272727; }
body.dark .pls-type.active { background: #3f3f3f; }
.pls-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pls-chip {
    display: inline-block;
    padding: 0 12px;
    height: 32px;
    line-height: 32px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    background: #f2f2f2;
    color: #0f0f0f !important;
    text-decoration: none !important;
}
.pls-chip:hover { background: #e5e5e5; }
.pls-chip.active { background: #0f0f0f; color: #fff !important; }
body.dark .pls-chip { background: #272727; color: #f1f1f1 !important; }
body.dark .pls-chip:hover { background: #3f3f3f; }
body.dark .pls-chip.active { background: #f1f1f1; color: #0f0f0f !important; }
.pls-title { margin-bottom: 14px !important; }
.pls-count { font-weight: 400; opacity: .6; font-size: 14px; }
.pls-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1030px;
    margin: 8px 0 24px;
    font-size: 14px;
}
.pls-pager a.pls-page { text-decoration: none !important; font-weight: 500; }
.pls-page-nr { opacity: .7; }

/* dark theme */
body.dark .pl-search-title a,
body.dark .pl-search-viewfull,
body.dark .pl-search-owner a.channel_name:hover,
body.dark .pl-search-items li a:hover { color: #f1f1f1 !important; }
body.dark .pl-search-owner,
body.dark .pl-search-owner a.channel_name,
body.dark .pl-search-items li,
body.dark .pl-search-items li a,
body.dark .pl-search-dur,
body.dark .pl-search-descr { color: #aaa !important; }

/* narrow screens: stack vertically */
@media (max-width: 640px) {
    ul.fileThumbs.big.pl-search > li.pl-search-card { flex-direction: column; gap: 10px; }
    .pl-search-thumb { flex-basis: auto; width: 100%; max-width: 100%; }
    .pl-search-meta { padding-top: 0; }
}