/* === Global Styles === */
body {
    font-family: 'Roboto', sans-serif; /* Modern, clean font */
    background-color: #ffffff; /* Very light blue background */
    margin: 0;
    padding: 0;
    color: #333; /* Dark grey text */
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    display: flex;
    justify-content: center; /* Center the main container */
    max-width: 1500px; /* Increased max width */
    margin: 30px auto;
    padding: 0 20px; /* Adjusted padding */
    box-sizing: border-box;
    gap: 20px; /* Gap between sidebars and main content */
}

h2, h3, h4 {
    color: #1f3a60; /* Deep blue-gray */
    margin-bottom: 15px;
    font-weight: 700;
    line-height: 1.3;
}

h2 {
    font-size: 32px; /* Slightly larger */
    border-bottom: 3px solid #3a7ecf; /* Muted blue underline */
    padding-bottom: 12px;
    margin-bottom: 25px;
}

h3 {
    font-size: 24px;
    margin-bottom: 18px;
    color: #3a7ecf; /* Muted blue for subheadings */
}

h4 {
    font-size: 20px;
    margin-bottom: 12px;
    color: #555; /* Darker grey */
}

p {
    margin-bottom: 15px;
}

/* === Sidebars === */
.sidebar-left, .sidebar-right {
    width: 280px; /* Increased width */
    flex-shrink: 0;
    background: linear-gradient(180deg, #ffffff 0%, #f0f6fa 100%); /* Lighter gradient */
    padding: 25px; /* Adjusted padding */
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Standard shadow */
    display: flex;
    flex-direction: column;
    gap: 8px; /* Reduced gap */
    border: 1px solid #dce4ec; /* Lighter border */
}

.sidebar-left h3, .sidebar-right h3 {
     text-align: center;
     margin-bottom: 20px; /* Adjusted margin */
     padding-bottom: 15px;
     border-bottom: 1px solid #dce4ec; /* Lighter border */
     color: #1f3a60;
}

.sidebar-left h4 {
    margin-top: 25px; /* Adjusted margin */
    border-top: 1px solid #dce4ec; /* Lighter border */
    padding-top: 15px; /* Adjusted padding */
    text-align: left;
    color: #3a7ecf;
}

/* Sidebar Links (non-button) */
.sidebar-left a:not(.btn), .sidebar-right a:not(.btn) { /* Use :not(.btn) to exclude button styles */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 5px; /* Adjusted padding */
    color: #555;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    font-size: 16px; /* Slightly larger */
}

.sidebar-left a:not(.btn) i, .sidebar-right a:not(.btn) i {
     font-size: 18px; /* Slightly larger icons */
     color: #5a9bd4; /* Brighter blue icons */
     min-width: 25px; /* Fixed width for icons */
     text-align: center;
}

.sidebar-left a:not(.btn):hover, .sidebar-right a:not(.btn):hover {
    color: #3a7ecf;
    transform: translateX(5px);
}


.sidebar-input {
    margin-bottom: 15px;
    border: 1px solid #a2c1d9; /* Slightly darker blue border */
    border-radius: 8px;
    padding: 12px;
    font-size: 16px; /* Slightly larger */
    background-color: #f8fcff; /* Very light blue background */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    width: calc(100% - 24px); /* Adjust for padding */
    box-sizing: border-box;
}

.sidebar-input:focus {
    border-color: #3a7ecf;
    box-shadow: 0 0 8px rgba(58, 126, 207, 0.4); /* Stronger shadow */
    outline: none;
}

/* === Buttons (Global Style based on Sidebar Buttons) === */
.btn {
    display: inline-flex; /* Use inline-flex for button text and icon alignment */
    align-items: center;
    gap: 8px; /* Gap between text and icon */
    padding: 10px 18px; /* Standard padding */
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    box-sizing: border-box;
    border: 1px solid transparent; /* Base border */
    justify-content: center; /* Center content by default */
    vertical-align: middle; /* Align vertically */
}

.btn i {
    font-size: 18px; /* Standard icon size */
}


.btn-primary {
    background-color: #3a7ecf; /* Muted blue */
    color: #ffffff;
    border-color: #3a7ecf;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
    background-color: #2c6bb1; /* Darker blue on hover */
    border-color: #2c6bb1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.btn-secondary {
    background-color: #f0f0f0; /* Light grey */
    color: #555;
    border-color: #ccc;
}

.btn-secondary:hover {
    background-color: #e0e0e0; /* Darker grey on hover */
    border-color: #bbb;
    transform: translateY(-1px);
}

.btn-success { /* Стиль для кнопки "Одобрить" */
    background-color: #81c784; /* Green */
    color: #ffffff;
    border-color: #66bb6a;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn-success:hover {
    background-color: #66bb6a;
    border-color: #4caf50;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.btn-info {
    background-color: #5a9bd4; /* Brighter blue */
    color: #ffffff;
    border-color: #5a9bd4;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn-info:hover {
    background-color: #4a8ecf; /* Darker blue on hover */
    border-color: #4a8ecf;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.btn-danger {
    background-color: #e57373; /* Light red */
    color: #ffffff;
    border-color: #e57373;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn-danger:hover {
    background-color: #ef5350; /* Darker red on hover */
    border-color: #ef5350;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.btn-admin { /* Specific style for admin button */
     background-color: #ffb74d; /* Light orange */
     color: #ffffff;
     border-color: #ffb74d;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn-admin:hover {
     background-color: #ffa726; /* Darker orange on hover */
     border-color: #ffa726;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
     transform: translateY(-1px);
}


.btn-small {
    padding: 6px 12px; /* Smaller padding */
    font-size: 14px; /* Smaller font size */
    gap: 5px; /* Smaller gap */
}

.btn-small i {
     font-size: 16px; /* Adjusted icon size for small buttons */
}


/* Sidebar specific button adjustments */
.sidebar-btn {
    width: 100%;
    text-align: left;
    justify-content: flex-start; /* Align content to the start */
    padding: 10px 15px; /* Match other buttons but with indent */
    margin-bottom: 10px; /* Adjusted margin */
     box-shadow: none; /* Remove shadow for sidebar buttons */
}

.sidebar-btn:hover {
     box-shadow: 0 3px 8px rgba(58, 126, 207, 0.1); /* Add a subtle shadow on hover */
}


/* === Main Content Area === */
.main-content {
    flex: 1;
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    margin: 0; /* Remove margin */
    min-width: 0;
    border: 1px solid #dce4ec;
    overflow-x: hidden;
    max-width: 900px; /* Max width for main content */
    width: 100%; /* Ensure it takes full width up to max-width */
}

/* === Tabs === */
.tab-container {
    display: flex;
    border-bottom: 2px solid #dce4ec;
    margin-bottom: 25px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-wrap: nowrap; /* Prevent wrapping */
}

.tab-container::-webkit-scrollbar {
  display: none;
}

.tab {
    padding: 12px 20px; /* Adjusted padding */
    cursor: pointer;
    color: #6a6a6a;
    border-bottom: 3px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    margin-bottom: -2px;
}

.tab::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 3px;
    background-color: transparent;
    transition: background-color 0.3s ease;
}


