@import url(https://fonts.googleapis.com/css2?family=Cutive+Mono&family=Hepta+Slab:wght@1..900&family=Orbitron:wght@400..900&display=swap);

:root {
    --primary-color: #FFD700;
    --secondary-color: #b0e0e6;
    --background-color: #1a1a1a;
    --text-color: #e0e0e0;
    --font-family: 'Orbitron', sans-serif;
    --button-bg-color: #2e2e2e;
    --button-hover-bg-color: #444444;
    --border-color: #a5a5a5;
    --modal-bg-color: #202020;
    --overlay-bg-color: rgba(0, 0, 0, 0.7);
    --lcar-light-blue: #b0e0e6;
    --lcar-orange: #ff8a65;
    --lcar-red: #f2c3d6;
    --border-radius: 8px;
    --transition-duration: 0.3s;
}

body {
    padding: 0;
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: var(--font-family);
    line-height: 1.4;
    overflow-x: hidden;
    font-size: 16px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--primary-color);
    margin-top: 20px;
    margin-bottom: 0.5em;
    line-height: 1.2;
}




a {
    color: var(--secondary-color);
    text-decoration: none;
    transition: color var(--transition-duration) ease;
}

a:hover {
    text-decoration: underline;
}

.button-base,
button,
input[type="submit"],
input[type="button"],
.nav-button,
.auth-controls .button-base.nav-button,
.popup-button.nav-button,
.auth-form button[type="submit"].button-base
{
    background-color: var(--button-bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 0.5em 1em;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 0.9em;
    border-radius: var(--border-radius);
    transition: background-color var(--transition-duration) ease;
}

.button-base:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.nav-button:hover,
.auth-controls .button-base.nav-button:hover,
.popup-button.nav-button:hover,
.auth-form button[type="submit"].button-base:hover
 {
    background-color: var(--button-hover-bg-color);
}

hr,
.sound-item {
    border-color: var(--border-color);
}

.close-button {
    color: var(--text-color);
    float: right;
    font-size: 0.75em;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid var(--secondary-color);
    padding: 0.3em 0.6em;
    background-color: #fff0;
    border-radius: var(--border-radius);
    transition: all var(--transition-duration) ease;
}

.close-button:hover,
.close-button:focus {
    color: var(--background-color);
    background-color: var(--secondary-color);
    text-decoration: none;
}

.tag,
.sound-tags span,
#modal-tags span
 {
    display: inline-block;
    background-color: var(--button-bg-color);
    color: var(--lcar-light-blue);
    padding: 0.3em 0.6em;
    margin-right: 0.3em;
    border-radius: var(--border-radius);
    font-size: 0.8em;
}

.sound-title-link {
    color: var(--primary-color);
    cursor: pointer;
}

.site-header {
    position: relative;
    background-color: var(--background-color);
    color: var(--text-color);
    /* overflow: visible; ИЗНАЧАЛЬНО БЫЛО hidden, теперь оставляем visible, но это также исправлено в #page-header */
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--border-color);
    z-index: 100;
}

.top-bar {
    background-color: #fff0;
    padding: 5px 0;
    position: absolute;
    z-index: 101;
    top: 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 99%;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}


.main-nav {
    display: flex;
    width: auto;
    height: auto;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    padding: 0;
    z-index: 3;
}

.main-nav ul,
.main-nav li {
    all: unset;
}

.nav-button {
    display: block;
    text-decoration: none;
    color: var(--text-color);
    filter: drop-shadow(.5px .5px 1px rgb(255 193 7 / .8));
    font-weight: 700;
    border-radius: 0;
    border: 2px solid var(--primary-color);
    transition: box-shadow 0.3s ease, background-color var(--transition-duration) ease;
    text-transform: uppercase;
    margin-bottom: 1.25em;
    padding: 0.3125em;
    box-shadow: 0 0 5px var(--primary-color);
    font-size: 0.875em;
}

.nav-button:hover {
    text-decoration: none;
    box-shadow: 0 0 50px var(--primary-color);
}

.nav-button:active {
    box-shadow: 0 0 15px var(--primary-color), 0 0 10px #fff inset;
}

.header-content-wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 100%;
    padding: 10px 0;
    position: relative;
    z-index: 1;
}

.header-panel {
    flex: 0 0 100px;
    background-color: var(--button-bg-color);
    border-right: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
}

