.reviews-wrap{--gap:16px; --card-w:340px; --radius:16px; --shadow:0 6px 18px rgba(0,0,0,.07);}
.reviews-head{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:12px; flex-wrap:wrap}
.tabs{display:flex; gap:8px; flex-wrap:wrap}
.tab{border:1px solid #e6e8ee; background:#fff; padding:10px 14px; border-radius:999px; cursor:pointer; font-weight:600}
.tab.is-active{background:#0ea5e9; border-color:#0ea5e9; color:#fff}
.ico{display:inline-block; width:18px; height:18px; vertical-align:-4px; margin-right:6px; border-radius:3px}
.ico.g{background:#4285f4; box-shadow: inset 0 0 0 2px rgba(255,255,255,.9)}
.ico.f{background:#1877f2}
.ico.j{background:#0f766e}
.review-cta{margin-left:auto}
.dropdown{position:relative}
.btn-leave{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; border:1px solid #e6e8ee; background:#fff; font-weight:700; cursor:pointer}
.dropdown .menu{position:absolute; top:calc(100% + 8px); right:0; width:200px; background:#fff; border:1px solid #e6e8ee; border-radius:12px; box-shadow:var(--shadow); padding:6px; display:none; z-index:5}
.dropdown.open .menu{display:block}
.menu .item{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; text-decoration:none; color:#111}
.menu .item:hover{background:#f5f7fb}

.carousel{position:relative; display:flex; align-items:center; gap:10px}
.track{display:grid; grid-auto-flow:column; grid-auto-columns:var(--card-w); gap:var(--gap); overflow:auto; scroll-snap-type:x mandatory; padding-bottom:6px}
.track::-webkit-scrollbar{height:10px}
.track::-webkit-scrollbar-thumb{background:#dbe1ea; border-radius:999px}
.card{scroll-snap-align:start; display:flex; gap:12px; background:#fff; border:1px solid #eef0f5; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
.avatar{flex:0 0 44px; height:44px; width:44px; border-radius:50%; background:#eef2ff; display:flex; align-items:center; justify-content:center; font-weight:800}
.meta .name{font-weight:700}
.meta .src{font-size:12px; color:#6b7280; margin-top:2px}
.stars{color:#f59e0b; margin:6px 0}
.nav{border:0; background:#fff;box-shadow:var(--shadow); place-items:center; cursor:pointer}
.nav svg path{fill:none; stroke:#0f172a; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
@media (max-width: 768px){
  .reviews-wrap{--card-w:82vw}
}
.review-cta {
  position: relative;
  display: inline-block;
}

.btn-leave {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}
.btn-leave:hover {
  background: #f4f7fb;
}
.review-summary {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.summary-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  background: #ffffff;
  border: 1px solid #e5e9f2;
  box-shadow: 0 6px 14px rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 24px 36px;
  width: 80%;
  max-width: 900px;
}

.summary-card h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
}

.summary-card .bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #475569;
}

.bar span {
  width: 12px;
  text-align: right;
  font-size: 13px;
}

.line {
  background: #f1f5f9;
  height: 8px;
  width: 180px;
  border-radius: 10px;
  overflow: hidden;
}

.fill {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 10px;
}

.right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.rating strong {
  font-size: 36px;
  font-weight: 800;
  color: #111827;
}

.stars {
  color: #fbbf24;
  font-size: 20px;
  letter-spacing: 2px;
}

.count {
  color: #475569;
  font-weight: 500;
  margin: 4px 0;
}
.btn-review {
  margin-top: 6px;
  background: #0ea5e9;
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .25s ease;
}

.btn-review:hover {
  background: #0284c7;
}

@media (max-width:768px){
  .summary-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
  }
  .right {
    align-items: flex-start;
  }
  .col-lg-3.col-md-3.col-sm-6.col-xs-12 {
    width: 50% !important;
    padding: 1px;
}
  
}