/* --- СКОПИРУЙТЕ И ЗАМЕНИТЕ ВЕСЬ ФАЙЛ style.css --- */
/* --- ФИНАЛЬНАЯ ВЕРСИЯ С ИСПРАВЛЕНИЕМ ДЛЯ МОБИЛЬНЫХ --- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    color: #333;
    padding-bottom: 120px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    margin-bottom: 20px;
}

.header { background: linear-gradient(45deg, #667eea, #764ba2); color: white; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 28px; font-weight: bold; display: flex; align-items: center; gap: 10px; text-decoration: none; color: white; }
.header-right { display: flex; align-items: center; gap: 20px; }
.favorite-btn { background: rgba(255, 255, 255, 0.2); border: 2px solid rgba(255, 255, 255, 0.3); color: white; padding: 10px 20px; border-radius: 25px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; text-decoration: none; line-height: 1; }
.favorite-btn:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-2px); }
.nav-menu { background: rgba(255, 255, 255, 0.9); padding: 20px 40px; display: flex; gap: 30px; align-items: center; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.nav-item { display: flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; font-weight: 500; color: #333; text-decoration: none; }
.nav-item:hover { background: rgba(102, 126, 234, 0.1); transform: translateY(-2px); }
.search-container { margin-left: auto; position: relative; }
.search-input { padding: 12px 45px 12px 20px; border: 2px solid rgba(102, 126, 234, 0.3); border-radius: 25px; width: 300px; font-size: 14px; outline: none; transition: all 0.3s ease; }
.search-input:focus { border-color: #667eea; box-shadow: 0 0 20px rgba(102, 126, 234, 0.2); }
.search-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 5px; }
.main-content { padding: 30px 40px; }
.categories { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 30px; justify-content: center; }
.category-tag { background: linear-gradient(45deg, #667eea, #764ba2); color: white; padding: 8px 16px; border-radius: 20px; text-decoration: none; font-size: 14px; transition: all 0.3s ease; }
.category-tag:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3); }
.page-header h1 { color: #667eea; margin-bottom: 20px; font-size: 24px; display: flex; align-items: center; gap: 10px; }
.hits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; }


/* ========================================================== */
/*           ИЗМЕНЕНИЕ ЗДЕСЬ: ПЕРЕХОД НА CSS GRID           */
/* ========================================================== */
.track-item {
    background: rgba(255, 255, 255, 0.8);
    padding: 15px;
    border-radius: 15px;
    
    /* 1. Меняем Flexbox на Grid */
    display: grid; 
    
    /* 2. Определяем колонки: кнопка(авто), инфо(гибкая), длительность(авто), скачать(авто) */
    grid-template-columns: auto 1fr auto auto; 
    
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
    border: 1px solid rgba(102, 126, 234, 0.1);
}
/* ========================================================== */


.track-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.15);
    background: rgba(255, 255, 255, 1);
}

.track-item.plays, .track-item.pausing {
    background: white;
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.15);
    border-color: #667eea;
}

