:root {
    --primary: #07617c;
    --primary-light: #eef4f6;
    --primary-dark: #91b7d9;
    --accent: #c88319;
    --black: #0a0a0a;
    --white: #fff;
    --red: #cd0b0c;
    --green: #41a161;
    --sub-green: #ebfff2;
    --gray: #dddddd;
    --sub-gray: #707070;
    --bg-gray: #f7f9fb;
    --bg-icon: #ffffff80;


    --plyr-range-track-height: 10px;
    --plyr-color-main: var(--orange);
    --plyr-control-icon-size: 18px;
    --plyr-range-thumb-background: var(--white);
    --plyr-range-thumb-height: 13px;
    --plyr-hover: var(--orange);

}
*{
    font-family: var(--main-font);
}
.info-videos {
    position: relative;
    background-color: var(--black);
}

.video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: blur(70px);
    z-index: 0;
    transition: all 0.5s ease-in-out;
}

.page-content {
    position: relative;
    padding-inline: 1rem;
    z-index: 2;
}

.info-videos-slides-button-prev,
.info-videos-slides-button-next {
    content: url("../icon/slider-arrow.svg");
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--black);
    box-shadow: 0 0 0 0.4rem #00000050;
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: background-color 400ms;
}

.info-videos-slides-button-prev {
    rotate: 180deg;
}

.info-videos-slides,
.info-videos-wrapper,
.info-videos-slide,
.video-wrapper,
.video-wrapper img,
.video-wrapper video,
.video-wrapper .plyr {
    height: 100dvh;
    aspect-ratio: 9/16;
    margin: auto;
}

.info-videos-slides,
.info-videos-slide,
.video-wrapper img,
.video-wrapper video,
.video-wrapper .plyr {
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-wrapper img,
.video-wrapper video,
.video-wrapper .plyr {
    background-color: var(--black);
}

.video-wrapper {
    position: relative;
    background-color: red;
}

.right-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100dvh;
}

.left-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    height: 100dvh;
}

.right-col,
.left-col {
    padding-block: 1.5rem;
}

.video-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.75)
    );
    color: var(--white);
    z-index: 1000;
}

.video-title {
    font-size: 1rem;
}

.box-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--black);
    box-shadow: 0 0 0 0.4rem #00000050;
    display: grid;
    place-content: center;
    cursor: pointer;
}

.like-icon svg path,
.box-icon svg path {
    fill: var(--white);
}

.like-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-content: center;
}
.liked svg path {
    fill: #f00;
}

.likes-count {
    color: var(--white);
    font-size: 0.9rem;
    text-align: center;
}

.brand-logo {
    max-width: 100px;
}

.info-videos-slides-arrows {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.swiper-button-disabled {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 400ms;
}

.copy-btn {
    background-color: var(--orange);
    color: var(--white);
    font-size: 0.9rem;
}

.copy-btn:hover {
    color: var(--white);
    filter: brightness(1.2);
}

textarea:focus, input[type="text"]:focus, input[type="file"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus, .form-select:focus, .form-control:focus{
    border-color: var(--orange) !important;
}
::selection{
    background: var(--orange);
}

@media (max-width: 767px) {
    body {
        height: 100dvh;
        width: 100%;
        overflow: hidden;
    }

    .row {
        margin: 0 !important;
    }

    .row > * {
        padding: 0 !important;
    }

    .info-videos-slides,
    .info-videos-wrapper,
    .info-videos-slide,
    .video-wrapper,
    .video-wrapper img,
    .video-wrapper video,
    .video-wrapper .plyr {
        height: calc(100dvh - 60px);
        background-color: var(--black);
    }

    .page-content {
        padding-inline: 0;
        width: 100%;
        height: 100dvh;
    }

    .body-content {
        padding: 0;
        width: 100%;
        height: calc(100dvh - 60px);
        overflow: hidden;
    }

    .footer-mobile {
        width: 100%;
        height: 60px;
        padding-inline: 1rem;
        background-color: var(--white);
    }

    .footer-mobile .navigation {
        gap: 1rem;
        justify-content: space-around;
    }

    .brand-logo a {
        display: flex;
    }

    .brand-logo a svg {
        margin: auto;
    }

    .footer-mobile .navigation .share-icon,
    .footer-mobile .navigation .sound-icon {
        box-shadow: none;
        background-color: transparent;
    }

    .footer-mobile .navigation svg path {
        fill: var(--black);
    }
}

/*@media (max-width: 450px) {*/
/*    .video-info {*/
/*        padding-inline: 2rem;*/
/*    }*/
/*}*/