/* Базовые стили пейвола */
.paywall_menu {
    background-size: 101%;
    background-image: url("../../static/images/sprite/Intro.webp");
    /* padding: 4vh 8vh 3vh; */
    overflow-y: auto;
}

/* В неактивном состоянии пейвол всегда скрыт,
 * даже несмотря на общий класс .full-window */
.paywall_menu:not(.active) {
    display: none !important;
}

/* Активный пейвол показываем поверх игры */
.paywall_menu.active {
    display: block !important;
}

/* Верхняя промо секция */
.paywall_promo_section {
    margin-bottom: 4vh;
}

.paywall_promo_card {
    background-color: #474757;
    border-radius: 1.5vh;
    overflow: hidden;
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
    display: flex;
    max-width: 154vh;
    min-height: 39vh;
    margin: auto;
    margin-top: 7vh;
}

.promo_content {
    flex: 1;
    padding: 4vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    max-width: 62vh;
}

.promo_description {
    width: 64vh;
    margin-bottom: 3vh;
    font-size: 2.25vh;
}

.promo_features {
   width:55vh;
   margin-top: 2vh;
}

.promo_feature {
    width:55vh;
    margin: 1vh 0vh;
    font-size: 2.25vh;
}

.promo_header {
    display: flex;
    align-items: center;
    gap: 2vh;
    margin-bottom: 2vh;
}

.promo_badge {
    border-radius: 5vh;
    padding: 1vh;
    width: 12vh;
    display: flex;
    gap: 1vh;
    background-color: #ff6aff;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 2.2vh;
}

.promo_title {
    font-size: 3.2vh;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}