.play-btn, .track-play-button {
    width: 40px;
    height: 40px;
    background: linear-gradient(45deg, #667eea, #764ba2);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.play-btn:hover, .track-play-button:hover {
    transform: scale(1.1);
}

.track-info {
    /* Это свойство все еще полезно для Grid, оставляем его */
    min-width: 0; 
}

.track-title {
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.track-title a { color: inherit; text-decoration: none; }
.track-title a:hover { text-decoration: underline; }

.track-artist {
    color: #666;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.track-artist a { color: inherit; text-decoration: none; }
.track-artist a:hover { text-decoration: underline; }

.track-duration, .track-metadata .track-duration {
    color: #999;
    font-size: 14px;
    margin-left: auto;
}

.track-metadata {
    text-align: right;
}

.action-btn, .track-download-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.action-btn:hover, .track-download-button:hover { background: rgba(102, 126, 234, 0.1); }

.trending-section, .alphabet-section { margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(0, 0, 0, 0.1); }
.trending-section h2, .alphabet-section h2 { color: #667eea; margin-bottom: 20px; font-size: 24px; display: flex; align-items: center; gap: 10px; }
.trending-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.trending-tag { background: rgba(102, 126, 234, 0.1); color: #667eea; padding: 6px 12px; border-radius: 15px; font-size: 13px; text-decoration: none; transition: all 0.3s ease; }
.trending-tag:hover { background: rgba(102, 126, 234, 0.2); transform: translateY(-1px); }
.footer { background: rgba(102, 126, 234, 0.05); padding: 30px 40px; border-top: 1px solid rgba(0, 0, 0, 0.1); }
.alphabet-index { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.alphabet-letter { width: 35px; height: 35px; background: rgba(102, 126, 234, 0.1); color: #667eea; display: flex; align-items: center; justify-content: center; text-decoration: none; border-radius: 8px; font-weight: 600; transition: all 0.3s ease; }
.alphabet-letter:hover { background: #667eea; color: white; transform: translateY(-2px); }
.contact-info { text-align: center; color: #666; font-size: 14px; margin-top: 20px; }
.footer-description { text-align: center; color: #666; margin: 15px 0; }

.pleer { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px); padding: 15px 20px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); z-index: 1000; max-width: 800px; width: 90%; }
.pleer .player-container { display: flex; align-items: center; gap: 15px; width: 100%; }
.player-track-info { display: flex; align-items: center; gap: 10px; min-width: 200px; flex-shrink: 0; }
.player-track-info .track-text-wrapper { display: flex; flex-direction: column; }
.player-track-info .track-name-wrapper { font-weight: 600; font-size: 14px; color: #333; }
.player-track-info .track-artist-wrapper { font-size: 12px; color: #666; }
.pleer .player-controls { display: flex; gap: 10px; align-items: center; }
.player-button { width: 35px; height: 35px; background: none; border: 1px solid #667eea; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; color: #667eea; flex-shrink: 0; }
.player-button svg { width: 18px; height: 18px; fill: currentColor; }
.player-button:hover { background: #667eea; color: white; }
.player-button.play, .player-button.pause { width: 40px; height: 40px; }
.player-button.play svg, .player-button.pause svg { width: 20px; height: 20px; }
.player-progress-wrapper { display: flex; align-items: center; /* gap: 10px; */ flex: 1; min-width: 195px; }
.time-current, .time-total { color: #666; font-size: 12px; /* min-width: 35px; */ white-space: nowrap; }
.progress-bar { flex-grow: 1; height: 4px; background: rgba(102, 126, 234, 0.2); border-radius: 2px; overflow: hidden; cursor: pointer; margin-left: 12px; margin-right: 12px;}
.progress-fill { width: 0%; height: 100%; background: linear-gradient(45deg, #667eea, #764ba2); border-radius: 2px; transition: width 0.1s linear; }
.volume-controls { display: flex; align-items: center; gap: 10px; }
.volume-button { background: none; border: none; cursor: pointer; color: #667eea; padding: 5px; }
.volume-button svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.volume-slider { width: 80px; height: 4px; background: rgba(102, 126, 234, 0.2); border-radius: 2px; overflow: hidden; cursor: pointer; }
.volume-level { width: 70%; height: 100%; background: #667eea; border-radius: 2px; }

/* SVG иконки */
.logo-icon, .heart-icon, .nav-icon-new, .nav-icon-week, .nav-icon-popular, .nav-icon-russian, .search-icon, .star-icon, .play-icon, .download-icon, .trending-icon, .alphabet-icon, .player-music-icon { display: inline-block; background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; }
.logo-icon { width: 32px; height: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z'/%3E%3C/svg%3E");}
.heart-icon { width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z'/%3E%3C/svg%3E");}
.nav-icon-new { width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M13,5.83L15.17,8L16.58,6.59L12,2L7.41,6.59L8.83,8L11,5.83V21H13V5.83Z'/%3E%3C/svg%3E"); }
.nav-icon-popular { width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M16,6L18.29,8.29L13.41,13.17L9.41,9.17L2,16.59L3.41,18L9.41,12L13.41,16L19.71,9.71L22,12V6H16Z'/%3E%3C/svg%3E"); }
.search-icon { width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23667eea'%3E%3Cpath d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'/%3E%3C/svg%3E"); }
.star-icon { width: 28px; height: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E"); }
.play-icon { width: 16px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8,5.14V19.14L19,12.14L8,5.14Z'/%3E%3C/svg%3E"); }
.track-play-button.plays .play-icon, .track-item.plays .play-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6,19H10V5H6V19ZM14,5V19H18V5H14Z'/%3E%3C/svg%3E"); }
.download-icon { width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23667eea'%3E%3Cpath fill-rule='evenodd' d='M12 2.25a.75.75 0 01.75.75v11.69l3.22-3.22a.75.75 0 111.06 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-4.5-4.5a.75.75 0 111.06-1.06l3.22 3.22V3a.75.75 0 01.75-.75zm-9 13.5a.75.75 0 01.75.75v2.25a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5V16.5a.75.75 0 011.5 0v2.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V16.5a.75.75 0 01.75-.75z' clip-rule='evenodd' /%3E%3C/svg%3E"); }
.trending-icon { width: 28px; height: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M16,6L18.29,8.29L13.41,13.17L9.41,9.17L2,16.59L3.41,18L9.41,12L13.41,16L19.71,9.71L22,12V6H16Z'/%3E%3C/svg%3E"); }
.alphabet-icon { width: 28px; height: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M7.5 2.5L2.5 15H4.5L5.5 12H10.5L11.5 15H13.5L8.5 2.5H7.5M6.12 10L8 5.67L9.88 10H6.12M13 17V19H22V17H13M13 13V15H19V13H13M13 9V11H16V9H13Z' /%3E%3C/svg%3E"); }
.player-music-icon { width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23667eea'%3E%3Cpath d='M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z'/%3E%3C/svg%3E"); }

@media (max-width: 850px) {
    body { padding-bottom: 150px; }
    .container { margin-top: 0; margin-bottom: 0; border-radius: 0; box-shadow: none; }
    .header { padding: 15px 20px; flex-direction: column; align-items: flex-start; gap: 15px; }
    .logo { font-size: 24px; }
    .header-right { width: 100%; justify-content: space-between; }
    .favorite-btn span:not(.heart-icon) { display: none; }
    .favorite-btn { padding: 10px; }
    .nav-menu { flex-wrap: wrap; padding: 15px; gap: 10px; justify-content: center; }
    .nav-item { padding: 8px 12px; }
    .search-container { width: 100%; margin-left: 0; margin-top: 10px; }
    .search-input { width: 100%; }
    .main-content { padding: 15px; }
    .hits-grid { grid-template-columns: 1fr; gap: 15px; }
    .track-item { padding: 12px; }
    .trending-section, .alphabet-section { margin-top: 30px; padding-top: 25px; }
    .alphabet-index { gap: 8px; }
    .footer { padding: 20px; }
    .pleer { width: 100%; max-width: 100%; bottom: 0; left: 0; transform: none; border-radius: 0; padding: 10px 15px; }
    .pleer .player-container { flex-wrap: wrap; gap: 10px; }
    .player-track-info { width: calc(100% - 130px); order: 1; min-width: 0; flex-grow: 1; }
    .pleer .player-controls { order: 2; gap: 15px; }
    .player-progress-wrapper { width: 100%; order: 3; }
    .volume-controls { display: none; }
}
    .player-artist-name,
    .player-song-name {
        /*display: block;  Заставляет каждый span занимать свою строку */
        line-height: 1.3; /* Улучшает читаемость, добавляя немного пространства */
        text-align: left; /* Выравнивание текста по левому краю внутри блока */
        white-space: nowrap;      /* Предотвращает перенос текста на новую строку */
        overflow: hidden;         /* Скрывает текст, который не помещается */
        text-overflow: ellipsis;  /* Добавляет многоточие в конце */
    }
    .player-song-name {
        font-weight: bold; /* Делает название трека жирным */
    }
    .player-track-title {
        /* padding: 0 10px; */ /* Небольшой отступ для красоты */
        min-width: 180px; /* Важно для работы text-overflow в flex-контейнере */
		overflow: hidden;
		flex: 1; 
		text-overflow: ellipsis;
    }

/* --- Стили для страницы указателя (tpl_index.html) --- */
.search-results-container {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* Расстояние между сеткой результатов и пагинацией */
}

.results-grid {
    display: grid;
    /* Создает адаптивные колонки: минимум 300px, максимум 1fr (равномерное распределение) */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem; /* Расстояние между элементами */
}

.search-result-item .search-result-link {
    display: flex;
    align-items: center;
    padding: 0.8rem 1rem;
    background-color: #f7f7f7;
    border: 1px solid #eee;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    font-size: 1rem;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.search-result-item .search-result-link:hover {
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.search-result-link .link-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-right: 12px;
    background-color: #333; /* Цвет иконки */
    /* Используем встроенный SVG для иконки "музыкальной ноты" */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'%3E%3C/path%3E%3Ccircle cx='6' cy='18' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='16' r='3'%3E%3C/circle%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'%3E%3C/path%3E%3Ccircle cx='6' cy='18' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='16' r='3'%3E%3C/circle%3E%3C/svg%3E") no-repeat center;
}

.search-result-link .search-result-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Стили для пагинации (tpl_index.html) --- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 0;
}

.pagination-label {
    margin-right: 0.5rem;
    color: #666;
}

.pagination-link,
.pagination-current {
    display: inline-block;
    min-width: 40px;
    padding: 0.5rem;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
}

.pagination-link:hover {
    background-color: #f0f0f0;
    border-color: #ccc;
}

.pagination-current {
    background-color: #333;
    color: #fff;
    border-color: #333;
    font-weight: bold;
}


/* --- Стили для сетки треков (чтобы tpl_vk.html выглядел как главная) --- */
/* Класс .tracks-list теперь будет вести себя так же, как .hits-grid */
.tracks-list {
    display: grid;
    grid-template-columns: 1fr; /* Одна колонка по умолчанию */
    gap: 0.5rem;
}

/* На больших экранах делаем 2 колонки для красоты */
@media (min-width: 768px) {
    .tracks-list,
    .hits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* --- Стили специально для страницы сервиса VK (tpl_vk.html) --- */

/* Главный контейнер для формы ввода */
.vk-service-container {
    max-width: 700px; /* Ограничиваем ширину для лучшей читаемости */
    margin: 2rem auto; /* Центрируем блок по горизонтали и добавляем отступы сверху/снизу */
    padding: 2rem;
    background-color: #fdfdfd;
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Расстояние между инфо-блоком и формой */
}

/* Информационный блок с инструкцией */
.vk-service-info {
    padding: 1rem 1.5rem;
    background-color: #f0f8ff; /* Светло-голубой фон для информации */
    border-left: 4px solid #4a90e2; /* Акцентная полоса слева */
    color: #444;
    line-height: 1.6;
    font-size: 0.95rem;
    border-radius: 0 8px 8px 0;
}

/* Контейнер для поля ввода и кнопки */
.vk-service-form {
    display: flex;
    flex-direction: column; /* На мобильных элементах друг под другом */
    gap: 1rem;
}

/* Поле для ввода ID */
.vk-input {
    width: 100%;
    padding: 12px 15px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box; /* Важно, чтобы padding не ломал ширину */
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Эффект при клике на поле ввода */
.vk-input:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

/* Кнопка "Войти и скачать" */
.vk-submit-button {
    display: block;
    width: 100%;
    padding: 12px 15px;
    background-color: #333; /* Основной темный цвет сайта */
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.2s, transform 0.1s;
}

.vk-submit-button:hover {
    background-color: #555; /* Затемнение при наведении */
}

.vk-submit-button:active {
    transform: scale(0.98); /* Легкое "нажатие" при клике */
}

/* Адаптивность для экранов пошире (планшеты и десктопы) */
@media (min-width: 600px) {
    .vk-service-form {
        flex-direction: row; /* На больших экранах - в одну строку */
        align-items: center;
    }

    .vk-input {
        flex-grow: 1; /* Поле ввода занимает все доступное место */
    }

    .vk-submit-button {
        width: auto; /* Ширина кнопки по содержимому */
        flex-shrink: 0; /* Не сжиматься */
    }
}