/*!
Theme Name: UnityLex
Theme URI: https://github.com/Jeyzik
Author: Jeyzik
Author URI: https://github.com/Jeyzik
Description: UnityLex
Version: 1.0.0
Requires PHP: 8.1
Requires MySQL: 8.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: UnityLex
Tags: custom-logo, carbon-fields, e-commerce, multi language

This theme, like WordPress, is licensed under the GPL.

*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

Here is where you can add your own CSS to the starter theme.

--------------------------------------------------------------*/


.swiper-button-next,
.swiper-button-prev {
  cursor: pointer;
}

.our-advocate img {
  max-height: 413px;
  max-width: 310px;
  width: 100%;
  object-fit: cover;
}

@media (max-width: 500px) {
  .our-advocate img {
    max-height: 213px;
    object-position: top;
  }
}

header {
  top: 0;
}

/* Hero Video Responsive Styles */
.hero-video {
  position: relative;
}

.hero-video .desktop-video,
.hero-video .mobile-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

/* Desktop: показываем десктопное видео, скрываем мобильное */
@media (min-width: 769px) {
  .hero-video .desktop-video {
    display: block;
    opacity: 1;
  }

  .hero-video .mobile-video {
    display: none;
    opacity: 0;
  }
}

/* Mobile: показываем мобильное видео, скрываем десктопное */
@media (max-width: 768px) {
  .hero-video .desktop-video {
    display: none;
    opacity: 0;
  }

  .hero-video .mobile-video {
    display: block;
    opacity: 1;
  }
}

.hero .hero-video {
  min-width: auto !important;
}
/* Fallback для старых браузеров без поддержки медиа-запросов */
.no-mediaqueries .hero-video .mobile-video {
  display: none;
}

.no-mediaqueries .hero-video .desktop-video {
  display: block;
}

/* Modal Video Responsive Styles */
.modal-video-yt .modal-video {
  display: none;
  width: 100%;
  height: 100%;
}

.modal-video-yt .modal-video.active {
  display: block !important;
}

/* Desktop: показываем десктопное видео по умолчанию */
@media (min-width: 769px) {
  .modal-video-yt .desktop-modal-video {
    display: block;
  }

  .modal-video-yt .mobile-modal-video {
    display: none;
  }
}

/* Mobile: показываем мобильное видео по умолчанию */
@media (max-width: 768px) {
  .modal-video-yt .desktop-modal-video {
    display: none;
  }

  .modal-video-yt .mobile-modal-video {
    display: block;
  }
}

/* Дополнительные стили для плавности переходов */
.hero-video video {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Modal Video Responsive Styles */
.modal-video-yt .modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
}

.modal-video.desktop-modal-video,
.modal-video.mobile-modal-video {
  position: relative;
  width: 100%;
  height: 100%;
}

/* По умолчанию скрываем все модальные видео */
.modal-video.desktop-modal-video,
.modal-video.mobile-modal-video {
  display: none;
}

/* Desktop: показываем PC видео, скрываем мобильное */
@media (min-width: 769px) {
  .modal-video.desktop-modal-video {
    display: block !important;
  }

  .modal-video.mobile-modal-video {
    display: none !important;
  }
}

/* Mobile: показываем мобильное видео, скрываем PC */
@media (max-width: 768px) {
  .modal-video.desktop-modal-video {
    display: none !important;
  }

  .modal-video.mobile-modal-video {
    display: block !important;
  }

  .modal-video-yt .modal-content {
    max-width: 95vw;
    max-height: 80vh;
  }

  .modal-video.mobile-modal-video {
    min-height: 250px !important;
  }
}

/* Fallback для старых браузеров - показываем только PC версию */
.no-mediaqueries .modal-video.mobile-modal-video {
  display: none !important;
}

.no-mediaqueries .modal-video.desktop-modal-video {
  display: block !important;
}

/* Дополнительное правило для принудительной остановки скрытых видео */
@media (max-width: 768px) {
  .modal-video.desktop-modal-video {
    visibility: hidden;
    pointer-events: none;
  }

  .modal-video.mobile-modal-video {
    visibility: visible;
    pointer-events: auto;
  }
}

@media (min-width: 769px) {
  .modal-video.mobile-modal-video {
    visibility: hidden;
    pointer-events: none;
  }

  .modal-video.desktop-modal-video {
    visibility: visible;
    pointer-events: auto;
  }
}

/* Стили для no-video-message */
.no-video-message {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  background-color: #f5f5f5;
  color: #666;
  font-size: 16px;
}

body.single-news {
  margin: 0 !important;
  padding: 0 !important;
}
.modal [data-modal-closer] {
  z-index: 3;
}

