/* =====================================================
   KIBERone MAX Mini App
   style.css

   Назначение:
   Основные стили интерфейса Mini App.

   Фирменные цвета:
   - жёлтый      #FDD01B
   - тёмный      #201E21
   - бирюзовый   #05B8BD
   - бордовый    #922520
   - серый       #9C9C9C
   - тёмно-синий #1C566E

   Основная тема приложения — тёмная.
   ===================================================== */


/* =====================================================
   1. ЦВЕТОВАЯ ПАЛИТРА
   ===================================================== */

:root {
    --kiber-yellow: #FDD01B;
    --kiber-yellow-hover: #E8BD00;
    --kiber-dark: #201E21;
    --kiber-cyan: #05B8BD;
    --kiber-burgundy: #922520;
    --kiber-gray: #9C9C9C;
    --kiber-blue-dark: #1C566E;

    --color-white: #FFFFFF;

    --app-background: #201E21;
    --card-background: #2A282B;
    --field-background: rgba(5, 184, 189, 0.12);
    --surface-dark: #302E31;

    --text-primary: #FFFFFF;
    --text-secondary: #9C9C9C;

    --border-light: #343236;

    --shadow-neumorphic:
        8px 8px 16px rgba(0, 0, 0, 0.45),
        -6px -6px 12px rgba(255, 255, 255, 0.035);

    --shadow-inset:
        inset 5px 5px 10px rgba(0, 0, 0, 0.40),
        inset -4px -4px 8px rgba(255, 255, 255, 0.025);

    --shadow-focus:
        inset 3px 3px 7px rgba(0, 0, 0, 0.35),
        inset -3px -3px 6px rgba(255, 255, 255, 0.025),
        0 0 0 0.15rem rgba(5, 184, 189, 0.15);
}


/* =====================================================
   2. БАЗОВЫЕ СТИЛИ И ТИПОГРАФИКА
   ===================================================== */

html,
body {
    background-color: var(--app-background);
}

body {
    margin: 0;
    padding: 0;

    color: var(--text-primary);

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

main.container {
    max-width: 760px;
}

.screen {
    width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    color: var(--color-white);
}

.text-muted {
    color: var(--text-secondary) !important;
}

.lead {
    color: var(--kiber-cyan);
}

.form-label {
    color: var(--color-white);
    font-weight: 500;
}

.form-text {
    color: var(--text-secondary);
}


/* =====================================================
   3. ЭКРАНЫ ПРИЛОЖЕНИЯ
   ===================================================== */

#screen-welcome :is(h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    .form-label,
    .form-check-label),
#screen-contact :is(h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    .form-label,
    .form-check-label) {
    color: var(--color-white) !important;
}

#screen-welcome h1 {
    color: var(--kiber-yellow) !important;
}

#screen-welcome .lead {
    color: var(--kiber-cyan) !important;
}

#screen-contact .lead {
    color: var(--text-secondary) !important;
}

#screen-result :is(h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p) {
    color: var(--color-white);
}

#screen-result .text-muted,
#result-description {
    color: var(--text-secondary) !important;
}

#technical-level {
    color: var(--kiber-yellow) !important;
}

#recommended-direction {
    color: var(--kiber-cyan) !important;
}


/* =====================================================
   4. КАРТОЧКИ
   ===================================================== */

.card {
    background-color: var(--card-background);
    color: var(--text-primary);

    border: 1px solid var(--border-light);
    border-radius: 14px;

    box-shadow: var(--shadow-neumorphic);
}

.card-body {
    color: var(--text-primary);
}

.card :is(p,
    .form-label,
    .form-check-label) {
    color: var(--color-white);
}

.card .text-muted {
    color: var(--text-secondary) !important;
}


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

.btn {
    font-weight: 600;
}

.btn:focus-visible {
    outline: none;
}

.btn-primary {
    background-color: var(--kiber-yellow);
    border: none;

    color: var(--kiber-dark);

    border-radius: 10px;

    box-shadow:
        6px 6px 12px rgba(0, 0, 0, 0.40),
        -4px -4px 8px rgba(255, 255, 255, 0.04);

    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--kiber-yellow-hover);
    color: var(--kiber-dark);

    box-shadow:
        4px 4px 8px rgba(0, 0, 0, 0.40),
        -3px -3px 6px rgba(255, 255, 255, 0.035);
}

.btn-primary:active,
.btn-primary.active {
    background-color: var(--kiber-yellow-hover) !important;
    color: var(--kiber-dark) !important;

    transform: translateY(1px);

    box-shadow: var(--shadow-inset) !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--kiber-cyan);
    border-color: var(--kiber-cyan);

    color: var(--color-white);

    opacity: 0.65;

    box-shadow: none;
}

