@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@300;400;500;600&display=swap');

.hairtc-dir,
.hairtc-dir *{ box-sizing:border-box; font-family:'Inter',sans-serif; }
.hairtc-dir a{ text-decoration:none; color:inherit; }

body.page-template-page-clinic-directory .entry-content,
body.page-template-page-clinic-directory .page-header{ display:none!important }
body.page-template-page-clinic-directory .site-content,
body.page-template-page-clinic-directory #primary{ padding:0!important; max-width:100%!important }

/* ── HERO ── */
.dir-hero{ background:linear-gradient(135deg,#EFF6FF 0%,#F8FAFC 55%,#EFF6FF 100%); border-bottom:1px solid #E2E8F0; padding:52px 24px 40px }
.dir-hero-inner{ max-width:1200px; margin:0 auto }
.dir-hero h1{ font-family:'Playfair Display',serif; font-size:38px; font-weight:700; color:#0F172A; margin-bottom:8px; letter-spacing:-.02em }
.dir-hero-sub{ font-size:15px; color:#475569; margin-bottom:26px; max-width:560px; line-height:1.6 }
.dir-search-row{ display:flex; gap:10px; max-width:680px; align-items:center }
.dir-search{ display:flex; flex:1; background:#fff; border:1.5px solid #E2E8F0; border-radius:10px; overflow:hidden; box-shadow:0 2px 10px rgba(15,23,42,.06) }
.dir-search input{ flex:1; padding:13px 16px; border:none; font-size:14px; outline:none; font-family:'Inter',sans-serif; color:#0F172A }
.dir-search input::placeholder{ color:#94A3B8 }
.dir-search button{ background:#2563EB; color:#fff; border:none; padding:13px 22px; font-size:14px; font-weight:500; cursor:pointer; font-family:'Inter',sans-serif; transition:background .15s; white-space:nowrap }
.dir-search button:hover{ background:#1D4ED8 }
.dir-hero-stats{ display:flex; gap:28px; margin-top:24px; flex-wrap:wrap }
.dir-stat strong{ display:block; font-size:20px; font-weight:700; color:#0F172A; letter-spacing:-.01em }
.dir-stat span{ font-size:11px; color:#94A3B8 }

/* ── COUNTRY TABS + FILTER BAR ── */
.dir-nav{ background:#fff; border-bottom:1px solid #E2E8F0; position:sticky; top:0; z-index:50 }
.dir-nav-inner{ max-width:1200px; margin:0 auto; padding:0 24px }
.dir-country-tabs{ display:flex; gap:0; overflow-x:auto; scrollbar-width:none }
.dir-country-tabs::-webkit-scrollbar{ display:none }
.dir-ctab{ padding:14px 18px; font-size:13px; font-weight:500; color:#475569; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; transition:all .15s; user-select:none }
.dir-ctab:hover{ color:#0F172A }
.dir-ctab.active{ color:#2563EB; border-bottom-color:#2563EB; font-weight:600 }

.dir-filter-bar{ background:#F8FAFC; border-bottom:1px solid #E2E8F0; padding:10px 24px }
.dir-filter-inner{ max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.dir-filter-label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#94A3B8; white-space:nowrap }
.dir-filter-select{ font-size:13px; font-weight:500; color:#0F172A; padding:8px 14px; border-radius:8px; border:1px solid #E2E8F0; background:#fff; font-family:'Inter',sans-serif; cursor:pointer; transition:border-color .15s; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:30px }
.dir-filter-select:focus{ outline:none; border-color:#2563EB }
.dir-filter-sep{ width:1px; height:20px; background:#E2E8F0; margin:0 4px; flex-shrink:0 }
.dir-result-info{ margin-left:auto; font-size:12px; color:#94A3B8; white-space:nowrap }
.dir-result-info strong{ color:#0F172A; font-weight:600 }

/* ── BODY LAYOUT ── */
.dir-body{ max-width:1200px; margin:0 auto; padding:28px 24px; display:grid; grid-template-columns:1fr 280px; gap:24px; align-items:start }

/* ── CLINIC CARDS (Option 3 style) ── */
.dir-card{ background:#fff; border:1px solid #E2E8F0; border-radius:14px; padding:24px; margin-bottom:16px; transition:all .15s; cursor:pointer; display:block; color:inherit }
.dir-card:hover{ border-color:#CBD5E1; box-shadow:0 4px 24px rgba(15,23,42,.09); color:inherit }
.dir-card.top-pick{ border-color:#2563EB; background:linear-gradient(180deg,#fff,#FAFCFF) }
.dir-card-top{ display:flex; gap:20px; align-items:flex-start; margin-bottom:16px }
.dir-logo{ width:76px; height:76px; border:1px solid #E2E8F0; border-radius:10px; background:#F8FAFC; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#475569; text-align:center; padding:8px; flex-shrink:0; overflow:hidden }
.dir-logo img{ width:100%; height:100%; object-fit:contain }
.dir-card-info{ flex:1; min-width:0 }
.dir-card-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:5px }
.dir-card-name{ font-size:16px; font-weight:700; color:#0F172A; line-height:1.2 }
.dir-card-loc{ font-size:12px; color:#64748B; margin:5px 0 8px; display:flex; align-items:center; gap:4px }
.dir-card-loc svg{ width:11px; height:11px; stroke:#94A3B8; fill:none; stroke-width:2; flex-shrink:0 }
.dir-badges{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:8px }
.dir-verified{ display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; color:#059669; background:#D1FAE5; padding:3px 8px; border-radius:20px }
.dir-verified svg{ width:10px; height:10px; stroke:currentColor; fill:none; stroke-width:2.5 }
.dir-top-badge{ background:#2563EB; color:#fff; font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:4px }
.dir-pills{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px }
.pill{ display:inline-block; font-size:10px; font-weight:600; padding:3px 9px; border-radius:20px; letter-spacing:.03em }
.pill-blue{ background:#DBEAFE; color:#1D4ED8 }
.pill-gray{ background:#F1F5F9; color:#475569 }
.pill-green{ background:#D1FAE5; color:#065F46 }
.dir-score-wrap{ flex-shrink:0; text-align:right }
.dir-score-label{ font-size:9px; color:#94A3B8; text-transform:uppercase; letter-spacing:.05em; margin-bottom:3px }
.dir-score{ background:#0F172A; color:#fff; font-size:12px; font-weight:700; padding:5px 10px; border-radius:6px; display:inline-block }

.dir-card-bottom{ display:flex; align-items:center; gap:0; border-top:1px solid #F1F5F9; padding-top:16px }
.dir-stat-col{ flex:1; text-align:center; border-right:1px solid #F1F5F9; padding:0 12px }
.dir-stat-col:first-child{ padding-left:0; text-align:left }
.dir-stat-col:last-child{ border-right:none }
.dir-stat-label{ font-size:10px; color:#94A3B8; text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px }
.dir-stat-val{ font-size:14px; font-weight:700; color:#0F172A }
.dir-stat-val.green{ color:#059669; font-size:12px }
.dir-actions{ display:flex; gap:8px; padding-left:16px; flex-shrink:0 }
.dir-btn-p{ background:#2563EB; color:#fff; border:none; padding:10px 18px; border-radius:7px; font-size:12px; font-weight:500; cursor:pointer; font-family:'Inter',sans-serif; white-space:nowrap; transition:background .15s }
.dir-btn-p:hover{ background:#1D4ED8; color:#fff }
.dir-btn-s{ background:#fff; color:#0F172A; border:1.5px solid #E2E8F0; padding:10px 14px; border-radius:7px; font-size:12px; font-weight:500; cursor:pointer; font-family:'Inter',sans-serif; white-space:nowrap; transition:all .15s }
.dir-btn-s:hover{ border-color:#0F172A; background:#F8FAFC; color:#0F172A }

.dir-load-more{ text-align:center; padding:24px; border:1.5px dashed #E2E8F0; border-radius:12px; color:#94A3B8; font-size:13px; margin-bottom:0 }
.dir-load-more a{ color:#2563EB; font-weight:600; cursor:pointer }

/* ── RIGHT SIDEBAR ── */
.dir-sidebar{ display:flex; flex-direction:column; gap:16px; position:sticky; top:120px }
.dir-sb-card{ background:#fff; border:1px solid #E2E8F0; border-radius:12px; overflow:hidden }
.dir-sb-head{ font-size:12px; font-weight:700; color:#0F172A; padding:14px 16px; border-bottom:1px solid #F1F5F9 }
.dir-sb-body{ padding:16px }
.dir-map-placeholder{ height:180px; background:linear-gradient(135deg,#EFF6FF,#DBEAFE); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px }
.dir-map-placeholder svg{ width:26px; height:26px; stroke:#93C5FD; fill:none; stroke-width:1.5 }
.dir-map-placeholder p{ font-size:12px; color:#94A3B8 }
.dir-sb-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #F8FAFC; font-size:12px }
.dir-sb-row:last-child{ border-bottom:none }
.dir-sb-key{ color:#475569 }
.dir-sb-val{ font-weight:600; color:#0F172A; font-size:12px }
.dir-match-card{ background:#0F172A; border-radius:12px; padding:22px }
.dir-match-title{ font-family:'Playfair Display',serif; font-size:17px; color:#fff; margin-bottom:8px; font-weight:600 }
.dir-match-sub{ font-size:12px; color:rgba(255,255,255,.6); margin-bottom:16px; line-height:1.6 }
.dir-match-btn{ width:100%; background:#2563EB; color:#fff; border:none; padding:11px; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; font-family:'Inter',sans-serif; margin-bottom:8px; transition:background .15s }
.dir-match-btn:hover{ background:#1D4ED8 }
.dir-match-btn2{ width:100%; background:transparent; color:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.15); padding:9px; border-radius:8px; font-size:12px; font-weight:500; cursor:pointer; font-family:'Inter',sans-serif }

/* ── EMPTY STATE ── */
.dir-empty{ text-align:center; padding:56px 24px; background:#fff; border:1px solid #E2E8F0; border-radius:14px; margin-bottom:0 }
.dir-empty h3{ font-family:'Playfair Display',serif; font-size:22px; color:#0F172A; margin-bottom:8px }
.dir-empty p{ font-size:14px; color:#64748B; margin-bottom:20px }
.dir-empty-btn{ background:#2563EB; color:#fff; border:none; padding:11px 22px; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; font-family:'Inter',sans-serif }

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .dir-body{ grid-template-columns:1fr }
  .dir-sidebar{ position:static }
  .dir-card-bottom{ flex-wrap:wrap; gap:12px }
  .dir-actions{ padding-left:0; width:100%; justify-content:flex-end }
}
@media(max-width:768px){
  .dir-hero{ padding:36px 16px 28px }
  .dir-hero h1{ font-size:28px }
  .dir-search-row{ flex-direction:column; align-items:stretch }
  .dir-body{ padding:20px 16px }
  .dir-card-top{ flex-wrap:wrap }
  .dir-stat-col{ padding:0 8px }
  .dir-filter-inner{ gap:6px }
  .dir-score-wrap{ display:none }
  .dir-stat-col:nth-child(3), .dir-stat-col:nth-child(4){ display:none }
}