/* Halyk-Pos + Касса (ru|kz/pos-terminal-plus-rekassa): блоки страницы — координатная вёрстка на zero.css,
   здесь — попапы: форма «Подключиться онлайн» (заявка уходит в Halyk Bank) и KZ-попап с условиями акции. */

/* ---------- попапы: светлые, как в Tilda ---------- */
.hp-popup { color: #222; }
.hp-popup .popup__box { padding: 45px; border-radius: 36px; background: #f3f3f3; }
.hp-popup .popup__close { position: fixed; top: 20px; right: 20px; color: #fff; }
.hp-popup .popup__close svg { width: 23px; height: 23px; }
.hp-popup .popup__title { font-size: 50px; font-weight: 500; line-height: 1.23; color: #222; }

/* ---------- форма ---------- */
.hp-form { display: grid; gap: 25px; margin-top: 25px; }
.hp-form input:not([type="checkbox"]) {
    width: 100%; height: 60px; padding: 0 20px; border: 1px solid #003837; border-radius: 5px;
    background: transparent; color: #000; font: inherit; font-size: 16px; outline: 0;
}
.hp-form input::placeholder { color: #000; opacity: .5; }
.hp-form input:not([type="checkbox"]):focus { border-width: 2px; padding: 0 19px; }
.hp-form .field--error input { border-color: #f95d51; }
.hp-form .check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.3; cursor: pointer; }
.hp-form .check input {
    flex: 0 0 auto; width: 20px; height: 20px; margin: 0; border: 2px solid #003837; border-radius: 0;
    background: transparent; appearance: none; cursor: pointer;
}
.hp-form .check input:checked { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23003837' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 90% no-repeat; }
.hp-form .check.field--error input { border-color: #f95d51; }
.hp-form .check a { color: #00e673; }
.hp-form .check a:hover { text-decoration: underline; }
.hp-form .form-msg { margin: 0; padding: 20px; background: #f95d51; color: #fff; font-size: 18px; text-align: center; }
.hp-form__submit {
    width: 100%; height: 60px; border: 0; border-radius: 5px; background: #003837; color: #fff;
    font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color .2s ease-in-out;
}
.hp-form__submit:focus-visible { background: #00e673; }
@media (hover: hover) { .hp-form__submit:hover { background: #00e673; } }
.hp-form__submit[disabled] { opacity: .6; cursor: default; }
/* после отправки — «Спасибо!» и переход в Onlinebank (site.js, data-success-url) */
.hp-form .form-done { min-height: 280px; color: #222; }
.hp-form .form-done p { font-size: 16px; }

/* ---------- KZ: условия акции ---------- */
.hp-popup--info .popup__box { padding: 40px 45px; border-radius: 30px; background: #fff; }
.hp-info__title { font-size: 24px; font-weight: 500; line-height: 1.35; color: #00e673; }
.hp-info__text { margin-top: 18px; font-size: 16px; line-height: 1.55; }
.hp-info__text a { color: #15baaa; }
.hp-info__btn {
    display: block; min-width: 198px; height: 50px; margin: 18px auto 0; padding: 0 30px;
    border: 1px solid #00e673; border-radius: 16px; background: transparent; color: #222; font: inherit; font-size: 16px; cursor: pointer;
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
}
.hp-info__btn:focus-visible { background: #00e673; color: #fff; }
@media (hover: hover) { .hp-info__btn:hover { background: #00e673; color: #fff; } }

@media (max-width: 900px) {
    .hp-popup .popup__title { font-size: 20px; }
}
/* телефон: попап с формой на весь экран, как t702 в Tilda */
@media (max-width: 560px) {
    .hp-popup:not(.hp-popup--info) { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; }
    .hp-popup:not(.hp-popup--info) .popup__box { min-height: 100%; max-height: 100vh; padding: 70px 20px 40px; border-radius: 0 0 36px 36px; }
    .hp-popup:not(.hp-popup--info) .popup__close { top: 0; right: 0; width: 50px; height: 50px; }
    .hp-popup:not(.hp-popup--info) .popup__box::before { content: ''; position: absolute; inset: 0 0 auto; height: 50px; background: #000; }
    .hp-popup .popup__close { z-index: 1; }
    .hp-form { gap: 25px; margin-top: 15px; }
    .hp-form input:not([type="checkbox"]), .hp-form__submit { height: 50px; }
    .hp-form .check { font-size: 12px; }
    .hp-form .form-msg { font-size: 15px; }
    .hp-popup--info .popup__box { padding: 30px 20px; }
    .hp-info__title { font-size: 14px; }
    .hp-info__text { font-size: 10px; }
}

/* ---------- «Как пробивать чеки через QR без Pos-терминала?»: шаги лесенкой (телефон — списком) ---------- */
.hp-steps__in { color: #fff; }
.hp-steps__kicker { font-size: calc(15 * var(--u)); line-height: 1.55; opacity: .65; }
.hp-steps__title { max-width: calc(var(--tw) * var(--u)); margin-top: calc(25 * var(--u)); font-size: calc(42 * var(--u)); line-height: 1.25; font-weight: 500; }
.hp-steps__list { display: flex; align-items: flex-start; gap: calc(40 * var(--u)); margin: calc(90 * var(--u)) 0 0; padding: 0; list-style: none; }
.hp-steps__item {
    display: flex; flex-direction: column; gap: calc(165 * var(--u)); width: calc(220 * var(--u));
    padding-left: calc(26 * var(--u)); border-left: 1px solid #fff; font-size: calc(20 * var(--u)); line-height: 1.35;
}
.hp-steps__item:nth-child(2) { margin-top: calc(80 * var(--u)); }
.hp-steps__item:nth-child(3) { margin-top: calc(160 * var(--u)); }
.hp-steps__item:nth-child(4) { margin-top: calc(240 * var(--u)); }
.hp-steps__item b { font-size: calc(32 * var(--u)); line-height: 1; font-weight: 400; }
@media (max-width: 959px) {
    .hp-steps__kicker { font-size: calc(10 * var(--u)); }
    .hp-steps__title { width: calc(295 * var(--u)); max-width: none; font-size: calc(24 * var(--u)); }
    .hp-steps__list { flex-direction: column; gap: calc(32 * var(--u)); margin-top: calc(40 * var(--u)); }
    .hp-steps__item { width: calc(260 * var(--u)); gap: calc(12 * var(--u)); padding-left: calc(20 * var(--u)); font-size: calc(12 * var(--u)); }
    .hp-steps__item:nth-child(n) { margin-top: 0; }
    .hp-steps__item b { font-size: calc(20 * var(--u)); }
}