@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');
:root{
  --p1: #ebb5b1; /* primary */
  --p2: #cc988a; /* secondary */
  --p3: #3d5d60; /* accent */
  --bg: #fbf8f7;
  --card-border: rgb(205 151 140 / 48%);
  --soft-shadow: 0 12px 30px rgba(61,93,96,0.06);
  --hbg:#fbf6f5;
  --muted:#707070;
  --accent-border:#e9dedc;
  --pill-bg:#ffffff;
}
html,body{height:100%}
body{background:var(--bg); font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color:#102023; margin:0}

.p-50{padding:50px 0}


.left-col{width:320px}

/* Sidebar filter (pixel tuned) */
.filter-card{background:#fff;border-radius:12px;padding:22px;box-shadow:0 10px 28px rgba(61,93,96,0.06);border:1px solid var(--card-border)}
.filter-title{font-weight:700;color:#24323a;font-size:18px;margin-bottom:16px}
.filter-sub{color:#6b7d7f;font-size:13px;margin-bottom:12px}
.form-row{margin-bottom:14px}
.icon-box{width:36px;height:36px;border-radius:50px;background:linear-gradient(180deg,rgba(235,181,177,0.08),transparent);display:inline-flex;align-items:center;justify-content:center;margin-right:10px;color:var(--p3);
    position: absolute;
    left: 8px;
    top: 0;
    transform: 0;
    text-align: 5;
    top: 50%;
    transform: translate(0, -50%);
}
.input-pill{height:44px;padding:10px 12px;border-radius:30px;border:1px solid rgba(61,93,96,0.06);width:100%;background:#fafafa}
.input-pill:focus,.input-pill:hover{
  outline: 0;
  border-color: rgb(205 151 140 / 48%);
}
.icon-box ~ .input-pill{
    padding-left: 55px;
}



.icon-box svg {
    color: var(--p3);
    width: 20px;
    height: 20px;
}
.icon-box svg path {
    fill: var(--p3);
}
.icon-box svg path {
    stroke: var(--p3);
}

.chip-list{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:7px 12px;border-radius:999px;background:#fafafa;border:1px solid rgba(61,93,96,0.06);font-size:13px;cursor:pointer;
}
.chip:hover{
  border-color:rgb(205 151 140 / 48%)
}
.chip.active,.chip:has(input:checked){
  background:var(--p1);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(235,181,177,0.18);

  background:rgb(244 232 230); border:1px solid rgb(128 84 100,0.2);
  color: rgb(128 84 100);
}
.chip input{display: none;}

.apply-btn{background:#eac1ba;border:none;color:#8a5c55;border-radius:10px;padding:10px 14px;font-weight: 700}
.apply-btn:hover{background:#f2cdc7;color:#6f453e;}
.save-btn{background:#fff;border:1px solid rgba(61,93,96,0.06);color:var(--p3);border-radius:10px;padding:10px 14px}
.filter-title .text-black:hover{
    color: rgb(70 70 70) !important;
}
/* Main listing area */
.panel-heading{background:linear-gradient(180deg,rgba(235,181,177,0.08),transparent);padding:14px;border-radius:12px;border:1px solid var(--card-border);display:flex;align-items:center;justify-content:space-between}
.panel-heading h4{margin:0;font-size:16px}
.panel-heading .small-muted{color:#6b7d7f;font-size:13px}

.listing-card{background:#fff;border-radius:14px;padding:15px 18px 5px 18px;border:2px solid var(--card-border);box-shadow:var(--soft-shadow);display:flex;gap:18px;align-items:center;position: relative;}
.listing-card .media-left{width:64px}
.avatar-circle{
    width:64px;height:64px;
    background: #eac1ba;
    color: #8a5c55;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 26px;
    font-family: Arial, sans-serif;overflow: hidden;}
.avatar-circle img{width:100%;height:100%;object-fit:cover;background: #fff}

.listing-main{flex:1}
.listing-main h3 {
    font-size: 18px;
    margin: 0 0 6px 0;
    color: #333;
    font-weight: 700;
}
.listing-main p.location{font-size:13px;color:#6b7d7f;margin:0 0 8px}

.badges-main{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px;    position: absolute;
    top: -13px;
    left: 20px;}
.badge-pill{display:inline-block;padding:4px 10px;border-radius:999px;font-weight:700;font-size:12px}
.badge-preferred{background:#0b2c2b;color:#fff}
.badge-sponsored{
  background:#fff5f2;color:#c75b4a;border:1px solid rgba(199,91,74,0.08);
  background: linear-gradient(90deg, #ff8a27 0%, #ff44a6 100%);
  color: #fff;
}
.tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    margin: 0px 6px 0 0;
    font-size: 12px;
    
  background: #f7e8e6;
  border: 1px solid #fbd9d4;
  color: #8a5c55;
}

.listing-meta{font-size:13px;color:#6b7d7f;margin-bottom: 6px;}

/* Right rating column */
.rating-col{width:170px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.rating-box{width:100%;background:linear-gradient(180deg,#fff,rgba(235,181,177,0.03));border-radius:0;padding:10px;border-left:1px solid rgba(61,93,96,0.2);text-align:right}
.rating-score{font-size:22px;font-weight:700;color:#102023}
.rating-stars{color:#f5bf3b;margin-top:6px}
.rating-small{font-size:12px;color:#6b7d7f;margin-top:6px}
.action-buttons{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.btn-ghost{border-radius:20px;padding:8px 12px;    transition: all .3s ease;}
.btn-ghost:hover{background: #f2cdc7 !important;color: #6f453e !important;border-color: #f2cdc7;}

/* Dotted vertical divider like image */
.dotted-hr{border-left:1px dashed rgba(61,93,96,0.06);height:100%;margin:0 12px}

/* Spacing adjustments to mimic image */
.results-list{display:flex;flex-direction:column;gap:18px}

/* Pagination */
.front-pagi .pagination{justify-content:center;margin-top:10px}


@media (max-width:991px){
  .left-col{width:100%}
  .listing-card{flex-direction:column}
  .rating-col{width:100%;flex-direction:row;justify-content:space-between}
  .dotted-hr{display:none}
}

@media (max-width: 1400px) {
    .container-mid.container {
        max-width:1300px
    }
}

.header-wrap {
    padding: 0 0 36px 0;
}
.header-inner{background:transparent; padding:0; border-radius:8px;}


.heading-row{display:flex; align-items:flex-start; gap:18px;}
h1.title{
margin:0; font-size:32px; line-height:1.05; font-weight:900; color:#1f2a2b; letter-spacing:-0.5px;
}


.badge-inline{
display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px;
border-radius:14px; padding:6px 10px;
box-shadow:0 1px 0 rgba(0,0,0,0.03);
margin-top:6px;
background:rgb(244 232 230); border:1px solid rgb(128 84 100);
color: rgb(128 84 100);
}


.subtitle{color:var(--muted); margin-top:12px; margin-bottom:18px; font-size:15px;}


.pills{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.pill{
background:var(--pill-bg); border:1px solid var(--accent-border); padding:8px 16px; border-radius:30px; font-size:14px;
box-shadow: 0 2px 0 rgba(0,0,0,0.01); color:#34403f;
}


/* small tweaks to match image spacing */
.title + .badge-inline{margin-left:10px}

.nav-form label{
  margin-bottom: 7px;
}
/* responsive */
@media (max-width:576px){
h1.title{font-size:22px}
.badge-inline{font-size:11px; padding:5px 8px}
}


/* optional reference screenshot (for local preview) */
.screenshot{max-width:100%; margin-top:18px; border-radius:8px; display:block}

.listing-card.external_doula{
    box-shadow: 0px 2px 2px rgb(255 227 222), 0px 10px 25px rgb(235 210 206);  
    transition: box-shadow 0.3s ease;
}
.listing-card.external_doula:hover{
  box-shadow: unset;  
}
.badge-preferred-small {
    display: inline-block;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #a86a59;                 /* brown text */
    background: #f6eeec;            /* soft brownish background */
    border-radius: 20px;
    position: relative;
    top: -2px;
}

.badge-new-clients {
    display: inline-block;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #1c7f6b;                 /* teal text */
    background: #e6f7f3;            /* soft mint green */
    border-radius: 20px;
    position: relative;
    top: -2px;
}
.btn-message{
      background: #fff;
    border: 1px solid #ddd;
    width: 39px;
    height: 39px;
    /* line-height: 39px; */
    border-radius: 100%;
    position: relative;
    top: 2px;
    margin-left: 5px;

    transition: all .3s ease;
}
.btn-message:hover{background: #f2cdc7 !important;color: #6f453e !important;border-color: #f2cdc7;}
.bg-badge {
  display: inline-block;
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #ff8a27 0%, #ff44a6 100%);
  border-radius: 999px; /* fully rounded pill */
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Bottom Bar Wrapper */
.mobile-bottom-bar {
    position: fixed;
    bottom: 12px;
    left: 0;
    width: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

/* Floating Inner Bar */
.bottom-bar-inner {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 12px 20px;
    border-radius: 18px;
    width: 90%;
    max-width: 420px;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    pointer-events: auto;
    border: 1px solid rgba(255,255,255,0.4);
    margin: 0 auto;
}

/* Each Item */
.bb-item {
    background: #ffffff;
    border: none;
    padding: 10px 18px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    width: 48%;
    transition: 0.2s ease;
    color: #8a5c55;
}

.bb-item i {
    font-size: 18px;
    margin-bottom: 4px;
    opacity: 0.85;
}


.bb-item svg {
    color: #8a5c55;
    width: 20px;
    height: 20px;
}
.bb-item svg path {
    fill: #8a5c55;
}
.bb-item svg path {
    stroke: #8a5c55;
}

.bb-item:active {
    transform: scale(0.97);
}
/* Sort Panel Base */
.sort-panel {
    position: fixed;
    left: 0;
    bottom: -100%;
    width: 100%;
    height: 65vh;
    background: #fff;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    z-index: 99999;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.15);
    transition: 0.45s ease;
    display: flex;
    flex-direction: column;
}

/* Show Panel */
.sort-panel.active {
    bottom: 0;
}

/* Header */
.sort-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sort-header .title {
    font-size: 20px;
    font-weight: 700;
}

.sort-header .close-btn {
    background: #f3f3f3;
    border: none;
    padding: 10px 12px;
    border-radius: 10px;
}

.sort-header .close-btn  svg {
    color: #333;
    width: 20px;
    height: 20px;
}
.sort-header .close-btn  svg path {
    fill: #333;
}
.sort-header .close-btn  svg path {
    stroke: #333;
}

.filter-header .close-btn  svg {
    color: #333;
    width: 20px;
    height: 20px;
}
.filter-header .close-btn  svg path {
    fill: #333;
}
.filter-header .close-btn  svg path {
    stroke: #333;
}

/* Content */
.sort-content {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
}

.sort-option {
    display: flex;
    align-items: center;
    padding: 14px 12px;
    background: #fafafa;
    border-radius: 14px;
    margin-bottom: 14px;
    cursor: pointer;
    border: 1px solid #eee;
    transition: 0.2s ease;
    font-size: 16px;
    font-weight: 600;
}

.sort-option:hover {
    background: #f1f1f1;
    border-color: #ddd;
}

.sort-option input {
    margin-right: 12px;
}

/* Footer */
.sort-footer {
    padding: 15px 20px;
    border-top: 1px solid #eee;
}

.apply-sort-btn {
    width: 100%;
    background: #1E73BE; /* your theme color */
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 700;
}


/* Full Screen Filter Panel */
.filter-panel {
    position: fixed;
    left: 0;
    bottom: -120%;
    height: 100vh;
    width: 100%;
    background: #fff;
    z-index: 10000;
    transition: 0.45s ease;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
}

.filter-panel.active {
    bottom: 0;
}

/* Header */
.filter-header {
    padding: 18px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-header .title {
    font-size: 20px;
    font-weight: 700;
}

.filter-header .close-btn {
    background: #f5f5f5;
    border: none;
    padding: 10px 12px;
    border-radius: 10px;
}

/* Content */
.filter-content {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.filter-block {
    margin-bottom: 25px;
}

.filter-label {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

/* Footer */
.filter-footer {
    padding: 15px 20px;
    display: flex;
    gap: 10px;
    border-top: 1px solid #eee;
}

.clear-btn {
    flex: 1;
    background: #e8e8e8;
    border: none;
    padding: 12px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
}



.mobile-bottom-bar{
  display: none;
}
.close-btn,.sort-option,.clear-btn{
  color: #8a5c55;
}

.tag{
    margin-bottom: 5px;
}
@media (max-width:550px){
  .mobile-bottom-bar{
    display: block;
  }
  .filter-card{
    display: none;
  }
  .panel-heading{
    margin-top: 20px;
    margin-bottom: 25px !important;
    flex-wrap: wrap;
  }
  .tag{
    margin-bottom: 5px;
  }
  .listing-card{
    padding: 15px;
    gap: 10px;
  }
  .rating-box{
    text-align: center;
    border-left: 0;
  }
  .rating-count{
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
  }
  .view-profile-box{
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
  }
  .view-profile-box .badge-new-clients{
    top: 2px;
  }
  .rating-small{
        margin-top: 0;
  }
  .rating-stars{
        margin-top: 0;
  }
  .filter-card
}