/* Подключаем шрифты SourceSans3 с разными весами */
@font-face {
    font-family: 'SourceSans3';
    src: url('../assets/fonts/SourceSans3-Regular.woff2') format('woff2'),
         url('../assets/fonts/SourceSans3-Regular.woff')   format('woff');
    font-weight: 400; /* Regular */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SourceSans3';
    src: url('../assets/fonts/SourceSans3-Semibold.woff2') format('woff2'),
         url('../assets/fonts/SourceSans3-Semibold.woff')   format('woff');
    font-weight: 600; /* Semibold */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SourceSans3';
    src: url('../assets/fonts/SourceSans3-Bold.woff2') format('woff2'),
         url('../assets/fonts/SourceSans3-Bold.woff')   format('woff');
    font-weight: 700; /* Bold */
    font-style: normal;
    font-display: swap;
}

/* НОВЫЙ КОММЕНТАРИЙ: Это ПРАВИЛЬНОЕ и ВОССТАНОВЛЕННОЕ правило.
   Оно создает контейнер, который заканчивается ровно над нижним меню,
   и именно этот контейнер получает скроллбар, если контент не помещается. */
#invites-page {          
    height: calc(100% - var(--menu-height)); /* КЛЮЧЕВОЕ ИЗМЕНЕНИЕ: Высота = 100% родителя минус высота меню */
    overflow-y: auto;                        /* сохраняем прокрутку внутри этого блока */
}


/* Основные стили для страницы */
.invites-page {
    font-family: 'SourceSans3', sans-serif; /* Основной шрифт для всей страницы */
    background-color: #0c0c16;              /* Фон как на макете, более тёмный */
    margin: 0;                              /* Убираем отступы по умолчанию у body */
    padding: 0;                             /* Убираем внутренние отступы по умолчанию у body */
    width: 100%;                            /* Ширина на весь экран */
    min-height: 100vh;                      /* Минимальная высота на весь экран */
    display: flex;                          /* Включаем Flexbox для управления компоновкой */
    justify-content: flex-start;            /* На мобильных устройствах контент начинается сверху */
    align-items: center;                    /* Центрируем дочерние элементы по горизонтали */
    flex-direction: column;                 /* Дочерние элементы выстраиваются в колонку */
    box-sizing: border-box;                 /* Размеры включают в себя padding и border */
}

/* Добавлен медиа-запрос для центрирования на десктопе, как в html-stars.css */
@media (min-width: 601px) {
    .invites-page {
        justify-content: center; /* Центрируем контент по вертикали на больших экранах */
    }
}

/* Эта обёртка имеет внутренний отступ снизу, чтобы контент не “заезжал” под меню при прокрутке*/
.invites-wrapper {
    width: 100%;                                                /* Занимает всю ширину родителя */
    height: 100%;                                               /* Заставляем обертку занять 100% высоты родителя (#invites-page) */
    max-width: 390px;                                           /* Ограничиваем максимальную ширину на больших экранах */
    padding: 20px 20px;                                         /* Упрощенный padding, нижний убран */
    box-sizing: border-box;                                     /* Размеры включают в себя padding */
    display: flex;                                              /* Включаем Flexbox */
    flex-direction: column;                                     /* Элементы выстраиваются в колонку */
    align-items: center;                                        /* Центрируем контент внутри обертки */
    margin-left: auto;                                          /* Центрируем саму обертку по горизонтали */
    margin-right: auto;                                         /* Центрируем саму обертку по горизонтали */
}

