:root {
    --slider-title-size: 18px;
    --slider-width: 362px;
    --slider-body-radius: 24px;
    --slider-body-padding: 24px;
    --slider-border-color: #0663C7;
    --slider-picture-height: 138px;
    --slider-link-padding: 12px;
    --slider-link-font-size: 16px;
    --slider-tag-font-size: 14px;
    --slider-tag-padding: 4px 8px;
    --slider-price-wrapper-margin: 0 0 12px 0;
    --slider-school-max-width: 124px;
    --slider-nav-font-size: 16px;
    --slider-left-padding: 16px;
}

@media (max-width: 560px) {
    :root {
        --slider-title-size: 16px;
        --slider-width: 272px;
        --slider-body-radius: 16px;
        --slider-body-padding: 16px;
        --slider-border-color: #EAEAEA;
        --slider-picture-height: 96px;
        --slider-link-padding: 8px;
        --slider-link-font-size: 14px;
        --slider-tag-font-size: 12px;
        --slider-tag-padding: 2px 8px;
        --slider-price-wrapper-margin: 0 0 8px 0;
        --slider-school-max-width: 90px;
        --slider-nav-font-size: 14px;
    }

    .main-screen:has(+.courses-list-section>.tops-slider) {
        padding-bottom: 70px;
    }

    .courses-list-section:has(>.tops-slider) {
        margin-top: -50px;
    }

    .course-slider-card .picture {
        border: none !important
    }

    .slider-cards .swiper-button-next,
    .slider-cards .swiper-button-prev {
        display: none !important;
    }
}

/**
 * правки цветов заголовков
 */
.courses-list-section:has(>.tops-slider) .section-header,
.courses-list-section:has(>.tops-slider) .filters-header {
    color: #000;
}

.courses-list-section:has(>.tops-slider) .dropdown-toggle:hover {
    color: #000;
}

/* правки цветов заголовков */

.tops-slider {
    background-color: #4196F0;
    border-radius: 24px;
    color: #fff;
    margin-bottom: 32px;
    margin-left: -15px;
    margin-right: -15px;
    padding: 32px var(--slider-left-padding);
}

.tops-slider h2 {
    color: #fff;
    font-size: 24px;
    margin-bottom: 4px;
}

.tops-slider a {
    color: #fff;
    text-decoration: underline;
}

/**
 * навигация
 */
.tops-slider .nav-wrapper {
    margin-bottom: 16px;
}

.tops-slider .nav-pills {
    flex-wrap: nowrap;
}

.tops-slider .nav-pills .nav-link {
    background-color: #DBEDFF;
    color: #4196F0;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: var(--slider-nav-font-size);
}

.tops-slider .swiper-button-next, .tops-slider .swiper-button-prev {
    --swiper-navigation-size: 32px;
    background-color: #fff;
    width: var(--swiper-navigation-size);
    height: var(--swiper-navigation-size);
    border-radius: 100px;
    box-shadow: 0 0 12px -4px #bababa;
}

.tops-slider .swiper-button-next:after,
.tops-slider .swiper-button-prev:after {
    font-size: 12px;
    color: #000;
}

.tops-slider .nav-pills .nav-item {
    width: auto !important;
}

.tops-slider .nav-pills .nav-link.active,
.tops-slider .nav-pills .nav-link:hover {
    background-color: #fff;
    color: #010101;
}

/** навигация */

/**
 * отступы слева и справа для слайдеров
 */
.slider-cards, .tops-slider .nav-wrapper {
    margin-left: calc(-1 * var(--slider-left-padding)) !important;
    margin-right: calc(-1 * var(--slider-left-padding)) !important;
    padding-left: var(--slider-left-padding) !important;
    padding-right: var(--slider-left-padding) !important;
}

/**
 * course slider card
 */
.slider-cards .swiper-wrapper {
    align-items: stretch;
    display: flex;
}

.course-slider-card {
    height: auto !important;
    width: var(--slider-width);
    display: flex !important;
    flex-direction: column;
    margin-right: 8px;
}

.course-slider-card:last-child {
    margin-right: 0;
}