.btn-secondary {
    background-color: var(--kiber-blue-dark);
    border: 2px solid var(--kiber-blue-dark);

    color: var(--color-white);

    border-radius: 10px;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active {
    background-color: var(--kiber-cyan) !important;
    border-color: var(--kiber-cyan) !important;

    color: var(--color-white) !important;

    box-shadow:
        0 0 0 0.2rem rgba(5, 184, 189, 0.20) !important;
}


/* =====================================================
   6. ПОЛЯ ВВОДА И ВЫБОР ГОРОДА
   ===================================================== */

.form-control,
#location-info {
    background-color: var(--field-background);

    border: 1px solid #3A383B;

    color: var(--color-white);

    border-radius: 10px;

    box-shadow: var(--shadow-inset);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.form-control {
    padding: 0.7rem 0.9rem;
}

#location-info {
    padding: 0.7rem 2.5rem 0.7rem 0.9rem;

    color-scheme: dark;
}

.form-control::placeholder {
    color: var(--text-secondary);
    opacity: 1;
}

.form-control:focus,
#location-info:focus {
    background-color: var(--surface-dark);

    color: var(--color-white);

    border-color: var(--kiber-cyan);

    box-shadow: var(--shadow-focus);
}

#location-info:hover {
    border-color: var(--kiber-cyan);
}

#location-info option {
    background-color: var(--surface-dark);
    color: var(--color-white);
}

#location-info:invalid {
    color: var(--text-secondary);
}

#location-info:valid {
    color: var(--color-white);
}

.form-control.is-invalid,
.form-control:invalid,
#location-info.is-invalid {
    border-color: var(--kiber-burgundy);
}

.form-control.is-invalid:focus,
#location-info.is-invalid:focus {
    border-color: var(--kiber-burgundy);

    box-shadow:
        0 0 0 0.2rem rgba(146, 37, 32, 0.25);
}


/* =====================================================
   7. ПОЛЕ ДАТЫ
   ===================================================== */

input[type="date"] {
    position: relative;

    color: var(--color-white);
    color-scheme: dark;

    padding-right: 3rem;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0;

    width: 2.5rem;
    height: 100%;

    opacity: 0;

    cursor: pointer;
}

input[type="date"]::after {
    content: "";

    position: absolute;
    right: 0.9rem;
    top: 50%;

    width: 18px;
    height: 17px;

    transform: translateY(-50%);

    border: 2px solid var(--color-white);
    border-radius: 3px;

    pointer-events: none;
}

input[type="date"]::before {
    content: "";

    position: absolute;
    right: 0.9rem;
    top: calc(50% - 4px);

    width: 18px;
    height: 2px;

    background-color: var(--color-white);

    pointer-events: none;
}


/* =====================================================
   8. AUTOFILL
   ===================================================== */

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
    -webkit-text-fill-color: var(--color-white);

    -webkit-box-shadow:
        0 0 0 1000px var(--surface-dark) inset;

    box-shadow:
        0 0 0 1000px var(--surface-dark) inset;

    caret-color: var(--color-white);

    border-color: var(--kiber-gray);

    transition:
        background-color 9999s ease-in-out 0s;
}


/* =====================================================
   9. ВОПРОСЫ И ВАРИАНТЫ ОТВЕТОВ
   ===================================================== */

#question-text {
    color: var(--color-white);
}

#question-type {
    color: var(--text-secondary) !important;
}

#question-code {
    background-color: var(--surface-dark) !important;

    border: 1px solid var(--kiber-cyan);

    color: var(--color-white);
}

#answer-list .btn {
    background-color: var(--surface-dark) !important;

    border: 1px solid var(--kiber-cyan) !important;

    color: var(--kiber-cyan) !important;

    border-radius: 10px;

    font-weight: 500;

    padding: 0.75rem 1rem;

    box-shadow:
        6px 6px 12px rgba(0, 0, 0, 0.40),
        -4px -4px 8px rgba(255, 255, 255, 0.025);

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

#answer-list .btn:hover,
#answer-list .btn:focus,
#answer-list .btn.active,
#answer-list .btn.selected,
#answer-list .btn.active:hover,
#answer-list .btn.active:focus,
#answer-list .btn.selected:hover,
#answer-list .btn.selected:focus {
    background-color: var(--kiber-cyan) !important;

    border-color: var(--kiber-cyan) !important;

    color: var(--color-white) !important;

    box-shadow:
        4px 4px 8px rgba(0, 0, 0, 0.40),
        -3px -3px 6px rgba(255, 255, 255, 0.035);
}

