* {
    box-sizing: border-box;
}
body {
    font-family: Manrope, sans-serif;
    text-align: center; 
    background-image: url('images/bg.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
	background-attachment: fixed; /* Фон будет фиксированным */
    height: 100vh;
	width: 100%;	
    margin: 0; 
}
h3 {
    margin-top: 0px; /* Регулирует отступ сверху у заголовка */
	margin-bottom: 0px; /* Регулирует отступ снизу у заголовка */
	font-size: 16px; /* Укажите нужный размер */
	font-weight: 500;
    line-height: 1; /* Интерлиньяж, чтобы текст не был слишком плотным */
    color: white; /* Цвет текста, если требуется */
}

p {
    font-size: 10px; /* Укажите нужный размер */
	font-weight: 500;
    line-height: 1; /* Интерлиньяж, чтобы текст не был слишком плотным */
    color: white; /* Цвет текста, если требуется */
}
b {
    color: #FFFFFF;
	text-decoration: none;
	opacity: 0.5; /* Полупрозрачность */
	font-family: 'Manrope', sans-serif;
	font-size: 16px;
    font-weight: 500; /* Полужирный */
	line-height: 1.3; /* Расстояние между строками */
}
a {
    color: #FFFFFF;
	text-decoration: none;
	font-family: 'Manrope', sans-serif;
	font-size: 16px;
    font-weight: 500; /* Полужирный */
	line-height: 1.5; /* Расстояние между строками */
	
}
.social-media {
    display: flex; /* Для размещения элементов в строку */
    justify-content: center; /* Центрирование элементов */
    gap: 20px; /* Расстояние между иконками */
}
.title {
    color: white;
}
#buttons-container {
    display: flex;
    flex-wrap: nowrap; /* Все категории в одну линию */
    justify-content: space-between; /* Равномерно по ширине */
    gap: 4px;
    width: 272px; /* В линию и по ширине инпута UID */
    margin: 0 auto; /* Центрируем контейнер */
}

.button {
    margin: 4px 0;
    padding: 6px 10px; /* Немного больше, но всё ещё помещается в строку */
    font-size: 13px; /* Чуть крупнее для читаемости */
    background-color: #113A55; /* Цвет кнопки по умолчанию */
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease; /* Плавный переход цвета */
    white-space: nowrap; /* Запрет переноса текста внутри кнопки */
}

.button:active,
.button:focus,
.button.active { /* Добавляем состояние для активной кнопки */
    background-color: #0E9EC1; /* Цвет активной кнопки */
}


.panel {
    display: none;
    margin: 0 auto; /* Убираем внешние отступы, контролируем через gap контейнера */
    width: 272px; /* исходная ширина панели */
    height: 132px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url('images/panel_shop_bg_2.png');
    background-position: center;
    background-size: cover; /* Масштабирует фон, чтобы он полностью покрывал элемент */
    background-clip: border-box; /* Применяет фон внутри границ с учетом скругленных углов */
    border-radius: 6px; /* Пример скругления углов */
}

.panel-content {
    text-align: left; 
    color: white;
    margin-left: 10px;
    padding-top: 2px;
    width: 156px; /* исходная ширина текста */
    
}
.panel-image {
    width: 80px; 
    height: 80px; 
    margin-right: 10px;
    background-image: url('https://via.placeholder.com/80'); 
    background-size: cover; 
    background-position: center; 
}

/* Контейнер для горизонтальных карточек */
.panels-container-horizontal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px; /* Чуть меньше, как у квадратных карточек */
    padding: 6px 0;
}

/* Контейнер для квадратных карточек */
.panels-container-square {
    display: flex;
    flex-wrap: wrap; /* Разрешаем перенос карточек на новую строку */
    gap: 8px; /* Отступы между карточками */
    justify-content: center; /* Центрируем карточки */
	padding: 8px 0; /* Отступ сверху и снизу */
}

