/* ============================================================
   ВОРОНКА – АДАПТИРОВАНА ПОД ВАШИ СТИЛИ
   Классы сохранены, значения взяты из ваших CSS-файлов
   ============================================================ */

/* ---- Общие (из template_styles.css) ---- */
/* Моя версия (использую ваши цвета из template_styles.css) */
.akf .ak-funnel {
    background: #f8f9fa;  /* ваш --light */
    color: #333333;       /* ваш --dark */
    position: relative;
    overflow: hidden;
    padding: 40px 0;      /* как у вас в .services */
}
.akf .ak-funnel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: none;     /* у вас нет таких градиентов, убираю */
}
.akf .ak-funnel .ak-wrap {
    position: relative;
    z-index: 2;
    max-width: 1200px;    /* ваш --maxw */
    margin: 0 auto;
    padding: 0 20px;      /* ваши отступы */
}

/* ---- Список проблем (используем ваши сетки и карточки) ---- */
.akf .ak-probs {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
}
.akf .ak-prob {
    flex: 0 0 280px;   /* фиксированная ширина карточки */
    scroll-snap-align: start;
}
@media (max-width: 768px) {  /* ваше медиа */
    .akf .ak-probs {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .akf .ak-probs {
        grid-template-columns: 1fr;
    }
}

/* ---- Карточка проблемы (как .service-card) ---- */
.akf .ak-prob {
    background: #fff;  /* ваша карточка белая */
    border: 1px solid #e9ecef;  /* ваш --border */
    border-radius: 10px;  /* ваш радиус */
    padding: 20px;
    text-align: left;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    min-height: 150px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);  /* как у .service-card */
}
.akf .ak-prob:hover {
    transform: translateY(-5px);  /* как .service-card:hover */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-color: #008edd;  /* ваш --primary */
}
.akf .ak-prob::after {
    display: none;  /* у вас нет таких стрелок */
}

/* ---- Текст внутри карточки ---- */
.akf .ak-prob b {
    display: block;
    font-size: 1.3rem;  /* размер как в .service-content h3 */
    font-weight: 700;
    color: #333333;  /* ваш --dark */
    margin-bottom: 8px;
}
.akf .ak-prob span {
    display: block;
    font-size: 0.95rem;  /* как в .service-content p */
    color: #6c757d;  /* ваш --gray */
    line-height: 1.5;
}

/* ---- Срочная проблема (красная рамка) ---- */
.akf .ak-prob--red {
    border-left: 4px solid #dc3545;  /* ваш --danger */
}
.akf .ak-prob--red::before {
    content: "Срочно";
    position: absolute;
    top: 10px;
    right: 10px;
    background: #dc3545;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;  /* ваши скругления */
}
.akf .ak-prob--red b {
    padding-right: 70px;  /* чтобы не наезжало на "Срочно" */
}

/* ---- Дополнительные кнопки ---- */
.akf .ak-probs-extra {
    margin-top: 14px;
    font-size: 0.95rem;
    color: #6c757d;
}
.akf .ak-probs-extra button {
    color: #008edd;  /* ваш --primary */
    border-bottom: 1px solid #008edd;
    padding-bottom: 2px;
    background: none;
    border: none;
    cursor: pointer;
}
.akf .ak-probs-extra button:hover {
    color: #1e4ac9;
}
.akf .ak-dunno {
    margin-top: 12px;
    font-size: 0.95rem;
    color: #6c757d;
    text-align: center;
}
.akf .ak-dunno button {
    color: #008edd;
    border-bottom: 1px solid #008edd;
    padding-bottom: 2px;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
}
.akf .ak-dunno button:hover {
    color: #1e4ac9;
}

/* ---- Контейнер поля ввода (поиск/описание) ---- */
.akf .ak-pd-in {
    position: relative;
    margin-bottom: 12px;  /* добавляю отступ снизу, как у ваших форм */
}

/* ---- Поле ввода внутри ---- */
.akf .ak-pd-in input {
    width: 100%;
    padding: 12px 56px 12px 15px;  /* правый отступ для кнопки микрофона */
    border: 1px solid #e9ecef;     /* ваш --border */
    border-radius: 5px;            /* ваш радиус */
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: #333333;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
}

