@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

:root {
    --default-font-family: "Rubik", 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,
        #285af7 0%,
        #285af7 var(--gradient-percent-start),

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

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

    box-shadow: 0 6px 18px #285af7;
}

.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: #272737!important;
    --primary-background: #f7c528!important;
    --default-border-radius: var(10px)!important;
    --footer-background: #272737!important;
    --default-text-color: #285af7!important;
}



/* Контейнер: ободок, фон, скругление */
div.rounded-2xl:has(.formatting__text.prose),
div.rounded-2xl:has(h5) {
    border: 2px solid #285af7 !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: center;
    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: #285af7;
}

/* Абзацы в блоке */
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;
    }
}




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

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

/* Затемнение партнеров */
partner-links img {
  filter: grayscale(1);
  transition: filter 0.25s ease;
}
partner-links a:hover img,
partner-links a:focus-visible img {
  filter: grayscale(0);
}