.movieDemo {
    margin: 120px 0 150px;
}

.movieDemoTabs {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 42px;
    margin-top:30px;
}

.movieDemoTab {
    display: flex;
    align-items: center;
    gap: 10px;

    height: 50px;
    padding: 0 22px;

    border: none;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.68);
    color: var(--text);

    cursor: pointer;

    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 800;

    box-shadow: 0 12px 36px rgba(40, 32, 28, 0.05);

    transition:
        background 0.22s ease,
        color 0.22s ease,
        transform 0.22s ease;
}

.movieDemoTab:hover {
    transform: translateY(-2px);
}

.movieDemoTabActive {
    background: var(--text);
    color: #ffffff;
}

.movieDemoIndicator {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.movieDemoIndicatorNow {
    background: #38c172;
}

.movieDemoIndicatorComing {
    background: #ff5f98;
}

.movieDemoViewer {
    position: relative;
    overflow: hidden;

    min-height: 700px;

    border-radius: 44px;

    background: #202020;
    box-shadow: 0 36px 120px rgba(40, 32, 28, 0.12);
}

.movieDemoBackdrop {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at top left, rgba(255, 122, 182, 0.22), transparent 38rem),
        linear-gradient(135deg, #25252b, #101014);

    transform: scale(1.04);
}

.movieDemoBackdrop::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at 35% 50%, rgba(255,255,255,.16), transparent 24rem),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.58),
            rgba(0, 0, 0, 0.18),
            rgba(0, 0, 0, 0.58)
        );
}

.movieDemoGlass {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 62px;

    align-items: center;

    min-height: 700px;
    padding: 74px;

    background: rgba(255, 255, 255, 0.16);

    backdrop-filter: blur(34px);
    -webkit-backdrop-filter: blur(34px);
}

.movieDemoPoster {
    width: 100%;
    aspect-ratio: 2 / 3;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 32px;

    background: rgba(255, 255, 255, 0.86);
    color: var(--text);

    font-weight: 800;

    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.22);
}

.movieDemoInfo {
    max-width: 760px;
    padding: 40px;

    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 34px;

    background: rgba(255, 255, 255, 0.52);

    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);

    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.12);
}

.movieDemoTitleRow {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.movieDemoTitle {
    font-size: clamp(2.5rem, 4vw, 4.2rem);
    line-height: 1.02;
    letter-spacing: -0.06em;
}

.movieDemoRating {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    height: 38px;
    padding: 0 14px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.76);

    font-size: 0.96rem;
    font-weight: 800;
}

.movieDemoRatingSource {
    color: var(--text-secondary);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.movieDemoPlot {
    margin: 30px 0;

    color: rgba(25, 25, 28, 0.88);

    font-size: 1.06rem;
    line-height: 1.9;
    font-weight: 500;

    text-shadow:
        0 1px 0 rgba(255,255,255,.20);

    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.movieDemoGenres,
.movieDemoCinemas,
.movieDemoLinks {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.movieDemoCinemas {
    margin-top: 18px;
}

.movieDemoLinks {
    margin-top: 18px;
}

.movieDemoTag,
.movieDemoCinema,
.movieDemoLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;
    padding: 0 16px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.72);

    color: var(--text);

    font-size: 0.9rem;
    font-weight: 800;
}

.movieDemoNavigation {
    position: sticky;
    bottom: 24px;
    z-index: 20;

    width: fit-content;
    max-width: calc(100% - 32px);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;

    margin: 34px auto 0;
    padding: 12px 18px;

    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.58);

    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);

    box-shadow: 0 18px 70px rgba(40, 32, 28, 0.14);

    opacity: 0;
    transform: translateY(14px) scale(0.96);
    pointer-events: none;

    transition:
        opacity 0.24s ease,
        transform 0.24s ease;
}

.movieDemoNavigation.movieDemoNavigationVisible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.movieDemoNavigation .movieDemoArrow {
    width: 46px;
    height: 46px;
}
.movieDemoArrow{
    width:62px;
    height:62px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;
    border-radius:50%;
    cursor:pointer;

    background:#6E9CFF;
    color:#fff;

    transition:.25s ease;
}

.movieDemoArrow svg{
    width:22px;
    height:22px;

    stroke:currentColor;
    stroke-width:2.6;
    stroke-linecap:round;
    stroke-linejoin:round;
    fill:none;
}

.movieDemoArrow:hover{
    background:#5B89F4;
    transform:translateY(-2px);
}

.movieDemoArrow:active{
    transform:scale(.96);
}
.movieDemoArrow:focus-visible{
    outline:none;
    box-shadow:
        0 0 0 4px rgba(95,142,246,.18),
        0 10px 24px rgba(95,142,246,.28),
        inset 0 1px 0 rgba(255,255,255,.35);
}

.movieDemoArrow:disabled{
    opacity:.45;
    cursor:default;
    transform:none;
    filter:none;
}