#answer-list .btn:active {
    background-color: var(--kiber-cyan) !important;

    border-color: var(--kiber-cyan) !important;

    color: var(--color-white) !important;

    box-shadow: var(--shadow-inset) !important;
}


/* =====================================================
   10. ПРОГРЕСС ТЕСТА
   ===================================================== */

.progress {
    height: 10px;

    background-color: var(--kiber-blue-dark);

    border-radius: 10px;

    box-shadow: var(--shadow-inset);
}

.progress-bar {
    background-color: var(--kiber-yellow);

    border-radius: 10px;

    box-shadow:
        2px 2px 5px rgba(0, 0, 0, 0.30);
}

#question-counter,
#question-percent {
    color: var(--color-white);
}


/* =====================================================
   11. РЕЗУЛЬТАТ И ДИАГРАММА
   ===================================================== */

#result-message,
#result-message.alert-light {
    background-color: var(--surface-dark) !important;

    border: 2px solid var(--kiber-yellow) !important;

    color: var(--color-white) !important;
}

#result-message :is(p,
    strong,
    span) {
    color: var(--color-white) !important;
}

#direction-radar-chart {
    display: block;

    width: 360px;
    max-width: 100%;
    height: auto;

    margin: 0 auto;
}

#result-mascot {
    line-height: 1;
}


/* =====================================================
   12. ALERT
   ===================================================== */

.alert {
    border-radius: 10px;
}

.alert-info {
    background-color: var(--field-background);

    border: 1px solid var(--kiber-cyan);

    color: var(--color-white);
}

.alert-info strong {
    color: var(--kiber-cyan);
}

.alert-danger {
    background-color: rgba(146, 37, 32, 0.20);

    border: 1px solid var(--kiber-burgundy);

    color: var(--color-white);
}


/* =====================================================
   13. CHECKBOX И ВАЛИДАЦИЯ СОГЛАСИЙ
   ===================================================== */

.form-check-input {
    width: 1.15em;
    height: 1.15em;

    background-color: var(--surface-dark);

    border: 2px solid var(--kiber-gray);

    cursor: pointer;
}

.form-check-input:hover {
    border-color: var(--kiber-cyan);
}

.form-check-input:focus,
.form-check-input:checked {
    border-color: var(--kiber-cyan);

    box-shadow:
        0 0 0 0.2rem rgba(5, 184, 189, 0.25);
}

.form-check-input:checked,
.form-check-input:checked:focus {
    background-color: var(--kiber-cyan);
}

.form-check-input:checked:focus {
    box-shadow:
        0 0 0 0.2rem rgba(5, 184, 189, 0.35);
}

.form-check-input.is-invalid,
.form-check-input.is-invalid:focus {
    border-color: var(--kiber-burgundy);
}

.form-check-input.is-invalid:focus {
    box-shadow:
        0 0 0 0.2rem rgba(146, 37, 32, 0.25);
}

.consents-block {
    margin-top: 1rem;
}


/* =====================================================
   14. ССЫЛКИ
   ===================================================== */

a,
.consent-link {
    color: var(--kiber-cyan);
}

a:hover,
a:focus,
.consent-link:hover,
.consent-link:focus {
    color: var(--kiber-yellow);
}

