@import url("https://fonts.googleapis.com/css2?family=Sansation:wght@300;400;700&display=swap");

:root {
    --default-font-family: "Sansation", sans-serif !important;
}

/* Применяем шрифт к body, если в разметке используется эта переменная или этот файл подключают глобально */
body {
    font-family: var(--default-font-family);
}
input.mat-mdc-input-element[placeholder="Сколько хотите отправить?"],
input.mat-mdc-input-element[placeholder*="отправить"] {
    font-weight: 700 !important;
}

input.mat-mdc-input-element[placeholder="Сколько вам придёт?"],
input.mat-mdc-input-element[placeholder*="отправить"] {
    font-weight: 700 !important;
}




.discount-item {
    position: relative;
    padding: 12px 22px;
    border-radius: 30px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    color: #000;
    overflow: hidden;

    background: linear-gradient(
        90deg,
        #179cc2 0%,
        #179cc2 var(--gradient-percent-start),

        /* СВЕТЛЫЙ ЦВЕТ ГАСИМ РАНЬШЕ */
        #179cc2 calc(var(--gradient-percent-end) - 12%),

        /* ПЕРЕХОД В ТЁМНЫЙ */
        #ffffff var(--gradient-percent-end),
        #ffffff 100%
    );

    box-shadow: 0 6px 18px #179cc2;
}

.discount-item {
    position: relative;
    overflow: hidden;         /* важно: чтобы blur не лез на соседние элементы */
}

/* Текст всегда поверх дымки */
.discount-item .percent,
.discount-item .range {
    position: relative;
    z-index: 3;
}

/* Дымка: только #0a0328, лежит ПОД текстом */
.discount-item::after {
    content: "";
    position: absolute;
    top: -20px;
    bottom: -20px;

    /* старт дымки привязан к концу заполнения */
    left: calc(var(--gradient-percent-end) - 3%);
    width: 30%;

    /* ВАЖНО: только этот цвет */
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #ffffff 55%,
        #ffffff 100%
    );

    filter: blur(50px);
    z-index: 1;               /* ниже текста */
    pointer-events: none;
}

.discount-graph {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.discount-item {
    height: 100px;
    display: flex;
    align-items: center;
}

.xchange_info_line .span_skidka {
    font-size: 22px;
    font-weight: 700; /* ЖИРНЫЙ ТЕКСТ */
}

.xchange_data_course .xchange_info_line {
    font-size: 22px;
    font-weight: 600; /* ПОЛУЖИРНЫЙ ТЕКСТ */
}

/* Черный цвет текста + жирность */
.discount-item,
.discount-item .percent,
.discount-item .range,
.xchange_info_line .span_skidka,
.xchange_data_course .xchange_info_line {
    color: #000;
    font-weight: 700; /* ЖИРНЫЙ ТЕКСТ */
}

/* Мобильная версия */
.skidka-info {
    margin-left: 4px;
    text-decoration: none;
    font-size: 0.9em;
    cursor: pointer;
    color: #888;
}

@media (max-width: 768px) {
    .xchange_info_line .span_skidka {
        font-size: 20px;
        font-weight: 700; /* ЖИРНЫЙ ТЕКСТ */
    }

    .discount-graph {
        gap: 0px; /* исправлено: расстояние между блоками 13px */
    }

    .discount-item {
        height: 80px;       /* компактнее */
        padding: 10px 16px; /* меньше воздуха */
    }

    /* Мягче и шире дымка */
    .discount-item::after {
        left: calc(var(--gradient-percent-end) - 6%);
        width: 40%;
        filter: blur(60px);
    }
}

/* Точки на сайте */

/* Заменяем маркеры li на красивые синие точки */
ul.custom-dots li,
li.custom-dot {
    list-style: none; /* убираем стандартные маркеры */
    position: relative;
    padding-left: 25px; /* отступ для точки */
    margin-bottom: 8px; /* расстояние между элементами */
}

ul.custom-dots li::before,
li.custom-dot::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    
    width: 14px;      /* ширина точки */
    height: 14px;     /* высота точки */
    background: #179cc2; /* синий цвет */
    border-radius: 50%; /* круглая форма */
    
    box-shadow: 
        0 4px 12px rgba(23, 156, 194, 0.4), /* внешнее свечение */
        0 0 0 2px rgba(255, 255, 255, 0.3); /* тонкая белая обводка */
    
    transition: all 0.3s ease; /* плавная анимация */
}

