/* FILE: .\public_html\css\site.css */

@import url('gallery.css');
@import url('carousel.css');
@import url('notifications.css');
@import url('forms.css');
@import url('search.css');
@import url('image-grid-preview.css');
@import url('image-sortable.css');
@import url('bottom-nav.css');

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    
    /* Переменные для ссылок и кнопок */
    --bs-dark-link-color: #8b8b8b;
    --bs-dark-link-color-hover: #ffffff;
    --bs-light-link-color: #3b3b3b;
    --bs-light-link-color-hover: #000000;
    
    /* Дополнительные переменные */
    --gallery-gap: 10px;
    --gallery-bg: #f8f9fa;
    --gallery-radius: 8px;
    --bs-link-color-rgb: #EEE;
}

/* ============================================
   ЕДИНЫЕ СТИЛИ ДЛЯ КНОПОК, ССЫЛОК И ИКОНОК
   ============================================ */

/* --- Темная тема (по умолчанию) --- */
[data-bs-theme="dark"] {
    /* Ссылки */
    --bs-link-color: var(--bs-dark-link-color);
    --bs-link-hover-color: var(--bs-dark-link-color-hover);
    --bs-link-decoration: none;
    --bs-link-hover-decoration: underline;
    
    /* Кнопки-ссылки (btn-link) */
    --bs-btn-link-color: var(--bs-dark-link-color);
    --bs-btn-link-hover-color: var(--bs-dark-link-color-hover);
    
    /* Иконки в ссылках и кнопках */
    --icon-filter: grayscale(1) brightness(0.6);
    --icon-filter-hover: grayscale(0) brightness(1);
}

/* --- Светлая тема --- */
[data-bs-theme="light"] {
    --bs-link-color: var(--bs-light-link-color);
    --bs-link-hover-color: var(--bs-light-link-color-hover);
    --bs-link-decoration: none;
    --bs-link-hover-decoration: underline;
    
    --bs-btn-link-color: var(--bs-light-link-color);
    --bs-btn-link-hover-color: var(--bs-light-link-color-hover);
    
    --icon-filter: grayscale(1) brightness(0.4);
    --icon-filter-hover: grayscale(0) brightness(1);
}

/* ============================================
   ОБЩИЕ СТИЛИ ДЛЯ ССЫЛОК
   ============================================ */

/* Все ссылки (кроме кнопок и навигации) */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.search-params-clear):not(.bottom-nav .nav-link) {
    color: var(--bs-link-color) !important;
    text-decoration: var(--bs-link-decoration);
    transition: color 0.25s ease, text-decoration 0.25s ease;
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.search-params-clear):not(.bottom-nav .nav-link):hover,
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.search-params-clear):not(.bottom-nav .nav-link):focus {
    color: var(--bs-link-hover-color) !important;
    text-decoration: var(--bs-link-hover-decoration);
}

/* ============================================
   ОБЩИЕ СТИЛИ ДЛЯ КНОПОК (btn-link)
   ============================================ */

.btn-link {
    color: var(--bs-link-color) !important;
    text-decoration: var(--bs-link-decoration);
    transition: color 0.25s ease, text-decoration 0.25s ease;
}

.btn-link:hover,
.btn-link:focus {
    color: var(--bs-link-hover-color) !important;
    text-decoration: var(--bs-link-hover-decoration);
}

/* ============================================
   ОБЩИЕ СТИЛИ ДЛЯ ИКОНОК
   ============================================ */

/*
.glyphicon,
.glyphicon-class,
[class*="glyphicon-"],
.nav-icon,
.extension-icon,
.profile-avatar,
.footer-logo-light,
.footer-logo-dark,
svg:not(.btn svg):not(.search-params-clear svg) {
    color: var(--bs-link-color) !important;
    fill: var(--bs-link-color) !important;
    stroke: var(--bs-link-color) !important;
    transition: color 0.3s ease, fill 0.3s ease, stroke 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}

a:hover .glyphicon,
a:hover .glyphicon-class,
a:hover [class*="glyphicon-"],
a:hover .nav-icon,
a:hover .extension-icon,
a:hover .profile-avatar,
a:hover svg:not(.btn svg) {
    color: var(--bs-link-hover-color) !important;
    fill: var(--bs-link-hover-color) !important;
    stroke: var(--bs-link-hover-color) !important;
}
*/

/* ============================================
   СТИЛИ ДЛЯ КНОПОК С ИКОНКАМИ
   ============================================ */

