@import "header.css";
@import "footer.css";

.header-logo {
  height: 100px;
  width: auto;
}

.test-header {
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.test-header-mobile {
  display: none;
}

.banner {
  margin-top: -10px;
}

.banner__image {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 20px;
}

.banner__swiper {
  overflow: hidden;
}

.desc-event {
  display: flex;
  flex-direction: column;
  min-height: 274px;
  background-image: url(../img/bg-desc-event.png);
  background-size: cover;
  background-position: center;
  margin-top: 26px;
  grid-gap: 21px;
  box-sizing: border-box;
  padding: 22px 0 0 62px;
  line-height: 33px;
  border-radius: 16px;
  padding: 20px;
}

.desc-event__text {
  max-width: 1200px;
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
}

.desc-event__text-line {
  background-color: var(--color-main_opacity);
  padding: 3px;
}

.desc-event__button-group {
  display: flex;
  grid-gap: 19px;
  font-size: 18px;
  padding-left: 5px;
}

.desc-event__btn {
  border-radius: 16px;
  padding: 12px 24px;
  border: none;
  color: #fff;
  cursor: pointer;
}

.desc-event__btn--partner {
  background-color: var(--color-main);
}

.desc-event__btn--ticket {
  background-color: #fff;
  color: #262626;
}

.slogan-stripe {
  margin: 54px 0;
  background-color: #262626;
  height: 71px;
  overflow: hidden;
  /* Обрезаем лишнее */
  white-space: nowrap;
  /* Текст в одну строку */
  display: flex;
  align-items: center;
  width: 99.6vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.slogan-text-wrapper {
  display: flex;
  animation: scrollText 25s linear infinite;
}

.slogan-text {
  color: #fff;
  font-size: 26px;
  font-style: italic;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0 50px;
}

@keyframes scrollText {
  0% {
    transform: translateX(0);
    /* Начальная позиция */
  }

  100% {
    transform: translateX(-50%);
    /* Прокрутка влево */
  }
}

.fashion-exhibition {
  position: relative;
  margin-bottom: 72px;
}

.fashion-exhibition__title {
  text-transform: uppercase;
  font-size: 32px;
  line-height: 40px;
  margin-bottom: 46px;
}

.fashion-exhibition__title span {
  text-transform: none;
  font-family: "Playfair", serif;
  font-style: italic;
  font-size: 51px;
  font-weight: 900;
}

.fashion-exhibition__text {
  color: #262626;
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
}

.fashion-exhibition__ticket {
  width: clamp(280px, 90vw, 480px);
  height: 210px;
  margin-bottom: 15px;
  border-radius: 16px;
  position: relative;
  z-index: 10;
  overflow: hidden;
}

.fashion-exhibition__ticket p {
  color: #262626;
  font-size: 20px;
  margin: 0;
  padding: 27px 0 0 25px;
  line-height: 27px;
}

.fashion-exhibition__ticket-one,
.fashion-exhibition__ticket-two {
  position: relative;
  background-color: var(--color-pink);
}

.fashion-exhibition__ticket-two {
  height: 215px;
}

.fashion-exhibition__ticket-one::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 120px;
  height: 150px;
  background-image: url("../img/ticket-one.png");
  background-repeat: no-repeat;
}

.fashion-exhibition__ticket-two::before {
  content: "";
  position: absolute;
  bottom: -60px;
  right: -10px;
  width: 120px;
  height: 150px;
  background-image: url(../img/ticket-two.png);
  background-repeat: no-repeat;
}

@media (max-width: 425px) {

  .fashion-exhibition__ticket-one::before,
  .fashion-exhibition__ticket-two::before {
    display: none;
  }

  .fashion-exhibition__ticket-one,
  .fashion-exhibition__ticket-two {
    height: fit-content;
    padding-bottom: 25px;
    padding-right: 10px;
  }
}

.fashion-exhibition__images-1 {
  position: absolute;
  width: 288.27px;
  height: 396.82px;
  transform: rotate(-8deg);
  z-index: 1;
  right: -40px;
  bottom: -17px;
}

.fashion-exhibition__images-2 {
  position: absolute;
  width: 353px;
  height: 453px;
  transform: rotate(12.5deg);
  z-index: 1;
  right: 109px;
  bottom: -6px;
}

.fashion-exhibition__images-3 {
  width: 195px;
  height: 237px;
  transform: rotate(-11.5deg);
  z-index: 1;
  left: 32px;
  bottom: -27px;
  position: absolute;
  border-radius: 20px;
  overflow: hidden;
}

.space-exhibition__slider {
  position: relative;
  height: 100%;
}

.space-exhibition__banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  height: fit-content;
}

