/* ═══════════════════════════════════
   TOKENS
   ═══════════════════════════════════ */
:root {
  --red: #E53E3E; --red-dark: #C53030; --red-faint: #FFF5F5; --red-mid: #FED7D7;
  --black: #0A0A0A; --ink: #1A1A1A; --ink-2: #374151; --ink-3: #6B7280; --ink-4: #9CA3AF;
  --bg: #F9F8F7; --surface: #FFFFFF; --border: #E5E7EB; --border-2: #F3F4F6;
  --success: #059669; --success-bg: #ECFDF5; --success-border: #A7F3D0;
  --warning: #D97706; --warning-bg: #FFFBEB;
  --blue: #2563EB; --blue-bg: #EFF6FF;
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-full: 100px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.09);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.13);
  --t: 0.18s cubic-bezier(0.4,0,0.2,1);
  --max: 1200px;
}

.inner { max-width: var(--max); margin: 0 auto; padding: 0 32px 60px; }

/* ── BREADCRUMB ── */
.breadcrumb {
  padding: 14px 0; display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-4);
}
.breadcrumb a { color: var(--red); font-weight: 600; text-decoration: none; cursor: pointer; }
.breadcrumb span { color: var(--border); }

/* ── UNIFIED PAGE HEADER ── */
.page-header { padding: 32px 0 24px; }
.ph-eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--red); margin-bottom: 8px;
}
.ph-title {
  font-family: 'Syne', sans-serif; font-size: clamp(28px, 4vw, 42px);
  font-weight: 900; color: var(--black); letter-spacing: -0.5px; margin-bottom: 6px;
}
.ph-sub { font-size: 15px; color: var(--ink-3); line-height: 1.6; max-width: 560px; }

/* ══════════════════════════════════════
   UNIFIED FILTER BAR
   ══════════════════════════════════════ */
.filter-bar {
  background: white; border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 14px 18px; margin-bottom: 28px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}
.filter-search {
  flex: 1; min-width: 200px; position: relative;
}
.filter-search input {
  width: 100%; padding: 9px 14px 9px 38px; border: 1.5px solid var(--border);
  border-radius: var(--r-full); font-family: 'DM Sans', sans-serif; font-size: 13px;
  color: var(--ink); outline: none; transition: border-color var(--t), box-shadow var(--t);
  background: var(--bg);
}
.filter-search input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(229,62,62,0.07); }
.filter-search input::placeholder { color: var(--ink-4); }
.filter-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-4);
}
.filter-search-icon svg {
  width: 15px; height: 15px; stroke: currentColor; fill: none;
  stroke-width: 2.5; stroke-linecap: round;
}
.filter-div { width: 1px; height: 28px; background: var(--border); flex-shrink: 0; }
.filter-select {
  padding: 9px 32px 9px 13px; border: 1.5px solid var(--border);
  border-radius: var(--r-full); font-family: 'DM Sans', sans-serif; font-size: 13px;
  font-weight: 600; color: var(--ink-2); outline: none; background: white; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236B7280' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
  transition: border-color var(--t); min-width: 130px;
}
.filter-select:focus { border-color: var(--red); }
.filter-result-count {
  font-size: 12px; font-weight: 600; color: var(--ink-4);
  white-space: nowrap; margin-left: auto;
}

/* ══════════════════════════════════════
   PROVIDER CARDS — horizontal layout
   ══════════════════════════════════════ */
