/* === Переменные === */
:root {
  --sidebar-w: 88px; /* ширина узкой колонки */
  --menu-w: clamp(240px, 25vw, 360px); /* ширина панели при открытии */
  --item-delay: 0.12s;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Geometria", sans-serif;
  overflow-x: hidden;
  background: #f7f7f7;
}

/* === Левый вертикальный блок === */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: #fff;
  border-right: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1100;
}

/* Бургер-кнопка */
#burger {
  margin-top: 24px;
  width: 28px;
  height: 22px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#burger span {
  height: 2px;
  background: #000;
  border-radius: 1px;
  transition: 0.4s;
}

/* Анимация в крест */
body.menu-open #burger span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
body.menu-open #burger span:nth-child(2) {
  opacity: 0;
}
body.menu-open #burger span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* Имя фотографа вертикально */
.name {
  margin: auto 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 4px;
  font-size: 15px;
  text-transform: uppercase; 
	text-decoration: none;
	color:#000000;
}

/* === Затемняющий слой === */
#overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000;
}
body.menu-open #overlay {
  opacity: 1;
  pointer-events: auto;
}

/* === Панель меню === */
.menu {
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  width: var(--menu-w);
  height: 100vh;
  background: #fff;
  border-right: 1px solid #ddd;
  transform: translateX(-100%);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1050;
  display: flex;
  align-items: center;
}
body.menu-open .menu {
  transform: none;
}

/* Список */
.menu ul {
  list-style: none;
  padding-left: 10%;
  width: 100%;
}


.menu li {
  opacity: 0;
  transform: translateY(12px);
}
body.menu-open .menu li {
  animation: slide 0.45s forwards;
}
body.menu-open .menu li:nth-child(1) {
  animation-delay: calc(var(--item-delay) * 1);
}
body.menu-open .menu li:nth-child(2) {
  animation-delay: calc(var(--item-delay) * 2);
}
body.menu-open .menu li:nth-child(3) {
  animation-delay: calc(var(--item-delay) * 3);
}
body.menu-open .menu li:nth-child(4) {
  animation-delay: calc(var(--item-delay) * 4);
}
body.menu-open .menu li:nth-child(5) {
  animation-delay: calc(var(--item-delay) * 5);
}
body.menu-open .menu li:nth-child(6) {
  animation-delay: calc(var(--item-delay) * 6);
}
body.menu-open .menu li:nth-child(7) {
  animation-delay: calc(var(--item-delay) * 7);
}
body.menu-open .menu li:nth-child(8) {
  animation-delay: calc(var(--item-delay) * 8);
}
body.menu-open .menu li:nth-child(9) {
  animation-delay: calc(var(--item-delay) * 9);
}
body.menu-open .menu li:nth-child(10) {
  animation-delay: calc(var(--item-delay) * 10);
}
body.menu-open .menu li:nth-child(11) {
  animation-delay: calc(var(--item-delay) * 11);
}
body.menu-open .menu li:nth-child(12) {
  animation-delay: calc(var(--item-delay) * 12);
}

body.menu-open .menu li:nth-child(13) {
  animation-delay: calc(var(--item-delay) * 13);
}
@keyframes slide {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.menu a {
  display: inline-block;
  font-size: clamp(12px, 4vw, 14px);
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 14px 0;
  transition: color 0.2s;
}
.menu a:hover {
  color: #666;
}

/* активный пункт меню */
.menu a.active {
  position: relative;
  color: #d49f00; /* основной акцент-цвет */
  font-weight: 600;
}

/* вертикальная черта слева от активного */
.menu a.active::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 0;
  width: 4px;
  height: 100%;
  background: #d49f00;
  border-radius: 2px;
}

/* ---------- HERO ------------------------------------------------------ */
.hero {
  position: relative;
  height: 100vh; /* во весь экран */
  margin-left: var(--sidebar-w); /* отступ под левый бар */
  overflow: hidden;
}

/* контейнер слайдов */
.slides {
  list-style: none;
  height: 100%;
  width: 100%;
}

/* отдельный кадр */
.slides li {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: fade 16s infinite;
}

/* задержки появления (3 слайда = 0, 4, 8 с) */
.slides li:nth-child(1) {
  animation-delay: 0s;
}
.slides li:nth-child(2) {
  animation-delay: 4s;
}
.slides li:nth-child(3) {
  animation-delay: 8s;
}
.slides li:nth-child(4) {
  animation-delay: 12s;
}
/* если добавите 4-й кадр – animation-delay:12s, и т.д. */

@keyframes fade {
  0%,
  8% {
    opacity: 0;
  }
  12%,
  28% {
    opacity: 1;
  }
  32%,
  100% {
    opacity: 0;
  }
}

/* центральная подпись */
.hero-caption {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(18px, 2.4vw, 32px);
  letter-spacing: 4px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-weight: 300;
  text-shadow: 0 0 6px rgba(0, 0, 0, 1);
}

.hero-caption span {
  font-family: inherit;
  display: block;
  font-size: 0.75em;
  letter-spacing: normal;
  margin: 0.2em 0;
}

/* базовые переменные --------------------------------------------------*/
:root {
  --sidebar-w: 88px;
  --gap: clamp(28px, 4vw, 72px);
  --row: minmax(60px, 7vw);
  --accent: #000;
}
/* секция --------------------------------------------------------------*/
/* ==================== ABOUT SECTION =============================== */
.about {
  padding: 16vw 0 12vw; /* увеличили верхний отступ */
  background: #fff;
  position: relative;
}

/* сетка блока */
.about-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr 2.6fr; /* уменьшили центральную колонку */
  grid-template-areas: "head photo text";
  gap: clamp(2rem, 4vw, 6rem);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 5vw;
  align-items: center;
}

/* левая колонка - заголовок */
.about-head {
  grid-area: head;
}

.about-label {
  display: block;
  font: 10px/1 "Geometria", sans-serif;
  letter-spacing: 3px;
  color: #999;
  margin-bottom: 2rem;
  text-transform: uppercase;
}

.about-title {
  font: clamp(24px, 3.5vw, 25px) / 0.9 "Geometria", sans-serif;
  letter-spacing: 2px;
  margin: 0;
  color: #000;
  font-weight: 300;
}

/* центральная фотография (уменьшили и упростили) */
.about-photo {
  grid-area: photo;
  position: relative;
  max-width: 450px; /* ограничили максимальную ширину */
  margin: 0 auto; /* центрирование */
}

.about-photo .photo {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 0; /* убрали закругление */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* уменьшили тень */
}

.about-photo .photo img {
  width: 400px;
  height: 440px; /* фиксированная высота для лучшего контроля */
  object-fit: cover;
  object-position: center; /* центрируем изображение */
  filter: grayscale(100%);
  transition: filter 0.4s ease; /* убрали scale из hover */
}

.about-photo .photo:hover img {
  filter: grayscale(0%);
  /* убрали transform: scale - теперь только меняется цветность */
}

/* правая колонка - текст */
.about-text {
  grid-area: text;
  padding-left: clamp(1rem, 2vw, 2rem);
}

.about-text p {
  font: clamp(14px, 1.2vw, 17px) / 1.7 "Geometria", sans-serif;
  color: #444;
  margin-bottom: 1.5rem;
  font-weight: 300;
}

.about-text p:last-of-type {
  margin-bottom: 2.5rem;
}

/* кнопка */
.about-btn {
  text-decoration: none;
  padding: 16px 32px;
  background: #000;
  color: #fff;
  border: none;
  font: 11px/1 "Geometria", sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.about-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ffd700 0%, #ffb300 100%);
  transform: scale(0.85);
  opacity: 0;
  transition: all 0.4s ease;
  z-index: -1;
}

.about-btn:hover {
  color: #222;
  background: #fff;
}

.about-btn:hover::before {
  transform: scale(1);
  opacity: 1;
}

/* ========== АДАПТИВНОСТЬ =========================================== */
@media (max-width: 1024px) {
  .about {
    padding: 14vw 0 10vw; /* увеличили верхний отступ для планшетов */
  }

  .about-grid {
    grid-template-columns: 1fr 1.2fr 1.8fr;
    gap: clamp(1.5rem, 3vw, 4rem);
  }

  .about-photo {
    max-width: 280px;
  }

  .about-photo .photo img {
    height: 300px;
  }
}

@media (max-width: 768px) {
	.menu ul{	top: 10%;
  position: inherit;
	}
  .about {
    padding: 18vw 0 10vw; /* еще больше отступ для мобильных */
  }

  .about-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "photo"
      "text";
    gap: 3rem;
    text-align: center;
  }

  .about-photo {
    max-width: 260px;
  }

  .about-text {
    padding-left: 0;
  }

  .about-photo .photo img {
    height: 280px;
  }
}

@media (max-width: 480px) {
  .about {
    padding: 20vw 4vw 12vw;
  }

  .about-grid {
    gap: 2rem;
  }

  .about-photo {
    max-width: 240px;
  }

  .about-photo .photo img {
    height: 260px;
  }
}

/* ==================== ABOUT SECTION =============================== */
.about {
  padding: 16vw 0 12vw;
  padding-left: calc(var(--sidebar-w) + 5vw); /* добавлен отступ слева */
  padding-right: 5vw; /* явно указываем правый отступ */
  background: #fff;
  position: relative;
}

/* сетка блока */
.about-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr 1.6fr;
  grid-template-areas: "head photo text";
  gap: clamp(2rem, 4vw, 6rem);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0; /* убираем внутренние отступы, так как они теперь у родителя */
  align-items: center;
}

/* остальные стили остаются прежними... */

/* ========== АДАПТИВНОСТЬ =========================================== */
@media (max-width: 899px) {
  .about {
    margin-left: 0; /* на мобильных убираем отступ */
    padding-left: 5vw; /* возвращаем стандартный отступ */
    padding-top: calc(
      var(--topbar-h) + 18vw
    ); /* учитываем топбар на мобильных */
  }
}

@media (max-width: 1024px) {
  .about-grid {
    grid-template-columns: 1fr 1.2fr 1.8fr;
    gap: clamp(1.5rem, 3vw, 4rem);
  }

  .about-photo {
    max-width: 280px;
  }

  .about-photo .photo img {
    height: 300px;
  }
}

@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "photo"
      "text";
    gap: 3rem;
    text-align: center;
  }

  .about-photo {
    max-width: 260px;
  }

  .about-text {
    padding-left: 0;
  }

  .about-photo .photo img {
    height: 280px;
  }
}

@media (max-width: 480px) {
  .about {
    padding: calc(var(--topbar-h) + 20vw) 4vw 12vw;
  }

  .about-grid {
    gap: 2rem;
  }

  .about-photo {
    max-width: 240px;
  }

  .about-photo .photo img {
    height: 260px;
  }
}

.photo {
  transition: transform 0.01s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}


/* ---- общие переменные (можно перенести в root) --------------------- */
:root {
  --sidebar-w: 88px;
  --gap: clamp(32px, 5vw, 96px);
  --accent: #000;
}

/* секция -------------------------------------------------------------- */
.sale {
  margin-left: var(--sidebar-w);
  padding: 10vw 6vw;
  background: #f7f7f7;
}

.sale__head {
  text-align: center;
  font: clamp(24px, 4.6vw, 42px) / 1 "Geometria", sans-serif;
  letter-spacing: 6px;
  margin-bottom: 6vw;
}

/* главная сетка ------------------------------------------------------- */
.sale__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  max-width: 1400px;
  margin-inline: auto;
  align-items: start;
}

/* текст --------------------------------------------------------------- */
.sale__text {
  font: clamp(14px, 1.15vw, 18px) / 1.9 "Geometria", sans-serif;
  color: #555;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sale__btn {
  position: relative;
  align-self: flex-start;
  padding: 18px 48px;
  background: var(--accent);
  color: #fff;
  border: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
}
.sale__btn span {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sale__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ffd700 0%, #ffb300 100%);
  transform: scale(0.8);
  opacity: 0;
  border-radius: 4px;
  transition: 0.4s;
  z-index: -1;
}
.sale__btn:hover span {
  transform: translateX(8px);
}
.sale__btn:hover::before {
  transform: scale(1);
  opacity: 1;
}
.sale__btn:hover {
  color: #222;
  background: #fff;
}

/* слайдер ------------------------------------------------------------- */
.sale__slider {
  position: relative;
  width: 100%;
  max-width: 520px;
}

.frame {
  position: relative;
  padding: 60px 40px; /* «паспарту» */
  background: #fff;
  box-shadow: 0 0 0 3px #333;
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* стрелки ------------------------------------------------------------- */
.sale-nav {
  position: absolute;
  top: 50%;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  transform: translateY(-50%);
  cursor: pointer;
}
.sale-nav::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
}
.prev {
  left: -46px;
}
.next {
  right: -46px;
}
.prev::before {
  transform: rotate(135deg);
}
.next::before {
  transform: rotate(-45deg);
}

/* плавное появление при свайпе */
.swiper-slide {
  transition: transform 0.4s;
}

/* адаптив ------------------------------------------------------------- */
@media (max-width: 960px) {
  .sale__grid {
    grid-template-columns: 1fr;
  }
  .sale__slider {
    margin-inline: auto;
  }
  .sale-nav {
    display: none;
  }
}

/* ---- СЛАЙДЕР -------------------------------------------------------- */
.sale__slider {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: auto; /* высота теперь задаётся aspect-ratio */
}

/* все слайды одного размера */
.sale__slider .swiper-slide {
  aspect-ratio: 3/4; /* единое соотношение сторон */
  overflow: hidden;
  border-radius: 6px;
  display: flex; /* чтобы img растягивалось */
}

/* сами фото */
.sale__slider img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* кадрируется без искажений */
  display: block;
}

/* ---- стрелки -------------------------------------------------------- */
.sale-nav {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
  background: #000;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s;
}
.sale-nav svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
}
/* .sale-nav:hover {
  background: #222;
} */

.prev {
  left: -60px;
} /* сдвигайте, если нужно ближе/дальше от слайдера */
.next {
  right: -60px;
}

@media (max-width: 960px) {
  .sale-nav {
    display: none;
  } /* на мобильных стрелки скрываем */
}

/* сам слайдер */
.sale__slider {
  position: relative;
  width: 100%;
  max-width: 520px;
  overflow: visible; /* ←   стрелки теперь не обрезаются   */
}

/* стрелки */
.sale-nav {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
  background: #ffffff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s;
  z-index: 5; /* поверх фото                         */
}
.sale-nav svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
}

/* смещаем внутрь контейнера, а не наружу */
.prev {
  left: 12px;
}
.next {
  right: 12px;
}

/* .sale-nav:hover {
  background: #222;
} */

@media (max-width: 960px) {
  .sale-nav {
    display: none;
  } /* на мобильных по-прежнему скрываем  */
}

/* ----------------- CONTACTS ----------------------------------------- */
:root {
  --sidebar-w: 88px;
  --gap: clamp(32px, 5vw, 96px);
  --accent: #000;
}

.contacts {
  margin-left: var(--sidebar-w);
  padding: 10vw 6vw;
  background: #fff;
}

.contacts__head {
  text-align: center;
  font: clamp(24px, 4.6vw, 42px) / 1 "Geometria", sans-serif;
  letter-spacing: 6px;
  margin-bottom: 7vw;
}

.contacts__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  max-width: 1400px;
  margin-inline: auto;
}

/* левая колонка -------------------------------------------------------*/
.contacts__info {
  font: clamp(14px, 1.15vw, 18px) / 1.9 "Geometria", sans-serif;
  color: #555;
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}

.contacts__label {
  display: block;
  font-size: 12px;
  letter-spacing: 3px;
  color: #7d7d7d;
  margin-bottom: 16px;
}

.contacts__mail {
  font-size: clamp(24px, 3.8vw, 40px);
  color: #000;
  text-decoration: none;
  word-break: break-all;
}

.contacts__social {
  display: flex;
  gap: 32px;
}

