/* --- BASE STYLES --- */
:root { --blueColor:#4059AC; --yellowColor:#F4B941; }
.sectionTitle { color: #4059AC; font-weight: 500; text-align: left; }
.therapy-animals { height: auto; overflow: visible; }

/* Tabs */
.therapy-animalsTabs { overflow-x: auto; }
.therapy-animalsTabs::-webkit-scrollbar { width: 7px; height: 3px; background-color: #aaa; }
.therapy-animalsTabs::-webkit-scrollbar-thumb { background-color: #000; border-radius: 5px; }
.therapy-animalsTabs ul { list-style-type: none; padding: 0; display: flex; margin-bottom: 20px; width: max-content; }
.therapy-animalsTabs ul li { margin-right: 15px; flex-shrink: 0; }
.therapy-animalsTabs ul li a.city-tab { display: inline-block; text-decoration: none; color: #aaa; font-size: 20px; font-weight: 400; padding: 5px; border-bottom: 2px solid transparent; transition: color 0.3s ease, border-bottom-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease; opacity: 0.8; }
.therapy-animalsTabs ul li a.city-tab.active-tab,
.therapy-animalsTabs ul li a.city-tab:hover { color: #f6b736; border-bottom-color: #f6b736; opacity: 1; }
.therapy-animalsTabs ul li a.city-tab:hover { transform: scale(1.05); }

/* Slider Container */
.animal-circles {
    position: relative;
    margin: 0 auto;
    transition: opacity 1s ease, transform 1s ease;
    overflow: hidden; /* Clip scaled images */
}

.therapySwiper { overflow: visible !important; }

.therapySwiper .swiper-wrapper {
    align-items: center; /* Vertically center slides */
    padding-top: 80px !important;
    box-sizing: content-box;
}

.therapySwiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: visible;
    height: auto !important;
    position: relative;
    transition: transform 0.4s ease;
}

.therapyBox {
    aspect-ratio: 1;
    position: relative;
    text-align: center;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin: 0 auto;
    z-index: 1;
    transition: transform 0.3s ease;
}

.therapyImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    display: block;
    transition: filter 0.3s ease;
}

/* --- ANIMAL NAME BELOW IMAGE --- */
.therapy-animal-name {
    position: static;          /* keep below image */
    margin-top: 10px;          /* space below image */
    font-size: 24px;           /* default size */
    font-weight: bold;
    color: #f3b500;
    letter-spacing: 0.02rem;
    text-align: center;
    opacity: 0;                /* hide by default */
    visibility: hidden;        /* hide by default */
    transform: none;
    transition: opacity 0.3s ease;
    pointer-events: auto;
}

/* Show only center (active) slide name */
.therapySwiper .swiper-slide-active .therapy-animal-name {
    opacity: 1;
    visibility: visible;
}

/* --- SWIPER SLIDE STATES --- */
.therapySwiper .swiper-slide-active {
    z-index: 3;
    transform: translateY(-20px);
}

.therapySwiper .swiper-slide-next { z-index: 2; }
.therapySwiper .swiper-slide-prev { z-index: 2; }

.therapySwiper .swiper-slide-active .therapyBox {
     transform: scale(1.1);
}

.therapySwiper .swiper-slide-active .therapyBox .therapyImg {
    filter: grayscale(0) brightness(100%);
}

.therapySwiper .swiper-slide-next .therapyBox,
.therapySwiper .swiper-slide-prev .therapyBox {
     transform: scale(0.8);
}

.therapySwiper .swiper-slide-next .therapyBox .therapyImg,
.therapySwiper .swiper-slide-prev .therapyBox .therapyImg {
    filter: grayscale(50%) brightness(80%);
}

/* Hover effect for active slide */
.therapySwiper .swiper-slide-active .therapyBox:hover {
    transform: scale(1.12);
}

.therapySwiper .swiper-slide-active .therapyBox:hover .therapyImg {
    filter: grayscale(0) brightness(110%);
}

/* --- MEDIA QUERIES --- */
@media (min-width: 560px) {
    .therapy-animalsTabs ul li a.city-tab { font-size: 22px; }
    .therapy-animal-name { font-size: 28px; }
    .therapySwiper .swiper-wrapper { padding-bottom: 90px !important; padding-top: 55px !important; }
    .therapySwiper .swiper-slide-active { transform: translateY(-25px); }
    .therapySwiper .swiper-slide-active .therapy-animal-name { font-size: 40px; }
}

@media (min-width: 768px) {
    .therapy-animal-name { font-size: 32px; }
    .therapySwiper .swiper-wrapper { padding-bottom: 100px !important; padding-top: 60px !important; }
    .therapySwiper .swiper-slide-active { transform: translateY(-30px); }
    .therapySwiper .swiper-slide-active .therapy-animal-name { font-size: 44px; }
}

@media (min-width: 1024px) {
    .therapy-animalsTabs ul li a.city-tab { font-size: 26px; }
    .therapy-animal-name { font-size: 36px; }
    .therapySwiper .swiper-wrapper { padding-bottom: 110px !important; padding-top: 65px !important; }
    .therapySwiper .swiper-slide-active { transform: translateY(-35px); }
    .therapySwiper .swiper-slide-active .therapyBox { transform: scale(1.15); }
    .therapySwiper .swiper-slide-next .therapyBox,
    .therapySwiper .swiper-slide-prev .therapyBox { transform: scale(0.85); }
    .therapySwiper .swiper-slide-active .therapy-animal-name { font-size: 48px; }
}

@media (min-width: 1440px) {
    .therapy-animal-name { font-size: 40px; }
    .therapySwiper .swiper-wrapper { padding-bottom: 120px !important; padding-top: 70px !important; }
    .therapySwiper .swiper-slide-active { transform: translateY(-40px); }
    .therapySwiper .swiper-slide-active .therapyBox { transform: scale(1.2); }
    .therapySwiper .swiper-slide-next .therapyBox,
    .therapySwiper .swiper-slide-prev .therapyBox { transform: scale(0.9); }
    .therapySwiper .swiper-slide-active .therapy-animal-name { font-size: 52px; }
}