.tab:hover {
     color: #3a7ecf;
}

.tab.active {
    color: #1f3a60;
    font-weight: 700;
}

.tab.active::after {
     background-color: #1f3a60;
}

.tab-content {
    display: none;
    padding-top: 10px;
}

.tab-content.active {
    display: block;
}

/* Ensure content within tabs doesn't overflow */
.tab-content table {
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    display: block; /* Change to block to allow horizontal scroll */
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on touch devices */
    border-collapse: collapse; /* Collapse borders for cleaner table */
}

table th, table td {
    padding: 15px;
    border-bottom: 1px solid #eef5f9;
    text-align: left;
    font-size: 15px;
    color: #444;
    white-space: nowrap;
}

table th {
    background-color: #ebf5fb;
    color: #1f3a60;
    font-weight: 700;
    border-bottom: 2px solid #c1d9e8;
}

table tbody tr:nth-child(even) {
    background-color: #f9fbfc;
}

table tbody tr:hover {
    background-color: #eef5f9;
}

table td:last-child {
    /* text-align: center; */ /* Removed this to align actions left */
}

/* === Site Widgets (Index Page) === */
.site-block-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Responsive grid */
    gap: 25px; /* Gap between grid items */
    padding-top: 10px;
}

.site-widget {
    background-color: #ffffff;
    border: 1px solid #dce4ec;
    border-radius: 10px;
    overflow: hidden; /* Hide overflow for rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* Use flexbox for layout inside widget */
    flex-direction: column; /* Stack image and content vertically */
}