/* Главный заголовок */
.invites-title {
    font-weight: 700;                                           /* Жирное начертание */
    font-size: 32px;                                            /* Размер шрифта */
    background: linear-gradient(to right, #ffc74e 0%, #fff 100%); /* Горизонтальный градиент для текста */
    -webkit-background-clip: text;                              /* Обрезаем фон по форме текста (для WebKit-браузеров) */
    background-clip: text;                                      /* Стандартное свойство обрезки фона по тексту */
    -webkit-text-fill-color: transparent;                       /* Делаем сам текст прозрачным, чтобы был виден градиент */
    text-align: center;                                         /* Выравнивание по центру */
    line-height: 1.2;                                           /* Межстрочный интервал */
    margin: 0;                                                  /* Убираем внешние отступы */
    flex-shrink: 0;
}

/* Контейнеры статистики (верхний и нижний) */
.stats-container, .summary-container {
    width: 100%;                  /* Занимают всю ширину */
    display: flex;                /* Включаем Flexbox */
    justify-content: space-between; /* Элементы равномерно распределяются по краям */
    gap: 15px;                    /* Расстояние между блоками статистики */
    flex-shrink: 0;
}


/* Блок одного элемента статистики */
.stat-box {
    flex: 1;                                     /* Блоки занимают равное пространство */
    background-color: rgba(31, 38, 44, 0.7);     /* Полупрозрачный фон (#181d22) */
    border-radius: 12px;                         /* Скругление углов */
    padding: 6px 15px;                          /* НОВЫЙ КОММЕНТАРИЙ: Вертикальные отступы уменьшены с 15px до 10px */
    text-align: center;                          /* Выравнивание текста по центру */
    display: flex;                               /* Включаем Flexbox для внутреннего выравнивания */
    flex-direction: column;                      /* Текст внутри выстраивается в колонку */
    justify-content: center;                     /* Центрирование по вертикали */
    align-items: center;                         /* Центрирование по горизонтали */
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2)); /* Добавляем тень, которая учитывает прозрачность */
}

/* Стили для верхних блоков статистики (тексты "+400" и "10%")*/
.stat-value {
    font-size: 38px;                             /* Размер шрифта для цифр и знаков */
    font-weight: 700;                            /* Жирное начертание */
    background: linear-gradient(to bottom, #fef9ec, #faae1e); /* Вертикальный градиент для текста */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Стили для нижнего текста статистики (тексты "per friend" и "of earning")*/
.stat-label {
    color: #f5e9be; /* цвет для подписи */
    font-size: 19px;  /* Размер шрифта подписи */
    position: relative; /* Включаем относительное позиционирование */
    bottom: 4px;        /* Сдвигаем элемент вверх на 2 пикселя от его нормального положения */
}

/* Описательный текст в центре (серым цветом и мелким шрифтом)*/
.invites-description {
    color: #bdbebe;      /* Светло-серый цвет текста */
    font-size: 15px;      /* Размер шрифта */
    text-align: center;   /* Выравнивание по центру */
    line-height: 1.5;     /* Межстрочный интервал */
    margin: 14px 0;       /* Отступы сверху (первое значение) и снизу (второе значение) */
    flex-shrink: 0;
}

/* Это контейнер с общей подложкой для ссылки и кнопок и тенью */
.referral-actions-container {
    width: 100%;                                  /* Занимает всю ширину */
    background-color: rgba(29, 34, 39, 0.7);    /* Полупрозрачный фон (#1b1f24) */
    border-radius: 14px;                          /* Скругление углов */
    border: 1px solid #26292e;                  /* Тонкая рамка */
    padding: 14px 15px 20px;                      /* Внутренние отступы (верхний отступ (первое значение) уменьшен для контроля расстояния над "Referral Link") */
    box-sizing: border-box;                       /* Размеры включают padding */
    display: flex;                                /* Включаем Flexbox */
    flex-direction: column;                       /* Элементы внутри выстраиваются в колонку */
    gap: 15px;                                    /* Расстояние между блоком ссылки и кнопками */
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4)); /* Добавляем тень */
    flex-shrink: 0;
}

/* Секция реферальной ссылки (теперь без собственного фона) */
.referral-section {
    width: 100%;          /* Занимает всю ширину */
    box-sizing: border-box; /* Размеры включают padding */
}
.referral-title {
    color: #e9dcb6;      /* Светло-желтый цвет */
    font-size: 21px;      /* Увеличенный размер шрифта */
    font-weight: 500;     /* Жирное начертание */
    margin-bottom: 12px;  /* Отступ снизу */
}
.link-box {
    display: flex;                     /* Включаем Flexbox */
    align-items: center;               /* Вертикальное выравнивание по центру */
    justify-content: space-between;    /* Элементы по краям */
    background-color: #252a30;         /* Темный фон для поля ввода */
    border: 1px solid #373a41;         /* Тонкая рамка */
    border-radius: 8px;                /* Скругление углов */
    padding: 10px 5px 10px 15px;       /* Внутренние отступы */
}
#referralLinkText {
    color: #ecdebc;     /* Цвет текста ссылки */
    font-size: 16px;      /* Размер шрифта ссылки */
}

