.social-links .social-link .an-ico.an-ico-instagram,
.social-links .link-item .an-ico.an-ico-instagram {
    background: linear-gradient(49.12deg, #fd5 6.62%, #ff543e 50.06%, #c837ab 93.5%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.faq-drop .drop-item .drop-hide .option .checkbox+label a {
    display: inline-block;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: .02em;
    color: #575b7c;
}

.faq-col .form-data .checkbox-a a, .vesper-popup .form-data .checkbox-a a {
    text-decoration: none;
}

/* Sticky/fixed header on mobile and tablets (<=1023px) */
/* PWA: safe-area-inset-* учитывает notch/Dynamic Island на iPhone X+ в standalone-режиме. */
@media only screen and (max-width: 1023px) {
    body {
        padding-top: calc(64px + env(safe-area-inset-top));
        overflow-x: hidden;
    }
    body.__menu-open {
        padding-top: 0;
    }
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
        z-index: 100;
        margin: 0;
        padding: calc(8px + env(safe-area-inset-top)) env(safe-area-inset-right) 8px env(safe-area-inset-left);
        /* Frosted glass effect — fallback solid bg if backdrop-filter not supported */
        background: rgba(255, 255, 255, 0.7);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .header {
            background: rgba(255, 255, 255, 0.96);
        }
    }
    .header > .container {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* "Стоимость:" label before the price on the homepage course cards — */
/* only on mobile (<=479px). Same typography as the /courses/ page: */
/* the label inherits font-weight/size/color from .courses-list-main-item__cost */
/* (bold 700, 20px, line-height 1.3 on <=479px), so we add no overrides here. */
.courses-list-main-item__cost__label {
    display: none;
}
@media only screen and (max-width: 479px) {
    .courses-list-main-item__cost__label {
        display: inline;
        margin-right: 6px;
    }
}

/* Mobile-only subtitle under hero H1 on the homepage */
.main-hero-left__subtitle-mobile {
    display: none;
}
@media only screen and (max-width: 479px) {
    .main-hero-left__subtitle-mobile {
        display: block;
        margin-top: 12px;
        font-size: 16px;
        line-height: 1.4;
        font-weight: 600;
        color: #575b7c;
        text-align: center;
    }
}

/* Header mobile menu — MAX messenger icon (SVG, no icon font) */
.header-menu-social__link__ico.__max {
    margin-left: 20px;
    width: 40px;
    height: 40px;
    background: url("/frontend/build/images/max_c.svg") no-repeat center;
    background-size: contain;
    flex-shrink: 0;
}

/* /courses/ — статус курса (Открыт / Закрыт / Осталось N) над стоимостью */
/* Применяется на всех брейкпоинтах (десктоп + мобильный). */
.courses-list .courses-list-item-right-header-prices {
    display: flex;
    flex-direction: column;
}
.courses-list .courses-list-item-right-header-available {
    order: -1;
    margin-top: 0;
    margin-bottom: 12px;
    text-align: center;
}

/* /courses/ mobile cards: prices full width, centered cost, full-width buttons, centered dates. */
@media only screen and (max-width: 479px) {
    /* Tags: compact, centered, auto width — fit up to 3 in a row */
    .courses-list .courses-list-item-right-tags {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 10px;
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
    .courses-list .courses-list-item-right-tags__tag {
        margin: 0;
        width: auto;
        max-width: none;
        padding: 3px 8px;
        font-size: 11px;
        line-height: 1.4;
        white-space: nowrap;
    }

    /* Prices: snap off the 230px base width so price/buttons can fill the card */
    .courses-list .courses-list-item-right-header-prices {
        width: auto;
        text-align: center;
    }
    .courses-list .courses-list-item-right-header-prices__cost {
        text-align: center;
        white-space: normal;
    }
    .courses-list .courses-list-item-right-header-prices__cost-old,
    .courses-list .courses-list-item-right-header__action-date {
        display: block;
        text-align: center;
    }

    /* Dates block: center the date card in its column */
    .courses-list .courses-list-item-left {
        text-align: center;
        justify-content: center;
    }

    /* When dates are moved inside description (via JS) — sit between title and text */
    .courses-list .courses-list-item-right-header-description > .courses-list-item-left {
        max-width: none;
        width: auto;
        flex-shrink: 1;
        margin: 12px 0;
        justify-content: center;
    }

    /* Show course image on mobile (matches the homepage card) */
    .courses-list .courses-list-item-right-header-description-top-img {
        display: block;
        margin: 0 auto 12px;
        width: auto;
    }
    .courses-list .courses-list-item-right-header-description-top-img img {
        max-height: 56px;
        width: auto;
    }

    /* Description text — centered like the homepage card */
    .courses-list .courses-list-item-right-header-description__text {
        text-align: center;
    }


    /* Buttons: stacked, full width */
    .courses-list .courses-list-item-right-header-btn {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 16px;
    }
    .courses-list .courses-list-item-right-header-btn__reed,
    .courses-list .courses-list-item-right-header-btn__buy {
        width: 100%;
        margin: 0;
    }
}

/* Homepage course cards: tighten the 2nd wrapper on mobile after the date moved up. */
/* Базовый _courses-list-main.scss задаёт второму wrapper-у height:230px и cost margin:auto, */
/* что после переноса даты вверх создаёт пустое поле снизу. Сжимаем на ≤479px. */
@media only screen and (max-width: 479px) {
    /* Tags sit absolute at top of card. Push first wrapper down so the course icon doesn't overlap with them. */
    .courses-list-main-row .courses-list-main-item-wrapper:first-child {
        padding-top: 36px;
    }
    .courses-list-main-row .courses-list-main-item-wrapper + .courses-list-main-item-wrapper {
        height: auto;
        padding-top: 12px;
        padding-bottom: 16px;
    }
    .courses-list-main-row .courses-list-main-item__cost {
        margin: 12px 0 0;
    }
    .courses-list-main-row .courses-list-main-item__btn {
        margin-top: 12px;
        gap: 10px;
    }
    .courses-list-main-row .courses-list-main-item__btn__more {
        margin-bottom: 0;
    }
}