.site-widget:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.site-widget-image-container {
    width: 100%;
    height: 180px; /* Fixed height for image container */
    overflow: hidden; /* Hide parts of image outside container */
    border-bottom: 1px solid #dce4ec;
}

.site-widget-image-container img {
    display: block;
    width: 100%;
    height: 100%; /* Fill container height */
    object-fit: cover; /* Cover the container, cropping as needed */
    transition: transform 0.3s ease;
}

.site-widget:hover .site-widget-image-container img {
    transform: scale(1.05); /* Slightly zoom on hover */
}

.site-widget-content {
    padding: 15px; /* Padding around text content */
    flex-grow: 1; /* Allow content to grow */
    display: flex;
    flex-direction: column;
    gap: 8px; /* Gap between content items */
}

.site-widget-content h3 {
    margin-top: 0;
    margin-bottom: 5px; /* Reduced margin */
    font-size: 20px;
    line-height: 1.4;
}

.site-widget-content h3 a {
    color: #1f3a60;
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-widget-content h3 a:hover {
    color: #3a7ecf;
    text-decoration: underline;
}

.site-widget-content p {
    margin-bottom: 5px; /* Reduced margin */
    font-size: 14px; /* Smaller text */
    color: #555;
     display: flex;
     align-items: center;
     gap: 8px;
}

.site-widget-content p i {
    color: #5a9bd4; /* Icon color */
    font-size: 16px;
}


.site-widget-buttons {
    margin-top: auto; /* Push buttons to the bottom */
    padding-top: 10px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 10px; /* Gap between buttons */
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

.site-widget-buttons .btn-small {
    flex-grow: 1; /* Allow buttons to grow */
    text-align: center;
     justify-content: center; /* Center button text and icon */
}


/* === Site Card (Site Page) === */
.site-card {
    display: flex; /* Use flexbox */
    gap: 30px; /* Gap between image and info */
    margin-bottom: 30px;
    padding: 25px;
    background-color: #f9fbfc; /* Light background */
    border: 1px solid #dce4ec;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.site-card-image-container {
    width: 300px; /* Fixed width for the image */
    height: 200px; /* Fixed height */
    flex-shrink: 0; /* Prevent shrinking */
    overflow: hidden;
    border-radius: 8px; /* Rounded corners for image container */
    border: 1px solid #ccc; /* Subtle border */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.site-card-image-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container */
}

.site-info {
    flex-grow: 1; /* Allow info section to grow */
    min-width: 300px; /* Minimum width before wrapping */
}

.site-info h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 26px;
    color: #1f3a60;
}

.site-info p {
    margin-bottom: 8px; /* Reduced margin */
    font-size: 16px;
    color: #444;
}

.site-info p strong {
     color: #1f3a60; /* Darker color for labels */
}

.site-info a {
    color: #3a7ecf;
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-info a:hover {
    color: #1f3a60;
    text-decoration: underline;
}

.site-stats {
     margin-top: 20px;
     padding-top: 20px;
     border-top: 1px solid #dce4ec;
     width: 100%; /* Take full width */
}


/* === Reviews === */
.review {
    margin-bottom: 25px;
    padding: 20px;
    background-color: #f9fbfc;
    border-radius: 10px;
    border: 1px solid #e0eaf0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.review .replies {
    margin-top: 20px;
}

.review .replies .review { /* Style for nested replies */
    margin-left: 30px;
    margin-top: 20px;
    border-left: 4px solid #c1d9e8; /* Visual indicator for replies */
    padding-left: 20px;
    background-color: #e9f2f9; /* Slightly different background for replies */
    border-radius: 0 8px 8px 0; /* Rounded corners on right side */
}


.review p {
    margin-bottom: 10px;
}

.review-date {
    font-size: 14px;
    color: #777;
    margin-left: 10px;
}

/* Стили для отображения репутации в списке отзывов (-5 до +5) */
.review .reputation {
    font-weight: 700;
    margin-left: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    color: #ffffff;
    background-color: #5a9bd4; /* Цвет по умолчанию (например, для 0 или положительных) */
    display: inline-block; /* Чтобы padding работал корректно */
    font-size: 0.9em; /* Чуть меньше размер текста оценки */
    vertical-align: middle; /* Выравнивание по вертикали */
}

.review .reputation.negative {
    background-color: #e57373; /* Красный для отрицательных */
}


/* Стиль для контейнера миниатюр изображений под отзывом */
.review-images-container {
    margin-top: 10px;
    display: flex; /* Используем flexbox для выравнивания миниатюр */
    gap: 10px; /* Отступ между миниатюрами */
    flex-wrap: wrap; /* Перенос на новую строку, если много изображений */
}

/* Стиль для миниатюр изображений */
.review-thumbnail {
    width: 80px; /* Фиксированная ширина миниатюры */
    height: 80px; /* Фиксированная высота миниатюры */
    object-fit: cover; /* Обрезка изображения для сохранения пропорций */
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer; /* Показываем, что изображение кликабельно */
    transition: transform 0.2s ease-in-out; /* Плавное увеличение при наведении */
}

.review-thumbnail:hover {
    transform: scale(1.05); /* Небольшое увеличение при наведении */
}


/* Стили для кнопок действий под отзывами (Ответить, Редактировать, Удалить) */
/* Наследуют общие стили .btn и .btn-small */

/* Стиль для формы вокруг кнопки "Удалить" */
.delete-review-form {
    display: inline-block; /* Устанавливаем inline-block для выравнивания с другими кнопками */
    margin-right: 5px; /* Небольшой отступ справа от формы */
    vertical-align: middle;
}

/* Стиль для самой кнопки "Удалить" */
.delete-review-form .delete-button {
    /* Наследует стили от .btn и .btn-small */
     background-color: #f44336; /* Red color */
     border-color: #d32f2f; /* Darker red border */
     color: white; /* White text */
     font-size: 0.8em; /* Small size */
     padding: 4px 8px; /* Small padding */
     gap: 5px; /* Space between icon and text */
     display: inline-flex; /* Используем flexbox для центрирования иконки и текста */
     align-items: center;
     justify-content: center;
     text-decoration: none;
     cursor: pointer;
     border-radius: 4px;
     line-height: 1.2;
}

.delete-review-form .delete-button:hover {
     background-color: #d32f2f; /* Darker red on hover */
     border-color: #b71c1c;
     color: white;
     text-decoration: none;
}

.delete-review-form .delete-button i {
     font-size: 1em; /* Icon size matches text size */
}

/* Стиль для кнопки "Редактировать" */
.edit-review-button {
    /* Наследует стили от .btn и .btn-small */
    margin-left: 10px; /* Небольшой отступ слева */
    vertical-align: middle; /* Выравнивание по вертикали */
     font-size: 0.8em; /* Меньший размер шрифта */
     padding: 4px 8px; /* Меньший padding */
     gap: 5px; /* Меньший отступ между иконкой и текстом */
     /* Добавляем стили для лучшего внешнего вида */
     background-color: #607d8b; /* Blue-grey */
     border-color: #455a64;
     color: white;
     display: inline-flex; /* Используем flexbox для центрирования иконки и текста */
     align-items: center;
     justify-content: center;
     text-decoration: none; /* Убираем подчеркивание, если это ссылка */
     cursor: pointer;
     border-radius: 4px; /* Немного скругляем углы */
     line-height: 1.2; /* Улучшаем выравнивание текста/иконки */
}

.edit-review-button:hover {
     background-color: #455a64;
     border-color: #37474f;
     color: white;
     text-decoration: none;
}

.edit-review-button i {
     font-size: 1em; /* Размер иконки соответствует размеру текста кнопки */
}


/* Стиль для кнопки "Ответить" */
.reply-button {
     /* Наследует стили от .btn и .btn-small */
     margin-left: 10px; /* Отступ слева */
     vertical-align: middle;
     font-size: 0.8em;
     padding: 4px 8px;
     gap: 5px;
     /* Добавляем стили для лучшего внешнего вида */
     background-color: #5a9bd4; /* Current blue */
     border-color: #3a7ecf;
     color: white;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     cursor: pointer;
     border-radius: 4px;
     line-height: 1.2;
}

.reply-button:hover {
     background-color: #3a7ecf;
     border-color: #1f3a60;
     color: white;
     text-decoration: none;
}

.reply-button i {
     font-size: 1em;
}


/* Стиль для формы ответа */
.reply-form {
     margin-top: 15px;
     background-color: #eef5f9;
     padding: 15px;
     border-radius: 8px;
     border: 1px solid #dce4ec;
     display: none; /* Изначально скрыта */
}

.reply-form textarea {
     width: calc(100% - 20px); /* Adjust for padding */
     margin-bottom: 10px;
     border: 1px solid #a2c1d9;
     border-radius: 6px;
     padding: 10px;
     font-size: 15px;
     min-height: 60px;
     box-sizing: border-box;
     transition: border-color 0.3s ease, box-shadow 0.3s ease;
     resize: vertical; /* Allow vertical resize */
}

.reply-form textarea:focus {
     border-color: #3a7ecf;
     box-shadow: 0 0 6px rgba(58, 126, 207, 0.3);
     outline: none;
}

.reply-form .btn {
     margin-right: 10px;
}


/* Контейнер для формы добавления отзыва */
.review-form-container {
    background-color: #eef5f9; /* Светлый фон */
    border: 1px solid #dce4ec; /* Светлая рамка */
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px; /* Отступ снизу */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.review-form-container h3 {
     margin-top: 0;
     margin-bottom: 20px;
     padding-bottom: 10px;
     border-bottom: 1px solid #dce4ec;
     color: #1f3a60;
     font-size: 20px;
}

.review-form-container form p {
     margin-bottom: 15px; /* Отступ между параграфами формы */
     display: flex; /* Используем flexbox для выравнивания label и input */
     align-items: flex-start; /* Выравнивание элементов по верху */
     gap: 15px; /* Отступ между label и input/select */
     flex-wrap: wrap; /* Перенос элементов на новую строку на маленьких экранах */
}

.review-form-container form p label {
     flex-basis: 150px; /* Фиксированная ширина для label */
     flex-shrink: 0; /* Запретить сжиматься */
     font-weight: 600;
     color: #555;
     padding-top: 8px; /* Выравнивание текста label с началом input/textarea */
}

.review-form-container form p .input {
     flex-grow: 1; /* Позволить input/select/textarea занимать все доступное место */
     width: auto; /* Отключаем фиксированную ширину, заданную ранее */
     max-width: 100%; /* Ограничиваем максимальную ширину */
}

.review-form-container form p textarea.input {
     min-height: 100px; /* Минимальная высота для textarea */
     resize: vertical; /* Разрешить изменение размера только по вертикали */
}


.review-form-container form button.btn {
     margin-top: 10px; /* Отступ сверху для кнопки */
     width: auto; /* Убираем полную ширину для кнопки */
}

/* Контейнер для отображения выбранных файлов */
#selected-files-container {
    margin-top: 5px;
    font-size: 0.9em;
    color: #555;
}

#selected-files-container ul {
    list-style: none;
    padding: 0;
    margin: 5px 0 0 0;
}

#selected-files-container li {
    margin-bottom: 3px;
    word-break: break-word;
}


