/* ==============================================================
   COMPONENTS  -  service cards, filters, why-us, reviews, FAQ
   ============================================================== */

/* ======================= SERVICE FILTERS ======================= */
.svc-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:26px;
}

.svc-search { position:relative; flex:1 1 260px; max-width:340px; }
.svc-search svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); }
.svc-search input {
  width:100%; padding:12px 14px 12px 42px;
  border:1.5px solid var(--line); border-radius:var(--r-pill);
  background:var(--white); font-size:14.5px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.svc-search input::placeholder { color:var(--muted); }
.svc-search input:focus {
  outline:none; border-color:var(--blue-400);
  box-shadow:0 0 0 4px rgba(74,159,204,.15);
}

.svc-count { font-size:13.5px; color:var(--muted); font-weight:500; }
.svc-count strong { color:var(--navy-700); }

.filter-scroll { overflow-x:auto; margin-bottom:30px; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
.filter-scroll::-webkit-scrollbar { height:5px; }
.filter-scroll::-webkit-scrollbar-thumb { background:var(--blue-200); border-radius:3px; }

.filter-pills { display:flex; gap:9px; min-width:max-content; padding:2px; }
.filter-pill {
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:10px 18px; border-radius:var(--r-pill);
  border:1.5px solid var(--line); background:var(--white);
  font-size:13.5px; font-weight:600; color:var(--ink-soft);
  transition:all .2s var(--ease);
}
.filter-pill svg { color:var(--blue-400); transition:color .2s var(--ease); }
.filter-pill:hover { border-color:var(--blue-300); color:var(--navy-600); }
.filter-pill.is-active {
  background:var(--navy-700); border-color:var(--navy-700); color:#fff;
  box-shadow:0 6px 16px rgba(26,61,92,.24);
}
.filter-pill.is-active svg { color:var(--gold-500); }
.filter-pill .pill-count {
  background:var(--blue-50); color:var(--navy-600);
  font-size:11px; font-weight:700; padding:1px 7px; border-radius:var(--r-pill);
}
.filter-pill.is-active .pill-count { background:rgba(255,255,255,.18); color:#fff; }

/* ======================= SERVICE GRID ======================= */
.svc-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:24px;
}

.svc-card {
  position:relative; display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.svc-card:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:var(--blue-200); }
.svc-card.is-hidden { display:none; }

.svc-media { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--blue-50); }
.svc-media img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.svc-card:hover .svc-media img { transform:scale(1.07); }
.svc-media::after {
  content:''; position:absolute; inset:auto 0 0 0; height:52%;
  background:linear-gradient(to top,rgba(14,34,51,.5),transparent);
}

.svc-cat {
  position:absolute; left:12px; bottom:11px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.94); color:var(--navy-700);
  font-size:11px; font-weight:700; letter-spacing:.3px;
  padding:5px 11px; border-radius:var(--r-pill);
}
.svc-cat svg { color:var(--green-500); }

.svc-ribbon {
  position:absolute; top:12px; right:12px; z-index:2;
  background:var(--danger); color:#fff;
  font-size:10.5px; font-weight:800; letter-spacing:.4px;
  padding:5px 11px; border-radius:var(--r-pill);
  box-shadow:0 4px 12px rgba(192,57,43,.34);
}

.svc-body { padding:19px 20px 20px; display:flex; flex-direction:column; flex:1; }
.svc-body h3 { font-size:16.5px; margin-bottom:7px; line-height:1.32; }
.svc-body p { font-size:13.2px; color:var(--muted); line-height:1.62; margin-bottom:16px; }

.svc-foot { margin-top:auto; display:flex; flex-direction:column; gap:13px; }
.svc-price { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.svc-mrp { font-size:11px; color:#9AAEBF; }
.svc-mrp s { text-decoration:line-through; }
.svc-from {
  background:var(--green-500); color:#fff;
  font-size:13px; font-weight:700; padding:5px 13px; border-radius:var(--r-sm);
}
.svc-quote {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--blue-50); border:1px solid var(--blue-200); color:var(--navy-600);
  font-size:12.5px; font-weight:700; padding:5px 12px; border-radius:var(--r-sm);
}
.svc-quote svg { color:var(--green-500); }

.svc-actions { display:flex; gap:8px; }
.svc-actions > * {
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:12.5px; font-weight:700; padding:9px 10px; border-radius:var(--r-sm);
  white-space:nowrap; transition:all .2s var(--ease);
}
.svc-quote-btn { border:1.5px solid var(--line); color:var(--ink-soft); background:var(--white); }
.svc-quote-btn:hover { border-color:var(--green-500); color:var(--green-600); background:var(--green-50); }
.svc-book { background:var(--navy-700); color:#fff; border:1.5px solid var(--navy-700); }
.svc-book:hover { background:var(--navy-600); border-color:var(--navy-600); }
.svc-book svg { transition:transform .2s var(--ease); }
.svc-book:hover svg { transform:translateX(3px); }

/* empty state */
.svc-empty {
  display:none; text-align:center; padding:56px 20px;
  background:var(--white); border:1px dashed var(--line); border-radius:var(--r-lg);
}
.svc-empty.is-shown { display:block; }
.svc-empty svg { margin:0 auto 14px; color:var(--blue-300); }
.svc-empty h4 { font-size:17px; margin-bottom:6px; }
.svc-empty p { font-size:14px; color:var(--muted); margin-bottom:18px; }

/* ======================= WHY US ======================= */
.why-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); gap:22px; }
.why-card {
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg); padding:30px 24px; text-align:center;
  transition:background .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.why-card:hover { background:rgba(255,255,255,.1); border-color:rgba(237,177,71,.35); transform:translateY(-5px); }