/* ---- Фокус поля (как .form-control:focus) ---- */
.akf .ak-pd-in input:focus {
    outline: none;
    border-color: #008edd;        /* ваш --primary */
    box-shadow: 0 0 0 3px rgba(0,142,221,0.15);
}

/* ---- Стиль для микрофона (внутри .ak-pd-in) уже есть в .ak-mic, его не трогаю ---- */

/* ===== ПРОГРЕСС-БАР (адаптирован под ваши стили) ===== */
.akf .ak-prog {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
    max-width: 560px;
}

.akf .ak-pstep {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #6c757d;               /* ваш --gray */
    border-bottom: 3px solid #e9ecef;  /* ваш --border */
    padding-bottom: 8px;
    transition: all 0.3s;
}

.akf .ak-pstep.on {
    color: #008edd;               /* ваш --primary */
    border-bottom-color: #008edd;
}

.akf .ak-pstep.done {
    color: #28a745;               /* ваш --success */
    border-bottom-color: #28a745;
}

.akf .ak-pstep .ak-bar {
    display: none;                /* заменяем на border-bottom */
}

.akf .ak-pstep .ak-lb {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6c757d;
    margin-top: 4px;
    font-weight: 400;
}

.akf .ak-pstep.on .ak-lb {
    color: #008edd;
}

.akf .ak-pstep.done .ak-lb {
    color: #28a745;
}

/* ===== КАРТОЧКА ВЫБОРА ТЕХНИКИ (адаптировано под ваши стили) ===== */
.akf .ak-card {
    background: #fff;                    /* ваша карточка */
    border: 1px solid #e9ecef;           /* ваш --border */
    border-radius: 10px;                 /* ваш радиус */
    padding: 24px;                       /* как в .service-card */
    margin-top: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* как .service-card */
}
.akf .ak-card-in {
    /* без дополнительных стилей – всё внутри .ak-card */
}

/* Хлебные крошки (выбранные шаги) */
.akf .ak-stepline {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    font-size: 14px;
    color: #6c757d;              /* ваш --gray */
    font-family: 'Segoe UI', Arial, sans-serif;
}
.akf .ak-stepline .ak-done {
    background: #f8f9fa;         /* ваш --light */
    padding: 4px 12px;
    border-radius: 20px;
    color: #333333;              /* ваш --dark */
    font-weight: 500;
}

/* Заголовок "Выберите тип техники" */
.akf .ak-popbrands {
    margin-bottom: 16px;
}
.akf .ak-popbrands .ak-k {
    font-size: 13px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Сетка категорий (как .brands-grid) */
.akf .ak-pbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;                   /* как в .brands-grid */
}
@media (max-width: 820px) {
    .akf .ak-pbs {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 520px) {
    .akf .ak-pbs {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Кнопка категории (как .brand-card) */
.akf .ak-pb {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 500;
    font-size: 14px;
    color: #333333;
}
.akf .ak-pb:hover {
    border-color: #008edd;
    box-shadow: 0 5px 15px rgba(0,142,221,0.1);
    transform: translateY(-2px);
}
.akf .ak-pb .ak-nm {
    display: block;
    font-size: 14px;
}

/* Выпадающий список (как .form-control) */
.akf .ak-sel {
    margin-top: 16px;
}
.akf .ak-sel label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #333333;
}
.akf .ak-sel select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    font-size: 1rem;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #fff;
    color: #333333;
    transition: border-color 0.3s;
    appearance: auto;            /* убираем кастомную стрелку */
}
.akf .ak-sel select:focus {
    outline: none;
    border-color: #008edd;
    box-shadow: 0 0 0 3px rgba(0,142,221,0.1);
}

/* Счётчик категорий */
.akf .ak-brandcount {
    font-size: 13px;
    color: #6c757d;
    margin-top: 12px;
}

/* Ссылка "Пропустить" */
.akf .ak-skip {
    margin-top: 16px;
    font-size: 14px;
    color: #6c757d;
}
.akf .ak-skip button {
    background: none;
    border: none;
    color: #008edd;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    border-bottom: 1px solid #008edd;
}
.akf .ak-skip button:hover {
    color: #1e4ac9;
}

/* ===== КНОПКА "НАЗАД" (адаптирована под ваши стили) ===== */
.akf .ak-back {
    margin-top: 16px;
    font-family: 'Segoe UI', Arial, sans-serif;  /* ваш шрифт */
    font-size: 13px;
    letter-spacing: 0.05em;                      /* как в .section-title */
    text-transform: uppercase;
    color: #6c757d;                              /* ваш --gray */
}
.akf .ak-back button {
    color: #008edd;                              /* ваш --primary */
    border-bottom: 1px solid #008edd;
    padding-bottom: 2px;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
    font-size: inherit;
    transition: all 0.2s;
}
.akf .ak-back button:hover {
    color: #1e4ac9;                              /* ваш --primary-dark */
    border-bottom-color: #1e4ac9;
}

/* ===== СПИСОК БРЕНДОВ (сетка 4 колонки, адаптив) ===== */
.akf .ak-vars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);  /* 4 колонки на десктопе */
    gap: 10px;
    margin-top: 12px;
}