/* Контейнер для формы редактирования отзыва */
.review-edit-form {
    background-color: #f0f6fa; /* Slightly different light background */
    border: 1px solid #dce4ec;
    border-radius: 8px;
    padding: 15px; /* Smaller padding than add form */
    margin-top: 15px; /* Space from review content */
    margin-bottom: 15px; /* Space below form */
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.03);
    display: none; /* Изначально скрыта */
}

.review-edit-form h3 {
     margin-top: 0;
     margin-bottom: 15px;
     padding-bottom: 8px;
     border-bottom: 1px solid #dce4ec;
     color: #1f3a60;
     font-size: 18px;
}

.review-edit-form form p {
    margin-bottom: 12px; /* Отступ между параграфами формы */
    display: flex;
    align-items: flex-start; /* Выравнивание по верху */
    gap: 10px; /* Отступ между label и input/select */
    flex-wrap: wrap;
}

.review-edit-form form p label {
    flex-basis: 120px; /* Меньшая ширина для label в edit форме */
    flex-shrink: 0;
    font-weight: 600;
    color: #555;
     font-size: 15px;
     padding-top: 6px; /* Выравнивание текста label */
}

.review-edit-form form p .input {
     flex-grow: 1;
     width: auto;
     max-width: 100%;
     padding: 10px; /* Меньший padding */
     font-size: 15px;
}

