@font-face {
    font-family: 'YS Text';
    src: url('/static/fonts/YS Text-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'YS Text';
    src: url('/static/fonts/YS Text-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'YS Text';
    src: url('/static/fonts/YS Text-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'YS Text';
    src: url('/static/fonts/YS Text-Heavy.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'YS Text';
    src: url('/static/fonts/YS Text-Fat.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'YS Text', sans-serif;
    background-color: #00ADFF;
    /* Блокируем выделение текста */
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Дополнительная глобальная блокировка для всех элементов */
* {
    -webkit-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

#app-container, #app, .page {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.page {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Re-apply flex to non-scrolling pages for centering */
.city-page, .final-page {
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}

#app-container {
    /* Убраны max-width и margin для поддержки широких экранов */
    position: relative;
    overflow: hidden;
}

.loader, .error {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 20px;
    color: white;
}

.city-page {
    background-color: #00ADFF;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 12px;
    overflow: hidden;
}

.city-page-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.bg-shape {
    position: absolute;
}

.bg-orange-oval {
    top: -4%;
    right: -31%;
    width: 80%;
    height: auto;
}
.bg-pink-rect {
    bottom: -15%;
    left: -25%;
    width: 90%;
}
.bg-blue-rounds {
    bottom: -15%;
    right: -20%;
    width: 90%;
}

.city-page-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    z-index: 2;
    padding: 10px;
}

.city-page-main {
    padding-top: 10px;
}

.main-content {
    text-align: left;
    margin-bottom: 26px;
    margin-left: 0;
}

.main-content img {
    width: 155px;
    margin-bottom: 35px;
    margin-left: 0;
}

.main-content h1 {
    font-size: 35px;
    font-weight: 900;
    line-height: 1.04;
    margin: 0;
    color: white;
}

.city-page .options {
    margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.options button {
    width: 100%;
    height: 50px;
    background-color: white;
    border: 2px solid transparent;
    border-radius: 10px;
    font-family: 'YS Text', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #00ADFF;
    cursor: pointer;
    transition: transform 0.1s ease-in-out, border-color 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.options button:active {
    transform: scale(0.98);
}

.options button.selected {
    border-color: #FFD933;
}

.footer {
    margin-top: 10px;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.submit-button {
    width: 100%;
    padding: 16px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.city-page .submit-button {
    background-color: white;
    color: #00ADFF;
}

.question-page {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.question-page-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.question-image-container {
    width: 100%;
    height: 40vh;
}

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

.q-page-1 .question-image {
    /* Подвинул фото вниз */
    object-position: center 25%; /* верхне-центральная часть */
}

/* Восстанавливаем диагональный срез для страниц с вопросами */
.q-page-1 .question-image-container,
.q-page-6 .question-image-container {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 95%);
    height: 48vh;
}

.q-page-3 .question-image-container {
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0 88%);
     height: 35vh;
}

.q-page-2 .question-image-container,
.q-page-4 .question-image-container,
.q-page-5 .question-image-container {
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}

.question-content-container {
    box-sizing: border-box;
    padding: 20px;
    background-color: #00ADFF;
    color: white;
    width: 100%;
    position: relative;
    padding-top: 8px;
    margin-top: 0;
}

.question-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.small-logo {
    width: 32px;
    height: 32px;
}

.progress {
    font-size: 22px;
    font-weight: 500;
}

.question {
    font-family: 'YS Text';
    font-style: normal;
    font-weight: 900;
    font-size: 35px;
    line-height: 1.04;
    letter-spacing: -0.01em;
    font-feature-settings: 'pnum' on, 'lnum' on;
    margin: 0 0 15px 0;
}

.question-page .options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 15px;
}

.option-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.04;
    letter-spacing: -0.01em;
    font-feature-settings: 'pnum' on, 'lnum' on;
}

.option-label input[type="radio"] {
    display: none;
}

.custom-checkbox {
    width: 20px;
    height: 20px;
    border: 1px solid white;
    border-radius: 5px;
    box-shadow: 2px 2px 0.6px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.option-label input[type="radio"]:checked + .custom-checkbox {
    background-color: white;
}

.option-label input[type="radio"]:checked + .custom-checkbox::after {
    content: '✔';
    color: #00ADFF;
    font-size: 14px;
    font-weight: bold;
}

.result-page .result-title {
    font-size: 28px;
    font-weight: bold;
}

.final-page h1 {
    font-size: 24px;
}

.promo-copied {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0,0,0,0.8);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    z-index: 1000;
    animation: fadeinout 2s;
}

@keyframes fadeinout {
    0% { opacity: 0; bottom: 0px; }
    25% { opacity: 1; bottom: 30px; }
    75% { opacity: 1; bottom: 30px; }
    100% { opacity: 0; bottom: 0px; }
}

.submit-button.hidden {
    display: none;
}

.question-page .footer {
    margin-top: 30px;
    width: 100%;
}

.result-logo {
    width: 155px;
    height: auto;
    max-width: 38vw; /* адаптивное ограничение для узких экранов */
    overflow: visible;
}

/* Дополнительная коррекция для очень узких экранов */
@media (max-width: 360px) {
  .result-logo {
    width: 120px;
  }
}

.result-content {
    padding: 24px 12px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-top: -14px;
}

.result-page.fruit .result-content{
    margin-top:-40px;
}
.result-page.icecream .result-content{
    margin-top: 26vh;
}
.result-page.limonade .result-content{
    margin-top: 12vh;
}
.result-page.berry .result-content{
    margin-top: 14vh;
}

.legal-age {
    font-family: "YS Text", sans-serif;
    font-weight: 400;
    font-size: 10px;
    margin-bottom: 2px;
    opacity: 0.9;
}

.promo-button {
    background-color: #FFFFFF;
    color: #000000;
    border: none;
    border-radius: 12px;
    height: 56px;
    padding: 0 16px; /* Немного уменьшил паддинг */
    display: flex;
    align-items: center;
    justify-content: center; /* изменено для центрирования промокода */
    cursor: pointer;
    box-sizing: border-box;
    font-size: 24px; /* Уменьшил шрифт для длинных промокодов */
    font-weight: 700;
    flex-grow: 1; /* Позволяем кнопке расти */
    min-width: 0; /* Для корректной работы flex */
}

.promo-copy-icon {
    font-size: 32px;
    font-weight: 700;
}

/* promo-info gap above button */
.promo-info {
    margin-bottom: 12px;
    font-size: 10px;
    color: #FFFFFF;
    opacity: 0.9;
}

/* legal text layout & color */
.legal-text {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    font-size: 6px;
    line-height: 1.15;
    color: #FFFFFF; /* белый текст */
    opacity: 0.7; /* делаем текст более прозрачным */
}

/* цвет кода промо зависит от темы */
.promo-code.blue {
    color: #00ADFF;
}
.promo-code.darkblue {
    color: #3557CC;
}

.legal-age {
    display: inline-block;
    margin-right: 4px;
    margin-bottom: 0;
    font-size: 21px; /* Размер в три строки legal-text */
    line-height: 0.8; /* Подгоняем высоту строки для лучшего выравнивания */
}

/* основной большой кадр по центру */
.limonade-1 {
    width: 78%;
    max-width: 300px;
    top: 8%;
    right: -5%;
    transform: rotate(-18deg);
}
.limonade-2 {
    width: 56%;
    max-width: 210px;
    top: 9%;
    left: -1%;
    transform: rotate(12deg);
}
.icecream-1 {
    width: 65%;
    max-width: 260px;
    top: 22%;
    right: -4%;
    transform: rotate(-12deg);
}
.icecream-2 {
    width: 44%;
    max-width: 170px;
    top: 16%;
    left: -4%;
    transform: rotate(18deg);
}
/* Ягода — делаем фото больше */
.yagoda-1 {
    width: 98%;
    max-width: 370px;
    left: 50%;
    top: -30%;
    transform: translateX(-50%) rotate(6deg);
}
.fruit-1 {
    width: 82%;
    max-width: 330px;
    left: 55%;
    top: -10%;
    transform: translateX(-50%) rotate(-14deg);
}

/* более высокий срез для berry и fruit */
.result-page.berry .result-image-area,
.result-page.fruit .result-image-area {
    height: 35vh;
}

.promo-container{
    display: flex;
    align-items: center;
    gap: 8px;
}
.arrow-button{
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 12px;
    background-color: #FFFFFF;
    line-height:1;
    font-size: 28px;
    font-weight: 700;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink: 0; /* Запрещаем кнопке сжиматься */
}
.arrow-button.blue{color:#00ADFF;}
.arrow-button.darkblue{color:#3557CC;}

/* ---------------- Result & Final pages (restored) ---------------- */
.result-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
    color: #FFFFFF;
}

.result-image-area {
    height: 40vh; /* 40% of viewport */
    position: relative;
    width: 100%;
    flex-shrink: 0;
    overflow: visible; /* allow images to extend */
}

.result-images {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.result-image {
    position: absolute;
    z-index: 3;
}

/* Submit button on question pages */
.question-page .submit-button {
    background-color: #FFFFFF;
    color: #00ADFF;
}

.submit-button:disabled {
    background-color: #e0e0e0;
    color: #a0a0a0;
    cursor: not-allowed;
}

/* --- Final page styles --- */
.final-page {
    background-color: #00ADFF;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 20px 20px; /* +40 px сверху, сдвигаем всё вниз */
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
}

.final-page-bg {
    position: absolute;
    top: 40px; /* сдвигаем диагональ и паттерн вниз */
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    clip-path: polygon(0 60%, 100% 65%, 100% 100%, 0 100%);

    /* единый SVG-паттерн + оранжевая подложка под овалы */
    background-image: url('/static/images/final_page/final_pattern.svg');
    background-color: #FF8204;
    /* возвращаем обычный масштаб и смещаем чуть ниже */
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center -278px;
}

/* лёгкий наклон паттернов под угол диагонали */
.final-page .bg-shape {
    transform: rotate(-8deg);
}

.final-page .bg-orange-oval {
    bottom: -10%;
    left: -15%;
    width: 120%;
    background-color: #FF8204;
}

.final-page .bg-blue-rounds {
    top: -5%;
    right: -15%;
    width: 120%;
    background-color: #A3E8FE;
}

.final-page .bg-pink-rect {
    bottom: -20%;
    left: -30%;
    width: 140%;
    background-color: #EAA0C6;
}

.final-page-content {
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* выравнивание по левому краю */
    text-align: left;
    color: white;
    max-width: 100%;
}

.final-logo {
    width: 155px;
    margin-bottom: 24px;
    margin-top: -10px; /* Поднимаем логотип */
}

.final-title {
    font-size: 32px;
    font-weight: 900;
    line-height: 1.05;
    margin: 0 0 16px 0;
}

.final-text {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.15;
    margin: 0 0 24px 0;
    max-width: 320px;
}

.channel-button {
    width: 100%;
    max-width: 340px;
    padding: 16px;
    background-color: #FFFFFF;
    color: #00ADFF;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.channel-button:active {
    transform: scale(0.98);
}

.promo-container {
    margin-bottom: 8px;
}

/* clip-path helper (already in pattern) ensure present */
.clip-path-up {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 30px));
}
.clip-path-down {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%);
}

/* Диагональный срез на контейнере */
.result-image-area.clip-up {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 30px));
}

.result-image-area.clip-down {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 45px), 0 100%);
}

/* Уменьшаем угол среза для страницы "Ягода" */
.result-page.berry .result-image-area.clip-down,
.result-page.berry .result-pattern.clip-down {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), 0 100%);
}