.panel-square {
    display: none;
    margin: 0;
    width: 132px;
    height: 132px; /* Квадратная форма */
    display: flex;
    flex-direction: column; /* Изменим расположение контента */
    justify-content: center;
    align-items: center;
    background-image: url('images/panel_shop_bg_2.png');
    background-position: center;
    background-size: cover; /* Масштабирует фон */
    background-clip: border-box; /* Применяет фон внутри границ */
    border-radius: 6px; /* Пример скругления углов */
    text-align: center; /* Центрируем текст */
}

.panel-square .panel-content {
    display: flex;
    flex-direction: column; /* Располагаем текст и кнопку в колонку */
    align-items: center; /* Центрируем содержимое по горизонтали */
    justify-content: center; /* Центрируем содержимое по вертикали */
    width: 100%; /* Используем всю ширину карточки */
    gap: 0px; /* Отступы между текстом и кнопкой */
    color: white;
    padding: 0; /* Убираем лишние отступы */
}

.panel-square .panel-image {
    width: 80px;
    height: 80px;
    margin: 0 auto; /* Центрируем изображение */
	padding: 0;
    background-size: cover;
    background-position: center;
}


.buy-button {
    width: 144px; /* исходная ширина кнопки */
    height: 24px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-image: url('images/buy_button_bg_2.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: box-shadow 0.3s ease-in-out; /* Анимация для подсветки */
}
.buy-button:hover {
    box-shadow: 0 0 10px 2px rgba(0, 255, 255, 0.8); /* Подсветка по краям */
}

.buy-button-small {
    width: 108px; /* Уменьшенная ширина */
    height: 18px;
    padding-top: 0px;
    padding-bottom: 0px;
    background-image: url('images/buy_button_bg_small.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: box-shadow 0.3s ease-in-out; /* Анимация для подсветки */
}
.buy-button-small:hover {
    box-shadow: 0 0 10px 2px rgba(0, 255, 255, 0.8); /* Подсветка по краям */
}


.uid-input {
    margin: 10px 0;
    padding: 5px;
    width: 272px;
    background-color: #0E9EC1; /* Changed background color */
    color: #FFFFFF; /* Changed font color */
    border: 1px solid #113A55; /* Changed border color */
    border-radius: 6px;
}

.uid-input::placeholder {
    color: #FFFFFF; /* Changed placeholder color to FFFFFF */
}

.invalid {
    border: 2px solid #F44336; /* Changed red border to F44336 */
}

#uid-error-message {
    color: #F44336; /* Changed error message text color to F44336 */
    font-size: 14px; /* Slightly larger text */
}



.social-media {
    text-align: center;
    margin: auto;
}
.social-icon {
    width: 30px;
    height: 30px;
    margin: auto;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    cursor: pointer;
}
.facebook-icon {
    background-image: url('https://cdn.iconscout.com/icon/free/png-256/facebook-2-226037.png');
}
.twitter-icon {
    background-image: url('https://cdn.iconscout.com/icon/free/png-256/twitter-2-226031.png');
}


.main-panel {
    width: 320px; 
    height: auto; 
    padding-top: 10px;
    padding-bottom: 10px;
    margin: auto;
    background: linear-gradient(to top left, #2274A9, #1B4368); 
    border-radius: 16px; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.confirm-button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

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


.legal-section {
    margin: 20px auto;
    padding: 20px; 
    border-radius: 16px;
    width: 320px;
    background: linear-gradient(to bottom right, #2274A9, #1B4368);
    color: white; 
    text-align: center; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}


.payform-tbank {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 2px auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 250px;
}
.payform-tbank-row {
    margin: 2px;
    border-radius: 4px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    border: 1px solid #DFE3F3;
    padding: 15px;
    outline: none;
    background-color: #DFE3F3;
    font-size: 15px;
}
.payform-tbank-row:focus {
    background-color: #FFFFFF;
    border: 1px solid #616871;
    border-radius: 4px;
}
.payform-tbank-btn {
    background-color: #FBC520;
    border: 1px solid #FBC520;
    color: #3C2C0B;
}
.payform-tbank-btn:hover {
    background-color: #FAB619;
    border: 1px solid #FAB619;
}