/* === Основные стили uCoz (оставляем и дополняем) === */
#dynPhoto {
 padding: 0 10px;
}

#photoModalWrap,
#photoModalWrap td {
 font: 12px/1.5 'Arial';
 color: #5d5d5d;
}

#photoModalWrap a {
 color: #20a7fd;
}

#photoModalWrap a:hover {
 color: #027fcf;
}

#photoModalWrap hr {
 margin: 5px 0;
 border: 0;
 height: 2px;
 overflow: hidden;
 background: url(./../../img/photopage/hr.png) repeat-x;
}

#photoModalWrap .uphoto-entry {
 margin-bottom: 20px;
}

#photoModalWrap input[type=text],
#photoModalWrap input[type=password],
#photoModalWrap textarea {
 vertical-align: middle;
 height: 24px;
 margin: 3px 0;
 padding: 2px 5px;
 *padding: 0px;
 font-family: 'Tahoma', 'Arial';
 font-size: 13px;
 line-height: 18px;
 color: #000;
 background: #fff;
 border: 1px solid #dcdcdc;
 box-shadow: inset 0 1px 0 1px rgba(0, 0, 0, 0.03);
 outline: none;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

#photoModalWrap input[type=text]:focus,
#photoModalWrap input[type=password]:focus,
#photoModalWrap textarea:focus {
 border-color: #9c9c9c;
}

#photoModalWrap textarea {
 padding: 3px 5px;
 height: auto;
 overflow: auto;
 resize: none;
}

#photoModalWrap .securityCode {
 height: auto !important;
}

#photoModalWrap #message {
 width: 100%;
 height: 100px !important;
}

#photoModalWrap input[type=button],
#photoModalWrap input[type=submit],
#photoModalWrap input[type=reset],
#photoModalWrap .button,
#photoModalWrap select {
 position: relative;
 display: inline-block;
 vertical-align: middle;
 min-width: 20px;
 padding: 0 10px;
 text-align: center;
 text-decoration: none !important;
 font: 13px/31px 'Verdana', 'Arial';
 height: 31px;
 color: #777 !important;
 text-shadow: 0 1px 0 #fffcf6;
 border: 1px solid #aaa;
 border-radius: 3px;
 background-color: #fff;
 background-image: -webkit-linear-gradient(bottom, rgba(85,85,85,.1), rgba(255,255,255,.1));
 background-image: -moz-linear-gradient(bottom, rgba(85,85,85,.1), rgba(255,255,255,.1));
 background-image: -o-linear-gradient(bottom, rgba(85,85,85,.1), rgba(255,255,255,.1));
 background-image: -ms-linear-gradient(bottom, rgba(85,85,85,.1), rgba(255,255,255,.1));
 background-image: linear-gradient(to top, rgba(85,85,85,.1), rgba(255,255,255,.1));
 box-shadow: inset 0 0 1px #fff;
 *display: inline;
 overflow: visible;
 zoom: 1;
 cursor: pointer;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

#photoModalWrap select {
 height: auto !important;
}

#photoModalWrap ::-moz-focus-inner {
 border: 0;
 padding: 0;
}

#photoModalWrap input[type=button]:hover,
#photoModalWrap input[type=submit]:hover,
#photoModalWrap input[type=reset]:hover,
#photoModalWrap .button:hover {
 background-color: #fafafa;
}

#photoModalWrap input[type=button]:active,
#photoModalWrap input[type=submit]:active,
#photoModalWrap input[type=reset]:active,
#photoModalWrap .button:active {
 background-color: #fafafa;
 box-shadow: inset 0 1px 2px rgba(0,0,0,.17);
}

#photoModalWrap .codeButtons {
 min-width: 20px;
 margin: 2px 1px !important;
 padding: 1px 4px !important;
 width: auto !important;
 height: auto !important;
 line-height: 1.4 !important;
}

#photoModalWrap .cBlock1,
#photoModalWrap .cBlock2,
#photoModalWrap .cBlock1 td,
#photoModalWrap .cBlock2 td {
 font-size: 11px;
 font-family: 'Tahoma', 'Arial';
}

#photoModalWrap .cTop {
 border: 0;
}

#photoModalWrap .cBlock1,
#photoModalWrap .cBlock2,
#photoModalWrap .cMessage {
 margin: 0 !important;
 padding: 0 !important;
 border: 0 !important;
 background: none !important;
}