.consent-link {
    font-size: inherit;
    color: var(--kiber-cyan);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.consent-link:hover,
.consent-link:focus {
    color: var(--kiber-yellow);
    text-decoration: none;
}

/* =====================================================
   15. МОДАЛЬНЫЕ ОКНА СОГЛАСИЙ
   ===================================================== */

.modal-dialog.modal-dialog-scrollable {
    height: auto;
    max-height: calc(100dvh - 2rem);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.modal-dialog-scrollable .modal-content {
    display: flex;
    flex-direction: column;

    height: auto;
    max-height: calc(100dvh - 2rem);

    overflow: hidden;

    background-color: var(--card-background);
    color: var(--color-white);

    border: 1px solid var(--border-light);
    border-radius: 14px;

    box-shadow: var(--shadow-neumorphic);
}


/* Верхняя и нижняя части окна */

.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
    flex: 0 0 auto;

    background-color: var(--card-background);

    border-color: var(--border-light);
}

.modal-dialog-scrollable .modal-header {
    padding: 1.25rem 1.5rem;

    border-bottom: 1px solid var(--border-light);
}

.modal-dialog-scrollable .modal-footer {
    padding: 1rem 1.5rem 1.25rem;

    border-top: 1px solid var(--border-light);
}

.modal-title {
    color: var(--color-white);

    font-weight: 600;
}

.modal-header .btn-close {
    filter: invert(1);

    opacity: 0.8;
}

.modal-header .btn-close:hover {
    opacity: 1;
}


/* Прокручиваемая область */

.modal-dialog-scrollable .modal-body {
    flex: 1 1 auto;

    min-height: 0;

    padding: 1.5rem;

    overflow-x: hidden;
    overflow-y: scroll;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    background-color: var(--card-background);
    color: var(--color-white);

    line-height: 1.6;

    scrollbar-width: thin;
    scrollbar-color:
        var(--kiber-cyan) var(--surface-dark);
}


/* Scrollbar для Chrome / Edge / WebKit */

.modal-dialog-scrollable .modal-body::-webkit-scrollbar {
    width: 10px;
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar-track {
    background-color: var(--surface-dark);

    border-radius: 10px;
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb {
    background-color: var(--kiber-cyan);

    border: 2px solid var(--surface-dark);
    border-radius: 10px;
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb:hover {
    background-color: var(--kiber-yellow);
}


/* Текст согласия */

.consent-text {
    font-size: 0.95rem;
    line-height: 1.65;
}

.consent-text p {
    margin-bottom: 1rem;

    color: var(--color-white);
}

.consent-text p:last-child {
    margin-bottom: 0;
}

.consent-placeholder {
    color: var(--text-secondary);
}


/* Кнопка закрытия */

.consent-close-button {
    padding: 0.65rem 1.25rem;

    background-color: var(--field-background);

    border: 1px solid #3A383B;
    border-radius: 10px;

    color: var(--color-white);

    font-weight: 600;

    box-shadow:
        4px 4px 8px rgba(0, 0, 0, 0.30),
        -3px -3px 6px rgba(255, 255, 255, 0.025);

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.consent-close-button:hover,
.consent-close-button:focus {
    background-color: rgba(5, 184, 189, 0.20);

    border-color: var(--kiber-cyan);

    color: var(--color-white);
}

.consent-close-button:active {
    background-color: rgba(5, 184, 189, 0.25) !important;

    border-color: var(--kiber-cyan) !important;

    color: var(--color-white) !important;

    box-shadow: var(--shadow-inset) !important;
}


/* Затемнение страницы */

.modal-backdrop {
    background-color: #000000;
}


/* =====================================================
   16. RESPONSIVE — ПЛАНШЕТЫ И СМАРТФОНЫ
   ===================================================== */

@media (max-width: 767.98px) {

    main.container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .card {
        border-radius: 12px;
    }

    #direction-radar-chart {
        width: 330px;
    }

    h1.h2 {
        font-size: 1.7rem;
    }

    h1.h3 {
        font-size: 1.5rem;
    }

    h2.h4 {
        font-size: 1.25rem;
    }

    .lead {
        font-size: 1.05rem;
    }
}


/* =====================================================
   17. RESPONSIVE — МАЛЕНЬКИЕ СМАРТФОНЫ
   ===================================================== */

@media (max-width: 480px) {

    main.container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .card-body {
        padding: 1rem;
    }

    #direction-radar-chart {
        width: 310px;
    }

    #answer-list .btn {
        padding: 0.7rem 0.8rem;
    }

    .modal-dialog.modal-dialog-scrollable {
        max-height: calc(100dvh - 1rem);

        margin: 0.5rem;
    }

    .modal-dialog-scrollable .modal-content {
        max-height: calc(100dvh - 1rem);
    }

    .modal-dialog-scrollable .modal-header {
        padding: 1rem;
    }

    .modal-dialog-scrollable .modal-body {
        padding: 1rem;
    }

    .modal-dialog-scrollable .modal-footer {
        padding: 0.85rem 1rem 1rem;
    }
}


/* =====================================================
   18. RESPONSIVE — ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ
   ===================================================== */

@media (max-width: 360px) {

    main.container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .card-body {
        padding: 0.85rem;
    }

    #direction-radar-chart {
        width: 290px;
    }

    h1.h2 {
        font-size: 1.5rem;
    }

    h1.h3 {
        font-size: 1.35rem;
    }

    h2.h4 {
        font-size: 1.15rem;
    }

    .lead {
        font-size: 1rem;
    }

    #answer-list .btn {
        padding: 0.65rem 0.7rem;

        font-size: 0.95rem;
    }
}