.space-exhibition__banner li {
  font-size: 16px;
}

.space-exhibition__banner.active {
  opacity: 1;
  pointer-events: all;
}

.image {
  width: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.fashion-services {
  background-image: url(../img/bg-fashion-service.png);
  background-size: cover;
  background-position: center;
  min-height: 460px;
  border-radius: 16px;
  padding: 30px 0;
}

.wrap-circle_fashion-services {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 35px;
}

.fashion-services__title {
  font-size: 22px;
  text-transform: uppercase;
  padding: 23px 0 0 47px;
}

.fashion-services__img {
  padding: 0 0 0 47px;
}

.fashion-services__comment {
  max-width: 277px;
  font-size: 20px;
  padding: 4px 0 0 47px;
}

.fashion-services__double-border-circle {
  width: clamp(180px, 15vw, 232px);
  height: clamp(180px, 15vw, 232px);
  border-radius: 50%;
  padding: 9px;
  background: #f0f5f9;
  box-shadow: 0 0 0 9px var(--color-main);
  position: relative;
}

.fashion-services__circle-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.fashion-services__circle-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fashion-services__circle-name {
  font-weight: 400;
  font-size: 20px;
  max-width: 282px;
  line-height: 28px;
  text-align: center;
}

video::-webkit-media-controls-picture-in-picture-button {
  display: none !important;
}

/* Скрыть кнопку PiP в Яндекс.Браузере */
video::-webkit-media-controls-picture-in-picture-button {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Также скрыть другие кнопки Яндекса */
video::-webkit-media-controls-overflow-button {
  display: none !important;
}

/* Скрыть все медиа-контролы Яндекса */
video::-webkit-media-controls-enclosure {
  display: none !important;
}

/* Скрыть кнопку паузы в iOS */
video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Скрыть все контролы iOS */
video::-webkit-media-controls-overlay-play-button {
  display: none !important;
}

/* Дополнительно для Safari */
video::-webkit-media-controls-panel {
  display: none !important;
}

/* Отключить тапы по видео в iOS */
video {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Скрыть все элементы управления видео */
video::-webkit-media-controls {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

video::-webkit-media-controls-enclosure {
  display: none !important;
}

/* Для Firefox */
video::-moz-media-controls {
  display: none !important;
}

/* Для других браузеров */
video::-webkit-media-controls-panel,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-timeline-container,
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display,
video::-webkit-media-controls-timeline,
video::-webkit-media-controls-volume-slider-container,
video::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-mute-button,
video::-webkit-media-controls-fullscreen-button,
video::-webkit-media-controls-rewind-button,
video::-webkit-media-controls-return-to-realtime-button,
video::-webkit-media-controls-toggle-closed-captions-button {
  display: none !important;
}

.simple-video-container {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.hover-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transition: opacity 0.3s ease;
}

.video-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-45%, -48%);
  width: 80px;
  height: 80px;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
}

.video-play-button svg {
  width: 50px;
  height: 50px;
  margin-left: 3px;
}

.btn-details__a {
  text-decoration: none;
}

.btn-details {
  display: flex;
  background-color: var(--color-main);
  justify-content: space-between;
  align-items: center;
  padding: 18px 29px;
  border: none;
  grid-gap: 38px;
  border-radius: 16px;
  letter-spacing: 1px;
  color: #fff;
  cursor: pointer;
}

.btn-subscribe {
  display: flex;
  background-color: var(--color-main);
  align-items: center;
  justify-content: center;
  padding: 18px 26px;
  border: none;
  grid-gap: 38px;
  border-radius: 16px;
  letter-spacing: 1px;
  color: #fff;
  margin-top: 14px;
  cursor: pointer;
}

.space-exhibition {
  margin-bottom: 100px;
}

.space-exhibition__title {
  color: #262626;
  text-transform: uppercase;
  font-size: 32px;
}

.space-exhibition__btn-tag {
  padding: 17px 15px;
  background-color: #f0f5f9;
  border-radius: 50px;
  font-size: 14px;
  margin-bottom: 11px;
  margin-right: 5px;
  cursor: pointer;
}

.space-exhibition__btn-tag--primary {
  background-color: #262626;
  color: #fff;
}

.space-exhibition__name {
  font-size: 26px;
  font-weight: bold;
  padding: 35px 0 10px 33px;
  margin: 0;
  max-width: 400px;
}

.space-exhibition__list {
  margin: 0;
  padding-left: 61px;
  padding-bottom: 20px;
}

.space-exhibition__item {
  /*padding-top: 19px;*/
  font-size: 18px;
  line-height: 34px;
  /*max-width: 265px;*/
}

.space-exhibition__warning {
  padding-left: 35px;
  font-style: italic;
}

.space-exhibition__banner {
  background-color: #f0f5f9;
  background-repeat: no-repeat;
  min-height: 378px;
  border-radius: 16px;
}

.space-exhibition__banner-slide-сosmetics {
  /* background-position-x: calc(38% + 300px);
    background-position-Y: 59%; */
  background-position: right;
  background-image: url("/upload/medialibrary/c86/3x5y3w0j0wk2drxkbukc9rqz6prwhsjc/Kosmetika-bez-tsen.png");
}

.space-exhibition__banner-slide-perfumery {
  /* background-position-x: calc(38% + 300px);
    background-position-Y: 59%; */
  background-position: right;
  background-image: url("/upload/medialibrary/a18/yt7q22blxmb73vgkocuf4g0xqqvseeuz/Parfjum-1.png");
}

.space-exhibition__banner-slide-health {
  /* background-position-x: calc(38% + 300px);
    background-position-Y: 59%; */
  background-position: right;
  background-image: url("/upload/medialibrary/515/9vk8odrmxdzvqh19818un9tp7lm82ab8/Industrija-mody-oktjabr_-25-foto-_katya_mozina-0273.png");
}

.space-exhibition__banner-slide-service {
  /* background-position-x: calc(38% + 300px);
    background-position-Y: 59%; */
  background-position: right;
  background-image: url("/upload/medialibrary/a03/uxpuoatvrlgwy6q48zh9t4fjr6ifyx11/image_2025_11_28_16_04_08.png");
}

.space-exhibition__banner-slide-jewelry {
  /* background-position-x: calc(38% + 300px);
    background-position-Y: 59%; */
  background-position: right;
  background-image: url("/upload/medialibrary/f70/bip0v6xi2p975w1im7ib3ipshgwzqhsf/Juvelirka_1_1_.png");
}

.space-exhibition__banner-slide-event {
  /* background-position-x: calc(38% + 300px);
    background-position-Y: 59%; */
  background-position: right;
  background-image: url("/upload/medialibrary/cb6/jjsi7ycnzy9fq94ks7v69zb12u2bttvr/Industrija-mody-oktjabr_-25-foto-_katya_mozina-0885.png");
}

.space-exhibition__accordion {
  display: none;
  width: 100%;
  max-width: 400px;
  margin: 20px auto;
  font-size: 16px;
}

.space-exhibition__accordion-item {
  margin-bottom: 5px;
  border-radius: 4px;
  overflow: hidden;
}

.space-exhibition__accordion-header {
  padding: 29px 15px;
  background-color: #f0f5f9;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 24px;
}

.space-exhibition__accordion-header::after {
  content: url("../img/accordion-arrow-mobile.svg");
  font-size: 12px;
  transition: transform 0.2s;
}

.space-exhibition__accordion-header.active::after {
  transform: rotate(180deg);
}

.space-exhibition__accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  position: relative;
  top: -20px;
}

.space-exhibition__accordion-item-list {
  list-style: none;
  padding: 18px 0 0 16px;
  margin: 0;
  background-color: #f0f5f9;
}

.space-exhibition__accordion-item-list li.selected {
  display: none;
}

.space-exhibition__accordion-item-list li {
  padding: 10px 0;
}

.news__title {
  margin: 0;
  text-transform: uppercase;
  font-size: 32px;
}

.news__desc {
  margin: 17px 0 82px;
  line-height: 28px;
  font-size: 20px;
}

.news__img-one-title {
  font-size: 18px;
  margin: 23px 0 14px;
  line-height: 23px;
}

.news__img-one-title>a {
  color: #262626;
}

.news__img-one-desc {
  max-width: 300px;
  line-height: 22px;
  font-size: 18px;
}

.news__ticket {
  display: block;
}

.news__img-one {
  border-radius: 10px;
  overflow: hidden;
}

.wrap-map img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.map p {
  margin: 0;
}

.map__title--h2 {
  max-width: 300px;
  color: #262626;
  font-size: 32px;
  text-transform: uppercase;
  margin: 7px 0 0 0;
}

.map__title--h4 {
  font-size: 16px;
  margin: 0;
}

.map__location {
  max-width: 320px;
}

.map__location-title {
  margin: 30px 0 6px;
}

.map__location-detail {
  max-width: 320px;
  margin-top: 4px;
  line-height: 21px;
}

.map__time {
  max-width: 320px;
}

.map__time-title {
  margin: 19px 0 4px;
}

.map__time-detail {
  max-width: 220px;
}

.map__transport {}

.map__transport-title {
  margin: 20px 0 7px;
}

.map__transport-detail {
  max-width: 230px;
}

.map__public-transport {}

.map__public-transport-title {
  margin: 21px 0 3px;
  line-height: 21px;
  max-width: 220px;
}

.map__public-transport-detail {
  max-width: 320px;
  line-height: 21px;
}

.brands__title {
  max-width: 100%;
  color: #262626;
  font-size: 22px;
  text-transform: uppercase;
  text-align: center;
}

.brands__logo {
  width: 100%;
  height: fit-content;
}

.brands__logo a {
  display: block;
  width: 100%;
  height: fit-content;
  line-height: 0;
}

.brands__logo img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.brands-list {
  display: flex;
  justify-content: space-between;
}

.brands-list__item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 100px;
}