.left-panel { border-right: none; margin-right: 20px; }
.right-panel { border-left: none; margin-left: 20px; }

.video-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; }
.video-background video { min-width: 100%; min-height: 100%; width: auto; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; }
.header-content { position: relative; padding: 10px; text-align: center; }
/* header { position: relative; } было в HTML, но здесь стили для #page-header */

/* ИСПРАВЛЕНИЕ: Стили для блока с заголовком и описанием поиска */
.page-intro-text { /* Предполагаемый класс, замените на ваш, если он другой */
    text-align: center; /* Или left, как у вас */
    /* Эти margin-ы нужно будет подобрать экспериментально */
    margin-top: 2em;
    margin-bottom: 2em;
}
.page-intro-text h1, /* Если заголовок внутри этого блока */
.page-intro-text h2 { /* Или если используется h2 */
    margin-bottom: 0.3em;
}
.page-intro-text p { /* Для текста "Search sounds tags..." */
    font-size: 0.9em;
    color: var(--secondary-color);
    margin-top: 0;
}


.search-bar-wrapper { /* ИСПРАВЛЕНИЕ: Обертка для сужения .search-bar */
    max-width: 80%; /* Примерно на 20% уже */
    margin-left: auto;
    margin-right: auto;
}

.search-bar {
    display: flex;
    filter: drop-shadow(1px 1px 55px rgb(83 110 101));
    text-align: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1.25em;
}

.last-update {
    color: var(--primary-color);
    font-size: 0.8em;
    white-space: nowrap;
    text-align: left;
    margin-bottom: 1.25em;
}

.search-container {
    flex: 1 1 0%;
}

.search-bar input[type="text"] { /* ИСПРАВЛЕНИЕ: стили для строки поиска */
    padding: 0.8em;
    border: 1px solid var(--border-color); /* ИСПРАВЛЕНИЕ: единообразная граница */
    border-radius: var(--border-radius); /* ИСПРАВЛЕНИЕ: единообразный радиус */
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-family);
    color: var(--text-color);
    background-color: var(--background-color);
    font-size: 0.9em;
}

.select-container {
    position: relative;
    display: flex; /* ИСПРАВЛЕНИЕ: для выравнивания стрелки в мобильной */
    align-items: center; /* ИСПРАВЛЕНИЕ */
}

.select-container select {
    padding: 0.8em;
    /* ИСПРАВЛЕНИЕ: цвет и граница как у поля поиска */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-family: var(--font-family);
    color: var(--text-color);
    background-color: var(--background-color);
    appearance: none;
    -webkit-appearance: none; /* для Safari */
    -moz-appearance: none; /* для Firefox */
    cursor: pointer;
    width: 150px; /* или можно сделать flex: 1; если .search-container тоже flex */
    font-size: 0.9em;
    padding-right: 2.5em; /* ИСПРАВЛЕНИЕ: место для стрелки */
    box-sizing: border-box;
}

.select-container::after {
    content: '\25BC';
    position: absolute;
    top: 50%;
    right: 0.75em; /* ИСПРАВЛЕНИЕ: позиция стрелки */
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--secondary-color); /* ИСПРАВЛЕНИЕ: цвет стрелки */
    font-size: 0.8em; /* ИСПРАВЛЕНИЕ: размер стрелки */
}

main {
    color: var(--text-color);
    margin: 0 auto;
    max-width: 99%;
    position: relative; /* ИСПРАВЛЕНИЕ: для z-index */
    z-index: 5;        /* ИСПРАВЛЕНИЕ: ниже шапки и меню */
}

.red-zone {
    background-color: #fff;
    filter: drop-shadow(2px 2px 5px rgb(255 193 7));
    padding: 2px;
    /* position: relative; z-index: 6; /* Если нужно над main */
}

