/* MaidForYou Teams v1.4.0
   Card layout prefix: mfytc-
   List layout prefix: mfytl-
*/

/* ========================================================
   SHARED
======================================================== */
.mfy-teams-root { font-family: 'Poppins', sans-serif; color: #1a1a1a; width:100%; display:block!important;}

/* ========================================================
   CARD LAYOUT — mfytc-
======================================================== */
.mfytc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Mobile: horizontal scroll carousel */


/* Skeleton */
.mfytc-skel {
  background: #ebebeb; border-radius: 16px; height: 380px;
  animation: mfytc-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes mfytc-pulse { from{opacity:1} to{opacity:.4} }

/* Card */
.mfytc-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  transition: box-shadow .2s;
}
.mfytc-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); }

/* Available now */
.mfytc-avail {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #878FA0;
    font-weight: 400;
    align-self: end;
}
.mfytc-avail-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #11d42d;
    flex-shrink: 0;
}

/* Avatar */
.mfytc-avatar {
  width: 76px; height: 76px; border-radius: 50%;
  overflow: hidden; border: 3px solid #f0f0f0; flex-shrink: 0;
}
.mfytc-avatar--lg { width: 80px; height: 80px; }
.mfytc-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mfytc-avatar-ini {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; font-family: 'Poppins', sans-serif;
}