/* Кнопка бренда – как .brand-card, выравнивание по левому краю */
.akf .ak-var {
    background: #fff;
    border: 1px solid #e9ecef;           /* ваш --border */
    border-radius: 8px;                  /* ваш радиус */
    padding: 13px 15px;
    font-size: 15px;
    font-weight: 500;
    font-family: 'Segoe UI', Arial, sans-serif;
    text-align: left;
    color: #333333;
    cursor: pointer;
    transition: all 0.3s;
    width: 100%;
}
.akf .ak-var:hover {
    border-color: #008edd;               /* ваш --primary */
    background: #f8f9fa;                 /* ваш --light */
    box-shadow: 0 5px 15px rgba(0,142,221,0.1);
    transform: translateY(-2px);
}
.akf .ak-var small {
    display: block;
    font-size: 12px;
    color: #6c757d;                      /* ваш --gray */
    font-weight: 400;
    margin-top: 2px;
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 992px) {
    .akf .ak-vars {
        grid-template-columns: repeat(3, 1fr);  /* 3 колонки на планшетах */
    }
}
@media (max-width: 768px) {
    .akf .ak-vars {
        grid-template-columns: repeat(2, 1fr);  /* 2 колонки на маленьких планшетах */
    }
}
@media (max-width: 480px) {
    .akf .ak-vars {
        grid-template-columns: 1fr;            /* 1 колонка на телефонах */
    }
}

/* ============================================================
   ВСЕ КЛАССЫ ВОРОНКИ – АДАПТИРОВАНЫ ПОД ВАШИ СТИЛИ
   ============================================================ */

/* ---- Контейнеры и обёртки ---- */
.akf .ak-stage {
    margin-top: 30px;
}
.akf .ak-result {
    max-width: 900px;
    margin: 0 auto;
}
.akf .ak-rbox {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* ---- Заголовки результата ---- */
.akf .ak-r-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.akf .ak-r-lbl {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
}
.akf .ak-r-code {
    font-size: 24px;
    font-weight: 700;
    color: #333333;
}
.akf .ak-r-name {
    font-size: 14px;
    color: #6c757d;
}
.akf .ak-r-badge {
    background: #008edd;
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    white-space: nowrap;
}
.akf .ak-r-k {
    font-weight: 600;
    font-size: 1.1rem;
    color: #333333;
    margin-bottom: 10px;
}
.akf .ak-r-cause {
    font-size: 1rem;
    color: #333333;
    line-height: 1.6;
}
.akf .ak-r-sec {
    margin-bottom: 20px;
}
.akf .ak-r-sec:last-child {
    margin-bottom: 0;
}

/* ---- Кнопки (общие) ---- */
.akf .ak-btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 5px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
}
.akf .ak-btn--primary {
    background: #008edd;
    color: #fff;
}
.akf .ak-btn--primary:hover {
    background: #1e4ac9;
}
.akf .ak-btn--wa {
    background: #25d366;
    color: #fff;
}
.akf .ak-btn--wa:hover {
    background: #1ebe5c;
}
.akf .ak-btn--dark {
    background: #333333;
    color: #fff;
}
.akf .ak-btn--dark:hover {
    background: #000;
}
.akf .ak-btn--line {
    background: transparent;
    color: #008edd;
    border: 1px solid #008edd;
}
.akf .ak-btn--line:hover {
    background: #008edd;
    color: #fff;
}

