body {
    margin          : 0;
    font-family     : 'Vazirmatn', sans-serif;
    text-align      : center;
    background-color: #ffffff;
}

.header {
    padding: 20px;
}

.header img {
    max-width: 200px;
    height   : auto;
}

.black-bar {
    background-color: black;
    height          : 40px;
    width           : 100%;
    overflow        : hidden;
    white-space     : nowrap;
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 20px;
    color           : white;
    font-size       : 14px;
    font-weight     : bold;
}

.black-bar a {
    color          : white;
    text-decoration: none;
}

.black-bar a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .black-bar a:nth-child(n+7) {
        display: none;
    }
}

@media (max-width: 480px) {
    .black-bar a:nth-child(n+4) {
        display: none;
    }
}

.red-text {
    color         : red;
    font-weight   : bold;
    font-size     : 26px;
    text-transform: uppercase;
    margin        : 20px 0 10px;
}

.headline {
    font-size    : 18px;
    font-weight  : bold;
    color        : #000;
    margin-bottom: 20px;
}

.lock-info {
    font-size      : 14px;
    margin         : 10px 0;
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 10px;
}

.lock-info img {
    width : 20px;
    height: 20px;
}

.counter-text {
    margin   : 20px 0 10px;
    font-size: 14px;
}

.footer {
    margin-top: 20px;
    font-size : 14px;
    color     : #666;
}

.footer img {
    height        : 30px;
    vertical-align: middle;
    margin-left   : 10px;
}

@media (max-width: 600px) {
    .red-text {
        font-size: 16px;
    }

    .headline {
        font-size: 16px;
    }
}

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn&display=swap');

.logo-block {
    display         : flex;
    flex-wrap       : wrap;
    justify-content : center;
    align-items     : center;
    gap             : 40px;
    padding         : 20px;
    background-color: #ffffff;
}

.logo-link {
    width              : 150px;
    height             : 80px;
    background-size    : contain;
    background-repeat  : no-repeat;
    background-position: center;
    transition         : transform 0.3s ease;
}

.logo-link:hover {
    transform: scale(1.05);
}

@media (max-width: 600px) {
    .logo-link {
        width : 120px;
        height: 70px;
    }
}

.title-logo-block {
    display    : block;
    width      : 1000px;
    max-width  : 100%;
    font-size  : 22px;
    color      : #006817;
    font-weight: 700;
    margin     : 0 auto;
    margin-top : 40px;

}

.footer {
    background-color: #000;
    color           : #fff;
    padding         : 20px;
    display         : flex;
    flex-wrap       : wrap;
    justify-content : space-between;
    align-items     : center;
    text-align      : center;
}

.footer-left {
    display    : flex;
    align-items: center;
    flex-wrap  : wrap;
    gap        : 10px;
}

.footer-left img {
    height: 30px;
}

.footer-right {
    display    : flex;
    flex-wrap  : wrap;
    align-items: center;
    gap        : 15px;
    font-size  : 14px;
}

.footer-links {
    display  : flex;
    flex-wrap: wrap;
    gap      : 10px;
}

.footer-links a {
    color          : #fff;
    text-decoration: none;
}

.footer-icons {
    display: flex;
    gap    : 10px;
}

.footer-icons a {
    color          : #000;
    background     : #fff;
    border-radius  : 50%;
    width          : 30px;
    height         : 30px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    text-decoration: none;
}

@media (max-width: 600px) {
    .footer {
        flex-direction: column;
        gap           : 20px;
    }

    .footer-left,
    .footer-right {
        justify-content: center;
    }
}

.headimg {
    max-width: 100%;
}

.bg-whitee {
    background-color: #f7f5f5;
    max-width       : 100% !important;
    padding-top     : 20px;
    padding-bottom  : 20px;
}

.video {
    max-width : 1120px;
    margin-top: 30px;
}

.smartplayer-content {
    border: 1px solid #000000 !important;
}

/* comments */
.fb-comments-wrapper {
    text-align: left;
}

.fb-comments {
    border        : 1px solid #e9ebee;
    border-radius : 3px;
    padding       : 0 15px;
    padding-bottom: 15px;
    margin        : 20px auto 0;
    position      : relative;
}

@media screen and (max-width: 580px) {
    .fb-comments {
        padding: 0 5px;
    }
}