.social-link svg {
  width: 36px;
  height: 36px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-link:hover svg {
  transform: scale(1.15);
}

/* правая колонка (форма) ---------------------------------------------*/
.contacts__form {
  display: flex;
  flex-direction: column;
  gap: 2.6rem;
  font-family: "Geometria", sans-serif;
}

.field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field label {
  font-size: clamp(12px, 1vw, 14px);
  color: #555;
}
.field input,
.field textarea {
  border: none;
  border-bottom: 2px solid #bbb;
  padding: 10px 4px;
  font-size: clamp(14px, 1.1vw, 18px);
  resize: none;
  background: transparent;
  font-family: inherit;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: #000;
}

.field--area {
  margin-top: 8px;
}

/* кнопка (тот же фирменный hover) ------------------------------------*/
.contacts__btn {
  position: relative;
  align-self: flex-start;
  padding: 18px 48px;
  background: var(--accent);
  color: #fff;
  border: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
}
.contacts__btn span {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.contacts__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ffd700 0%, #ffb300 100%);
  transform: scale(0.82);
  opacity: 0;
  border-radius: 4px;
  transition: 0.4s;
  z-index: -1;
}
.contacts__btn:hover span {
  transform: translateX(8px);
}
.contacts__btn:hover::before {
  transform: scale(1);
  opacity: 1;
}
.contacts__btn:hover {
  color: #222;
  background: #fff;
}

.contacts__note {
  font-size: clamp(12px, 1vw, 14px);
  color: #777;
  line-height: 1.6;
  max-width: 46ch;
}

/* адаптив -------------------------------------------------------------*/
@media (max-width: 920px) {
  .contacts__grid {
    grid-template-columns: 1fr;
  }
  .contacts__form {
    max-width: 560px;
  }
}

/* ----------- FOOTER ------------------------------------------------- */
.site-footer {
  margin-left: var(--sidebar-w); /* отступ под боковой бар */
  padding: 6vw 6vw 5vw;
  background: #fff;
  text-align: center;
  font: 14px/1.8 "Geometria", sans-serif;
  color: #6d6d6d;
  position: relative;
  overflow: hidden;
}

/* лёгкая тень-градиент сверху, как на макете */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 48px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), transparent);
  pointer-events: none;
}

/* строки текста */
.footer-line {
  margin: 0;
}

/* ---------- кнопка «наверх» ---------------------------------------- */
.to-top {
  position: absolute;
  right: 6vw;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  cursor: pointer;
}

/* иконка-стрелка */
.to-top::before {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  border-right: 2px solid #000;
  border-top: 2px solid #000;
  transform: rotate(-45deg); /* стрелка вверх */
  margin: auto;
  transition: transform 0.25s;
}

.to-top:hover::before {
  transform: rotate(-45deg) translateY(-2px);
}

/* ------------------------------------------------------------------ */
/*  ≤ 640 px:   самый простой стек элементов, как на скрин-шоте       */
/* ------------------------------------------------------------------ */
@media (max-width: 640px) {
  /* убираем левый фикс-бар и лишние «ступеньки» */
  .about {
    margin-left: 0; /* весь экран телефона */
    padding: 12vw 5vw;
  }

  /* блоки идут строго друг за другом */
  .about__grid {
    display: block;
  }

  /* заголовок */
  .about-head {
    margin-bottom: 9vw;
  }

  /* две фотографии вертикальной колонкой */
  .about-photos {
    display: block; /* ломаем grid          */
    margin: 0 0 9vw; /* отступ сверху/снизу  */
  }

  .about-photos .photo {
    width: 100%;
    height: auto; /* высота зависит от снимка */
    aspect-ratio: auto; /* снимаем фикс. соотношение */
    margin: 0 0 9vw; /* расстояние между кадрами  */
  }

  .about-photos .photo img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }

  /* текст + кнопка */
  .about__text {
    max-width: none;
    font-size: 16px;
    margin-bottom: 10vw;
  }

  .about__btn {
    width: 100%; /* удобно нажимать пальцем */
  }
}

/* переменная высоты верхней полосы */
:root {
  --topbar-h: 56px;
}

/* ------------------- ≤ 899 px  : sidebar → top-bar ------------------ */
@media (max-width: 899px) {
  /* 1. Полоса вместо левой колонки */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--topbar-h);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    border-right: none;
    border-bottom: 1px solid #ddd;
    z-index: 1200;
  }

  /* 2. Бургер */
  #burger {
    margin: 0; /* убираем прежний отступ */
  }

  /* 3. Имя теперь читается горизонтально */
  .name {
    writing-mode: horizontal-tb;
    transform: none;
    letter-spacing: 2px;
    font-size: 14px;
    margin: 0 auto;
  }

  /* 4. Сдвигаем само выезжающее меню и overlay ниже топ-бара */
  body.menu-open .menu,
  .menu {
    top: var(--topbar-h);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--topbar-h));
  }
  #overlay {
    top: var(--topbar-h);
  }

  /* 5. У контента убираем левый «коридор» и добавляем запас сверху */
  .about,
  .hero,
  .sale,
  .contacts,
  .site-footer {
    margin-left: 0;
    padding-top: calc(var(--topbar-h) + 6vw);
  }
}

/* ================= mobile ≤ 899 px  —  top-bar вместо бокового меню */
@media (max-width: 899px) {
  /* сама полоса */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    /* учитываем вырезы слева/справа */
    padding: 0 calc(16px + env(safe-area-inset-right)) 0
      calc(16px + env(safe-area-inset-left));
    background: #fff;
    border-bottom: 1px solid #ddd;
    z-index: 1200;
  }

  /* бургер — всегда поверх overlay */
  #burger {
    width: 32px;
    height: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1300;
  }

  /* полоски бургера */
  #burger span {
    width: 100%;
    height: 3px; /* чуть толще — хорошо видно */
    background: #000;
    border-radius: 2px;
    transition: 0.4s;
  }

  /* фамилия в центре */
  .name {
    margin: 0 auto;
    writing-mode: horizontal-tb;
    letter-spacing: 2px;
    font-size: 14px;
  }

  /* сдвигаем выезжающее меню и overlay под полоску */
  .menu,
  body.menu-open .menu {
    top: 56px;
    height: calc(100vh - 56px);
  }
  #overlay {
    top: 56px;
  }
}

/* бургер «крестиком» при открытом меню (прежние правила) */
body.menu-open #burger span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
body.menu-open #burger span:nth-child(2) {
  opacity: 0;
}
body.menu-open #burger span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* общий заголовок */
.page-head {
  text-align: center;
  font: clamp(28px, 6vw, 64px) / 1 "Geometria", sans-serif;
  letter-spacing: 6px;
  margin: 8vh 0 6vh;
}

/* Masonry-раскладка без JS: CSS columns */
.masonry {
  column-width: 240px; /* «целевая» ширина колонки */
  column-gap: 16px;
  padding: 0 12px;
}

/* карточка */
.card {
  position: relative;
  margin: 0 0 16px;
  overflow: hidden;
  border-radius: 4px;
  break-inside: avoid; /* не рвать в колонках */
}

.card img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* overlay + подпись */
.card::before,
.card figcaption {
  position: absolute;
  inset: 0;
  transition: 0.4s;
}

.card::before {
  content: "";
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
}

figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font: 14px "Geometria", sans-serif;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
}

/* hover-эффект */
.card:hover img {
  transform: scale(1.05);
}
.card:hover::before {
  opacity: 1;
}
.card:hover figcaption {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 600px) {
  .masonry {
    column-width: 160px;
  }
}

/* ---------- Секция портфолио --------------------------------------- */
.portfolio {
  margin-left: var(--sidebar-w); /* тот же «коридор» */
  padding: 10vw clamp(12px, 4vw, 48px); /* как у остальных блоков */
  background: #fff;
}

/* для мобильного top-bar */
@media (max-width: 899px) {
  .portfolio {
    margin-left: 0;
    padding-top: calc(var(--topbar-h) + 8vw);
  }
}

/* Заголовок секции – переиспользуем section-head */
.section-head {
  text-align: center;
  margin-bottom: 8vw;
}
.section-head h1 {
  font: clamp(28px, 6vw, 64px) / 1 "Geometria", sans-serif;
  letter-spacing: 6px;
  text-transform: uppercase;
}

/* ---------- Masonry ------------------------------------------------- */
.masonry {
  column-width: 260px; /* «целевой» размер колонки */
  column-gap: 16px;
  padding: 0 4px; /* тот же внутренний отступ, что у галерей */
}

/* карточка */
.card {
  position: relative;
  margin: 0 0 16px;
  overflow: hidden;
  border-radius: 4px;
  break-inside: avoid;
  cursor: pointer;
}
.card img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* затемнение + подпись */
.card::before,
.card figcaption {
  position: absolute;
  inset: 0;
  transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.card::before {
  content: "";
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
}
figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 14px "Geometria", sans-serif;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
}

/* hover */
.card:hover img {
  transform: scale(1.05);
}
.card:hover::before {
  opacity: 1;
}
.card:hover figcaption {
  opacity: 1;
  transform: scale(1);
}

/* ---------- Адаптив masonry ---------------------------------------- */
@media (max-width: 600px) {
  .masonry {
    column-width: 160px;
  }
}

/* -------------------- PORTFOLIO ----------------------------------- */
.portfolio {
  margin-left: var(--sidebar-w);
  padding: 8vw 5vw;
  min-height: 100vh;
}

/* заголовок по центру */
.portfolio-head {
  text-align: center;
  font: clamp(28px, 5.2vw, 68px) / 1 "Geometria", sans-serif;
  letter-spacing: 6px;
  margin-bottom: 6vw;
}

/* «водопад» — CSS Columns */
.gallery {
  column-count: 3;
  column-gap: 18px;
}

@media (max-width: 1024px) {
  .gallery {
    column-count: 2;
  }
}
@media (max-width: 600px) {
  .gallery {
    column-count: 1;
  }
}

