/*
 * ==========================================================================
 * DESIGN SYSTEM - Responsive Breakpoints & Utilities
 * Extracted from casino reference site
 * ==========================================================================
 */

/* ==============================
 * BREAKPOINTS REFERENCE
 * ==============================
 *
 * --breakpoint-2xl: 1650px  (большие мониторы)
 * --breakpoint-xl:  1400px  (десктоп)
 * --breakpoint-lg:  1200px  (маленький десктоп)
 * --breakpoint-md:  992px   (планшет горизонтально)
 * --breakpoint-sm:  768px   (планшет вертикально)
 * --breakpoint-xs:  576px   (большой телефон)
 * --breakpoint-xxs: 400px   (маленький телефон)
 * --breakpoint-tiny: 350px  (очень маленький экран)
 *
 */


/* ==============================
 * RESPONSIVE TYPOGRAPHY
 * ============================== */

/* Заголовок H1 */
.text-h1 {
    font-size: 24px;
    line-height: 34px;
    font-weight: 700;
}
@media (max-width: 1400px) {
    .text-h1 { line-height: 38px; }
}
@media (max-width: 1200px) {
    .text-h1 { font-size: 22px; line-height: 36px; }
}
@media (max-width: 992px) {
    .text-h1 { font-size: 22px; line-height: 32px; }
}
@media (max-width: 576px) {
    .text-h1 { font-size: 20px; line-height: 30px; }
}
@media (max-width: 400px) {
    .text-h1 { font-size: 18px; line-height: 28px; }
}

/* Заголовок H2 */
.text-h2 {
    font-size: 20px;
    line-height: 32px;
    font-weight: 600;
}
@media (max-width: 992px) {
    .text-h2 { font-size: 18px; line-height: 30px; }
}
@media (max-width: 576px) {
    .text-h2 { font-size: 16px; line-height: 28px; }
}
@media (max-width: 400px) {
    .text-h2 { font-size: 14px; line-height: 26px; }
}

/* Заголовок H3 */
.text-h3 {
    font-size: 16px;
    line-height: 28px;
    font-weight: 600;
}
@media (max-width: 768px) {
    .text-h3 { font-size: 14px; line-height: 26px; }
}
@media (max-width: 400px) {
    .text-h3 { font-size: 12px; line-height: 24px; }
}

/* Основной текст */
.text-body {
    font-size: 16px;
    line-height: 26px;
}
@media (max-width: 992px) {
    .text-body { font-size: 14px; line-height: 24px; }
}
@media (max-width: 576px) {
    .text-body { line-height: 22px; }
}

/* Маленький текст */
.text-small {
    font-size: 14px;
    line-height: 20px;
}
@media (max-width: 992px) {
    .text-small { font-size: 13px; line-height: 19px; }
}
@media (max-width: 576px) {
    .text-small { font-size: 12px; line-height: 18px; }
}


/* ==============================
 * RESPONSIVE SPACING
 * ============================== */

/* Секции */
.section-gap {
    margin-top: 60px;
}
@media (max-width: 992px) {
    .section-gap { margin-top: 50px; }
}
@media (max-width: 768px) {
    .section-gap { margin-top: 40px; }
}
@media (max-width: 576px) {
    .section-gap { margin-top: 30px; }
}

/* Отступы в карточках */
.card-padding {
    padding: 25px;
}
@media (max-width: 992px) {
    .card-padding { padding: 20px; }
}
@media (max-width: 576px) {
    .card-padding { padding: 15px; }
}

/* Отступы в панелях */
.panel-padding {
    padding: 35px;
}
@media (max-width: 992px) {
    .panel-padding { padding: 25px; }
}
@media (max-width: 576px) {
    .panel-padding { padding: 20px; }
}


/* ==============================
 * RESPONSIVE GRID
 * ============================== */

