/* ---- Video Post ---- */
.video-con {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    line-height: 1.4;
}

.vp-sec1 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.post-container {
    max-width: 940px;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 940px) {
    .post-container {
        padding: 0 10px;
    }
}

@media (max-width: 940px) {
    .norm-pad {
        padding: 0 10px;
    }

    .wide-pad {
        padding: 0;
    }

    .video-wrapper {
        border-radius: 0 !important;
    }
}

.title-meta-model {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

/* Discover Section */
.di-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.di-con {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 5;
    width: 100%;
    gap: 4px;
    margin: 6px 0 0 0;
}

.di-head {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    color: #f1f1f1e1;
    font-size: 17px;
}

.di-color {
    background: #54a6ff;
    width: 4px;
    border-radius: 999px;
    align-self: stretch;
}

.di-gallery {
    display: flex;
    gap: 10px;
    padding: 6px 2px;
    border-radius: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
}

.di-grid-section {
    display: grid;
    grid-template-columns: repeat(2, 175px);
    grid-template-rows: repeat(2, auto);
    gap: 10px;
}

.di-link,
.di-link:hover {
    position: relative;
    display: flex;
    width: 175px;
    flex-direction: column;
    gap: 4px;
}

.di-fi-wr {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0px 2px 4px #00000069;
}

.di-fi-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(8px);
    transform: scale(1.1);
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.di-fi {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
}

.di-link p {
    font-family: 'Rubik';
    font-weight: 500;
    font-size: 13px;
    color: #f1f1f1d1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- VIDEO PLAYER ---- */
.video-wrapper {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background-color: #fff;
    box-shadow: 32px 0 #fff, -32px 0 #fff;
    border-radius: 50%;
    animation: flash 0.5s ease-out infinite alternate;
}

@keyframes flash {
    0% {
        background-color: #FFF2;
        box-shadow: 32px 0 #FFF2, -32px 0 #FFF;
    }

    50% {
        background-color: #FFF;
        box-shadow: 32px 0 #FFF2, -32px 0 #FFF2;
    }

    100% {
        background-color: #FFF2;
        box-shadow: 32px 0 #FFF, -32px 0 #FFF2;
    }
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fullscreen-active {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
}

.fullscreen-active video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.video-ui {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.show-ui {
    opacity: 1;
}

.top-row,
.progress-row,
.bottom-row {
    display: flex;
    align-items: center;
    gap: 12px;
    height: min(55px, max(48px, 8vw));
    box-sizing: border-box;
}

.top-row {
    padding: 7px;
    justify-content: space-between;
}

.row-left,
.row-right {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 6px;
}

.bottom-row {
    padding: 7px;
    justify-content: space-between;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
}

.top-row img,
.bottom-row img {
    height: 100%;
    box-sizing: border-box;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    padding: 6px;
    border-radius: 8px;
    background: transparent;
    opacity: .8;
    transition: background-color 0.2s ease;
}

.top-row img:hover,
.bottom-row img:hover,
.top-row img:active,
.bottom-row img:active {
    background-color: rgba(0, 0, 0, 0.5);
}

.middle-row {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
}

.progress-row,
.volume-row {
    position: relative;
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
    height: auto;
}

.progress-row {
    margin-bottom: 2px;
}

.volume-row {
    width: 50px;
    padding: 0;
}

@media (max-width: 380px) {
    .volume-row {
        display: none;
    }
}

#preview-text {
    font-size: 14px;
    align-self: start;
    background: #00000047;
    padding: 0 6px;
    border-radius: 8px;
}

#video-time {
    font-size: 14px;
}


/* Video Sliders */
.slider-hitbox {
    position: absolute;
    left: 0;
    width: 100%;
    height: 24px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 2;
    background: transparent;
}

.slider-con {
    position: relative;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    cursor: pointer;
}

.slider-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #33aaff;
    border-radius: 6px;
    width: 0%;
    pointer-events: none;
}

.slider-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    transition: background 0.15s ease;
    pointer-events: none;
    z-index: 1;
    cursor: pointer;
}

/* ---- VIDEO META ---- */
.video-meta {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.vm-title {
    display: flex;
    font-family: 'Rubik', sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #f1f1f1;
}

.vm-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    gap: 10px;
}

.vm-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    row-gap: 8px;
}

