/* Общие стили квиза */
#smq-app {
    font-family: sans-serif;
    text-align: center;
    box-sizing: border-box;
    padding: 40px 0px;
    padding-top: 60px;
}
#smq-slider { min-height: 400px; }

#smq-app { position: relative; }

    /* Верхняя панель: кнопка "Назад" + прогресс */
    .smq-top-bar {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 20px;
        min-height: 40px;
    }

    #smq-back-btn {
		background: transparent;
		border: 0;
		cursor: pointer;
		padding: 0;
		border-radius: 6px;
		transition: 0.2s;
		flex-shrink: 0;
		font-weight: 500;
		color: #000;
		font-size: 16px;
		margin: 0;
		margin-bottom: 5px;
		font-family: "TildaSansR", sans-serif;
		max-width: 500px;
	}
    #smq-back-btn:hover { color: #4078a3;}

    /* Прогресс-бар */
    #smq-progress-wrap {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .smq-progress-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
        color: #666;
    }
    .smq-progress-percent {
		color: #4078a3;
		font-family: "TildaSansB", sans-serif;
	}
    .smq-progress-bar {
        width: 100%;
        height: 8px;
        background: #eee;
        border-radius: 4px;
        overflow: hidden;
    }
    .smq-progress-fill {
		height: 100%;
		background: linear-gradient(90deg, #4078a3 0%, #53a8e9 100%);
		border-radius: 4px;
		transition: width 0.4s ease;
	}

    /* Заголовок вопроса */
    .smq-question-head-text { flex: 1; }
    .smq-question-icon-box { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 28px; background: #f5f3ff; border-radius: 10px; }
    .smq-question-icon-box img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
    .smq-question-subtitle { font-size: 15px; color: #666; margin: 8px 0 0; font-weight: normal; }

/* Анимация появления слайдов */
.smq-screen { display: none; animation: fadeIn 0.4s; }
.smq-screen.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Первый экран (Лендинг) */
.smq-landing {
    padding: 40px 40px;
    background: #fff;
    border: 1px solid rgb(64 120 163 / 15%);
    border-radius: 15px;
    text-align: left;
    position: relative;
    overflow: hidden;
}
.smq-landing * {
    z-index: 1;
    position: relative;
}
.smq-landing:after {
    width: 800px;
    height: 800px;
    position: absolute;
    top: -300px;
    border-radius: 100%;
    border: 80px solid #ebf3f9;
    left: -300px;
    z-index: 0;
    content: '';
}
button#smq-go-start {
    max-width: 300px;
    margin: 30px 0;
}

h3.smq-question-title {
    color: #163954;
    font-size: 30px;
    font-weight: 500;
    font-family: "Prata", sans-serif;
    margin: 0 auto;
    margin-bottom: 5px;
}

.smq-screen-cont {
    padding: 40px 40px;
    background: #fff;
    border: 1px solid rgb(64 120 163 / 15%);
    border-radius: 15px;
    text-align: left;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

h3.smq-form-title.mt0 {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

.smq-result p {
    margin-bottom: 30px;
}

.smq-screen-cont * {
    z-index: 1;
}

.smq-screen-cont:after {
    width: 800px;
    height: 800px;
    position: absolute;
    top: -300px;
    border-radius: 100%;
    border: 80px solid #ebf3f9;
    right: -300px;
    z-index: 0;
    content: '';
}

.smq-landing p {
    margin-bottom: 15px;
}

.smq-landing h1 { font-size: 30px; margin-bottom: 20px; }
.smq-start-btn { background: #7c5cfc; color: #fff; border: none; padding: 20px 40px; font-size: 18px; cursor: pointer; border-radius: 8px; margin-top: 20px; font-weight: bold; transition: 0.3s; }
.smq-start-btn:hover { background: #6a4be0; }
.smq-btn-subtext { font-size: 14px; color: #999; margin-top: 10px; }
.smq-bonus {
    margin-top: 30px;
    font-size: 14px;
    font-weight: bold;
    border-top: 1px solid #eee;
    padding-top: 30px;
    font-family: TildaSansB, sans-serif;
}

/* Заголовки вопросов и веток */
.smq-branch-title { font-size: 24px; color: #7c5cfc; margin-bottom: 20px; font-weight: bold; }
.smq-question-title { font-size: 20px; margin-bottom: 20px; }

/* Варианты ответов (Кнопки) */
.smq-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    margin-bottom: 0px;
    border: 1px solid rgb(64 120 163 / 14%);
    background: #fff;
    cursor: pointer;
    border-radius: 8px;
    font-size: 16px;
    transition: 0.2s;
    box-sizing: border-box;
}
.smq-option:hover { border-color: #7c5cfc; background: #f9f7ff; }
.smq-option-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    padding: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border-radius: 100%;
    background: rgb(65 123 168 / 15%);
}
span.smq-option-text {
    color: #000 !important;
    font-size: 16px;
    margin: 0;
    margin-bottom: 0;
    font-family: "TildaSansR", sans-serif;
}
.smq-option-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.smq-option-text { flex: 1; }
.smq-option-arrow { flex-shrink: 0; color: #aaa; }

/* Результат */
.smq-result ul { list-style: none; padding: 0; text-align: left; display: inline-block; }

/* Форма захвата */
.smq-form-wrapper { padding: 20px 0; }
.smq-form-title { font-size: 24px; margin-bottom: 10px; }
.smq-form-subtitle { font-size: 16px; color: #666; margin-bottom: 20px; }
.smq-input { width: 100%; padding: 12px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; text-align: center; font-size: 16px; }
.smq-btn { background: #7c5cfc; color: #fff; border: none; padding: 15px 30px; border-radius: 8px; cursor: pointer; font-size: 16px; margin-top: 15px; width: 100%; }


/* Экран результата */
.smq-result {
    text-align: left;
    padding: 25px;
    background: #fff;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid rgb(64 120 163 / 24%);
}
.smq-result-branch {
    text-transform: uppercase;
    color: #163954;
    font-size: 24px;
    font-weight: 500;
    font-family: "Prata", sans-serif;
    margin: 0 auto;
    margin-bottom: 5px;
}
.smq-result-code {
    color: #333;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 500;
    font-family: "Prata", sans-serif;
    margin: 0 auto;
    margin-bottom: 5px;
}
.smq-result-title {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 500;
    font-family: "Prata", sans-serif;
}
.smq-result h3 {
    text-transform: uppercase;
    color: #163954;
    font-size: 30px;
    font-weight: 500;
    font-family: "Prata", sans-serif;
    margin: 30px 0;
    margin-top: 50px;
}
.smq-result h4 {
    font-size: 15px;
    margin: 30px 0 8px;
    font-family: TildaSansSB, sans-serif;
    color: rgb(64 120 163) !important;
}
.smq-result-cont {
    position: relative;
    z-index: 1;
}
.smq-result-cont:after {
    content: '';
    position: absolute;
    background: rgb(235 243 249);
    top: 0;
    z-index: -1;
    left: -25px;
    right: -25px;
    top: -25px;
    bottom: -25px;
}
.smq-universal-footer p {
    max-width: 100%;
}
button#smq-to-form {
    max-width: 400px;
    margin: 0 auto;
}
.smq-result p { line-height: 1.6; margin-bottom: 10px; color: #444; }

/* Универсальный футер */
.smq-universal-footer {
    margin-top: 25px;
    padding: 20px;
    border-top: 1px solid #eee;
    text-align: center;
    background: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 20px;
	border: 1px solid rgb(64 120 163 / 24%);
}
.smq-universal-footer p {
    color: #666 !important;
    margin-bottom: 25px;
    padding: 0 10px;
}
.smq-universal-footer .smq-btn { background: #00a32a; padding: 16px 32px; font-size: 15px; font-weight: bold; }

/* Заголовок вопроса с иконкой и подзаголовком */
.smq-question-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 40px;
    text-align: left;
}
.smq-question-head-text { flex: 1; }
.smq-question-icon-box { flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 28px; background: #f5f3ff; border-radius: 12px; }
.smq-question-icon-box img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
.smq-question-title { margin: 0; font-size: 20px; }
.smq-question-subtitle { font-size: 15px; color: #666; margin: 6px 0 0; font-weight: normal; }

/* Кнопка "Назад" */

.smq-question-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

@media (max-width:1000px) {
.smq-question-grid {
	grid-template-columns: 1fr;
}
}

@media (max-width:500px) {
.smq-screen-cont {
    padding: 40px 20px;
}
}