.review-edit-form form p textarea.input {
     min-height: 80px; /* Меньшая минимальная высота */
}

.review-edit-form form button.btn {
     margin-top: 5px; /* Отступ сверху */
     margin-right: 10px; /* Отступ между кнопками */
}

/* Секция для отображения и удаления текущих изображений при редактировании */
.edit-images-section {
     margin-top: 15px;
     padding-top: 15px;
     border-top: 1px solid #eee;
}

.edit-images-section h4 {
     font-size: 1em;
     margin-bottom: 10px;
     border-bottom: none;
     padding-bottom: 0;
     color: #444; /* Цвет текста */
}

.edit-images-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.edit-image-item {
    background-color: #fff; /* Белый фон для каждого элемента */
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 5px;
    text-align: center;
    display: inline-block; /* Элементы в строку */
    vertical-align: top; /* Выравнивание по верхнему краю */
}

.edit-image-item img {
    display: block; /* Картинка блочный элемент */
    margin: 0 auto 5px auto; /* Центрирование и нижний отступ */
    width: 60px;
    height: 60px;
    object-fit: cover;
}

.edit-image-item label {
     display: block; /* Чекбокс и текст под картинкой */
     font-size: 0.9em;
     color: #555;
}

/* === Forms and Inputs === */
.input {
    display: block; /* Make inputs block level */
    width: calc(100% - 24px); /* Adjust for padding */
    padding: 12px;
    margin-bottom: 20px; /* Added margin */
    border: 1px solid #a2c1d9;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
    background-color: #f8fcff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.input:focus {
    border-color: #3a7ecf;
    box-shadow: 0 0 8px rgba(58, 126, 207, 0.4);
    outline: none;
}

