.doctor-directory { width:min(100% - 48px,var(--mx-content-width)); margin:var(--mx-page-gap) auto; }
.doctor-directory__filters { display:grid; grid-template-columns:minmax(0,2fr) minmax(240px,1fr); gap:24px; align-items:end; }
.doctor-directory [hidden] { display:none !important; }
.doctor-directory label { display:block; margin-bottom:10px; color:var(--mx-text); font-size:16px; font-weight:400; }
.doctor-directory :is(input,[role=combobox]) { width:100%; min-width:0; min-height:54px; padding:14px 18px; border:1px solid var(--mx-border); border-radius:12px; background:#fff; color:var(--mx-text); font:400 18px/1.4 var(--mx-font); }
.doctor-directory :is(input,[role=combobox]):focus-visible { outline:2px solid var(--mx-green-deep); outline-offset:3px; }
.directory-select { position:relative; min-width:0; }
.directory-select [role=combobox] { display:flex; align-items:center; justify-content:space-between; gap:16px; text-align:left; cursor:pointer; }
.directory-select__chevron { flex:0 0 8px; width:8px; height:8px; margin-right:4px; border:solid var(--mx-green-deep); border-width:0 1.5px 1.5px 0; transform:rotate(45deg); }
.directory-select [aria-expanded=true] .directory-select__chevron { transform:rotate(225deg); }
.directory-select__options { position:absolute; z-index:20; top:calc(100% + 8px); left:0; width:100%; max-height:320px; overflow-y:auto; overscroll-behavior:contain; margin:0; padding:6px; list-style:none; border:1px solid var(--mx-border); border-radius:12px; background:#fff; box-shadow:0 8px 24px #18352014; color:var(--mx-text); }
.directory-select__options [role=option] { position:relative; margin:0; padding:12px 30px 12px 12px; border-radius:7px; font:400 16px/1.4 var(--mx-font); overflow-wrap:anywhere; cursor:pointer; }
.directory-select__options [role=option]:is(:hover,.is-active) { background:var(--mx-header); }
.directory-select__options [aria-selected=true]::after { content:'✓'; position:absolute; right:10px; color:var(--mx-green-deep); }
.doctor-directory__count { margin:20px 0; font-size:15px; color:var(--mx-green-deep); }
.doctor-directory__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.directory-card { min-width:0; display:flex; flex-direction:column; border:1px solid var(--mx-border); border-radius:18px; background:#fff; box-shadow:var(--mx-shadow); overflow:hidden; }
.directory-card__profile { flex:1; display:flex; flex-direction:column; color:inherit; text-decoration:none; }
.directory-card__photo { display:block; width:100%; height:auto; aspect-ratio:3 / 4; object-fit:contain; object-position:center top; background:var(--mx-page); }
.directory-card__caption { flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:94px; padding:16px 12px; background:var(--mx-green); color:#fff; text-align:center; }
.directory-card__caption :is(h2,p) { margin:0; font:300 16px/1.35 var(--mx-font); text-transform:none; overflow-wrap:anywhere; color:inherit; }
.directory-card__caption hr { width:60%; margin:4px auto; border:0; border-top:1px solid #ffffffb3; }
.directory-card:focus-within { outline:2px solid var(--mx-green-deep); outline-offset:3px; }
.doctor-directory__empty { padding:40px 24px; text-align:center; border:1px solid var(--mx-border); border-radius:18px; background:#fff; }
.doctor-directory__empty h2 { font-size:24px; color:var(--mx-green-deep); }
.doctor-directory__empty p { margin:16px 0; font-size:16px; }
.doctor-directory__empty button { padding:14px 24px; border:0; border-radius:8px; background:var(--mx-green); color:#fff; cursor:pointer; font:inherit; }
@media(max-width:991px) { .doctor-directory__grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) {
  .doctor-directory { width:calc(100% - 28px); }
  .doctor-directory__filters { grid-template-columns:1fr; gap:16px; }
  .doctor-directory :is(input,[role=combobox]) { font-size:16px; }
  .doctor-directory__grid { gap:12px; }
  .directory-card { border-radius:14px; }
  .directory-card__caption { padding:12px 8px; }
  .directory-card__caption :is(h2,p) { font-size:14px; }
}

@media(max-width:480px) { .doctor-directory__grid { grid-template-columns:minmax(0,1fr); } }