.fb-comments-header {
    padding      : 15px 0;
    border-bottom: 1px solid #e9ebee;
    margin-bottom: 20px;
}

.fb-comments-header span {
    color      : #000;
    font-weight: 700;
    font-size  : 0.9em;
}

.fb-comments a {
    text-decoration: none;
}

.fb-comments-item {
    display    : flex;
    align-items: flex-start;
    gap        : 8px;
}

.fb-comments-item:not(:last-child) {
    margin-bottom: 20px;
}

.fb-comments-item__avatar {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 48px;
    flex-shrink    : 0;
    aspect-ratio   : 1/1;
    border-radius  : 50%;
    overflow       : hidden;
    margin-top     : 4px;
}

@media screen and (max-width: 580px) {
    .fb-comments-item__avatar {
        width: 40px;
    }
}

.fb-comments-item__avatar img {
    -o-object-fit: cover;
    object-fit   : cover;
    width        : 100%;
    height       : 100%;
}

.fb-comments-item__body {
    display       : flex;
    flex-direction: column;
}

.fb-comments-item__name {
    display        : inline-block;
    font-size      : 14px;
    color          : #365899;
    text-decoration: none;
    font-weight    : 700;
    cursor         : pointer;
    transition     : opacity 0.3s ease;
    margin-bottom  : 8px;
}

.fb-comments-item__name:hover,
.fb-comments-item__name:active {
    opacity: 0.7;
}

.fb-comments-item__text {
    padding         : 10px 20px;
    background-color: #eaebef;
    font-size       : 15px;
    line-height     : 1.2;
    border-radius   : 20px;
    margin-top      : 0;
    margin-bottom   : 4px;
}

@media screen and (max-width: 580px) {
    .fb-comments-item__text {
        padding      : 10px 15px;
        border-radius: 10px;
    }
}

.fb-comments-item__bottom {
    position       : relative;
    display        : flex;
    justify-content: space-between;
}

.fb-comments-item__bottom ul {
    display   : flex;
    gap       : 16px;
    list-style: none;
    font-size : 12px;
    padding   : 0;
    margin    : 0;
}

@media screen and (max-width: 580px) {
    .fb-comments-item__bottom ul {
        font-size: 10px;
    }
}

.fb-comments-item__bottom ul li {
    position: relative;
}

.fb-comments-item__bottom ul li:not(:last-child)::after {
    position   : absolute;
    content    : '•';
    top        : 0;
    right      : -10px;
    font-size  : 14px;
    line-height: 14px;
    color      : #929292;
}

.fb-comments-item__bottom ul a {
    color          : #365899;
    text-decoration: none;
}

.fb-comments-item__likes {
    position        : absolute;
    top             : -10px;
    right           : 8px;
    display         : flex;
    align-items     : center;
    gap             : 4px;
    background-color: #fff;
    border          : 1px solid #eaebef;
    border-radius   : 20px;
    cursor          : pointer;
}

.fb-comments-item__likes[data-liked='true'] {
    -webkit-animation: like 0.3s forwards;
    animation        : like 0.6s forwards;
}

.fb-comments-item__likes img {
    height             : 24px;
    pointer-events     : none;
    -webkit-user-select: none;
    -moz-user-select   : none;
    -ms-user-select    : none;
    user-select        : none;
}

@media screen and (max-width: 580px) {
    .fb-comments-item__likes img {
        height: 20px;
    }
}

.fb-comments-item__likes span {
    display     : inline-block;
    margin-right: 6px;
    font-size   : 14px;
    color       : #365899;
}

.fb-comments-login {
    margin     : 20px 0;
    border-top : 1px solid #eaebef;
    padding-top: 20px;
}

.fb-comments-login a {
    color      : #365899;
    font-weight: bold;
}

@-webkit-keyframes like {
    0% {
        background-color: #fff;
    }

    30% {
        transform: rotate(-3deg);
    }

    40% {
        transform: rotate(3deg);
    }

    50% {
        background-color: #2265e1;
        transform       : rotate(-3deg);
    }

    60% {
        transform: rotate(3deg);
    }

    70% {
        background-color: #fff;
        transform       : rotate(0deg);
    }
}