/* ---- Блок действий (сетка) ---- */
.akf .ak-acts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 10px;
}
@media (max-width: 700px) {
    .akf .ak-acts {
        grid-template-columns: 1fr;
    }
}
.akf .ak-act {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 20px;
    transition: all 0.3s;
}
.akf .ak-act:hover {
    border-color: #008edd;
    box-shadow: 0 5px 15px rgba(0,142,221,0.1);
}
.akf .ak-act--hot {
    background: #008edd;
    color: #fff;
    border-color: #008edd;
}
.akf .ak-act--hot:hover {
    background: #1e4ac9;
}
.akf .ak-act-n {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
}
.akf .ak-act--hot .ak-act-n {
    color: rgba(255,255,255,0.8);
}

/* ---- Большой телефон ---- */
.akf .ak-bigtel {
    font-size: 26px;
    font-weight: 700;
    display: block;
    margin: 4px 0 8px;
    color: inherit;
}

/* ---- Быстрый звонок ---- */
.akf .ak-quickcall {
    background: #333333;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}
.akf .ak-quickcall .ak-qt {
    flex: 1;
}
.akf .ak-quickcall .ak-qt b {
    display: block;
    font-size: 16px;
}
.akf .ak-quickcall a.tel {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}
.akf .ak-tel {
    font-size: 24px;
    font-weight: 700;
    color: #008edd;
}

/* ---- Цена и работы ---- */
.akf .ak-pmain {
    background: #008edd;
    color: #fff;
    padding: 16px 20px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.akf .ak-pmain .ak-l {
    font-size: 14px;
    opacity: 0.9;
}
.akf .ak-pmain .ak-l b {
    display: block;
    font-size: 16px;
    font-weight: 700;
}
.akf .ak-pmain .ak-v {
    font-size: 24px;
    font-weight: 700;
}
.akf .ak-pladder {
    border: 1px solid #e9ecef;
    border-radius: 5px;
    overflow: hidden;
    margin: 16px 0;
}
.akf .ak-pl {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e9ecef;
}
.akf .ak-pl:last-child {
    border-bottom: none;
}
.akf .ak-pnote {
    font-size: 0.9rem;
    color: #6c757d;
}

/* ---- Блок "Как мы работаем" ---- */
.akf .ak-promise {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
    border-left: 4px solid #008edd;
}
.akf .ak-promise b {
    font-size: 1.2rem;
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
}
.akf .ak-promise ul {
    list-style: none;
    padding: 0;
}
.akf .ak-promise li {
    padding: 4px 0 4px 20px;
    position: relative;
}
.akf .ak-promise li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #008edd;
}

/* ---- Форма (заявка) ---- */
.akf .ak-cb-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.akf .ak-cb-row input {
    flex: 1;
    min-width: 150px;
    padding: 12px 15px;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    font-size: 1rem;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #fff;
    color: #333333;
}
.akf .ak-cb-row input:focus {
    outline: none;
    border-color: #008edd;
    box-shadow: 0 0 0 3px rgba(0,142,221,0.1);
}
.akf .ak-cb-msg {
    font-size: 14px;
    margin-top: 8px;
}
.akf .ak-consent {
    font-size: 13px;
    color: #6c757d;
    margin-top: 10px;
}
.akf .ak-go {
    gap: 8px;
    margin-top: 12px;
}
.akf .ak-go .ak-btn {
    flex: 1;
    text-align: center;
}

/* ---- Вспомогательные (если не попали выше) ---- */
.akf .ak-v {
    font-size: 24px;
    font-weight: 700;
}

/* ============================================================
   БЛОК РЕЗУЛЬТАТА И ФОРМЫ (уже адаптированы под ваши стили)
   ============================================================ */

/* ---- Секция результата ---- */
.akf .ak-r-sec {
    margin-bottom: 20px;
}
.akf .ak-r-sec:last-child {
    margin-bottom: 0;
}

/* ---- Форма (заявка мастеру) ---- */
.akf .ak-frm {
    /* без дополнительных стилей – использует ваши .form-group, .form-control */
}
.akf .ak-frm .ak-fl {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #333333;
    margin: 0 0 6px;
}
.akf .ak-frm .ak-ta {
    position: relative;
}
.akf .ak-frm textarea,
.akf .ak-frm .ak-ta textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    font-size: 1rem;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #fff;
    color: #333333;
    min-height: 100px;
    resize: vertical;
    transition: border-color 0.3s;
}
.akf .ak-frm textarea:focus,
.akf .ak-frm .ak-ta textarea:focus {
    outline: none;
    border-color: #008edd;
    box-shadow: 0 0 0 3px rgba(0,142,221,0.1);
}