.promo_button {
    background: linear-gradient(257deg, #ae82ff 24%, #b78bff 100%);
    color: white;
    padding: 1.5vh 3vh;
    border-radius: 1vh;
    font-size: 2.4vh;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    cursor: pointer;
    transition: transform 0.2s;
    box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
}

.promo_button:hover {
    transform: scale(1.05);
}

.promo_image {
    flex: 1;
    position: relative;
    overflow: hidden;
}


.promo_image {
  width: 100%;
  height: 48vh;
  /* margin-top: 1.5vh; */
  /* margin-bottom: 2.5vh; */
  /* max-width: 78vh; */
  width: 82vh;
}

/* Карусель глав */
.chapters_carousel {
    width: 153vh;
    margin: auto;
    margin-top: 6vh;
}

.chapter_selector_header {
    width: 31vh;
    height: 6vh;
    border-radius: 1vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vh;
    color: white;
    font-size: 2.5vh;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1vh;
    background-color: #474757;
    margin: auto;
    margin-bottom: 3vh;
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

.chapter_selector_header svg {
    width: 2vh;
    height: 2vh;
}

.chapters_container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3vh;
}

.chapter_card {
    background-color: #474757;
    border-radius: 1.5vh;
    overflow: hidden;
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s;
    cursor: pointer;
    max-width: 75vh;
    display: flex;
}

.chapter_card:hover {
    transform: translateY(-1vh);
}

.chapter_video_container {
    /* width: 100%; */
    width: 35vh;
    height: 25vh;
    /* overflow: hidden; */
    position: relative;
}

.chapter_video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chapter_info {
    padding: 2.5vh 3vh 3vh;
    color: white;
    max-width: 30vh;
}

.chapter_title {
    font-size: 2.8vh;
    font-weight: 800;
    width: 30vh;
    margin-bottom: 1.5vh;
}

.chapter_description {
    font-size: 1.8vh;
    color: #e0e0e0;
    margin-bottom: 2.5vh;
    line-height: 1.5;
    width: 30vh;
}

.chapter_button {
    background: linear-gradient(257deg, #ae82ff 24%, #b78bff 100%);
    color: white;
    padding: 1.5vh 3vh;
    border-radius: 1vh;
    font-size: 2vh;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
    border: none;
    outline: none;
    box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
}

.chapter_button:hover {
    transform: scale(1.05);
}

/* Старые стили (оставлены для совместимости) */
.main_paywall_block {
    color: white;
    background-color: #474757;
    margin: 2vh 3vh;
    height: 75vh;
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

.paywall_header {
    font-weight: 700;
    font-size: 2.4vh;
    width: 50vh;
    line-height: 4vh;
}

.pink_text {color: #ff6aff;}

.paywall_list {margin: 0;text-indent: 0;list-style-type: none;padding: 0;margin-bottom: 3vh;margin-top: 2vh;}

.paywall_item {margin: 1.2vh 0vh;font-size: 2vh;font-weight: 600;margin-top: 2.5vh;width: 57vh;line-height: 3.5vh;}

.paywall_bottom_text {
    font-weight: 700;
    font-size: 2.4vh;
}

.buttons_paywall {display: flex;}

#log_in_paywall {text-decoration: none;margin-right:2vh;background: linear-gradient(257deg, #ae82ff 24%, #b78bff 100%);box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);border-radius: 1vh;outline: none;border: none;font-family: 'Avenir Next';font-style: normal;font-weight: 700;font-size: 2vh;margin-top: 2.5vh;color: #ffffff;width: 12vh;height: 5.6vh;display: flex;cursor:pointer;justify-content: center;align-items: center;}

.patreon_paywall  {width: 22vh;box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);height: 5vh;cursor: pointer;background-position: center;background-size: 92%;border-radius: 0.8vh;margin-top: 2vh;background-image: url(../../static/images/become_a_patron_button.png);}

.main_paywall_image {
    width: 62.5vh;
    height: 35vh;
    object-fit: cover;
}

.paywall_main {position: absolute;display: flex;left: 22vh;top: 15vh;}

.paywall_container {
    margin: 2.2vh 2vh 0  3.5vh;
}

.logline {
    width: 55vh;
    line-height: 3.6vh;
    font-weight: 600;
    font-size: 2vh;
    margin-top: 1.5vh;
}

#play_game_old {
    text-decoration: none;
    margin-right:2vh;
    background: linear-gradient(257deg, #ae82ff 24%, #b78bff 100%);
    box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
    border-radius: 1vh;
    outline: none;
    border: none;
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 700;
    font-size: 2vh;
    margin-top: 8.2vh;
    color: #ffffff;
    width: 26vh;
    height: 5.6vh;
    display: flex;
    cursor:pointer;
    justify-content: center;
    align-items: center;
}

#play_game_new {
    text-decoration: none;
    margin-right:2vh;
    background: linear-gradient(to right, #ff6aff 4%, #FF6B81 100%);
    box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
    border-radius: 1vh;
    outline: none;
    border: none;
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 700;
    font-size: 2vh;
    margin-top: 2.5vh;
    color: #ffffff;
    width: 25vh;
    height: 5.6vh;
    display: flex;
    cursor:pointer;
    justify-content: center;
    align-items: center;
}

.choose_version {
    margin: auto;
    background-color: #474757;
    color: white;
    font-size: 3vh;
    padding: 2vh 3vh;
    left: 25vh;
    top: 7vh;
    position: absolute;
    font-weight: 800;
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

#play_game_big {
    position:absolute;
    text-decoration: none;
    top: 61vh;
    box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
    border-radius: 0.3vh;
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 600;
    font-size: 5vh;
    margin-top: 1.2vh;
    color: #292929;
    width: 50vh;
    height: 12.6vh;
    left:60vh;
    z-index: 500;
}

#play_game_big {
    background-image: linear-gradient(to right, #FF6B81 0%, #ff6aff  51%, #FF6B81  100%);
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    line-height: 13vh;
    font-weight: 700;
    border-radius: 2vh;
    display: block;
}

#play_game_big:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}

/* Mobile adaptation for landscape orientation */
@media only screen and (max-width: 1024px) and (orientation: landscape) {
    .paywall_menu {
        padding: 0;
        overflow-y: auto;
    }

    /* Промо баннер - вертикальный справа */
    .paywall_promo_section {
        position: absolute;
        /* right: 2vh; */
        /* top: 2vh; */
        left: 88vh;
        /* bottom: 2vh; */
        margin: 0;
        z-index: 100;
    }

    .paywall_promo_card {
        flex-direction: column;
        height: 100vh;
        min-height: unset;
        margin: 0;
        width: 88vh;
        border-radius: 0;
    }

    .promo_content {
        flex: 0 0 auto;
        max-width: 100%;
        padding: 3vh 2.5vh;
        /* order: 1; */
        width: 83vh;
    }

    .promo_header {
        gap: 1.5vh;
        margin-bottom: 1.5vh;
        flex-direction: row;
    }

    .promo_badge {
        width: 18vh;
        padding: 0.8vh;
        gap: 0.8vh;
        font-size: 3vh;
        font-weight: 700;
    }

    .promo_title {
        font-size: 3.5vh;
        line-height: 1.3;
    }

    .promo_description {
        width: 100%;
        font-size: 3vh;
        margin-bottom: 2vh;
        line-height: 1.4;
    }

    .promo_features {
        width: 100%;
        margin-top: 1.5vh;
    }

    .promo_feature {
        width: 100%;
        margin: 0.8vh 0;
        font-size: 3vh;
        line-height: 1.4;
    }

    .promo_button {
        padding: 1.2vh 2.5vh;
        font-size: 3.5vh;
        width: 46vh;
        height: 5vh;
        justify-content: center;
        margin-top: 1vh;
    }

    .promo_image_container {
        flex: 1;
        order: 2;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
    }

    .promo_image {
        width: 92vh;
        height: 49vh;
        /* max-height: 35vh; */
        object-fit: cover;
        object-position: top;
    }

    /* Chapters section - стопкой слева */
    .chapters_carousel {
        margin: 2vh 0 2vh 2vh;
        margin-top: 2vh;
        padding-right: 2vh;
        width: 81vh;
    }

    .chapter_selector_header {
        /* width: 100%; */
        height: 9vh;
        font-size: 3.5vh;
        margin-bottom: 2vh;
        margin-left: 0;
        width: 43vh;
        margin-top: 11vh;
    }

    .chapter_selector_header svg {
        width: 1.8vh;
        height: 1.8vh;
    }

    .chapters_container {
        display: flex;
        flex-direction: column;
        gap: 2vh;
        /* width: 85vh; */
        grid-template-columns: none;
    }

    .chapter_card {
        /* max-width: 100%; */
        width: 89vh;
        min-height: auto;
        max-width: 82vh;
        border-radius: 0;
    }

    .chapter_card:hover {
        transform: translateY(-0.5vh);
    }

    .chapter_video_container {
        order: 2;
    }

    .chapter_video {
        object-fit: cover;
        width: 35vh;
        height: 35vh;
    }

    .chapter_info {
        padding: 2vh 2.5vh;
        max-width: 100%;
        width: 45vh;
        order: 2;
    }

    .chapter_title {
        font-size: 4.5vh;
        width: 43vh;
        margin-bottom: 1.2vh;
    }

    .chapter_description {
        font-size: 3vh;
        width: 100%;
        margin-bottom: 2vh;
        line-height: 1.5;
    }

    .chapter_button {
        padding: 1.2vh 2.5vh;
        font-size: 3.5vh;
        width: 17vh;
    }

    /* Old paywall blocks adjustments */
    .main_paywall_block {
        margin: 2vh 45vh 2vh 2vh;
        height: auto;
        min-height: 50vh;
    }

    .paywall_main {
        position: relative;
        left: 0;
        top: 0;
        flex-direction: column;
    }

    .main_paywall_image {
        width: 100%;
        height: auto;
        max-height: 30vh;
    }

    .paywall_container {
        margin: 2vh 2.5vh;
    }

    .paywall_header {
        font-size: 2.8vh;
        width: 100%;
        line-height: 4vh;
    }

    .logline {
        width: 100%;
        line-height: 3.2vh;
        font-size: 2vh;
    }

    .paywall_item {
        width: 100%;
        font-size: 2vh;
        line-height: 3.2vh;
    }

    .paywall_bottom_text {
        font-size: 2.2vh;
    }

    .buttons_paywall {
        flex-wrap: wrap;
    }

    #log_in_paywall {
        width: 100%;
        margin-right: 0;
        margin-bottom: 1.5vh;
        font-size: 2.2vh;
        height: 5vh;
    }

    .patreon_paywall {
        width: 100%;
        height: 4.5vh;
        margin-top: 0;
    }

    #play_game_old,
    #play_game_new,
    #play_game_new_left,
    #play_game_new_right {
        width: 100%;
        margin-right: 0;
        margin-bottom: 1.5vh;
        font-size: 2.5vh;
        height: 6vh;
    }

    .choose_version {
        position: relative;
        left: 0;
        top: 0;
        font-size: 2.5vh;
        padding: 1.5vh 2.5vh;
        margin-bottom: 2vh;
    }

    #play_game_big {
        position: relative;
        width: 100%;
        left: 0;
        top: 0;
        height: 8vh;
        font-size: 3.5vh;
        line-height: 8vh;
        margin-top: 2vh;
    }
}