/* Кнопки с иконками (стандартные) */
.btn .glyphicon,
.btn .glyphicon-class,
.btn [class*="glyphicon-"],
.btn .nav-icon,
.btn svg {
    color: inherit !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    transition: color 0.3s ease, fill 0.3s ease, stroke 0.3s ease;
}

/* Кнопки-ссылки */
.btn-link .glyphicon,
.btn-link [class*="glyphicon-"],
.btn-link .nav-icon,
.btn-link svg {
    color: var(--bs-link-color) !important;
    fill: var(--bs-link-color) !important;
    stroke: var(--bs-link-color) !important;
}

.btn-link:hover .glyphicon,
.btn-link:hover [class*="glyphicon-"],
.btn-link:hover .nav-icon,
.btn-link:hover svg,
.btn-link:focus .glyphicon,
.btn-link:focus [class*="glyphicon-"],
.btn-link:focus .nav-icon,
.btn-link:focus svg {
    color: var(--bs-link-hover-color) !important;
    fill: var(--bs-link-hover-color) !important;
    stroke: var(--bs-link-hover-color) !important;
}

/* ============================================
   НИЖНЕЕ МЕНЮ (bottom-nav)
   ============================================ */

.bottom-nav .navbar-nav .nav-link {
    color: var(--bs-link-color) !important;
    text-decoration: none !important;
    transition: color 0.25s ease;
}

.bottom-nav .navbar-nav .nav-link:hover,
.bottom-nav .navbar-nav .nav-link:focus,
.bottom-nav .navbar-nav .nav-link.active {
    color: var(--bs-link-hover-color) !important;
    text-decoration: none !important;
}

/* Иконки в нижнем меню */
.bottom-nav .navbar-nav .nav-link .nav-icon {
    color: var(--bs-link-color) !important;
    fill: var(--bs-link-color) !important;
    stroke: var(--bs-link-color) !important;
    filter: var(--icon-filter);
    transition: color 0.3s ease, fill 0.3s ease, stroke 0.3s ease, filter 0.3s ease, transform 0.2s ease;
}

.bottom-nav .navbar-nav .nav-link:hover .nav-icon,
.bottom-nav .navbar-nav .nav-link:focus .nav-icon,
.bottom-nav .navbar-nav .nav-link.active .nav-icon {
    color: var(--bs-link-hover-color) !important;
    fill: var(--bs-link-hover-color) !important;
    stroke: var(--bs-link-hover-color) !important;
    filter: var(--icon-filter-hover);
    transform: scale(1.1);
}

/* Метки в нижнем меню */
.bottom-nav .navbar-nav .nav-link .nav-label {
    color: var(--bs-link-color) !important;
    transition: color 0.25s ease;
}

.bottom-nav .navbar-nav .nav-link:hover .nav-label,
.bottom-nav .navbar-nav .nav-link:focus .nav-label,
.bottom-nav .navbar-nav .nav-link.active .nav-label {
    color: var(--bs-link-hover-color) !important;
}

/* Индикатор активного пункта */
.bottom-nav .navbar-nav .nav-item.active .nav-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 2px;
    background: var(--bs-link-hover-color);
    border-radius: 0 0 2px 2px;
}

/* ============================================
   КНОПКА ПЕРЕКЛЮЧЕНИЯ ТЕМЫ
   ============================================ */

#theme-toggle .nav-icon {
    color: var(--bs-link-color) !important;
    fill: var(--bs-link-color) !important;
    stroke: var(--bs-link-color) !important;
    filter: var(--icon-filter);
    transition: color 0.3s ease, fill 0.3s ease, stroke 0.3s ease, filter 0.3s ease, transform 0.2s ease;
}

#theme-toggle:hover .nav-icon,
#theme-toggle:focus .nav-icon {
    color: var(--bs-link-hover-color) !important;
    fill: var(--bs-link-hover-color) !important;
    stroke: var(--bs-link-hover-color) !important;
    filter: var(--icon-filter-hover);
    transform: scale(1.1);
}

#theme-toggle .nav-label {
    color: var(--bs-link-color) !important;
    transition: color 0.25s ease;
}

#theme-toggle:hover .nav-label,
#theme-toggle:focus .nav-label {
    color: var(--bs-link-hover-color) !important;
}

/* ============================================
   ССЫЛКИ В ПАНЕЛЯХ И КАРТОЧКАХ
   ============================================ */

.panel .btn-link,
.card .btn-link,
.well .btn-link {
    color: var(--bs-link-color) !important;
}

.panel .btn-link:hover,
.card .btn-link:hover,
.well .btn-link:hover,
.panel .btn-link:focus,
.card .btn-link:focus,
.well .btn-link:focus {
    color: var(--bs-link-hover-color) !important;
}