.movieDemoDots {
    min-width: 180px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.movieDemoDot {
    width: 7px;
    height: 7px;

    border-radius: 999px;

    background: rgba(31, 31, 36, 0.28);
}

.movieDemoDotActive {
    width: 22px;
    background: var(--text);
}

.movieDemoFooter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin-top: 26px;

    color: var(--text-secondary);

    font-size: 0.92rem;
    font-weight: 600;
}

.movieDemoLiveDot {
    width: 10px;
    height: 10px;

    border-radius: 999px;

    background: #38c172;
}
.movieDemoPoster {
    overflow: hidden;
}

.movieDemoPosterImage {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.movieDemoBackdrop {
    background-size: cover;
    background-position: center;
}

.movieDemoInfo {
    max-width: 760px;
    padding: 40px;

    border: 1px solid color-mix(in srgb, var(--movieDemoAccent, #ffffff) 38%, rgba(255,255,255,.35));
    border-radius: 34px;

    background: rgba(255, 255, 255, 0.24);

    backdrop-filter: blur(42px);
    -webkit-backdrop-filter: blur(42px);

    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.16),
        0 0 120px color-mix(in srgb, var(--movieDemoAccent, #ffffff) 26%, transparent);

    transition:
        border-color .45s ease,
        box-shadow .45s ease,
        background .45s ease,
        opacity .28s ease,
        transform .28s ease;
}

.movieDemoRatingIcon {
    color: #f5b700;
}

.movieDemoCounter,
.movieDemoDotsText {
    color: var(--text-secondary);
    font-size: 0.86rem;
    font-weight: 800;
}

.movieDemoDot {
    border: none;
    cursor: pointer;
    transition: width .2s ease, background .2s ease, transform .2s ease;
}

.movieDemoDot:hover {
    transform: translateY(-1px);
}

.movieDemoCinema,
.movieDemoLink {
    text-decoration: none;
}
.movieDemoIsChanging .movieDemoPoster,
.movieDemoIsChanging .movieDemoInfo {
    opacity: 0;
    transform: translateY(10px);
}

.movieDemoPoster,
.movieDemoInfo {
    transition:
        opacity .28s ease,
        transform .28s ease;
}

.movieDemoBackdrop {
    transition:
        background-image .45s ease,
        background-color .45s ease;
}

.movieDemoSourceGroup {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.movieDemoSourceGroup + .movieDemoSourceGroup {
    margin-top: 18px;
}

.movieDemoCinema,
.movieDemoLink {
    gap: 8px;
}

.movieDemoSourceIcon {
    width: 18px;
    height: 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

.movieDemoSourceIcon svg {
    width: 18px;
    height: 18px;

    display: block;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.movieDemoSourceIcon-cinemacity {
    color: #2563eb;
}

.movieDemoSourceIcon-cinemax {
    color: #b11e6f;
}

.movieDemoSourceIcon-tmdb {
    color: #01b4e4;
}
.movieDemoActors {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;

    margin-top: 30px;
}

.movieDemoActor {
    width: 86px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.movieDemoActorImage {
    width: 68px;
    height: 68px;

    border-radius: 999px;

    object-fit: cover;

    border: 3px solid rgba(255, 255, 255, 0.76);

    background: rgba(255, 255, 255, 0.5);

    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
}

.movieDemoActorName {
    margin-top: 10px;

    color: var(--text);

    text-align: center;

    font-size: 0.78rem;
    line-height: 1.28;
    font-weight: 800;
}
.movieDemoActor {
    color: inherit;
    text-decoration: none;

    transition:
        transform .2s ease,
        opacity .2s ease;
}

.movieDemoActor:hover {
    transform: translateY(-3px);
}

.movieDemoActorFallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--text);
    font-size: 1rem;
    font-weight: 900;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.78),
            color-mix(in srgb, var(--movieDemoAccent, #ff5f98) 24%, rgba(255,255,255,.78))
        );
}
.movieDemoStatus {
    margin-top: 12px;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    font-size: .96rem;
    font-weight: 700;

    color: var(--text-secondary);
}

.movieDemoStatusDot {
    width: 9px;
    height: 9px;

    border-radius: 999px;

    flex-shrink: 0;
}

.movieDemoStatusDotNow {
    background: #38c172;
}

.movieDemoStatusDotComing {
    background: #ff5f98;
}
.movieDemoStatus {
    margin-top: 12px;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #34343a;

    font-size: 0.96rem;
    font-weight: 800;
}

.movieDemoStatusDot {
    width: 9px;
    height: 9px;

    border-radius: 999px;

    flex-shrink: 0;
}

.movieDemoStatusDotNow {
    background: #38c172;
}

.movieDemoStatusDotComing {
    background: #ff5f98;
}
.movieDemoPosterImage {
    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}

.movieDemoPoster:hover .movieDemoPosterImage {
    transform: scale(1.035);
}

.movieDemoPoster {
    transition:
        opacity 0.28s ease,
        transform 0.28s ease,
        box-shadow 0.28s ease;
}

.movieDemoInfo {
    transition:
        border-color 0.45s ease,
        box-shadow 0.45s ease,
        background 0.45s ease,
        opacity 0.28s ease,
        transform 0.28s ease;
}

.movieDemoBackdrop {
    transition:
        opacity 0.35s ease,
        background-image 0.45s ease,
        background-color 0.45s ease,
        transform 0.45s ease;
}

.movieDemoIsChanging .movieDemoPoster {
    opacity: 0;
    transform: translateX(-18px) scale(0.98);
}

.movieDemoIsChanging .movieDemoInfo {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
}

.movieDemoIsChanging .movieDemoBackdrop {
    opacity: 0.72;
    transform: scale(1.08);
}

.movieDemoActor {
    transition:
        transform 0.22s ease,
        opacity 0.22s ease;
}

.movieDemoActorImage {
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.movieDemoActor:hover {
    transform: translateY(-4px);
}

.movieDemoActor:hover .movieDemoActorImage {
    transform: scale(1.06);
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
}

.movieDemoActor:hover .movieDemoActorName {
    color: color-mix(in srgb, var(--movieDemoAccent, #ff5f98) 72%, var(--text));
}

.movieDemoCinema,
.movieDemoLink,
.movieDemoTag {
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.movieDemoCinema:hover,
.movieDemoLink:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.10);
}

.movieDemoTag:hover {
    transform: translateY(-1px);
}

.movieDemoDot {
    transition:
        width 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.movieDemoDot:hover {
    transform: translateY(-1px);
}
.movieDemoFormats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 12px;
}

.movieDemoFormat {
    min-height: 26px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 10px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.46);
    color: rgba(31, 31, 36, 0.78);

    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}
.movieDemoOriginalTitle {
    margin-top: 8px;

    color: rgba(31, 31, 36, 0.62);

    font-size: 0.94rem;
    line-height: 1.45;
    font-weight: 700;
}
.movieDemoCinema,
.movieDemoLink {
    min-width: auto;
    min-height: 42px;
    padding: 0 16px;
    justify-content: center;
    gap: 8px;
}

.movieDemoSourceIcon {
    width: 18px;
    height: 18px;
}

.movieDemoSourceIcon svg {
    width: 18px;
    height: 18px;
    max-width: 18px;
}

.movieDemoSourceText {
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}
.movieDemoSourceIcon-youtube {
    color: #ff0033;
}
.movieDemoTitle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.movieDemoTitleText {
    min-width: 0;
}

.movieDemoRomanianBadge {
    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);

    cursor: help;
    flex-shrink: 0;
}

.movieDemoRomanianBadge svg {
    width: 22px;
    height: 22px;
    display: block;
    border-radius: 5px;
}
.movieDemoViewer {
    position: relative;
}

.movieDemoLoading {
    position: absolute;
    inset: 0;
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    opacity: 0;
    pointer-events: none;

    transition: opacity .28s ease;
}

.movieDemoLoadingVisible {
    opacity: 1;
    pointer-events: auto;
}

.movieDemoViewerLoading .movieDemoBackdrop,
.movieDemoViewerLoading .movieDemoGlass {
    filter: blur(14px);
    opacity: .42;
    transform: scale(.985);
}

.movieDemoBackdrop,
.movieDemoGlass {
    transition:
        filter .32s ease,
        opacity .32s ease,
        transform .32s ease;
}

.movieDemoLoadingCard {
    max-width: 420px;
    padding: 28px 30px;

    border: 1px solid rgba(255,255,255,.34);
    border-radius: 28px;

    background: rgba(255,255,255,.58);

    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);

    box-shadow: 0 28px 90px rgba(0,0,0,.18);

    text-align: center;
}

.movieDemoLoadingCard strong {
    display: block;

    color: var(--text);

    font-size: 1.15rem;
    letter-spacing: -0.02em;
}

.movieDemoLoadingCard p {
    margin-top: 10px;

    color: var(--text-secondary);

    font-size: .94rem;
    line-height: 1.6;
}

.movieDemoLoadingDot {
    width: 12px;
    height: 12px;

    display: inline-block;

    margin-bottom: 16px;

    border-radius: 999px;

    background: var(--accent);

    box-shadow: 0 0 0 0 rgba(255,95,152,.35);

    animation: movieDemoLoadingPulse 1.4s infinite;
}

@keyframes movieDemoLoadingPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255,95,152,.36);
        transform: scale(1);
    }

    70% {
        box-shadow: 0 0 0 14px rgba(255,95,152,0);
        transform: scale(1.08);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255,95,152,0);
        transform: scale(1);
    }
}

.movieDemoLoadingError .movieDemoLoadingDot {
    background: #ff5f78;
}