.result-image-area {
    overflow: visible;
    background-size: cover;
    background-position: top center;
    position: relative;
}

.result-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    z-index: 0;
}

/* Диагональные срезы */
.result-pattern.clip-up {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 30px));
}

.result-pattern.clip-down {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 45px), 0 100%);
}

.result-page.icecream .result-pattern {
    background-position: center 130%;
}

.result-images { position: relative; z-index: 1; }

.result-image { box-shadow:none !important; }

.result-header.layout-side {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
    z-index: 5;
    overflow: visible;
    margin-bottom: 20px;
}
.result-header.layout-side .result-title {
    margin: 0;
    text-align: left;
    flex-grow: 1;
}

/* При повторном прохождении теста делаем кнопку 'Далее' голубой */
.submit-button.blue {
    background-color: #FFFFFF;
    color: #00ADFF;
}

.result-title {
    font-family: 'YS Text';
    font-style: normal;
    font-size: 28px;
    font-weight: 900 !important; /* Гарантируем максимальную жирность */
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-feature-settings: 'pnum' on, 'lnum' on;
    margin-bottom: 20px; /* Увеличил отступ */
    width: 100%;
}
.result-text {
    font-size: 15px; /* чуть меньше */
    font-weight: 500;
    line-height: 1.1; /* 110% */
    margin-bottom: 20px;
    text-align: left;
    width: 78%; /* 25% отступ справа */
}

.q-page-3 .question-image {
    object-position: center 65%;
}

.result-header {
    position: relative;
    z-index: 6; /* выше, чем .result-image (3) и .result-pattern (0) */
    overflow: visible;
}

.result-page.icecream .result-header {
    transform: translateY(4vh); /* опускаем заголовок на 4% высоты вьюпорта */
}

/* Опускаем логотипы на страницах Мороженое и Ягода */
.result-page.icecream .result-logo,
.result-page.berry .result-logo {
    transform: translateY(2vh);
}

/* Смещаем контент на страницах "Ягода" и "Мороженое" вниз на 10px */
.result-page.icecream .result-content,
.result-page.berry .result-content {
    position: relative;
    top: 10px;
}