/* Страница «Платформенная занятость» (ru/platform-zanyatosti, kz/platform-zanyatosti).
   Блоки — координатная вёрстка assets/css/zero.css; здесь — форма заявки и частые вопросы. */

/* «Как это работает»: шаги шире экрана — на телефоне ленту можно прокрутить (в Tilda — перетаскиванием) */
.pz-steps { overflow-x: auto; scrollbar-width: none; }
.pz-steps::-webkit-scrollbar { display: none; }

/* ---------- форма заявки (в блоке «Хотите подключить свою платформу?») ---------- */
.pz-form { display: grid; gap: calc(12 * var(--u)); color: #000; }
.pz-form .field { position: relative; }
.pz-form input:not([type="checkbox"]) {
    display: block; width: 100%; height: calc(50 * var(--u)); padding: 0 calc(16.7 * var(--u));
    border: calc(1 * var(--u)) solid var(--c-dark); border-radius: calc(12 * var(--u)); background: #fff;
    color: #000; font-size: calc(16 * var(--u)); outline: none;
}
.pz-form input::placeholder { color: #000; opacity: .5; }
.pz-form .field--error input { border-color: #ff3d3d; box-shadow: 0 0 0 calc(1 * var(--u)) #ff3d3d; }
/* телефон: флаг Казахстана и стрелка, как в форме Tilda; номер — маской site.js */
.pz-form .field--phone input { padding-left: calc(68.3 * var(--u)); }
.pz-flag {
    position: absolute; left: calc(20.8 * var(--u)); top: 50%; z-index: 1;
    width: calc(20 * var(--u)); height: calc(14 * var(--u)); margin-top: calc(-7 * var(--u));
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='14' fill='%2300AFCA'/%3E%3Ccircle cx='10' cy='6.3' r='2.6' fill='%23FEC50C'/%3E%3Cpath d='M6.2 10.2c1.2.9 2.4 1.3 3.8 1.3s2.6-.4 3.8-1.3' stroke='%23FEC50C' stroke-width='.9' fill='none'/%3E%3Cpath d='M1.6 1.5v11' stroke='%23FEC50C' stroke-width='.9' stroke-dasharray='1 .8'/%3E%3C/svg%3E") center / cover no-repeat;
}
.pz-flag::after {
    content: ''; position: absolute; left: calc(26 * var(--u)); top: 50%; margin-top: calc(-2 * var(--u));
    border: calc(4 * var(--u)) solid transparent; border-top-color: rgba(0, 0, 0, .4); border-bottom: 0;
}
.pz-form .check {
    position: relative; display: block; min-height: calc(32.5 * var(--u)); padding-left: calc(30 * var(--u));
    color: #fff; font-size: calc(12 * var(--u)); line-height: 1.2; cursor: pointer;
}
.pz-form .check span { display: block; padding-top: calc(3.4 * var(--u)); }
.pz-form .check input {
    position: absolute; left: 0; top: 0; width: calc(24 * var(--u)); height: calc(24 * var(--u)); margin: 0;
    border: calc(2 * var(--u)) solid var(--c-dark); background: transparent; appearance: none; cursor: pointer;
}
.pz-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 / 80% no-repeat; }
.pz-form .check.field--error input { border-color: #ff3d3d; }
.pz-form .check a { color: var(--c-dark); font-weight: 700; }
.pz-form .check a:hover { text-decoration: underline; }
.pz-form button {
    height: calc(45 * var(--u)); border: 0; border-radius: calc(12 * var(--u)); background: var(--c-dark); color: #fff;
    font-size: calc(14 * var(--u)); font-weight: 600; cursor: pointer; transition: opacity .2s;
}
.pz-form button:hover { opacity: .9; }
.pz-form button[disabled] { opacity: .6; cursor: default; }
.pz-form .form-msg { margin: 0; color: #fff; font-size: calc(12 * var(--u)); }
.pz-form .form-done { min-height: calc(336 * var(--u)); color: #fff; }
.pz-form .form-done svg circle, .pz-form .form-done svg path { stroke: #fff; }

/* ---------- частые вопросы ---------- */
.pz-faq { --u: calc(var(--vw, 1vw) * 100 / 1200); background: var(--c-dark); color: #fff; }
.pz-faq__list { width: calc(1000 * var(--u)); margin: 0 auto; }
.pz-faq .qa { border-top: calc(1 * var(--u)) solid #527977; }
.pz-faq .qa:last-child { border-bottom: calc(1 * var(--u)) solid #527977; }
.pz-faq .qa summary { position: relative; gap: calc(10 * var(--u)); padding: calc(20 * var(--u)) 0; font-size: calc(24 * var(--u)); line-height: 1.35; }
.pz-faq .qa summary > span:first-child { max-width: calc(950 * var(--u)); }
.pz-faq .qa__icon { position: absolute; right: 0; top: calc(16.7 * var(--u)); width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; background: #245453 url('/assets/img/Group_2087325379.svg') center / 60% no-repeat; transition: none; }
.pz-faq .qa__icon::before, .pz-faq .qa__icon::after { content: none; }
.pz-faq .qa[open] .qa__icon { transform: none; background-image: url('/assets/img/photo.svg'); }
.pz-faq .qa__a { padding: calc(5 * var(--u)) 0 calc(40 * var(--u)); color: rgba(255, 255, 255, .56); font-size: calc(12 * var(--u)); line-height: 1.55; }

@media (max-width: 959px) {
    .pz-form input:not([type="checkbox"]) { height: calc(35 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(12 * var(--u)); }
    .pz-form .check { min-height: 0; font-size: calc(10 * var(--u)); }
    .pz-form button { height: calc(35 * var(--u)); border-radius: calc(8 * var(--u)); }
    .pz-form .form-done { min-height: calc(301 * var(--u)); }

    .pz-faq { --u: min(calc(var(--vw, 1vw) * 100 / 320), 1.6px); }
    .pz-faq__list { width: calc(280 * var(--u)); }
    .pz-faq .qa summary { font-size: calc(14 * var(--u)); padding: calc(19.6 * var(--u)) 0 calc(20.5 * var(--u)); }
    .pz-faq .qa summary > span:first-child { max-width: calc(230 * var(--u)); }
    .pz-faq .qa__icon { top: calc(19.6 * var(--u)); }
    .pz-faq .qa__a { padding-bottom: calc(25.6 * var(--u)); font-size: calc(9 * var(--u)); line-height: 1.45; }
}