/* =========================================================
   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;
}

.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;
}

/* optional icon before button text */
.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;
  }
}

/* ===== 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,
.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-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;
}

/* ===== 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;
  perspective: 1200px; /* enable 3D perspective */
}

/* 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;
  transform-origin: center;
}

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

  /* ✅ NEW: layout so content can grow and buttons sit at bottom */
  display: flex;
  flex-direction: column;
}

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

/* 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;
}

/* =========================================================
   ✅ NEW WRAPPER TARGETS (your two <div> wrappers)
   - First child div = content (img -> location/badges)
   - Last child div  = actions (two buttons)
   ========================================================= */

/* content wrapper */
.provider-card__top > div:first-child{
  flex: 1 1 auto;  /* allows it to take available space */
  text-align: center;
}

/* actions wrapper */
.provider-card__top > div:last-child{
  flex: 0 0 auto;
  padding-top: 8px;
}

/* ===== 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; }

/* ===== Typography (Front) ===== */
.provider-card__top h3{
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  color: #000000;
  text-align: center;
}

/* creds + affil (these are plain divs inside your content wrapper) */
.provider-card__top > div:first-child > div{
  text-align: center;
  color: #4B5563;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 4px;
}

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

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

/* 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;
}

/* Location line */
.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;
}

/* ===== 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;
}

/* ===== Pagination buttons ===== */
button.pd-page{
  border: unset;
  color: #B4B4B4;
  font-family: var(--e-global-typography-be73252-font-family), Sans-serif;
  font-size: 18px;
  padding:5px;
}
button.pd-page:hover,
button.pd-page.is-active{
  color: #003161;
}
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) =====
   ✅ UPDATED: anchors are now inside the LAST child div wrapper
*/
.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);
}

/* ===== 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;
}

/* normalize bio text */
.provider-card__bio p{
  font-size: 12px;
  line-height: 1.3;
  color: #374151;
  margin: 10px 0;
}

/* keep theme focus/hover from messing buttons */
[type=button]:focus,
[type=button]:hover,
[type=submit]:focus,
[type=submit]:hover,
button:focus,
button:hover{
  background-color: unset;
  color: #fff;
  text-decoration: none;
}

/* Back-side buttons (your markup uses .provider-card__back-actions with .provider-card__btn classes)
   Keep your existing styles by targeting those classes explicitly.
*/
.provider-card__back-actions .provider-card__btn{
  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__back-actions .provider-card__btn + .provider-card__btn{
  background: var(--pd-blue);
  border-color: var(--pd-blue);
  color: #fff;
  gap: 10px;
}
.provider-card__back-actions .provider-card__btn + .provider-card__btn::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;
}

/* (optional) back-side “link looking” */
.provider-card__bio a{
  text-decoration: none;
}

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