/* Mobile adaptation for portrait orientation (phones) */
@media only screen and (max-width: 768px) and (orientation: portrait) {
    .paywall_menu {
        padding: 2vh 1vh;
        overflow-y: auto;
    }

    .paywall_promo_section {
        margin-bottom: 3vh;
    }

    .paywall_promo_card {
        flex-direction: column;
        max-width: 100%;
        min-height: unset;
        margin: 0;
    }

    .promo_content {
        max-width: 100%;
        padding: 3vh 2vh;
        order: 1;
    }

    .promo_header {
        gap: 1.5vh;
        margin-bottom: 1.5vh;
        flex-direction: row;
        align-items: center;
    }

    .promo_badge {
        width: 12vh;
        padding: 0.8vh;
    }

    .promo_title {
        font-size: 3vh;
        line-height: 1.3;
    }

    .promo_description {
        width: 100%;
        font-size: 2.2vh;
        margin-bottom: 2vh;
    }

    .promo_features {
        width: 100%;
        margin-top: 1.5vh;
    }

    .promo_feature {
        width: 100%;
        margin: 1vh 0;
        font-size: 2vh;
    }

    .promo_button {
        padding: 1.5vh 3vh;
        font-size: 2.4vh;
        width: 100%;
        margin-top: 1.5vh;
    }

    .promo_image_container {
        order: 2;
        width: 100%;
    }

    .promo_image {
        width: 100%;
        height: 35vh;
        object-fit: cover;
        object-position: center;
    }

    /* Chapters section - стопкой, на всю ширину */
    .chapters_carousel {
        width: 100%;
        margin: 3vh auto;
    }

    .chapter_selector_header {
        width: 100%;
        max-width: 40vh;
        height: 6vh;
        font-size: 2.5vh;
        margin-bottom: 2.5vh;
    }

    .chapters_container {
        display: flex;
        flex-direction: column;
        gap: 2.5vh;
        grid-template-columns: none;
    }

    .chapter_card {
        max-width: 100%;
        flex-direction: column;
    }

    .chapter_video_container {
        width: 100%;
        height: 30vh;
        order: 2;
    }

    .chapter_info {
        padding: 2.5vh 2vh;
        max-width: 100%;
        order: 1;
    }

    .chapter_title {
        font-size: 3vh;
        width: 100%;
        margin-bottom: 1.5vh;
    }

    .chapter_description {
        font-size: 2vh;
        width: 100%;
        margin-bottom: 2.5vh;
    }

    .chapter_button {
        padding: 1.5vh 3vh;
        font-size: 2.2vh;
        width: 100%;
    }

    /* Old paywall blocks */
    .main_paywall_block {
        margin: 2vh 1vh;
        height: auto;
    }

    .paywall_main {
        position: relative;
        left: 0;
        top: 0;
        flex-direction: column;
    }

    .main_paywall_image {
        width: 100%;
        height: auto;
        max-height: 35vh;
    }

    .paywall_container {
        margin: 2vh;
    }

    .paywall_header {
        font-size: 3vh;
        width: 100%;
        line-height: 4vh;
    }

    .logline {
        width: 100%;
        line-height: 3.5vh;
        font-size: 2.2vh;
    }

    .paywall_list {
        margin-bottom: 2.5vh;
    }

    .paywall_item {
        width: 100%;
        font-size: 2.2vh;
        line-height: 3.5vh;
    }

    .paywall_bottom_text {
        font-size: 2.5vh;
    }

    .buttons_paywall {
        flex-direction: column;
    }

    #log_in_paywall {
        width: 100%;
        margin-right: 0;
        margin-bottom: 2vh;
        font-size: 2.5vh;
        height: 6vh;
    }

    .patreon_paywall {
        width: 100%;
        height: 5vh;
        margin-top: 0;
        margin-left: 0;
    }

    #play_game_old,
    #play_game_new,
    #play_game_new_left,
    #play_game_new_right {
        width: 100%;
        margin-right: 0;
        margin-bottom: 2vh;
        font-size: 3vh;
        height: 7vh;
    }

    .choose_version {
        position: relative;
        left: 0;
        top: 0;
        font-size: 3vh;
        padding: 2vh 3vh;
        margin-bottom: 2vh;
    }

    #play_game_big {
        position: relative;
        width: 100%;
        left: 0;
        top: 0;
        height: 9vh;
        font-size: 4vh;
        line-height: 9vh;
        margin-top: 2vh;
    }
}