:root {
  --color-green: #cffb34;
  --color-blue: #00d1ff;
  --color-yellou: #ff8900;
  
}
.tabs-container { 
  margin: 0 auto;
  overflow: hidden;
}

.tabs-header {
  display: flex;
  overflow:hidden;
  gap:20px; flex-wrap:wrap;
}

.tab-btn {
  flex: 1;
  padding: 14px 20px;
  border: none;
  background: #333333;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  transition: all 0.3s ease;
  border-radius: 38px;
  white-space: nowrap;
}

.tab-btn.active {
  color:#000;
}
.tab-blue.active {background:var(--color-blue); }
.tab-green.active {background:var(--color-green);}
.tab-yellou.active {background:var(--color-yellou);}

.tabs-content {
  padding: 20px 0 0 0;
   user-select: none; /* Стандартное свойство */
  -webkit-user-select: none; /* Для Safari и старых браузеров */
  -moz-user-select: none; /* Для Firefox */
  -ms-user-select: none; /* Для старых версий IE/Edge */
}

.tabs-mini {display:flex; flex-direction:column; gap:20px;}
.tabs-mini .tabs-content {padding: 0px 0 0 0;}
.tabs-mini .tabs-header {gap:10px; }
.tabs-mini .tab-btn {
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 38px;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.embla {
max-width: 100%;
margin: auto;
--slide-height: auto;
--slide-spacing: 24px;
--slide-size: 20%;
}
.embla__viewport {
overflow: hidden;
}
.embla__container {
display: flex;
touch-action: pan-y pinch-zoom;
margin-left: calc(var(--slide-spacing) * -1);
justify-content:start;
}
.embla__slide {
transform: translate3d(0, 0, 0);
flex: 0 0 var(--slide-size);
min-width: 0;
padding-left: var(--slide-spacing);

}

.embla__slide__number .cont h4 {
font-size:16px;
}
.embla__controls {
display:flex;
justify-content: space-between;
margin-top: 30px;
}
.embla__buttons {
display:flex;
align-items: center;
gap:20px;
}
.embla__button {
font-size:34px;
color:#8c8c8c;
cursor:pointer;
display:flex;
background:#333333;
border-radius:50%;
cursor:pointer;
width:50px; height:50px;
align-items:center;justify-content:center;
}
.embla__button:disabled {
color: var(--detail-high-contrast);
}

.embla__dots {
display: flex;
align-items: center;
gap:10px;
}
.embla__dot {
-webkit-appearance: none;
appearance: none;
touch-action: manipulation;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.embla__dot:after {
width: 8px;
height: 8px;
border-radius: 50%;
content: '';
background: #535353;
}
.tabs-blue .embla__dot--selected:after {
background: var(--color-blue);
}
.tabs-green .embla__dot--selected:after {
background: var(--color-green);
}
.tabs-yellou .embla__dot--selected:after {
background: var(--color-yellou);
}

.category-title {
transition: opacity 0.3s ease;
text-align:center;
font-size:28px;
opacity:0; 
margin-bottom:20px;
color:#cffb34;
}

.is-snapped .category-title {
opacity:1;


}
.embla__slide .dop {
text-align:center;
margin-top:10px;
padding:20px;
border-radius:40px;
color:#ffffff;
cursor:pointer;
display:flex;
justify-content:center;
gap:20px;
align-items:center;
font-size:18px;
background-color: #333333; /* Исходный цвет */
transition: background-color 0.9s ease, color 0.9s ease;
}
.is-snapped .dop {
background-color:#cffb34;
color:#000;
}
.embla__slide .dop h4 {
font-weight:500;
}
.embla__slide .dop i {
font-size:22px;
}

/*******************************/



.embla__slide__number {
display: flex;
align-items:start;
justify-content: start;
height: auto;
border:0;
overflow:hidden;
flex-direction:column;
gap:10px;
text-align:center;
padding:6px 10px 10px 10px;
position:relative;
background:#333333;
border-radius:36px;
}
.tabs-blue .embla__slide__number {
  border:0px solid #00d1ff7a;
}
.tabs-green .embla__slide__number {
  border:0px solid #cffb3461;
}
.embla__slide__number a {
  text-decoration:none;
}
.tabs-yellou .embla__slide__number {
  border:0px solid #ff890085;
}
.embla__slide__number img {
width:100%;
position:relative;
margin-top:6px; border-radius:26px;


}
.embla__slide__number .cont {
padding:0;
position:relative;
display: block;
}

.embla__slide__number .cont h4 {
margin-top:6px;
}
.embla__slide__number .cont h4 span {margin-left:10px; color:#fff; font-size:14px;}
.embla__slide__number .cont p {
  display: -webkit-box;
  -webkit-line-clamp: 4;    /* Количество строк */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tabs-blue .cont h4 {
  color:var(--color-blue);
}
.tabs-green .cont h4 {
  color:var(--color-green);
}
.tabs-yellou .cont h4 {
  color:var(--color-yellou);
}
.dop {
display:none !important;
}

.fancybox__caption {
margin: 0 auto !important;
width:400px !important;
text-align:center;
}

@media (max-width: 1000px) {
.embla {--slide-size: 40%;}
.tabs-header {flex-direction:column; gap:14px;}
.tabs-mini .tabs-header {flex-direction:row; gap:10px;}  
.tab-btn {padding: 14px 20px;}
.tabs-mini .tab-btn {padding: 8px 10px; font-size:14px;}
}

@media (max-width: 640px) {
.embla {--slide-size: 60%;}
.embla__slide__number .cont h4 {font-size:16px;}  
.embla__dots {display:none;}
.embla__controls {justify-content:center;}
  .embla__slide__number {padding:0px 5px 10px 5px; border-radius:30px;}
}