/* каждая карточка */
.gallery-item {
  position: relative;
  display: block;
  margin: 0 0 18px;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

/* ----- hover: затемнение + лёгкий zoom ---------------------------- */
.gallery-item::after {
  /* полупрозрачная вуаль */
  content: attr(data-title);
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font: 14px/1 "Geometria", sans-serif;
  letter-spacing: 1px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px;
  opacity: 0;
  transform: scale(1.05); /* начинаем чуть больше, чтобы совпало с zoom */
  transition: opacity 0.35s ease;
}

.gallery-item:hover img {
  transform: scale(1.08);
} /* zoom-in эфф. */ /*[8]*/
.gallery-item:hover::after {
  opacity: 1;
}

/* индикатор загрузки (простой спиннер) */
.loader {
  width: 38px;
  height: 38px;
  margin: 40px auto;
  border: 4px solid #ccc;
  border-top-color: #000;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: none;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* показываем спиннер, когда JS добавит класс */
.loader.active {
  display: block;
}

/* на узких экранах убираем левый коридор под sidebar-бар */
@media (max-width: 899px) {
  .portfolio {
    margin-left: 0;
    padding-top: calc(var(--topbar-h) + 6vw);
  }
}

/* ------------------------------------------------------------------ */
/*  Подпись при hover: по центру и чуть крупнее                       */
/* ------------------------------------------------------------------ */
.gallery-item::after {
  /* прежние свойства оставляем, меняем только положение и размер */
  display: flex; /* даёт возможность центрировать flex-ом */
  align-items: center; /* по вертикали */
  justify-content: center; /* по горизонтали */
  text-align: center;

  font-size: clamp(18px, 2.4vw, 26px); /* стало заметно крупнее */
  line-height: 1.2;
  letter-spacing: 1.5px;
  padding: 0 12px; /* небольшой внутренний отступ */

  /* остальные свойства (background, opacity, transform, transition)
     берутся из ранее заданных правил и трогать их не нужно */
}

/* ==================== PORTFOLIO PREVIEW ========================== */
.portfolio-preview {
  padding: 8vw 5vw;
  background: #fff;
  margin-left: var(--sidebar-w);
}

.portfolio-preview__container {
  max-width: 1400px;
  margin: 0 auto;
}

.portfolio-preview__title {
  text-align: center;
  font: clamp(32px, 5.2vw, 72px) / 1 "Geometria", sans-serif;
  letter-spacing: 6px;
  margin-bottom: 4rem;
  color: #000;
}

.portfolio-preview__wrapper {
  position: relative;
  margin-bottom: 4rem;
}

/* MASONRY СТИЛЬ - CSS COLUMNS */
.portfolio-preview__grid {
  display: block !important; /* Принудительно отключаем grid */
  columns: 4 !important;
  column-gap: 16px !important;
  max-width: 1200px;
  margin: 0 auto;
  /* Убираем все grid свойства */
  grid-template-columns: unset !important;
  grid-auto-rows: unset !important;
  gap: unset !important;
}

.portfolio-preview__item {
  display: inline-block !important;
  width: 100% !important;
  margin-bottom: 16px;
  break-inside: avoid;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  /* Убираем grid свойства */
  grid-row-end: unset !important;
}

.portfolio-preview__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.portfolio-preview__item img {
  width: 100%;
  height: auto !important; /* ВАЖНО: автоматическая высота для masonry */
  display: block;
  transition: transform 0.3s ease;
}

.portfolio-preview__item:hover img {
  transform: scale(1.03);
}

.portfolio-preview__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  color: white;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.portfolio-preview__item:hover .portfolio-preview__overlay {
  opacity: 1;
}

.portfolio-preview__overlay h3 {
  margin: 0 0 0.25rem 0;
  font-size: 0.9em;
  font-weight: 500;
  line-height: 1.2;
}

.portfolio-preview__overlay p {
  margin: 0;
  font-size: 0.75em;
  opacity: 0.9;
  line-height: 1.2;
}

.portfolio-preview__button {
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 16px 32px;
  background: #000;
  color: #fff;
  text-decoration: none;
  font: 12px/1 "Geometria", sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.portfolio-preview__button:hover {
  background: #333;
  transform: translateY(-2px);
  color: #fff;
  text-decoration: none;
}

.portfolio-preview__empty {
  column-span: all;
  text-align: center;
  padding: 4rem 2rem;
  color: #666;
  font-size: 1.2em;
}

/* адаптивность masonry */
@media (max-width: 1200px) {
  .portfolio-preview__grid {
    columns: 3 !important;
    column-gap: 14px !important;
  }
}

@media (max-width: 899px) {
  .portfolio-preview {
    margin-left: 0;
    padding-top: calc(var(--topbar-h) + 6vw);
  }

  .portfolio-preview__grid {
    columns: 2 !important;
    column-gap: 12px !important;
  }
}

@media (max-width: 600px) {
  .portfolio-preview__grid {
    columns: 2 !important;
    column-gap: 8px !important;
  }

  .portfolio-preview__item {
    margin-bottom: 8px;
  }
}

@media (max-width: 400px) {
  .portfolio-preview__grid {
    columns: 1 !important;
  }
}



/* ==================== PORTFOLIO PAGE ============================== */
.portfolio {
  margin-left: var(--sidebar-w);
  padding: 8vw 5vw 6vw;
  min-height: 100vh;
  background: #fff;
}

.portfolio-head {
  text-align: center;
  font: clamp(32px, 5.2vw, 72px) / 1 "Geometria", sans-serif;
  letter-spacing: 6px;
  margin-bottom: 6vw;
  color: #000;
}

/* ==================== GALLERY MASONRY ============================= */
.gallery {
  columns: 3;
  column-gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

.gallery-item {
  display: inline-block;
  width: 100%;
  margin-bottom: 20px;
  break-inside: avoid;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

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

.gallery-item__image {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.gallery-item__image img {
  width: 100%;
  height: auto; /* ВАЖНО: автоматическая высота */
  display: block;
  transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-item__image img {
  transform: scale(1.05);
}

/* overlay с информацией */
.gallery-item__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.9));
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-item__overlay {
  opacity: 1;
}

.gallery-item__zoom {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  font-size: 2rem;
  color: white;
}

.gallery-item__zoom svg {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.gallery-item__info {
  margin-top: auto;
}

.gallery-item__title {
  margin: 0 0 0.5rem 0;
  font-size: 1.1em;
  font-weight: 500;
}

.gallery-item__category,
.gallery-item__year {
  margin: 0.25rem 0;
  font-size: 0.9em;
  opacity: 0.9;
}

.gallery-item__link {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.4rem 0.8rem;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.8em;
  transition: background 0.3s ease;
}

.gallery-item__link:hover {
  background: rgba(255, 255, 255, 0.3);
  color: white;
  text-decoration: none;
}

/* адаптивность */
@media (max-width: 1200px) {
  .gallery {
    columns: 2;
    column-gap: 16px;
  }
}

@media (max-width: 899px) {
  .portfolio {
    margin-left: 0;
    padding-top: calc(var(--topbar-h) + 8vw);
  }

  .gallery {
    columns: 2;
    column-gap: 12px;
    padding: 0 1rem;
  }
}

@media (max-width: 600px) {
  .gallery {
    columns: 1;
    column-gap: 0;
  }

  .gallery-item {
    margin-bottom: 16px;
  }
}


/* ==================== PORTFOLIO FILTERS ========================== */
.portfolio-filters {
  max-width: 1400px;
  margin: 0 auto 4rem;
  padding: 0 5vw;
}

.portfolio-filters__container {
  text-align: center;
}

.portfolio-filters__section {
  margin-bottom: 2rem;
}

.portfolio-filters__section:last-child {
  margin-bottom: 0;
}

.portfolio-filters__title {
  font: 14px/1 "Geometria", sans-serif;
  letter-spacing: 2px;
  color: #666;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.portfolio-filters__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.filter-btn {
  padding: 10px 20px;
  border: 1px solid #ddd;
  background: #fff;
  color: #666;
  font: 12px/1 "Geometria", sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn:hover {
  border-color: #000;
  color: #000;
}

.filter-btn.active {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* ==================== GALLERY GRID ================================ */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* карточки портфолио */
.gallery-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #fff;
  cursor: pointer;
}

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

.gallery-item__image {
  position: relative;
  width: 100%;
  /* УБИРАЕМ фиксированную высоту */
  overflow: hidden;
}

.gallery-item__image img {
  width: 100%;
  height: auto; /* ИЗМЕНЕНО: теперь высота автоматическая */
  display: block;
  transition: transform 0.3s ease;
  object-fit: cover; /* сохраняем пропорции */
}

.gallery-item:hover .gallery-item__image img {
  transform: scale(1.05);
}

/* overlay с информацией */
.gallery-item__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.9));
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-item__overlay {
  opacity: 1;
}

.gallery-item__zoom {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  font-size: 2rem;
  color: white;
}

.gallery-item__zoom svg {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.gallery-item__info {
  margin-top: auto;
}

.gallery-item__title {
  margin: 0 0 0.5rem 0;
  font-size: 1.1em;
  font-weight: 500;
}

.gallery-item__category,
.gallery-item__year {
  margin: 0.25rem 0;
  font-size: 0.9em;
  opacity: 0.9;
}

.gallery-item__link {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.4rem 0.8rem;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.8em;
  transition: background 0.3s ease;
}

.gallery-item__link:hover {
  background: rgba(255, 255, 255, 0.3);
  color: white;
  text-decoration: none;
}

/* ==================== CUSTOM LIGHTBOX ============================= */
.custom-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.custom-lightbox.active {
  display: flex;
  opacity: 1;
}

.lightbox-overlay {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.lightbox-content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 60px;
}

.lightbox-image {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.lightbox-info {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 1rem 2rem;
  border-radius: 8px;
  text-align: center;
  backdrop-filter: blur(10px);
}

.lightbox-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.2em;
  font-weight: 500;
}

.lightbox-details {
  margin: 0;
  font-size: 0.9em;
  opacity: 0.9;
}

.lightbox-close {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10001;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.lightbox-prev,
.lightbox-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10001;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-50%) scale(1.1);
}

.lightbox-prev {
  left: 32px;
}

.lightbox-next {
  right: 32px;
}

/* мобильная адаптивность */
@media (max-width: 768px) {
  .lightbox-content {
    padding: 40px 20px;
  }

  .lightbox-image {
    max-width: 95vw;
    max-height: 85vh;
  }

  .lightbox-close {
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .lightbox-prev,
  .lightbox-next {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }

  .lightbox-prev {
    left: 20px;
  }

  .lightbox-next {
    right: 20px;
  }

  .lightbox-info {
    bottom: 10px;
    padding: 0.8rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .lightbox-content {
    padding: 20px 10px;
  }

  .lightbox-image {
    max-width: 98vw;
    max-height: 80vh;
  }

  .lightbox-prev {
    left: 10px;
  }

  .lightbox-next {
    right: 10px;
  }
}


/* сообщение о пустом портфолио */
.no-photos {
  grid-column: 1 / -1;
  text-align: center;
  color: #666;
  font-size: 1.2em;
  padding: 4rem 2rem;
  background: #f8f8f8;
  border-radius: 12px;
  margin: 2rem 0;
}

.no-photos h3 {
  font: 24px/1.2 "Geometria", sans-serif;
  letter-spacing: 2px;
  margin-bottom: 1rem;
  color: #333;
}

.no-photos p {
  font: 16px/1.5 "Geometria", sans-serif;
  color: #666;
  margin: 0;
}

/* лоадер */
.loader {
  width: 38px;
  height: 38px;
  margin: 40px auto;
  border: 4px solid #ccc;
  border-top-color: #000;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loader.active {
  display: block;
}

/* адаптивность */
@media (max-width: 1200px) {
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 899px) {
  .portfolio {
    margin-left: 0;
    padding-top: calc(var(--topbar-h) + 8vw);
  }

  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    padding: 0 1rem;
  }

  .portfolio-filters {
    margin-bottom: 3rem;
  }

  .portfolio-filters__section {
    margin-bottom: 1.5rem;
  }

  .filter-btn {
    padding: 8px 16px;
    font-size: 11px;
  }
}

@media (max-width: 600px) {
  .gallery {
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
  }

  .gallery-item__image {
    height: 200px;
  }

  .portfolio-filters__buttons {
    gap: 8px;
  }

  .filter-btn {
    padding: 6px 12px;
    font-size: 10px;
  }

  .no-photos {
    padding: 3rem 1rem;
  }
}

@media (max-width: 400px) {
  .gallery {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}


/* ============= ПРИНУДИТЕЛЬНАЯ МОБИЛЬНАЯ АДАПТИВНОСТЬ ============== */

/* планшеты */
@media (max-width: 1200px) {
  .gallery,
  .portfolio-preview__grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  }
}

/* телефоны средние */
@media (max-width: 899px) {
  .portfolio {
    margin-left: 0 !important;
    padding-top: calc(var(--topbar-h) + 8vw) !important;
  }

  .gallery,
  .portfolio-preview__grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 8px !important;
  }
}

/* телефоны стандартные - СТРОГО 2 КОЛОНКИ */
@media (max-width: 600px) {
  .gallery,
  .portfolio-preview__grid {
    grid-template-columns: 1fr 1fr !important; /* принудительно 2 колонки */
    grid-auto-rows: 12px !important;
    gap: 6px !important;
  }

  /* уменьшаем коэффициент для компактности */
  .gallery .portfolio-item,
  .portfolio-preview__grid .portfolio-item {
    grid-row-end: span var(--row-span) !important;
  }

  /* компактные шрифты */
  .gallery .portfolio-item__title,
  .portfolio-preview__grid .portfolio-item__title {
    font-size: 14px !important;
    line-height: 1.1 !important;
  }

  .gallery .portfolio-item__category,
  .portfolio-preview__grid .portfolio-item__category {
    font-size: 11px !important;
  }
}

/* очень узкие экраны - тоже 2 колонки */
@media (max-width: 400px) {
  .gallery,
  .portfolio-preview__grid {
    grid-template-columns: 1fr 1fr !important; /* всё равно 2 колонки */
    gap: 4px !important;
  }
}

/* экстра-узкие экраны < 320px - только тогда 1 колонка */
@media (max-width: 320px) {
  .gallery,
  .portfolio-preview__grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* Убираем конфликтующие стили из старого CSS */
.gallery.masonry,
.gallery[style*="column"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    column-count: unset !important;
    column-gap: unset !important;
}

/* Принудительно применяем grid стили */
.portfolio .gallery {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 2rem !important;
}

/* Стили для изображений */
.gallery-item img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Отладочные стили (можно удалить после проверки) */
.gallery-item {
    border: 1px solid #eee; /* временная граница для отладки */
    min-height: 200px; /* минимальная высота */
}


/* ==================== ADMIN PAGE ================================= */
.admin {
  margin-left: var(--sidebar-w);
  padding: 8vw 6vw;
  min-height: 100vh;
  background: #f8f8f8;
}

.admin__container {
  max-width: 1200px;
  margin: 0 auto;
}

.admin__title {
  font: clamp(28px, 4.6vw, 48px) / 1 "Geometria", sans-serif;
  letter-spacing: 4px;
  text-align: center;
  margin-bottom: 6vw;
  color: #000;
}

.admin__section-title {
  font: clamp(20px, 2.8vw, 32px) / 1 "Geometria", sans-serif;
  letter-spacing: 2px;
  margin-bottom: 2rem;
  color: #333;
}

/* ========== БЛОК ЗАГРУЗКИ ======================================== */
.admin__upload {
  background: #fff;
  padding: 3rem;
  border-radius: 12px;
  margin-bottom: 4rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.upload-zone {
  border: 2px dashed #ccc;
  border-radius: 12px;
  padding: 3rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 2rem;
}

.upload-zone:hover,
.upload-zone.dragover {
  border-color: var(--accent);
  background: rgba(0, 0, 0, 0.02);
}

.upload-content {
  pointer-events: none;
}

.upload-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  color: #666;
}

.upload-content p {
  font-size: 18px;
  margin-bottom: 0.5rem;
  color: #333;
}

.upload-content span {
  font-size: 14px;
  color: #666;
}

/* превью файлов */
.file-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.preview-item {
  position: relative;
  background: #f5f5f5;
  border-radius: 8px;
  overflow: hidden;
}

.preview-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.preview-info {
  padding: 1rem;
}

.preview-info input {
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
}

.preview-info select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
}

.remove-preview {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: rgba(255, 0, 0, 0.8);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
}

/* ========== БЛОК УПРАВЛЕНИЯ ====================================== */
.admin__manage {
  background: #fff;
  padding: 3rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.admin__filters {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  margin-bottom: 2rem;
}

.admin__search,
.admin__select {
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
}

.admin__search {
  min-width: 300px;
}

/* список фотографий */
.photos-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.photo-item {
  background: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #eee;
  transition: all 0.3s ease;
}

.photo-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.photo-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.photo-info {
  padding: 12px;
}

.photo-title {
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 4px;
  color: #333;
  line-height: 1.2;
}

.photo-category {
  font-size: 11px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.photo-actions {
  display: flex;
  gap: 8px;
  margin-top: 1rem;
}

/* кнопки */
.btn-delete,
.btn-edit {
  flex: 1;
  padding: 10px 8px;
  border: 1px solid #000;
  border-radius: 4px;
  font-family: "Geometria", sans-serif;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
}

.admin__btn {
  padding: 14px 32px;
  background: #000;
  color: #fff;
  border: 1px solid #000;
  border-radius: 4px;
  font-family: "Geometria", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.about-btn:hover {
  background: #fff;
  color: #000;
}
.admin__btn:disabled {
  background: #ccc;
  border-color: #ccc;
  cursor: not-allowed;
}

.admin__btn:not(:disabled):hover {
  background: #333;
}

.btn-delete {
  background: #000;
  color: #fff;
}

.btn-delete:hover {
  background: #fff;
  color: #000;
}

.btn-edit {
  background: #fff;
  color: #000;
}

.btn-edit:hover {
  background: #000;
  color: #fff;
}

/* статусы и уведомления */
.loading-status {
  text-align: center;
  padding: 2rem;
  color: #666;
  display: none;
}

.notifications {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
}

.notification {
  background: #fff;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border-left: 4px solid;
  animation: slideIn 0.3s ease;
}

.notification.success {
  border-left-color: #28a745;
}
.notification.error {
  border-left-color: #dc3545;
}
.notification.info {
  border-left-color: #17a2b8;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* мобильная адаптивность */
@media (max-width: 899px) {
  .admin {
    margin-left: 0;
    padding-top: calc(var(--topbar-h) + 8vw);
  }

  .admin__upload,
  .admin__manage {
    padding: 2rem 1.5rem;
  }

  .admin__filters {
    grid-template-columns: 1fr;
  }

  .admin__search {
    min-width: auto;
  }

  .photos-list {
    grid-template-columns: 1fr;
  }
}

/* ==================== ABOUT HERO BLOCK ============================ */
.about-hero {
  margin-bottom: 8vw;
}

.about-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: start;
}

/* ========== ЛЕВАЯ КОЛОНКА ========================================== */
.about-hero__text {
  padding-right: 2vw;
}

.about-hero__header {
  margin-bottom: clamp(32px, 4vw, 64px);
}

.about-hero__label {
  display: block;
  font: 12px/1 "Geometria", sans-serif;
  letter-spacing: 4px;
  color: #999;
  margin-bottom: 24px;
}

.about-hero__divider {
  width: 1px;
  height: 48px;
  background: #000;
  margin-bottom: 32px;
}

.about-hero__name {
  font: clamp(24px, 4.2vw, 56px) / 1.1 "Geometria", sans-serif;
  letter-spacing: 3px;
  margin: 0 0 16px 0;
  color: #000;
  font-weight: 300;
}

.about-hero__role {
  display: block;
  font: 14px/1 "Geometria", sans-serif;
  letter-spacing: 3px;
  color: #666;
}

.about-hero__description p {
  font: clamp(15px, 1.3vw, 18px) / 1.8 "Geometria", sans-serif;
  color: #444;
  margin: 0;
  max-width: 42ch;
}

/* ========== ПРАВАЯ КОЛОНКА ========================================= */
.about-hero__photo {
  position: relative;
}

.about-hero__photo img {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: cover;
  border-radius: 8px;
  filter: grayscale(100%);
  transition: filter 0.4s ease;
}

.about-hero__photo:hover img {
  filter: grayscale(0%);
}

/* ========== АДАПТИВНОСТЬ =========================================== */
@media (max-width: 1024px) {
  .about-hero__grid {
    gap: clamp(32px, 6vw, 80px);
  }

  .about-hero__description p {
    max-width: none;
  }
}

@media (max-width: 768px) {
  .about-hero__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .about-hero__text {
    padding-right: 0;
    order: 2;
  }

  .about-hero__photo {
    order: 1;
  }

  .about-hero__photo img {
    max-height: 60vh;
  }

  .about-hero__header {
    margin-bottom: 32px;
  }
}

@media (max-width: 600px) {
  .about-hero__name {
    font-size: clamp(20px, 6vw, 32px);
    letter-spacing: 2px;
  }

  .about-hero__divider {
    height: 32px;
    margin-bottom: 24px;
  }

  .about-hero__description p {
    font-size: 15px;
    line-height: 1.7;
  }
}

.about-stats--full {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: #111; /* мягкий чёрный, не #000 */
  color: #fff;
  padding: 8vw 0 8vw 0;
  box-sizing: border-box;
}

.about-stats__container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 5vw;
}

.about-stats__title {
  text-align: left;
  font-family: "Geometria", sans-serif;
  font-size: 18px;
  letter-spacing: 0.25em;
  color: #eaeaea;
  margin-bottom: 3vw;
  font-weight: 400;
}

.about-stats__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-stats__list li {
  font-family: "Geometria", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: #eaeaea;
  margin-bottom: 2.2vw;
  font-weight: 300;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.about-stats__list b {
  font-weight: 500;
  color: #fff;
}

/* адаптивность */
@media (max-width: 700px) {
  .about-stats__container {
    padding: 0 6vw;
  }
  .about-stats__title {
    font-size: 15px;
    margin-bottom: 5vw;
  }
  .about-stats__list li {
    font-size: 15px;
    margin-bottom: 4vw;
    line-height: 1.6;
  }
}

@media (max-width: 420px) {
  .about-stats__container {
    padding: 0 2vw;
  }
  .about-stats__list li {
    font-size: 14px;
    margin-bottom: 5vw;
  }
}

/* ==================== REVIEWS STYLES ========================== */
.about-reviews {
  padding: 6vw 5vw;
  background: #f8f8f8;
}

.about-reviews__container {
  max-width: 1200px;
  margin: 0 auto;
}

.about-reviews__title {
  text-align: center;
  font: clamp(24px, 4vw, 36px) / 1.2 "Geometria", sans-serif;
  letter-spacing: 2px;
  margin-bottom: 4rem;
  color: #000;
}

.about-reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
}

.review-item {
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.review-item:hover {
  transform: translateY(-5px);
}

.review-item__author {
  font: 14px/1 "Geometria", sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 1rem;
  font-weight: 500;
}

.review-item__text {
  font: 16px/1.6 "Geometria", sans-serif;
  color: #333;
}

.review-item__text p {
  margin-bottom: 1rem;
}

.review-item__text p:last-child {
  margin-bottom: 0;
}

.emoji {
  font-size: 1.2em;
  display: inline-block;
  margin: 0 2px;
}

.reviews-loader {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem;
  color: #666;
  font: 16px/1 "Geometria", sans-serif;
}

.no-reviews,
.reviews-error {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem;
  color: #666;
  font: 16px/1 "Geometria", sans-serif;
}

.reviews-error {
  color: #dc3545;
}

/* Адаптивность */
@media (max-width: 899px) {
  .about-reviews__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .review-item {
    padding: 1.5rem;
  }
}

@media (max-width: 600px) {
  .about-reviews {
    padding: 4vw 3vw;
  }
  
  .review-item {
    padding: 1.2rem;
  }
  
  .review-item__text {
    font-size: 15px;
  }
}


/* ==================== ABOUT PHILOSOPHY BLOCK ===================== */
.about-philosophy {
  background: #fff;
  padding: 8vw 0;
  margin-top: 0;
}

.about-philosophy__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 6vw;
}

.about-philosophy__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: center;
}

/* ========== ЛЕВАЯ КОЛОНКА - ФОТОГРАФИЯ ============================ */
.about-philosophy__image {
  position: relative;
}

.about-philosophy__image img {
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: cover;
  border-radius: 8px;
  filter: grayscale(100%);
  transition: filter 0.4s ease;
}

.about-philosophy__image:hover img {
  filter: grayscale(0%);
}

/* ========== ПРАВАЯ КОЛОНКА - ТЕКСТ ================================ */
.about-philosophy__content {
  padding-left: clamp(0px, 2vw, 32px);
}

.about-philosophy__quote {
  font: clamp(18px, 2.2vw, 28px) / 1.4 "Geometria", sans-serif;
  color: #222;
  margin: 0 0 clamp(24px, 3vw, 48px) 0;
  font-weight: 300;
  font-style: normal;
  quotes: none;
}

.about-philosophy__text {
  font: clamp(14px, 1.2vw, 17px) / 1.6 "Geometria", sans-serif;
  color: #666;
  margin: 0;
  font-weight: 300;
  max-width: 38ch;
}

/* ========== АДАПТИВНОСТЬ =========================================== */
@media (max-width: 1024px) {
  .about-philosophy__grid {
    gap: clamp(32px, 6vw, 80px);
  }

  .about-philosophy__quote {
    font-size: clamp(16px, 3vw, 24px);
    line-height: 1.35;
  }

  .about-philosophy__text {
    max-width: none;
  }
}

@media (max-width: 768px) {
  .about-philosophy {
    padding: 10vw 0;
  }

  .about-philosophy__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-philosophy__image {
    order: 1;
  }

  .about-philosophy__content {
    order: 2;
    padding-left: 0;
    text-align: center;
  }

  .about-philosophy__image img {
    max-height: 50vh;
  }
}

@media (max-width: 600px) {
  .about-philosophy {
    padding: 12vw 4vw;
  }

  .about-philosophy__quote {
    font-size: clamp(16px, 4vw, 20px);
    line-height: 1.4;
    margin-bottom: 32px;
  }

  .about-philosophy__text {
    font-size: 15px;
    line-height: 1.6;
  }
}

/* ==================== BOOKING PAGE ================================= */
.booking-page {
  margin-left: var(--sidebar-w);
  padding: 8vw 6vw;
  min-height: 100vh;
  background: #fff;
}

.booking-page__container {
  max-width: 1400px;
  margin: 0 auto;
}

.booking-page__title {
  text-align: center;
  font: clamp(32px, 5.2vw, 72px) / 1 "Geometria", sans-serif;
  letter-spacing: 6px;
  margin-bottom: 8vw;
  color: #000;
}

.booking-page__content {
  /* контейнер для будущих блоков контента */
  /* стили будут добавлены при создании блоков */
}

/* мобильная адаптивность */
@media (max-width: 899px) {
  .booking-page {
    margin-left: 0;
    padding-top: calc(var(--topbar-h) + 8vw);
    padding-left: 5vw;
    padding-right: 5vw;
  }
}

@media (max-width: 600px) {
  .booking-page {
    padding-top: calc(var(--topbar-h) + 12vw);
    padding-left: 4vw;
    padding-right: 4vw;
  }

  .booking-page__title {
    margin-bottom: 12vw;
  }
}

/* ==================== BOOKING CALENDAR ========================== */
.booking-calendar {
  max-width: 800px;
  margin: 0 auto;
}

.booking-calendar__intro {
  text-align: center;
  margin-bottom: 4rem;
}

.booking-calendar__intro h2 {
  font: clamp(20px, 3vw, 28px) / 1.2 "Geometria", sans-serif;
  letter-spacing: 2px;
  margin-bottom: 1rem;
  color: #000;
}

.booking-calendar__intro p {
  font: 14px/1.5 "Geometria", sans-serif;
  color: #666;
}

/* ========== КАЛЕНДАРЬ ============================================= */
.calendar-widget {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 3rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.calendar-nav {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.3s ease;
}

.calendar-nav:hover {
  background: #000;
  color: #fff;
  border-color: #000;
}

.calendar-title {
  font: 18px/1 "Geometria", sans-serif;
  letter-spacing: 2px;
  margin: 0;
  color: #000;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  margin-bottom: 1rem;
}

.calendar-weekdays div {
  padding: 12px 8px;
  text-align: center;
  font: 12px/1 "Geometria", sans-serif;
  letter-spacing: 1px;
  color: #666;
  background: #f8f8f8;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 14px/1 "Geometria", sans-serif;
  background: #fff;
  border: 1px solid transparent;
  cursor: default;
  transition: all 0.3s ease;
}

.calendar-day.other-month {
  color: #ccc;
}

.calendar-day.available {
  background: #e8f5e8;
  color: #2d5016;
  cursor: pointer;
  border-color: #a8d8a8;
}

.calendar-day.available:hover {
  background: #2d5016;
  color: #fff;
}

.calendar-day.selected {
  background: #000;
  color: #fff;
}

/* ========== ФОРМА ЗАЯВКИ ========================================== */
.booking-form {
  background: #f8f8f8;
  padding: 2.5rem;
  border-radius: 12px;
  border: 1px solid #e5e5e5;
}

.booking-form h3 {
  font: 18px/1.2 "Geometria", sans-serif;
  letter-spacing: 1px;
  margin-bottom: 2rem;
  color: #000;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-field {
  margin-bottom: 1rem;
}

.form-field label {
  display: block;
  font: 12px/1 "Geometria", sans-serif;
  letter-spacing: 1px;
  color: #333;
  margin-bottom: 8px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-family: "Geometria", sans-serif;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: #000;
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
}

.btn-primary,
.btn-secondary {
  padding: 12px 24px;
  border: 1px solid #000;
  border-radius: 6px;
  font-family: "Geometria", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: #000;
  color: #fff;
}

.btn-primary:hover {
  background: #fff;
  color: #000;
}

.btn-secondary {
  background: #fff;
  color: #000;
}

.btn-secondary:hover {
  background: #000;
  color: #fff;
}

/* ========== АДАПТИВНОСТЬ ========================================== */
@media (max-width: 600px) {
  .calendar-widget {
    padding: 1.5rem;
  }

  .calendar-nav {
    width: 35px;
    height: 35px;
    font-size: 16px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .booking-form {
    padding: 2rem 1.5rem;
  }

  .form-actions {
    flex-direction: column;
  }
}

/* ==================== CALENDAR ADMIN ============================= */
.calendar-admin {
  margin-left: var(--sidebar-w);
  padding: 8vw 6vw;
  min-height: 100vh;
  background: #f8f8f8;
}

.calendar-admin__container {
  max-width: 1200px;
  margin: 0 auto;
}

.calendar-admin__title {
  font: clamp(28px, 4.6vw, 48px) / 1 "Geometria", sans-serif;
  letter-spacing: 4px;
  text-align: center;
  margin-bottom: 6vw;
  color: #000;
}

.calendar-admin__section-title {
  font: clamp(20px, 2.8vw, 32px) / 1 "Geometria", sans-serif;
  letter-spacing: 2px;
  margin-bottom: 2rem;
  color: #333;
}

/* ========== БЛОК ДОБАВЛЕНИЯ ДАТ =================================== */
.calendar-admin__add {
  background: #fff;
  padding: 3rem;
  border-radius: 12px;
  margin-bottom: 4rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.date-picker-section {
  max-width: 600px;
  margin: 0 auto;
}

.date-picker-label {
  display: block;
  font: 14px/1 "Geometria", sans-serif;
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
  color: #333;
}

/* календарь для выбора дат */
.date-picker-widget {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.date-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.date-nav {
  width: 35px;
  height: 35px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

.date-nav:hover {
  background: #000;
  color: #fff;
  border-color: #000;
}

.date-title {
  font: 16px/1 "Geometria", sans-serif;
  letter-spacing: 2px;
  margin: 0;
  color: #000;
}

.date-picker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  margin-bottom: 1rem;
}

.date-picker-weekdays div {
  padding: 8px 4px;
  text-align: center;
  font: 11px/1 "Geometria", sans-serif;
  letter-spacing: 1px;
  color: #666;
  background: #eee;
}

.date-picker-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.date-picker-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 13px/1 "Geometria", sans-serif;
  background: #fff;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
}

.date-picker-day.other-month {
  color: #ccc;
  cursor: default;
}

.date-picker-day.past {
  color: #999;
  cursor: default;
}

.date-picker-day.available:hover {
  background: #e0e0e0;
}

.date-picker-day.selected {
  background: #000;
  color: #fff;
}

.date-picker-day.already-available {
  background: #e8f5e8;
  color: #2d5016;
}

/* список выбранных дат */
.selected-dates {
  margin-bottom: 2rem;
}

.selected-dates h4 {
  font: 14px/1 "Geometria", sans-serif;
  letter-spacing: 1px;
  margin-bottom: 1rem;
  color: #333;
}

.selected-dates-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 40px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
}

.selected-date-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #f0f0f0;
  border-radius: 16px;
  font: 12px/1 "Geometria", sans-serif;
  color: #333;
}

.remove-date {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  line-height: 1;
}

.remove-date:hover {
  color: #000;
}

.date-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

/* ========== БЛОК УПРАВЛЕНИЯ ======================================= */
.calendar-admin__manage {
  background: #fff;
  padding: 3rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.calendar-admin__filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

.calendar-admin__select {
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
}

/* список доступных дат */
.available-dates-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.date-item {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 1.5rem;
  border: 1px solid #eee;
  transition: all 0.3s ease;
}

.date-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.date-item.past {
  opacity: 0.6;
}

.date-info {
  margin-bottom: 1rem;
}

.date-display {
  font: 16px/1.2 "Geometria", sans-serif;
  font-weight: 500;
  color: #333;
  margin-bottom: 0.5rem;
}

.date-status {
  font: 12px/1 "Geometria", sans-serif;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.date-status.future {
  color: #2d5016;
}

.date-status.past {
  color: #999;
}

.date-actions {
  display: flex;
  gap: 0.5rem;
}

/* кнопки */
.calendar-admin__btn,
.calendar-admin__btn-secondary,
.btn-delete-date {
  padding: 12px 24px;
  border: 1px solid #000;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.calendar-admin__btn {
  background: #000;
  color: #fff;
}

.calendar-admin__btn:disabled {
  background: #ccc;
  border-color: #ccc;
  cursor: not-allowed;
}

.calendar-admin__btn:not(:disabled):hover {
  background: #fff;
  color: #000;
}

.calendar-admin__btn-secondary {
  background: #fff;
  color: #000;
}

.calendar-admin__btn-secondary:hover {
  background: #000;
  color: #fff;
}

.btn-delete-date {
  background: #dc3545;
  border-color: #dc3545;
  color: #fff;
  flex: 1;
}

.btn-delete-date:hover {
  background: #fff;
  color: #dc3545;
}

/* статусы и уведомления (используем существующие из admin.css) */
.loading-status {
  text-align: center;
  padding: 2rem;
  color: #666;
  display: none;
}

/* мобильная адаптивность */
@media (max-width: 899px) {
  .calendar-admin {
    margin-left: 0;
    padding-top: calc(var(--topbar-h) + 8vw);
  }

  .calendar-admin__add,
  .calendar-admin__manage {
    padding: 2rem 1.5rem;
  }

  .calendar-admin__filters {
    grid-template-columns: 1fr;
  }

  .available-dates-list {
    grid-template-columns: 1fr;
  }

  .date-actions {
    flex-direction: column;
  }
}
/* ==================== CONTACTS PAGE =============================== */
.contacts-page {
  margin-left: var(--sidebar-w);
  padding: 8vw 6vw;
  min-height: 100vh;
  background: #fff;
}

.contacts-page__container {
  max-width: 1400px;
  margin: 0 auto;
}

.contacts-page__title {
  text-align: center;
  font: clamp(32px, 5.2vw, 72px) / 1 "Geometria", sans-serif;
  letter-spacing: 6px;
  margin-bottom: 8vw;
  color: #000;
}

.contacts-page__content {
  /* контейнер для будущих блоков контента */
  /* стили будут добавлены при создании блоков */
}

/* мобильная адаптивность */
@media (max-width: 899px) {
  .contacts-page {
    margin-left: 0;
    padding-top: calc(var(--topbar-h) + 8vw);
    padding-left: 5vw;
    padding-right: 5vw;
  }
}

@media (max-width: 600px) {
  .contacts-page {
    padding-top: calc(var(--topbar-h) + 12vw);
    padding-left: 4vw;
    padding-right: 4vw;
  }

  .contacts-page__title {
    margin-bottom: 12vw;
  }
}

/* ==================== CONTACTS MAIN BLOCK ======================== */
.contacts-main {
  max-width: 1200px;
  margin: 0 auto;
}

.contacts-main__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: start;
}

/* ========== ЛЕВАЯ КОЛОНКА ========================================== */
.contacts-main__info {
  padding-right: 2vw;
}

.contacts-main__intro {
  font: clamp(14px, 1.2vw, 17px) / 1.7 "Geometria", sans-serif;
  color: #444;
  margin-bottom: 3rem;
}

.contacts-main__item {
  margin-bottom: 2.5rem;
}

.contacts-main__label {
  display: block;
  font: 11px/1 "Geometria", sans-serif;
  letter-spacing: 3px;
  color: #666;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.contacts-main__email {
  font: clamp(24px, 3.2vw, 36px) / 1.2 "Geometria", sans-serif;
  color: #000;
  text-decoration: none;
  font-weight: 300;
  word-break: break-all;
  transition: color 0.3s ease;
}

.contacts-main__email:hover {
  color: #666;
}

.contacts-main__social {
  display: flex;
  gap: 24px;
}

.social-link {
  display: block;
  width: 32px;
  height: 32px;
  color: #000;
  transition: transform 0.3s ease;
}

.social-link:hover {
  transform: scale(1.1);
}

.social-link svg {
  width: 100%;
  height: 100%;
}

/* ========== ПРАВАЯ КОЛОНКА (ФОРМА) ================================= */
.contacts-main__form {
  padding-left: 2vw;
}

.form-field {
  margin-bottom: 1.5rem;
}

.form-field label {
  display: block;
  font: 12px/1 "Geometria", sans-serif;
  color: #333;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0 0 8px 0;
  border: none;
  border-bottom: 1px solid #ccc;
  background: transparent;
  font: 14px/1.4 "Geometria", sans-serif;
  color: #333;
  resize: none;
  transition: border-color 0.3s ease;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-bottom-color: #000;
}

.form-field--textarea {
  margin-bottom: 2rem;
}

.form-field--textarea textarea {
  padding-top: 8px;
  min-height: 120px;
}

/* кнопка отправки */
.contacts-main__btn {
  padding: 18px 48px;
  background: #000;
  color: #fff;
  border: none;
  font-family: "Geometria", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all 0.3s ease;
}

.contacts-main__btn span {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.contacts-main__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ffd700 0%, #ffb300 100%);
  transform: scale(0.85);
  opacity: 0;
  transition: all 0.4s ease;
  z-index: -1;
}

.contacts-main__btn:hover {
  color: #222;
  background: #fff;
}

.contacts-main__btn:hover::before {
  transform: scale(1);
  opacity: 1;
}

.contacts-main__btn:hover span {
  transform: translateX(8px);
}

.contacts-main__note {
  font: 11px/1.5 "Geometria", sans-serif;
  color: #666;
  max-width: 42ch;
  margin: 0;
}

/* ========== АДАПТИВНОСТЬ =========================================== */
@media (max-width: 768px) {
  .contacts-main__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .contacts-main__info,
  .contacts-main__form {
    padding-left: 0;
    padding-right: 0;
  }

  .contacts-main__email {
    font-size: clamp(20px, 5vw, 28px);
  }

  .contacts-main__social {
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .contacts-main__intro {
    font-size: 15px;
    line-height: 1.6;
  }

  .contacts-main__btn {
    width: 100%;
    padding: 20px 48px;
  }

  .contacts-main__note {
    font-size: 12px;
    max-width: none;
  }
}

/* ==================== CLIENT ADMIN PAGE ========================== */
.client-admin {
  margin-left: var(--sidebar-w);
  padding: 8vw 6vw;
  min-height: 100vh;
  background: #f8f8f8;
}

.client-admin__container {
  max-width: 1000px;
  margin: 0 auto;
}

.client-admin__title {
  font: clamp(28px, 4.6vw, 48px) / 1 "Geometria", sans-serif;
  letter-spacing: 4px;
  text-align: center;
  margin-bottom: 6vw;
  color: #000;
}

/* форма создания */
.client-form {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.client-form__section {
  padding: 3rem;
  border-bottom: 1px solid #f0f0f0;
}

.client-form__section:last-child {
  border-bottom: none;
}

.client-form__section-title {
  font: clamp(18px, 2.4vw, 24px) / 1 "Geometria", sans-serif;
  letter-spacing: 2px;
  margin-bottom: 2rem;
  color: #333;
}

.client-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.client-form__field {
  margin-bottom: 1.5rem;
}

.client-form__field label {
  display: block;
  font: 12px/1 "Geometria", sans-serif;
  letter-spacing: 1px;
  color: #333;
  margin-bottom: 8px;
}

.client-form__field input,
.client-form__field select,
.client-form__field textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

.client-form__field input:focus,
.client-form__field select:focus,
.client-form__field textarea:focus {
  outline: none;
  border-color: #000;
}

/* URL поле */
.url-field {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
}

.url-prefix {
  background: #f5f5f5;
  padding: 12px 16px;
  font-size: 14px;
  color: #666;
  border-right: 1px solid #ddd;
}

.url-field input {
  border: none;
  border-radius: 0;
  margin: 0;
}

/* чекбокс */
.client-form__checkbox {
  margin: 1.5rem 0;
}

.client-form__checkbox label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font: 14px/1 "Geometria", sans-serif;
}

.client-form__checkbox input[type="checkbox"] {
  width: auto;
  margin: 0;
}

/* зона загрузки */
.client-upload-zone {
  border: 2px dashed #ccc;
  border-radius: 12px;
  padding: 3rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 2rem;
}

.client-upload-zone:hover,
.client-upload-zone.dragover {
  border-color: #000;
  background: rgba(0, 0, 0, 0.02);
}

.client-upload-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  color: #666;
}

.client-upload-content p {
  font-size: 18px;
  margin-bottom: 0.5rem;
  color: #333;
}

.client-upload-content span {
  font-size: 14px;
  color: #666;
}

/* превью файлов */
.client-file-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.client-preview-item {
  position: relative;
  background: #f5f5f5;
  border-radius: 8px;
  overflow: hidden;
}

.client-preview-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.client-preview-info {
  padding: 1rem;
  font-size: 12px;
  color: #666;
}

.client-remove-preview {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: rgba(255, 0, 0, 0.8);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
}

/* кнопки действий */
.client-form__actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  padding: 3rem;
  background: #f9f9f9;
}

.client-form__btn-primary,
.client-form__btn-secondary {
  padding: 14px 32px;
  border: 1px solid #000;
  border-radius: 6px;
  font-family: "Geometria", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.client-form__btn-primary {
  background: #000;
  color: #fff;
}

.client-form__btn-primary:hover {
  background: #fff;
  color: #000;
}

.client-form__btn-secondary {
  background: #fff;
  color: #000;
}

.client-form__btn-secondary:hover {
  background: #000;
  color: #fff;
}

/* ==================== CLIENT PAGE TEMPLATE ======================= */
.client-header {
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 1rem 0;
}

.client-header__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 6vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.client-header__logo span {
  font: 16px/1 "Geometria", sans-serif;
  letter-spacing: 2px;
  color: #000;
}

.client-header__logo small {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  color: #666;
  margin-top: 4px;
}

.client-header__nav {
  display: flex;
  gap: 2rem;
}

.client-header__nav a {
  font: 12px/1 "Geometria", sans-serif;
  letter-spacing: 1px;
  text-decoration: none;
  color: #666;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.client-header__nav a:hover {
  color: #000;
}

/* информация о сессии */
.client-info {
  background: #f8f8f8;
  padding: 6vw 0;
}

.client-info__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 6vw;
}

.client-info__title {
  font: clamp(24px, 4vw, 48px) / 1.2 "Geometria", sans-serif;
  letter-spacing: 3px;
  margin-bottom: 2rem;
  color: #000;
}

.client-info__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.client-info__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.client-info__label {
  font: 11px/1 "Geometria", sans-serif;
  letter-spacing: 2px;
  color: #666;
  text-transform: uppercase;
}

.client-info__value {
  font: 16px/1 "Geometria", sans-serif;
  color: #000;
}

.client-info__description {
  min-width: 100%;
  text-align: justify;
  font: 15px/1.6 "Geometria", sans-serif;
  color: #444;
  margin-bottom: 2rem;
  max-width: 60ch;
}

.client-download-btn {
  padding: 14px 28px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: "Geometria", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.client-download-btn:hover {
  background: #333;
}

/* галерея клиента */
.client-gallery {
  padding: 4vw 0;
}

.client-gallery__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 6vw;
}

.client-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.client-photo-item {
  position: relative;
/*   aspect-ratio: 3/2; */
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.client-photo-item:hover {
  transform: scale(1.02);
}

.client-photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.client-photo-item:hover .client-photo-overlay {
  opacity: 1;
}

.client-photo-download {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #000;
  transition: background 0.3s ease;
}

.client-photo-download:hover {
  background: #fff;
}

.client-photo-download svg {
  width: 24px;
  height: 24px;
}

/* лайтбокс */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
}

.lightbox__content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
}

.lightbox__content img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lightbox__close {
  position: absolute;
  top: -50px;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 36px;
  cursor: pointer;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 48px;
  cursor: pointer;
  padding: 12px 16px;
  transition: background 0.3s ease;
}

.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox__nav--prev {
  left: -80px;
}

.lightbox__nav--next {
  right: -80px;
}

/* подвал клиентской страницы */
.client-footer {
  background: #f8f8f8;
  padding: 3rem 0;
  text-align: center;
}

.client-footer__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 6vw;
}

.client-footer p {
  font: 12px/1.5 "Geometria", sans-serif;
  color: #666;
  margin: 0.5rem 0;
}

/* мобильная адаптивность */
@media (max-width: 899px) {
  .client-admin {
    margin-left: 0;
    padding-top: calc(var(--topbar-h) + 8vw);
  }

  .client-form__section {
    padding: 2rem 1.5rem;
  }

  .client-form__row {
    grid-template-columns: 1fr;
  }

  .client-form__actions {
    padding: 2rem 1.5rem;
    flex-direction: column;
  }

  .client-gallery__grid {
    grid-template-columns: 1fr 1fr;
  }

  .client-info__meta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .client-gallery__grid {
    grid-template-columns: 1fr;
  }

  .lightbox__nav--prev {
    left: 10px;
  }

  .lightbox__nav--next {
    right: 10px;
  }
}

/* ==================== PORTFOLIO FILTERS ========================== */
.portfolio-filters {
  max-width: 1400px;
  margin: 0 auto 4rem;
  padding: 0 5vw;
}

.portfolio-filters__container {
  text-align: center;
}

.portfolio-filters__section {
  margin-bottom: 2rem;
}

.portfolio-filters__section:last-child {
  margin-bottom: 0;
}

.portfolio-filters__title {
  font: 14px/1 "Geometria", sans-serif;
  letter-spacing: 2px;
  color: #666;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.portfolio-filters__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.filter-btn {
  padding: 10px 20px;
  border: 1px solid #ddd;
  background: #fff;
  color: #666;
  font: 12px/1 "Geometria", sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn:hover {
  border-color: #000;
  color: #000;
}

.filter-btn.active {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* адаптивность фильтров */
@media (max-width: 768px) {
  .portfolio-filters {
    margin-bottom: 3rem;
  }

  .portfolio-filters__section {
    margin-bottom: 1.5rem;
  }

  .filter-btn {
    padding: 8px 16px;
    font-size: 11px;
  }
}

@media (max-width: 600px) {
  .portfolio-filters__buttons {
    gap: 8px;
  }

  .filter-btn {
    padding: 6px 12px;
    font-size: 10px;
  }
}

/* обновление для кликабельных карточек портфолио */
.gallery .portfolio-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  grid-row-end: span var(--row-span);
  transition: transform 0.3s ease;
  text-decoration: none; /* убираем подчеркивание ссылки */
  color: inherit; /* наследуем цвет */
}

.gallery .portfolio-item:hover {
  transform: translateY(-4px);
  text-decoration: none; /* убираем подчеркивание при наведении */
}

.gallery .portfolio-item:visited {
  color: inherit; /* убираем изменение цвета посещенных ссылок */
}

/* ==================== PORTFOLIO LIGHTBOX ========================= */
.portfolio-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 60px; /* отступы для кнопок */
}

.portfolio-lightbox.active {
  display: flex;
  opacity: 1;
}

.portfolio-lightbox__overlay {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.portfolio-lightbox__content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.portfolio-lightbox__image {
  max-width: 80vw; /* уменьшили с 95vw до 80vw */
  max-height: 80vh; /* уменьшили с 95vh до 80vh */
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.portfolio-lightbox__close {
  position: fixed; /* изменили с absolute на fixed */
  top: 20px; /* фиксированное положение от верха экрана */
  right: 20px; /* фиксированное положение от правого края */
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-family: "Geometria", sans-serif;
  z-index: 10001; /* выше остального контента */
}

.portfolio-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
}

.portfolio-lightbox__nav {
  position: fixed; /* изменили с absolute на fixed */
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-family: "Geometria", sans-serif;
  z-index: 10001; /* выше остального контента */
}

.portfolio-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%) scale(1.1);
}

.portfolio-lightbox__nav--prev {
  left: 32px; /* фиксированное положение от левого края */
}

.portfolio-lightbox__nav--next {
  right: 32px; /* фиксированное положение от правого края */
}

/* мобильная адаптивность лайтбокса */
@media (max-width: 768px) {
  .portfolio-lightbox {
    padding: 40px 20px; /* меньше отступы на планшетах */
  }

  .portfolio-lightbox__image {
    max-width: 85vw; /* больше места для изображения на мобильных */
    max-height: 75vh;
  }

  .portfolio-lightbox__close {
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .portfolio-lightbox__nav {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }

  .portfolio-lightbox__nav--prev {
    left: 20px;
  }

  .portfolio-lightbox__nav--next {
    right: 20px;
  }
}

@media (max-width: 480px) {
  .portfolio-lightbox {
    padding: 20px 10px; /* минимальные отступы на телефонах */
  }

  .portfolio-lightbox__image {
    max-width: 90vw;
    max-height: 70vh;
  }

  .portfolio-lightbox__close {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .portfolio-lightbox__nav {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .portfolio-lightbox__nav--prev {
    left: 10px;
  }

  .portfolio-lightbox__nav--next {
    right: 10px;
  }
}

/* дополнительные стили для поля ссылки */
.preview-info input[type="url"],
.photo-link-input {
  margin-top: 0.5rem;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  width: 100%;
}

.photo-link {
  margin: 0.5rem 0;
  font-size: 11px;
  color: #666;
}

.photo-link-input {
  margin-top: 4px;
  font-size: 11px;
}

/* компактнее делаем карточки с новым полем */
.photo-info {
  padding: 10px;
}

.preview-info {
  padding: 0.8rem;
}


/* дополнительные стили для поля года */
.photo-year {
  margin: 0.5rem 0;
  font-size: 11px;
  color: #666;
}

.photo-year-input {
  margin-top: 4px;
  padding: 4px 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  width: 60px;
}

/* стили для поля года в превью загрузки */
.preview-info input[type="number"] {
  margin-top: 0.5rem;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  width: 100%;
}


/* стили для поля ввода новой категории */
.new-category-input {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  width: 100%;
  display: none; /* скрыто по умолчанию */
}

.new-category-input.show {
  display: block;
}

/* стили для поля в существующих фото */
.photo-new-category {
  margin: 0.5rem 0;
  font-size: 11px;
  color: #666;
}

.photo-new-category-input {
  margin-top: 4px;
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  width: 100%;
  display: none;
}


/* ==================== EDIT MODAL ================================== */
.edit-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);  /* добавляем фон прямо на модальное окно */
}

.edit-modal__overlay {
  position: absolute;
  inset: 0;
  background: transparent;  /* убираем дублирующий фон */
  cursor: pointer;
}

.edit-modal__content {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  max-width: 500px;
  width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 10000;           /* выше overlay */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);  /* добавляем тень */
  cursor: default;          /* обычный курсор на контенте */
}

.edit-modal__content h3 {
  margin: 0 0 1.5rem 0;
  font: 20px/1.2 "Geometria", sans-serif;
  letter-spacing: 1px;
  color: #000;
  font-weight: 500;
}

.edit-field {
  margin-bottom: 1.5rem;
}

.edit-field label {
  display: block;
  font: 13px/1 "Geometria", sans-serif;
  letter-spacing: 1px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 500;
}

.edit-field input,
.edit-field select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;  /* более заметная граница */
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  background: #fff;           /* явно белый фон */
  color: #333;               /* явно темный текст */
  transition: all 0.3s ease;
}

.edit-field input:focus,
.edit-field select:focus {
  outline: none;
  border-color: #000;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);  /* фокус-тень */
}

.edit-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #f0f0f0;
}

.btn-cancel,
.btn-save {
  padding: 14px 28px;
  border: 2px solid #000;
  border-radius: 6px;
  font-family: "Geometria", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.btn-cancel {
  background: #fff;
  color: #000;
}

.btn-cancel:hover {
  background: #000;
  color: #fff;
  transform: translateY(-1px);
}

.btn-save {
  background: #000;
  color: #fff;
}

.btn-save:hover {
  background: #333;
  transform: translateY(-1px);
}

/* скрытое поле новой категории */
.new-category-input {
  display: none;
  margin-top: 8px;
}

.new-category-input.show {
  display: block;
}

/* ==================== Стили для контактной формы ========================= */
/* Стили для Toast уведомлений */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    max-width: 400px;
}

.toast {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    margin-bottom: 10px;
    padding: 16px;
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s ease;
    border-left: 4px solid #28a745;
}

.toast--show {
    transform: translateX(0);
    opacity: 1;
}

.toast--success {
    border-left-color: #28a745;
}

.toast--error {
    border-left-color: #dc3545;
}

.toast__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    margin-right: 12px;
    color: white;
}

.toast--success .toast__icon {
    background: #28a745;
}

.toast--error .toast__icon {
    background: #dc3545;
}

.toast__message {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
}

.toast__close {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    margin-left: 12px;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast__close:hover {
    color: #666;
}

/* Стили для кнопки загрузки */
.contacts-main__btn.loading {
    opacity: 0.7;
    cursor: not-allowed;
}

.contacts-main__btn.loading span {
    position: relative;
}

.contacts-main__btn.loading span::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .toast-container {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
    
    .toast {
        padding: 12px;
    }
    
    .toast__message {
        font-size: 13px;
    }
}

/* 
##############################
###############################
###############################
*/

/* Разделитель в меню */
.menu-divider {
    height: 1px;
    background: #ddd;
    margin: 10px 0;
    list-style: none;
}


/* ==================== CATEGORY MANAGEMENT ======================== */
.admin__categories {
  background: #fff;
  padding: 3rem;
  border-radius: 12px;
  margin-bottom: 4rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.category-management {
  max-width: unset;
  margin: unset;
}

.category-form {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #f0f0f0;
}

.category-form__input-group {
  display: flex;
  gap: 1rem;
  align-items: center;
  max-width: 500px;
}

.category-form__input {
  flex: 1;
  padding: 14px 18px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-family: "Geometria", sans-serif;
  font-size: 14px;
  transition: all 0.3s ease;
}

.category-form__input:focus {
  outline: none;
  border-color: #000;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.category-form__btn {
  padding: 14px 28px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: "Geometria", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.category-form__btn:hover {
  background: #333;
  transform: translateY(-1px);
}

.category-form__btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

.categories-display__title {
  font: 16px/1.2 "Geometria", sans-serif;
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
  color: #333;
  font-weight: 500;
}

.categories-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.category-item {
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  transition: all 0.3s ease;
}

.category-item:hover {
  background: #f0f0f0;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.category-name {
  display: block;
  font: 14px/1.2 "Geometria", sans-serif;
  font-weight: 500;
  color: #000;
  margin-bottom: 0 !important;
}

.category-slug {
  display: block;
  font: 11px/1 "Geometria", sans-serif;
  color: #666;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* адаптивность */
@media (max-width: 768px) {
  .category-form__input-group {
    flex-direction: column;
    max-width: none;
  }
  
  .category-form__btn {
    width: 100%;
  }
  
  .categories-list {
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
  }
}

@media (max-width: 480px) {
  .categories-list {
    grid-template-columns: 1fr;
  }
}

/*
###############################
###############################
###############################
*/


/* Стили для управления категориями */
.category-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.3s ease;
}

.category-item:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.category-info {
    max-width: 100%;
    overflow: hidden;
    white-space: normal;
    flex: 1;
}

.category-name {
    display: block;
    font: 16px / 1.2 "Geometria", sans-serif;
    font-weight: 500;
    text-align: left;
    color: #000;
    margin-bottom: 0.5rem;
}

.category-edit-btn {
  background: #000000;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: all 0.3s ease;
    margin-left: 1rem;
}

.category-slug {
    display: block;
    font: 11px/1 "Geometria", sans-serif;
    color: #666;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.category-delete-btn {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: all 0.3s ease;
    margin-left: 0.5rem;
}

.category-delete-btn:hover {
    background: #c82333;
    transform: scale(1.1);
}

.category-delete-btn:active {
    transform: scale(0.95);
}

/* Стили для галереи портфолио */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
}

.gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.gallery-item__image {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.gallery-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-item__image img {
    transform: scale(1.05);
}

.gallery-item__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.9));
    color: white;
    padding: 2rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-item__overlay {
    transform: translateY(0);
}

.gallery-item__title {
    margin: 0 0 0.5rem 0;
    font-size: 1.2em;
    font-weight: 500;
}

.gallery-item__category,
.gallery-item__year {
    margin: 0.25rem 0;
    font-size: 0.9em;
    opacity: 0.9;
}

.gallery-item__link {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.gallery-item__link:hover {
    background: rgba(255, 255, 255, 0.3);
}

.no-photos {
    grid-column: 1 / -1;
    text-align: center;
    color: #666;
    font-size: 1.2em;
    padding: 3rem;
}

.loader {
    text-align: center;
    padding: 2rem;
    font-size: 1.1em;
    color: #666;
}


/*
#####################################
#####################################
#####################################
*/


/* Стили для overlay с зумом */
.gallery-item__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.9));
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-item__overlay {
    opacity: 1;
}

.gallery-item__zoom {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    font-size: 2rem;
    color: white;
}

.gallery-item__zoom svg {
    width: 48px;
    height: 48px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.gallery-item__info {
    margin-top: auto;
}

.gallery-item__title {
    margin: 0 0 0.5rem 0;
    font-size: 1.1em;
    font-weight: 500;
}

.gallery-item__category,
.gallery-item__year {
    margin: 0.25rem 0;
    font-size: 0.9em;
    opacity: 0.9;
}

.gallery-item__link {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.4rem 0.8rem;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.8em;
    transition: background 0.3s ease;
}

.gallery-item__link:hover {
    background: rgba(255, 255, 255, 0.3);
    color: white;
    text-decoration: none;
}

/* Стили для ссылок лайтбокса */
.gallery-item a[data-lightbox] {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: zoom-in;
}

/* Кастомизация Lightbox */
.lb-data .lb-caption {
    font-family: "Geometria", sans-serif;
    font-size: 14px;
    line-height: 1.4;
}

.lb-data .lb-number {
    font-family: "Geometria", sans-serif;
    font-size: 12px;
}


/*
#####################################
#####################################
#####################################
*/


/* ПРИНУДИТЕЛЬНОЕ ОТКЛЮЧЕНИЕ СТАРЫХ GRID СТИЛЕЙ
.portfolio-preview__grid,
.gallery {
  /* Отключаем все grid стили 
  display: block !important;
  grid-template-columns: unset !important;
  grid-auto-rows: unset !important;
  gap: unset !important;
}

/* Убираем все masonry переменные 
.portfolio-preview__item,
.gallery-item {
  grid-row-end: unset !important;
  --row-span: unset !important;
}

/* Принудительно применяем column стили 
.portfolio-preview__grid {
  columns: 4 !important;
  column-gap: 16px !important;
} */

.gallery {
  columns: 3 !important;
  column-gap: 20px !important;
}

/*
#####################################
#####################################
#####################################
*/


.client-preview-item {
    position: relative;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #f9f9f9;
}

.client-preview-item img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    display: block;
}

.client-preview-info {
    padding: 0.5rem;
    font-size: 0.8em;
}

.client-preview-info .filename {
    display: block;
    font-weight: 500;
    margin-bottom: 0.25rem;
    word-break: break-word;
}

.client-preview-info .filesize {
    color: #666;
    font-size: 0.9em;
}

.client-preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}

