/* =========================================================
   Provider Directory – Styles
   ========================================================= */

:root{
  --pd-blue: #003161;
  --pd-font: var(--e-global-typography-d673b06-font-family), Sans-serif;
  --pd-border: #E7ECF3;
  --pd-soft: #F3F6FB;
  --pd-soft-2: #EEF3F9;
}

.provider-directory{
  font-family: var(--pd-font);
}

/* ===== Filter Bar ===== */
.provider-directory__filters{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr auto;
  gap: 14px;
  align-items: end;

  background: var(--pd-soft);
  border-radius: 14px;
  padding: 14px 14px 12px;
  border: 1px solid var(--pd-border);
}

/* labels */
.provider-directory__filters label{
    display: block;
    font-size: 14px;
    font-weight: 300;
    color: #000000;
    margin: 0 0 6px;
}

/* inputs/selects */
.provider-directory__filters input,
.provider-directory__filters select{
  width: 100%;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #D7DFEA;
  background: #fff;
  padding: 0 12px;
  font-size: 14px;
  color: #2B3440;
  outline: none;
}
/* type buttons row */
.pd-typebar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 18px 0;
  justify-content: space-between;
}
.pd-typebar .pd-type{
  border:1px solid #003161;
  background:#fff;
  color:#003161;
  border-radius:999px;
  padding:10px 16px;
  cursor:pointer;
  font-weight:600;
  min-width:220px;
}
.pd-typebar .pd-type.is-active{
  background:#003161;
  color:#fff;
}
.pd-typebar .pd-type:hover{
  background:#003161;
  color:#fff;
}

/* top row: pagination left, title right */
.pd-toprow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin: 10px 0 18px;
      flex-direction: row-reverse;
}
.pd-toprow__title{
  font-weight:700;
  color:#003161;
}
.provider-directory__filters input::placeholder{
  color: #8A97A8;
}

/* Search button (right) */
.provider-directory__filters #pd_search_btn{
    height: 44px;
    border: 1px solid var(--pd-blue);
    background: var(--pd-blue);
    color: #fff;
    font-weight: 500;
    border-radius: 10px;
    padding: 0 18px;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
.provider-section-title{
    margin-top:40px;
    margin-bottom:60px;
    color: #000;
text-align: center;
font-family: var(--e-global-typography-d673b06-font-family), Sans-serif;
font-size: 25px;
font-weight: 400;
line-height: 31.39px;
letter-spacing: 0.75px;
}
/* optional small icon before button text (matches your reference vibe) */
.provider-directory__filters #pd_search_btn::before{
  content:"";
  width: 18px;
  height: 18px;
  display:inline-block;
  background: currentColor;
  -webkit-mask: url("/wp-content/uploads/2025/12/Vector-6.svg") no-repeat center / contain;
  mask: url("/wp-content/uploads/2025/12/Vector-6.svg") no-repeat center / contain;
}

/* Loading state */
#pd_results.is-loading{
  opacity: .6;
  pointer-events: none;
}

/* Responsive filter layout */
@media (max-width: 900px){
  .provider-directory__filters{
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .provider-directory__filters #pd_search_btn{
    width: 100%;
    justify-content: center;
  }
}

/* ===== Grid ===== */
.provider-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1024px){
  .provider-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767px){
  .provider-grid{ grid-template-columns: 1fr; }
}

/* ===== Card Base ===== */
.provider-card{
  position: relative;
  border: 1px solid var(--pd-border);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  min-height: 520px; /* helps match your reference height */
}

/* We’ll “flip” between top & bio panels */
.provider-card__top,
.provider-card__bio{
  position: absolute;
  inset: 0;
  padding: 22px 18px 18px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform .5s ease, opacity .2s ease;
}

/* front */
.provider-card__top{
  transform: rotateY(0deg);
}

/* back */
.provider-card__bio{
  background: #fff;
  transform: rotateY(180deg);
  opacity: 1;
  overflow: auto;
}

/* enable 3D perspective */
.provider-card{
  perspective: 1200px;
}
.provider-card__top,
.provider-card__bio{
  transform-origin: center;
}
.provider-card__top {
    display: flex;
    flex-direction: column;
}
.provider-card__top > div:first-child {
    flex: 1 1 auto;
    text-align: center;
}
.provider-card__bio{
  display: flex;
    flex-direction: column;
    justify-content: space-around;
}
/* When open: rotate the panels */
.provider-card.is-open .provider-card__top{
  transform: rotateY(-180deg);
}
.provider-card.is-open .provider-card__bio{
  transform: rotateY(0deg);
}