@keyframes like {
    0% {
        background-color: #fff;
    }

    30% {
        transform: rotate(-3deg);
    }

    40% {
        transform: rotate(3deg);
    }

    50% {
        background-color: #2265e1;
        transform       : rotate(-3deg);
    }

    60% {
        transform: rotate(3deg);
    }

    70% {
        background-color: #fff;
        transform       : rotate(0deg);
    }
}

.submit-roulette:hover {
    background        : #bb0000;
    -webkit-transition: background 0.3s;
    transition        : background 0.3s;
}

.submit-roulette:active {
    -webkit-transform : translateY(2px);
    transform         : translateY(2px);
    -webkit-box-shadow: none;
    box-shadow        : none;
}

.submit-roulette {
    text-transform    : uppercase;
    padding           : 10px 30px;
    margin            : 15px 0;
    outline           : none;
    border            : none;
    margin-top        : 5px;
    border-radius     : 5px;
    -webkit-box-shadow: 0px 4px 3px #242120;
    box-shadow        : 0px 4px 3px #242120;
    background        : red;
    color             : #fff;
    font-weight       : bold;
    cursor            : pointer;
    -webkit-transition: background 0.3s;
    transition        : background 0.3s;
    width             : 300px;
    max-width         : 100%;
}

.input-roulette {
    padding-left : 5px;
    height       : 42px;
    margin-bottom: 10px;
    width        : 300px;
    max-width    : 100%;
}

.order_block {
    padding   : 20px 10px;
    text-align: center !important;
}

.order_block h3 {
    font      : bold 18px Arial !important;
    background: transparent;
}

#form {
    display              : -webkit-box;
    display              : -ms-flexbox;
    display              : flex;
    -webkit-box-orient   : vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction   : column;
    flex-direction       : column;
    -webkit-box-align    : center;
    -ms-flex-align       : center;
    align-items          : center;
    font-family          : 'Proxima Nova', 'Arial', 'Helvetica Neue', sans-serif;
}

.time_remains {
    font-size  : 1.1em;
    color      : red;
    font-weight: bold;
}

.green_text {
    color      : green;
    font-weight: bold;
}

input {
    outline: none;
}

input:active {
    outline: none;
}

:focus {
    outline: none;
}

.js_old_price {
    display: block;
    margin : 0 auto;
}

.price_main {
    border-bottom: 2px solid #d31812;
    font-size    : 24px;
    line-height  : 0px;
    margin       : 0 auto;
}

b {
    font-weight: bolder;
}

.prod_img_wrapper {
    max-width: 300px !important;
    margin   : 15px auto;
    position : relative;
}

.prod_img_wrapper img {
    max-width : 320px;
    max-height: 320px;
}

.js_old_price {
    display: block;
    margin : 0 auto;
}

.price_main {
    border-bottom: 2px solid #d31812;
    font-size    : 24px;
    line-height  : 0px;
    margin       : 0 auto;
}

.span-input-roulette:before {
    display    : inline-block;
    color      : #333;
    line-height: 47px;
    position   : absolute;
    top        : -35px;
    font-size  : 95%;
    left       : 5px;
}

input {
    outline: none;
}

input.submit-roulette {
    text-transform       : uppercase;
    padding              : 10px 30px;
    margin               : 15px 0;
    outline              : none;
    border               : none;
    margin-top           : 5px;
    border-radius        : 5px;
    background           : #ff0000f7;
    color                : #fff;
    font-weight          : bold;
    cursor               : pointer;
    -webkit-transition   : background 0.3s;
    transition           : background 0.3s;
    width                : 450px;
    max-width            : 100%;
    -webkit-appearance   : 5px;
    -webkit-border-radius: 5px;
}

.span-input-roulette {
    position  : relative;
    display   : block;
    margin-top: 20px;
    width     : 100%;
    max-width : 450px;
}

.span-input-roulette {
    position  : relative;
    display   : block;
    margin-top: 20px;
    width     : 100%;
    max-width : 450px;
}

.input-roulette {
    padding-left      : 5px;
    height            : 42px;
    margin-bottom     : 10px;
    width             : 100%;
    border            : 2px solid grey;
    border-radius     : 5px;
    max-width         : 450px;
    -webkit-box-sizing: border-box;
    box-sizing        : border-box;
}

