@charset "utf-8";
/* CSS Document */
/* Основний контейнер */
.profile-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Заголовок */
.profile-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

/* Блок информации */
.profile-info {
    font-family: Arial, sans-serif;
    color: #555;
}

/* Дата регистрации */
.profile-date {
    text-align: center;
    font-size: 16px;
    margin-bottom: 20px;
}

.profile-date span {
    color: #000;
    font-weight: bold;
}

/* Таблиця */
.profile-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
}

/* Строки таблицы */
.profile-row {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}

/* Левая колонка (названия полей) */
.profile-label {
    font-weight: bold;
    color: #333;
    padding: 8px;
    text-align: left;
    width: 60%;
}

/* Правая колонка (значения полей) */
.profile-value {
    color: #000;
    padding: 8px;
    text-align: left;
    width: 40%;
}
/* Блок аватара */
.profile-avatar {
    text-align: center;
    margin-bottom: 20px;
}

/* Зображення аватара */
.avatar-image {
    width: 150px;
    height: 150px;
    border-radius: 50%; /* Кругла форма */
    object-fit: cover; /* Сохранение пропорций */
    border: 2px solid #ddd; /* Легка рамка */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Лёгкое затенение */
}
/* Основний контейнер */
.settings-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Заголовок */
.settings-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

/* Общее содержимое */
.settings-content {
    font-family: Arial, sans-serif;
    color: #555;
}

/* Раздел настроек */
.settings-section {
    margin-bottom: 20px;
}

/* Заголовок раздела */
.settings-section h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

/* Таблиця форми */
.settings-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
}

/* Строки таблицы */
.settings-table tr {
    border-bottom: 1px solid #ddd;
}

/* Левая колонка (названия полей) */
.settings-table td:first-child {
    font-weight: bold;
    color: #333;
    padding: 8px;
    text-align: left;
    width: 40%;
}

/* Права колонка (поля вводу) */
.settings-table td:last-child {
    padding: 8px;
    text-align: left;
    width: 60%;
}

