/* Публичные страницы Metronic: телефон, планшет, ТВ */

html,
body {
    height: 100%;
    max-height: 100dvh;
    overflow: hidden;
}

#kt_app_root {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    min-height: 0;
}

.ta-page {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* flex-center режет верх у высоких карточек — центрируем через margin:auto у .ta-card */
    justify-content: flex-start !important;
}

.ta-page > .ta-card {
    margin-top: auto;
    margin-bottom: auto;
    flex-shrink: 0;
}

.ta-card {
    width: 100%;
    max-width: 40.625rem;
}

.ta-card-wide {
    max-width: 62.5rem;
}

/* Анкета контрагента: intro без прокрутки, по центру */
.qq-start {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.qq-start-card {
    width: min(100%, 58rem);
    max-height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.qq-start-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    padding: clamp(0.75rem, 1.6vh, 1.5rem) clamp(0.85rem, 2vw, 2rem) !important;
    gap: clamp(0.45rem, 1.2vh, 0.9rem);
}

.qq-start-logo {
    line-height: 0;
}

.qq-start-logo img {
    display: inline-block;
    height: clamp(2rem, 4.5vh, 3rem) !important;
    width: auto !important;
    max-width: 3.5rem !important;
    max-height: clamp(2rem, 4.5vh, 3rem) !important;
    object-fit: contain;
}

.qq-start-title {
    font-size: clamp(1.05rem, 2.6vh, 1.65rem) !important;
    line-height: 1.25;
}

.qq-start-lead {
    font-size: clamp(0.75rem, 1.7vh, 0.95rem);
    line-height: 1.35;
}

.qq-start-note {
    flex-shrink: 0;
    font-size: clamp(0.7rem, 1.55vh, 0.85rem);
    line-height: 1.35;
    padding: clamp(0.4rem, 1vh, 0.65rem) clamp(0.55rem, 1.2vw, 0.85rem);
    border: 1px dashed #E4E6EF;
}

.qq-start-tabs {
    flex-shrink: 0;
    margin-bottom: 0 !important;
}

.qq-start-tabs .nav-link {
    font-size: clamp(0.75rem, 1.7vh, 0.95rem);
    padding: 0.35rem 0.15rem 0.55rem !important;
}

.qq-start-tab-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.qq-start-tab-content .tab-pane {
    height: 100%;
}

.qq-doc-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
    counter-reset: qq-doc;
    color: #4B5675;
    font-weight: 600;
    font-size: clamp(0.62rem, 1.45vh, 0.8rem);
    line-height: 1.28;
}

.qq-doc-list > li {
    position: relative;
    padding-left: 1.35rem;
    margin-bottom: 0.22em;
}

.qq-doc-list > li::before {
    counter-increment: qq-doc;
    content: counter(qq-doc) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-variant-numeric: tabular-nums;
}

.qq-doc-list-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(0.75rem, 2vw, 1.75rem);
    row-gap: 0;
}

.qq-start-cta {
    flex-shrink: 0;
    padding-top: clamp(0.35rem, 1vh, 0.65rem);
    border-top: 1px solid #EFF2F5;
}

.qq-start-btn {
    min-height: clamp(2.4rem, 5.5vh, 3rem);
    font-size: clamp(0.9rem, 2vh, 1.05rem) !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

@media (max-width: 575.98px) {
    .qq-start-tabs .nav-link {
        font-size: 0.8rem;
    }
}

@media (max-width: 400px) and (max-height: 700px) {
    .qq-doc-list {
        font-size: 0.58rem;
        line-height: 1.22;
    }

    .qq-doc-list > li {
        padding-left: 1.15rem;
    }

    .qq-start-note {
        font-size: 0.68rem;
    }

    .qq-start-title {
        font-size: 1rem !important;
    }
}

#kt_create_account_form,
#kt_passguest_form,
#kt_passoffice_form,
#kt_questionnaire_form {
    max-width: 43.75rem;
}

.ta-wizard {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

.ta-wizard.flex-column-fluid {
    flex: 1 1 auto;
    min-height: 0;
}

.ta-wizard .app-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.ta-stepper-panels {
    width: 100%;
}

.ta-header {
    row-gap: 0.75rem;
    flex-shrink: 0;
}

.ta-header-title {
    min-width: 0;
    word-break: break-word;
}

.ta-actions .btn {
    min-height: 3rem;
}

#kt_create_account_form .form-control,
#kt_create_account_form .form-select,
#kt_passguest_form .form-control,
#kt_passguest_form .form-select,
#kt_passoffice_form .form-control,
#kt_passoffice_form .form-select,
#kt_questionnaire_form .form-control,
#kt_questionnaire_form .form-select {
    font-size: 1rem;
}

#kt_passoffice_form .select2-container {
    width: 100% !important;
}

#kt_passoffice_form .select2-container .select2-selection--single {
    min-height: 3rem;
    display: flex;
    align-items: center;
    font-size: 1rem;
}

.select2-container--open {
    z-index: 11000;
}

.select2-container--open .select2-search__field {
    font-size: 1rem !important;
}

@media (max-width: 575.98px) {
    .stepper.stepper-links .stepper-nav .stepper-item {
        margin: 0.35rem 0.6rem;
    }

    .stepper.stepper-links .stepper-nav .stepper-item .stepper-title {
        font-size: 0.95rem;
    }

    .ta-choice-label {
        padding: 1rem !important;
    }

    .ta-choice-label .ki-duotone {
        font-size: 1.75rem !important;
        margin-right: 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }

    .ta-actions {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
    }

    .ta-actions > div {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .ta-actions .btn {
        width: 100%;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

@media (min-width: 1400px) {
    .ta-card {
        max-width: 50rem;
    }

    .ta-header-title {
        font-size: 1.75rem;
    }
}

@media (min-width: 1920px) {
    .ta-card,
    #kt_create_account_form,
    #kt_passguest_form,
    #kt_passoffice_form {
        max-width: 56rem;
    }

    .ta-page,
    .ta-wizard {
        font-size: 1.05rem;
    }

    .ta-header-title {
        font-size: 2rem;
    }

    .ta-actions .btn {
        min-height: 3.5rem;
        font-size: 1.15rem;
    }
}

/* Гостевой пропуск: фото + ФИО */
.pg-photo-box {
    width: 100%;
    max-width: 14rem;
    aspect-ratio: 1 / 1;
    border: 1px dashed #9ec5fe;
    border-radius: 0.75rem;
    background: #f1f8ff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.pg-photo-box.is-filled {
    border-style: solid;
    background: #fff;
}

.pg-photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.75rem;
}

.pg-photo-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 767.98px) {
    .pg-photo-box {
        max-width: none;
        aspect-ratio: 4 / 3;
    }
}

.pg-file-box {
    width: 100%;
    min-height: 9.5rem;
    border: 1px dashed #9ec5fe;
    border-radius: 0.75rem;
    background: #f1f8ff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.pg-file-box.is-filled {
    border-style: solid;
    background: #fff;
    min-height: 11rem;
}

.pg-file-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
}

.pg-file-preview {
    width: 100%;
    height: 100%;
    min-height: 11rem;
    object-fit: contain;
    background: #f8f9fa;
}