/* ==========================================================================
   Мобильный блок обратного звонка.

   Оформление блока приходит из стилей шаблона сайта. Здесь только то,
   чего в исходной разметке не было: подсказка, ловушка и экран успеха.

   Переопределяется снаружи:
       .call-back__body { --cbi-error: #b00; --cbi-success: #2e7d32; }
   ========================================================================== */

.call-back__body {
    --cbi-error:      #cf1225;
    --cbi-success:    #4a8f2a;
    --cbi-done-size:  22px;
    --cbi-hint-size:  12px;
    --cbi-hint-gap:   6px;
    --cbi-fade:       .35s;
}

/* --- подсказка под полем --- */

.cbi-hint:empty {
    display: none;
}

.cbi-hint {
    margin-top: var(--cbi-hint-gap);
    font-size: var(--cbi-hint-size);
    color: var(--cbi-error);
}

/* Специфичность поднята до уровня .form-control шаблона сайта,
   чтобы обойтись без !important */
.call-back__body .form-control.is-invalid {
    border-color: var(--cbi-error);
}

/* ловушка для ботов */
.cbi-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* --- переход к экрану успеха --- */

.call-back__body {
    position: relative;
    transition: min-height var(--cbi-fade) ease;
}

.cbi-view {
    opacity: 1;
    transition: opacity var(--cbi-fade) ease;
}

.call-back__body.is-done .cbi-view {
    /* убираем из потока, но плавно: display:none оборвал бы переход */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
}

.cbi-done {
    display: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--cbi-fade) ease, transform var(--cbi-fade) ease;
}

.call-back__body.is-done .cbi-done {
    display: block;
}

/* класс навешивается следующим кадром, поэтому переход виден */
.call-back__body.is-done .cbi-done {
    animation: cbi-appear var(--cbi-fade) ease forwards;
}

@keyframes cbi-appear {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cbi-done__title {
    margin: 0 0 4px;
    font-size: var(--cbi-done-size);
    font-weight: 700;
    line-height: 1.2;
    color: var(--cbi-success);
}

.cbi-done__text {
    color: inherit;
    opacity: .75;
}

@media (prefers-reduced-motion: reduce) {
    .call-back__body,
    .cbi-view,
    .cbi-done {
        transition: none;
        animation: none;
    }

    .call-back__body.is-done .cbi-done {
        opacity: 1;
        transform: none;
    }
}