:root {
    --bg: #fff;
    --fg: #111;
    --muted: #666;
    --card: var(--tds-color-grey-70);
    --border: var(--tds-color-grey-50);
}

* {
    box-sizing: border-box;
}

.svl-header {

    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg);
    padding-bottom: 0.5em;
}

#header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg);
    padding-bottom: 0.5em;
}

.svl-filters {
    display: flex !important;
}
.svl-search-results__filters {
    padding-bottom: var(--tds-size-3x);
}
.svl-select {
    appearance: auto !important;
}

@media only screen and (max-width : 600px) {
    .svl-filters {
        display: grid !important;
    }
    .svl-header {
        position: static;
    }

}

.filters {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg);
    padding: .75rem 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
}

.sort-container {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-top: -2em !important;

}

.loading-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    min-height: 100px;
}

.tds-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#scroll-sentinel {
    height: 1px;
    width: 100%;
}

.results-summary {
    padding: 1rem 0;
    text-align: left;
}

#total-records {
    font-weight: 600;
}

#sortlabel {
    padding-right: 1rem;
}
.filters input,
.filters select {
    padding: .55rem .7rem;
    border: 1px solid #ddd;
    border-radius: .5rem;


}

#sort {
    margin-left: auto;
}

.video-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: inherit;
    border: none;
    color: inherit;
    flex-grow: 1;

    inline-size: 100%;
    margin: 0;
    padding: 0;
    padding-inline-end: var(--tds-size--3x);
    text-overflow: ellipsis;
    border-radius: var(--tds-border-radius--outline-only);
}
#count {
    margin-left: 1em;
    /*    margin-right:1em;*/
    color: var(--muted);
    /*    float:right;*/
}

.grid {
    display: grid;
    gap: var(--tds-size-7x);
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}


.card {
    background: var(--bg) !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.tvl-card-title {
    padding-top: 24px !important;
}

.card-body {
    padding: .75rem;
    padding-left: 0;
}
.card-title {
    margin: .2rem 0 .4rem;
    font-size: 1.05rem;
}
.meta {
    color: var(--muted);
    font-size: .9rem;
    margin: .2rem 0 .5rem;
}
.desc {
    font-size: .95rem;
    line-height: 1.35;
    padding-bottom: 0.5rem;
}
.tvl-subscription-chip {
    background-color: transparent !important;
    font-weight: 400 !important;
    color: white !important;
}
.actions {
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: 16px; /* <-- change this value to move it up/down */
    margin: 0;
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}
.actions .details,
.actions .share {
    border: black !important;
    border-radius: .5rem;
    background: var(--tds-color-grey-20) !important;
    color: var(--tds-color-white) !important;
}

.nav {
    background: var(--tds-color-grey-20) !important;
    color: var(--tds-color-white) !important;
    max-width: fit-content;
    padding: 0.5em !important;
    margin-left: 1em;
    margin-right: 1em;
}
.results-hint {
    font-size: var(--tds-font-size-20) !important;
}

dialog#player {
    /*  width: min(960px, 92vw); */
    height: fit-content;
    object-fit: contain;
    border: none;
    /*  padding: 1rem; */
    margin-top: 56px !important;
    /*position:fixed;
  top:50vh;
  left: 50%;
  transform: translateX(-50%);
  max-height: 95vh;*/
}
#player::backdrop {
    background: rgba(0, 0, 0, .6);
}
.player-stack {
    display: block;
}
/*#playerContent { 
    position: relative; 
    width: 100%; 
    height: 0; 
    margin:auto;
    padding-top: 56.25%; 
}
#playerContent iframe, #playerContent video {
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%;
  margin-top:1rem;
}*/

.player-main iframe,
.player-main video {
    display: block;
    width: 100%;
    aspect-ratio: 16/9; /* keeps good height on any screen */
    height: auto;
    width: calc(100% + var(--tds-size-6x)) !important;

    margin-bottom: 0px;
}

@media (max-width : 1200px) {
    .player-main iframe,
    .player-main video {
        aspect-ratio: 16/9 !important;
        margin-left: calc(var(--tds-size-3x)* -1) !important;
    }

    .player-main .tvl-subscription-container {
        width: calc(100% + var(--tds-size-6x)) !important;
        margin-left: calc(var(--tds-size-3x)* -1) !important;
    }

}