.client-preview-remove:hover {
    background: #ff4444;
    color: white;
}

.client-upload-zone.dragover {
    border-color: #007cba;
    background: rgba(0, 124, 186, 0.1);
}




/*
#####################################
#####################################
#####################################
*/




/* ==================== SERVICES PAGE =============================== */
.services-page {
  margin-left: var(--sidebar-w);
  padding: 8vw 6vw;
  min-height: 100vh;
  background: #fff;
}

.services-page__container {
  max-width: 1400px;
  margin: 0 auto;
}

.services-page__title {
  text-align: center;
  font: clamp(32px, 5.2vw, 72px) / 1 "Geometria", sans-serif;
  letter-spacing: 6px;
  margin-bottom: 8vw;
  color: #000;
}

.services-page__content {
  /* контейнер для будущих блоков контента */
  /* стили будут добавлены при создании блоков */
}

/* мобильная адаптивность */
@media (max-width: 899px) {
  .services-page {
    margin-left: 0;
    padding-top: calc(var(--topbar-h) + 8vw);
    padding-left: 5vw;
    padding-right: 5vw;
  }
}

@media (max-width: 600px) {
  .services-page {
    padding-top: calc(var(--topbar-h) + 12vw);
    padding-left: 4vw;
    padding-right: 4vw;
  }

  .services-page__title {
    margin-bottom: 12vw;
  }
}

