/* ── LOADING ── */
.ft-feat-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 0;
}h3.sitter-name {
    text-transform: capitalize;
}
.ft-feat-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid #e8eaf0;
  border-top-color: #5b5fe5;
  border-radius: 50%;
  animation: ft-feat-spin .8s linear infinite;
}
@keyframes ft-feat-spin { to { transform: rotate(360deg); } }

/* ── SLICK OVERRIDES (same as shortcode) ── */
.ms-featured-wrapper { margin: 0px 0; }

#ft-featured-sitters .ms-slick {
  padding: 0 16px;
  box-sizing: border-box;
  padding-top: 15px;
}

#ft-featured-sitters .ms-card {
  background: #fff;
  text-align: left;
  margin: 0 21px;
  padding: 10px 0px;
}

#ft-featured-sitters .ms-slick .slick-track {
  display: flex !important;
}
#ft-featured-sitters .ms-slick .slick-slide {
  height: inherit !important;
}
#ft-featured-sitters .ms-slick .ms-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
#ft-featured-sitters .ms-slick .ms-card .ms-btn {
  margin-top: auto;
}

.slick-dots li button:before { display: none; }
.ms-fl-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 22px;
}
.slick-dots li button {
  width: 20px;
  background: #787878 !important;
  height: 20px;
  position: relative;
  display: flex;
  border: 1px solid;
  border-radius: 50%;
}
li.slick-active button {
  background: #DB6A4C !important;
  transform: scale(1.2);
}
.slick-dots {
  margin-top: 20px !important;
  position: relative !important;
}
.slick-dots li button:before { font-size: 0 !important; }

/* ── CARD CSS (identical to shortcode) ── */
.sitter-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 14px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
}
.sitter-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 3px 17px rgba(0,0,0,0.12);
  transition: .5s;
}
.card-media {
  position: relative;
  height: 280px;
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.price-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #fff;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  font-family: 'Grandstander', sans-serif;
  color: #29377F;
}
.price-badge span { color: #99A1AF; font-weight: 400; font-size: 12px; }
.intro-btn {
  position: absolute;
  bottom: 15px;
  left: 15px;
  border: none;
  background: #fff;
  padding: 8px 14px;
  border-radius: 20px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: center;
  text-transform: uppercase;
  color: #29377F;
  font-size: 12px;
  font-family: 'Grandstander', sans-serif;
  display: none !important;
}
button.intro-btn:hover { background: #db6a4c; }
button.intro-btn:hover svg path { stroke: #fff; fill: #fff; }

.card-body {
  padding: 23px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 27px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sitter-name {
  font-size: 20px;
  color: #29377F;
  font-weight: 900;
  margin-bottom: 0;
  margin-top: 0;
}
.rating {
  font-size: 14px;
  font-weight: 700;
  color: #29377F;
  font-family: 'Grandstander', sans-serif;
}
.location {
  font-size: 12px;
  color: #3a6ae2;
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: 'Grandstander', sans-serif;
  text-transform: uppercase;
}
.description {
  font-size: 14px;
  color: #6A7282;
  line-height: 1.625em;
  margin-bottom: 0;
  font-family: 'Questrial', sans-serif;
}
.description a { color: #3a6ae2; text-decoration: none; }
.features {
  list-style: none;
  font-size: 10px;
  color: #7D7D7E;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 5px;
  padding-left: 0;
}
.features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: #7D7D7E;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.12px;
}
.card-footer {
  display: flex;
  text-align: center;
  margin-top: 20px;
}
.select-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 10px;
  background: #4c73d9;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: .3s;
  display: block;
  text-decoration: none;
  text-align: center;
}
a.select-btn {
  font-size: 16px;
  font-weight: 700;
  font-family: 'Grandstander', sans-serif;
  text-transform: uppercase;
}
.select-btn:hover { background: #db6a4c; color: #fff; }

/* ── VIDEO POPUP (same as shortcode) ── */
.ms-video-popup {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 9999;
}
.ms-video-overlay {
  position: absolute;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.85);
}
.ms-video-box {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  max-width: 900px;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}
.ms-video-box video { width: 100%; height: 784px; display: block; }
.ms-video-close {
  position: absolute;
  top: -9px; right: 14px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
  z-index: 9999;
}

@media (max-width: 767px) {
  .ms-featured-wrapper { margin: 0px 0 !important; }
  #ft-featured-sitters .ms-card { margin: 0 6px; }
  .slick-dots li button { width: 15px; height: 15px; }
  #ft-featured-sitters .ms-slick { padding-top: 0px !important; }
  .slick-dots { margin-top: 0px !important; }
}