/* Страницы-инструкции (ru|kz/podklyuchenie-ofd-rekassa): заголовок, слайдер скриншотов, шаги, плашки «Внимание» */

.guide {
    padding: 105px 0 110px; background: var(--c-bg); color: #232323;
    border-radius: 0 0 40px 40px; margin-bottom: 90px;
}
.guide__col { max-width: calc(760px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

.guide h1 { font-size: 54px; font-weight: 700; line-height: 1.2; color: var(--c-dark); }
.guide h2 { padding-bottom: 15px; font-size: 40px; font-weight: 600; line-height: 1.2; }
.guide strong { font-weight: 600; }

/* текст шагов: списки как в Tilda — «1.» и «•» с отступом 22px, абзацы через <br> */
.rich { font-size: 18px; line-height: 1.45; }
.rich--text { line-height: 1.55; }
.rich ol, .rich ul { margin: 0 0 10px; padding-left: 22px; }
.rich ol { list-style: decimal; }
.rich ul { list-style: disc; }
.rich a { color: var(--c-orange); }
.rich a:hover { text-decoration: underline; }

/* плашка с цветной линией слева (зелёная — справка, оранжевая — «Внимание!») */
.note { padding: 3px 0 3px 20px; border-left: 2px solid var(--c-green); font-size: 18px; line-height: 1.55; overflow-wrap: anywhere; }
.note--warn { border-left-color: var(--c-orange); }
.note a { color: var(--c-orange); }
.note a:hover { text-decoration: underline; }

.guide__figure { margin: 0; }
.guide__figure img { display: block; width: 100%; height: auto; border-radius: 15px; }

/* вертикальный ритм — отступы записей Tilda (padding соседних блоков складываются) */
h1 + .slider, .slider + .step, .step + .step { margin-top: 60px; }
.step + .note, .note + .step, .rich + .step, .guide__figure + .rich { margin-top: 45px; }
.note + .rich, .step--bare + .guide__figure { margin-top: 30px; }
.step--bare + .note { margin-top: 15px; }

/* ---------- слайдер скриншотов: [data-slider] в site.js ---------- */
.slider__stage { position: relative; }
.slider__view { overflow: hidden; border-radius: 15px; touch-action: pan-y; }
.slider__track { display: flex; transition: transform .3s ease; }
.slider__slide { flex: 0 0 100%; margin: 0; }
.slider__slide img { display: block; width: 100%; height: auto; aspect-ratio: 760 / 550; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.slider__arrow {
    position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; margin-top: -20px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: rgb(20, 180, 165); color: #fff; cursor: pointer;
    transition: opacity .2s;
}
.slider__arrow:hover { opacity: .85; }
.slider__arrow svg { width: 9px; height: 17px; }
.slider__arrow[data-dir="-1"] { left: -70px; }
.slider__arrow[data-dir="-1"] svg { transform: scaleX(-1); }
.slider__arrow[data-dir="1"] { right: -70px; }
.slider__dots { display: flex; justify-content: center; padding-top: 25px; }
.slider__dots button {
    width: 8px; height: 8px; margin: 0 5px; padding: 0; border: 0; border-radius: 50%;
    background: #fff; cursor: pointer; transition: background-color .2s;
}
.slider__dots button:hover, .slider__dots button[aria-current="true"] { background: #15b6a7; }
.slider__captions { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, .05); text-align: center; }
.slider__captions p { font-size: 16px; font-weight: 500; line-height: 1.35; color: #000; }
.slider__captions p:not(.is-active) { display: none; }

@media (max-width: 1199px) {
    .guide { border-radius: 0 0 32px 32px; }
}
@media (max-width: 959px) {
    .guide { padding-bottom: 90px; margin-bottom: 50px; border-radius: 0 0 30px 30px; }
    .slider__arrow[data-dir="-1"] { left: 10px; }
    .slider__arrow[data-dir="1"] { right: 10px; }
}
@media (max-width: 899px) {
    .guide h1, .guide h2 { font-size: 48px; }
}
@media (max-width: 640px) {
    .guide { padding: 75px 0 55px; }
    .guide h1, .guide h2 { font-size: 30px; line-height: 1.23; }
    .note + .step, .rich + .step { margin-top: 30px; }
    .note + .rich { margin-top: 15px; }
    /* скриншоты на всю ширину экрана, как в Tilda */
    .slider, .guide__figure { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
    .slider__arrow { width: 30px; height: 30px; margin-top: -15px; }
    .slider__arrow svg { width: 7px; height: 13px; }
    .slider__arrow[data-dir="-1"] { left: 5px; }
    .slider__arrow[data-dir="1"] { right: 5px; }
    .slider__captions { margin: 16px var(--gutter) 0; }
    .slider__captions p { font-size: 12px; }
}