/* ==================== SERVICES GRID =============================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* карточка услуги */
.service-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid #f0f0f0;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.service-card__image {
  width: 100%;
  height: 240px;
  overflow: hidden;
  position: relative;
}

.service-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.service-card:hover .service-card__image img {
  transform: scale(1.05);
}

.service-card__content {
  padding: 1.5rem;
}

.service-card__title {
  font: 20px/1.2 "Geometria", sans-serif;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
  color: #000;
  font-weight: 500;
}

.service-card__price {
  font: 16px/1 "Geometria", sans-serif;
  letter-spacing: 1px;
  color: var(--accent);
  margin-bottom: 1rem;
  font-weight: 500;
}

.service-card__description {
  font: 14px/1.5 "Geometria", sans-serif;
  color: #666;
  margin: 0;
}

/* ==================== SERVICE MODAL =============================== */
.service-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-modal.active {
  display: flex;
  opacity: 1;
}

.service-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}

.service-modal__content {
  position: relative;
  background: #fff;
  border-radius: 16px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.service-modal.active .service-modal__content {
  transform: scale(1);
}

.service-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  z-index: 10001;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}

.service-modal__close:hover {
  background: #fff;
  transform: scale(1.1);
}

.service-modal__header {
  position: relative;
}

.service-modal__image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
}

