@charset "utf-8";

/* ============================================================
   БЛОК З ТАЙМЕРОМ І ФОРМОЮ РЕЄСТРАЦІЇ
   ============================================================ */

.formTimer {
    max-width: 560px;
    margin: 40px auto;
    padding: 24px 20px 28px;
    background: #f7f9fb;
    border: 1px solid #e1e6eb;
    border-radius: 12px;
    box-sizing: border-box;
}

.formTitle {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    color: #111;
}

.formSub {
    margin: 0 0 4px;
    font-size: 15px;
    color: #444;
}

#timer {
    margin: 4px 0 18px;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #d32f2f;
    /* Цифри однакової ширини — інакше таймер сіпається щосекунди. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

#timer.is-expired {
    color: #777;
}

/* ============================================================
   ФОРМА
   Базові стилі полів і кнопки лежать у reg/css-files/custom-form.css
   (клас ._form). Тут — тільки те, чого там бракує, і посадка в блок.
   Селектори навмисно специфічніші, бо form.css підключений ДО
   custom-form.css і при рівній вазі програв би йому.
   ============================================================ */

.formTimer ._form.form {
    max-width: 380px;
    padding: 0;
}

.formTimer ._form .form-group {
    margin-bottom: 12px;
}

.formTimer ._form input {
    border: 1px solid #d1d5db;
}

.formTimer ._form input:focus {
    border-color: var(--form-primary-orange, #f79e1b);
}

/* Випадайка з країнами в intl-tel-input має бути над сусіднім контентом. */
.formTimer ._form .iti__country-list {
    z-index: 200;
}

@media (max-width: 480px) {
    .formTimer {
        margin: 30px auto;
        padding: 20px 14px 24px;
    }

    .formTitle {
        font-size: 17px;
    }

    #timer {
        font-size: 28px;
    }

    /* custom-form.css звужує форму до 80% — усередині блока це зайве. */
    .formTimer ._form.form {
        max-width: 100%;
        padding: 0;
    }
}