/* Make sure hidden attribute doesn’t kill our flip animation */
.provider-card__bio[hidden]{
  display: block !important; /* we handle visibility via transform */
}

/* ===== Headshot ===== */
.provider-card__imgwrap{
  width: 92px;
  height: 92px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: var(--pd-blue);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.provider-card__imgwrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== Flip Icon Button ===== */
.provider-card__toggle{
  position:absolute;
  top: 18px;
  right: 18px;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: .95;
}
.provider-card__toggle::before{
  content:"";
  width: 22px;
  height: 22px;
  display:block;
  margin: 0 auto;
  background: var(--pd-blue);
  -webkit-mask: url("/wp-content/uploads/2025/12/Flip-ICON.svg") no-repeat center / contain;
  mask: url("/wp-content/uploads/2025/12/Flip-ICON.svg") no-repeat center / contain;
}
.provider-card__toggle:hover{ opacity: 1; }
/* Section titles like "Specialties" + "Education" */
.provider-card__section{
  margin-top: 10px;
  text-align: center;
}

.provider-card__section-title{
    font-size: 11px;
    font-weight: 500;
    color: #000000;
    margin-bottom: 0px;
    margin-top: 10px;
}

.provider-card__section-text{
  font-size: 12px;
  color: #4B5563;
  line-height: 1.35;
}

.provider-card__top .provider-card__loc{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  font-size: 12px;
  color: #4B5563;
  margin-bottom: 20px;
}

.provider-card__loc::before{
  content:"";
  width: 14px;
  height: 14px;
  display:inline-block;
  background: var(--pd-blue);
  -webkit-mask: url("/wp-content/uploads/2025/12/Group-62-1.svg") no-repeat center / contain;
  mask: url("/wp-content/uploads/2025/12/Group-62-1.svg") no-repeat center / contain;
}
/* ===== Typography (Front) ===== */
.provider-card__top h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    color: #000000;
    text-align: center;
}

.provider-card__top > div{
  text-align: center;
  color: #4B5563;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 4px;
}

.provider-card__top > div:nth-of-type(2) {
    color: #6D6D6D;
    font-weight: 400;
    font-size: 15px;
}

/* Specialty text block spacing */
.provider-card__top > div:nth-of-type(3) {
    margin-top: 8px;
    color: #003161;
    text-decoration: underline;
    font-weight: 500;
    font-size: 15px;
}

/* ===== Location line with icon ===== */
.provider-card__top > div:nth-of-type(5),
.provider-card__top > div:nth-of-type(6){
  /* depending on which order your fields output, keep both safe */
}

.provider-card__top > div:last-of-type{
  /* usually location label is last div before badges/links */
}

.provider-card__top > div:nth-last-of-type(1){
  /* if location ends up last div */
}

.provider-card__top > div:nth-of-type(6){
  /* often location is around here */
}

/* Safer: target location by wrapping it in a span class (best),
   BUT since your current markup is plain divs, we add icon
   to ANY div that contains "Clinic" / "Center" / etc. isn’t reliable.
   So: add icon to the LAST div before badges by layout.
*/
.provider-card__badges{
  margin-top: 10px;
}

/* If your location line is directly before badges, this works: */
.provider-card__badges{
  margin-top: 10px;
}
.provider-card__badges::before{
  content:"";
  display:none;
}

/* Recommended tiny markup improvement (optional):
   Wrap location output with <div class="provider-card__loc">...</div>
   If you do that, this will apply perfectly:
*/
.provider-card__loc{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top: 8px;
  font-size: 12px;
  color: #4B5563;
}
.provider-card__loc::before{
  content:"";
  width: 14px;
  height: 14px;
  display:inline-block;
  background: var(--pd-blue);
  -webkit-mask: url("/wp-content/uploads/2025/12/Group-62-1.svg") no-repeat center / contain;
  mask: url("/wp-content/uploads/2025/12/Group-62-1.svg") no-repeat center / contain;
}

/* ===== Badges ===== */
.provider-card__badges{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap: wrap;
  margin: 12px 0 14px;
}
.provider-card__badges span{
  font-size: 10px;
  font-weight: 700;
  color: var(--pd-blue);
  background: var(--pd-soft-2);
  border: 1px solid #DCE6F4;
  padding: 4px 10px;
  border-radius: 999px;
}
button.pd-page:hover {
    color: #003161;
}
button.pd-page.is-active {
    color: #003161;
}
button.pd-page {
    border: unset;
    color: #B4B4B4;
    font-family: var(--e-global-typography-be73252-font-family), Sans-serif;
    font-size: 18px;
    padding:5px;
}
nav.pd-pagination {
    text-align: right;
    padding-top:40px;
    padding-bottom:20px;
}
span.pd-pagination__label {
    color: #003161;
    font-family: var(--e-global-typography-be73252-font-family), Sans-serif;
    font-size: 18px;
}
/* ===== Buttons (Front) =====
   Your current markup has two <a> links directly in .provider-card__top
   Style them as block buttons and make the 2nd one filled.
*/
.provider-card__top > a{
  display:flex;
  align-items:center;
  justify-content:center;
  height: 42px;
  border-radius: 10px;
  text-decoration:none;
  font-weight: 500;
  font-size: 13px;
  border: 1px solid #D7DFEA;
  color: var(--pd-blue);
  background:#fff;
  margin: 0 auto 10px;
  max-width: 260px;
}