/* Кнопка COPY */
.copy-button {
    background: linear-gradient(to bottom, #ffe308, #f4a919); /* Градиент фона */
    color: #180400;                                           /* Темный цвет текста */
    font-weight: 700;                                         /* Жирное начертание */
    font-size: 14px;                                          /* Размер шрифта */
    border: 2px solid #de8d01;                                /* Яркая рамка */
    border-radius: 16px;                                      /* Скругление углов */
    cursor: pointer;                                          /* Курсор в виде руки */
    transition: background-color 0.2s, transform 0.1s;        /* Плавные переходы для анимаций */
    width: 57px;                                              /* Фиксированная ширина */
    height: 28px;                                             /* Фиксированная высота */
    box-sizing: border-box;                                   /* Размеры включают рамку */
    display: flex;                                            /* Flexbox для центрирования текста */
    align-items: center;                                      /* Вертикальное центрирование */
    justify-content: center;                                  /* Горизонтальное центрирование */
    flex-shrink: 0;                                           /* Запрещает кнопке сжиматься */
}
.copy-button:active {
    transform: scale(0.95); /* Уменьшение при нажатии */
}
.copy-button:disabled {
    background: #8a8a93;  /* Серый фон для неактивной кнопки */
    border-color: #777;   /* Серая рамка */
    color: #fff;          /* Белый текст */
    cursor: default;      /* Стандартный курсор */
}

/* Кнопки действий "Share" и "Referrals" */
.copy-button.is-copied:disabled {
    color: #fff6cf;
    border-color: #d9a82d;
    background: linear-gradient(145deg, #806018, #3e351d);
    box-shadow: 0 0 0 1px rgba(255, 211, 92, 0.16), 0 0 14px rgba(255, 190, 40, 0.22);
    opacity: 1;
    font-size: 18px;
    animation: referral-copy-confirm 360ms cubic-bezier(.2, .85, .3, 1);
}

@keyframes referral-copy-confirm {
    0% { transform: scale(.82); }
    65% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.action-buttons {
    width: 100%;     /* Занимают всю ширину */
    display: flex;   /* Включаем Flexbox */
    gap: 15px;       /* Расстояние между кнопками */
}
.action-btn {
    flex: 1;                         /* Кнопки занимают равное пространство */
    display: flex;                   /* Flexbox для иконки и текста */
    align-items: center;             /* Вертикальное выравнивание */
    justify-content: center;         /* Горизонтальное выравнивание */
    gap: 8px;                        /* Расстояние между иконкой и текстом */
    background-image: linear-gradient(to bottom, #3a3f46, #202328); /* Градиент для создания основного эффекта объема */
    color: #e0e0e0;                  /* Светлый цвет текста */
    border: 1px solid #1c1f23;       /* Кнопкам добавлена тонкая темная рамка для четкости */
    border-radius: 12px;             /* Скругляем углы */
    padding: 8px 12px;               /* Вы можете вручную менять высоту кнопок, изменяя первое значение */
    font-size: 16px;                 /* Размер шрифта */
    font-weight: 400;                /* Полужирное начертание */
    cursor: pointer;                 /* Курсор в виде руки */
    transition: background-color 0.2s, transform 0.15s ease-out; /* Плавные переходы */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); /* Внешняя тень, которую мы не убираем */
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1),  /* Внутренние тени для создания эффекта блика сверху и затенения снизу */
                inset 0 -1px 1px rgba(0, 0, 0, 0.2);
}
.action-btn:active {
    transform: scale(0.95); /* Уменьшение при нажатии */
}
.action-btn img {
    height: 16px; /* Высота иконки */
    width: auto;  /* Ширина автоматическая */
}

/* Разделитель */
.invites-separator {
    width: 100%;                /* Занимает всю ширину */
    height: 2px;                /* Толщина линии */
    background: linear-gradient( to right, rgba(85, 85, 85, 0) 0%, rgba(85, 85, 85, 0.5) 50%, rgba(85, 85, 85, 0) 100% );
    margin: 10px 0;             /* Отступ 10px сверху и снизу */
    flex-shrink: 0;
}

/* Стили для нижних блоков статистики */
.summary-box {
    flex: 1;                                     /* Блоки занимают равное пространство */
    background-color: rgba(23, 28, 34, 0.7);     /* Полупрозрачный фон (#1e242c) */
    border-radius: 12px;                         /* Скругление углов */
    padding: 6px 15px;                          /* НОВЫЙ КОММЕНТАРИЙ: Вертикальные отступы уменьшены с 15px до 10px */
    display: flex;                               /* Включаем Flexbox */
    flex-direction: column;                      /* Элементы выстраиваются в колонку */
    justify-content: center;                     /* Центрирование по вертикали */
    align-items: center;                         /* Центрирование по горизонтали */
    gap: 0px;                                    /* НОВЫЙ КОММЕНТАРИЙ: Расстояние между заголовком и значением уменьшено с 8px до 4px */
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2)); /* Добавляем тень */
}
.summary-label {
    color: #ffffff;   /* Белый цвет текста */
    font-size: 24px;    /* Увеличенный размер шрифта */
    font-weight: 200;   /* Жирное начертание */
}
.summary-value {
    display: flex;         /* Flexbox для иконки и цифр */
    align-items: center;   /* Вертикальное выравнивание */
    justify-content: center; /* Горизонтальное выравнивание */
    gap: 8px;              /* Расстояние между иконкой и цифрами */
    font-weight: 700;      /* Жирное начертание для всего блока */
}
.summary-value span {
    font-size: 30px;       /* Увеличенный размер цифр */
    background: linear-gradient(to bottom, #fef9ec, #faae1e); /* Градиент для цифр */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

 /* Параметры иконки "человечка" */
.summary-value .icon-invited {
    height: 25px; /* Размер иконки "человечка" */
    width: auto;
}

/* Параметры иконки "звезды" */
.summary-value .icon-earnings {
    height: 21px; /* Теперь мы можем независимо уменьшить размер иконки "звезды" до 20px */
    width: auto;
}

/* Referrals drawer. Existing Invites layout remains unchanged. */
.referrals-sheet-overlay {
    position: fixed;
    inset: 0 0 calc(var(--menu-height, 70px) + var(--safe-area-inset-bottom, 0px)) 0;
    z-index: 940;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background: rgba(4, 7, 12, 0);
    pointer-events: none;
    visibility: hidden;
    transition: background-color 260ms ease, visibility 0s linear 320ms;
}

.referrals-sheet-overlay.is-open {
    background: rgba(4, 7, 12, 0.72);
    pointer-events: auto;
    visibility: visible;
    transition: background-color 260ms ease;
}

.referrals-sheet-overlay.is-preparing {
    visibility: visible;
}

.referrals-sheet {
    width: min(100%, 390px);
    max-height: min(68vh, 520px);
    overflow: hidden;
    color: #f5f5f5;
    background: linear-gradient(155deg, rgba(37, 43, 51, 0.99), rgba(14, 18, 24, 0.99));
    border: 1px solid rgba(255, 197, 66, 0.28);
    border-radius: 22px 22px 14px 14px;
    box-shadow: 0 -16px 50px rgba(0, 0, 0, 0.48), 0 0 34px rgba(255, 179, 0, 0.08);
    transform: translate3d(0, calc(100% + 24px), 0);
    opacity: 0;
    transition: transform 340ms cubic-bezier(.22, .9, .28, 1), opacity 220ms ease;
    will-change: transform;
}

.referrals-sheet-overlay.is-open .referrals-sheet {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.referrals-sheet-handle {
    width: 42px;
    height: 4px;
    margin: 9px auto 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #8d6411, #ffd45d, #8d6411);
}

.referrals-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.referrals-sheet-kicker {
    color: #ffc53d;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.referrals-sheet-header h2 {
    margin: 2px 0 0;
    font-size: 25px;
    line-height: 1;
}

.referrals-sheet-close {
    padding: 8px 12px;
    color: #d5d7da;
    font: 600 13px 'SourceSans3', sans-serif;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
}

.referrals-sheet-list {
    max-height: min(50vh, 390px);
    overflow-y: auto;
    padding: 8px 14px 16px;
    overscroll-behavior: contain;
}

.referrals-sheet-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.referrals-sheet-number {
    color: #ffca45;
    font-size: 12px;
    font-weight: 700;
}

.referrals-sheet-identity {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.referrals-sheet-identity strong {
    overflow: hidden;
    color: #f4f4f4;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.referrals-sheet-identity span {
    color: #8f969e;
    font-size: 12px;
}

.referrals-sheet-reward {
    color: #ffd05a;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.referrals-sheet-empty {
    display: flex;
    min-height: 128px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    color: #9da2a8;
    text-align: center;
}

.referrals-sheet-empty strong {
    color: #f3d886;
    font-size: 18px;
}

.referrals-sheet-empty span {
    max-width: 250px;
    font-size: 13px;
}