.brands-mobile__swiper {
  display: none;
}

.prize-partners {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.past-event {
  margin: 0 0 143px;
}

.past-event__title {
  max-width: 300px;
  color: #262626;
  font-size: 32px;
  text-transform: uppercase;
  margin: 20px 0;
}

.past-event-mobile__swiper_new {
  display: block;
  margin-bottom: 20px;
}

.past-event__wrap-photos_new {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.past-event__photo_new {
  display: block;
  width: 260px;
  height: 160px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}

.past-event__photo_new img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.news-mobile__swiper {
  display: none;
}

.home-map {
  width: 100%;
  height: 576px;
  border-radius: 10px;
  overflow: hidden;
}

/*{карты Яндекс стили}*/
[class*="ymaps-2"][class*="-ground-pane"] {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  -webkit-filter: grayscale(100%);
}

.fashion-exhibition__images-1,
.fashion-exhibition__images-2 {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s cubic-bezier(0.33, 0.85, 0.56, 1),
    transform 0.6s cubic-bezier(0.33, 0.85, 0.56, 1);
  border-radius: 20px;
  overflow: hidden;
}

.fashion-exhibition__images-1.animated,
.fashion-exhibition__images-2.animated {
  opacity: 1;
  transform: translateY(0);
}

.subscribe {
  padding: 30px 0;
}


@media(min-width: 1200px) {
  .space-exhibition__tag-cloud {
    flex-direction: column;
  }
}

@media (max-width: 1400px) {
  .past-event__wrap-photos_new {
    justify-content: center;
  }
}

@media (max-width: 1025px) {
  .prize-partners {
    justify-content: center;
  }
}

@media (max-width: 580px) {
  .past-event__wrap-photos_new {
    display: flex;
    gap: 14px;
    flex-wrap: nowrap;
    justify-content: start;
    overflow: scroll;
  }
}

@media (max-width: 500px) {

  /* .banner {
    margin-top: 5px;
  } */
  .banner__image {
    content: url(../img/home/banner-mobile-home.svg);
  }

  .desc-event {
    margin-top: 0;
  }

  .desc-event__text {
    font-size: 17px;
    line-height: 35px;
  }

  .test-header {
    display: none;
  }

  .test-header-mobile {
    display: block;
    margin-bottom: 20px;
    width: 100%;
    height: auto;
    border-radius: 20px;
  }
}

@media (max-width: 425px) {
  .brands-list__item {
    width: 180px;
    height: 90px;
  }

  .space-exhibition {
    margin-top: 18px;
    margin-bottom: 440px !important;
  }
}

@media (max-width: 380px) {
  .space-exhibition {
    margin-top: 18px;
    margin-bottom: 590px !important;
  }
}

.modal-next {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  overflow-y: auto;
}

/* Контент модального окна */
.modal-next .modal-content {
  background-color: #fff;
  margin: 50px auto;
  padding: 30px;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }

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

/* Кнопка закрытия */
.close-button-next {
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 32px;
  font-weight: bold;
  cursor: pointer;
  color: var(--color-main);
  line-height: 1;
  transition: color 0.2s ease;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.close-button-next:hover {
  color: #fff;
  background-color: var(--color-main);
}

/* Ссылка для открытия модального окна */
.transport-link {
  color: var(--color-main);
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s ease;
  display: inline-block;
  padding: 5px 0;
}

.transport-link:hover {
  color: #0056b3;
}

/* Тело модального окна */
.modal-body {
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 10px;
}

/* Стилизация скроллбара */
.modal-body::-webkit-scrollbar {
  width: 6px;
}

.modal-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb {
  background: var(--color-main);
  border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: #0056b3;
}

/* ========== АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ ========== */
@media screen and (max-width: 768px) {
  .modal-next .modal-content {
    margin: 20px auto;
    padding: 20px;
    width: 95%;
  }

  .close-button-next {
    right: 15px;
    top: 8px;
    font-size: 28px;
    width: 35px;
    height: 35px;
  }

  .modal-title {
    font-size: 1.2rem;
    margin-top: 10px;
    padding-right: 30px;
  }

  .modal-body {
    max-height: 60vh;
    font-size: 14px;
  }

  .modal-body p {
    line-height: 1.5;
  }

  .transport-link {
    font-size: 14px;
    padding: 8px 0;
    display: inline-block;
  }
}

/* Для очень маленьких экранов */
@media screen and (max-width: 480px) {
  .modal-next .modal-content {
    margin: 10px auto;
    padding: 15px;
  }

  .modal-body {
    max-height: 70vh;
    font-size: 13px;
  }

  .modal-title {
    font-size: 1.1rem;
  }

  .close-button-next {
    right: 10px;
    top: 5px;
    font-size: 24px;
    width: 30px;
    height: 30px;
  }
}