.player-main .tvl-subscription-container {
    display: flex;
    width: 100%;
    aspect-ratio: 16/9; /* keeps good height on any screen */
    height: auto;
    width: calc(100% + var(--tds-size-8x)) !important;
    margin-bottom: 0px;
    background-size: cover; /* Adjust as needed */
    background-position: center; /* Adjust as needed */
    justify-content: center;
    align-items: center;
    margin-left: calc(var(--tds-size-3x)* -1) !important;


}

.tvl-subscription-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + var(--tds-size-6x)) !important;
    background-color: rgba(0, 0, 0, 0.5); /* Black with 50% opacity */
}
.tvl-subscription-content * {
    color: white !important;
    align-items: center;
    justify-items: center;
    text-align: center;
    top: 50%;

}
.tvl-subscription-btn {
    display: flex;
    height: 40px;
    min-width: 204px;
    padding: 10px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: var(--tds-theme-background-container);
    color: var(--tds-theme-foreground) !important;
    text-align: center;
    /* Body/Body Label */
    font-family: "Universal Sans Text";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
}
.player-related {
    padding: 2rem;

}
#rel-h {
    padding: 0
}
.rel-title {
    margin-top: 4em;
    margin-left: 0.5em;
}

@media (max-width : 800px) {

    .player-related {
        margin-left: calc(var(--tds-size-5x)* -1) !important;
        padding-block-start: 0 !important;

    }
    .rel-title {
        margin-top: 1em !important;

    }
    .tvl-player-modal-footer {
        padding-bottom: 0 !important;
        padding-top: 0 !important;

        padding-right: var(--tds-size--5x) !important;
    }
    .tvl-player-modal-header {
        margin-left: 0 !important;
        padding-bottom: 0 !important;
        padding-top: 0 !important;
        width: 100%;
        top: calc(var(--tds-size--3x)* -1);
        z-index: 10;
        position: static;
        transition: padding 0.33s var(--tds-bezier);
        background-color: var(--tds-theme-background-dialog);

    }
    .tvl-video-subtitle {
        margin-left: 0 !important;
        margin-right: 2em !important;
        flex-direction: column !important;
        height: auto !important;
        gap: 8px !important;

    }
    dialog#player {
        overflow: auto !important;
    }
}

.rel-row {
    /*display:grid; */
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    gap: .75rem;
    overflow-x: auto;
    padding: .25rem;
}
.rel-item {
    position: relative;
    display: grid;
    grid-template-columns: 126px 1fr; /* thumb | title */
    grid-auto-rows: auto;
    gap: .5rem .6rem;
    padding: 12px 12px 12px 4px;
}
.rel-item:hover {
    background: #f8fafc;
}

.rel-item img,
.rel-item .no-thumb {
    width: 120px;
    height: 82px;
    object-fit: cover;
    border-radius: 6px;
    background: #f1f5f9;
    grid-column: 1;
    grid-row: 1;
}

/* Title on the right of the thumb */
.rel-item .t {
    grid-column: 2;
    grid-row: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: left;
    padding: 0 !important;
    gap: 8px;
}

.chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
/*.chip {
    margin-top: 1em;
}*/
.tvl-mobile-filter-container {
    display: inline-flex;
}
/* Chips row spans full width (both columns) */
.rel-item .tags {
    grid-column: 1/-1;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .25rem;
}


.rel-thumb {
    position: relative;
    grid-column: 1;
    grid-row: 1;
}

.rel-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
    cursor: pointer;
    transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.rel-play svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
}
.tag {
    display: inline-block;
    font-size: .75rem;
    line-height: 1;
    padding: .25rem .45rem;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.details-tag {
    margin-left: 0.5em;
}

#closePlayer {
    position: absolute;
    right: .5rem;
    top: .4rem;
    border: none;
    font-size: 1.5rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 10;
}