.sounds-page h1 { text-align: left; margin-bottom: 0; color: #fff; filter: drop-shadow(2px 2px 5px rgb(83 110 101)); }
.sound-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 1.25em; }
.sound-item { border-radius: var(--border-radius); padding: 0.625em; margin-bottom: 0.625em; display: flex; align-items: center; background-color: var(--modal-bg-color); transition: box-shadow var(--transition-duration) cubic-bezier(.4, 0, 1, 1); }
.sound-item:hover { box-shadow: -1px 1px 7px 1px #617971; }
.sound-preview { position: relative; margin-right: 0.625em; }
.play-button .playing-gif { display: none; }
.play-button.playing .playing-gif { display: block; }
.play-button.playing .play-icon, .play-button.playing .pause-icon { display: none; }
.play-button:not(.playing) .play-icon { display: block; }
.play-button:not(.playing) .pause-icon { display: none; }
.play-button { background-color: var(--button-bg-color); border: none; border-radius: 50%; width: 3.4375em; height: 3.4375em; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.875em; transition: background-color var(--transition-duration) ease; }
.play-button .play-icon { display: inline-block; }
.play-button .pause-icon { display: none; }
.play-button:hover { background-color: var(--button-hover-bg-color); }
.sound-info { flex-grow: 1; }
.sound-title { margin-top: 0; margin-bottom: 0.3125em; font-size: 1.1em; color: var(--primary-color); }
.sound-title-link { filter: drop-shadow(2px 2px 5px rgb(83 110 101)); }

.site-footer { color: var(--text-color); text-align: center; padding: 1em 0; font-family: var(--font-family); border-top: 1px solid var(--border-color); font-size: 0.85em; position:relative; z-index: 5; /* ИСПРАВЛЕНИЕ */ }
.pagination { text-align: center; margin-top: 1.25em; }
.pagination a, .pagination span.current { display: inline-block; padding: 0.5em 1em; text-decoration: none; border: 1px solid var(--border-color); margin: 0 0.25em; border-radius: var(--border-radius); background-color: var(--button-bg-color); color: var(--text-color); font-family: var(--font-family); transition: background-color var(--transition-duration) ease; font-size: 0.9em; }
.pagination a:hover { background-color: var(--button-hover-bg-color); }
.pagination span.current { background-color: var(--secondary-color); color: var(--background-color); }

audio-controls { width: 100%; }
audio::-webkit-media-controls-panel { background-color: var(--primary-color); color: var(--button-hover-bg-color); border-radius: var(--border-radius); }
audio::-webkit-media-controls-play-button, audio::-webkit-media-controls-pause-button, audio::-webkit-media-controls-mute-button, audio::-webkit-media-controls-unmute-button { color: var(--primary-color); }
audio::-webkit-media-controls-current-time-display, audio::-webkit-media-controls-time-remaining-display, audio::-webkit-media-controls-timeline { color: var(--background-color); }

.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--overlay-bg-color); overflow: hidden; } /* `overflow: hidden` здесь для самого модального окна (если его контент больше окна) - это ОК */
.modal-content { background-color: var(--modal-bg-color); margin: 15% auto; padding: 1.25em; border: .5px solid var(--border-color); border-radius: var(--border-radius); width: 500px; max-width: 90%; position: relative; color: var(--text-color); font-family: var(--font-family); /* overflow: hidden; было здесь, но для modal-content обычно лучше overflow-y: auto; если контент больше */ overflow-y: auto; max-height: 70vh; /* Пример ограничения высоты */ font-size: 0.9em; }
.overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--overlay-bg-color); z-index: 1000; }
#modal-title { margin-top: 0; margin-bottom: 0.625em; font-size: 1.4em; border-bottom: 1px solid var(--border-color); padding-bottom: 0.3125em; color: var(--text-color); }
.modal-details p, .modal-events p { margin-bottom: 0.3125em; font-size: 0.9em; color: var(--primary-color); }
.modal-details span, .modal-events span { font-weight: 700; color: var(--lcar-light-blue); }
.modal-tags p { margin-bottom: 0.3125em; font-size: 0.9em; color: var(--text-color); }
#modal-tags span { font-size: 0.8em; }
.copy-button { background: none; color: var(--lcar-light-blue); border: 1px solid var(--lcar-light-blue); padding: 0.125em 0.3125em; cursor: pointer; font-size: 0.8em; border-radius: var(--border-radius); transition: all var(--transition-duration) ease; margin-left: 0.3125em; }
.copy-button:hover { background-color: var(--lcar-light-blue); color: var(--background-color); }
.buy-now-button-modal { background: none; color: var(--lcar-light-blue); border: .5px solid var(--lcar-light-blue); padding: 0.125em 0.3125em; cursor: pointer; font-size: 0.7em; border-radius: var(--border-radius); transition: all var(--transition-duration) ease; text-decoration: none; display: inline-block; line-height: 1.5; }
.buy-now-button-modal:hover { background-color: var(--lcar-light-blue); color: var(--background-color); text-decoration: none; }
#modal-audio { width: 100%; margin-bottom: 0.625em; }