textarea.input {
    min-height: 100px;
    resize: vertical;
}

/* === Alerts === */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.5;
}

.alert p {
    margin: 0;
    padding: 0;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* === Modal (for Counter Code) === */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.modal-content {
    background-color: #fefefe;
    margin: auto; /* Center the modal box */
    padding: 30px;
    border: 1px solid #888;
    width: 80%; /* Could be more specific, e.g., 500px */
    max-width: 600px; /* Max width */
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    position: relative; /* Needed for the close button positioning */
}

.close-modal {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

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

#counterCodeArea {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f0f0f0;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 14px;
    resize: none;
    box-sizing: border-box;
}

/* === Stats Blocks Styling === */
.stats-block-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid for blocks */
    gap: 20px; /* Gap between blocks */
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #dce4ec; /* Separator from general info */
}

.stats-block-period {
    background-color: #f9fbfc; /* Light background */
    border: 1px solid #e0eaf0; /* Subtle border */
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.stats-block-period h4 {
    margin-top: 0;
    margin-bottom: 15px; /* More space below heading */
    padding-bottom: 10px;
    border-bottom: 1px solid #ebf5fb; /* Light separator below heading */
    color: #1f3a60; /* Darker color for block titles */
}

.stats-block-period .stats-item {
    margin-bottom: 10px; /* Space between stats items */
    font-size: 16px;
    color: #444;
    display: flex;
    align-items: center;
    gap: 10px; /* Space between icon and text */
}

.stats-block-period .stats-item i {
     color: #5a9bd4; /* Icon color */
     font-size: 18px;
     min-width: 20px; /* Ensure consistent icon spacing */
     text-align: center;
}

.stats-block-period .stats-item:last-child {
    margin-bottom: 0; /* No margin for the last item */
}


/* === Responsive Design === */
@media (max-width: 1200px) {
    .container {
        flex-direction: column;
        align-items: center; /* Center columns when stacked */
        padding: 0 15px;
    }

    .sidebar-left, .sidebar-right {
        width: 95%; /* Take more width when stacked */
        margin-bottom: 20px; /* Space between stacked sidebars and main content */
        padding: 20px;
        box-sizing: border-box;
    }

    .main-content {
        width: 95%; /* Take more width when stacked */
        margin: 0;
        padding: 20px;
        box-sizing: border-box;
        max-width: 100%; /* Remove max-width constraint when stacked */
    }

    .site-card {
        flex-direction: column; /* Stack image and info in site card */
        gap: 20px;
        padding: 20px;
    }

    .site-card-image-container {
        width: 100%; /* Full width for image */
        height: 250px; /* Adjusted height */
    }

     .site-info {
         min-width: 0; /* Allow shrinking */
     }

     .tab {
        padding: 10px 15px; /* Smaller tab padding */
     }

     table th, table td {
        padding: 10px; /* Smaller table padding */
     }

     .site-block-grid {
         grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Adjust grid for smaller screens */
         gap: 20px;
     }

      .site-widget-image-container {
         height: 150px; /* Smaller thumbnail height */
      }

      .site-widget-content {
         padding: 10px;
         gap: 5px;
      }

      .site-widget-content h3 {
         font-size: 18px;
      }

      .site-widget-content p {
          font-size: 13px;
          gap: 5px;
      }

      .site-widget-buttons {
         padding-top: 8px;
         gap: 8px;
      }

      .stats-block-container {
          grid-template-columns: 1fr; /* Stack stats blocks on smaller screens */
      }

       .stats-block-period {
            padding: 15px;
       }

       .stats-block-period h4 {
            margin-bottom: 10px;
            padding-bottom: 8px;
       }

       .stats-block-period .stats-item {
            font-size: 15px;
            gap: 8px;
       }

       .stats-block-period .stats-item i {
            font-size: 16px;
       }
}

@media (max-width: 768px) {
    h2 {
        font-size: 28px;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }
    h3 {
        font-size: 20px;
    }

     .tab {
         padding: 10px;
         font-size: 14px;
     }

    .sidebar-left, .sidebar-right, .main-content {
         width: 98%;
         padding: 15px;
    }

     .site-card-image-container {
         height: 200px;
     }

     .site-widget-image-container {
         height: 120px;
     }

      .site-widget-content {
         padding: 10px;
         gap: 5px;
      }

      .site-widget-content h3 {
         font-size: 18px;
      }

      .site-widget-content p {
          font-size: 13px;
          gap: 5px;
      }

      .site-widget-buttons {
         padding-top: 8px;
         gap: 8px;
      }

      .stats-block-period {
           padding: 12px;
      }

      .stats-block-period h4 {
           font-size: 16px;
           margin-bottom: 8px;
           padding-bottom: 6px;
      }

      .stats-block-period .stats-item {
           font-size: 14px;
           gap: 8px;
      }

      .stats-block-period .stats-item i {
           font-size: 15px;
      }
}

@media (max-width: 480px) {
    h2 {
        font-size: 24px;
        margin-bottom: 15px;
    }
    h3 {
        font-size: 18px;
    }

     .tab {
         padding: 10px;
         font-size: 14px;
     }

    .site-block-grid {
        grid-template-columns: 1fr; /* Single column layout */
    }

     .site-card-image-container {
         height: 150px;
     }
}

/* === Lightbox Modal Styles === */

/* Стили для модального окна (затемненный фон) */
.lightbox-modal {
  position: fixed;
  z-index: 1000; /* Sit on top, поверх всего */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.9); /* Черный с прозрачностью */
  /* Используем flex для центрирования содержимого */
  align-items: center; /* Центрирование по вертикали */
  justify-content: center; /* Центрирование по горизонтали */
}