dialog#details {
    width: min(600px, 90vw);
    border: none;
    border-radius: .75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    padding: 1.5rem 2rem;
    font-size: .95rem;
    line-height: 1.4;
}
#details::backdrop {
    background: rgba(0, 0, 0, .6);
}
#closeDetails {
    position: absolute;
    right: .75rem;
    top: .5rem;
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    cursor: pointer;
}

#closeSubscription {
    position: absolute;
    right: .75rem;
    top: .5rem;
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    cursor: pointer;
}
#subscription,
#details {
    height: fit-content;
}
#detailsContent h3 {
    margin-top: 0;
    margin-bottom: .75rem;
}
#detailsContent p {
    margin: .25rem 0;
}
#detailsContent span.label {
    font-weight: 600;
    color: #333;
}
#subscriptionContent {
    margin: 2em;
}

#subscriptionContent h3 {
    margin-top: 0;
    margin-bottom: .75rem;
}

#subscriptionContent div {
    margin-top: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; /* Ensure the modal has a defined height */
}
#subscriptionContent p {
    margin: .25rem 0;
}
#subscriptionContent span.label {
    font-weight: 600;
    color: #333;
}

.thumb-wrap {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 100%;
    cursor: pointer;
    border-radius: var(--tds-border-radius--card) !important;
}

.thumb-wrap-related {
    width: 120px;
    height: 82px;
}

.card-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    border-bottom: 1px solid #eaeaea;
    cursor: pointer;
    /*    filter: brightness(0.7);*/
}

.thumb-wrap::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    cursor: pointer;
    border-radius: var(--tds-border-radius--card) !important;
}


/*.play-overlay {
  position: absolute;
  top: 5%;
  left: 75%;
  transform: translate(-50%, -50%);
  width: 4rem; height: 4rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.72); color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
  cursor: pointer;
  transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
}*/

.play-overlay {
    position: absolute;
    top: 10px; /* Adjust this value to control the distance from the top */
    right: 10px; /* Adjust this value to control the distance from the right */
    background-color: rgba(0, 0, 0, 0.6); /* Black with 60% opacity for transparency */
    color: white; /* Text and icon color */
    padding: 4px 4px; /* Inner spacing for the button */
    border: none; /* Remove default border */
    border-radius: 4px; /* Slightly rounded corners */
    display: flex; /* Flexbox to align icon and text */
    align-items: center; /* Vertically center the content */
    gap: 8px; /* Space between icon and text */
    font-size: 14px; /* Adjust text size as needed */
    z-index: 1; /* Ensure it appears above the image */

}
.play-overlay-related {
    position: absolute;
    top: 40%;
    right: 40%;
    color: white;
    align-items: center;
    font-size: 11px;
    z-index: 1;

}

.lock-icon {
    width: 2rem !important;
    height: 2rem !important;
    color: #FFD700; /* Golden yellow */
}

.play-icon {
    width: 2rem !important;
    height: 2rem !important;
    color: white; /* Golden yellow */
}

.thumb-wrap:hover .play-overlay {
    opacity: 1;
}
.tvl-layout {
    margin-bottom: 24px !important;
}

.tvl-aside {
    max-width: 240px;
}

@media screen and (min-width : 801px) {
    .tvl-player-modal-header {
        top: calc(var(--tds-size--3x)* -1);
        z-index: 10;
        transition: padding 0.33s var(--tds-bezier);
        background-color: var(--tds-theme-background-dialog);
        margin-left: calc(var(--tds-size-3x)* -1) !important;
        width: calc(100% + var(--tds-size-6x)) !important;

    }
    .tvl-player-modal-footer {
        background-color: var(--tds-theme-background-dialog);
        bottom: calc(var(--tds-size--3x)* -1);
        /*    padding: var(--tds-size--3x) 0 var(--tds-size--6x);*/
        transition: padding 0.33s var(--tds-bezier);
        z-index: 11;
        width: calc(100% + var(--tds-size-6x)) !important;
        margin-left: calc(var(--tds-size-3x)* -1) !important;
    }
}


@media (max-width : 800px) {
    .tvl-player-modal-layout {
        flex-flow: column wrap !important;
        flex-direction: column !important;
    }
}