#page-header {
    position: relative;
    overflow: visible; /* ИЗМЕНЕНО с hidden на visible */
    color: var(--text-color);
    /* z-index по умолчанию или специфичное значение, если нужно */
}
#page-media {
    position: relative;
    height: 400px; /* На десктопе, на мобильных будет изменено медиа-запросом */
    overflow: visible; /* ИЗМЕНЕНО с hidden на visible */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-color);
}
@keyframes retro-flicker { 0% { opacity: 1; } 50% { opacity: .9; } 100% { opacity: 1; } }
.page-media-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.page-media-container video { object-fit: cover; width: 100%; height: 100%; }
#title-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; filter: drop-shadow(1px 1px 20px rgb(83 110 101)); }
#page-title { margin: 0; font-size: 2.5em; text-shadow: 2px 2px 4px #000; color: var(--primary-color); font-family: var(--font-family); }
#page-title a { color: var(--primary-color); text-decoration: none; }

.bottom-marquee { overflow: hidden; color: var(--lcar-light-blue); padding: 0.625em 0; font-size: 0.9em; white-space: nowrap; font-family: var(--font-family); background-color: var(--button-bg-color); border-top: 1px solid var(--border-color); position: relative; z-index: 6; /* ИСПРАВЛЕНИЕ: z-index выше main */ }
.marquee-content { display: inline-block; padding-left: 100%; animation: marquee 65s linear infinite; filter: drop-shadow(2px 2px 5px rgb(83 110 101)); }
@keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } }

.fullscreen-popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--overlay-bg-color); z-index: 100001000; overflow-y: auto; }
.popup-show { display: flex; justify-content: center; align-items: center; }
.popup-content { background-color: var(--modal-bg-color); margin: 15% auto; padding: 2.5em; border-radius: var(--border-radius); width: 90%; max-width: 500px; position: relative; text-align: center; font-size: 1em; overflow-y: auto; max-height: 70vh; /* Добавлено для прокрутки контента попапа, если он длинный */ }
.popup-close-button { position: absolute; top: 0.625em; right: 0.625em; }
.popup-nav ul { list-style: none; padding: 0; margin: 0; }
.popup-nav-item { display: block; padding: 1em 1.25em; text-decoration: none; color: var(--text-color); font-size: 1.1em; border-bottom: 1px solid var(--border-color); transition: background-color var(--transition-duration) ease, color var(--transition-duration) ease; }
.popup-nav-item:last-child { border-bottom: none; }
.popup-nav-item:hover { background-color: var(--button-hover-bg-color); color: var(--text-color); }
.nav-button.active { background-color: var(--secondary-color); color: var(--background-color); box-shadow: 0 0 20px var(--secondary-color); }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
.popup-button.nav-button { display: flex; width: 2.5em; height: 2.5em; padding: 0; margin: 0; border-radius: 0; box-shadow: none; background-color: #fff0; transition: none; text-transform: none; cursor: pointer; position: relative; margin-right: 1.25em; top: 0.125em; }
.popup-button.nav-button:hover { background-color: var(--button-hover-bg-color); }
.popup-button.nav-button:active { background-color: var(--button-bg-color); box-shadow: none; }
.hamburger-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; height: 2px; background-color: var(--text-color); transition: background-color 0.3s ease; }
.hamburger-icon::before, .hamburger-icon::after { content: ''; position: absolute; left: 0; width: 100%; height: 2px; background-color: inherit; }
.hamburger-icon::before { top: -0.5em; }
.hamburger-icon::after { bottom: -0.5em; }
.popup-button.nav-button:hover .hamburger-icon, .popup-button.nav-button:hover .hamburger-icon::before, .popup-button.nav-button:hover .hamburger-icon::after { background-color: var(--secondary-color); }

