/* Сторінка результату шаблона templates/online-testing-level.php.
   Окремий файл, а не доповнення quze-testing.css: той обслуговує чинний квіз
   тестування рівня, і його краще не чіпати. Палітра — квізова:
   #F8F7F0 тло, #02021F заголовки, #262961 текст, #8100FF акцент, #f1e9ff підкладка. */

.container-quize .otl-slide .main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 2.5vw, 1.75rem);
    padding: clamp(1.5rem, 4vw, 3rem) 1rem;
    /* Слайди квіза заввишки 100vh: без прокрутки картка результату на невисоких
       екранах обрізалась би знизу разом із кнопкою */
    overflow-y: auto;
}

/* Усі кнопки сторінки — з тим самим заокругленням, що й блоки: «Розпочати», «Далі»
   і «Записатися». Базова .btn-main квадратна і спільна для всього сайту, тож радіус
   даємо лише в межах цієї сторінки — цей файл вантажиться тільки під її шаблон. */
.container-quize .btn-main {
    border-radius: 16px;
}

.container-quize .otl-result {
    display: flex;
    gap: clamp(1rem, 2vw, 1.5rem);
    width: 100%;
    max-width: 1100px;
}

.container-quize .otl-card {
    flex: 1 1 55%;
    background: #fff;
    border-radius: 24px;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    text-align: left;
}

.container-quize .otl-card__title {
    margin: 0 0 0.75rem;
    color: #02021F;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 900;
    line-height: 1.2;
}

.container-quize .otl-card__means {
    margin: 0 0 1.5rem;
    color: #262961;
    font-size: clamp(14px, 1.4vw, 17px);
    line-height: 1.5;
}

.container-quize .otl-levels {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.container-quize .otl-levels__item[hidden] {
    display: none;
}

.container-quize .otl-levels__label {
    display: block;
    color: #7b61ff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.container-quize .otl-levels__value {
    display: block;
    color: #02021F;
    font-size: clamp(16px, 1.8vw, 20px);
    font-weight: 900;
    text-transform: uppercase;
}

/* --- Діаграма рівнів --- */

.container-quize .otl-chart {
    flex: 1 1 45%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(0.35rem, 1vw, 0.75rem);
    background: #f1e9ff;
    border-radius: 24px;
    padding: clamp(1.25rem, 3vw, 2.25rem) clamp(0.75rem, 2vw, 1.5rem);
    min-height: 260px;
}

.container-quize .otl-chart__col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 0.6rem;
    height: 100%;
}

.container-quize .otl-chart__bar {
    width: 100%;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(180deg, #fff 0%, #e3d8ff 100%);
}

.container-quize .otl-chart__col:nth-child(1) .otl-chart__bar { height: 70px; }
.container-quize .otl-chart__col:nth-child(2) .otl-chart__bar { height: 100px; }
.container-quize .otl-chart__col:nth-child(3) .otl-chart__bar { height: 130px; }
.container-quize .otl-chart__col:nth-child(4) .otl-chart__bar { height: 160px; }
.container-quize .otl-chart__col:nth-child(5) .otl-chart__bar { height: 190px; }
.container-quize .otl-chart__col:nth-child(6) .otl-chart__bar { height: 220px; }

.container-quize .otl-chart__col.is-active .otl-chart__bar {
    background: linear-gradient(180deg, #A98EF7 0%, #8100FF 100%);
}

.container-quize .otl-chart__label {
    color: #262961;
    font-size: 13px;
    font-weight: 700;
}

.container-quize .otl-chart__col.is-active .otl-chart__label {
    color: #8100FF;
}

/* --- Порада --- */

.container-quize .otl-tip {
    width: 100%;
    max-width: 1100px;
    background: #fff;
    border-left: 4px solid #8100FF;
    border-radius: 16px;
    padding: clamp(1rem, 2vw, 1.5rem);
    text-align: left;
}

.container-quize .otl-tip__label {
    display: block;
    margin-bottom: 0.35rem;
    color: #8100FF;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.container-quize .otl-tip__text {
    margin: 0;
    color: #262961;
    font-size: clamp(14px, 1.4vw, 17px);
    line-height: 1.5;
}

/* --- Банер пробного уроку (без ілюстрації, за домовленістю) --- */

.container-quize .otl-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1rem, 2vw, 2rem);
    width: 100%;
    max-width: 1100px;
    background: #f1e9ff;
    border-radius: 16px;
    padding: clamp(1rem, 2vw, 1.5rem);
    text-align: left;
}

.container-quize .otl-banner__body {
    flex: 1 1 auto;
}

.container-quize .otl-banner__title {
    margin: 0 0 0.35rem;
    color: #02021F;
    font-size: clamp(15px, 1.6vw, 18px);
    font-weight: 900;
    text-transform: uppercase;
}

.container-quize .otl-banner__text {
    margin: 0;
    color: #262961;
    font-size: clamp(14px, 1.4vw, 16px);
}

/* Кнопка живе всередині банера пробного уроку. min-width перебиваємо свідомо:
   у quze-testing.css .btn-main має 472px, і в банері вона з'їдала б увесь рядок. */
.container-quize .otl-banner .otl-banner__btn {
    flex: 0 0 auto;
    min-width: 0;
    border-radius: 16px;
    padding: 0.9rem 2.25rem;
}

/* --- Попап пробного уроку ---
   Заокруглення тільки тут, за id. Базові .popup-inner і .custom-form .box-form input
   лежать у style.css і обслуговують форми всього сайту — правка там змінила б вигляд
   кожного попапа. Селектори без .container-quize свідомо: попап стоїть поза ним. */

#online-level-trial .popup-inner {
    border-radius: 24px;
}

#online-level-trial .custom-form .box-form input {
    border-radius: 12px;
}

#online-level-trial .btn-submit {
    border-radius: 16px;
}

@media (max-width: 992px) {
    .container-quize .otl-result {
        flex-direction: column;
    }

    .container-quize .otl-chart {
        min-height: 220px;
    }
}

@media (max-width: 576px) {
    .container-quize .otl-slide .main-container {
        justify-content: flex-start;
    }

    .container-quize .otl-banner {
        flex-direction: column;
        align-items: stretch;
    }

    .container-quize .otl-banner .otl-banner__btn {
        width: 100%;
    }

    .container-quize .otl-chart__col:nth-child(1) .otl-chart__bar { height: 50px; }
    .container-quize .otl-chart__col:nth-child(2) .otl-chart__bar { height: 72px; }
    .container-quize .otl-chart__col:nth-child(3) .otl-chart__bar { height: 94px; }
    .container-quize .otl-chart__col:nth-child(4) .otl-chart__bar { height: 116px; }
    .container-quize .otl-chart__col:nth-child(5) .otl-chart__bar { height: 138px; }
    .container-quize .otl-chart__col:nth-child(6) .otl-chart__bar { height: 160px; }
}