.st-reviews-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
}
.st-reviews-controls {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
margin-top: 28px;
margin-bottom: 32px;
}
.st-reviews-btn {
width: 46px;
height: 46px;
border-radius: 50%;
border: 1.5px solid #c8cfe0;
background: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
color: #1C2340;
box-shadow: 0 1px 6px rgba(28,35,64,0.07);
padding: 0;
line-height: 1;
}
.st-reviews-btn:hover {
background: #3D9EE3;
border-color: #3D9EE3;
color: #fff;
transform: scale(1.06);
box-shadow: 0 4px 16px rgba(61,158,227,0.28);
}
.st-reviews-btn svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.st-reviews-swiper-wrap {
position: relative;
}
.st-reviews-swiper {
overflow: visible !important;
}
.st-review-card {
background: #ffffff;
border-radius: 14px;
box-shadow: 0 2px 20px rgba(28,35,64,0.08);
padding: 26px 24px 22px;
display: flex;
flex-direction: column;
height: 100%;
transition: box-shadow 0.28s, transform 0.28s;
border: 1px solid rgba(200,207,224,0.5);
cursor: default;
}
.st-review-card:hover {
box-shadow: 0 8px 40px rgba(28,35,64,0.13);
transform: translateY(-3px);
border-color: rgba(61,158,227,0.2);
} .st-review-author {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.st-review-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, #dae9f8 0%, #b5d4f0 100%);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 20px;
color: #2a7fc0;
flex-shrink: 0;
border: 2.5px solid #eef0f5;
text-transform: uppercase;
}
.st-review-avatar:has(img){
box-shadow: unset;
border: unset;
}
.st-review-avatar img {
width: 100%;
height: 100%;
object-fit: contain;
}
.st-review-author-info { flex: 1; min-width: 0; }
.st-review-name {
font-weight: 700;
font-size: 14.5px;
color: #1C2340;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.st-review-date {
font-size: 12.5px;
color: #8a93a8;
margin-top: 2px;
font-weight: 500;
}
.st-review-stars {
display: flex;
gap: 3px;
margin-bottom: 12px;
}
.st-review-stars svg {
width: 16px;
height: 16px;
}
.st-review-text {
font-size: 14px;
line-height: 1.7;
color: #4a5168;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
.st-review-read-more {
display: inline-block;
margin-top: 10px;
color: #3D9EE3;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: color 0.18s;
background: none;
border: none;
padding: 0;
font-family: inherit;
text-align: left;
}
.st-review-read-more:hover { color: #2a7fc0; }
.st-reviews-swiper .swiper-pagination {
position: relative !important;
margin-top: 32px;
bottom: auto !important;
}
.st-reviews-swiper .swiper-pagination-bullet {
width: 7px;
height: 7px;
background: #c0c8dc;
opacity: 1;
transition: all 0.25s;
}
.st-reviews-swiper .swiper-pagination-bullet-active {
background: #3D9EE3;
width: 22px;
border-radius: 4px;
}
.st-reviews-swiper .swiper-slide { transition: opacity 0.3s;
height: auto;
}
.st-reviews-swiper .swiper-slide-active,
.st-reviews-swiper .swiper-slide-next,
.st-reviews-swiper .swiper-slide-prev {
opacity: 1;
} .st-modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(20,26,50,0.5);
backdrop-filter: blur(5px);
z-index: 99999;
align-items: center;
justify-content: center;
padding: 20px;
}
.st-modal-overlay.is-active { display: flex; }
.st-modal-box {
background: #fff;
border-radius: 18px;
padding: 34px 30px 30px;
max-width: 520px;
width: 100%;
box-shadow: 0 20px 70px rgba(20,26,50,0.22);
position: relative;
animation: stModalIn 0.26s cubic-bezier(.34,1.36,.64,1) both;
}
@keyframes stModalIn {
from { opacity: 0; transform: translateY(18px) scale(0.97); }
to   { opacity: 1; transform: translateY(0) scale(1); }
}
.st-modal-close {
position: absolute;
top: 14px;
right: 14px;
width: 34px;
height: 34px;
border-radius: 50%;
border: none;
background: #eef1f8;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #1C2340;
transition: background 0.18s;
padding: 0;
line-height: 1;
}
.st-modal-close:hover { background: #dde3f0; }
.st-modal-author {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.st-modal-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, #dae9f8 0%, #b5d4f0 100%);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 20px;
color: #2a7fc0;
flex-shrink: 0;
text-transform: uppercase;
}
.st-modal-name {
font-weight: 700;
font-size: 15.5px;
color: #1C2340;
}
.st-modal-date {
font-size: 13px;
color: #8a93a8;
margin-top: 2px;
}
.st-modal-stars {
display: flex;
gap: 3px;
margin-bottom: 14px;
}
.st-modal-stars svg { width: 16px; height: 16px; }
.st-modal-text {
font-size: 14.5px;
line-height: 1.75;
color: #4a5168;
max-height: 300px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #c8d0e0 transparent;
white-space: pre-line;
}
@media (max-width: 1024px) {
.st-reviews-container { padding: 0 24px; }
.st-reviews-swiper-wrap::after { right: -24px; }
}
@media (max-width: 768px) {
.st-reviews-section { padding: 52px 0 60px; }
.st-reviews-controls { margin-top: 20px; margin-bottom: 24px; }
.st-review-card { padding: 20px 18px 18px; }
.st-modal-box { padding: 28px 22px 24px; }
}
@media (max-width: 480px) {
.st-reviews-section { padding: 36px 0 44px; }
.st-reviews-container { padding: 0 16px; }
.st-reviews-swiper-wrap::after { display: none; }
.st-reviews-btn { width: 40px; height: 40px; }
}