/* 4 колонки -> 3 -> 2 -> 1 */
.grid-4 {
    display: flex;
    flex-wrap: wrap;
    margin: -15px;
}
.grid-4 > * {
    width: calc(25% - 30px);
    margin: 15px;
}
@media (max-width: 1400px) {
    .grid-4 > * { width: calc(33.333% - 30px); }
}
@media (max-width: 1200px) {
    .grid-4 > * { width: calc(50% - 30px); }
}
@media (max-width: 576px) {
    .grid-4 > * { width: calc(100% - 30px); }
}

/* 3 колонки -> 2 -> 1 */
.grid-3 {
    display: flex;
    flex-wrap: wrap;
    margin: -15px;
}
.grid-3 > * {
    width: calc(33.333% - 30px);
    margin: 15px;
}
@media (max-width: 1200px) {
    .grid-3 > * { width: calc(50% - 30px); }
}
@media (max-width: 768px) {
    .grid-3 > * { width: calc(100% - 30px); }
}

/* 2 колонки -> 1 */
.grid-2 {
    display: flex;
    flex-wrap: wrap;
    margin: -15px;
}
.grid-2 > * {
    width: calc(50% - 30px);
    margin: 15px;
}
@media (max-width: 768px) {
    .grid-2 > * { width: calc(100% - 30px); }
}


/* ==============================
 * RESPONSIVE VISIBILITY
 * ============================== */

/* Скрыть на мобильных */
.hide-mobile {
    display: block;
}
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
}

/* Скрыть на планшетах и меньше */
.hide-tablet {
    display: block;
}
@media (max-width: 992px) {
    .hide-tablet { display: none !important; }
}

/* Скрыть на десктопе */
.hide-desktop {
    display: none;
}
@media (max-width: 992px) {
    .hide-desktop { display: block !important; }
}

/* Показать только на мобильных */
.show-mobile {
    display: none;
}
@media (max-width: 768px) {
    .show-mobile { display: block !important; }
}


/* ==============================
 * RESPONSIVE FLEX UTILITIES
 * ============================== */

/* Колонка на мобильных */
.flex-col-mobile {
    display: flex;
}
@media (max-width: 768px) {
    .flex-col-mobile {
        flex-direction: column;
    }
}

/* Колонка на планшетах */
.flex-col-tablet {
    display: flex;
}
@media (max-width: 992px) {
    .flex-col-tablet {
        flex-direction: column;
    }
}


/* ==============================
 * RESPONSIVE IMAGES/ICONS
 * ============================== */

/* Аватар пользователя */
.avatar {
    width: 70px;
    height: 70px;
    min-width: 70px;
    min-height: 70px;
    border-radius: 12px;
}
@media (max-width: 400px) {
    .avatar {
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
        border-radius: 10px;
    }
}

/* Иконка в списке */
.icon-md {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
}
@media (max-width: 400px) {
    .icon-md {
        width: 16px;
        height: 16px;
        min-width: 16px;
        min-height: 16px;
    }
}


/* ==============================
 * RESPONSIVE CONTAINERS
 * ============================== */

/* Контейнер страницы */
.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
}
@media (max-width: 768px) {
    .container { padding: 0 30px; }
}
@media (max-width: 400px) {
    .container { padding: 0 15px; }
}

/* Горизонтальный скролл на мобильных */
.scroll-x-mobile {
    max-width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scroll-x-mobile::-webkit-scrollbar {
    display: none;
}


/* ==============================
 * RESPONSIVE BUTTONS
 * ============================== */

.btn-responsive {
    padding: 18px 24px;
    font-size: 14px;
    border-radius: 30px;
}
@media (max-width: 992px) {
    .btn-responsive {
        padding: 16px 20px;
        font-size: 12px;
    }
}
@media (max-width: 576px) {
    .btn-responsive {
        padding: 8px 14px;
        font-size: 10px;
    }
}

/* Скрыть текст кнопки на мобильных */
@media (max-width: 576px) {
    .btn-icon-mobile > span {
        display: none;
    }
    .btn-icon-mobile > svg {
        margin-left: 0;
    }
}