#photoModalWrap .cBlock1,
#photoModalWrap .cBlock2 {
 border-top: 1px solid #e9edf1 !important;
}

#photoModalWrap .cMessage a:first-child img {
 margin: 0 5px 2px;
}

#photoModalWrap #addform,
#photoModalWrap .commTable,
#photoModalWrap .smiles {
 margin: 0 !important;
 background: none !important;
 border: 0 !important;
}

/* === Стили для фотоальбома (улучшены) === */

/* Заголовок альбома — как в ВК */
#photo-category-name {
 text-align: center;
 margin: 20px 0 10px;
}

#photo-category-name h1 {
 margin: 0;
 font: bold 28px 'Tahoma', sans-serif;
 color: #333;
}

#photo-category-name .photo-count {
 color: #777;
 font: 16px 'Tahoma', sans-serif;
 margin: 8px 0;
}

/* Сетка фото — 3 в ряд на десктопе */
#photo-grid-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 20px;
 margin: 15px 0;
}

/* Условие: от 900px — ровно 3 колонки */
@media (min-width: 900px) {
 #photo-grid-container {
 grid-template-columns: repeat(3, 1fr);
 }
}

/* Карточка фото */
.photo-item {
 background: #fff;
 border-radius: 8px;
 overflow: hidden;
 box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
 transition: all 0.3s ease;
 max-width: 100%;
 position: relative;
 opacity: 0;
 transform: translateY(10px);
 animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

.photo-item:hover {
 transform: translateY(-5px);
 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Изображение */
.photo-image {
 width: 100%;
 height: auto;
 display: block;
 border-bottom: 1px solid #f0f0f0;
}

/* Название фото */
.photo-header {
 font-size: 15px;
 margin-bottom: 6px;
 padding: 10px 12px 0;
}

.photo-header a {
 color: #333;
 font-weight: 600;
 text-decoration: none;
}

.photo-header a:hover {
 color: #0066cc;
}

/* Дата */
.photo-date {
 color: #999;
 font-size: 12px;
 margin: 0 12px 6px;
}

/* Описание */
.photo-descr {
 color: #555;
 font-size: 13px;
 line-height: 1.4;
 margin: 0 12px 6px;
}

/* Автор */
.photo-author {
 color: #888;
 font-size: 12px;
 margin: 0 12px 6px;
}

.photo-author a {
 color: #0066cc;
 text-decoration: none;
}

.photo-author a:hover {
 text-decoration: underline;
}

/* Статистика */
.photo-stats {
 margin: 0 12px 6px;
 display: flex;
 gap: 12px;
 font-size: 13px;
 color: #777;
}

.photo-stats span,
.photo-stats a {
 display: flex;
 align-items: center;
 gap: 4px;
 text-decoration: none;
 color: #777;
}

.photo-stats a:hover {
 color: #0066cc;
}

/* Рейтинг */
.photo-rating {
 margin: 0 12px 6px;
 color: #999;
 font-size: 12px;
}

.photo-rating img {
 vertical-align: middle;
 margin-right: 2px;
}

/* Модераторская панель */
.moder-panel {
 position: absolute;
 top: 8px;
 left: 8px;
 background: rgba(255, 255, 255, 0.95);
 padding: 2px 5px;
 border-radius: 3px;
 font-size: 11px;
 z-index: 5;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Пагинация */
.page-selector,
#photo-page-selector {
 text-align: center;
 margin: 20px 0;
}

.page-selector a,
#photo-page-selector a {
 margin: 0 5px;
 padding: 5px 10px;
 text-decoration: none;
 color: #555;
 border: 1px solid #ddd;
 border-radius: 3px;
}

.page-selector a:hover,
#photo-page-selector a:hover {
 background: #f0f0f0;
 color: #333;
}

.page-selector .current,
#photo-page-selector .current {
 background: #869746;
 color: white;
 padding: 5px 10px;
 border-radius: 3px;
 margin: 0 5px;
}

/* Убираем лишние отступы */
.uphoto-entry {
 margin-bottom: 0 !important;
}

/* Адаптивность */
@media (max-width: 768px) {
 #photo-grid-container {
 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 gap: 16px;
 }
 .photo-header,
 .photo-date,
 .photo-descr,
 .photo-author,
 .photo-stats {
 font-size: 14px;
 }
}

@media (max-width: 480px) {
 #photo-grid-container {
 grid-template-columns: 1fr;
 gap: 14px;
 }
 #photo-category-name h1 {
 font-size: 24px;
 }
}