/* Явно скрываем модальное окно по умолчанию */
.lightbox-modal.hidden {
    display: none;
}

/* Стили для содержимого модального окна (само изображение) */
.lightbox-content {
  margin: auto; /* Центрирование (в сочетании с flex в родительском контейнере) */
  display: block; /* Элемент занимает всю доступную ширину контейнера */
  max-width: 95%; /* Максимальная ширина (немного меньше 100% для отступов) */
  max-height: 95%; /* Максимальная высота (немного меньше 100% для отступов) */
  object-fit: contain; /* Вписываем изображение полностью, сохраняя пропорции */
}

/* Стили для кнопки закрытия */
.close-lightbox {
  position: absolute;
  top: 20px; /* Отступ сверху */
  right: 30px; /* Отступ справа */
  color: #f1f1f1; /* Светлый цвет */
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
  z-index: 1001; /* Выше лайтбокса */
}

.close-lightbox:hover,
.close-lightbox:focus {
  color: #bbb; /* Цвет при наведении */
  text-decoration: none;
}

/* Опционально: стили для подписи, если используется */
#lightboxCaption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  /* height: 150px;  Уберите или измените, если не нужна фиксированная высота */
}

/* Медиа-запрос для адаптивности */
@media only screen and (max-width: 768px){
  /* Уменьшаем отступы и размеры на маленьких экранах */
  .close-lightbox {
    top: 10px;
    right: 15px;
    font-size: 30px;
  }

  .lightbox-content {
      max-width: 98%;
      max-height: 98%;
  }
}