.no-results-message { color: var(--secondary-color); text-align: center; padding: 1.25em; font-size: 1em; font-style: italic; }
#cart-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--overlay-bg-color); z-index: 3000; overflow: auto; }
.cart-notification { position: fixed; top: 0.625em; right: 0.625em; width: 1.875em; height: 1.875em; background-color: var(--secondary-color); border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 3001; color: var(--background-color); }
.cart-icon { width: 80%; height: 80%; object-fit: contain; pointer-events: none; }
.cart-count-circle { position: absolute; top: -0.625em; right: -0.625em; width: 1.5625em; height: 1.5625em; background-color: var(--primary-color); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1em; font-weight: 700; color: #fff; border: 2px solid #fff; }
#cart-count { font-size: 1em; font-weight: 700; }
.cart-notification.animate { animation: cart-shake 0.8s ease-in-out; }
@keyframes cartPulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes cart-shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); } 20%, 40%, 60%, 80% { transform: translateX(3px); } }
#cart-modal { background-color: var(--modal-bg-color); margin: 10% auto; padding: 1.25em; border: 1px solid var(--border-color); border-radius: var(--border-radius); width: 400px; max-width: 90%; position: relative; color: var(--text-color); font-family: var(--font-family); overflow: hidden; font-size: 0.9em; }
.cart-close-button { position: absolute; top: 0.625em; right: 0.625em; }
#cart-items { list-style: none; padding: 0; margin: 0; }
#cart-items li { display: flex; justify-content: space-between; align-items: center; padding: 0.625em 0; border-bottom: 1px solid var(--border-color); }
#cart-items li:last-child { border-bottom: none; }
.cart-item-info { flex-grow: 1; }
.cart-item-title { color: var(--lcar-light-blue); }
.cart-item-price { color: var(--secondary-color); font-size: 0.8em; margin-left: 0.625em; }
.remove-from-cart-button { background: none; color: var(--lcar-red); border: 1px solid var(--lcar-red); padding: 0.125em 0.3125em; cursor: pointer; font-size: 1em; border-radius: var(--border-radius); transition: all 0.3s ease; margin-left: 0.625em; }
.remove-from-cart-button:hover { background-color: var(--lcar-red); color: var(--background-color); }
.cart-total { font-size: 1em; margin-top: 1em; text-align: right; color: var(--primary-color); }
.cart-total span { color: var(--secondary-color); }
.checkout-button { margin-top: 1.25em; background-color: var(--lcar-light-blue); color: var(--background-color); border: 1px solid var(--lcar-light-blue); font-size: 1em; padding: 0.6em 1em; }
.checkout-button:hover { background-color: var(--lcar-light-blue); color: var(--background-color); border-color: var(--primary-color); }
#auth-modal .modal-content.auth-content { padding: 1.25em; width: 400px; }
.auth-tabs { border-bottom: 1px solid var(--border-color); margin-bottom: 1.25em; display: flex; /* Добавлено для равномерного распределения кнопок */ }
.auth-tab { flex: 1; background: none; border: none; padding: 1em 1em; /* Уменьшен padding для лучшего вида на мобильных */ cursor: pointer; font-family: var(--font-family); color: var(--text-color); background-color: var(--button-bg-color); transition: background-color var(--transition-duration); font-size: 0.9em; }
.auth-tab.active { background-color: var(--modal-bg-color); color: var(--primary-color); }
.auth-tab:hover { background-color: var(--button-hover-bg-color); }
.auth-form { display: none; padding: 0.625em 0; }
.auth-form.active-form { display: block; }
.auth-form .form-group { margin-bottom: 1em; padding-right: 0; /* Убрано, т.к. auth-form-fields-container теперь контролирует это */ }
.auth-form label { display: block; margin-bottom: 0.3125em; color: var(--secondary-color); font-size: 0.9em; }
.auth-form input[type="text"], .auth-form input[type="email"], .auth-form input[type="password"] { width: 100%; padding: 0.625em; border: 1px solid var(--border-color); background-color: var(--modal-bg-color); color: var(--text-color); border-radius: var(--border-radius); font-size: 1em; box-sizing: border-box; /* Добавлено для корректного width 100% */ }
.auth-form button[type="submit"].button-base { width: 100%; margin-top: 0.625em; font-size: 1em; padding: 0.7em 1em; }
#auth-message { color: var(--lcar-red); margin-bottom: 0.625em; text-align: center; font-size: 0.9em; } /* Это #auth-message, а не #signin-message / #signup-message, но может быть общим */
#signin-message, #signup-message, #forgot-message, #topup-message { /* Стили для конкретных сообщений */
    color: var(--lcar-red); margin-bottom: 0.625em; text-align: center; font-size: 0.9em; /* min-height: 1.2em; /* Чтобы не прыгал макет */
}
#forgot-success-message { color: var(--lcar-light-blue); } /* Для успешных сообщений */

