@font-face {
    font-family: 'Chalk';
    src: url("../fonts/chalk.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}


@font-face {
    font-family: 'Chekharda';
    src: url("../fonts/Chekharda-BoldItalic.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat Alternates';
    src: url("../fonts/MontserratAlternates-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat Alternates';
    src: url("../fonts/MontserratAlternates-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat Alternates';
    src: url("../fonts/MontserratAlternates-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat Alternates';
    src: url("../fonts/MontserratAlternates-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat Alternates';
    src: url("../fonts/MontserratAlternates-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat Alternates';
    src: url("../fonts/MontserratAlternates-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
}


:root {
    --primary: #ff0095; /* основной яркий розовый */
    --secondary: #ffffff; /* белый — оставим для контраста */
    --accent: #ff0095; /* более тёмный акцент под основной цвет */
    --accent-dark: #99005c; /* ещё глубже, для hover/active состояний */
    --muted: #ffe6f2; /* светлый розово-пудровый фон */
    --highlight: #fff0fa; /* фон для выделения, едва розовый */
    --green: #00cc88; /* свежий контрастный зелёный для позитивных статусов */
    --gray-light: #f0f0f0; /* светло-серый, можно чуть потеплее */
    --text-main: #33001f; /* тёмный бордово-сливовый, читается на розовом фоне */
    --body-text: #fff000;

    --font-description: 'Jost';
    --font-four: 'Montserrat Alternates';
    --font-five: 'Chalk';
    --font-accent: 'Chekharda'
}


::selection {
    background: var(--accent)

}

.font-accent {
    font-family: var(--font-four), sans-serif;
}

.font-four {
    font-family: var(--font-four), serif;
}


.font-five {
    font-family: var(--font-five), serif;
}

.font-description {
    font-family: var(--font-description), sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 500;
}


/* ======= Базовые стили ======= */
body {
    font-family: var(--font-four), sans-serif;
    color: var(--text-main);
    background-color: var(--secondary);
    min-width: 576px;
}

h1, h2, h3, h4, h5, h6, p {
    font-family: var(--font-theerd), sans-serif;
}

.text-primary {
    color: var(--accent) !important;
}

.text-secondary {
    color: var(--secondary) !important;
}


.background-text {
    color: var(--body-text) !important;
}

.custom-card-style-1:hover {
    background: var(--highlight);
    box-shadow: 0 10px 15px -3px rgba(255, 0, 149, 0.3),
    0 4px 6px -2px rgba(255, 0, 149, 0.25) !important;
}

.timeline-number h3 {
    color: var(--accent)
}

.custom-margin-top {
    margin-top: -150px;
}


.hero-text__text {
    font-family: var(--font-five), sans-serif;
    color: var(--secondary);
    padding: 16px;
    backdrop-filter: blur(2px);
}

.nav-item__link:hover,.link-class:hover {
    color: var(--accent-dark) !important;
}

.button-primary {
    border: 1px solid var(--accent);
    background: var(--secondary);
    color: var(--accent);
}

.button-primary:hover {
    background: var(--accent);
    color: var(--secondary);
}


body {
    background: #ff0095;
    font-family: Jost, sans-serif;
    min-width: 320px;
}

.main {
    background: url("../img/background.jpg");
    background-size: contain;
    min-height: 100vh;
    /*min-height: calc(100vh - 120px);*/
}

.mh-user-card {
    min-height: 390px;
}

.coupon__item {
    min-width: 230px;
}

.gift-count__block {
    top: -18px;
    right: 10px;
    background: var(--accent);
    color: var(--bs-body-bg);
}


.helpSheetScroll { -webkit-overflow-scrolling: touch; }