/* ============================================
   ССЫЛКИ В ХЛЕБНЫХ КРОШКАХ
   ============================================ */

.breadcrumb a {
    color: var(--bs-link-color) !important;
    transition: color 0.25s ease;
}

.breadcrumb a:hover,
.breadcrumb a:focus {
    color: var(--bs-link-hover-color) !important;
}

.breadcrumb .active {
    color: var(--bs-link-color) !important;
    opacity: 0.6;
}

/* ============================================
   КНОПКИ В ПРОФИЛЕ
   ============================================ */

.profile-menu .btn {
    color: var(--bs-link-color) !important;
    background-color: transparent !important;
    border: 1px solid var(--bs-link-color) !important;
    transition: all 0.25s ease;
}

.profile-menu .btn:hover,
.profile-menu .btn:focus {
    color: var(--bs-link-hover-color) !important;
    border-color: var(--bs-link-hover-color) !important;
    background-color: transparent !important;
}

.profile-menu .btn svg {
    color: inherit !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* ============================================
   ССЫЛКИ "ОТПИСАТЬСЯ", "СБРОСИТЬ" И Т.П.
   ============================================ */

.search-params-clear,
.delete-subscription,
.delete-image-btn {
    color: var(--bs-link-color) !important;
    text-decoration: none !important;
    transition: color 0.25s ease;
}

.search-params-clear:hover,
.search-params-clear:focus,
.delete-subscription:hover,
.delete-subscription:focus,
.delete-image-btn:hover,
.delete-image-btn:focus {
    color: var(--bs-link-hover-color) !important;
    text-decoration: none !important;
}

.search-params-clear svg,
.delete-subscription svg,
.delete-image-btn svg {
    color: inherit !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* ============================================
   ССЫЛКИ "НАЗАД"
   ============================================ */

.back-link {
    color: var(--bs-link-color) !important;
    text-decoration: none !important;
    transition: color 0.25s ease;
}

.back-link:hover,
.back-link:focus {
    color: var(--bs-link-hover-color) !important;
    text-decoration: none !important;
}

.back-link svg {
    color: inherit !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* ============================================
   ИКОНКИ В АВАТАРАХ И ЭМОДЗИ
   ============================================ */

.profile-avatar {
    color: var(--bs-link-color) !important;
    fill: var(--bs-link-color) !important;
    stroke: var(--bs-link-color) !important;
    filter: var(--icon-filter);
    transition: color 0.3s ease, fill 0.3s ease, stroke 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}

.profile-header:hover .profile-avatar {
    color: var(--bs-link-hover-color) !important;
    fill: var(--bs-link-hover-color) !important;
    stroke: var(--bs-link-hover-color) !important;
    filter: var(--icon-filter-hover);
    transform: scale(1.05);
}

.extension-icon {
    color: var(--bs-link-color) !important;
    fill: var(--bs-link-color) !important;
    stroke: var(--bs-link-color) !important;
    filter: var(--icon-filter);
    transition: color 0.3s ease, fill 0.3s ease, stroke 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}

.extension-card:hover .extension-icon {
    color: var(--bs-link-hover-color) !important;
    fill: var(--bs-link-hover-color) !important;
    stroke: var(--bs-link-hover-color) !important;
    filter: var(--icon-filter-hover);
    transform: scale(1.15);
}

/* ============================================
   ПАГИНАЦИЯ
   ============================================ */

.pagination > li > a,
.pagination > li > span {
    color: var(--bs-link-color) !important;
    background-color: transparent !important;
    border-color: var(--bs-link-color) !important;
    transition: all 0.25s ease;
}

.pagination > li > a:hover,
.pagination > li > a:focus {
    color: var(--bs-link-hover-color) !important;
    background-color: transparent !important;
    border-color: var(--bs-link-hover-color) !important;
}

.pagination > .active > a,
.pagination > .active > span {
    color: var(--bs-link-hover-color) !important;
    background-color: transparent !important;
    border-color: var(--bs-link-hover-color) !important;
}

.pagination > .active > a:hover,
.pagination > .active > span:hover {
    color: var(--bs-link-hover-color) !important;
    background-color: transparent !important;
    border-color: var(--bs-link-hover-color) !important;
}

/* ============================================
   КНОПКИ В СООБЩЕНИЯХ (messages)
   ============================================ */

.message-input-container .btn-send {
    color: var(--bs-link-hover-color) !important;
    background-color: var(--bs-link-color) !important;
    border: none;
    transition: all 0.25s ease;
}

.message-input-container .btn-send:hover,
.message-input-container .btn-send:focus {
    background-color: var(--bs-link-hover-color) !important;
    transform: scale(1.05);
}

.message-input-container .btn-send svg {
    color: var(--bs-link-hover-color) !important;
    fill: var(--bs-link-hover-color) !important;
    stroke: var(--bs-link-hover-color) !important;
}

/* ============================================
   КНОПКИ ПОДПИСКИ (subscribe)
   ============================================ */

.search-subscribe-btn,
#subscribe-button,
.subscribe-button {
    color: var(--bs-link-hover-color) !important;
    background-color: var(--bs-link-color) !important;
    border: none;
    transition: all 0.25s ease;
}

.search-subscribe-btn:hover,
.search-subscribe-btn:focus,
#subscribe-button:hover,
#subscribe-button:focus,
.subscribe-button:hover,
.subscribe-button:focus {
    background-color: var(--bs-link-hover-color) !important;
    color: var(--bs-link-color) !important;
}

.search-subscribe-btn svg,
#subscribe-button svg,
.subscribe-button svg {
    color: inherit !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* ============================================
   КНОПКИ В ФОРМАХ (основные)
   ============================================ */

/* Стандартные кнопки наследуют цвета темы */
.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info {
    color: #fff !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-info:hover {
    color: #fff !important;
}

/* Кнопки с прозрачным фоном */
.btn-outline-primary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info {
    color: var(--bs-link-color) !important;
    border-color: var(--bs-link-color) !important;
}

.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover {
    color: var(--bs-link-hover-color) !important;
    background-color: transparent !important;
    border-color: var(--bs-link-hover-color) !important;
}

/* ============================================
   ПЛАВНЫЙ ПЕРЕХОД ПРИ СМЕНЕ ТЕМЫ
   ============================================ */

* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, 
                box-shadow 0.3s ease, fill 0.3s ease, stroke 0.3s ease, filter 0.3s ease;
}

/* ============================================
   СТИЛИ ДЛЯ ОБЪЯВЛЕНИЙ (дополнительные)
   ============================================ */

thead, tbody, tfoot, tr, td, th {
    border-style: none;
}

.container {
    padding: 1em 0px 0px 0px;
    width: 1320px;
    max-width: 1320px;
}

@media (max-width: 1330px) {
    .container {
        width: 990px;
        max-width: 990px;
    }
}

@media (max-width: 1000px) {
    .container {
        width: 660px;
        max-width: 660px;
    }
}

@media (max-width: 680px) {
    .container {
        width: 330px;
        max-width: 330px;
    }
}

.advertisement-meta {
    font-size: 16px;
    margin-top: 10px;
}

.advertisement-meta a {
    color: var(--bs-link-color) !important;
}

.advertisement-meta a:hover {
    color: var(--bs-link-hover-color) !important;
}

.advertisement-placeholder {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.navbar {
    height: 40px;
}

.navbar-nav {
    flex-wrap: nowrap;
}

.nav-item {
    text-wrap-mode: nowrap;
}

.media {
    transition: all 0.3s ease;
}

.media:hover {
    background: #fafafa;
    border-radius: 1em;
}

.list-view {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.list-view > div {
    width: 330px;
}

.list-view .media {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    text-decoration: none;
    margin-bottom: 20px;
}

.list-view .media:hover {
    background: #283939;
}

.price-large {
    font-size: 24px;
    color: #d9534f;
    font-weight: bold;
}

.section-badge {
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 4px;
}

.section-badge.sell {
    background: #d9534f;
    color: white;
}

.section-badge.buy {
    background: #5bc0de;
    color: white;
}

/* Стили для форм */
.form-group.required label:after {
    content: " *";
    color: red;
}

.logout {
    color: rgba(255, 255, 255, 0.5);
}

.logout:hover {
    color: rgba(255, 255, 255, 0.75);
}

.media-body {
    text-decoration: none;
}

.gallery-grid {
    overflow: none;
}

.media .preview {
    color: gray;
}

.table > tbody {
    border-style: none;
}

.image-preview-grid {
    display: grid;
    gap: 5px;
}

.image-preview-grid .image-thumb {
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
    border-radius: 4px; 
    background: #f0f0f0;
}

.advertisement-item .media-body {
    display: flex;
    align-items: center;
}

.pagination li {
    margin: 0px 5px;
}

/* ============================================
   ТЕМНЫЕ ТЕМЫ (дополнительные стили)
   ============================================ */

[data-bs-theme="dark"] .navbar-dark {
    background-color: #212529 !important;
}

[data-bs-theme="light"] .navbar-dark {
    background-color: #f8f9fa !important;
}

[data-bs-theme="light"] .media:hover {
    background: #f5f5f5;
}

[data-bs-theme="dark"] .media:hover {
    background: #2a2a2a;
}

[data-bs-theme="light"] .advertisement-meta {
    color: #666;
}

[data-bs-theme="dark"] .advertisement-meta {
    color: #aaa;
}

[data-bs-theme="light"] .panel-default {
    border-color: #ddd;
}

[data-bs-theme="dark"] .panel-default .panel-heading {
    background-color: #333;
    color: #eee;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #333;
    border-color: #555;
    color: #eee;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #444;
    border-color: #007bff;
    color: #eee;
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: #888;
}

[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select {
    background-color: #fff;
    border-color: #ced4da;
    color: #212529;
}

[data-bs-theme="dark"] .text-muted {
    color: #888 !important;
}

[data-bs-theme="dark"] .text-body-secondary {
    color: #aaa !important;
}

[data-bs-theme="dark"] .help-block {
    color: #aaa !important;
}

[data-bs-theme="dark"] .btn-default {
    background-color: #444;
    border-color: #555;
    color: #eee;
}

[data-bs-theme="dark"] .btn-default:hover {
    background-color: #555;
    border-color: #666;
    color: #fff;
}

[data-bs-theme="dark"] .btn-outline-secondary {
    color: #ccc;
    border-color: #555;
}

[data-bs-theme="dark"] .btn-outline-secondary:hover {
    background-color: #444;
    border-color: #666;
    color: #fff;
}

[data-bs-theme="dark"] a:not(.btn):not(.nav-link) {
    color: var(--bs-dark-link-color) !important;
}

[data-bs-theme="dark"] a:not(.btn):not(.nav-link):hover {
    color: var(--bs-dark-link-color-hover) !important;
}

[data-bs-theme="dark"] .breadcrumb {
    background-color: #2a2a2a;
}

[data-bs-theme="dark"] .breadcrumb-item.active {
    color: #aaa;
}

[data-bs-theme="dark"] .card {
    background-color: #2a2a2a;
    border-color: #444;
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
    background-color: #333;
    border-color: #444;
}

[data-bs-theme="dark"] .card-title {
    color: #eee;
}

[data-bs-theme="dark"] .table {
    color: #eee;
}

[data-bs-theme="dark"] .table > thead > tr > th {
    border-color: #444;
    color: #ddd;
}

[data-bs-theme="dark"] .table > tbody > tr > td {
    border-color: #444;
}

[data-bs-theme="dark"] .table-hover > tbody > tr:hover {
    background-color: #333;
}

[data-bs-theme="dark"] .well {
    background-color: #2a2a2a;
    border-color: #444;
    color: #eee;
}

[data-bs-theme="dark"] .alert-info {
    background-color: #1a2a3a;
    border-color: #2a4a6a;
    color: #8ec8e8;
}

[data-bs-theme="dark"] .alert-success {
    background-color: #1a3a1a;
    border-color: #2a5a2a;
    color: #8ec88e;
}

[data-bs-theme="dark"] .alert-warning {
    background-color: #3a3a1a;
    border-color: #5a5a2a;
    color: #e8e88e;
}

[data-bs-theme="dark"] .alert-danger {
    background-color: #3a1a1a;
    border-color: #5a2a2a;
    color: #e88e8e;
}

[data-bs-theme="dark"] .gallery-container {
    background: #2a2a2a;
}

[data-bs-theme="dark"] .gallery-item {
    background: #333;
}

[data-bs-theme="dark"] .carousel-thumbnails {
    background: #2a2a2a;
}

[data-bs-theme="dark"] .profile-header {
    border-bottom-color: #444;
}

[data-bs-theme="dark"] .profile-menu {
    border-top-color: #444;
    border-bottom-color: #444;
}

[data-bs-theme="dark"] .bottom-nav {
    background: #212529;
    border-top: 1px solid #343a40;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="light"] .bottom-nav {
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* ============================================
   АДАПТИВНОСТЬ
   ============================================ */

@media (max-width: 768px) {
    .bottom-nav .navbar-nav .nav-link .nav-label {
        font-size: 8px;
    }
    
    .bottom-nav .navbar-nav .nav-link .nav-icon {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .bottom-nav .navbar-nav .nav-link .nav-label {
        font-size: 7px;
    }
    
    .bottom-nav .navbar-nav .nav-link .nav-icon {
        font-size: 18px;
    }
    
    .bottom-nav .navbar-nav .nav-item {
        padding: 4px 0 6px 0;
    }
}