/* ===========================================================
   MOBILE EXAM
=========================================================== */

@media (max-width:768px){

body{

    padding:0;
    background:transparent;

}

/* ===========================================================
   ОБЩИЙ КОНТЕЙНЕР
=========================================================== */

.exam-wrapper{

    margin:0;

    padding:0;

    background:none;

    border:0;

    border-radius:0;

    box-shadow:none;

    max-width:100%;

}

/* ===========================================================
   ШАПКА БИЛЕТА
=========================================================== */

.ticket-header{

    display:block;

    background:#2458a6;

    color:#fff;

    padding:10px;

    border-radius:8px;

}

.ticket-title{

    font-size:18px;

    margin-bottom:6px;

}

.ticket-topic{

    text-align:left;

    font-size:16px;

    font-weight:600;

}

/* ===========================================================
   МЕНЮ ВОПРОСОВ
=========================================================== */

.question-menu{

    display:flex;

    overflow-x:auto;

    gap:8px;

    padding:10px 0 14px;

    white-space:nowrap;

    scrollbar-width:none;

}

.question-menu::-webkit-scrollbar{

    display:none;

}

.question-menu a{

    flex:0 0 34px;

    width:32px;

    height:34px;

    line-height:32px;

    margin:0;

    border-radius:8px;

    font-size:16px;

}

/* ===========================================================
   ВОПРОС
=========================================================== */

.question-text{

    font-size:16px;

    line-height:1.45;

    font-weight:300;

    margin:10px 0;

}

/* ===========================================================
   КАРТИНКА
=========================================================== */

.question-image{

    margin:20px 0;

}

.question-image img{

    border-radius:10px;

}

/* ===========================================================
   ОТВЕТЫ
=========================================================== */

.answers{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.answer{

    border:1px solid #d7d7d7;

    border-radius:10px;

    padding:10px;

    font-size:16px;

    line-height:1.45;

    background:#fff;

    transition:.15s;

}

.answer:hover{

    background:#eef5ff;

}

.answer.selected{

    border-color:#2d7ef7;

    background:#dfeeff;

}

/* ===========================================================
   РЕЗУЛЬТАТ
=========================================================== */

.result-box{

    margin-top:10px;

    border-radius:12px;

    padding:10px;

}

.result-title{

    font-size:20px;

}

.result-rule{

    font-size:14px;

    line-height:1.5;

}

/* ===========================================================
   КНОПКИ
=========================================================== */

.bottom-nav{

    display:flex;

    gap:12px;

    margin-top:30px;

}

.bottom-nav>*{

    flex:1;

}

.nav-button{

    display:flex;

    justify-content:center;

    align-items:center;

    height:48px;

    border-radius:10px;

    font-size:17px;

    font-weight:bold;

}

/* ===========================================================
   МОДАЛЬНОЕ ОКНО
=========================================================== */

.rule-dialog{

    position:relative;

    width:100%;

    max-width:100%;

    max-height:95dvh;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border-radius:12px;

    padding:18px;

    box-sizing:border-box;

}
.rule-scroll{

    flex:1;

    overflow-y:auto;

    overflow-x:hidden;

    -webkit-overflow-scrolling:touch;

    padding-right:4px;
    padding-top:20px;

}
.rule-window h2{

    font-size:22px;

}

.rule-text{

    font-size:17px;

    line-height:1.6;

}
.rule-close{

    position:absolute;

    top:12px;

    right:12px;

    width:40px;

    height:40px;

    line-height:40px;

    padding:0;

    border:none;

    border-radius:50%;

    background:#ffffff;

    color:#444;

    font-size:28px;

    cursor:pointer;

    z-index:9999;

    box-shadow:0 2px 8px rgba(0,0,0,.18);

}
.rule-close:active{

    transform:scale(.95);

}

}