/* Ховер эффект */
ul.custom-dots li:hover::before,
li.custom-dot:hover::before {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 
        0 6px 20px rgba(23, 156, 194, 0.6),
        0 0 0 3px rgba(255, 255, 255, 0.5);
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    ul.custom-dots li,
    li.custom-dot {
        padding-left: 20px;
    }
    
    ul.custom-dots li::before,
    li.custom-dot::before {
        width: 12px;
        height: 12px;
    }
}


:root {
    --body-background: #e3f8fc!important;
    --primary-background: #0f58c8!important;
    --default-border-radius: var(13px)!important;

}



/* Контейнер: ободок, фон, скругление */
div.rounded-2xl:has(.formatting__text.prose),
div.rounded-2xl:has(h5) {
    border: 2px solid rgba(23, 156, 194, 0.45) !important;
    border-radius: 1rem !important;
    padding: 1.25rem 1.5rem !important;
    background: rgba(23, 156, 194, 0.06);
    box-shadow: 0 4px 20px rgba(23, 156, 194, 0.12);
}

/* Текст внутри: выравнивание по ширине, читаемость */
div.rounded-2xl .formatting__text.prose,
div.rounded-2xl .prose {
    text-align: left;
    max-width: 100%;
    line-height: 1.6;
}

/* Заголовок «Внимание!» */
div.rounded-2xl .formatting__text.prose h5,
div.rounded-2xl .prose h5 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #179cc2;
}

/* Абзацы в блоке */
div.rounded-2xl .formatting__text.prose p,
div.rounded-2xl .prose p {
    margin-bottom: 0.5rem;
}
div.rounded-2xl .formatting__text.prose p:last-child,
div.rounded-2xl .prose p:last-child {
    margin-bottom: 0;
}

/* Мобильная версия блока */
@media (max-width: 768px) {
    div.rounded-2xl:has(.formatting__text.prose),
    div.rounded-2xl:has(h5) {
        padding: 1rem 1.25rem !important;
    }
}





/* ========== Верхняя часть (шапка) только на мобильном ========== */
:root {
    --header-mobile-bg: #0f58c8;   /* синий фон шапки на мобильном */
    /* Свой логотип на мобильном: раскомментируйте и укажите путь к картинке */
    --mobile-logo-url: url("/images/logotype/Logo_phone.jpg"); 
}

@media (max-width: 1023px) {
    /* Синий фон шапки */
    mat-toolbar.mat-toolbar,
    .mat-toolbar {
        background: var(--header-mobile-bg) !important;
        border-radius: 0 0 1.5rem 1.5rem;
    }

    mat-toolbar .mat-toolbar-row,
    .mat-toolbar .mat-toolbar-row {
        background: transparent !important;
        border-color: rgba(255, 255, 255, 0.15);
    }

    /* Белые ссылки и текст в шапке на мобильном */
    .mat-toolbar .mdc-button__label,
    .mat-toolbar a[href],
    .mat-toolbar .text-\(--default-link\) {
        color: #fff !important;
    }
    .mat-toolbar a[href]:hover {
        color: rgba(255, 255, 255, 0.9) !important;
    }

    /* Иконка меню (гамбургер) — белая */
    .mat-toolbar .menu-icon,
    .mat-toolbar .menu-btn {
        color: #fff;
    }
    .mat-toolbar .menu-icon::before,
    .mat-toolbar .menu-icon::after {
        background-color: #fff;
    }

    /* Замена логотипа на мобильном: если задан --mobile-logo-url */
    .mat-toolbar a.logo {
        display: block;
        background-image: var(--mobile-logo-url, none);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        min-height: 50px;
        min-width: 140px;   /* чтобы фон-логотип имел площадь даже без img в потоке */
    }
    /* Скрываем исходную картинку, но НЕ выносим из потока — иначе ссылка схлопнется и фон не виден */
    .mat-toolbar a.logo img.block.lg\:hidden,
    .mat-toolbar a.logo img[class*="lg:hidden"] {
        opacity: 0;
        pointer-events: none;
        /* position: absolute убрано — из-за него ссылка теряла размеры и синий фон перекрывал лого */
    }
}



































/* ========== Иконка бренда (brand-icon) — видна при скролле ========== */
img[src*="brand-icon"] {
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10;
}

/* Родители не обрезают иконку при анимации шапки */
mat-toolbar:has(img[src*="brand-icon"]),
.mat-toolbar:has(img[src*="brand-icon"]) {
    overflow: visible !important;
}