.news-container a img{
	max-height: 300px;
	object-fit: cover;
}

.hero:after{
	position: absolute;
	content: '';
	height: 100%;
	width: 100%;
	background: #191d2aa8;
	z-index: 1;
}

.rewards .holder .swiper .swiper-wrapper .swiper-slide img{
max-height: 300px;
}

.our-advocate img{
	height: 100%;
}
.swiper-backface-hidden .swiper-slide{
height: auto;}


.find-us .holder .video .video-modal-container img{
	max-height: 480px;
    width: 400px;
    object-fit: cover;
}

@media (max-width: 769px) {
	.find-us .holder .video .video-modal-container img{
		max-height: 400px;
	}
}

.services .holder .content .block h3.title span,
.review .holder .swiper .navigate h3.title span{
	    text-transform: capitalize;
}


@media (max-width: 500px) {
    .quotes .holder .wrapper .swiper .swiper-wrapper .swiper-slide .person .person-wrapper img {
            object-position: center 44%!important;
    }
}
.review .holder .swiper .swiper-wrapper .swiper-slide .preson-details .person img{
object-fit: cover;
}

/* Стили для просмотров и лайков */
.single-blog .info {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.single-blog .info .date,
.single-blog .info .views,
.single-blog .info .likes {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #666;
}

/* Иконки */
.views-icon,
.like-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.views-icon {
    color: #666;
}

/* Стили кнопки лайка */
.like-button {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    transition: all 0.3s ease;
    font-size: 14px;
    color: #666;
}

.like-button:hover {
    background: rgba(255, 92, 92, 0.1);
}

.like-button:hover .like-icon {
    color: #ff5c5c;
    transform: scale(1.1);
}

/* Активный (залайканный) стиль */
.like-button.liked {
    color: #ff5c5c;
}

.like-button.liked .like-icon {
    color: #ff5c5c;
}

/* Анимация при клике */
.like-button:active .like-icon {
    transform: scale(0.9);
}

.like-button.liked:active .like-icon {
    animation: heartBeat 0.6s ease;
}

/* Анимация сердечка */
@keyframes heartBeat {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.3);
    }
    50% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(1.25);
    }
    100% {
        transform: scale(1);
    }
}

/* Состояние disabled */
.like-button:disabled {
    cursor: not-allowed;
}

/* Адаптив */
@media (max-width: 768px) {
    .single-blog .info {
        gap: 15px;
    }
    
    .single-blog .info .date,
    .single-blog .info .views,
    .single-blog .info .likes {
        font-size: 13px;
    }
    
    .views-icon,
    .like-icon {
        width: 18px;
        height: 18px;
    }
}


.containt-all{
display: flex;
	gap: 8px;
}


table {
	    margin: 12px auto;
    max-width: 770px;
	border-collapse: collapse;
}
 th, td {
    border: 1px solid #dadada; 
    padding: 5px; 
  }

  th {
    text-align: center; 
    background-color: #f9f9f9; 
  }

  td {
    text-align: left; 
  }

    th, td {
      padding: 4px; 
    }


	#smmix-article h1 {
	font-weight: bold;
	font-size: 24px;
	margin-bottom: 10px;
	margin-top: 20px;
  }
  #smmix-article h2 {
	font-weight: bold;
	font-size: 23px;
	margin-bottom: 10px;
	margin-top: 20px;
  }
  #smmix-article h3 {
	font-weight: bold;
	font-size: 22px;
	margin-bottom: 10px;
	margin-top: 20px;
  }
  #smmix-article h4 {
	font-weight: bold;
	font-size: 21px;
	margin-bottom: 10px;
	margin-top: 20px;
  }
  #smmix-article h5 {
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 10px;
	margin-top: 20px;
  }
  #smmix-article h6 {
	font-weight: bold;
	font-size: 19px;
	margin-bottom: 10px;
	margin-top: 20px;
  }
  #smmix-article p {
	font-size: 17px;
	margin-bottom: 10px;
	margin-top: 20px;
	line-height: 20px;
  }
  #smmix-article a {
	text-decoration: underline;
	line-height: 20px;
  }
  #smmix-article a:hover {
	text-decoration: none;
  }
  #smmix-article ol,
  #smmix-article ul {
	margin-bottom: 10px;
	font-size: 17px;
	line-height: 20px;
  }
  #smmix-article ol li {
	list-style-type: decimal;
	  margin-bottom: 7px;
  }

 #smmix-article  li {
	  margin-bottom: 12px;
  }
  #smmix-article ul li {
	list-style-type: disc;
  }