/* ---- Строки формы (две колонки) ---- */
.akf .ak-frm-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}
@media (max-width: 560px) {
    .akf .ak-frm-row {
        grid-template-columns: 1fr;
    }
}
.akf .ak-frm-row input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    font-size: 1rem;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #fff;
    color: #333333;
    transition: border-color 0.3s;
}
.akf .ak-frm-row input:focus {
    outline: none;
    border-color: #008edd;
    box-shadow: 0 0 0 3px rgba(0,142,221,0.1);
}

/* ---- Кнопки в форме ---- */
.akf .ak-frm-go {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.akf .ak-frm-go .ak-btn {
    flex: 1;
    min-width: 180px;
}

/* ---- Общие кнопки (повторно, для единообразия) ---- */
.akf .ak-btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 5px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
}
.akf .ak-btn--primary {
    background: #008edd;
    color: #fff;
}
.akf .ak-btn--primary:hover {
    background: #1e4ac9;
}
.akf .ak-btn--wa {
    background: #25d366;
    color: #fff;
}
.akf .ak-btn--wa:hover {
    background: #1ebe5c;
}

/* ---- Сообщения формы ---- */
.akf .ak-frm-msg {
    font-size: 14px;
    margin-top: 12px;
}
.akf .ak-frm-note {
    font-size: 13px;
    color: #6c757d;
    margin-top: 12px;
}
/* ============================================================
   БЛОК СОВПАДЕНИЯ ПО ОПИСАНИЮ (уже адаптирован под ваши стили)
   ============================================================ */

.akf .ak-pm-hit {
    margin-top: 13px;
    background: #fff;
    border-radius: 10px;                 /* ваш радиус */
    padding: 14px 15px;
    border: 1px solid #e9ecef;           /* ваш --border */
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.akf .ak-pm-k {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;                      /* ваш --gray */
    margin-bottom: 9px;
    font-weight: 600;
}

.akf .ak-pm-main {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    border: 1px solid #008edd;           /* ваш --primary */
    border-radius: 8px;                  /* ваш радиус */
    background: rgba(0,142,221,0.05);
    padding: 13px 15px;
    transition: all 0.3s;
    cursor: pointer;
}
.akf .ak-pm-main:hover {
    background: #008edd;                 /* ваш --primary */
    color: #fff;
    box-shadow: 0 5px 15px rgba(0,142,221,0.2);
}
.akf .ak-pm-main b {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    flex: none;
    color: #333333;
}
.akf .ak-pm-main:hover b {
    color: #fff;
}
.akf .ak-pm-main span {
    flex: 1;
    font-size: 14px;
    color: #6c757d;                      /* ваш --gray */
}
.akf .ak-pm-main:hover span {
    color: rgba(255,255,255,0.85);
}
.akf .ak-pm-main i {
    font-style: normal;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #008edd;                      /* ваш --primary */
    flex: none;
}
.akf .ak-pm-main:hover i {
    color: #fff;
}