.tvl-form-input {
    margin-top: 2em;
}

.tvl-secondary-filters {
    margin-top: 2em;

}
@media (max-width : 600px) {
    .tvl-form-input {
        margin-top: 0 !important;
    }
}

.tvl-description {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    color: var(--tds-theme-foreground) !important;
    font-size: var(--tds-font-size-30) !important;
}

.tvl-related {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    font-size: var(--tds-font-size-30);
    color: var(--tds-theme-foreground-low-contrast);
    font-weight: 400;
}
.tvl-rel-title {
    color: var(--tds-theme-foreground-high-contrast);
    font-family: "Universal Sans Text";
    font-size: var(--tds-font-size-30);
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}
.tvl-tag-span {
    color: var(--tds-theme-foreground-low-contrast) !important;
    font-size: var(--tds-font-size-30) !important;
}

.tvl-bold-body {
    color: var(--tds-theme-foreground-low-contrast);
    font-family: "Universal Sans Text";
    font-size: var(--tds-font-size-30);
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}
.tvl-normal-foreground {
    color: var(--tds-theme-foreground);
    text-align: center;
    /* Body/Body */
    font-family: "Universal Sans Text";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}
.tvl-bold-heading {
    color: var(--tds-theme-foreground-high-contrast);
    text-align: center;
    /* Heading/H4 */
    font-family: "Universal Sans Display";
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px; /* 140% */
}
.tvl-subscription-notice {
    /*    display: flex;
    flex-direction: column;*/
    align-items: flex-start;
    gap: 4px;
    margin-top: 2em;
}
.span-tags {
    padding-top: 4px;
}
#pagination-container {
    margin-top: 64px;
}
.tvl-text--pagination {
    color: var(--tds-theme-foreground-low-contrast);
    font-size: var(--tds-font-size-30);
}
@media (min-width : 600px) {
    .tvl-search-results__no-results {
        text-align: center
    }
}

.tvl-search-results__no-results-heading {
    padding-bottom: var(--tds-size-1x);
    padding-top: 0;
    padding-block: 0 var(--tds-size-1x)
}

.tvl-video-subtitle {
    display: flex;
    flex-direction: row;
    height: 24px;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    margin-bottom: 24px;
    margin-right: 2em;
}
.tvl-video-subtitle-item {
    display: flex;
    max-height: 20px;
    align-items: center;
    gap: 8px;
}

.tvl-text--caption {
    color: var(--tds-theme-foreground-high-contrast);
    font-size: var(--tds-font-size-20);
    line-height: var(--tds-line-height-10);
}
#footer {
    padding-top: 72px;
}
.tvl-video-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
}

.tvl-video-footer-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}


.pager {
    display: flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1rem 0;
}
.pager .btn {
    border: 1px solid #e5e7eb;
    background: #fff;
    padding: .4rem .7rem;
    border-radius: .5rem;
    cursor: pointer
}
.pager .btn[disabled] {
    opacity: .5;
    cursor: not-allowed
}
.pager {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .95rem;
    color: #475569
}
.pbox {
    font-size: var(--tds-font-size-20) !important;
}
.pager input.pnum {
    width: 1.5rem;
    text-align: center;
    border: 1px solid #e5e7eb;
}
@media (max-width : 640px) {
    .pager {
        gap: .4rem
    }
    .pager .btn {
        padding: .35rem .55rem
    }
    .pager input.pnum {
        width: 2rem;
        padding: .3rem .4rem
    }
}

.badge-duration {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: .15rem .4rem;
    border-radius: .35rem;
    font-size: .78rem;
    line-height: 1;
    letter-spacing: .2px;
    z-index: 1;
}

/* Desktop: show bar, button hidden */
.filters-toggle {
    display: none;
}

@media (max-width : 640px) {
    .filters-bar {
        display: none;
    }
    .sort-div {
        margin-top: 1em;
    }
    .filters-toggle {
        margin-bottom: 1em;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        margin-top: 0.2em;
    }
}
#subscription-more-mobile {
    margin-bottom: 16px;
}
/* Modal basics (use your existing modal styles if you have them) */
.filters-modal[hidden] {
    display: none;
}