/* Поля вводу */
.settings-table input[type="password"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

/* Кнопка отправки */
.submit-button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-button:hover {
    background-color: #0056b3;
}

/* Подсказка для пароля */
.password-hint {
    font-size: 14px;
    color: #777;
    text-align: center;
    margin-top: 10px;
}

/* Сообщения об ошибках */
.error-message {
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 20px;
}

/* Сообщения об успехе */
.success-message {
    background-color: #d4edda;
    color: #155724;
    padding: 10px;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 20px;
}

/* Основний контейнер */
.settings-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Заголовок */
.settings-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

/* Контейнер для вкладок */
.tabs {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

/* Кнопки вкладок */
.tab-button {
    padding: 10px 20px;
    background-color: #e9ecef;
    border: none;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.tab-button.active {
    background-color: #007bff;
    color: #fff;
}

.tab-button:hover {
    background-color: #0056b3;
    color: #fff;
}

/* Контент для вкладок */
.tab-content {
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Скрытые вкладки */
.tab-content[style*="display: none"] {
    display: none;
}

/* Форма */
.settings-form {
    width: 100%;
}

/* Таблиця форми */
.settings-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
}

/* Строки таблицы */
.settings-table tr {
    border-bottom: 1px solid #ddd;
}

/* Левая колонка (названия полей) */
.settings-table td:first-child {
    font-weight: bold;
    color: #333;
    padding: 8px;
    text-align: left;
    width: 40%;
}

/* Права колонка (поля вводу) */
.settings-table td:last-child {
    padding: 8px;
    text-align: left;
    width: 60%;
}

/* Поля вводу */
.settings-table input[type="text"],
.settings-table input[type="email"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

/* Кнопка отправки */
.submit-button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-button:hover {
    background-color: #0056b3;
}

/* Предпросмотр аватара */
.avatar-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    border: 2px solid #ddd;
}

/* Поле загрузки файла */
.settings-table input[type="file"] {
    margin-top: 5px;
}

/* Випадаючий список */
.settings-table select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

/* Стиль для поля даты */
.settings-table input[type="date"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box; /* Для корректного отображения ширины */
    background-color: #fff;
    color: #333;
    cursor: pointer; /* Меняем курсор для лучшего UX */
}

/* Исправление стиля для браузеров, которые добавляют собственные стили */
.settings-table input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.5); /* Меняем цвет иконки календаря */
    cursor: pointer;
}

/* Подсказка для поля даты */
.settings-table input[type="date"]::placeholder {
    color: #aaa;
    font-style: italic;
}
/* Стиль для поля загрузки файла */
.settings-table input[type="file"] {
    display: none; /* Скрываем стандартную кнопку */
}

/* Кастомная кнопка для загрузки аватара */
.custom-file-upload {
    display: inline-block;
    padding: 8px 16px;
    background-color: #007bff;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

.custom-file-upload:hover {
    background-color: #0056b3;
}

/* Предпросмотр аватара */
.avatar-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    border: 2px solid #ddd;
}

/* Основний контейнер */
.partner-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Заголовок */
.partner-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

/* Основное содержимое */
.partner-content {
    font-family: Arial, sans-serif;
    color: #555;
    line-height: 1.6;
}

/* Ссылки для рефералов */
.referral-link {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

.link-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.link-text {
    font-size: 16px;
    color: #007bff;
    word-break: break-all;
}

/* Количество рефералов */
.referral-count {
    text-align: center;
    font-size: 18px;
    margin-bottom: 20px;
}

.highlight {
    font-weight: bold;
    color: #000;
}

/* Таблиця */
.partner-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

/* Заголовки таблицы */
.table-header {
    background-color: #007bff;
    color: #fff;
    font-weight: bold;
    text-align: center;
}

.table-header th {
    padding: 10px;
}

/* Строки таблицы */
.table-row {
    border-bottom: 1px solid #ddd;
}

.table-row td {
    padding: 10px;
    text-align: center;
    font-size: 14px;
}

/* Если нет данных */
.no-data {
    text-align: center;
    color: #777;
    font-style: italic;
}

/* Общий доход */
.total-income {
    text-align: center;
    font-size: 16px;
    margin-top: 20px;
}
/* Уникальный контейнер */
.topup-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Заголовок */
.topup-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

/* Основное содержимое */
.topup-content {
    font-family: Arial, sans-serif;
    color: #555;
    line-height: 1.6;
}

.finance-test-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid #e1b84f;
    border-left: 5px solid #c98b10;
    border-radius: 7px;
    background: #fff6d8;
    color: #654807;
    box-shadow: 0 2px 8px rgba(116, 78, 0, .08);
}

.finance-test-notice__icon {
    display: grid;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 50%;
    background: #c98b10;
    color: #fff;
    font-weight: 800;
}

.finance-test-notice strong { display: block; margin-bottom: 3px; }
.finance-test-notice p { margin: 0; line-height: 1.4; }

/* Выделенный текст */
.topup-highlight {
    color: red;
    font-weight: bold;
}

/* Форма */
.topup-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Лейбл */
.topup-label {
    font-weight: bold;
    color: #333;
}

/* Поле вводу */
.topup-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.topup-input:focus {
    border-color: #007bff;
    outline: none;
}

/* Текст результату */
.topup-result {
    font-weight: bold;
    color: #007bff;
}

/* Кнопка */
.topup-submit-button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.topup-submit-button:hover {
    background-color: #0056b3;
}

/* Форма оплати */
.topup-payment-form {
    display: flex;
    justify-content: center;
}

.topup-payment-form .topup-submit-button {
    margin-top: 20px;
}
/*########################################*/
/*####                                ####*/
/*########################################*/
/* Основний контейнер */
/* Контейнер */
.withdraw-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Заголовок */
.withdraw-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

/* Основное содержимое */
.withdraw-content {
    font-family: Arial, sans-serif;
    color: #555;
    line-height: 1.6;
}

/* Форма */
.withdraw-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Таблиця форми */
.withdraw-table {
    width: 100%;
    border-collapse: collapse;
}

.withdraw-table td {
    padding: 8px;
    vertical-align: middle;
}

/* Поле вводу */
.withdraw-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.withdraw-input:focus {
    border-color: #007bff;
    outline: none;
}

/* Вимкнене поле */
.withdraw-input-disabled {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    background-color: #f0f0f0;
    color: #888;
    cursor: not-allowed;
}

/* Кнопка */
.withdraw-submit-button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.withdraw-submit-button:hover {
    background-color: #0056b3;
}

/* История выплат */
.withdraw-history {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.withdraw-history th,
.withdraw-history td {
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
}

.withdraw-history th {
    background-color: #007bff;
    color: #fff;
    font-weight: bold;
}

.withdraw-history tr:nth-child(even) {
    background-color: #f9f9f9;
}

.withdraw-history tr:hover {
    background-color: #f1f1f1;
}

/* Сообщения об ошибках */
.error-message {
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 20px;
}

/* Сообщения об успехе */
.success-message {
    background-color: #d4edda;
    color: #155724;
    padding: 10px;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 20px;
}
/*########################################*/
/*####                                ####*/
/*########################################*/
/* Контейнер */
.exchange-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Заголовок */
.exchange-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

/* Основное содержимое */
.exchange-content {
    font-family: Arial, sans-serif;
    color: #555;
    line-height: 1.6;
}

/* Форма */
.exchange-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Таблиця форми */
.exchange-table {
    width: 100%;
    border-collapse: collapse;
}

.exchange-table td {
    padding: 8px;
    vertical-align: middle;
}

/* Поле вводу */
.exchange-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.exchange-input:focus {
    border-color: #007bff;
    outline: none;
}

/* Результат обмена */
.exchange-result {
    font-weight: bold;
    color: #007bff;
}

/* Кнопка */
.exchange-submit-button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.exchange-submit-button:hover {
    background-color: #0056b3;
}

/* Сообщения об ошибках */
.error-message {
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 20px;
}

/* Сообщения об успехе */
.success-message {
    background-color: #d4edda;
    color: #155724;
    padding: 10px;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 20px;
}

/*########################################*/
/*####                                ####*/
/*########################################*/

/* Контейнер */
.bonus-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Заголовок */
.bonus-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

/* Основное содержимое */
.bonus-content {
    font-family: Arial, sans-serif;
    color: #555;
    line-height: 1.6;
}

/* Форма */
.bonus-form {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* Кнопка */
.bonus-submit-button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.bonus-submit-button:hover {
    background-color: #0056b3;
}

/* Сообщения об ошибках */
.bonus-error-message {
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 20px;
}

/* Таблица истории бонусов */
.bonus-history-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.bonus-history-table th,
.bonus-history-table td {
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
}

.bonus-history-table th {
    background-color: #007bff;
    color: #fff;
    font-weight: bold;
}

.bonus-history-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.bonus-history-table tr:hover {
    background-color: #f1f1f1;
}

/* Сообщения об успехе */
.success-message {
    background-color: #d4edda;
    color: #155724;
    padding: 10px;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 20px;
}
/*########################################*/
/*####                                ####*/
/*########################################*/
/* Контейнер */
.lottery-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Заголовок */
.lottery-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

/* Основное содержимое */
.lottery-content {
    font-family: Arial, sans-serif;
    color: #555;
    line-height: 1.6;
}

/* Форма */
.lottery-form {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* Кнопка */
.lottery-submit-button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.lottery-submit-button:hover {
    background-color: #0056b3;
}

/* Таблица победителей */
.lottery-winners-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.lottery-winners-table th,
.lottery-winners-table td {
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
}

.lottery-winners-table th {
    background-color: #007bff;
    color: #fff;
    font-weight: bold;
}

.lottery-winners-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.lottery-winners-table tr:hover {
    background-color: #f1f1f1;
}

/* Таблица билетов */
.lottery-tickets-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.lottery-tickets-table th,
.lottery-tickets-table td {
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
}

.lottery-tickets-table th {
    background-color: #007bff;
    color: #fff;
    font-weight: bold;
}

.lottery-tickets-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.lottery-tickets-table tr:hover {
    background-color: #f1f1f1;
}

/* Сообщения об ошибках */
.error-message {
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 20px;
}

/* Сообщения об успехе */
.success-message {
    background-color: #d4edda;
    color: #155724;
    padding: 10px;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 20px;
}
/*########################################*/
/*####                                ####*/
/*########################################*/
/* Контейнер */
.farm-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Заголовок */
.farm-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

/* Основное содержимое */
.farm-content {
    font-family: Arial, sans-serif;
    color: #555;
    line-height: 1.6;
}

/* Контейнер для блоков */
.farm-items-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Три столбца одинаковой ширины */
    gap: 20px; /* Отступ между блоками */
}

/* Блок ферми */
.farm-block {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
	width: 300px;
}

/* Зображення */
.farm-image img {
    width: 200px;
    height: 200px;
    /*object-fit: cover;*/
    border-radius: 4px;
}

/* Детали */
.farm-details {
    margin-top: 10px;
    flex-grow: 1;
}

/* Заголовок блоку */
.farm-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

/* Информация */
.farm-info {
    margin-bottom: 5px;
    font-size: 14px;
    color: #555;
}

/* Кнопка */
.farm-submit-button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.farm-submit-button:hover {
    background-color: #0056b3;
}

/* Попередження */
.farm-warning {
    color: #808e04;
    font-weight: bold;
}

/* Адаптивность */
@media (max-width: 992px) {
    .farm-items-container {
        grid-template-columns: repeat(2, 1fr); /* Два столбца на планшетах */
    }
}

@media (max-width: 600px) {
    .farm-items-container {
        grid-template-columns: 1fr; /* Один столбец на мобильных устройствах */
    }
}
/*########################################*/
/*####                                ####*/
/*########################################*/
/* Контейнер */
.warehouse-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Заголовок */
.warehouse-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

/* Основное содержимое */
.warehouse-content {
    font-family: Arial, sans-serif;
    color: #555;
    line-height: 1.6;
}

/* Линия с информацией о плодах */
.warehouse-line {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.warehouse-line img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    margin-right: 10px;
    border-radius: 4px;
}

.warehouse-amount {
    font-weight: bold;
    color: #007bff;
}

/* Кнопка */
.warehouse-submit-button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.warehouse-submit-button:hover {
    background-color: #0056b3;
}

/* Таблиця */
.warehouse-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.warehouse-table th,
.warehouse-table td {
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
}

.warehouse-table th {
    background-color: #007bff;
    color: #fff;
    font-weight: bold;
}

.warehouse-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.warehouse-table tr:hover {
    background-color: #f1f1f1;
}

/* Сообщения об ошибках */
.error-message {
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 20px;
}

/* Сообщения об успехе */
.success-message {
    background-color: #d4edda;
    color: #155724;
    padding: 10px;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 20px;
}
/*########################################*/
/*####                                ####*/
/*########################################*/
/* Контейнер */
.shop-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Заголовок */
.shop-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

/* Основное содержимое */
.shop-content {
    font-family: Arial, sans-serif;
    color: #555;
    line-height: 1.6;
}

/* Таблиця */
.shop-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.shop-table th,
.shop-table td {
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
}

.shop-table th {
    background-color: #007bff;
    color: #fff;
    font-weight: bold;
}

.shop-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.shop-table tr:hover {
    background-color: #f1f1f1;
}

/* Кнопка */
.shop-submit-button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.shop-submit-button:hover {
    background-color: #0056b3;
}

/* Сообщения об ошибках */
.error-message {
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 20px;
}

/* Сообщения об успехе */
.success-message {
    background-color: #d4edda;
    color: #155724;
    padding: 10px;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 20px;
}

/* Курс продажу */
.shop-rate {
    color: #f59f97;
    font-weight: bold;
}
/*########################################*/
/*####                                ####*/
/*########################################*/
/* Блок для рассылки */
.form__row {
    display: flex;
    align-items: center;
}

.input-row {
    display: flex;
    flex-direction: column;
    margin-right: 10px;
}

.input-row__info {
    display: flex;
    flex-direction: column;
}

.input-row__label {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.input-row__desc {
    font-size: 14px;
    color: #666;
}

/* Перемикач (Switcher) */
.switcher {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
}

.switcher input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switcher__i {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 15px;
}

.switcher__i:before {
    position: absolute;
    content: "";
    height: 21px;
    width: 21px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.switcher input:checked + .switcher__i {
    background-color: #007bff;
}

.switcher input:checked + .switcher__i:before {
    transform: translateX(25px);
}
.success-message {
    color: green;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
}

.error-message {
    color: red;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
}

img.silver-coin {
    width: 20px;
    height: 20px;
    position: relative;
    top: 5; /* Измените значение для перемещения вверх/вниз */
}
img.fruit {
    width: 20px;
    /*height: 20px;*/
    position: relative;
    top: 5; /* Измените значение для перемещения вверх/вниз */
}

.farm-info {
    margin-bottom: 5px;
	    text-align: left;
}
}

.farm-info:last-child {
    margin-bottom: 10px; /* Добавляем отступ после последней информационной линии */
}

.harvest-section {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Размещаем урожай и кнопку на одном уровне */
}

.harvest-section .farm-info {
    flex-grow: 1; /* Обеспечиваем, что текст об урожае занимает большую часть пространства */
    margin-right: 10px;
}

.harvest-button {
    background-color: #FF9800;
    color: white;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 14px;
	margin-top: 5px;
}

.harvest-button:hover {
    background-color: #FF5722;
}

#user-money {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
}

.fruit-storage {
    margin-top: 20px;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.fruit-storage div {
    margin-bottom: 5px;
    font-size: 14px;
    color: #333;
}

/*#######################################
##
########################################*/
.fruit-warehouse-container {
    font-family: Arial, sans-serif;
    margin: 20px auto;
    width: 100%;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.fruit-warehouse-title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
    color: #4CAF50;
}

.fruit-warehouse-content p {
    text-align: center;
    margin-bottom: 20px;
    font-size: 16px;
    color: #333;
}

.fruit-storage-blocks {
    display: flex;
    flex-wrap: wrap; /* Разрешаем переносить строки */
    justify-content: flex-start; /* Центрируем блоки */
    gap: 20px; /* Расстояние между блоками */
}

.fruit-storage-item {
    width: calc(30% - 10px); /* 3 колонки */
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 120px; /* Минимальная высота блока */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Стиль для изображения фруктов */
.fruit-icon {
    width: 100px; /* Ширина зображення */
    height: 100px; /* Висота зображення */
    object-fit: cover; /* Обеспечиваем, что изображение не деформируется */
    margin-bottom: 10px;
}

.fruit-name {
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.fruit-count {
    font-size: 16px;
    color: #555;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .fruit-storage-item {
        width: calc(50% - 20px); /* 2 колонки на мобильных */
    }

    .fruit-icon {
        width: 80px; /* Уменьшаем размер изображения для меньших экранов */
        height: 80px;
    }
}

@media (max-width: 480px) {
    .fruit-storage-item {
        width: 100%; /* 1 колонка на дуже маленьких екранах */
    }

    .fruit-icon {
        width: 60px; /* Ещё больше уменьшаем размер для очень маленьких экранов */
        height: 60px;
    }
}
/*###########################################
##
###########################################*/
/* Кнопка продажу */
.sell-fruit-button {
    display: block;
    margin-top: 10px;
    background-color: #FF5722; /* Оранжевый цвет */
    color: white;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.sell-fruit-button:hover {
    background-color: #E64A19; /* Тёмный оранжевый при наведении */
}
/*#####################################
##
#####################################*/
img.coinfruit {
    width: 20px;
    /* height: 20px; */
    position: relative;
    top: 0;
}

/*#########################################
##
#########################################*/

/* Стили для всплывающего сообщения */
.toast-message {
    display: none; /* Приховано за замовчуванням */
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 15px 25px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    font-size: 16px;
    text-align: center;
    min-width: 250px;
}

.toast-message.success {
    background-color: #28a745; /* Зелёный цвет для успешных сообщений */
}

.toast-message.error {
    background-color: #dc3545; /* Красный цвет для ошибок */
}
/*#########################################
##
#########################################*/
img.info-coin {
    width: 25px;
    height: 25px;
    position: relative;
    top: 8;
}

/* Контейнер для подсказки */
.tooltip-link {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* Сам текст подсказки */
.tooltip-text {
    visibility: hidden;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    border-radius: 5px;
    position: absolute;
    bottom: 125%; /* Расположение подсказки над элементом */
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

/* Стрелочка */
.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}

/* Показываем подсказку при наведении */
.tooltip-link:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}
/*############################################
##
############################################*/
/* Основний стиль кнопки */
.sell-fruit-button {
    position: relative;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    transition: 0.3s;
}

.sell-fruit-button:hover {
    background: #45a049;
}

/* Стиль подсказки */
.tooltip {
    position: absolute;
    bottom: 130%; /* Поднимаем над кнопкой */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Маленький треугольник подсказки */
.tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}

/* Показываем подсказку при наведении */
.sell-fruit-button:hover .tooltip {
    opacity: 1;
    visibility: visible;
}
/*#######################################
##
#######################################*/

img.coinfruit2 {
    width: 20px;
    /* height: 20px; */
    position: relative;
    top: 5px;
	margin-right: 10px;
}

img.tree_n{
    width: 120px;
    height: 150px;
    position: relative;
    /*top: 5px;*/
	margin-right: 10px;
}
/*#########################################
##
#########################################*/
.footer-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1px;
    /*background: #333;*/
    color: white;
    text-align: center;
        margin-top: 10px;
}

.footer-text {
    flex: 1;
    text-align: center;
}

.footer-images {
    display: flex;
    gap: 10px; /* Отступы между картинками */
}

.footer-images img {
    width: 60px; /* Задаём размер иконок */
    height: 60px;
	margin: 0px 10px;
}

/* Modern public footer and its admin controls. */
.footer-container{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(180px,.85fr) minmax(240px,1.3fr) minmax(180px,.85fr);gap:24px;align-items:center;max-width:1180px;margin:26px auto 0;padding:19px 24px;overflow:hidden;border:1px solid rgba(192,220,145,.54);border-radius:18px 18px 0 0;color:#f7f6dd;text-align:left;background:linear-gradient(117deg,#123d2d,#1f6040 55%,#265b35);box-shadow:0 -6px 22px rgba(30,67,40,.15)}
.footer-container__glow{position:absolute;z-index:-1;right:-40px;bottom:-78px;width:260px;height:180px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,208,78,.23),transparent 67%)}
.footer-brand{display:flex;align-items:center;gap:11px}.footer-brand__seal{display:grid;width:48px;height:48px;place-items:center;overflow:hidden;border:1px solid #ffe697;border-radius:15px;background:linear-gradient(145deg,#f9d875,#c17a25);box-shadow:inset 0 1px rgba(255,255,255,.68),0 4px 0 rgba(56,76,31,.58)}.footer-brand__seal img{display:block;width:100%;height:100%;object-fit:cover}.footer-brand strong{display:block;color:#fff8cf;font:700 19px/1 Georgia,serif;letter-spacing:.2px}.footer-brand span{display:block;margin-top:5px;color:#c5e4c1;font-size:11px;font-weight:700}
.footer-text{min-width:0;color:#d8ead1;text-align:center}.footer-text p{margin:3px 0;font-size:12px;line-height:1.45}.footer-text a{color:#ffe68c;text-decoration:none;font-weight:800}.footer-text a:hover{text-decoration:underline}
.footer-social{justify-self:end;min-width:0}.footer-social__caption{display:block;margin-bottom:7px;color:#d6efbd;font-size:10px;font-weight:800;letter-spacing:.08em;text-align:right;text-transform:uppercase}.footer-social__links{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:7px}.footer-social__link{display:grid;width:32px;height:32px;place-items:center;border:1px solid rgba(255,255,255,.4);border-radius:10px;color:#fff;text-decoration:none;background:rgba(255,255,255,.12);box-shadow:0 3px 0 rgba(0,0,0,.16);transition:transform .18s ease,background .18s ease,box-shadow .18s ease}.footer-social__link span{font:800 16px/1 Arial,sans-serif}.footer-social__link--vk span{font-size:10px}.footer-social__link:hover{transform:translateY(-3px) scale(1.06);color:#fff;background:#3f8f63;box-shadow:0 6px 12px rgba(0,0,0,.2)}.footer-social__link--youtube:hover{background:#cf3d37}.footer-social__link--telegram:hover{background:#258ec4}.footer-social__link--facebook:hover{background:#4367a8}.footer-social__link--instagram:hover{background:#b44978}
.footer-admin-page{max-width:1110px;margin:0 auto}.footer-admin-hero{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding:18px;border:1px solid #82b78a;border-radius:16px;color:#f6f8d8;background:linear-gradient(120deg,#194c35,#347849);box-shadow:0 8px 20px rgba(30,74,45,.17)}.footer-admin-hero__icon{display:grid;width:47px;height:47px;place-items:center;border:2px solid #ffe699;border-radius:13px;color:#6c4611;font-size:24px;background:linear-gradient(#fff1ab,#d89529);box-shadow:0 3px 0 #84521b}.footer-admin-hero h2{margin:0 0 4px;font:700 24px/1 Georgia,serif}.footer-admin-hero p{margin:0;color:#d6ead3;font-size:13px}.footer-admin-card{margin-bottom:14px;padding:17px;border:1px solid #bfd6ad;border-radius:14px;background:#fbfff5;box-shadow:0 5px 14px rgba(47,71,40,.08)}.footer-admin-card--main{display:flex;align-items:center;justify-content:space-between;gap:22px}.footer-admin-field{display:grid;gap:6px;min-width:280px;color:#355d3d;font-size:12px;font-weight:800}.footer-admin-field input,.footer-admin-network input{width:100%;box-sizing:border-box;border:1px solid #b9cfad;border-radius:8px;padding:9px 10px;color:#294932;background:#fff}.footer-admin-card__heading h3{margin:0 0 4px;color:#285b3b;font:700 20px/1 Georgia,serif}.footer-admin-card__heading p{margin:0 0 14px;color:#61775f;font-size:12px}.footer-admin-networks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.footer-admin-network{display:grid;grid-template-columns:minmax(118px,.65fr) auto minmax(160px,1fr);align-items:center;gap:10px;padding:9px 10px;border:1px solid #d3e4c7;border-radius:10px;background:linear-gradient(135deg,#fffef8,#edf6e7)}.footer-admin-network__name{display:flex;align-items:center;gap:8px;color:#315a3b;font-size:12px}.footer-admin-network__mark{display:grid;width:27px;height:27px;place-items:center;border-radius:8px;color:#fff;background:#43865a;font:800 14px/1 Arial}.footer-admin-toggle{display:inline-flex;align-items:center;gap:9px;cursor:pointer;color:#29593a;font-size:12px}.footer-admin-toggle input{position:absolute;opacity:0}.footer-admin-toggle>span{position:relative;width:42px;height:23px;border-radius:99px;background:#b8c4b3;transition:.18s}.footer-admin-toggle>span::after{position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;content:'';background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.18s}.footer-admin-toggle input:checked+span{background:#3e9a57}.footer-admin-toggle input:checked+span::after{transform:translateX(19px)}.footer-admin-toggle--small{gap:5px;white-space:nowrap;font-size:10px}.footer-admin-toggle--small>span{width:34px;height:19px}.footer-admin-toggle--small>span::after{top:3px;left:3px;width:13px;height:13px}.footer-admin-toggle--small input:checked+span::after{transform:translateX(15px)}.footer-admin-actions{display:flex;justify-content:flex-end}.footer-admin-flash{margin:0 0 13px;padding:11px 13px;border-radius:9px;font-size:13px;font-weight:700}.footer-admin-flash--success{color:#23633a;background:#e2f5dd;border:1px solid #9bcc90}.footer-admin-flash--error{color:#8b382c;background:#fff0ea;border:1px solid #e6b0a2}
@media(max-width:780px){.footer-container{grid-template-columns:1fr;gap:14px;padding:18px;margin-top:18px;border-radius:14px 14px 0 0;text-align:center}.footer-brand{justify-content:center}.footer-social{justify-self:center}.footer-social__caption{text-align:center}.footer-social__links{justify-content:center}.footer-admin-card--main{align-items:stretch;flex-direction:column}.footer-admin-field{min-width:0}.footer-admin-networks{grid-template-columns:1fr}.footer-admin-network{grid-template-columns:minmax(112px,.7fr) auto minmax(140px,1fr)}}@media(max-width:490px){.footer-admin-hero{padding:14px}.footer-admin-hero h2{font-size:20px}.footer-admin-network{grid-template-columns:1fr auto}.footer-admin-network input{grid-column:1/-1}.footer-admin-toggle b{font-size:11px}}
/*######################################
##
######################################*/
/* Базовый стиль для блоков даты */
/* Базовый стиль для блоков даты */
.tree-detail {
    font-size: 13px;
    font-weight: bold;
    padding: 5px 10px;
    margin: 5px 0;
    text-align: center;
    border-radius: 6px;
    border-bottom: 3px solid; /* Нижний бордер */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); /* Тень для текста */
}

/* Дата покупки — зелёный градиент */
.purchase-date {
    background: linear-gradient(90deg, #32CD32, #7CFC00); /* Градиент от лаймового до светло-зелёного */
    border-bottom-color: #228B22; /* Темно-зелений бордер */
    color: #fff; /* Белый текст */
    text-shadow: 2px 2px 6px rgba(0, 50, 0, 0.6); /* Зелёная мягкая тень */
}

/* Дата засыхания — красный градиент */
.dry-date {
    background: linear-gradient(90deg, #DC143C, #FF4500); /* Градиент от тёмно-красного до ярко-красного */
    border-bottom-color: #8B0000; /* Темно-червоний бордер */
    color: #fff; /* Белый текст */
    text-shadow: 2px 2px 6px rgba(50, 0, 0, 0.6); /* Красная мягкая тень */
}
/*#############################################
## раздел контакти
#############################################*/

.contacts-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.contacts-container h1 {
    color: #4caf50;
    text-align: center;
}

.contacts-container h2 {
    color: #333;
    margin-top: 15px;
}

.contacts-container ul {
    padding-left: 20px;
}

.contacts-container ul li {
    margin-bottom: 10px;
}

.contacts-container a {
    color: #007bff;
    text-decoration: none;
}

.contacts-container a:hover {
    text-decoration: underline;
}
/*########################################
##  Страница новостей
########################################*/
/* Контейнер новин */
.news-container {
    font-family: Arial, sans-serif;
    margin: 20px auto;
    width: 80%;
    max-width: 1200px;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Заголовок страницы */
.news-title {
    text-align: center;
    font-size: 28px;
    margin-bottom: 20px;
    color: #4CAF50;
}

/* Контейнер списку новин */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Блок одной новости */
.news-item {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	margin: 0px 0px 20px 5px;
}

/* Заголовок новини */
.news-item .news-title {
    font-size: 16px;
    margin-bottom: 0px;
    color: #1a12ce;
}

/* Метаданные новости (дата и автор) */
.news-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
    color: #777;
}

/* Короткий опис новини */
.news-short-desc {
    font-size: 16px;
    color: #555;
    margin-bottom: 10px;
}

/* Текст новини */
.news-content {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
}

/* Адаптивность */
@media (max-width: 768px) {
    .news-container {
        width: 90%;
    }

    .news-item {
        padding: 10px;
    }

    .news-item .news-title {
        font-size: 20px;
    }

    .news-short-desc {
        font-size: 14px;
    }

    .news-content {
        font-size: 14px;
    }
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.pagination-button {
    background-color: #4CAF50;
    color: white;
    border: 2px solid #000000;
    padding: 5px 13px;
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.3s ease;
    margin: 20px 0;
}
.pagination-button:hover {
    background-color: #45a049;
}

.pagination-button.active {
    background-color: #FFC107;
}

.news-item {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    background: #fff;
}

.news-image {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 10px;
}
.hidden {
    display: none;
}

.expand-button {
    margin-top: 0px;
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

.expand-button:hover {
    background-color: #0056b3;
}
/* Стили для разделительной линии */
.news-divider {
    border: none; /* Убираем стандартный бордер */
    height: 1px; /* Толщина линии */
    background-color: #ccc; /* Цвет линии */
    margin: 10px 0; /* Отступы сверху и снизу */
}
/* Стили для изображений */
.news-image {
    max-width: 100%; /* Изображение не выходит за границы контейнера */
    height: auto; /* Сохраняем пропорции */
    margin-bottom: 10px; /* Отступ под изображением */
}

/* Прихований контент */
.hidden {
    display: none;
}

/* Кнопка «Развернуть» */
.expand-button {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 0.9em;
}

.expand-button:hover {
    background-color: #0056b3;
}

/* Разделительная линия */
.news-divider {
    border: none;
    height: 1px;
    background-color: #ccc;
    margin: 10px 0;
}

/* Стили для изображений */
.news-image {
    max-width: 100%; /* Изображение не выходит за границы контейнера */
    height: auto; /* Сохраняем пропорции */
    margin: 0 auto 10px; /* Выравниваем по центру и добавляем отступ снизу */
    display: block; /* Робимо зображення блоковим елементом */
    width: auto; /* Автоматична ширина */
    max-height: none; /* Отключаем ограничение высоты */
}

/* Прихований контент */
.hidden {
    display: none;
}

/* Кнопка «Развернуть» */
.expand-button {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 0.9em;
}

.expand-button:hover {
    background-color: #0056b3;
}

/* Разделительная линия */
.news-divider {
    border: none;
    height: 1px;
    background-color: #ccc;
    margin: 10px 0;
}

/*########################################
##
########################################*/



header {
    background-color: #4CAF50;
    color: white;
    padding: 1rem;
    text-align: center;
}

#search {
    width: 90%;
    padding: 0.5rem;
    margin: 1rem auto;
    display: block;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#wiki-content {
    padding: 1rem;
}
/*############################################
##
############################################*/
/* Горизонтальный блок уровня пользователя */
/* Горизонтальный блок уровня пользователя */
.user-level-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(96, 84, 5, 0.7);
    padding: 15px 20px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
}

/* Контейнер шкали прогресу */
.xp-progress-container {
    width: 250px;
    height: 20px;
    background-color: #444; /* Фон шкали */
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

/* Шкала прогресу */
.xp-progress-bar {
    height: 100%;
    width: var(--progress, 0%); /* Устанавливаем ширину через CSS-переменную */
    background: linear-gradient(to right, 
        #4CAF50 0%, #4CAF50 calc(var(--progress) * 1%), /* Зелений до поточного прогресу */
        #FFC107 calc(var(--progress) * 1%), #FFC107 100% /* Золотий залишок */
    );
    transition: width 0.3s ease; /* Анимация заполнения */
}

/* Текст на шкале */
	.xp-label {
		position: absolute;
		top: 4px;
		left: 50%;
		transform: translate(-50%, -50%);
		color: white;
		font-size: 12px;
		z-index: 1;
	}
/* Контейнер аватара */
.user-avatar-container {
    position: relative;
    width: 100px;
    height: 100px;
}

.user-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%; /* Округлий аватар */
    cursor: pointer;
}

.level-badge {
    position: absolute;
    top: 0px;
    right: -7px;
    background-color: rgb(255 193 7 / 80%);
    color: #151414;
    font-size: 12px;
    font-weight: bold;
    padding: 3px 7px;
    border-radius: 3px;
    border: 1px solid #10100f;
    font-weight: bold;
}
/* Информация про користувача */
.user-info {
    margin-left: 15px;
    flex-grow: 1; /* Растягивается на доступную ширину */
}

.user-name {
    color: white;
    font-size: 14px;
    margin: 0;
}

/* Шкала прогресу XP */
/* Контейнер шкали прогресу */
.xp-progress-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20px;
}

/* Шкала прогресу */
.xp-progress-bar {
    display: grid;
    grid-template-columns: repeat(60, 1fr); /* 60 сегментов */
    gap: 1px; /* Промежуток между сегментами */
    width: 100%;
    max-width: 400px; /* Максимальна ширина шкали */
    background-color: #333; /* Фон для пустых сегментов */
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

/* Сегменти шкали */
.xp-segment {
    height: 20px;
    background-color: rgba(255, 255, 255, 0.2); /* Прозрачный фон для пустых сегментов */
    transition: background-color 0.3s ease; /* Анимация при заполнении */
}

/* Заполненные сегменты */
.xp-segment.filled {
    background-color: #0eaf04; /* Зелёный цвет для заполненных сегментов */
}

/* Подпис к шкале */
.xp-label {
    margin-top: 6px;
    font-size: 16px;
    color: white;
}
/* Меню користувача */
.user-menu {
    display: flex;
    gap: 10px;
}

.menu-button {
    background-color: #333;
    color: white;
    border: none;
    padding: 8px 15px;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.menu-button:hover {
    background-color: #555;
}

/* Стили для кнопок меню */
.achievements-button {
    background-color: #4CAF50; /* Зелена */
}

.upgrades-button {
    background-color: #2196F3; /* Синя */
}

.stats-button {
    background-color: #FFC107; /* Золота */
}

.leaderboard-button {
    background-color: #F44336; /* Червона */
}

.inventory-button {
    background-color: #795548;
}

.character-button {
    background-color: #558b2f;
}

.academy-button {
    background-color: #5c6bc0;
}

.guild-button {
    background-color: #00897b;
}

.battles-button {
    background-color: #c62828;
}

.tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    z-index: 10;
    display: none;
}

.user-avatar:hover + .tooltip {
    display: block;
}

.collapse-button {
    background-color: #222;
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.collapse-button:hover {
    background-color: #444;
}

.user-level-block.collapsed {
    height: 40px;
    overflow: hidden;
    padding: 5px 10px;
}
/*##########################################
#####
##########################################*/
/* Загальний контейнер футера */
/*.footer-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #333;
    color: white;
    padding: 15px 20px;
    margin-top: 20px;
    width: 100%;
}*/

/* Левая часть футера (иконки) */
.footer-images.left {
    display: flex;
    gap: 10px;
}

/*.footer-images img {
    width: 30px;
    height: 30px;
}*/

/* Центральна частина футера (текст) */
.footer-text {
    text-align: center;
    flex-grow: 1; /* Растягиваем текст по центру */
}

.footer-text p {
    margin: 5px 0;
    font-size: 14px;
}

.footer-text a {
    color: #4CAF50; /* Зелёный цвет посилань */
    text-decoration: none;
}

.footer-text a:hover {
    text-decoration: underline;
}

/* Правая часть футера (соцсети) */
.footer-social.right {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Розташування справа */
    gap: 10px; /* Промежуток между рядами */
}

.social-row {
    display: flex;
    gap: 10px; /* Промежуток между иконками */
}

.social-row a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%; /* Округлые иконки */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.social-row a:hover {
    transform: scale(1.2); /* Эффект увеличения при наведении */
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.5); /* Зелёная рамка при наведении */
}

.social-row img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.social-row a {
    opacity: 0; /* Скрываем иконки сначала */
    transform: scale(0.5); /* Масштаб 50% спочатку */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/*######################################
##
######################################*/
.upgrades-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
    padding: 3px;
    color: #03541b;
    position: relative;
    margin: 5px;
}

.upgrade-tooltip {
    position: absolute;
    bottom: 110%; /* Поднимает подсказку над изображением */
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    padding: 8px;
    border-radius: 5px;
    font-size: 14px;
    width: 130px; /* Фиксированная ширина */
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.upgrade-card {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    box-shadow: 1px 0px 7px rgba(0, 0, 0, 0.2);
    position: relative;
    margin: 3px;
}

.upgrade-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.upgrade-image2 {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.upgrade-description h3 {
    font-size: 14px;
    margin-bottom: 10px;
}

.upgrade-description p {
    margin: 0;
}

.upgrade-container:hover .upgrade-tooltip {
    opacity: 1;
    visibility: visible;
}

.buy-upgrade-button {
    position: relative;
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 8px 12px;
    margin-top: 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 1.00);
}

.buy-upgrade-button:hover {
    background-color: #45a049;
}

.buy-upgrade-button[data-tooltip]:after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%; /* Показати над кнопкою */
    left: 75%;
    transform: translateX(-50%);
    background-color: rgba(91, 208, 32, 0.9);
    color: #0C8001;
    padding: 5px 10px;
    border-radius: 3px;
    border: 1px solid #0C8001;
    white-space: nowrap;
    font-size: 12px;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s;
    white-space: pre-line; /* Добавляет поддержку новой строки */
    margin: 3px;
    font-weight: bold;
    width: 120px; /* Фиксированная ширина */
}

.buy-upgrade-button[data-tooltip] {
    position: relative;
}

.buy-upgrade-button:hover:after {
    visibility: visible;
    opacity: 1;
}


/*###########################################*/

.locked {
    color: red;
    font-weight: bold;
}

.active {
    color: green;
    font-weight: bold;
}
p.p-p{ 
	font-size: 12px;}
/*
#############################################
###
#############################################*/

/* Контейнер меню */
.upgrades-menu-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 20px auto;
    color: white;
    border-radius: 10px;
    overflow: hidden;
   
}

/* Горизонтальне меню */
.upgrades-menu-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #4CAF50;
    width: 100%;
	border: 1px solid #ffff;
}

.upgrades-menu-item {
    flex-grow: 1;
    text-align: center;
    padding: 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: relative;
    font-weight: bold;
	font-size: 15px;
}

.upgrades-menu-item:hover {
    background-color: #45a049;
}

/* Секции (разделы) */
.upgrades-section {
    display: none; /* Скрываем все секции по умолчанию */
    width: 100%;
    color: #148f02;
    /*border-top: 1px solid #4CAF50;*/
}

.upgrades-section.active {
    display: block; /* Показываем активную секцию */
}

/* Нові функціональні картки магазину покращень. */
.farm-upgrade-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:15px; margin:18px 7px; }
.farm-upgrade-card { position:relative; display:flex; min-height:168px; overflow:hidden; border:1px solid #d0b06a; border-radius:14px; color:#314d35; background:linear-gradient(140deg,#fffbe8,#e6f1dc); box-shadow:0 7px 18px rgba(48,76,39,.16); }
.farm-upgrade-card.is-active { border-color:#6caa58; box-shadow:0 0 0 2px rgba(108,170,88,.25),0 7px 18px rgba(48,76,39,.16); }
.farm-upgrade-card.is-locked { filter:saturate(.45); opacity:.76; }.farm-upgrade-card__image { width:86px; height:86px; flex:0 0 86px; margin:13px 0 0 11px; object-fit:contain; }.farm-upgrade-card__body { display:flex; flex:1; min-width:0; flex-direction:column; padding:12px 11px 12px 9px; }.farm-upgrade-card h3 { margin:0 0 5px; color:#29533b; font:700 17px/1.1 Georgia,serif; }.farm-upgrade-card p { margin:0; font-size:12px; line-height:1.35; }.farm-upgrade-card__meta { display:flex; align-items:baseline; justify-content:space-between; gap:6px; margin-top:auto; padding-top:8px; }.farm-upgrade-card__meta b { color:#bd7221; font-size:18px; }.farm-upgrade-card__meta span { color:#66745a; font-size:11px; }.farm-upgrade-card em { display:block; margin-top:8px; color:#8a5929; font-size:11px; font-style:normal; }.farm-upgrade-card__active { color:#35743e !important; font-weight:700; }.farm-upgrade-card__buy { display:flex; gap:4px; margin-top:8px; }.farm-upgrade-buy { flex:1; border:0; border-radius:6px; padding:6px 3px; color:#fff; cursor:pointer; font-weight:700; font-size:11px; background:#3f8850; }.farm-upgrade-buy:hover { background:#2f6f3e; }.farm-upgrade-buy:disabled { opacity:.55; cursor:wait; }
@media (max-width:560px) { .farm-upgrade-grid { grid-template-columns:1fr; }.farm-upgrade-card__image { width:76px; height:76px; flex-basis:76px; } }

/* Заголовки та тексти */
.upgrades-section-title {
    font-size: 24px;
    margin-bottom: 10px;
}

.upgrades-section-description {
    font-size: 16px;
    margin: 5px 0;
}

/* Cookie-подсказки для кнопок */
.upgrades-button[data-tooltip]:after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(91, 208, 32, 0.9);
    color: #0C8001;
    padding: 5px 10px;
    border-radius: 3px;
    border: 1px solid #0C8001;
    white-space: nowrap;
    font-size: 12px;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s;
    z-index: 10;
}

.upgrades-button:hover:after {
    visibility: visible;
    opacity: 1;
}
/*#########################################
##
#########################################*/

/* Стили для контейнера активных улучшений */
.active-upgrades {
    display: flex;
    flex-wrap: wrap; /* Позволяет элементам переходить на новую строку */
    gap: 15px; /* Расстояние между элементами */
    justify-content: flex-start; /* Выравнивание элементов по левому краю */
    /*padding: 10px;*/
}

/* Стили для каждого контейнера улучшения */
.upgrade-container {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    padding: 6px;
    text-align: center;
    box-shadow: 1px 0px 7px rgba(0, 0, 0, 0.2);
    position: relative;
    /*width: 120px; /* Фиксированная ширина картки */
    text-align: center;
    /*margin-bottom: 20px;  Отступ снизу для каждой карточки */
    transition: transform 0.3s ease;
	cursor: pointer;
}

.upgrade-container:hover {
    transform: scale(1.05); /* Лёгкая анимация при наведении */
}

/* Стили для изображений в картках */
.upgrade-image2 {
    width: 40px;
    height: 40px;
    object-fit: cover;
    /*border-radius: 50%;
    margin-bottom: 10px; /* Отступ между изображением и подсказкой */
	
}

/* Стили для подсказок */
.upgrade-tooltip {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(-300% + 10px); /* на 10px ниже родительского блока */; /* Поднимает подсказку над изображением */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(6, 197, 0, 1); /* Фон подсказки */
    color: #fff;
    padding: 3px;
    border-radius: 5px;
    font-size: 14px;
    width: max-content;
    max-width: 150px; /* Максимальная ширина подсказки */
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Показ подсказки при наведении */
.upgrade-container:hover .upgrade-tooltip {
    opacity: 1;
    visibility: visible;
}

.active-upgrades{
/* Центрирование содержимого */
    display: flex; /* Включает Flexbox */
    justify-content: center; /* Центрирует по горизонтали */
    align-items: center; /* Центрирует по вертикали */
    text-align: center; /* Выравнивает текст по центру */
}
/*############################################
##
############################################*/
/* Основний стиль кнопки */
.sell-fruit-free {
    position: relative;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    transition: 0.3s;
	margin-top: 15;
}

.sell-fruit-free:hover {
    background: #45a049;
}

/*############################################
##
############################################*/
/* Основний стиль кнопки */
.sell-fruit-new {
    position: relative;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    transition: 0.3s;
	margin-top: 15;
}

.sell-fruit-new:hover {
    background: #45a049;
}

/*############################################
##
############################################*/
/* Стили для всплывающей подсказки */
.custom-tooltip {
    display: none; /* По умолчанию подсказка невидима */
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    z-index: 9999;
    width: 200px; /* Ширина подсказки */
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    top: 120%; /* Расстояние вниз от кнопки */
    left: 50%; /* Центрирование подсказки по горизонтали */
    transform: translateX(-50%); /* Центрирование по оси X */
}

/* Показываем подсказку при наведении на кнопку */
.sell-fruit-free:hover .custom-tooltip {
    display: block;
}

/* Стили для самих кнопок, чтобы их было легко нажимать */
.sell-fruit-free {
    position: relative; /* Для правильного отображения подсказки */
    padding: 10px 20px;
    font-size: 16px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.sell-fruit-free:hover {
    background-color: #218838;
}
.f_de{
	padding: 0 20px;
}

.upgrades-menu-item.active {
    font-weight: bold; /* Выделение активного пункта жирным */
    
	background: #ffffff;
}

.b_lvl{color: #ff0000;}
/*переводчик*/
.language-switcher {
    position: relative;
    display: inline-block;
}

.lang-button {
    background: none;
    border: none;
    cursor: pointer;
}

.lang-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.lang-dropdown {
    display: none;
    position: absolute;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    min-width: 120px;
    z-index: 1000;
}

.lang-dropdown a {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    text-decoration: none;
    color: #333;
    transition: background 0.3s;
}

.lang-dropdown a:hover {
    background: #f0f0f0;
}

.lang-dropdown a img {
    margin-right: 8px;
}

/* Показывать выпадающий список при наведении */
.language-switcher:hover .lang-dropdown {
    display: block;
}

/* Переключатель языка в кабинете пользователя */
.menu > li.lang-menu-item {
    display: flex;
    align-items: center;
}

.language-switcher--cabinet {
    margin: 0 4px;
}

.language-switcher--cabinet .lang-dropdown {
    right: 0;
    left: auto;
}

.menu-container .language-switcher--cabinet .lang-button {
    padding: 4px 6px;
    line-height: 0;
}


.character-slider {
    text-align: center;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.slider-container {
    display: flex;
    align-items: center;
    justify-content: center;
    /*margin: 20px 0;*/
}

.nav-btn {
    font-size: 14px;
    padding: 5px;
    cursor: pointer;
    background: #ddd;
    border: none;
    border-radius: 5px;
    /* margin: 0 10px; */
}

.nav-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.character-display {
    text-align: center;
    width: 320px;
    position: relative; /* Для позиционирования анимации */
    overflow: hidden; /* Чтобы элементы не выходили за границы во время анимации */
}

.character-display img {
    width: 100px;
    height: auto;
    border-radius: 10px;
    margin-bottom: 10px;
    transition: transform 0.5s ease, opacity 0.5s ease; /* Плавный переход для зображення */
}

.character-display h2, .character-display p {
    transition: transform 0.5s ease, opacity 0.5s ease; /* Плавный переход для тексту */
}

/* Классы для анимации */
.slide-left {
    transform: translateX(-100%);
    opacity: 0;
}

.slide-right {
    transform: translateX(100%);
    opacity: 0;
}

.slide-center {
    transform: translateX(0);
    opacity: 1;
}

.select-btn {
    padding: 10px 20px;
    font-size: 16px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.select-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

#message {
    margin-top: 10px;
    color: green;
}
p.p_size{font-size: 14px;}



/* Заголовок */
.topup-title {
    font-size: 1.5em;
    text-align: center;
    color: #01622b;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

/* Контейнер контенту */
.topup-content {
    max-width: 600px;
    margin: 0 auto;
    padding: 0px;
}

/* Текст */
.topup-content p {
    font-size: 0.79em;
    line-height: 1.2;
    margin: 10px 0;
}

.topup-content a {
    color: #ff007a;
    text-decoration: none;
    transition: color 0.3s;
}

.topup-content a:hover {
    color: #ff4da6;
}

.topup-highlight {
    color: #ffcc00;
    font-weight: bold;
}

/* Форма */
.topup-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 25px;
}

.topup-label {
    font-size: 1.2em;
    color: #b0c4de;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.topup-input {
    padding: 12px;
    font-size: 1em;
    background: #e2e2e2;
    color: #2f6f08;
    border: 2px solid #00d4ff;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.topup-input:focus {
    border-color: #ff007a;
    box-shadow: 0 0 8px rgba(255, 0, 122, 0.6);
}

.topup-result {
    color: #ffcc00;
    font-weight: bold;
    font-size: 1.2em;
}

/* Платёжные системы */
.payment-systems {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 25px;
    flex-wrap: wrap;
}

.payment-system {
    width: 80px;
    height:80px;
    object-fit: contain;
    border: 2px solid #00d4ff;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.payment-system:hover {
    transform: scale(1.1);
    border-color: #ff007a;
    box-shadow: 0 0 12px rgba(255, 0, 122, 0.6);
}

.payment-system.active {
    border-color: #00ff00; /* Зелёная обводка */
    transform: scale(1.1); /* Тот же размер, что при наведении */
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.6); /* Зелёная тень */
}

/* Кнопка */
.topup-submit-button {
    padding: 12px 20px;
    font-size: 1.2em;
    background: linear-gradient(90deg, #00d4ff, #ff007a);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.topup-submit-button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.8);
}

/* Контейнер для форми оплати */
.payment-form-container {
    display: none;
    margin-top: 25px;
    text-align: center;
}

.payment-form-container form {
    display: inline-block;
}

/* Сообщение об ошибке */
.error-message {
    display: none;
    background: rgba(255, 51, 51, 0.2);
    color: #ff3333;
    border: 2px solid #ff3333;
    text-align: center;
    font-size: 0.7em;
}

.topup-cancel-button {
    background-color: #ff4444;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
	margin-top: 15px;
}

.topup-cancel-button:hover {
    background-color: #cc0000;
}

.settings-title {
        font-size: 24px;
        margin-bottom: 20px;
    }
    .tabs {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
    }
    .tab-button {
        padding: 10px 20px;
        cursor: pointer;
        border: none;
        background: #f0f0f0;
        border-radius: 5px;
    }
    .tab-button.active {
        background: #007bff;
        color: white;
    }
    .tab-content {
        display: none;
    }
    .tab-content.active {
        display: block;
    }
    .settings-form {
        width: 100%;
    }
    .settings-table {
        width: 100%;
        border-collapse: collapse;
    }
    .settings-table td {
        padding: 10px;
        vertical-align: top;
    }
    .settings-table label {
        font-weight: bold;
    }
    .settings-table input,
    .settings-table select {
        width: 100%;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    .settings-table input:disabled,
    .settings-table select:disabled {
        background: #f0f0f0;
        cursor: not-allowed;
    }
    .avatar-container {
        margin-bottom: 10px;
    }
    .avatar-preview {
        max-width: 100px;
        border-radius: 50%;
    }
    .custom-file-upload {
        display: inline-block;
        padding: 8px 12px;
        background: #007bff;
        color: white;
        border-radius: 4px;
        cursor: pointer;
        margin-right: 10px;
    }
    .custom-file-upload.disabled {
        background: #ccc;
        cursor: not-allowed;
    }
    .avatar-filename {
        display: block;
        max-width: 300px;
        margin-bottom: 10px;
        color: #666;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .save-avatar-button {
        padding: 8px 12px;
        background: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    .save-avatar-button:disabled {
        background: #ccc;
        cursor: not-allowed;
		margin-top: 10px;
    }
    .avatar-controls {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .switcher {
        display: inline-block;
        position: relative;
        width: 50px;
        height: 24px;
    }
    .switcher input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    .switcher__i {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: 0.4s;
        border-radius: 24px;
    }
    .switcher__i:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        transition: 0.4s;
        border-radius: 50%;
    }
    input:checked + .switcher__i {
        background-color: #007bff;
    }
    input:checked + .switcher__i:before {
        transform: translateX(26px);
    }
    .submit-button {
        padding: 10px 20px;
        background: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    .submit-button.hidden {
        display: none;
    }
    .success-message, .error-message {
        padding: 10px;
        margin: 10px 0;
        border-radius: 4px;
    }
    .success-message {
        background: #d4edda;
        color: #155724;
    }
    .error-message {
        background: #f8d7da;
        color: #721c24;
    }

/* Вітрина модифікаторів XP. */
.xp-modifiers-section { padding:16px; color:#24422c; background:linear-gradient(150deg,#eef6e7,#e2f0dc); }
.xp-modifiers-hero { display:flex; align-items:center; gap:16px; margin:0 0 16px; padding:16px 20px; border:1px solid #9abd88; border-radius:16px; color:#fef8d6; background:radial-gradient(circle at 88% 20%,rgba(255,221,111,.26),transparent 27%),linear-gradient(120deg,#1c5838,#347849); box-shadow:0 9px 19px rgba(31,72,44,.2); }
.xp-modifiers-hero__mark { display:grid; flex:0 0 56px; width:56px; height:56px; place-items:center; border:2px solid #ffe597; border-radius:15px; color:#70440b; font:900 19px/1 Arial,sans-serif; background:linear-gradient(#fff1a7,#dc9c2d); box-shadow:inset 0 1px #fff9cf,0 4px 0 #89551b; }
.xp-modifiers-hero h2 { margin:0 0 5px; color:#fff8d4; text-align:left; font:700 24px/1.1 Georgia,serif; }.xp-modifiers-hero p { margin:0; color:#dcefd6; line-height:1.35; font-size:13px; }.xp-modifiers-section__intro { display:none; }
.xp-modifiers-section .upgrades-container { grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); gap:14px; margin:0; padding:0; }
.xp-modifier-card { min-height:302px; margin:0; padding:0; overflow:hidden; border:1px solid #bad09b; border-radius:14px; text-align:left; color:#29422f; background:linear-gradient(155deg,#fffdf1,#eaf5e3); box-shadow:0 7px 16px rgba(39,79,47,.15); transition:transform .18s ease,box-shadow .18s ease; }.xp-modifier-card:hover { transform:translateY(-4px); box-shadow:0 13px 23px rgba(39,79,47,.23); }
.xp-modifier-card .upgrade-description { display:flex; min-height:302px; flex-direction:column; padding:12px; }.xp-modifier-card__top { display:flex; align-items:center; justify-content:space-between; gap:5px; color:#56804f; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }.xp-modifier-card__tag { padding:4px 6px; border-radius:5px; color:#68420c; background:#ffe497; }
.xp-modifier-card h3 { margin:8px 0 4px; color:#244c33; font:700 20px/1.1 Georgia,serif; }.xp-modifier-card .upgrade-image { display:block; width:92px; height:92px; margin:4px auto 7px; padding:5px; border:1px solid #c7d9aa; border-radius:50%; object-fit:contain; background:radial-gradient(circle,#fff,#e6f2d9); }.xp-modifier-card p { margin:4px 0; font-size:12px; line-height:1.35; }.xp-modifier-card__bonus { display:flex; align-items:center; justify-content:space-between; margin-top:auto !important; padding:8px; border:1px solid #d9c166; border-radius:8px; background:#fff7cf; }.xp-modifier-card__bonus span { font-size:10px; font-weight:700; text-transform:uppercase; }.xp-modifier-card__bonus strong { color:#b76618; font-size:15px; }
.xp-modifier-card .buy-upgrade-button { min-width:32%; margin:10px 2px 0 0; border:1px solid #2f6d3d; border-radius:7px; padding:8px 4px; background:linear-gradient(#58a465,#347944); box-shadow:0 2px 0 #1d542b; font-weight:800; }.xp-modifier-card .buy-upgrade-button:hover { background:linear-gradient(#6ab778,#3f8a50); }.xp-modifier-card .active { display:block; margin-top:9px; padding:7px; border-radius:7px; color:#246438; background:#dff2d7; }.xp-modifier-card .locked { display:block; margin-top:9px; padding:7px; border-radius:7px; color:#934536; background:#fde8dc; }
.xp-modifier-card--tree { border-top:5px solid #6daa51; }.xp-modifier-card--harvest { border-top:5px solid #d49a37; }.xp-modifier-card--both { border-top:5px solid #638dc6; }
@media(max-width:560px){.xp-modifiers-section{padding:10px}.xp-modifiers-hero{padding:13px;gap:11px}.xp-modifiers-hero__mark{flex-basis:45px;width:45px;height:45px;font-size:15px}.xp-modifiers-hero h2{font-size:20px}.xp-modifiers-section .upgrades-container{grid-template-columns:1fr}.xp-modifier-card,.xp-modifier-card .upgrade-description{min-height:0}}

/* Компактний варіант вітрини XP. */
.xp-modifiers-section { padding:10px; }
.xp-modifiers-hero { gap:11px; margin-bottom:10px; padding:10px 13px; border-radius:12px; }
.xp-modifiers-hero__mark { flex-basis:42px; width:42px; height:42px; border-radius:11px; font-size:14px; box-shadow:inset 0 1px #fff9cf,0 2px 0 #89551b; }
.xp-modifiers-hero h2 { font-size:20px; }.xp-modifiers-hero p { font-size:11px; }
.xp-modifiers-section .upgrades-container { grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.xp-modifier-card { min-height:202px; border-radius:9px; }.xp-modifier-card .upgrade-description { min-height:202px; padding:7px; }.xp-modifier-card h3 { margin:4px 0 1px; font-size:15px; }.xp-modifier-card .upgrade-image { width:51px; height:51px; margin:1px auto 3px; padding:2px; }.xp-modifier-card p { margin:1px 0; font-size:10px; line-height:1.17; }.xp-modifier-card__bonus { display:block; padding:5px; border-radius:5px; }.xp-modifier-card__bonus strong { display:block; margin-top:1px; font-size:12px; }.xp-modifier-card .buy-upgrade-button { min-width:30%; margin-top:5px; padding:5px 2px; font-size:10px; }.xp-modifier-card .active,.xp-modifier-card .locked { margin-top:5px; padding:4px; font-size:9px; }
@media(max-width:900px){.xp-modifiers-section .upgrades-container{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:560px){.xp-modifiers-section .upgrades-container{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.xp-modifier-card,.xp-modifier-card .upgrade-description{min-height:195px}.xp-modifier-card .upgrade-image{width:49px;height:49px}.xp-modifier-card h3{font-size:14px}.xp-modifier-card__top{font-size:8px}}

/* Вітрини інших розділів магазину покращень. */
.upgrade-showcase { position:relative; overflow:hidden; margin-top:14px; padding:13px 12px 5px; border:1px solid var(--showcase-line,#bfd6ad); border-radius:17px; color:#294632; background:linear-gradient(128deg,var(--showcase-soft,#f5f8e9),#fffdf3 63%); box-shadow:0 10px 24px rgba(47,71,40,.11); }
.upgrade-showcase::before { content:''; position:absolute; z-index:0; top:-58px; right:-42px; width:195px; height:135px; border:18px solid var(--showcase-decor,rgba(97,149,79,.13)); border-radius:50%; transform:rotate(-21deg); }
.upgrade-showcase::after { content:''; position:absolute; z-index:0; top:18px; right:28px; width:78px; height:5px; border-radius:9px; opacity:.8; background:var(--showcase-accent,#6c9f57); box-shadow:0 11px 0 var(--showcase-accent,#6c9f57),0 22px 0 var(--showcase-accent,#6c9f57); }
.upgrade-showcase__heading,.upgrade-showcase .farm-upgrade-grid { position:relative; z-index:1; }.upgrade-showcase__heading { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:67px; padding:2px 128px 11px 8px; border-bottom:1px solid var(--showcase-line,#bfd6ad); }
.upgrade-showcase .upgrades-section-title { margin:0; color:var(--showcase-title,#2e693d); font:700 25px/1.05 Georgia,serif; letter-spacing:-.3px; }.upgrade-showcase .upgrades-section-title::after { content:''; display:block; width:48px; height:3px; margin-top:8px; border-radius:4px; background:var(--showcase-accent,#6c9f57); }.upgrade-showcase .upgrades-section-description { max-width:430px; margin:0; color:#60705e; font-size:13px; line-height:1.35; text-align:right; }.upgrade-showcase .farm-upgrade-grid { margin:14px 0 12px; }
.upgrade-showcase--trees { --showcase-soft:#edf7e7; --showcase-line:#a8cf9d; --showcase-accent:#5a9c54; --showcase-title:#276943; --showcase-decor:rgba(75,151,76,.14); }.upgrade-showcase--services { --showcase-soft:#eaf5f5; --showcase-line:#96c9c6; --showcase-accent:#378d91; --showcase-title:#1d6667; --showcase-decor:rgba(36,136,139,.14); }.upgrade-showcase--exclusive { --showcase-soft:#fff4dc; --showcase-line:#e8c47d; --showcase-accent:#c5872c; --showcase-title:#98571d; --showcase-decor:rgba(207,147,42,.15); }.upgrade-showcase--economy { --showcase-soft:#f3edfc; --showcase-line:#bfa8df; --showcase-accent:#7553a8; --showcase-title:#593a84; --showcase-decor:rgba(108,76,164,.14); }
.upgrade-showcase--trees .farm-upgrade-card { border-color:#b8d6ab; background:linear-gradient(140deg,#fffdf0,#e8f5df); }.upgrade-showcase--services .farm-upgrade-card { border-color:#a8d6d2; background:linear-gradient(140deg,#feffff,#e3f3f1); }.upgrade-showcase--exclusive .farm-upgrade-card { border-color:#e4c27e; background:linear-gradient(140deg,#fffdf7,#fff0cf); }.upgrade-showcase--economy .farm-upgrade-card { border-color:#c5b3e1; background:linear-gradient(140deg,#fffaff,#eee6fb); }
.upgrade-showcase--services .farm-upgrade-buy { background:#378488; }.upgrade-showcase--services .farm-upgrade-buy:hover { background:#276b6e; }.upgrade-showcase--exclusive .farm-upgrade-buy { background:#b97825; }.upgrade-showcase--exclusive .farm-upgrade-buy:hover { background:#965c17; }.upgrade-showcase--economy .farm-upgrade-buy { background:#6d50a0; }.upgrade-showcase--economy .farm-upgrade-buy:hover { background:#543983; }
@media(max-width:700px){.upgrade-showcase{padding:10px 8px 3px;border-radius:12px}.upgrade-showcase__heading{display:block;min-height:0;padding:2px 92px 10px 5px}.upgrade-showcase .upgrades-section-description{margin-top:8px;text-align:left}.upgrade-showcase::after{right:16px;width:53px}.upgrade-showcase .upgrades-section-title{font-size:21px}}

/* Єдиний компактний формат, як у вітрині XP. */
.upgrade-showcase { padding:10px; color:#24422c; border-color:#9abd88; border-radius:0; background:linear-gradient(150deg,#eef6e7,#e2f0dc); box-shadow:none; }.upgrade-showcase::before,.upgrade-showcase::after { display:none; }
.upgrade-showcase .xp-style-showcase__hero { display:flex; align-items:center; gap:11px; min-height:0; margin:0 0 10px; padding:10px 13px; border:1px solid #9abd88; border-bottom:1px solid #9abd88; border-radius:12px; color:#fef8d6; background:radial-gradient(circle at 88% 20%,rgba(255,221,111,.26),transparent 27%),linear-gradient(120deg,#1c5838,#347849); box-shadow:0 9px 19px rgba(31,72,44,.2); }
.upgrade-showcase .xp-style-showcase__hero::before { content:''; display:block; flex:0 0 42px; width:42px; height:42px; border:2px solid #ffe597; border-radius:11px; background:linear-gradient(#fff1a7,#dc9c2d); box-shadow:inset 0 1px #fff9cf,0 2px 0 #89551b; }.upgrade-showcase--trees .xp-style-showcase__hero::before { background:radial-gradient(circle at 50% 35%,#e4ff9e 0 17%,transparent 19%),linear-gradient(#9bd85e,#4c8e43); }.upgrade-showcase--services .xp-style-showcase__hero::before { background:linear-gradient(135deg,#a9f0e4 0 44%,#3d9d9a 45% 100%); }.upgrade-showcase--exclusive .xp-style-showcase__hero::before { background:radial-gradient(circle,#fff9c9 0 22%,#e6a634 24% 54%,#9a5d14 56%); }.upgrade-showcase--economy .xp-style-showcase__hero::before { background:linear-gradient(135deg,#f6e9a3 0 42%,#8e68c8 43% 100%); }
.upgrade-showcase .xp-style-showcase__hero > div { min-width:0; }.upgrade-showcase .xp-style-showcase__hero .upgrades-section-title { margin:0; color:#fff8d4; font:700 20px/1.1 Georgia,serif; letter-spacing:0; }.upgrade-showcase .xp-style-showcase__hero .upgrades-section-title::after { display:none; }.upgrade-showcase .xp-style-showcase__hero .upgrades-section-description { margin:0 0 0 auto; color:#dcefd6; font-size:11px; line-height:1.35; text-align:right; }
.upgrade-showcase .farm-upgrade-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin:0; }.upgrade-showcase .farm-upgrade-card { display:flex; min-height:202px; flex-direction:column; border-color:#bad09b; border-radius:9px; color:#29422f; background:linear-gradient(155deg,#fffdf1,#eaf5e3); box-shadow:0 7px 16px rgba(39,79,47,.15); transition:transform .18s ease,box-shadow .18s ease; }.upgrade-showcase .farm-upgrade-card:hover { transform:translateY(-4px); box-shadow:0 13px 23px rgba(39,79,47,.23); }.upgrade-showcase .farm-upgrade-card__image { width:51px; height:51px; flex:0 0 51px; margin:8px auto 0; padding:2px; border:1px solid #c7d9aa; border-radius:50%; object-fit:contain; background:radial-gradient(circle,#fff,#e6f2d9); }.upgrade-showcase .farm-upgrade-card__body { min-height:0; padding:7px; }.upgrade-showcase .farm-upgrade-card h3 { margin:4px 0 2px; color:#244c33; font:700 15px/1.1 Georgia,serif; }.upgrade-showcase .farm-upgrade-card p { margin:1px 0; font-size:10px; line-height:1.17; }.upgrade-showcase .farm-upgrade-card__meta { display:block; margin-top:auto; padding-top:5px; }.upgrade-showcase .farm-upgrade-card__meta b { display:block; color:#b76618; font-size:12px; }.upgrade-showcase .farm-upgrade-card__meta span { display:block; font-size:9px; }.upgrade-showcase .farm-upgrade-card em { margin-top:5px; padding:4px; border-radius:5px; font-size:9px; background:#fde8dc; }.upgrade-showcase .farm-upgrade-card__active { background:#dff2d7 !important; }.upgrade-showcase .farm-upgrade-card__buy { gap:2px; margin-top:5px; }.upgrade-showcase .farm-upgrade-buy { border:1px solid #2f6d3d; border-radius:5px; padding:5px 2px; font-size:10px; background:linear-gradient(#58a465,#347944); box-shadow:0 2px 0 #1d542b; }.upgrade-showcase .farm-upgrade-buy:hover { background:linear-gradient(#6ab778,#3f8a50); }
@media(max-width:900px){.upgrade-showcase .farm-upgrade-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:560px){.upgrade-showcase{padding:10px}.upgrade-showcase .xp-style-showcase__hero{display:flex;padding:10px;gap:8px}.upgrade-showcase .xp-style-showcase__hero::before{flex-basis:36px;width:36px;height:36px}.upgrade-showcase .xp-style-showcase__hero .upgrades-section-title{font-size:17px}.upgrade-showcase .xp-style-showcase__hero .upgrades-section-description{display:none}.upgrade-showcase .farm-upgrade-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.upgrade-showcase .farm-upgrade-card{min-height:195px}.upgrade-showcase .farm-upgrade-card__image{width:49px;height:49px;flex-basis:49px}}