.service-modal__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  padding: 3rem 2rem 2rem;
  color: #fff;
}

.service-modal__title {
  font: clamp(24px, 4vw, 32px) / 1.2 "Geometria", sans-serif;
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.service-modal__price {
  font: 18px/1 "Geometria", sans-serif;
  letter-spacing: 1px;
  color: #ffd700;
  font-weight: 500;
}

.service-modal__body {
  padding: 2rem;
}

.service-modal__description {
  font: 16px/1.6 "Geometria", sans-serif;
  color: #444;
  margin-bottom: 2rem;
}

.service-modal__features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
}

.service-modal__features li {
  font: 14px/1.5 "Geometria", sans-serif;
  color: #666;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
  padding-left: 1.5rem;
}

.service-modal__features li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: bold;
}

.service-modal__features li:last-child {
  border-bottom: none;
}

.service-modal__footer {
  padding: 0 2rem 2rem;
  text-align: center;
}

.service-modal__book-btn {
  display: inline-block;
  padding: 16px 32px;
  background: var(--accent);
  color: #fff;
  font: 14px/1 "Geometria", sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.service-modal__book-btn span {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-modal__book-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ffd700 0%, #ffb300 100%);
  transform: scale(0.85);
  opacity: 0;
  border-radius: 6px;
  transition: all 0.4s ease;
  z-index: -1;
}

.service-modal__book-btn:hover {
  color: #222;
  background: #fff;
}

.service-modal__book-btn:hover::before {
  transform: scale(1);
  opacity: 1;
}

.service-modal__book-btn:hover span {
  transform: translateX(8px);
}

/* ==================== ADAPTIVE ===================================== */
@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .service-modal {
    padding: 1rem;
  }

  .service-modal__content {
    max-height: 95vh;
  }

  .service-modal__image {
    height: 250px;
  }

  .service-modal__info {
    padding: 2rem 1.5rem 1.5rem;
  }

  .service-modal__body {
    padding: 1.5rem;
  }

  .service-modal__footer {
    padding: 0 1.5rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card__content {
    padding: 1rem;
  }

  .service-modal__image {
    height: 200px;
  }
}
/* ==================== SERVICES ADMIN ============================= */
.services-admin {
  margin-left: var(--sidebar-w);
  padding: 8vw 6vw;
  min-height: 100vh;
  background: #f8f8f8;
}

.services-admin__container {
  max-width: 1000px;
  margin: 0 auto;
}

.services-admin__title {
  font: clamp(28px, 4.6vw, 48px) / 1 "Geometria", sans-serif;
  letter-spacing: 4px;
  text-align: center;
  margin-bottom: 6vw;
  color: #000;
}

.services-admin__section-title {
  font: clamp(20px, 2.8vw, 32px) / 1 "Geometria", sans-serif;
  letter-spacing: 2px;
  margin-bottom: 2rem;
  color: #333;
}

/* ========== БЛОК ДОБАВЛЕНИЯ УСЛУГИ ================================ */
.services-admin__add {
  background: #fff;
  padding: 3rem;
  border-radius: 12px;
  margin-bottom: 4rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* форма услуги */
.service-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.service-form__field {
  margin-bottom: 1.5rem;
}

.service-form__field label {
  display: block;
  font: 12px/1 "Geometria", sans-serif;
  letter-spacing: 1px;
  color: #333;
  margin-bottom: 8px;
}

.service-form__field input,
.service-form__field textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.3s ease;
  resize: vertical;
}

.service-form__field input:focus,
.service-form__field textarea:focus {
  outline: none;
  border-color: #000;
}

/* зона загрузки изображения */
.service-upload-zone {
  border: 2px dashed #ccc;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 1rem;
}

.service-upload-zone:hover,
.service-upload-zone.dragover {
  border-color: #000;
  background: rgba(0, 0, 0, 0.02);
}

.service-upload-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  color: #666;
}

.service-upload-content p {
  font-size: 16px;
  margin-bottom: 0.5rem;
  color: #333;
}

.service-upload-content span {
  font-size: 12px;
  color: #666;
}

/* превью изображения */
.service-image-preview {
  display: none;
  position: relative;
  max-width: 300px;
  margin: 1rem 0;
}

.service-image-preview.show {
  display: block;
}

.service-image-preview img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

.service-image-preview .remove-image {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: rgba(255, 0, 0, 0.8);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-form__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 2rem;
}

