body::before {
    content: "";
    position: fixed;
    inset: 0; /* Навбар непрозрачный, поэтому фон тянем на весь экран без щели снизу */
    background-image: var(--vv-page-bg, url('data/backgrounds/back1.jpg'));
    background-size: cover; /* Масштабирование изображения */
    background-repeat: no-repeat; /* Избегать повторов изображения */
    background-position: center; /* Центрирование изображения */
    filter: brightness(40%); /* Затемнение через яркость */
    z-index: -1; /* Переместить псевдоэлемент на задний план */
}

body.login-page::before {
    background-image: none;
}

.no-select {
    -webkit-user-select: none; /* для Safari */
    -moz-user-select: none;    /* для Firefox */
    -ms-user-select: none;     /* для IE/Edge */
    user-select: none;         /* стандартное свойство */
}


.card {
    overflow: hidden; /* Скрывает всё, что выходит за границы */
    transition: transform 0.1s ease-in-out; /* Устанавливаем плавный переход */
}

.album_list_album.card-title {
    overflow: hidden; /* Скрываем лишний текст */
    display: -webkit-box; /* Для создания контейнера flex с ограничением линий */
    -webkit-line-clamp: 1; /* Ограничиваем количество строк до двух */
    -webkit-box-orient: vertical; /* Вертикальная ориентация для ограничения строк */
    text-overflow: ellipsis; /* Добавляем многоточие в конце обрезанного текста */
    word-break: break-word; /* Переносим длинные слова, если нужно */
    word-break: break-all; /* Разрешаем разрывать слова */
}

.image-container {
    position: relative;
    width: 100%;
    padding-top: 100%; /* Делает контейнер квадратным */
    background-image: var(--vv-loading-placeholder, url('data/other/loading.jpg'));
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* Скрытие изображения до загрузки */
.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* Прозрачное до загрузки */
    transition: opacity 0.9s ease; /* Анимация появления */
}

/* Стили для кнопки удаления */
.delete-album-button {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.card:hover .delete-album-button {
    opacity: 1;
}

/* Стили для режима редактирования */
.edit-mode .card {
    cursor: move;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.edit-mode .card:hover {
    opacity: 1;
}

.edit-mode .delete-album-button {
    opacity: 1;
}

.edit-mode .card-body {
    pointer-events: none;
}

.edit-mode .image-container {
    pointer-events: none;
}

/* Стили для drag-and-drop */
.dragging {
    opacity: 0.5;
    transform: scale(1.05);
    z-index: 1000;
    transition: transform 0.2s ease;
}

.drag-over {
    transform: translateY(5px);
    transition: transform 0.2s ease;
}

/* Добавляем плавный переход для всех карточек в режиме редактирования */
.edit-mode li {
    transition: all 0.2s ease;
}

/* Стили для кнопок редактирования */
.edit-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

#save-cancel-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Эффект при наведении на кнопку "Explore" */
#search-album-btn {
    position: relative;
    overflow: visible;
    transition: all 0.6s ease;
}

#search-album-btn::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #9bdb05, #f3b7d8, #a8e5f5, #e78606);
    border-radius: inherit;
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.6s ease;
    z-index: -1;
    background-size: 400% 400%;
    animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

#search-album-btn:hover::before {
    opacity: 0.8;
}

#search-album-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
}

/* Логотип сжимается, чтобы кнопки навбара всегда влезали в одну строку */
.navbar-logo {
    width: 200px;
    max-width: 40vw;
    height: auto;
    aspect-ratio: 200 / 30;
}

@media (max-width: 575.98px) {
    /* Кнопок в блоке несколько, поэтому на узком экране переносим их вместо горизонтального выхода за контейнер */
    .edit-controls {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
    }

    .navbar .btn {
        --bs-btn-padding-x: 0.5rem;
        --bs-btn-padding-y: 0.25rem;
        --bs-btn-font-size: 0.8125rem;
        white-space: nowrap;
    }
}

/* 100vh в iOS Safari выше видимой области, поэтому центрируемый блок
   уезжает под адресную строку. svh считает панели браузера. */
.vv-full-screen {
    min-height: 100vh;
    padding-top: 4.5rem;
    padding-bottom: 1.5rem;
}

@supports (min-height: 100svh) {
    .vv-full-screen {
        min-height: 100svh;
    }
}