.yzk-zibpay-guide {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 16px;
    padding: 12px;
    color: var(--main-color);
    background: var(--muted-bg-2-color);
    border: 1px solid var(--main-border-color);
    border-radius: var(--main-radius);
}

.yzk-zibpay-guide__icon {
    display: inline-flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--focus-color);
    background: var(--main-bg-color);
    border-radius: var(--mini-radius);
    box-shadow: 0 4px 14px var(--main-shadow);
}

.yzk-zibpay-guide__body {
    min-width: 0;
    line-height: 1.55;
}

.yzk-zibpay-guide__title {
    margin-bottom: 2px;
    font-weight: 700;
    color: var(--main-color);
}

.yzk-zibpay-guide__desc {
    color: var(--muted-color);
    font-size: 0.9em;
}

.yzk-zibpay-guide__steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
}

.yzk-zibpay-guide__steps .badg {
    font-size: 0.82em;
}

.yzk-zibpay-card-form [data-controller="payment_method"][data-value="card_pass"] {
    margin-bottom: 12px !important;
    padding: 0 !important;
}

.yzk-zibpay-card-form input[name="card_pass[card]"],
.yzk-zibpay-card-form input[name="card_pass[password]"] {
    min-height: 40px;
}

.yzk-zibpay-balance-purchase .yzk-zibpay-guide {
    margin-top: 0;
}

@media (max-width: 767px) {
    .yzk-zibpay-guide {
        gap: 9px;
        margin: 10px 0 14px;
        padding: 10px;
    }

    .yzk-zibpay-guide__icon {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
    }
}