.provider-grid-table, 
.provider-grid-table thead, 
.provider-grid-table tbody, 
.provider-grid-table tr, 
.provider-grid-table td {
  display: block !important;
  width: 100% !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.provider-grid-table thead { display: none !important; }

.provider-grid-table tbody {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
  padding: 20px 0 !important;
}

@media(max-width: 991px) {
  .provider-grid-table tbody { grid-template-columns: 1fr !important; }
}

.prov-card {
  background: white; border: 1.5px solid var(--border); border-radius: var(--r-xl);
  padding: 20px; display: flex !important; gap: 20px; cursor: pointer; transition: all var(--t);
  text-decoration: none !important; color: inherit !important;
  width: 100% !important; box-sizing: border-box !important;
  align-items: flex-start;
}
.prov-card:hover { border-color: var(--red-mid); box-shadow: var(--shadow-md); transform: translateY(-1px); }

.prov-photo {
  width: 80px; height: 80px; border-radius: var(--r-lg); object-fit: cover;
  flex-shrink: 0; background: var(--border-2); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Syne', sans-serif; font-size: 28px; font-weight: 900; color: var(--ink-3);
  border: 2px solid var(--border);
}
.prov-photo img { width: 100%; height: 100%; object-fit: cover; }

.prov-body { 
  flex: 1 !important; 
  min-width: 0 !important; 
  display: flex !important;
  flex-direction: column !important;
}
.prov-top { display: flex !important; align-items: center !important; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.prov-name { 
  font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 800; color: var(--black);
  line-height: 1.2; margin: 0; white-space: normal !important;
}
.prov-verified {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px;
  background: var(--blue-bg); color: var(--blue); border-radius: var(--r-full);
  font-size: 10px; font-weight: 800; flex-shrink: 0;
}
.prov-specs {
  font-size: 12px; color: var(--ink-3); margin-bottom: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* BADGE ROW */
.prov-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.prov-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: var(--r-full);
  font-size: 10px; font-weight: 700; white-space: nowrap; border: 1px solid;
}
/* Badge colour variants */
.badge-verified { background: var(--blue-bg); color: var(--blue); border-color: #BFDBFE; }
.badge-dbs { background: #F0FDF4; color: #15803D; border-color: #BBF7D0; }
.badge-id { background: #F0F9FF; color: #0369A1; border-color: #BAE6FD; }
.badge-phone { background: #F5F3FF; color: #5B21B6; border-color: #DDD6FE; }
.badge-address { background: #FFF7ED; color: #9A3412; border-color: #FFEDD5; }
.badge-dbs-enhanced { background: #ECFDF5; color: #047857; border-color: #6EE7B7; }
.badge-gas { background: #FFF7ED; color: #C2410C; border-color: #FDBA74; }
.badge-electric { background: #FEFCE8; color: #A16207; border-color: #FDE047; }
.badge-insured { background: #F0F9FF; color: #0369A1; border-color: #BAE6FD; }
.badge-first-aid { background: #FFF1F2; color: #BE123C; border-color: #FECDD3; }
.badge-new { background: var(--red-faint); color: var(--red); border-color: var(--red-mid); }

.prov-bottom { display: flex; align-items: center; gap: 10px; }
.prov-rating { display: flex; align-items: center; gap: 3px; }
.prov-star { color: #F59E0B; font-size: 12px; }
.prov-rating-val { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.prov-reviews { font-size: 11px; color: var(--ink-4); font-weight: 600; }
.prov-location { 
  font-size: 11px; color: var(--ink-4); display: flex; align-items: center; gap: 3px; 
  margin-left: auto; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
}
.btn-view-profile {
  margin-left: auto; padding: 7px 14px; background: var(--red); color: white;
  border: none; border-radius: var(--r-full); font-family: 'DM Sans', sans-serif;
  font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background var(--t);
}
.btn-view-profile:hover { background: var(--red-dark); }

/* ── RESULT COUNT + SORT ROW ── */
.results-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; flex-wrap: wrap; gap: 8px;
}
.results-label { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.results-label strong { color: var(--black); }

/* Responsive */
@media(max-width: 1024px) {
  .provider-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width: 768px) {
  .provider-grid { grid-template-columns: 1fr; }
  .filter-bar { flex-wrap: wrap; }
  .filter-search { min-width: 100%; order: -1; }
}
@media(max-width: 480px) {
  .provider-grid { grid-template-columns: 1fr; }
}