.provider-card__top > a + a{
  background: var(--pd-blue);
  border-color: var(--pd-blue);
  color: #fff;
  gap: 10px;
}
.provider-card__top > div:last-child > a{
  display:flex;
  align-items:center;
  justify-content:center;
  height: 42px;
  border-radius: 10px;
  text-decoration:none;
  font-weight: 500;
  font-size: 13px;
  border: 1px solid #D7DFEA;
  color: var(--pd-blue);
  background:#fff;
  margin: 0 auto 10px;
  max-width: 260px;
}
.provider-card__top > div:last-child > a:hover{
	background:var(--pd-blue);
	color: #FFF;
}
/* second button filled */
.provider-card__top > div:last-child > a + a{
  background: var(--pd-blue);
  border-color: var(--pd-blue);
  color: #fff;
  gap: 10px;
}
.provider-card__top > div:last-child > a + a:hover{
  background: #fff;
  color: var(--pd-blue);
}
/* schedule icon inside the 2nd button */
.provider-card__top > div:last-child > a + a::before{
  content:"";
  width: 18px;
  height: 18px;
  display:inline-block;
  background: #fff;
  -webkit-mask: url("/wp-content/uploads/2025/12/schedule_svgrepo.com-1.svg") no-repeat center / contain;
  mask: url("/wp-content/uploads/2025/12/schedule_svgrepo.com-1.svg") no-repeat center / contain;
}
.provider-card__top > div:last-child > a + a:hover::before{
  background: var(--pd-blue);
}
/* Schedule icon inside the 2nd button */
.provider-card__top > a + a::before{
  content:"";
  width: 18px;
  height: 18px;
  display:inline-block;
  background: #fff;
  -webkit-mask: url("/wp-content/uploads/2025/12/schedule_svgrepo.com-1.svg") no-repeat center / contain;
  mask: url("/wp-content/uploads/2025/12/schedule_svgrepo.com-1.svg") no-repeat center / contain;
}

/* ===== Back Side (Bio view) ===== */
.provider-card__bio{
  padding-top: 28px;
  text-align: center;
}

.provider-card__bio h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    color: #000000;
}

.provider-card__bio .provider-card__creds {
    font-size: 15px;
    color: #6D6D6D;
    margin-top: 4px;
    font-weight: 500;
}
.provider-card__affil {
    color: #003161;
    text-decoration: underline;
    font-size: 15px;
}
/* If your bio content is raw WYSIWYG, normalize it */
.provider-card__bio p{
  font-size: 12px;
  line-height: 1.3;
  color: #374151;
  margin: 10px 0;
}
[type=button]:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover {
    background-color: unset;
    color: #fff;
    text-decoration: none;
}
/* Keep “Vein Health” looking like a link line on back */
.provider-card__bio a{
  color: var(--pd-blue);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Back-side buttons: same styling as front */
.provider-card__bio a{
  display:flex;
  align-items:center;
  justify-content:center;
  height: 46px;
  border-radius: 12px;
  text-decoration:none;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid #D7DFEA;
  color: var(--pd-blue);
  background:#fff;
  margin: 14px auto 10px;
  max-width: 280px;
}

.provider-card__bio a + a{
  background: var(--pd-blue);
  border-color: var(--pd-blue);
  color: #fff;
  gap: 10px;
}
.provider-card__bio a + a::before{
  content:"";
  width: 18px;
  height: 18px;
  display:inline-block;
  background:#fff;
  -webkit-mask: url("/wp-content/uploads/2025/12/schedule_svgrepo.com-1.svg") no-repeat center / contain;
  mask: url("/wp-content/uploads/2025/12/schedule_svgrepo.com-1.svg") no-repeat center / contain;
}

/* Empty state */
.pd-empty{
  margin-top: 18px;
  padding: 18px;
  border: 1px dashed #CFD7E3;
  border-radius: 12px;
  text-align:center;
  background:#fff;
}