.mb-btn {
    position: relative;
    height: 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    background: #272d3a;
    color: #f4f4f6;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.4s ease;
    overflow: hidden;
    box-shadow: 0px 2px 4px #00000069;
    box-sizing: border-box;
}

.mb-btn.favorited,
.mb-btn.unlocked {
    background: Transparent;
}

.mb-btn img {
    height: 100%;
    object-fit: contain;
}

.mb-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: #479ceb;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.wr-fav.mb-wrapper {
    background: #eb4778;
}

.mb-active {
    opacity: 1;
}

.unlock-button img,
.favorites-button img {
    opacity: .7;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.unlock-button.unlocked img,
.favorites-button.favorited img {
    opacity: 1;
}

.favorites-button {
    padding: 5px;
}

.unlock-button {
    padding: 7px;
}

.reward {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 10px;
    background: linear-gradient(145deg, rgb(70 144 230) 0%, rgb(38 94 197) 100%);
    animation: glowEffect 3s infinite;
}

.mb-vid-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    white-space: nowrap;
    color: #fff;
    opacity: .5;
    column-gap: 4px;
    row-gap: 0px;
    font-size: 15px;
}

.mb-meta {
    display: flex;
    align-items: center;
}

.mb-meta img {
    height: 30px;
    width: 30px;
    box-sizing: border-box;
}

.views img {
    padding: 3px;
}

.time img {
    padding: 5px;
}

@keyframes glowEffect {
    0% {
        box-shadow: 0 0 2px rgba(102, 153, 255, 0.2);
    }

    50% {
        box-shadow: 0 0 10px rgba(102, 153, 255, .7);
    }

    100% {
        box-shadow: 0 0 2px rgba(102, 153, 255, 0.2);
    }
}

.reward img {
    height: 18px;
    width: auto;
}

.rd-text {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rd-close {
    animation: close-reward 0.3s forwards;
}

@keyframes close-reward {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(0.5);
        opacity: 0;
    }
}

@keyframes flip {
    0% {
        transform: scale(1) rotateY(0);
    }

    50% {
        transform: scale(1.3) rotateY(90deg);
    }

    100% {
        transform: scale(1) rotateY(180deg);
    }
}

.flip-animation {
    animation: flip 0.3s ease-in-out;
    transform-style: preserve-3d;
}

/* ---- Video Message ---- */
.vp-mes {
    display: flex;
    justify-content: center;
    background-color: #0000001c;
    color: #ffffffe0;
    border-radius: 8px;
    font-size: 16px;
    padding: 10px;
    border: 1px solid #7abaff;
    margin: 6px auto;
    max-width: 500px;
}

.vp-mes-p {
    margin: 0;
    text-align: center;
}

/* ---- CREATOR LINKS ---- */
.creator-links {
    display: flex;
    gap: 10px;
    margin-top: 3px;
}

.creator-link {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    cursor: pointer;
    color: inherit;
    flex-shrink: 0;
}

.cl-ava {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.cl-meta {
    display: flex;
    flex-direction: column;
}

.cl-name {
    font-family: 'Rubik';
    color: #ffffffd1;
}

.cl-views {
    font-size: 12px;
    color: #ffffff85;
}

/* --- Video Modules --- */
.vp-mod {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    color: #ffffff80;
}

/* screenshots */
.ss-con {
    display: flex;
    gap: 8px;
    width: 100%;
    padding: 5px 2px;
    overflow: auto;
}

.ss {
    position: relative;
    display: flex;
    justify-content: center;
    max-width: 120px;
    min-width: 120px;
    aspect-ratio: 16 / 9;
}

.ss-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: #00000054;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0px 2px 4px #00000069;
}

.ss-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ss-set-fi {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    top: -5px;
    right: -5px;
    background: #0000005e;
    border: 1px solid #ffffff3d;
    border-radius: 8px;
    color: #ffffffbf;
    font-weight: 600;
	cursor: pointer;
}

/* === Glightbox === */
.glightbox-mobile .goverlay {
    background: #000000b0 !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.glightbox-clean .gclose {
    background-color: #00000070 !important;
    border-radius: 10px !important;
}

/* Tags */
.tags-con {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0;
}

.tag {
    display: flex;
    background: #272d3a;
    color: #ffffffba;
    box-shadow: 0px 2px 4px #00000069;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 15px;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.tag:hover,
.tag:focus {
    background: #4682b4;
    color: #ffffff;
}