/* Name */
.mfytc-name { font-size: 20px; font-weight: 600; color: #111; text-align: center; }

/* Stars row */
.mfytc-stars-row { display: flex; align-items: center; gap: 0px; }
.mfytc-star { font-size: 18px; line-height: 1; }
.mfytc-star--full  { color: #E37806; }
.mfytc-star--half  { color: #E87722; }
.mfytc-star--empty { color: #ddd; }
.mfytc-rtxt { font-size: 13px; color: #556172; margin-left: 4px; }

/* Badge pill */
.mfytc-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 400;
    color: #364153;
    background: #fff;
    padding: 15px 20px;
    border-radius: 16px;
    border: 1px solid #E5E7EB;
}
.mfytc-pill-star {
    font-size: 17px;
    color: #34C759;
}

/* Stats */
.mfytc-stats {
  display: flex; gap: 10px; width: 100%;
}
.mfytc-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: #F9FAFB;
    padding: 10px;
    border-radius: 10px;
}
.mfytc-stat-val { font-size: 24px; font-weight: 700; color: #E87722; }
.mfytc-stat-lbl { font-size: 11px; color: #556172; text-align: center; }

/* Expertise */
.mfytc-exp { width: 100%; }
.mfytc-exp-title {
    font-size: 14px;
    font-weight: 600;
    color: #0A0A0A;
    display: block;
    margin-bottom: 6px;
}
.mfytc-exp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mfytc-tag {
    font-size: 13px;
    padding: 4px 16px;
    border: 1px solid #e0e0e057;
    border-radius: 20px;
    color: #556172;
    background: #fbfbfba6;
}
.mfytc-tag--more { color: #E87722; border-color: #E87722; font-weight: 600; }

/* Button */
.mfytc-btn {
  display: block; width: 100%; text-align: center;
  padding: 11px 0; border: 1.5px solid #E87722; border-radius: 40px;
  color: #E87722; font-size: 13px; font-weight: 700;
  text-decoration: none; font-family: 'Poppins', sans-serif;
  background: #fff; transition: all .15s;
}
.mfytc-btn:hover { background: #E87722; color: #fff; }



/* Empty */
.mfytc-empty { text-align: center; color: #999; font-size: 13px; padding: 40px 0; }

/* ── Carousel (mobile) ── */
.mfytc-outer {
  overflow: hidden; /* clips the sliding grid */
  width: 100%;
}

.mfytc-grid {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile: single card visible, grid slides via transform */
@media (max-width: 720px) {
  .mfytc-outer {
    overflow: hidden;
  }
  .mfytc-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    width: 100% !important;
  }
  .mfytc-card {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Dots */
.mfytc-dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
@media (max-width: 720px) {
  .mfytc-dots { display: flex; }
}
.mfytc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ddd; cursor: pointer; transition: background .2s;
  border: none; padding: 0;
}
.mfytc-dot--on {
    background: #E87722;
    width: 24px;
    height: 8px;
    border-radius: 7px;
}

/* ========================================================
   LIST LAYOUT — mfytl-
======================================================== */
.mfytl-list { display: flex; flex-direction: column; gap: 12px; }

/* Skeleton */
.mfytl-skel {
  background: #ebebeb; border-radius: 12px; height: 90px;
  animation: mfytl-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes mfytl-pulse { from{opacity:1} to{opacity:.4} }

/* Card row */
.mfytl-card {
  display: flex; align-items: start; gap: 14px;
  background: #fff; border: 1px solid #eeeeee36;
  border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  transition: box-shadow .2s;
}
.mfytl-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.mfytl-card--best {
    border: 1.5px solid #d2d1d14d;
    background: #fafafa7d;
    box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549);
}

/* Avatar */
.mfytl-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  overflow: hidden; border: 2px solid #f0f0f0; flex-shrink: 0;
}
.mfytl-avatar--sm { width: 52px; height: 52px; }
.mfytl-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mfytl-avatar-ini {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; font-family: 'Poppins', sans-serif;
}

/* Info section */
.mfytl-info { flex: 1; min-width: 0; }
.mfytl-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; flex-wrap: wrap;     justify-content: space-between;}
.mfytl-name { font-size: 18px; font-weight: 600; color: #0A0A0A; }
.mfytl-best-badge {
    font-size: 12px;
    font-weight: 500;
    color: #E87722;
    border: 1.5px solid #e8772252;
    padding: 3px 10px;
    border-radius: 6px;
    background: #e877220f;
    white-space: nowrap;
}
.mfytl-meta { font-size: 15px; color: #556172; margin-bottom: 4px; }

/* Stars row — on ALL list cards */
.mfytl-stars-row { display: flex; align-items: center; gap: 0px; margin-bottom: 5px; }
.mfytl-star { font-size: 17px; line-height: 1; }
.mfytl-star--sm { font-size: 17px; }
.mfytl-star--full  { color: #E87722; }
.mfytl-star--half  { color: #E87722; }
.mfytl-star--empty { color: #ddd; }
.mfytl-rtxt { font-size: 13px; color: #556172; margin-left: 3px; }

/* Tags */
.mfytl-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.mfytl-tag {
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid #e0e0e075;
    border-radius: 20px;
    color: #556172;
    background: #F9FAFB;
}

/* Book link */
.mfytl-book {
  font-size: 12px; font-weight: 700; color: #E87722;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  font-family: 'Poppins', sans-serif;
}
.mfytl-book:hover { text-decoration: underline; }

/* Empty */
.mfytl-empty { text-align: center; color: #999; font-size: 13px; padding: 30px 0; }

@media (max-width: 480px) {
  .mfytl-card { flex-wrap: wrap; }
  .mfytl-book { width: 100%; text-align: center; margin-top: 8px; }
}

@media (max-width: 720px) {
  .mfytc-grid { grid-template-columns: 1fr; }
}

/* ========================================================
   CARD LAYOUT 2 — mfytc2-
   Shortcode: [mfy_teams_card2]
   Style: location header + stats rows + full-width book btn
======================================================== */

/* Grid wrapper */
.mfytc2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Skeleton */
.mfytc2-skel {
  background: #ebebeb; border-radius: 16px; height: 360px;
  animation: mfytc2-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes mfytc2-pulse { from{opacity:1} to{opacity:.4} }

/* Card shell */
.mfytc2-card {
    background: #fff;
    border: 1px solid #f3f3f3e8;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 4px 6px -1px  #0000001A;
    transition: box-shadow .2s;
    font-family: 'Poppins', sans-serif;
}
.mfytc2-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); }

/* Header band — cream/sand background */
.mfytc2-header {
    background: #F3E7DB;
    padding: 18px 20px 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.mfytc2-header-left {}
.mfytc2-location {
  font-size: 22px;
  font-weight: 700;
  color: #F47F04;
  line-height: 1.1;
  margin: 0 0 4px;
}
.mfytc2-region {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: #818089;
    text-transform: uppercase;
}

/* "Most requested" badge pill */
.mfytc2-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: #364153;
  background: #fff;
  padding: 6px 12px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  flex-shrink: 0;
}
.mfytc2-badge-star { color: #34C759; font-size: 14px; }

/* Body */
.mfytc2-body {
  padding: 20px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

/* Person row */
.mfytc2-person {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.mfytc2-avatar {
  width: 68px; height: 68px; border-radius: 50%;
  overflow: hidden; border: 3px solid #f0f0f0; flex-shrink: 0;
}
.mfytc2-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mfytc2-avatar-ini {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; font-family: 'Poppins', sans-serif;
}
.mfytc2-person-name {
  font-size: 18px;
  font-weight: 600;
  color: #111;
  line-height: 1.2;
}
.mfytc2-person-role {
  font-size: 13px;
  color: #878FA0;
  font-weight: 400;
  margin-top: 2px;
}

/* Stat rows with dividers */
.mfytc2-stats { width: 100%; }
.mfytc2-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  border-top: 1px solid #F0F0F0;
}
.mfytc2-stat-row:last-child { border-bottom: 1px solid #F0F0F0; }
.mfytc2-stat-lbl {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #878FA0;
    text-transform: uppercase;
}
.mfytc2-stat-val {
  font-size: 16px;
  font-weight: 700;
  color: #E87722;
}

/* Book now button */
.mfytc2-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 15px 0;
  background: #E87722;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  transition: background .15s;
  margin-top: 20px;
}
.mfytc2-btn:hover { background: #d06a18; color: #fff; }

/* Empty */
.mfytc2-empty { text-align: center; color: #999; font-size: 13px; padding: 40px 0; }

/* Carousel outer */
.mfytc2-outer { overflow: hidden; width: 100%; }
.mfytc2-grid { transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }

/* Dots */
.mfytc2-dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
@media (max-width: 720px) {
  .mfytc2-dots { display: flex; }
}
.mfytc2-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ddd; cursor: pointer; transition: background .2s;
  border: none; padding: 0;
}
.mfytc2-dot--on {
  background: #E87722;
  width: 24px;
  height: 8px;
  border-radius: 7px;
}

/* Mobile carousel */
@media (max-width: 720px) {
  .mfytc2-outer { overflow: hidden; }
  .mfytc2-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    width: 100% !important;
  }
  .mfytc2-card {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }
}
@media (min-width: 721px) {
    .mfytc2-card {
        min-width: 400px;
    }
}
/* ========================================================
   LIST LAYOUT — Mobile carousel (v1.9.0)
======================================================== */
/* Outer wrapper clips the sliding list */
.mfytl-outer { overflow: hidden; width: 100%; }

/* List slides via transform on mobile */
@media (max-width: 720px) {
  .mfy-teams-root[data-layout="list"] { overflow: hidden; }
  .mfytl-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    width: 100% !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .mfytl-card {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }
}

/* List dots */
.mfytl-dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
@media (max-width: 720px) {
  .mfytl-dots { display: flex; }
}
.mfytl-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ddd; cursor: pointer; transition: background .2s;
  border: none; padding: 0;
}
.mfytl-dot--on {
  background: #E87722;
  width: 24px;
  height: 8px;
  border-radius: 7px;
}