.course-slider-card .body {
    background-color: #fff;
    border-radius: 0 0 var(--slider-body-radius) var(--slider-body-radius);
    border: 1px solid var(--slider-border-color);
    border-top: none;
    color: #010101;
    display: flex;
    padding: var(--slider-body-padding);
    padding-top: calc(var(--slider-body-padding) - 8px);
    flex: 1;
    flex-direction: column;
}

.course-slider-card .icon {
    height: 14px;
    margin-right: 3px;
    stroke: #828282;
    width: 14px;
}

.course-slider-card .content-top {
    align-items: center;
    color: #4F4F4F;
    display: flex;
    font-size: 14px;
    margin-bottom: 12px;
}

.course-slider-card a {
    color: #0671E0;
    text-decoration: none;
}

.course-slider-card .title {
    font-size: var(--slider-title-size);
    margin-bottom: 8px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.course-slider-card .price-wrapper > div {
    margin-bottom: 4px;
}

.course-slider-card .price-wrapper {
    margin: var(--slider-price-wrapper-margin);
}

.installment span:last-child {
    font-size: 14px;
    color: #828282;
    margin-left: 12px;
}

.course-slider-card .price {
    font-size: 18px;
}

.course-slider-card .old-price {
    color: #828282;
    text-decoration: line-through;
}

.course-slider-card .promocode-link .icon {
    stroke: #0671E0;
}

/** bottom */
.course-slider-card .content-bottom {
    display: flex;
    align-items: flex-end;
    flex: 1;
    width: 100%;
}

.course-slider-card .content-bottom form {
    width: 100%;
}

.course-slider-card .content-bottom .btn {
    background-color: #333333;
    border-radius: 8px;
    color: #fff;
    font-size: var(--slider-link-font-size);
    flex: 1;
    margin-top: 14px;
    padding: var(--slider-link-padding);
    width: 100%;
}

.course-slider-card .content-bottom .btn:hover {
    background-color: #212121;
}

/** form */

/** star */
.course-slider-card .star-label {
    align-items: center;
    background-color: #219653;
    border-radius: 2px 11px 11px 2px;
    color: #fff;
    display: flex;
    font-weight: 600;
    padding: 1px 6px 1px 3px;
    white-space: nowrap;
    margin-right: 8px;
}

.course-slider-card .star-label .icon {
    fill: #fff;
    stroke: #fff;
}

/** star */

/** tag **/
.course-slider-card .tag {
    align-items: center;
    border-radius: 4px;
    display: flex;
    padding: var(--slider-tag-padding);
    font-size: var(--slider-tag-font-size);
    width: max-content;
}

.course-slider-card .tag-orange .icon {
    stroke: #A98450;
    width: var(--slider-tag-font-size);
    height: var(--slider-tag-font-size);
}

.course-slider-card .tag-orange {
    background-color: #FFF4E7;
    color: #FF8A00;
}

/** tag **/

/** duration **/
.course-slider-card .duration {
    align-items: center;
    display: flex;
    margin-left: auto;
}

/** duration **/

/** picture **/
.course-slider-card .picture {
    background-color: #242424;
    border: 1px solid #0663C7;
    border-bottom: none;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    position: relative;
    height: var(--slider-picture-height);
}

.course-slider-card .picture > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.course-slider-card .picture .tag {
    border-radius: 16px;
    position: absolute;
    top: 16px;
    left: 8px;
}

.course-slider-card .picture .tag-orange {
    background-color: #FFA826;
    color: #fff;
}

.course-slider-card .picture .school {
    align-items: center;
    background-color: #FFFFFF;
    bottom: 8px;
    border-radius: 8px;
    display: flex;
    padding: 8px;
    position: absolute;
    right: 8px;
}

.course-slider-card .picture .school img {
    border-radius: 50px;
}

.course-slider-card .picture .school b {
    color: #212121;
    display: inline-block;
    font-weight: 600;
    margin-left: 8px;
    margin-right: 6px;
    max-width: var(--slider-school-max-width);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/** picture **/


/**
 * course slider card
 */