.why-ico {
  width:56px; height:56px; margin:0 auto 16px; border-radius:16px;
  background:rgba(0,177,89,.16); border:1px solid rgba(0,177,89,.3);
  display:grid; place-items:center; color:var(--green-400);
}
.why-card h4 { color:var(--gold-500); font-size:15.5px; margin-bottom:8px; }
.why-card p { color:rgba(255,255,255,.55); font-size:13.2px; line-height:1.65; }

/* ======================= TESTIMONIALS ======================= */
.rating-pill {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--gold-100); border:1px solid rgba(201,138,12,.24);
  padding:9px 20px; border-radius:var(--r-pill); margin-bottom:14px;
}
.rating-pill .stars { display:flex; gap:2px; color:var(--gold-600); }
.rating-pill span { font-size:13.5px; font-weight:700; color:var(--navy-800); }

.rev-viewport { overflow:hidden; padding:6px 2px 10px; }
.rev-track { display:flex; gap:20px; transition:transform .55s var(--ease); will-change:transform; }

.rev-card {
  flex:0 0 auto; width:320px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 24px; box-shadow:var(--sh-sm); position:relative;
}
.rev-card::before {
  content:'\201C'; position:absolute; top:6px; right:20px;
  font-family:Georgia,serif; font-size:74px; line-height:1; color:var(--blue-100);
}
.rev-top { display:flex; align-items:center; gap:13px; margin-bottom:14px; position:relative; z-index:1; }
.rev-avatar {
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:16px;
}
.av-1 { background:#B03A2E; } .av-2 { background:#1E8449; }
.av-3 { background:#B7770D; } .av-4 { background:#21618C; } .av-5 { background:#6C3483; }
.rev-meta h4 { font-size:15.5px; margin-bottom:1px; }
.rev-meta span { font-size:12.5px; color:var(--muted); }
.rev-stars { display:flex; gap:1.5px; color:var(--gold-600); margin-bottom:3px; }
.rev-tags { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:13px; }
.rev-tags span {
  background:var(--blue-50); color:var(--navy-600);
  font-size:11.5px; font-weight:600; padding:4px 11px; border-radius:var(--r-pill);
}
.rev-card p { font-size:14px; color:var(--ink-soft); line-height:1.72; position:relative; z-index:1; }

.rev-nav { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:26px; }
.rev-btn {
  width:42px; height:42px; border-radius:50%;
  border:1.5px solid var(--line); background:var(--white); color:var(--navy-600);
  display:grid; place-items:center;
  transition:all .2s var(--ease);
}
.rev-btn:hover { background:var(--navy-700); border-color:var(--navy-700); color:#fff; }
.rev-btn--prev svg { transform:rotate(180deg); }

/* ======================= FAQ ======================= */
.faq-list { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item {
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq-item.is-open { border-color:var(--blue-300); box-shadow:var(--sh-sm); }
.faq-q {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:17px 20px; text-align:left;
  font-size:15px; font-weight:600; color:var(--navy-800);
}
.faq-q svg { flex-shrink:0; color:var(--blue-500); transition:transform .25s var(--ease); }
.faq-item.is-open .faq-q svg { transform:rotate(90deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.faq-a p { padding:0 20px 18px; font-size:14px; color:var(--muted); line-height:1.72; }

/* ======================= RESPONSIVE ======================= */
@media (max-width:640px) {
  .svc-grid { grid-template-columns:1fr; gap:18px; }
  .svc-toolbar { flex-direction:column; align-items:stretch; gap:12px; }
  /* flex-basis would apply to HEIGHT once the toolbar stacks, so reset it */
  .svc-search { flex:0 0 auto; max-width:none; width:100%; }
  .svc-count { text-align:center; }
  .rev-card { width:min(300px,84vw); padding:22px 20px; }
}