.span-input-roulette:before {
    display    : inline-block;
    color      : #333;
    line-height: 47px;
    position   : absolute;
    top        : -35px;
    font-size  : 95%;
    left       : 5px;
}

.priceс {
    position          : absolute;
    font-family       : 'Arial', sans-serif;
    right             : 0;
    bottom            : 0;
    color             : #000;
    -webkit-box-shadow: rgb(0 0 0 / 80%) 0px 3px 30px;
    box-shadow        : rgb(0 0 0 / 80%) 0px 3px 30px;
    width             : 165px;
    height            : 98px;
    text-align        : center !important;
    font-size         : 19px;
    font-weight       : bold;
    line-height       : 1.3;
    -webkit-transform : rotateZ(-7deg);
    transform         : rotateZ(-7deg);
    margin            : -0px auto 0px;
    background        : -webkit-gradient(linear, left top, right top, from(rgb(238, 165, 19)), to(rgb(253, 237, 19)));
    background        : linear-gradient(to right, rgb(238, 165, 19) 0%, rgb(253, 237, 19) 100%);
    border-width      : 2px;
    border-style      : solid;
    border-color      : rgb(255, 255, 255);
    -o-border-image   : initial;
    border-image      : initial;
    border-radius     : 19%;

    padding: 5px;
}

.price_main {
    border-bottom: 2px solid #d31812;
    font-size    : 24px;
    line-height  : 0px;
    margin       : 0 auto;
}

span.discountс {
    display   : block;
    margin-top: 6px;
    font-size : 15px;
}

.js_old_price {
    display: block;
    margin : 0 auto;
}

.price_main {
    border-bottom: 2px solid #d31812;
    font-size    : 24px;
    line-height  : 0px;
    margin       : 0 auto;
}

.ft {
    font-size: 12px;
}

@media (max-width: 425px) {
    .prod_img {
        width: 80%;
    }

    .span-input-roulette {
        margin: 0;
    }
}

/* Контейнер для управления адаптивностью */
.video-container {
    position   : relative;
    width      : 100%;
    padding-top: 56.25%;
    /* 16      :9 аспектное соотношение */
    overflow   : hidden;
}

/* Само видео делаем адаптивным */
.video-container video {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
}

.ramka {
    position  : relative;
    max-width : 800px;
    margin    : 0 auto;
    transition: all 0.3s ease;
}

.ramka.fullscreen {
    position  : fixed;
    top       : 0;
    left      : 0;
    right     : 0;
    bottom    : 0;
    max-width : none;
    margin    : 0;
    background: rgba(0, 0, 0, 0.95);
    z-index   : 9999;
}

.ramka.fullscreen .video-container {
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    padding-top: 0;
}

.ramka.fullscreen video {
    position  : absolute;
    top       : 50%;
    left      : 50%;
    transform : translate(-50%, -50%);
    width     : 100%;
    height    : 100%;
    object-fit: contain;
}

.video-control-btn {
    position       : absolute;
    top            : 20px;
    right          : 20px;
    background     : rgba(0, 0, 0, 0.5);
    border         : none;
    color          : white;
    width          : 40px;
    height         : 40px;
    border-radius  : 50%;
    cursor         : pointer;
    z-index        : 10000;
    display        : none;
    font-size      : 20px;
    align-items    : center;
    justify-content: center;
    line-height    : 1;
}

.ramka.fullscreen .video-control-btn {
    display: flex;
}

.video-control-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.video-overlay {
    position       : absolute;
    top            : 0;
    left           : 0;
    width          : 100%;
    height         : 100%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    z-index        : 10;
    cursor         : pointer;
}

.overlay-box {
    background-color: rgba(0, 170, 0, 0.9);
    color           : white;
    padding         : 20px 30px;
    border-radius   : 10px;
    text-align      : center;
    font-size       : 18px;
    box-shadow      : 0 4px 10px rgba(0, 0, 0, 0.3);
    max-width       : 90vw;
}

.overlay-box img {
    width : 40px;
    height: 40px;
    margin: 10px auto;
}

@keyframes fadeIn {
    from {
        opacity  : 0;
        transform: translateY(20px);
    }

    to {
        opacity  : 1;
        transform: translateY(0);
    }
}

.order_block {
    display       : none;
    opacity       : 0;
    transform     : translateY(20px);
    transition    : all 0.8s ease;
    pointer-events: none;
}