.auth-controls { gap: 0.625em; }
#user-profile { display: none; align-items: center; }
#user-profile img { width: 1.875em; height: 1.875em; border-radius: 50%; margin-right: 0.5em; vertical-align: middle; }
#user-profile span { vertical-align: middle; color: var(--text-color); font-size: 0.9em; }
.auth-controls .button-base.nav-button { margin-bottom: 0; /* display: none; было, но лучше управлять этим через JS или классы */ }
.popup-nav-item.active { background-color: var(--button-hover-bg-color); color: var(--primary-color); font-weight: 700; }
.sound-action-button { background: none; color: var(--lcar-light-blue); border: 1px solid var(--lcar-light-blue); padding: 0.2em 0.5em; cursor: pointer; font-size: 0.8em; border-radius: var(--border-radius); transition: all var(--transition-duration) ease; }
.sound-action-button:hover:not(:disabled) { background-color: var(--lcar-light-blue); color: var(--background-color); }
.sound-action-button:disabled { border-color: var(--border-color); color: var(--border-color); cursor: not-allowed; background: none; }
/* .sound-action-button { background-color: transparent !important; } /* !important часто не нужен */
/* .sound-action-button:hover:not(:disabled) { background-color: var(--lcar-light-blue) !important; } /* !important часто не нужен */
#payment-modal .auth-modal-content { max-width: 400px; } /* Возможно, это #topup-modal, а не #payment-modal */
.payment-info { text-align: center; margin-bottom: 1em; color: #ccc; font-size: 0.9em; }
/* #payment-form .form-group { margin-bottom: 1.25em; } /* Стили для форм уже есть в .auth-form .form-group */
/* #payment-form label { display: block; margin-bottom: 0.3125em; color: #ddd; font-weight: 700; font-size: 0.9em; } */
/* #payment-form input[type="number"] { width: 100%; padding: 0.625em; border: 1px solid #555; background-color: #333; color: #fff; border-radius: 4px; box-sizing: border-box; font-size: 1em; } */
/* #payment-form input[type="number"]::-webkit-outer-spin-button, #payment-form input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } */
/* #payment-form input[type="number"] { -moz-appearance: textfield; } */
.top-up-button { margin-left: 1em; padding: 0.3125em 0.625em; background-color: #4a90e2; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9em; transition: background-color 0.2s ease; }
.top-up-button:hover { background-color: #357abd; }
#user-balance-section .top-up-button { display: none; /* Управляется JS */ }
#topup-modal .modal-content { padding-right: 15px; }
#topup-amount { width: 95%; padding: 0.75em; margin: 0.625em 0; border: 1px solid var(--border-color); border-radius: var(--border-radius); background-color: var(--modal-bg-color); color: var(--text-color); font-family: var(--font-family); font-size: 1em; }#profile-loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); z-index: 100000; display: flex; justify-content: center; align-items: center; color: white; font-size: 1.5em; font-weight: bold; text-align: center; }
#profile-loading-overlay .loading-content { padding: 1.25em; }
.terms-agreement-container { margin-top: 1em; margin-bottom: 1.25em; font-size: 0.85em; color: #ccc; line-height: 1.5; }
.terms-agreement-container input[type="checkbox"] { margin-right: 0.5em; vertical-align: middle; flex-shrink: 0; /* добавлено из HTML */ margin-top: 3px; /* добавлено из HTML */ }
.terms-agreement-container label { cursor: pointer; user-select: none; /* vertical-align: middle; */ display: flex; align-items: flex-start; /* добавлено из HTML */ }
.terms-agreement-container label span { color: #ccc; /* из HTML */ }
.terms-agreement-container a { color: var(--secondary-color); text-decoration: none; }
.terms-agreement-container a:hover { text-decoration: underline; }
#signup-terms-error, #topup-offer-error { color: var(--lcar-red); font-size: 0.8em; margin-top: 0.3125em; display: none; } /* Объединено */
.cookie-consent-banner { position: fixed; bottom: 0; left: 0; right: 0; background-color: #282525; color: #ccc; padding: 0.625em 1.25em; z-index: 5000; display: flex; justify-content: space-between; align-items: center; font-size: 0.8125em; border-top: 1px solid #444; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); }
.cookie-consent-banner p.cookie-consent-text { margin: 0; margin-right: 1em; line-height: 1.4; }
.cookie-consent-banner a { color: #e0a020; text-decoration: none; }
.cookie-consent-banner a:hover { text-decoration: underline; }
.cookie-consent-button { background-color: #e0a020; color: #282525; border: none; padding: 0.5em 1em; border-radius: 4px; cursor: pointer; font-size: 1em; font-weight: bold; white-space: nowrap; transition: background-color 0.2s ease; }
.cookie-consent-button:hover { background-color: #f0b90b; }
.auth-form-fields-container { /* padding-right: 1.25em; */}

/* ===================================================================== */
/* === МОБИЛЬНАЯ ВЕРСИЯ: ВИДЕОФОН + ПРОФИЛЬ В ЦЕНТРЕ (ФИНАЛ) === */
/* ===================================================================== */

/*
 * Стили для экранов 768px и меньше (планшеты и смартфоны)
 */
@media screen and (max-width: 768px) {

    /* --- ГЛАВНЫЕ ИЗМЕНЕНИЯ В ШАПКЕ --- */

    /* 1. Оставляем контейнер с видео, но задаем ему фиксированную высоту */
    #page-media {
        position: relative !important; /* Основа для абсолютного позиционирования .top-bar */
        height: 200px !important;      /* Высота шапки на планшете. Можете настроить. */
        display: block;               /* Убираем flex, чтобы не влиять на видео */
    }

    /* 2. ТОЧЕЧНО СКРЫВАЕМ ТОЛЬКО ЛОГОТИП */
    #title-wrap {
        display: none !important;
    }

    /* 3. Позиционируем .top-bar поверх видео */
    .top-bar {
        position: absolute !important; /* Размещаем поверх #page-media */
        top: 0;
        left: 0;
        width: 100%;
        padding: 10px 15px;
        box-sizing: border-box;
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        min-height: 60px;
        /* Убираем фон и границу, чтобы было видно видео */
        background-color: transparent !important;
        border-bottom: none !important;
    }

    /* 4. Перестраиваем элементы ВНУТРИ .top-bar */
    
    .main-nav { order: 1; flex: 1; justify-content: flex-start; } /* Меню слева */
    .auth-controls { order: 2; flex: 2; justify-content: center; } /* Профиль в центре */
    .cart-notification-wrapper { order: 3; flex: 1; display: flex; justify-content: flex-end; } /* Корзина справа */

    .popup-button.nav-button {
        margin: 0;
    }

    /* 5. Стилизуем и делаем компактным профиль */
    .auth-controls {
        position: static;
        display: flex;
        gap: 15px;
        align-items: center;
    }
    #user-profile {
        display: flex;
        align-items: center;
        gap: 10px;
        background: none;
        border: none;
        padding: 0;
    }
    #user-profile img {
        width: 35px;
        height: 35px;
    }
    /* СРАЗУ СКРЫВАЕМ ИМЯ И ТЕКСТ БАЛАНСА НА ВСЕХ МОБИЛЬНЫХ */
    #user-profile .username-display,
    #user-balance-section .user-balance-text {
        display: none;
    }


    /* --- ОСТАЛЬНЫЕ МОБИЛЬНЫЕ ИСПРАВЛЕНИЯ --- */
    body { font-size: 15px; }
    
    .search-bar input[type="text"], .select-container select, .auth-form input, #topup-amount {
        font-size: 16px !important;
    }
    
    .search-bar-wrapper {
        max-width: 95%;
        margin-top: 20px;
    }

    .sound-list {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 15px;
    }
}


/*
 * Стили для экранов 480px и меньше (смартфоны)
 */
@media screen and (max-width: 480px) {
    /* Делаем шапку еще компактнее */
    #page-media {
        height: 180px !important;
    }

    .top-bar {
        padding: 8px 10px;
    }
    
    #user-profile img {
        width: 30px;
        height: 30px;
    }

    /* Вертикальная панель поиска и одноколоночная сетка */
    .search-bar {
        flex-direction: column;
        gap: 10px;
    }
    .search-bar > *, .select-container select {
        width: 100%;
    }
    
    .sound-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}