/* ========== БЛОК УПРАВЛЕНИЯ УСЛУГАМИ ============================== */
.services-admin__manage {
  background: #fff;
  padding: 3rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* список услуг */
.services-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.service-item {
  background: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #eee;
  transition: all 0.3s ease;
}

.service-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.service-item__image {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.service-item__content {
  padding: 1rem;
}

.service-item__title {
  font: 16px/1.2 "Geometria", sans-serif;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #333;
}

.service-item__price {
  font: 14px/1 "Geometria", sans-serif;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.service-item__description {
  font: 12px/1.4 "Geometria", sans-serif;
  color: #666;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.service-item__actions {
  display: flex;
  gap: 0.5rem;
}

/* кнопки */
.services-admin__btn,
.btn-edit-service,
.btn-delete-service,
.btn-cancel,
.btn-save {
  padding: 12px 24px;
  border: 1px solid #000;
  border-radius: 6px;
  font-family: "Geometria", sans-serif;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.services-admin__btn {
  background: #000;
  color: #fff;
}

.services-admin__btn:hover {
  background: #fff;
  color: #000;
}

.btn-edit-service {
  background: #fff;
  color: #000;
  flex: 1;
}

.btn-edit-service:hover {
  background: #000;
  color: #fff;
}

.btn-delete-service {
  background: #dc3545;
  border-color: #dc3545;
  color: #fff;
  flex: 1;
}

.btn-delete-service:hover {
  background: #fff;
  color: #dc3545;
}

.btn-cancel {
  background: #fff;
  color: #000;
}

.btn-cancel:hover {
  background: #000;
  color: #fff;
}

.btn-save {
  background: #000;
  color: #fff;
}

.btn-save:hover {
  background: #333;
}

/* ========== МОДАЛЬНОЕ ОКНО РЕДАКТИРОВАНИЯ ======================= */
.edit-service-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.6);
}

.edit-service-modal.active {
  display: flex;
}

.edit-service-modal__overlay {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.edit-service-modal__content {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 10000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.edit-service-modal__content h3 {
  margin: 0 0 1.5rem 0;
  font: 20px/1.2 "Geometria", sans-serif;
  letter-spacing: 1px;
  color: #000;
  font-weight: 500;
}

.current-image {
  margin-bottom: 1rem;
}

.current-image img {
  width: 100%;
  max-width: 200px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.edit-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #f0f0f0;
}

/* статусы загрузки */
.loading-status {
  text-align: center;
  padding: 2rem;
  color: #666;
  display: none;
}

/* мобильная адаптивность */
@media (max-width: 899px) {
  .services-admin {
    margin-left: 0;
    padding-top: calc(var(--topbar-h) + 8vw);
  }

  .services-admin__add,
  .services-admin__manage {
    padding: 2rem 1.5rem;
  }

  .service-form__row {
    grid-template-columns: 1fr;
  }

  .services-list {
    grid-template-columns: 1fr;
  }

  .edit-service-modal {
    padding: 1rem;
  }

  .edit-service-modal__content {
    padding: 1.5rem;
  }
}


/*
#####################################
#####################################
#####################################
*/

/* ==================== BLOG LOADER ================================ */
.blog-loader {
  text-align: center;
  padding: 2rem;
  font: 16px/1 "Geometria", sans-serif;
  color: #666;
}

.blog-posts__grid {
  transition: opacity 0.3s ease;
}

/* Стили для пагинации */
.blog-pagination .page-numbers {
  display: flex;
  justify-content: center;
  list-style: none;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.blog-pagination .page-numbers li {
  list-style: none;
}

.blog-pagination .page-numbers a,
.blog-pagination .page-numbers span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  color: #666;
  text-decoration: none;
  font: 14px/1 "Geometria", sans-serif;
  transition: all 0.3s ease;
  cursor: pointer;
}

.blog-pagination .page-numbers a:hover,
.blog-pagination .page-numbers .current {
  background: #000;
  color: #fff;
  border-color: #000;
}


/* ==================== RECENT BLOG POSTS ========================== */
.recent-blog {
  padding: 8vw 5vw;
  background: #f8f8f8;
  margin-left: var(--sidebar-w);
}

.recent-blog__container {
  max-width: 1200px;
  margin: 0 auto;
}

.recent-blog__title {
  text-align: center;
  font: clamp(32px, 5.2vw, 72px) / 1 "Geometria", sans-serif;
  letter-spacing: 6px;
  margin-bottom: 4rem;
  color: #000;
}

.recent-blog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.recent-blog__card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
}

.recent-blog__card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.recent-blog__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.recent-blog__image {
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.recent-blog__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.recent-blog__card:hover .recent-blog__image img {
  transform: scale(1.05);
}

.recent-blog__content {
  padding: 1.5rem;
}

.recent-blog__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.recent-blog__date {
  font: 11px/1 "Geometria", sans-serif;
  color: #666;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.recent-blog__category {
  font: 10px/1 "Geometria", sans-serif;
  color: #fff;
  background: #000;
  padding: 3px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.recent-blog__post-title {
  font: 18px/1.3 "Geometria", sans-serif;
  margin-bottom: 1rem;
  color: #000;
  font-weight: 500;
}

.recent-blog__excerpt {
  font: 14px/1.5 "Geometria", sans-serif;
  color: #666;
  margin-bottom: 1rem;
}

.recent-blog__read-more {
  font: 12px/1 "Geometria", sans-serif;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
  transition: color 0.3s ease;
}

.recent-blog__card:hover .recent-blog__read-more {
  color: #666;
}

.recent-blog__footer {
  text-align: center;
}

.recent-blog__button {
  display: inline-block;
  padding: 16px 32px;
  background: #000;
  color: #fff;
  text-decoration: none;
  font: 12px/1 "Geometria", sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.recent-blog__button:hover {
  background: #333;
  transform: translateY(-2px);
  color: #fff;
  text-decoration: none;
}

.recent-blog__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 2rem;
  color: #666;
  font: 16px/1.5 "Geometria", sans-serif;
}

/* адаптивность */
@media (max-width: 899px) {
  .recent-blog {
    margin-left: 0;
  }
  
  .recent-blog__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media (max-width: 600px) {
  .recent-blog {
    padding: 6vw 4vw;
  }
  
  .recent-blog__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* ==================== ПРИНУДИТЕЛЬНЫЙ MASONRY FIX ================= */
/* Отключаем все конфликтующие grid стили */
.portfolio-preview__grid[style*="grid"],
.portfolio-preview__grid.grid-layout {
  display: block !important;
  grid-template-columns: unset !important;
  grid-auto-rows: unset !important;
  gap: unset !important;
}

/* Принудительно применяем masonry */
.portfolio-preview__grid {
  columns: 4 !important;
  column-gap: 16px !important;
}

.portfolio-preview__item {
  display: inline-block !important;
  width: 100% !important;
  grid-row-end: unset !important;
  --row-span: unset !important;
}

/* Убираем любые фиксированные высоты */
.portfolio-preview__item img {
  height: auto !important;
  max-height: none !important;
  aspect-ratio: unset !important;
}

/* Адаптивные колонки с приоритетом */
@media (max-width: 1200px) {
  .portfolio-preview__grid {
    columns: 3 !important;
  }
}

@media (max-width: 899px) {
  .portfolio-preview__grid {
    columns: 2 !important;
  }
}

@media (max-width: 400px) {
  .portfolio-preview__grid {
    columns: 1 !important;
  }
}


/* ==================== PORTFOLIO ACTION INDICATOR ================= */
.portfolio-preview__action {
  display: inline-block;
  margin-top: 0.5rem;
  font: 11px/1 "Geometria", sans-serif;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 1px;
  background: rgba(255, 255, 255, 0.1);
  padding: 14px 12px;
  border-radius: 3px;
  transition: background 0.3s ease;
}

.portfolio-preview__item:hover .portfolio-preview__action {
  background: rgba(255, 255, 255, 0.2);
}

/* Стили для элементов без ссылки */
.portfolio-preview__item[style*="cursor: default"] .portfolio-preview__action {
  opacity: 0.6;
  background: rgba(255, 255, 255, 0.05);
}


/* Стили для валидации URL */
.preview-info input[type="url"]:invalid {
    border-color: #dc3545;
    background-color: #fff5f5;
}

.preview-info input[type="url"]:valid {
    border-color: #28a745;
}

.preview-info small {
    display: block;
    margin-top: 4px;
    font-style: italic;
}


/* ==================== UNIQUE CONTACT FORM ======================== */
.contact-form-unique {
  padding: 0;
  background: #f8f8f8;
  position: relative;
  overflow: hidden;
}

.contact-form-unique__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: clamp(4rem, 8vw, 12rem);
  align-items: start;
}

/* ========== ЗАГОЛОВОК БЛОКА ===================================== */
.contact-form-unique__header {
  position: sticky;
  top: 2rem;
}

.contact-form-unique__label {
  display: block;
  font: 10px/1 "Geometria", sans-serif;
  letter-spacing: 4px;
  color: #999;
  margin-bottom: 2rem;
  text-transform: uppercase;
}

.contact-form-unique__title {
  font: clamp(32px, 4.5vw, 56px) / 0.9 "Geometria", sans-serif;
  letter-spacing: 2px;
  margin: 0 0 3rem 0;
  color: #000;
  font-weight: 300;
}

.contact-form-unique__line {
  width: 2px;
  height: 80px;
  background: linear-gradient(to bottom, #000 0%, transparent 100%);
  margin-left: 2px;
}

/* ========== ОБЁРТКА ФОРМЫ ======================================= */
.contact-form-unique__form-wrapper {
  position: relative;
  background: #fff;
  padding: 3rem;
  border-radius: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.contact-form-unique__form {
  position: relative;
  z-index: 2;
}

/* ========== ПЛАВАЮЩИЕ ПОЛЯ ==================================== */
.floating-field {
  position: relative;
  margin-bottom: 2.5rem;
}

.floating-field input,
.floating-field textarea {
  width: 100%;
  padding: 20px 0 8px 0;
  background: transparent;
  border: none;
  outline: none;
  font: 16px/1.4 "Geometria", sans-serif;
  color: #333;
  transition: all 0.3s ease;
}

.floating-field textarea {
  min-height: 120px;
  resize: vertical;
  padding-top: 25px;
}

.floating-field label {
  position: absolute;
  left: 0;
  top: 20px;
  font: 16px/1 "Geometria", sans-serif;
  color: #999;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-field--textarea label {
  top: 25px;
}

.field-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #e0e0e0;
  transition: all 0.3s ease;
}

.field-line::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #000;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Активные состояния */
.floating-field input:focus + label,
.floating-field input:valid + label,
.floating-field textarea:focus + label,
.floating-field textarea:valid + label {
  top: 0;
  font-size: 12px;
  color: #000;
  letter-spacing: 1px;
}

.floating-field input:focus ~ .field-line::after,
.floating-field textarea:focus ~ .field-line::after {
  width: 100%;
}


/* ========== КАСТОМНЫЙ СЕЛЕКТ =================================== */
.contact-form-unique__select-wrapper {
  margin-bottom: 2.5rem;
}

.select-label {
  display: block;
  font: 12px/1 "Geometria", sans-serif;
  letter-spacing: 1px;
  color: #000;
  margin-bottom: 1rem;
}

.custom-select {
  position: relative;
}

.custom-select select {
  width: 100%;
  padding: 20px 40px 8px 0;
  background: transparent;
  border: none;
  outline: none;
  font: 16px/1.4 "Geometria", sans-serif;
  color: #333;
  appearance: none;
  cursor: pointer;
  border-bottom: 1px solid #e0e0e0;
  transition: border-color 0.3s ease;
}

.custom-select select:focus {
  border-bottom-color: #000;
}

.select-arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  color: #666;
  pointer-events: none;
  transition: transform 0.3s ease;
}

.custom-select:hover .select-arrow {
  transform: translateY(-50%) rotate(180deg);
}


/* ========== КНОПКА ОТПРАВКИ ===================================== */
.contact-form-unique__submit {
  margin-top: 3rem;
  text-align: left;
}

.submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.4s ease;
  position: relative;
}

.submit-btn__text {
  font: 14px/1 "Geometria", sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #000;
  transition: color 0.3s ease;
}

.submit-btn__arrow {
  width: 60px;
  height: 60px;
  border: 2px solid #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.submit-btn__arrow svg {
  width: 24px;
  height: 24px;
  color: #000;
  transition: all 0.3s ease;
}

.submit-btn__arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.submit-btn:hover .submit-btn__arrow::before {
  transform: scale(1);
}

.submit-btn:hover .submit-btn__arrow svg {
  color: #fff;
  transform: translateX(4px);
}

.submit-btn:hover .submit-btn__text {
  color: #666;
}
/* ========== ДЕКОРАТИВНЫЕ ЭЛЕМЕНТЫ ============================== */
.form-decoration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.decoration-line {
  position: absolute;
  background: #f0f0f0;
}

.decoration-line--1 {
  top: 0;
  right: 0;
  width: 1px;
  height: 40%;
}

.decoration-line--2 {
  bottom: 0;
  left: 0;
  width: 30%;
  height: 1px;
}

.decoration-dot {
  position: absolute;
  top: 2rem;
  left: 2rem;
  width: 4px;
  height: 4px;
  background: #000;
  border-radius: 50%;
}

/* ========== АДАПТИВНОСТЬ ======================================= */
@media (max-width: 1024px) {
  .contact-form-unique__container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .contact-form-unique__header {
    position: static;
    text-align: center;
  }

  .contact-form-unique__line {
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .contact-form-unique {
    padding: 8vw 0;
  }

  .contact-form-unique__form-wrapper {
    padding: 2rem 1.5rem;
  }

  .floating-field input,
  .floating-field textarea,
  .custom-select select {
    font-size: 14px;
  }

  .submit-btn__arrow {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 480px) {
  .contact-form-unique__title {
    font-size: clamp(24px, 6vw, 36px);
  }

  .contact-form-unique__form-wrapper {
    padding: 1.5rem 1rem;
  }
}

/* ==================== CONTACTS SECTION ON HOME =================== */
.contacts {
  margin-left: var(--sidebar-w);
  padding: 10vw 6vw;
  background: #f8f8f8;
}

.contacts__container {
  max-width: 1400px;
  margin: 0 auto;
}

.contacts__head {
  text-align: center;
  font: clamp(24px, 4.6vw, 42px) / 1 "Geometria", sans-serif;
  letter-spacing: 6px;
  margin-bottom: 6vw;
  color: #000;
}

/* Стили для уникальной формы уже есть в paste-3.txt */

/* Адаптивность */
@media (max-width: 899px) {
  .contacts {
    margin-left: 0;
    padding-top: calc(var(--topbar-h) + 10vw);
  }
}



/* ==================== BLOG STYLE BREADCRUMBS ==================== */
.blog-breadcrumbs {
  font: 12px/1 "Geometria", sans-serif;
  color: #666;
  margin-bottom: 3rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.blog-breadcrumbs a {
  color: #666;
  text-decoration: none;
  transition: color 0.3s ease;
}

.blog-breadcrumbs a:hover {
  color: #000;
  text-decoration: none;
}

.blog-breadcrumbs span {
  margin: 0 8px;
  color: #999;
}

.blog-breadcrumbs span:last-child {
  color: #000;
  font-weight: 500;
}

/* Адаптивность */
@media (max-width: 768px) {
  .blog-breadcrumbs {
    font-size: 11px;
    margin-bottom: 2rem;
  }
  
  .blog-breadcrumbs span {
    margin: 0 6px;
  }
}

@media (max-width: 480px) {
  .blog-breadcrumbs {
    font-size: 10px;
    margin-bottom: 1.5rem;
  }
  
  .blog-breadcrumbs span {
    margin: 0 4px;
  }
}


.photo-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.photo-modal.active {
    display: flex;
    opacity: 1;
}

.photo-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
}

.photo-modal__container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.photo-modal__content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    text-align: center;
}

.photo-modal__image {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
}

.photo-modal__info {
    color: white;
    margin-top: 15px;
}

.photo-modal__info h3 {
    margin: 0 0 5px 0;
    font-size: 1.2em;
}

.photo-modal__info p {
    margin: 0;
    opacity: 0.8;
}

.photo-modal__close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 30px;
    cursor: pointer;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-modal__prev,
.photo-modal__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.photo-modal__prev {
    left: 20px;
}

.photo-modal__next {
    right: 20px;
}

.photo-modal__prev:hover,
.photo-modal__next:hover {
    background: rgba(255, 255, 255, 0.3);
}

.photo-modal__counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    background: rgba(0, 0, 0, 0.5);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
}

/* Мобильные стили */
@media (max-width: 768px) {
    .photo-modal__prev,
    .photo-modal__next {
        display: none; /* Скрываем кнопки на мобильных, используем свайп */
    }
    
    .photo-modal__container {
        padding: 10px;
    }
    
    .photo-modal__close {
        top: 10px;
        right: 10px;
    }
}


.about-photo {
  max-width: 450px; /* ограничили максимальную ширину */
}









/* ==================== EDIT MODAL ================================== */
.edit-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
}

.edit-modal.show {
  display: flex;
}

.edit-modal__overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  cursor: pointer;
}

.edit-modal__content {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  max-width: 500px;
  width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 10000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  cursor: default;
}

.edit-modal__content h3 {
  margin: 0 0 1.5rem 0;
  font: 20px/1.2 "Geometria", sans-serif;
  letter-spacing: 1px;
  color: #000;
  font-weight: 500;
}

.edit-field {
  margin-bottom: 1.5rem;
}

.edit-field label {
  display: block;
  font: 13px/1 "Geometria", sans-serif;
  letter-spacing: 1px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 500;
}

.edit-field input,
.edit-field select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  background: #fff;
  color: #333;
  transition: all 0.3s ease;
}

.edit-field input:focus,
.edit-field select:focus {
  outline: none;
  border-color: #000;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.edit-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #f0f0f0;
}

.btn-cancel,
.btn-save {
  padding: 14px 28px;
  border: 2px solid #000;
  border-radius: 6px;
  font-family: "Geometria", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.btn-cancel {
  background: #fff;
  color: #000;
}

.btn-cancel:hover {
  background: #000;
  color: #fff;
  transform: translateY(-1px);
}

.btn-save {
  background: #000;
  color: #fff;
}

.btn-save:hover {
  background: #333;
  transform: translateY(-1px);
}


/* ==================== EDIT MODE STYLES ========================= */
.edit-info {
    background: #e7f3ff;
    border: 1px solid #b3d9ff;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 2rem;
}

.edit-info p {
    margin: 0.5rem 0;
    font-size: 14px;
}

.edit-info a {
    color: #0073aa;
    text-decoration: none;
}

.edit-info a:hover {
    text-decoration: underline;
}

/* Existing photos grid */
.existing-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.existing-photo-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.existing-photo-item:hover {
    transform: translateY(-2px);
}

.existing-photo-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.existing-photo-overlay {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.existing-photo-item:hover .existing-photo-overlay {
    opacity: 1;
}

.btn-delete-photo {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(220, 53, 69, 0.9);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.btn-delete-photo:hover {
    background: #dc3545;
}

.existing-photo-name {
    padding: 0.5rem;
    font-size: 12px;
    color: #666;
    background: #f8f9fa;
    text-align: center;
    word-break: break-all;
}

.client-form__btn-secondary {
    padding: 14px 28px;
    background: #6c757d;
    color: #fff;
    border: 2px solid #6c757d;
    border-radius: 8px;
    font: 12px/1 "Geometria", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
}

.client-form__btn-secondary:hover {
    background: #5a6268;
    border-color: #5a6268;
    color: #fff;
    transform: translateY(-2px);
}

/* Readonly field styling */
input[readonly] {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
}

/* Action buttons spacing */
.client-form__actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .existing-photos-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 0.75rem;
    }
    
    .existing-photo-item img {
        height: 120px;
    }
    
    .client-form__actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .client-form__btn-secondary,
    .client-form__btn-primary {
        text-align: center;
    }
}

/* ==================== EDIT CLIENT PAGE STYLES =================== */
.edit-info {
    background: #e7f3ff;
    border: 1px solid #b3d9ff;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 2rem;
}

.edit-info p {
    margin: 0.5rem 0;
    font-size: 14px;
}

.edit-info a {
    color: #0073aa;
    text-decoration: none;
}

.edit-info a:hover {
    text-decoration: underline;
}

.existing-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.existing-photo-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.existing-photo-item:hover {
    transform: translateY(-2px);
}

.existing-photo-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.existing-photo-overlay {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.existing-photo-item:hover .existing-photo-overlay {
    opacity: 1;
}

.btn-delete-photo {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(220, 53, 69, 0.9);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.btn-delete-photo:hover {
    background: #dc3545;
}

.existing-photo-name {
    padding: 0.5rem;
    font-size: 12px;
    color: #666;
    background: #f8f9fa;
    text-align: center;
    word-break: break-all;
}

.client-form__btn-secondary {
    padding: 14px 28px;
    background: #6c757d;
    color: #fff;
    border: 2px solid #6c757d;
    border-radius: 8px;
    font: 12px/1 "Geometria", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
}

.client-form__btn-secondary:hover {
    background: #5a6268;
    border-color: #5a6268;
    color: #fff;
    transform: translateY(-2px);
}

input[readonly] {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
}

.client-form__actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .existing-photos-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 0.75rem;
    }
    
    .existing-photo-item img {
        height: 120px;
    }
    
    .client-form__actions {
        flex-direction: column;
        align-items: stretch;
    }
}


/* Стили для поля страницы клиента */
.client-link-input-group {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.client-link-prefix {
    background: #f0f8ff;
    color: #0066cc;
    padding: 8px 12px;
    font-size: 12px;
    border-right: 1px solid #ddd;
    white-space: nowrap;
    font-family: monospace;
    font-weight: 500;
}

.client-page-input {
    border: none !important;
    outline: none;
    flex: 1;
    padding: 8px 12px;
    font-size: 14px;
    margin: 0;
    font-family: monospace;
}

.client-page-input:focus {
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.25);
}

.client-page-input::placeholder {
    color: #999;
    font-style: italic;
    font-family: inherit;
}


.about-title--multiline {
    display: inline-block;
    word-spacing: 100vw; /* Принуждает каждое слово на новую строку */
    line-height: 1.1;
}


@media (min-width: 2560px) {
  .about-grid {
    max-width: 1800px; /* увеличиваем максимальную ширину */
    grid-template-columns: 1fr 3fr 3fr; /* делаем центральные колонки шире */
  }
  .about-head {
    font-size: 1.5rem; /* увеличиваем размер шрифта */
    padding: 20px;
  }
  .about-text {
    font-size: 1.25rem; /* увеличиваем размер шрифта */
    line-height: 1.75;
  }
  .about-btn {
    padding: 15px 30px;
    font-size: 1.25rem;
  }
  .about-title {
		font: clamp(24px, 3.5vw, 85px) / 0.9 "Geometria", sans-serif;
  }
	.about-text p {
		font: clamp(14px, 1.2vw, 27px) / 1.7 "Geometria", sans-serif;
	}
	.about-photo {
    max-width: 800px;
}
	.about-photo .photo img {
    width: 830px;
		height: 660px;}
	
	
	.portfolio-preview__container {
    max-width: 2400px;
    margin: 0 auto;
}
	.portfolio-preview__grid {
		    max-width: 1840px;
	}
	.name {
		font-size:25px;}
	.sidebar {
		width:140px;}
	.menu {
		left:140px;}
	.menu a {
		font-size: clamp(12px, 4vw, 24px);}
}



/* Стили для alt тегов в превью фотографий */
.client-preview-item {
    position: relative;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
    background: #fff;
}

.client-preview-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.client-preview-info {
    padding: 1rem;
}

.client-preview-info .filename {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #333;
}

.client-preview-info .filesize {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 0.75rem;
}

.client-preview-alt {
    margin-top: 0.75rem;
}

.client-preview-alt label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #333;
    margin-bottom: 0.25rem;
}

.client-preview-alt input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
}

.client-preview-alt input:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
}