.order_block.visible {
    display       : block;
    opacity       : 1;
    transform     : translateY(0);
    pointer-events: auto;
}

.fb-comments-item {
    display   : none;
    transform : translateY(20px);
    transition: transform 0.5s ease;
}

.fb-comments-item.visible {
    display    : flex;
    align-items: flex-start;
    gap        : 8px;
    transform  : translateY(0);
}

.fb-comments-item:not(:last-child) {
    margin-bottom: 20px;
}

#exit-fullscreen-btn {
    display: none;
}

/* Когда видео в полноэкранном режиме */
:fullscreen .video-control-btn,
:-webkit-full-screen .video-control-btn,
:-moz-full-screen .video-control-btn,
:-ms-fullscreen .video-control-btn {
    position: fixed;
}

:fullscreen #fullscreen-btn,
:-webkit-full-screen #fullscreen-btn,
:-moz-full-screen #fullscreen-btn,
:-ms-fullscreen #fullscreen-btn {
    display: none;
}

:fullscreen #exit-fullscreen-btn,
:-webkit-full-screen #exit-fullscreen-btn,
:-moz-full-screen #exit-fullscreen-btn,
:-ms-fullscreen #exit-fullscreen-btn {
    display: flex;
}

/* Кнопка выхода видна только в полноэкранном режиме */
.ramka.fullscreen .exit-btn {
    display: flex;
}

/* Кнопка входа в полноэкранный режим видна только в обычном режиме */
.ramka:not(.fullscreen) .fullscreen-btn {
    display: flex;
}

/* Позиционируем кнопку входа в полноэкранный режим */
.fullscreen-btn {
    top   : auto;
    bottom: 20px;
    right : 20px;
}

/* Меняем символ кнопки в полноэкранном режиме */
.ramka.fullscreen .fullscreen-btn::before {
    content: '✕';
}

.ramka:not(.fullscreen) .fullscreen-btn::before {
    content: '⛶';
}

/* Позиционируем кнопку воспроизведения/паузы */
.play-pause-btn {
    top                : auto;
    bottom             : 20px;
    left               : 20px;
    right              : auto;
    background         : rgba(255, 255, 255, 0.3);
    width              : 40px;
    height             : 40px;
    line-height        : 1;
    background-image   : url('./images/play.png');
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : contain;
}

.play-pause-btn.pause {
    background-image: url('./images/stop.png');
}

.play-pause-btn:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

/* Показываем кнопку воспроизведения всегда при запущенном видео */
.ramka .play-pause-btn {
    display: none;
}

.ramka.fullscreen .play-pause-btn,
.video-started .play-pause-btn {
    display: flex !important;
}

/* Показываем тестовые кнопки всегда */
.test-btn,
.test-form-btn {
    display: flex !important;
}

/* Тестовая кнопка для разработки */
.test-btn {
    left      : 20px;
    right     : auto;
    top       : 20px;
    background: rgba(255, 165, 0, 0.5);
}

.test-btn:hover {
    background: rgba(255, 165, 0, 0.8);
}

/* Кнопка перемотки на 17:25 */
.test-form-btn {
    left      : 70px;
    right     : auto;
    top       : 20px;
    background: rgba(0, 128, 255, 0.5);
}

.test-form-btn:hover {
    background: rgba(0, 128, 255, 0.8);
}

/* Кнопка воспроизведения/паузы */
.play-pause-btn:hover {
    background-color: rgba(50, 205, 50, 0.8);
}

/* Скрываем оверлей в полноэкранном режиме */
.ramka.fullscreen .video-overlay {
    display: none !important;
}

/* Показываем оверлей только в обычном режиме */
.video-overlay {
    position       : absolute;
    top            : 0;
    left           : 0;
    width          : 100%;
    height         : 100%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    z-index        : 10;
    cursor         : pointer;
}

.overlay-box {
    background-color: rgba(0, 170, 0, 0.9);
    color           : white;
    padding         : 20px 30px;
    border-radius   : 10px;
    text-align      : center;
    font-size       : 18px;
    box-shadow      : 0 4px 10px rgba(0, 0, 0, 0.3);
    max-width       : 90vw;
}

/* Скрываем оверлей навсегда после первого скрытия */
.video-overlay.overlay-hidden {
    display: none !important;
}