.client-preview-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(220, 53, 69, 0.9);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.client-preview-remove:hover {
    background: #dc3545;
}

/* Стили для существующих фотографий */
.existing-photo-info {
    padding: 0.75rem;
    height: 100%;
    background: #f8f9fa;
}

.existing-photo-name {
    font-size: 12px;
    color: #666;
    margin-bottom: 0.5rem;
    word-break: break-all;
}

.existing-photo-alt {
    margin-top: 0.5rem;
}

.existing-photo-alt label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #333;
    margin-bottom: 0.25rem;
}

.existing-photo-alt input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 12px;
    background: #fff;
}

.existing-photo-alt input:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 1px rgba(0, 115, 170, 0.2);
}

/* Адаптивность */
@media (max-width: 768px) {
    .client-file-preview {
        grid-template-columns: 1fr;
    }
    
    .existing-photos-grid {
        grid-template-columns: 1fr;
    }
}

/* Стили для полей alt текста */
.client-preview-alt,
.existing-photo-alt {
    margin-top: 0.5rem;
}

.client-preview-alt label,
.existing-photo-alt label {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
    font-weight: 500;
}

.client-preview-alt input,
.existing-photo-alt input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    box-sizing: border-box;
}

.client-preview-alt input:focus,
.existing-photo-alt input:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
}

.existing-photo-info {
    padding: 0.5rem;
    background: #f8f9fa;
}

.existing-photo-name {
    font-size: 12px;
    color: #333;
    margin-bottom: 0.5rem;
    font-weight: 500;
}


/* ==================== ALT TEXT EDITING ========================= */
.existing-photo-info {
  padding: 0.75rem;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
}

.existing-photo-name {
  font-size: 12px;
  color: #666;
  margin-bottom: 0.5rem;
  word-break: break-all;
  font-weight: 500;
}

.existing-photo-alt {
  margin-top: 0.5rem;
}

.existing-photo-alt label {
  display: block;
  font-size: 11px;
  color: #495057;
  margin-bottom: 0.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.existing-photo-alt input {
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  background: #fff;
  color: #495057;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.existing-photo-alt input:focus {
  outline: none;
  border-color: #80bdff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.existing-photo-alt input::placeholder {
  color: #6c757d;
  font-style: italic;
}

/* Обновленные стили для элемента фотографии */
.existing-photo-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  background: #fff;
}

.existing-photo-item:hover {
  transform: translateY(-2px);
}

.existing-photo-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

/* Адаптивность */
@media (max-width: 768px) {
  .existing-photo-alt input {
    font-size: 14px;
    padding: 8px 10px;
  }
  
  .existing-photo-alt label {
    font-size: 12px;
  }
}


/* Стили для hCaptcha */
.h-captcha {
    margin: 1rem 0;
    display: flex;
    justify-content: center;
}

.form-field .h-captcha {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #f9f9f9;
}

/* Адаптивность для мобильных */
@media (max-width: 480px) {
    .h-captcha {
        transform: scale(0.85);
        transform-origin: center;
    }
}


.deleted-photo {
    position: relative;
}

.deleted-photo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(220, 53, 69, 0.3);
    z-index: 1;
    pointer-events: none;
}

.deleted-photo .existing-photo-overlay {
    z-index: 2;
}
/* Стили для drag and drop */
.services-list {
    position: relative;
}

.service-item {
    position: relative;
    transition: all 0.3s ease;
    cursor: grab;
    user-select: none;
    margin-bottom: 20px;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.service-item:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.service-item.dragging {
    opacity: 0.5;
    transform: rotate(5deg);
    cursor: grabbing;
    z-index: 1000;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.service-item.drag-over {
    border-color: #007cba;
    background: #f0f8ff;
}

.service-item.drag-placeholder {
    border: 2px dashed #007cba;
    background: #f8f9fa;
    opacity: 0.6;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #007cba;
    font-weight: bold;
}

.service-item.drag-placeholder::after {
    content: "Перетащите сюда";
    font-size: 14px;
}

/* Индикатор порядка */
.service-order-indicator {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #007cba;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    z-index: 10;
}

/* Ручка для перетаскивания */
.drag-handle {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    cursor: grab;
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.service-item:hover .drag-handle {
    opacity: 1;
}

.drag-handle:active {
    cursor: grabbing;
}

.drag-handle::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: #666;
    border-radius: 50%;
    box-shadow: 
        0 4px 0 #666,
        0 8px 0 #666,
        0 12px 0 #666;
}

/* Стили для уведомлений о сортировке */
.sorting-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #007cba;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 10001;
    font-weight: bold;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
}

.sorting-notification.show {
    opacity: 1;
    transform: translateX(0);
}

.sorting-notification.success {
    background: #46b450;
}

.sorting-notification.error {
    background: #d63638;
}

/* Анимация для плавного перемещения */
@keyframes dragMove {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.service-item.drag-moving {
    animation: dragMove 0.3s ease;
}

/* Отключение выделения текста при drag */
.services-list.dragging-active * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .drag-handle {
        width: 30px;
        height: 30px;
        right: 10px;
    }
    
    .service-order-indicator {
        width: 25px;
        height: 25px;
        font-size: 12px;
    }
}


/* Стили для сортировки фотографий */
.photos-sortable {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.photo-item {
    position: relative;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: move;
}

.photo-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.photo-item.dragging {
    opacity: 0.5;
    transform: rotate(2deg);
}

.photo-item--placeholder {
    border: 2px dashed #007cba;
    background: #f0f8ff;
    opacity: 0.7;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}

.placeholder-content {
    color: #007cba;
    font-weight: bold;
    text-align: center;
}

.photo-item__drag-handle {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.photo-item:hover .photo-item__drag-handle {
    opacity: 1;
}

.photo-item__drag-handle:active {
    cursor: grabbing;
}

.photo-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.photo-info {
    padding: 15px;
}

.photo-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
}

.btn-move-up,
.btn-move-down {
    background: #007cba;
    color: white;
    border: none;
    padding: 5px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.btn-move-up:hover,
.btn-move-down:hover {
    background: #005a87;
}

.btn-move-up:disabled,
.btn-move-down:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.btn-edit,
.btn-delete {
    padding: 5px 10px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.2s ease;
}

.btn-edit {
    background: #46b450;
    color: white;
}

.btn-edit:hover {
    background: #4ab866;
}

.btn-delete {
    background: #dc3232;
    color: white;
}

.btn-delete:hover {
    background: #d63638;
}

/* Отзывчивость для мобильных устройств */
@media (max-width: 768px) {
    .photos-sortable {
        grid-template-columns: 1fr;
    }
    
    .photo-item__drag-handle {
        opacity: 1;
    }
    
    .photo-actions {
        gap: 5px;
    }
    
    .btn-move-up,
    .btn-move-down {
        min-width: 32px;
        height: 32px;
    }
}

/* Анимация для smooth перемещения */
.photo-item {
    transition: all 0.3s ease;
}

.photos-sortable.sorting .photo-item {
    transition: transform 0.2s ease;
}

/* Индикатор порядка */
.photo-item::before {
    content: attr(data-order);
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.photo-item:hover::before {
    opacity: 1;
}

.floating-buttons-container {
    position: fixed;
    top: 70%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.floating-button-item {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.floating-button-item:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.floating-button-item a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
}

.floating-button-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.floating-button-item:hover img {
    transform: scale(1.05);
}

.floating-button-tooltip {
    position: absolute;
    right: 75px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.floating-button-tooltip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: rgba(0, 0, 0, 0.8);
}

.floating-button-item:hover .floating-button-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Адаптивность */
@media (max-width: 768px) {
    .floating-buttons-container {
        right: 10px;
    }
    
    .floating-button-item {
        width: 50px;
        height: 50px;
    }
    
    .floating-button-tooltip {
        right: 60px;
        font-size: 12px;
        padding: 6px 8px;
    }
}

@media (max-width: 480px) {
    .floating-buttons-container {
        right: 5px;
    }
    
    .floating-button-item {
        width: 45px;
        height: 45px;
    }
}

.blog-post__cta {
  margin: 40px 0;
  text-align: center;
}

.blog-post__booking-btn {
  display: inline-block;
  padding: 15px 30px;
  background-color: #000;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s;
}

.blog-post__booking-btn:hover {
  background-color: #001;
}
.video-card-container {
    position: fixed;
    width: 120px;
    height: 120px;
    z-index: 1000;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.video-card-container:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
}

/* Позиционирование */
.video-card-bottom-right {
    bottom: 30px;
    right: 30px;
}

.video-card-bottom-left {
    bottom: 30px;
    left: 30px;
}

.video-card-top-right {
    top: 30px;
    right: 30px;
}

.video-card-top-left {
    top: 30px;
    left: 30px;
}

.video-card-preview {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

.video-card-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.video-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 50%;
}

.video-card-container:hover .video-card-overlay {
    opacity: 1;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}

.video-card-container:hover .play-button {
    transform: translate(-50%, -50%) scale(1.1);
}

.video-card-info {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    min-width: 200px;
}

.video-card-container:hover .video-card-info {
    opacity: 1;
    bottom: -50px;
}

.video-card-info h3 {
    margin: 0 0 5px 0;
    font-size: 14px;
    font-weight: 600;
}

.video-card-info p {
    margin: 0;
    font-size: 12px;
    opacity: 0.9;
}

/* Модальное окно */
.video-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    animation: fadeIn 0.3s ease;
}

.video-modal-content {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1200px;
    max-height: 90vh;
}

.video-modal-content video {
    width: 100%;
    height: auto;
    max-height: 90vh;
}

.video-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.video-modal-close:hover {
    color: #ccc;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Адаптивность */
@media (max-width: 768px) {
    .video-card-container {
        width: 80px;
        height: 80px;
    }
    
    .video-card-bottom-right,
    .video-card-bottom-left,
    .video-card-top-right,
    .video-card-top-left {
        bottom: 20px;
        right: 20px;
    }
    
    .play-button svg {
        width: 25px;
        height: 25px;
    }
    
    .video-card-info {
        min-width: 150px;
        padding: 8px 12px;
    }
    
    .video-card-info h3 {
        font-size: 12px;
    }
    
    .video-card-info p {
        font-size: 10px;
    }
}


.privacy-link {
  color: #000;
  text-decoration: underline;
  transition: color 0.3s ease;
}