:root {
  --bl-bg: #f7f4ef;
  --bl-card: #ffffff;
  --bl-card-soft: #f8f6f2;
  --bl-line: #e5ddd2;
  --bl-blue: #1D458D;
  --bl-blue-deep: #15376f;
  --bl-brown: #8b5a4a;
  --bl-text: #243042;
  --bl-muted: #6a7688;
  --bl-success: #2d8a52;
  --bl-danger: #c64a4a;
  --bl-shadow: 0 16px 38px rgba(29,69,141,.08);
  --bl-radius-xl: 26px;
  --bl-radius-lg: 20px;
  --bl-radius-md: 16px;
  --bl-radius-sm: 12px;
}

body {
  /* background: radial-gradient(circle at top left, rgba(29,69,141,.06), transparent 28%),linear-gradient(180deg, #fbfaf8 0%, #f3eee7 100%)!important; */
  background: var(--bl-card);
  color: var(--bl-text);
}

.main_column_dash {
  padding-bottom: 90px;
}

.bl-profile-shell {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 2rem auto;
}

.bl-preview-note {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
  border: 1px solid rgba(29,69,141,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--bl-shadow);
}

.bl-preview-note strong {
  color: var(--bl-blue-deep);
  font-size: 1rem;
}

.bl-preview-note span {
  color: var(--bl-muted);
  font-size: .92rem;
}

.bl-preview-pill {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(29,69,141,.08);
  color: var(--bl-blue);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bl-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--bl-radius-xl);
  background: linear-gradient(135deg, rgba(21,55,111,.96), rgba(29,69,141,.90));
  box-shadow: var(--bl-shadow);
  color: #fff;
  padding: 28px;
  margin-bottom: 22px;
}

.bl-hero:after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
}

.bl-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 24px;
  align-items: center;
}

/* Picture occupies 1/4 of the hero card, anchored to the top-left. */
.bl-avatar-wrap {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  align-self: start;
  border-radius: 28px;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.14);
  box-shadow: 0 18px 34px rgba(0,0,0,.18);
}

.bl-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bl-title {
  font-size: clamp(2rem,3vw,3rem);
  line-height: 1.04;
  margin: 0 0 10px 0;
  color: #fff;
}

.bl-hero-desc {
  margin: 0;
  color: rgba(255,255,255,.84);
  line-height: 1.7;
  font-size: 1rem;
  max-width: 65ch;
}

/* New Deal, surfaced on the hero just below the business name. */
.bl-hero-post {
  margin: 0;
  max-width: 65ch;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
}

/* "New Deal" — an explosive, attention-grabbing badge. */
.bl-hero-post-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  padding: 7px 15px 7px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ff3d2e 0%, #ff8a00 48%, #ffd13a 100%);
  box-shadow: 0 0 0 0 rgba(255,138,0,.55), 0 8px 22px rgba(255,61,46,.45);
  transform-origin: center;
  animation: bl-deal-pop .5s cubic-bezier(.2,1.5,.4,1) 1, bl-deal-pulse 1.5s ease-in-out infinite;
}

.bl-hero-post-label::before {
  content: "\1F4A5"; /* 💥 */
  font-size: 1.05em;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
  animation: bl-deal-wiggle 1.5s ease-in-out infinite;
}

@keyframes bl-deal-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255,138,0,.55), 0 8px 22px rgba(255,61,46,.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(255,138,0,0), 0 12px 28px rgba(255,61,46,.6);
    transform: scale(1.05);
  }
}

@keyframes bl-deal-pop {
  0%   { transform: scale(.55); opacity: 0; }
  60%  { transform: scale(1.14); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes bl-deal-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-14deg); }
  75%      { transform: rotate(14deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bl-hero-post-label,
  .bl-hero-post-label::before,
  .bl-follow-post__tag {
    animation: none !important;
  }
}

.bl-hero-post-body {
  color: #fff;
  line-height: 1.7;
  font-size: 1rem;
}

/* Uploaded image / file attached to a follower post. */
.bl-post-media {
  margin-top: 12px;
}

.bl-post-media img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 340px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  display: block;
  object-fit: cover;
}

.bl-post-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff !important;
  font-weight: 700;
  text-decoration: none !important;
  word-break: break-all;
}

.bl-post-file:hover {
  background: rgba(255,255,255,.2);
}

/* On phones, let the post image fill the card as a tidy, height-capped banner. */
@media (max-width: 600px) {
  .bl-post-media img {
    width: 100%;
    max-height: 280px;
  }
  .bl-post-file {
    width: 100%;
    justify-content: flex-start;
  }
}

.bl-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px 0;
}

.bl-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  gap: 0.35rem;
  white-space: nowrap;
}

.bl-chip.alt {
  background: rgba(255,255,255,.08);
}

.bl-status-chip {
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}

.bl-status-chip {
  gap: 10px;
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-weight: 800;
}

.bl-led-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255,255,255,.08);
}

.bl-led-dot.is-open {
  background: #28a745;
  box-shadow: 0 0 10px rgba(40,167,69,.55);
}

.bl-led-dot.is-closed {
  background: #b24c4c;
  box-shadow: 0 0 10px rgba(178,76,76,.45);
}

.bl-status-chip.bl-open {
  color: #9ef0b7;
  background: rgba(67,181,105,.12);
}

.bl-status-chip.bl-closed {
  color: #ffb2b2;
  background: rgba(210,78,78,.12);
}

.bl-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.bl-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-weight: 800;
  text-decoration: none!important;
  transition: .2s ease;
}

.bl-btn:hover {
  transform: translateY(-1px);
}

.bl-btn-primary {
  background: var(--bl-blue);
  color: #fff !important;
}

.bl-btn-primary:hover {
  transform: translateY(-1px);
  background: rgba(29, 69, 141, 0.85);
  border: rgba(29, 69, 141, 0.55);
}

.bl-btn-secondary {
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
}

.bl-btn-secondary:hover {
  transform: translateY(-1px);
  color: #fff;
  background: rgba(255,255,255,.30);
}

.bl-btn-tertiary {
  background: #ffffff3d;
  color: var(--bl-blue);
  border: 1px solid rgb(14 6 215 / 14%);
}

.bl-btn-tertiary:hover {
  transform: translateY(-1px);
  color: rgba(29, 68, 141, 0.90);
  background: rgba(228, 228, 228, 0.3);
}

.bl-hero-side {
  display: grid;
  gap: 12px;
}

.bl-stat-card {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
}

.bl-stat-card span {
  display: block;
  color: rgba(255,255,255,.72);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  margin-bottom: 8px;
}

.bl-stat-card strong {
  display: block;
  color: #fff;
  font-size: 1.15rem;
}

.bl-main-grid {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(320px,.95fr);
  gap: 20px;
}

.bl-stack {
  display: grid;
  gap: 20px;
}

.bl-card {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(29,69,141,.10);
  border-radius: var(--bl-radius-lg);
  box-shadow: var(--bl-shadow);
  overflow: hidden;
}

.bl-card-pad {
  padding: 22px;
}

.bl-card h3 {
  margin: 0 0 8px;
  color: var(--bl-blue-deep);
  font-size: 1.65rem;
  line-height: 1.1;
}

.bl-copy {
  margin: 0 0 16px;
  color: var(--bl-muted);
  line-height: 1.65;
}

.bl-rating-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.bl-rating-big {
  font-size: 3rem;
  line-height: 1;
  color: var(--bl-blue-deep);
  font-weight: 900;
}

.bl-rating-meter {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg,#d94141 0%, #efb106 50%, #2d9a49 100%);
  margin: 14px 0 18px;
}

.bl-rating-pointer {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--bl-blue-deep);
  transform: translate(-50%,-50%);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.bl-rating-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
}

.bl-metric {
  padding: 16px;
  border-radius: 16px;
  background: var(--bl-card-soft);
  border: 1px solid rgba(29,69,141,.08);
}

.bl-metric span {
  display: block;
  color: var(--bl-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .76rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.bl-metric strong {
  font-size: 1.5rem;
  color: var(--bl-blue-deep);
}

.bl-details {
  display: grid;
  gap: 12px;
}

.bl-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(29,69,141,.08);
}

.bl-detail-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.bl-detail-row span {
  color: var(--bl-muted);
  font-weight: 700;
}

.bl-detail-row strong,.bl-detail-row a {
  text-align: right;
  color: var(--bl-text);
  font-weight: 800;
}

.bl-badge-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bl-service-badge {
  background: rgba(29,69,141,.08);
  color: var(--bl-blue);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  font-size: .83rem;
}

.bl-hours {
  display: grid;
  gap: 10px;
}

.bl-hours-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--bl-card-soft);
  border: 1px solid rgba(29,69,141,.08);
}

.bl-hours-row span {
  color: var(--bl-muted);
  font-weight: 700;
}

.bl-hours-row strong {
  color: var(--bl-blue-deep);
}

.bl-map iframe {
  width: 100%;
  min-height: 240px;
  border: 0;
  border-radius: 18px;
}

.bl-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
}

.bl-gallery-tile {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: #ece7df;
  aspect-ratio: 1/1;
  border: 1px solid rgba(29,69,141,.08);
}

.bl-gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
}

.bl-gallery-tile:hover img {
  transform: scale(1.04);
}

.bl-gallery-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 10px 12px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.62));
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  height: 100%;
  align-content: end;
}

.bl-empty {
  padding: 22px;
  border-radius: 16px;
  background: var(--bl-card-soft);
  border: 1px dashed rgba(29,69,141,.18);
  color: var(--bl-muted);
  text-align: center;
  font-weight: 700;
}

.bl-post {
  padding: 18px;
  border-radius: 16px;
  background: var(--bl-card-soft);
  border: 1px solid rgba(29,69,141,.08);
  color: var(--bl-text);
  line-height: 1.7;
}

.modal-content.bl-modal-polish {
  width: min(980px,92vw)!important;
  max-width: 980px;
  border: none;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(13,25,44,.22);
}

.bl-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  background: linear-gradient(135deg,#173b74,#1D458D);
  color: #fff;
}

.bl-modal-header h4 {
  margin: 0;
  color: #fff!important;
  font-size: 1.6rem!important;
}

.bl-modal-header p {
  margin: 4px 0 0;
  color: rgba(255,255,255,.78);
  font-size: .9rem;
}

.bl-modal-header .close {
  color: #fff;
  float: none;
  font-size: 1.5rem;
  line-height: 1;
}

.bl-sheet-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  min-height: 60vh;
}

.bl-sheet-left,.bl-sheet-right {
  padding: 22px;
}

.bl-sheet-left {
  background: #fff;
}

.bl-sheet-right {
  background: #f7f4ef;
  border-left: 1px solid rgba(29,69,141,.08);
}

.bl-menu-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}

.bl-menu-card {
  background: #fff;
  border: 1px solid rgba(29,69,141,.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 22px rgba(29,69,141,.05);
}

.bl-menu-card button {
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

.bl-menu-card img {
  width: 100%;
  aspect-ratio: 1.15/1;
  object-fit: cover;
  display: block;
}

.bl-menu-card .meta {
  padding: 12px 14px 14px;
}

.bl-menu-card strong {
  display: block;
  color: var(--bl-blue-deep);
  font-size: 1rem;
}

.bl-menu-card span {
  display: block;
  color: var(--bl-muted);
  font-size: .86rem;
  margin-top: 4px;
  line-height: 1.5;
}

.bl-zoom-stage {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #eae3d8;
  min-height: 320px;
  border: 1px solid rgba(29,69,141,.08);
}

.bl-zoom-stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f2eee8;
  cursor: zoom-in;
  transition: transform .25s ease;
  transform-origin: center center;
}

.bl-zoom-stage.is-zoomed img {
  transform: scale(2.2);
  cursor: zoom-out;
}

.bl-zoom-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.bl-zoom-note {
  margin-top: 12px;
  color: var(--bl-muted);
  font-size: .88rem;
  line-height: 1.55;
}

.bl-thumb-row {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
  margin-top: 14px;
}

.bl-thumb {
  border: 2px solid transparent;
  background: none;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
}

.bl-thumb.active {
  border-color: var(--bl-blue);
}

.bl-thumb img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
}

/* Thumbnail pager (10 visuals per page in the Preview & zoom view) */
.bl-thumb-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}

.bl-thumb-pager button {
  appearance: none;
  border: 1px solid rgba(29, 69, 141, 0.25);
  background: #fff;
  color: #1D458D;
  font-weight: 800;
  font-size: 0.85rem;
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
}

.bl-thumb-pager button:disabled {
  opacity: 0.4;
  cursor: default;
}

.bl-thumb-pager .bl-thumb-pagelabel {
  color: #15376f;
  font-weight: 700;
  font-size: 0.9rem;
}

/* Visual browser thumbnails — keep them small and uniform so a page of 10 is
   quick to scan, instead of a handful of oversized pictures. Higher specificity
   + !important so it wins over the responsive repeat(3/4) grid rules. */
body.bl-profile-page .bl-thumb-row {
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)) !important;
  gap: 10px !important;
}

body.bl-profile-page .bl-thumb img {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
}

@media (max-width: 800px) {
  body.bl-profile-page .bl-thumb-row {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
  }
}

#modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10,17,30,.82);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
}

#modalImg {
  max-width: min(95vw,1200px);
  max-height: 80vh;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  object-fit: contain;
}

#modal .close {
  position: absolute;
  top: 16px;
  right: 24px;
  color: #fff;
  font-size: 2.4rem;
  z-index: 2;
}

#modal .prev,#modal .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 2.2rem;
  font-weight: 700;
  background: rgba(255,255,255,.12);
  border: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  cursor: pointer;
}

#modal .prev {
  left: 20px;
}

#modal .next {
  right: 20px;
}

@media (max-width:1100px) {
.bl-hero-grid{grid-template-columns:130px minmax(0,1fr)}.bl-hero-side{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))}.bl-main-grid,.bl-sheet-grid{grid-template-columns:1fr}.bl-sheet-right{border-left:none;border-top:1px solid rgba(29,69,141,.08)}
}

@media (max-width:800px) {
.bl-preview-note{flex-direction:column;align-items:flex-start}.bl-hero-grid{grid-template-columns:1fr}.bl-avatar-wrap{width:120px;height:120px}.bl-rating-grid,.bl-gallery-grid,.bl-menu-grid{grid-template-columns:1fr}.bl-thumb-row{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:540px) {
.bl-hero,.bl-card-pad,.bl-sheet-left,.bl-sheet-right{padding:16px}.bl-hero-actions{flex-direction:column}.bl-btn{width:100%}
}

.bl-hero::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.bl-detail-row strong,
.bl-detail-row a {
  text-align: right;
  color: var(--bl-text);
  font-weight: 800;
}

.bl-sheet-left,
.bl-sheet-right {
  padding: 22px;
}

#modal .prev,
#modal .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 2.2rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  cursor: pointer;
}

@media (max-width: 1100px) {
.bl-hero-grid {
    grid-template-columns: 130px minmax(0, 1fr);
  }

  .bl-hero-side {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bl-main-grid,
  .bl-sheet-grid {
    grid-template-columns: 1fr;
  }

  .bl-sheet-right {
    border-left: none;
    border-top: 1px solid rgba(29, 69, 141, 0.08);
  }
}

@media (max-width: 800px) {
.bl-preview-note {
    flex-direction: column;
    align-items: flex-start;
  }

  .bl-hero-grid {
    grid-template-columns: 1fr;
  }

  .bl-avatar-wrap {
    width: 120px;
    height: 120px;
  }

  .bl-rating-grid,
  .bl-gallery-grid,
  .bl-menu-grid {
    grid-template-columns: 1fr;
  }

  .bl-thumb-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
.bl-hero,
  .bl-card-pad,
  .bl-sheet-left,
  .bl-sheet-right {
    padding: 16px;
  }

  .bl-hero-actions {
    flex-direction: column;
  }

  .bl-btn {
    width: 100%;
  }
}

.bl-status-modal {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.bl-status-modal__content {
  width: 100%;
  max-width: 520px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 18px 45px rgba(0,0,0,0.25);
  background: #ffffff;
}

.bl-status-modal__body {
  position: relative;
  padding: 1.75rem 1.5rem 1.25rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.bl-status-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  border: none;
  background: transparent;
  color: #1D458D;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.bl-status-modal__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.bl-status-modal__logo img {
  width: 150px;
  height: auto;
}

.bl-status-modal__title-group {
  flex: 1;
}

.bl-status-modal__title {
  margin: 0;
  color: #1D458D;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.2;
}

.bl-status-modal__subtitle {
  margin: 0.35rem 0 0;
  color: #b24c4c;
  font-size: 0.85rem;
  line-height: 1.4;
}

.bl-status-modal__divider {
  border: none;
  border-top: 1px solid #f0f0f0;
  margin: 1rem 0;
}

.bl-status-modal__divider--soft {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.bl-status-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bl-status-row + .bl-status-row {
  margin-top: 0.75rem;
}

.bl-status-row__label {
  flex: 1 1 auto;
}

.bl-status-row__title {
  margin: 0;
  font-weight: 600;
  font-size: 0.95rem;
  color: #1D458D;
}

.bl-status-row__hint {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  color: #666666;
}

.bl-status-row__control {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bl-status-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.bl-status-toggle input[type="radio"] {
  display: none;
}

.bl-status-toggle__label {
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.bl-status-toggle__label--off {
  color: #b24c4c;
  border-color: rgba(178, 76, 76, 0.4);
  background-color: #fff5f5;
}

.bl-status-toggle__label--on {
  color: #2e7d32;
  border-color: rgba(46, 125, 50, 0.4);
  background-color: #f1faf1;
}

#radio-a:checked ~ label[for="radio-a"],
#radio-c:checked ~ label[for="radio-c"],
#radio-e:checked ~ label[for="radio-e"],
#radio-g:checked ~ label[for="radio-g"] {
  background-color: #b24c4c;
  color: #ffffff;
  border-color: #b24c4c;
}

#radio-b:checked ~ label[for="radio-b"],
#radio-d:checked ~ label[for="radio-d"],
#radio-f:checked ~ label[for="radio-f"],
#radio-h:checked ~ label[for="radio-h"] {
  background-color: #2e7d32;
  color: #ffffff;
  border-color: #2e7d32;
}

.toggle-outside {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 70px;
  height: 26px;
  border-radius: 999px;
  background: #e0e0e0;
  overflow: hidden;
}

.toggle-inside {
  position: relative;
  width: 50%;
  height: 100%;
  border-radius: inherit;
  background: #1D458D;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.toggle-logo img {
  width: 18px;
  height: auto;
}

.bl-status-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.bl-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.bl-chip--on {
  background-color: #e8f5e9;
  border-color: #2e7d32;
  color: #2e7d32;
}

.bl-chip--on .bl-chip__dot {
  background-color: #2e7d32;
}

.bl-chip--off {
  background-color: #ffebee;
  border-color: #b24c4c;
  color: #b24c4c;
}

.bl-chip--off .bl-chip__dot {
  background-color: #b24c4c;
}

.bl-chip--alt {
  background-color: #f2f7ff;
  border-color: #1D458D;
  color: #1D458D;
}

.bl-chip--alt .bl-chip__dot {
  background-color: #1D458D;
}

.bl-status-modal__footer {
  margin-top: 1.5rem;
  text-align: right;
}

.bl-status-modal__submit {
  padding: 0.4rem 1.2rem;
  border-radius: 999px;
  background-color: #1D458D;
  color: #ffffff;
  border: none;
  font-size: 0.9rem;
}

.bl-status-modal__submit:hover {
  background-color: #163562;
}

.bl-status-modal__note {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  color: #777777;
}

.bl-offer-row {
  margin-top: 0.4rem;
}

.bl-offer-row__hint {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  color: #555555;
}

@media screen and (min-width: 720px) {
.bl-status-row {
    flex-direction: row;
    align-items: center;
  }
  .bl-status-row__label {
    max-width: 55%;
  }
  .bl-status-row__control {
    align-items: flex-end;
  }
}

-----------------------




.bl-status-modal {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.bl-sidenav {
    padding: 0.85rem 0.55rem 1rem;
    height: 100%;
    width: 9em;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    float: none;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 24px rgba(29, 69, 141, 0.05);
}

.bl-sidenav__brand {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}

.bl-sidenav__logo {
    height: 3.7em;
    width: auto;
    object-fit: contain;
}

.bl-sidenav__rule {
    height: 0.1em;
    width: 8em;
    margin-right: 0;
}

.bl-sidenav__divider {
    width: min(105px, 76%);
    margin: 14px auto;
    border: 0;
    border-top: 1px solid rgba(29, 69, 141, 0.18);
}

.bl-sidenav__nav {
    display: grid;
    gap: 0.8rem;
    justify-items: center;
}

.bl-side-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: min(100%, 205px);
    min-height: 112px;
    color: var(--bl-blue);
    text-decoration: none !important;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 24px rgba(29, 69, 141, 0.05);
    border-radius: 18px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.bl-side-nav-item:hover,
.bl-side-nav-item:focus-visible {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(29, 69, 141, 0.14);
    box-shadow: 0 16px 34px rgba(29, 69, 141, 0.10);
    color: var(--bl-blue-deep);
}

.bl-side-nav-item--button {
    font: inherit;
    appearance: none;
    cursor: pointer;
    border: 0;
}

.bl-side-nav-item--logout {
    min-height: 104px;
}

.bl-side-nav-item--spaced {
    margin-top: 0;
}

.bl-side-nav-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: #edf1f7;
    color: var(--bl-blue);
    flex-shrink: 0;
}

.bl-side-nav-icon i {
    color: currentColor;
}

.bl-side-nav-icon--badge {
    overflow: visible;
}

.bl-side-nav-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.bl-side-nav-label {
    display: block;
    width: 100%;
    color: var(--bl-blue);
    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
}

.bl-side-nav-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #d84b5c;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 6px 14px rgba(216, 75, 92, 0.28);
}

@media (max-width: 1025px){
  .bl-sidenav {
    display: none;
    width: min(100%, 190px);
    min-height: 102px;
    padding: 0.7rem 0.55rem;
    border-radius: 20px;
  }
/* }

@media (max-width: 900px) {
    .bl-side-nav-item {
        width: min(100%, 190px);
        min-height: 102px;
        padding: 0.7rem 0.55rem;
        border-radius: 20px;
    } */

    .bl-side-nav-item--logout {
        min-height: 96px;
    }

    .bl-side-nav-icon {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }

    .bl-side-nav-label {
        font-size: 0.88rem;
    }
}

@media (max-height: 760px) {
    .bl-sidenav__logo {
        height: 3.15em;
    }

    .bl-sidenav__nav {
        gap: 0.65rem;
    }

    .bl-side-nav-item {
        min-height: 92px;
        padding: 0.62rem 0.5rem;
        border-radius: 18px;
    }

    .bl-side-nav-item--logout {
        min-height: 86px;
    }

    .bl-side-nav-icon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .bl-side-nav-label {
        font-size: 0.8rem;
    }
}

.bl-side-nav-subtitle {
    display: block;
    width: 100%;
    color: #697588;
    font-size: clamp(0.72rem, 1.35vw, 0.88rem);
    line-height: 1.22;
    font-weight: 700;
    text-align: center;
    overflow-wrap: break-word;
    word-break: normal;
}

.bl-side-nav-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #d84b5c;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 6px 14px rgba(216, 75, 92, 0.28);
}

@media (max-width: 900px) {
    .bl-side-nav-item {
        width: min(100%, 220px);
        min-height: 156px;
        padding: 1rem 0.8rem 0.95rem;
        border-radius: 24px;
    }

    .bl-side-nav-icon {
        width: 70px;
        height: 70px;
        border-radius: 20px;
    }

    .bl-side-nav-text {
        max-width: 9.5ch;
    }
}

@media (max-width: 640px) {
    .bl-sidenav {
        padding: 0.75rem 0.5rem 1rem;
    }

    .bl-sidenav__nav {
        gap: 0.85rem;
    }

    .bl-side-nav-item {
        width: min(100%, 200px);
        min-height: 142px;
        padding: 0.9rem 0.7rem 0.85rem;
        border-radius: 22px;
    }

    .bl-side-nav-icon {
        width: 64px;
        height: 64px;
        border-radius: 18px;
    }

    .bl-side-nav-text {
        max-width: 9ch;
    }

    .bl-side-nav-label {
        font-size: 0.92rem;
    }

    .bl-side-nav-subtitle {
        font-size: 0.76rem;
    }
}

.bl-search-shell {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 2rem auto;
}

.bl-search-hero {
    margin: 14px 0 18px;
    padding: 18px 20px;
    border-radius: 18px;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(29,69,141,0.10);
    box-shadow: var(--bl-shadow);
}

.bl-search-hero-main {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bl-search-title {
    margin: 0;
    font-size: 1.8rem;
    line-height: 1.2;
    color: var(--bl-blue-deep);
}

.bl-search-sub {
    margin: 0;
    color: var(--bl-muted);
    font-size: 0.95rem;
}

.bl-search-form {
    margin-top: 0.75rem;
    display: grid;
    gap: 0.9rem;
}

.bl-search-row {
    display: grid;
    gap: 0.75rem;
}

.bl-search-row--primary {
    grid-template-columns: minmax(0,1.4fr) minmax(0,1.1fr);
}

.bl-search-row--filters {
    grid-template-columns: repeat(5, minmax(0,1fr));
    align-items: end;
}

.bl-search-row--chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0.25rem;
}

.bl-search-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.bl-search-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--bl-muted);
}

.bl-search-label--small {
    font-size: 0.78rem;
}

.bl-search-input,
.bl-search-select {
    width: 95%;
    border-radius: 12px;
    border: 1px solid rgba(29,69,141,0.16);
    background: #fff;
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    color: var(--bl-text);
}

.bl-search-input::placeholder {
    color: rgba(106,118,136,0.75);
}

.bl-search-input--compact {
    padding: 0.45rem 0.6rem;
}

.bl-search-pill-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--bl-card-soft);
    border: 1px solid rgba(29,69,141,0.14);
}

.bl-search-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--bl-muted);
    cursor: pointer;
    margin-bottom: 0;
}

.bl-search-pill input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.bl-search-pill span {
    position: relative;
    z-index: 1;
}

.bl-search-pill input:checked + span {
    background: #fff;
    color: var(--bl-blue-deep);
    border-radius: inherit;
    padding: 0.18rem 0.6rem;
    box-shadow: 0 1px 4px rgba(29,69,141,0.18);
}

.bl-search-pill.is-disabled {
    opacity: 0.5;
    filter: grayscale(1);
}

.bl-search-pill.is-disabled span {
    cursor: pointer;
}

/* ⚠️ The base (non-compact) toggle is DUPLICATED in backlocal-base.css for
   index.php / index_alt.php, which do not load this file. Change both.

   The selected chip must FILL its half of the track.
   The checked style sits on the <span>, which carried its own padding while the
   <label> carried more — two nested paddings, so the white chip floated inside
   the track hugging only the words. Padding now lives on the span alone and the
   label is just the segment, with both states sharing one geometry so selecting
   cannot resize anything. Scoped away from --compact, which solves this
   separately under #searchdiv; this block serves search.php, index.php and
   unresearch.php, the pages still on the base toggle. */
.bl-search-pill-toggle:not(.bl-search-pill-toggle--compact) .bl-search-pill {
    flex: 1 1 50%;
    padding: 0;
    justify-content: center;
}

.bl-search-pill-toggle:not(.bl-search-pill-toggle--compact) .bl-search-pill span,
.bl-search-pill-toggle:not(.bl-search-pill-toggle--compact) .bl-search-pill input:checked + span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 34px;
    padding: 0.34rem 0.85rem;
    border-radius: 999px;
    line-height: 1.15;
    white-space: nowrap;
}

/* Phone: full width, and a tap target that clears the 44px guideline. */
@media (max-width: 600px) {
    .bl-search-pill-toggle:not(.bl-search-pill-toggle--compact) {
        display: flex;
        width: 100%;
    }

    .bl-search-pill-toggle:not(.bl-search-pill-toggle--compact) .bl-search-pill span,
    .bl-search-pill-toggle:not(.bl-search-pill-toggle--compact) .bl-search-pill input:checked + span {
        min-height: 40px;
    }
}

.bl-search-location-note {
    margin-top: 8px;
    font-size: 0.9rem;
    color: #777;
}

#zipWrapper {
    display: none;
}

.bl-search-group--submit {
    display: flex;
    justify-content: flex-end;
}

.bl-search-submit {
    min-width: 160px;
}

.bl-search-row--chips .bl-chip {
    font-size: 0.74rem;
    padding: 6px 10px;
}

.bl-chip--soft {
    background: rgba(29,69,141,0.06);
    color: var(--bl-blue);
}

/* Results cards */
.bl-search-results {
    display: grid;
    gap: 16px;
    margin-top: 1rem;
}

/* Ultra-compact profile search box with compact intro */
#searchdiv {
    margin-bottom: 18px;
}

#searchdiv .bl-search-shell--profile-compact {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 12px 16px 14px;
    background: #fff;
    border: 1px solid rgba(29, 69, 141, 0.08);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(29, 69, 141, 0.08);
}

#searchdiv .bl-search-intro--compact {
    margin-bottom: 10px;
}

#searchdiv .bl-search-intro--compact .bl-search-title {
    margin: 0 0 2px;
    font-size: 1.3rem;
    line-height: 1.1;
    color: #1d458d;
}

#searchdiv .bl-search-intro--compact .bl-search-sub {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.25;
    color: #62708a;
}

#searchdiv .bl-search-form--profile-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

/* Responsive flex row: keyword grows, the rest stay compact and wrap cleanly.
   No per-item top padding (legacy inline padding-top hacks are neutralized
   below) so every control sits on one aligned baseline. */
#searchdiv .bl-search-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

#searchdiv .bl-search-item {
    min-width: 0;
    margin: 0;
    padding-top: 0 !important;
}

#searchdiv .bl-search-item--keyword  { flex: 1 1 260px; }
#searchdiv .bl-search-item--toggle   { flex: 0 0 auto; }
#searchdiv .bl-search-item--zip      { flex: 0 0 120px; }
#searchdiv .bl-search-item--distance { flex: 0 0 120px; }
#searchdiv .bl-search-item--submit   { flex: 0 0 auto; }

#searchdiv .bl-search-input--compactbar,
#searchdiv .bl-search-select--compactbar {
    width: 100%;
    height: 40px;
    min-height: 40px;
    padding: 8px 14px;
    font-size: 0.92rem;
    color: #1f2d4a;
    background: #fff;
    border: 1px solid rgba(29, 69, 141, 0.22);
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#searchdiv .bl-search-input--compactbar::placeholder {
    color: #8a97ad;
}

#searchdiv .bl-search-input--compactbar:focus,
#searchdiv .bl-search-select--compactbar:focus {
    outline: none;
    border-color: #1d458d;
    box-shadow: 0 0 0 3px rgba(29, 69, 141, 0.14);
}

#searchdiv .bl-search-pill-toggle--compact {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 4px;
    border-radius: 999px;
}

#searchdiv .bl-search-pill-toggle--compact .bl-search-pill {
    height: 32px;
    /* The chip is the <span>; the <label> is only the segment holding it. The
       label was still inheriting the base .bl-search-pill padding (~9px
       vertical), so a span at height:100% could never reach the track edge and
       the selected chip rendered as a thin bar around the words. */
    padding: 0;
}

#searchdiv .bl-search-pill-toggle--compact .bl-search-pill span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Without these the span collapsed to its 14px line box, leaving the white
       chip floating in the middle of a 32px (desktop) / 40px (phone) segment. */
    width: 100%;
    height: 100%;
    padding: 0 14px;
    font-size: 0.86rem;
    line-height: 1;
    white-space: nowrap;
}

#searchdiv .bl-search-submit--compactbar {
    height: 40px;
    min-height: 40px;
    padding: 0 24px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    background: #1d458d;
    border: none;
    border-radius: 12px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease;
}

#searchdiv .bl-search-submit--compactbar:hover {
    background: #15336b;
}

#searchdiv .bl-search-permission-note {
    display: none;
    margin-top: 0;
    padding: 2px 2px 0;
    color: #6b7a90;
    font-size: 0.8rem;
    line-height: 1.2;
    border: 0;
    background: transparent;
}

#searchdiv .bl-search-pill.is-disabled {
    opacity: 0.55;
}

/* Tablet: search term takes its own full-width row; controls wrap below it. */
@media (max-width: 860px) {
    #searchdiv .bl-search-item--keyword { flex: 1 1 100%; }
    #searchdiv .bl-search-item--toggle  { flex: 1 1 auto; }
    #searchdiv .bl-search-item--zip,
    #searchdiv .bl-search-item--distance { flex: 1 1 120px; }
    #searchdiv .bl-search-item--submit  { flex: 1 1 auto; }
    #searchdiv .bl-search-submit--compactbar { width: 100%; }
}

/* Mobile: stack everything full width with comfortable touch targets. */
@media (max-width: 600px) {
    #searchdiv .bl-search-shell--profile-compact {
        padding: 12px;
    }

    #searchdiv .bl-search-intro--compact .bl-search-title {
        font-size: 1.15rem;
    }

    #searchdiv .bl-search-intro--compact .bl-search-sub {
        font-size: 0.84rem;
    }

    #searchdiv .bl-search-bar {
        gap: 8px;
    }

    #searchdiv .bl-search-item {
        flex: 1 1 100% !important;
    }

    #searchdiv .bl-search-pill-toggle--compact {
        width: 100%;
        justify-content: center;
        /* Let the pills set the height. The track was pinned to 40px — a 32px
           inner box — while the pills below were 38px, so they overflowed it. */
        height: auto;
    }

    #searchdiv .bl-search-pill-toggle--compact .bl-search-pill {
        flex: 1 1 50%;
        justify-content: center;
        height: 40px;
    }

    #searchdiv .bl-search-pill-toggle--compact .bl-search-pill span {
        width: 100%;
        height: 100%;
        justify-content: center;
    }

    #searchdiv .bl-search-input--compactbar,
    #searchdiv .bl-search-select--compactbar {
        height: 44px;
        min-height: 44px;
    }

    #searchdiv .bl-search-submit--compactbar {
        height: 46px;
        width: 100%;
    }
}

.bl-result-card {
    background: rgba(255,255,255,0.94);
    border-radius: var(--bl-radius-lg);
    border: 1px solid rgba(29,69,141,0.10);
    box-shadow: var(--bl-shadow);
    padding: 16px 18px;
}

.bl-result-main {
    display: grid;
    grid-template-columns: 82px minmax(0,1fr);
    gap: 14px;
    align-items: flex-start;
}

.bl-result-avatar {
    width: 82px;
    height: 82px;
    border-radius: 20px;
    overflow: hidden;
    background: #ece7df;
    border: 1px solid rgba(29,69,141,0.10);
    flex-shrink: 0;
}

.bl-result-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bl-result-body {
    display: grid;
    gap: 0.4rem;
}

.bl-result-header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.bl-result-title {
    margin: 0;
    font-size: 1.1rem;
    color: var(--bl-blue-deep);
}

.bl-result-rating-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(29,69,141,0.06);
    color: var(--bl-blue-deep);
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
}

.bl-result-rating-value {
    font-size: 0.95rem;
    font-weight: 800;
}

.bl-result-rating-label {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.8;
}

/* New business showing the baseline starting score (no customer ratings yet). */
.bl-result-rating-pill--new {
    background: rgba(18,137,76,0.10);
    color: #0f6b3b;
}

.bl-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--bl-muted);
}

.bl-result-tag {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(29,69,141,0.06);
    font-weight: 700;
}

.bl-result-tag--soft {
    background: rgba(29,69,141,0.03);
}

.bl-result-desc {
    margin: 0.2rem 0 0.25rem;
    font-size: 0.87rem;
    color: var(--bl-text);
    line-height: 1.5;
}

.bl-result-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

.bl-result-distance {
    color: var(--bl-muted);
    margin-right: 4rem;
}

.bl-result-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

.bl-result-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
}

.bl-result-status.is-open .bl-result-status-dot {
    background: #28a745;
    box-shadow: 0 0 8px rgba(40,167,69,0.55);
}

.bl-result-status.is-closed .bl-result-status-dot {
    background: #b24c4c;
    box-shadow: 0 0 8px rgba(178,76,76,0.45);
}

.bl-result-link {
    padding-inline: 14px;
    min-height: 34px;
    font-size: 0.8rem;
}

/* Responsive */
@media (max-width: 900px) {
    .bl-search-row--primary {
        grid-template-columns: 1fr;
    }

    .bl-search-row--filters {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .bl-result-main {
        grid-template-columns: 70px minmax(0,1fr);
    }

    .bl-result-avatar {
        width: 70px;
        height: 70px;
    }
}

@media (max-width: 540px) {
    .bl-search-hero {
        padding: 14px 14px;
    }

    .bl-search-row--filters {
        grid-template-columns: 1fr 1fr;
    }

    .bl-result-main {
        grid-template-columns: 64px minmax(0,1fr);
    }

    .bl-result-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

.bl-follow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 46px;
  padding: 0.78rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(29, 69, 141, 0.12);
  background: #ffffff;
  color: #1D458D;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  box-shadow: 0 10px 24px rgba(29, 69, 141, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.bl-follow-btn:hover,
.bl-follow-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(29, 69, 141, 0.14);
  outline: none;
}

.bl-follow-btn:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(29, 69, 141, 0.10);
}

.bl-follow-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.bl-follow-btn__text {
  display: inline-block;
  white-space: nowrap;
}

.bl-follow-btn--follow {
  background: linear-gradient(135deg, #1D458D 0%, #15376f 100%);
  border-color: rgba(29, 69, 141, 0.28);
  color: #ffffff;
}

.bl-follow-btn--follow:hover,
.bl-follow-btn--follow:focus-visible {
  background: rgba(45, 138, 82, 0.3);
  color: #2d8a52;
}

.bl-follow-btn__following {
  background: rgba(45, 138, 82, 0.10);
  border-color: rgba(45, 138, 82, 0.25);
  color: #2d8a52;
}

.bl-follow-btn__following:hover,
.bl-follow-btn__following:focus-visible {
  background: rgba(198, 74, 74, 0.10);
  border-color: rgba(198, 74, 74, 0.25);
  color: #c64a4a;
}

.bl-follow-btn__following:hover .bl-follow-btn__text,
.bl-follow-btn__following:focus-visible .bl-follow-btn__text {
  content: normal;
}

@media (max-width: 640px) {
  .bl-follow-btn {
    width: 100%;
    min-height: 48px;
    padding: 0.9rem 1rem;
    font-size: 0.95rem;
  }

  .bl-follow-btn__text {
    white-space: normal;
  }
}

.bl-result-footer-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bl-follow-form {
    margin: 0;
}

.bl-follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
}

.bl-follow-btn--follow {
    background: #1d458d;
    color: #fff;
}

.bl-follow-btn--following {
    background: rgba(29,69,141,0.08);
    color: #1d458d;
    border: 1px solid rgba(29,69,141,0.15);
}
/* =========================================================================
   Unified modal appearance — profile.php + management_dash.php only
   (scoped via the .bl-profile-page <body> class). Brings the legacy modals
   (rate, all-ratings, hours, services, gallery edit, description edit) up to
   the same polished card look as the status / menu modals, and aligns the
   shared chrome (radius, shadow, headings, close, primary buttons) so every
   modal reads as one consistent system. CSS only — no markup/JS changes.
   ========================================================================= */

/* Align the two already-polished families to a common radius + shadow. */
.bl-profile-page .modal-content.bl-modal-polish,
.bl-profile-page .bl-status-modal__content {
    border-radius: 18px !important;
    box-shadow: 0 22px 55px rgba(13, 25, 44, 0.22) !important;
}

/* Polished card shell for every legacy / edit modal (any modal content that
   is NOT one of the two already-polished variants). */
.bl-profile-page .modal_1 .modal-content:not(.bl-modal-polish):not(.bl-status-modal__content) {
    position: relative;
    width: min(640px, 94vw) !important;
    max-width: 640px;
    height: auto !important;
    max-height: 90vh;
    overflow: auto;
    margin: auto;
    background: #fff;
    border: 1px solid rgba(29, 69, 141, 0.10);
    border-radius: 18px;
    box-shadow: 0 22px 55px rgba(13, 25, 44, 0.22);
    padding: 28px 26px 30px;
}

/* Gallery-edit modal holds image thumbnails — give it a roomier shell. */
.bl-profile-page #myModalGalleryEdit .modal-content {
    width: min(860px, 94vw) !important;
    max-width: 860px;
}

/* Headings */
.bl-profile-page .modal_1 .modal-content:not(.bl-modal-polish):not(.bl-status-modal__content) h4 {
    color: #1D458D;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* Dividers */
.bl-profile-page .modal_1 .modal-content:not(.bl-modal-polish):not(.bl-status-modal__content) .sig_line {
    background: rgba(29, 69, 141, 0.15) !important;
    border: none !important;
    width: 100% !important;
    height: 1px !important;
}

/* Close control -> consistent top-right blue */
.bl-profile-page .modal_1 .modal-content:not(.bl-modal-polish):not(.bl-status-modal__content) .close {
    position: absolute;
    top: 14px;
    right: 18px;
    float: none;
    margin: 0;
    color: #1D458D;
    opacity: 0.6;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
.bl-profile-page .modal_1 .modal-content:not(.bl-modal-polish):not(.bl-status-modal__content) .close:hover {
    opacity: 1;
}
/* Modals that wrap the X in a .btn-close button: position the button, keep the
   inner span static so it does not double-position. */
.bl-profile-page .modal_1 .modal-content:not(.bl-modal-polish):not(.bl-status-modal__content) .btn-close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    background: transparent;
    border: none;
}
.bl-profile-page .modal_1 .modal-content:not(.bl-modal-polish):not(.bl-status-modal__content) .btn-close .close {
    position: static !important;
    top: auto !important;
    right: auto !important;
    font-size: 1.5rem;
}

/* Inputs / textareas */
.bl-profile-page .modal_1 .modal-content:not(.bl-modal-polish):not(.bl-status-modal__content) input[type="text"],
.bl-profile-page .modal_1 .modal-content:not(.bl-modal-polish):not(.bl-status-modal__content) input[type="number"],
.bl-profile-page .modal_1 .modal-content:not(.bl-modal-polish):not(.bl-status-modal__content) input[type="time/text"],
.bl-profile-page .modal_1 .modal-content:not(.bl-modal-polish):not(.bl-status-modal__content) textarea {
    border: 1px solid rgba(29, 69, 141, 0.25);
    border-radius: 8px;
    padding: 6px 9px;
    font-size: 0.95rem;
}
.bl-profile-page .modal_1 .modal-content:not(.bl-modal-polish):not(.bl-status-modal__content) input:focus,
.bl-profile-page .modal_1 .modal-content:not(.bl-modal-polish):not(.bl-status-modal__content) textarea:focus {
    outline: none;
    border-color: #1d458d;
    box-shadow: 0 0 0 3px rgba(29, 69, 141, 0.14);
}

/* Primary action buttons -> consistent blue pill across these modals */
.bl-profile-page .modal_1 .info,
.bl-profile-page .modal_1 .modal-content:not(.bl-status-modal__content) input[type="submit"] {
    background: #1D458D !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 10px 26px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: background 0.15s ease;
}
.bl-profile-page .modal_1 .info:hover,
.bl-profile-page .modal_1 .modal-content:not(.bl-status-modal__content) input[type="submit"]:hover {
    background: #15336b !important;
}

/* Destructive (gallery delete) -> red pill */
.bl-profile-page #myModalGalleryEdit .delete_img {
    background: #b24c4c !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 8px 20px !important;
}
.bl-profile-page #myModalGalleryEdit .delete_img:hover {
    background: #993e3e !important;
}

/* =========================================================================
   Bottom navigation — mobile tab bar (profile.php + management_dash.php)
   On desktop the left .bl-sidenav is used; below 1025px that sidebar is
   hidden so the bottom <footer> becomes the primary nav. The legacy markup
   used Bootstrap .row + inline vmax sizing + width:95%, which rendered badly
   on mobile. This restyles it into a clean BackLocal tab bar. CSS only,
   scoped to body.bl-profile-page > footer — no markup/JS changes, no bleed.
   ========================================================================= */
body.bl-profile-page > footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    min-height: 54px !important;
    height: auto !important;
    margin: 0 !important;
    /* max() keeps a real bar height even when the safe-area inset is 0, and
       lifts the bar above the iOS home indicator / bottom toolbar. */
    padding: 6px 0 max(8px, env(safe-area-inset-bottom)) !important;
    background: #ffffff !important;
    border-top: 1px solid rgba(29, 69, 141, 0.12) !important;
    box-shadow: 0 -6px 18px rgba(20, 34, 68, 0.10) !important;
    z-index: 2147483000 !important;
    -webkit-transform: translateZ(0); /* stabilize iOS fixed-layer painting */
            transform: translateZ(0);
}

/* ⚠️ Modals must sit ABOVE that bottom bar.
   `.modal_1` ships with z-index:999 (home.css), so the nav bar — at
   2147483000 — painted straight over the modal's lower edge. On a phone the
   edit modals are tall enough that the "Save" button lands in the bottom ~54px,
   which meant an owner tapping Save was really tapping whatever nav icon was
   underneath: hit-testing the Save button returned `i.fas.fa-chart-pie`, the
   Status icon. So the form could not be saved, and the tap silently did
   something else instead — worse than an inert button.

   Raising the overlay also puts its dark backdrop over the bar, which is the
   correct behaviour anyway: while a modal is open the nav should not be
   interactive. Kept below the status modal's 2147483600 so that one still wins
   if both are ever open. */
body.bl-profile-page .modal_1 {
    z-index: 2147483500;
}

/* Belt and braces: even above the bar, leave clearance so the last control is
   never flush against the screen edge (or the iOS home indicator). */
@media (max-width: 1025px) {
    body.bl-profile-page .modal_1 .bl-form-body {
        padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
    }
}

body.bl-profile-page > footer .footer-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: space-around !important;
    width: 100% !important;
    max-width: 560px;
    margin: 0 auto !important;
    gap: 0 !important;
}

body.bl-profile-page > footer .footer-nav > div {
    width: auto !important;
    flex: 1 1 0 !important;
    height: auto !important;
    text-align: center !important;
}

body.bl-profile-page > footer .footer-nav br {
    display: none !important;
}

body.bl-profile-page > footer .footer-nav a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 5px 2px !important;
    margin: 0 4px !important;
    color: #1D458D !important;
    text-decoration: none !important;
    border-radius: 14px !important;
    transition: background 0.15s ease;
}

body.bl-profile-page > footer .footer-nav a:hover,
body.bl-profile-page > footer .footer-nav a:focus {
    background: rgba(29, 69, 141, 0.08) !important;
}

body.bl-profile-page > footer .footer-nav i {
    position: relative !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
    color: #1D458D !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.bl-profile-page > footer .footer-nav span {
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.1 !important;
    color: #1D458D !important;
    text-transform: none !important;
}

/* Unread-messages badge nested in the bell icon */
body.bl-profile-page > footer .footer-nav .notification_badge_sm {
    position: absolute !important;
    top: -7px !important;
    right: -11px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    margin: 0 !important;
    background: #d84b5c !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    line-height: 16px !important;
    text-align: center !important;
}

/* Mobile (<=1025px): the bottom bar is fixed over the viewport, so reserve
   space at the foot of the page content — otherwise the last items scroll
   underneath the bar and are unreachable. max() keeps clearance above the
   iOS home indicator. */
@media (max-width: 1025px) {
    body.bl-profile-page .main_column_dash {
        padding-bottom: max(78px, calc(60px + env(safe-area-inset-bottom))) !important;
    }
}

/* Copyright line — the shared .info_copy_home rule sets width:140% on mobile,
   which overflows the viewport and pushes the text off-screen. Scope a fix to
   the profile / management pages so it sits centered and within the screen. */
@media (max-width: 1024px) {
    body.bl-profile-page .info_copy_home {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 16px;
        box-sizing: border-box;
        font-size: 0.74rem;
        line-height: 1.35;
        overflow-wrap: break-word;
    }
}

/* Gallery sizing — on phones the grid collapsed to a single column, making each
   image full-width and oversized. Use 2 compact columns instead (scoped to the
   profile/management pages, and high enough specificity to win regardless of
   source order). Also cap the zoom-preview height so it isn't huge on mobile. */
@media (max-width: 800px) {
    body.bl-profile-page .bl-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    body.bl-profile-page .bl-zoom-stage {
        min-height: 220px;
    }
}

/* Desktop (>1025px): the left sidebar is used, so hide the bottom bar. */
@media (min-width: 1026px) {
    body.bl-profile-page > footer {
        display: none !important;
    }
    body.bl-profile-page .main_column_dash {
        padding-bottom: 24px;
    }
}

/* =========================================================================
   Rating modal (myModal5) — refreshed look. Reuses the bl-modal-polish shell
   + gradient header, but constrained to a form-friendly width with custom
   rating sliders, live value badges, and a clean review area.
   ========================================================================= */
.bl-profile-page .modal-content.bl-rate-modal {
    width: min(520px, 94vw) !important;
    max-width: 520px;
}
.bl-profile-page .bl-rate-body {
    padding: 24px !important;
    background: #fff;
    text-align: left;
}
.bl-rate-row {
    margin-bottom: 20px;
}
.bl-rate-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
}
.bl-rate-label > span:first-child {
    font-weight: 800;
    color: var(--bl-blue-deep, #16376f);
    font-size: 0.95rem;
}
.bl-rate-value {
    min-width: 54px;
    text-align: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(29, 69, 141, 0.08);
    color: var(--bl-blue, #1d458d);
    font-weight: 800;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}
.bl-rate-slider {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 8px;
    margin: 0;
    border-radius: 999px;
    background: linear-gradient(to right, #d94141 0%, #efb106 50%, #2d9a49 100%);
    outline: none;
    cursor: pointer;
}
.bl-rate-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--bl-blue, #1d458d);
    box-shadow: 0 4px 10px rgba(13, 25, 44, 0.25);
    cursor: pointer;
}
.bl-rate-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--bl-blue, #1d458d);
    box-shadow: 0 4px 10px rgba(13, 25, 44, 0.25);
    cursor: pointer;
}
.bl-rate-divider {
    height: 1px;
    border: none;
    background: rgba(29, 69, 141, 0.12);
    margin: 22px 0 18px;
}
.bl-profile-page .bl-rate-modal #message_textarea {
    width: 100%;
    min-height: 96px;
    border: 1px solid rgba(29, 69, 141, 0.25);
    border-radius: 12px;
    padding: 11px 13px;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
}
.bl-profile-page .bl-rate-modal #message_textarea:focus {
    outline: none;
    border-color: var(--bl-blue, #1d458d);
    box-shadow: 0 0 0 3px rgba(29, 69, 141, 0.14);
}
.bl-rate-filerow {
    margin-top: 14px;
}
.bl-profile-page .bl-rate-modal input[type="file"] {
    font-size: 0.85rem;
    color: var(--bl-muted, #5b6472);
    max-width: 100%;
}
.bl-profile-page .bl-rate-modal input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 9px 16px;
    border: none;
    border-radius: 12px;
    background: var(--bl-blue, #1d458d);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s ease;
}
.bl-profile-page .bl-rate-modal input[type="file"]::file-selector-button:hover {
    background: var(--bl-blue-dark, #16376f);
}
.bl-profile-page .bl-rate-modal input[type="file"]::-webkit-file-upload-button {
    margin-right: 12px;
    padding: 9px 16px;
    border: none;
    border-radius: 12px;
    background: var(--bl-blue, #1d458d);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}
.bl-rate-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}
.bl-profile-page .bl-rate-modal .bl-rate-submit {
    flex: 1;
    background: var(--bl-blue, #1d458d) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 12px 24px !important;
    font-weight: 800 !important;
    font-size: 0.98rem !important;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.bl-profile-page .bl-rate-modal .bl-rate-submit:hover {
    background: var(--bl-blue-dark, #16376f) !important;
    transform: translateY(-1px);
}
.bl-rate-seeall {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 8px;
    border: none;
    background: transparent;
    color: var(--bl-blue, #1d458d);
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: underline;
    cursor: pointer;
}
.bl-rate-seeall:hover {
    color: var(--bl-blue-dark, #16376f);
}
@media (max-width: 540px) {
    .bl-rate-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* =========================================================================
   Ratings list modal (myModal7) — refreshed look. Shares the bl-modal-polish
   shell + gradient header; body is a scrollable list of clean rating cards
   injected by rating_page.php, with a pill pagination row.
   ========================================================================= */
.bl-profile-page .modal-content.bl-ratings-modal {
    /* width/height/overflow use !important to override the legacy #info_modal
       ID rule in home.css (width:60%; height:90%; overflow:scroll). */
    width: min(560px, 94vw) !important;
    max-width: 560px;
    height: auto !important;
    max-height: 86vh;
    overflow: hidden !important;
}
.bl-profile-page .bl-ratings-body {
    padding: 0 !important;
    background: #fff;
    max-height: 70vh;
    overflow-y: auto;
}
.bl-profile-page .bl-ratings-body .rating_page {
    padding: 6px 0;
}
.bl-rating-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(29, 69, 141, 0.08);
}
.bl-rating-item:last-child {
    border-bottom: none;
}
.bl-rating-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: #e9edf4;
    border: 1px solid rgba(29, 69, 141, 0.10);
}
.bl-rating-main {
    min-width: 0;
}
.bl-rating-name {
    font-weight: 800;
    color: var(--bl-blue-deep, #16376f);
    font-size: 0.98rem;
    margin-bottom: 6px;
}
.bl-rating-comment {
    margin: 0 0 8px;
    color: var(--bl-text, #2a2f3a);
    line-height: 1.55;
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}
.bl-rating-photo {
    display: block;
    max-width: 150px;
    max-height: 150px;
    border-radius: 10px;
    margin: 0 0 8px;
    border: 1px solid rgba(29, 69, 141, 0.10);
}
.bl-rating-date {
    color: var(--bl-muted, #6b7280);
    font-size: 0.78rem;
}
.bl-rating-scores {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}
.bl-rating-score {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--bl-muted, #6b7280);
    white-space: nowrap;
}
.bl-rating-score strong {
    min-width: 46px;
    text-align: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(29, 69, 141, 0.08);
    color: var(--bl-blue, #1d458d);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}
.bl-ratings-empty {
    padding: 44px 22px;
    text-align: center;
    color: var(--bl-muted, #6b7280);
    font-weight: 600;
}

/* Business-owner response to a customer review */
.bl-owner-reply {
    margin: 10px 0 4px;
    padding: 10px 14px;
    background: rgba(29, 69, 141, 0.05);
    border-left: 3px solid var(--bl-blue, #1d458d);
    border-radius: 8px;
}
.bl-owner-reply-head {
    font-weight: 800;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bl-blue, #1d458d);
    margin-bottom: 4px;
}
.bl-owner-reply-head i {
    margin-right: 4px;
}
.bl-owner-reply-date {
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--bl-muted, #6b7280);
}
.bl-owner-reply-body {
    color: var(--bl-text, #2a2f3a);
    line-height: 1.55;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}
/* Owner-only reply form */
.bl-owner-reply-form {
    margin-top: 10px;
}
.bl-owner-reply-input {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 44px;
    padding: 9px 11px;
    border: 1px solid rgba(29, 69, 141, 0.20);
    border-radius: 8px;
    font: inherit;
    font-size: 0.9rem;
    color: var(--bl-text, #2a2f3a);
}
.bl-owner-reply-input:focus {
    outline: none;
    border-color: var(--bl-blue, #1d458d);
    box-shadow: 0 0 0 3px rgba(29, 69, 141, 0.12);
}
.bl-owner-reply-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.bl-owner-reply-save {
    background: var(--bl-blue, #1d458d);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 7px 18px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}
.bl-owner-reply-save:hover { background: var(--bl-blue-deep, #16376f); }
.bl-owner-reply-save:disabled { opacity: 0.6; cursor: default; }
.bl-owner-reply-delete {
    background: transparent;
    color: var(--bl-muted, #6b7280);
    border: 1px solid rgba(29, 69, 141, 0.20);
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
}
.bl-owner-reply-delete:hover { color: #b3261e; border-color: rgba(179, 38, 30, 0.4); }
.bl-owner-reply-status {
    font-size: 0.82rem;
    color: var(--bl-muted, #6b7280);
}
.bl-owner-reply-status.is-error { color: #b3261e; }
.bl-owner-reply-upsell {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(29, 69, 141, 0.06);
    border: 1px dashed rgba(29, 69, 141, 0.28);
    border-radius: 12px;
    font-size: 0.85rem;
}
.bl-owner-reply-upsell-text { color: var(--bl-muted, #6b7280); }
.bl-owner-reply-upsell-cta {
    background: var(--bl-blue, #1d458d);
    color: #fff;
    border-radius: 999px;
    padding: 6px 16px;
    font-weight: 700;
    font-size: 0.82rem;
    text-decoration: none;
    white-space: nowrap;
}
.bl-owner-reply-upsell-cta:hover { background: var(--bl-blue-deep, #16376f); }
.bl-profile-page .bl-ratings-body .pagination-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 16px;
}
.bl-profile-page .bl-ratings-body .pagination-links:empty {
    display: none;
}
.bl-profile-page .bl-ratings-body .pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    background: rgba(29, 69, 141, 0.06);
    color: var(--bl-blue, #1d458d) !important;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none !important;
    transition: background 0.15s ease;
}
.bl-profile-page .bl-ratings-body .pagination-link:hover {
    background: rgba(29, 69, 141, 0.14);
}
/* Messages modal (#myModal8) "Load more" — match the design-system pill button */
#myModal8 .pagination-links {
    display: flex;
    justify-content: center;
}
#myModal8 .pagination-links:empty {
    display: none;
}
#myModal8 .pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid rgba(29, 69, 141, 0.14);
    border-radius: 999px;
    background: rgba(29, 69, 141, 0.06);
    color: var(--bl-blue, #1d458d) !important;
    font-weight: 800;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none !important;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
#myModal8 .pagination-link:hover {
    background: rgba(29, 69, 141, 0.12);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(29, 69, 141, 0.12);
}
#myModal8 .pagination-link:active {
    transform: translateY(0);
    box-shadow: none;
}
#myModal8 .pagination-link:focus-visible {
    outline: 2px solid var(--bl-blue, #1d458d);
    outline-offset: 2px;
}
@media (max-width: 540px) {
    .bl-rating-item {
        grid-template-columns: 40px minmax(0, 1fr);
    }
    .bl-rating-avatar {
        width: 40px;
        height: 40px;
    }
    .bl-rating-scores {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
    }
}

/* =========================================================================
   Shared edit/form modals (myModal1 hours, myModal2 services, gallery, desc)
   — give every owner-edit modal the same bl-modal-polish look + gradient
   header + clean form controls as myModal5 / myModal7.
   ========================================================================= */
.bl-profile-page .modal-content.bl-form-modal {
    width: min(560px, 94vw) !important;
    max-width: 560px;
    height: auto !important;
    max-height: 88vh;
    overflow: hidden !important;
}
.bl-profile-page .modal-content.bl-form-modal--wide {
    width: min(680px, 94vw) !important;
    max-width: 680px;
}
.bl-profile-page .bl-form-body {
    padding: 22px 24px 26px !important;
    background: #fff;
    max-height: 78vh;
    overflow-y: auto;
    text-align: left;
}
.bl-form-intro {
    margin: 0 0 18px;
    color: var(--bl-muted, #6b7280);
    font-size: 0.92rem;
    line-height: 1.55;
}
.bl-form-intro strong {
    color: var(--bl-blue-deep, #16376f);
}
.bl-profile-page .bl-form-body input[type="text"],
.bl-profile-page .bl-form-body input[type="number"],
.bl-profile-page .bl-form-body input[type="url"],
.bl-profile-page .bl-form-body select,
.bl-profile-page .bl-form-body textarea {
    width: 100%;
    border: 1px solid rgba(29, 69, 141, 0.25);
    border-radius: 10px;
    padding: 9px 11px;
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--bl-text, #2a2f3a);
    background: #fff;
    box-sizing: border-box;
}
.bl-profile-page .bl-form-body select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231d458d' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 12px;
    padding-right: 32px;
    cursor: pointer;
}
.bl-profile-page .bl-form-body input:focus,
.bl-profile-page .bl-form-body select:focus,
.bl-profile-page .bl-form-body textarea:focus {
    outline: none;
    border-color: var(--bl-blue, #1d458d);
    box-shadow: 0 0 0 3px rgba(29, 69, 141, 0.14);
}
.bl-profile-page .bl-form-body textarea {
    min-height: 130px;
    line-height: 1.5;
    resize: vertical;
}
.bl-form-footer {
    margin-top: 20px;
}
.bl-form-charcount {
    text-align: right;
    color: var(--bl-muted, #6b7280);
    font-size: 0.78rem;
    margin: 6px 2px 0;
}
.bl-profile-page .bl-modal-submit {
    display: block;
    width: 100%;
    background: var(--bl-blue, #1d458d) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 12px 24px !important;
    font-weight: 800 !important;
    font-size: 0.98rem !important;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.bl-profile-page .bl-modal-submit:hover {
    background: var(--bl-blue-dark, #16376f) !important;
    transform: translateY(-1px);
}
.bl-profile-page .bl-modal-delete {
    display: inline-block;
    background: #b24c4c !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 11px 26px !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    cursor: pointer;
    transition: background 0.15s ease;
}
.bl-profile-page .bl-modal-delete:hover {
    background: #993e3e !important;
}

/* ---- Hours editor (myModal1) ---- */
.bl-hours-edit {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bl-hours-edit-row {
    display: grid;
    grid-template-columns: 92px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(29, 69, 141, 0.10);
    border-radius: 12px;
    background: var(--bl-card-soft, #f7f4ef);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.bl-hours-edit-day {
    font-weight: 800;
    color: var(--bl-blue-deep, #16376f);
    font-size: 0.9rem;
}
.bl-hours-edit-times {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.bl-hours-edit-times .bl-hours-select {
    flex: 1;
    min-width: 0;
}
.bl-hours-sep {
    color: var(--bl-muted, #6b7280);
    font-size: 0.8rem;
    font-weight: 700;
}
.bl-hours-closed-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 700;
    color: var(--bl-muted, #6b7280);
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
}
.bl-hours-closed-toggle input {
    width: 16px;
    height: 16px;
    accent-color: var(--bl-blue, #1d458d);
    cursor: pointer;
}
.bl-hours-edit-row.is-closed {
    background: rgba(178, 76, 76, 0.06);
    border-color: rgba(178, 76, 76, 0.22);
}
.bl-hours-edit-row.is-closed .bl-hours-edit-times {
    opacity: 0.4;
    pointer-events: none;
}
.bl-hours-edit-row.is-closed .bl-hours-closed-toggle {
    color: #b24c4c;
}
.bl-hours-closed-toggle input {
    accent-color: var(--bl-blue, #1d458d);
}
.bl-hours-edit-row.is-closed .bl-hours-closed-toggle input {
    accent-color: #b24c4c;
}
.bl-hours-special {
    margin-top: 16px;
}
.bl-hours-special label {
    display: block;
    font-weight: 800;
    color: var(--bl-blue-deep, #16376f);
    font-size: 0.9rem;
    margin-bottom: 6px;
}

/* ---- Services checklist (myModal2) ---- */
.bl-serv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.bl-serv-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 11px 13px;
    border: 1px solid rgba(29, 69, 141, 0.12);
    border-radius: 12px;
    background: var(--bl-card-soft, #f7f4ef);
    cursor: pointer;
    font-weight: 700;
    color: var(--bl-blue-deep, #16376f);
    font-size: 0.9rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.bl-serv-item:hover {
    border-color: rgba(29, 69, 141, 0.30);
}
.bl-serv-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--bl-blue, #1d458d);
    cursor: pointer;
    flex: none;
}
.bl-serv-item i {
    margin-left: auto;
    color: var(--bl-blue, #1d458d);
}
.bl-serv-sub {
    margin-top: 18px;
}
.bl-serv-sub h5 {
    color: var(--bl-blue-deep, #16376f);
    font-weight: 800;
    font-size: 1rem;
    margin: 0 0 4px;
}
.bl-serv-sub p {
    color: var(--bl-muted, #6b7280);
    font-size: 0.84rem;
    margin: 0 0 12px;
}
.bl-serv-field {
    margin-top: 12px;
}
.bl-serv-field label {
    display: block;
    font-weight: 700;
    color: var(--bl-blue-deep, #16376f);
    font-size: 0.86rem;
    margin-bottom: 5px;
}

/* ---- Gallery editor (myModalGalleryEdit) ---- */
.bl-gallery-edit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
    margin: 4px 0 18px;
}
.bl-gallery-edit-tile {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(29, 69, 141, 0.10);
}
.bl-gallery-edit-tile img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}
.bl-gallery-edit-check {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 22px;
    height: 22px;
    accent-color: #b24c4c;
    cursor: pointer;
}
.bl-gallery-edit-empty {
    padding: 32px 16px;
    text-align: center;
    color: #b24c4c;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 540px) {
    .bl-hours-edit-row {
        grid-template-columns: 1fr auto;
        row-gap: 8px;
    }
    .bl-hours-edit-times {
        grid-column: 1 / -1;
        order: 3;
    }
    .bl-serv-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   Account / settings page (update_info.php) — form cards styled to match the
   bl-* design system (same fonts, inputs, pill buttons as the modals).
   ========================================================================= */
.bl-settings-avatar {
    text-align: center;
    margin-bottom: 4px;
}
.bl-settings-avatar img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(29, 69, 141, 0.12);
    box-shadow: 0 10px 24px rgba(13, 25, 44, 0.12);
    background: #e9edf4;
}
.bl-settings-avatar a {
    display: inline-block;
    margin-top: 12px;
    color: var(--bl-blue, #1d458d);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: underline;
}
.bl-form-section-title {
    color: var(--bl-blue-deep, #16376f);
    font-weight: 800;
    font-size: 1.15rem;
    margin: 0 0 14px;
}
.bl-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}
.bl-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.bl-field--full {
    grid-column: 1 / -1;
}
.bl-field > label {
    font-weight: 700;
    color: var(--bl-blue-deep, #16376f);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.bl-profile-page .bl-field input:not([type="checkbox"]),
.bl-profile-page .bl-field select {
    width: 100%;
    border: 1px solid rgba(29, 69, 141, 0.25);
    border-radius: 10px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 0.93rem;
    color: var(--bl-text, #2a2f3a);
    background: #fff;
    box-sizing: border-box;
}
.bl-profile-page .bl-field select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231d458d' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 12px;
    padding-right: 32px;
    cursor: pointer;
}
.bl-profile-page .bl-field input:focus,
.bl-profile-page .bl-field select:focus {
    outline: none;
    border-color: var(--bl-blue, #1d458d);
    box-shadow: 0 0 0 3px rgba(29, 69, 141, 0.14);
}
.bl-profile-page .bl-field input:disabled {
    background: #f3f4f6;
    color: #9aa1ad;
    cursor: not-allowed;
}
.bl-field-error {
    color: #b24c4c;
    font-size: 0.78rem;
    font-weight: 600;
}
.bl-form-msg {
    margin: 0 0 16px;
    padding: 11px 14px;
    border-radius: 12px;
    background: rgba(45, 154, 73, 0.10);
    border: 1px solid rgba(45, 154, 73, 0.30);
    color: #1f7a3a;
    font-weight: 700;
    font-size: 0.9rem;
}
.bl-form-msg--error {
    background: rgba(178, 76, 76, 0.08);
    border-color: rgba(178, 76, 76, 0.30);
    color: #b24c4c;
}
.bl-profile-page .bl-field > label.bl-copy-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 9px;
    margin: 4px 0 2px;
    font-weight: 600;
    color: var(--bl-muted, #5b6472);
    font-size: 0.88rem;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}
.bl-copy-toggle input {
    width: 17px;
    height: 17px;
    accent-color: var(--bl-blue, #1d458d);
    cursor: pointer;
}
.bl-divider-soft {
    height: 1px;
    border: none;
    background: rgba(29, 69, 141, 0.10);
    margin: 22px 0;
}
.bl-form-footer .bl-modal-submit {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}
/* status modal (myModal3) toggle rows on update_info */
.bl-status-q {
    margin: 0 0 4px;
    font-weight: 700;
    color: var(--bl-blue-deep, #16376f);
    font-size: 0.95rem;
    text-align: center;
}
@media (max-width: 600px) {
    .bl-form-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   Customer home (profile_user.php): search, hero, ticker, Top grid
   =================================================================== */

/* --- Identity hero --- */
.bl-user-hero { padding: 1.25rem 1.4rem; }
.bl-user-hero__id { display: flex; align-items: center; gap: 1.1rem; }
.bl-user-hero__avatar { width: 84px; height: 84px; flex-shrink: 0; }
.bl-user-hero__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.bl-user-hero__sub { color: #5b6470; margin: 0.25rem 0 0.7rem; font-size: 0.95rem; }

/* --- Notification ticker (horizontal marquee) --- */
.bl-noti-ticker {
    display: flex; align-items: stretch; gap: 0;
    background: linear-gradient(135deg, #1d458d, #16376f);
    border-radius: 12px; overflow: hidden; margin: 0 0 1.25rem;
    box-shadow: 0 2px 6px rgba(29,69,141,.18);
}
.bl-noti-ticker__label {
    display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0;
    background: rgba(255,255,255,.14); color: #fff; font-weight: 800;
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
    padding: 0 0.95rem; white-space: nowrap;
}
.bl-noti-ticker__viewport { position: relative; overflow: hidden; flex: 1; }
.bl-noti-ticker__track {
    display: inline-flex; align-items: center; white-space: nowrap;
    padding: 0.6rem 0; will-change: transform;
    animation-name: bl-ticker-scroll; animation-timing-function: linear; animation-iteration-count: infinite;
}
.bl-noti-ticker:hover .bl-noti-ticker__track { animation-play-state: paused; }
.bl-noti-ticker__item { display: inline-flex; align-items: center; gap: 0.45rem; color: #fff; text-decoration: none; padding: 0 0.4rem; }
.bl-noti-ticker__item:hover .bl-noti-ticker__biz { text-decoration: underline; }
.bl-noti-ticker__pic { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.bl-noti-ticker__biz { font-weight: 700; color: #fff; }
.bl-noti-ticker__msg { color: rgba(255,255,255,.9); }
.bl-noti-ticker__sep { color: rgba(255,255,255,.45); padding: 0 0.7rem; }
@keyframes bl-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bl-noti-ticker__track { animation: none; } }

/* --- Top businesses grid --- */
.bl-user-top__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.bl-user-top__count { font-size: 0.8rem; font-weight: 700; color: #1d458d; background: rgba(29,69,141,.08); border-radius: 999px; padding: 0.2rem 0.6rem; }
/* Fixed column counts that divide 12 evenly (6/4/3/2) so the Top set always
   lays out in clean, full rows; grid-auto-rows:1fr keeps every row equal height. */
.bl-fav-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; gap: 0.85rem; margin-top: 1rem; }
@media (max-width: 1024px) { .bl-fav-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px)  { .bl-fav-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px)  { .bl-fav-grid { grid-template-columns: repeat(2, 1fr); } }
.bl-fav-tile {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
    height: 100%; background: #fff; border: 1px solid #e7e2d8; border-radius: 14px; padding: 0.95rem 0.6rem;
    cursor: pointer; transition: transform 140ms ease, box-shadow 140ms ease; text-align: center;
}
.bl-fav-tile:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,.10); }
.bl-fav-tile.is-unread { border-color: #9bd9b4; box-shadow: 0 0 0 2px rgba(18,137,76,.18); }
.bl-fav-tile__img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
/* Reserve two lines for the name so single- and double-line tiles align, and
   clamp longer names instead of letting them push the status pill around. */
.bl-fav-tile__name { font-weight: 700; font-size: 0.85rem; color: #27364a; line-height: 1.2; width: 100%; min-height: 2.05em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* margin-top:auto pins the status to the tile bottom, so pills line up across the whole grid. */
.bl-fav-tile__status { margin-top: auto; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 999px; padding: 0.12rem 0.5rem; }
.bl-fav-tile__status.is-open { color: #0f6b3b; background: rgba(18,137,76,.12); }
.bl-fav-tile__status.is-closed { color: #b24c4c; background: rgba(178,76,76,.12); }
.bl-fav-tile__dot { position: absolute; top: 8px; right: 8px; width: 11px; height: 11px; border-radius: 50%; background: #12894c; box-shadow: 0 0 0 2px #fff; }

@media (max-width: 560px) {
    .bl-user-hero__id { flex-direction: column; text-align: center; }
    .bl-noti-ticker__label { font-size: 0.68rem; padding: 0 0.6rem; }
}

/* --- Location-aware Top sets (Phase 2) --- */
.bl-flash { background: #fff3cd; border: 1px solid #ffe08a; border-left: 4px solid #b8860b; border-radius: 10px; padding: 0.7rem 1rem; margin: 0 0 1rem; color: #6b5200; font-size: 0.92rem; }
.bl-user-top__bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.7rem 1.1rem 0; }
.bl-user-top__loc { font-size: 0.82rem; font-weight: 700; color: #1d458d; }
.bl-user-top__area { font-weight: 600; font-size: 0.85rem; color: var(--bl-text-muted, #5b6470); }
.bl-linkbtn { border: 0; background: none; color: #1d458d; font-weight: 700; font-size: 0.82rem; cursor: pointer; text-decoration: underline; padding: 0; }
.bl-linkbtn:hover { color: #16376f; }
.bl-travel-prompt { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; background: #eef4ff; border: 1px solid #c7dcff; border-left: 4px solid #1d458d; border-radius: 12px; padding: 0.85rem 1rem; margin: 0.4rem 0 1rem; }
.bl-travel-prompt p { margin: 0; color: #27364a; font-size: 0.92rem; line-height: 1.5; }
.bl-travel-prompt i { color: #1d458d; }
.bl-top-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1rem; padding: 0.7rem 0.9rem; border-radius: 10px; background: rgba(29,69,141,0.05); font-size: 0.88rem; color: #3a4658; }
.bl-top-cap i { color: #0f6b3b; }
.bl-top-cap .bl-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---- Shared business card (following.php style) — used by following.php and the
   customer-home "My Top" / "Following" tabs (via bl_render_business_card). ---- */
.bl-follow-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.bl-follow-card { display: flex; gap: 14px; background: #fff; border: 1px solid #e7e2d8; border-radius: 14px; padding: 16px; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
/* Green outline for a business with a new, unseen post — maintained on My Top and Following. */
.bl-follow-card--new { border-color: #12894c; box-shadow: 0 0 0 2px rgba(18,137,76,.30), 0 2px 10px rgba(0,0,0,.04); }
.bl-follow-card__img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e7e2d8; }
.bl-follow-card__body { flex: 1; min-width: 0; }
.bl-follow-card__name { font-weight: 800; color: #1D458D; font-size: 1.05rem; text-decoration: none; }
.bl-follow-card__name:hover { text-decoration: underline; }
.bl-follow-meta { display: flex; align-items: center; gap: 8px; margin: 5px 0; flex-wrap: wrap; }
.bl-status-pill { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: .14rem .55rem; }
.bl-status-pill.is-open { color: #0f6b3b; background: rgba(18,137,76,.12); }
.bl-status-pill.is-closed { color: #b24c4c; background: rgba(178,76,76,.12); }
.bl-rating-chip { font-size: .78rem; font-weight: 700; color: #475569; }
.bl-rating-chip span { color: #b91c1c; }
.bl-follow-card__desc { color: #475569; font-size: .85rem; line-height: 1.4; margin: 6px 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-new-post { display: inline-flex; align-items: center; gap: 5px; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #0f6b3b; background: rgba(18,137,76,.12); border-radius: 999px; padding: .14rem .55rem; }
.bl-new-post i { font-size: .5rem; }
.bl-in-top { font-size: .7rem; font-weight: 800; color: #0f6b3b; text-transform: uppercase; letter-spacing: .04em; }
.bl-follow-post { display: block; width: 100%; text-align: left; margin: 0 0 10px; padding: 8px 11px; border: 1px solid #e7e2d8; border-radius: 10px; background: #f7f9fc; cursor: pointer; transition: background .12s, border-color .12s; }
.bl-follow-post:hover { background: #eef3fb; border-color: #cfdcf0; }
.bl-follow-post__tag { display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; padding: 5px 11px; border-radius: 999px; background: linear-gradient(135deg, #ff3d2e, #ff8a00 55%, #ffd13a); box-shadow: 0 4px 12px rgba(255,61,46,.35); animation: bl-deal-pulse 1.6s ease-in-out infinite; }
.bl-follow-post__tag i { margin-right: 0; }
/* Upcoming/scheduled deal — calm blue, no pulse (it isn't active yet). */
.bl-follow-post__tag.is-upcoming { color: #16376f; background: rgba(29,69,141,.12); box-shadow: none; animation: none; }
.bl-follow-post__snippet { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #475569; font-size: .85rem; line-height: 1.35; }
.bl-follow-post__main { display: flex; gap: 10px; align-items: flex-start; }
.bl-follow-post__main .bl-follow-post__snippet { flex: 1 1 auto; min-width: 0; }
.bl-follow-post__thumb { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 8px; object-fit: cover; border: 1px solid #e2e8f0; background: #eef3fb; }
.bl-follow-post__thumb--file { display: inline-flex; align-items: center; justify-content: center; color: #1D458D; font-size: 1.05rem; }
.bl-follow-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bl-follow-actions form { margin: 0; }

/* Deal + actions band — the New Deal post and the hero action buttons now sit
   between the hero and the Ratings card rather than inside the hero. It reuses
   .bl-hero so the existing white-on-dark styling (including the flip card's
   inline styles) keeps working; this modifier just tightens the spacing. */
.bl-hero--band {
    margin-bottom: 20px;
    padding: 20px 24px;
}
.bl-hero--band .bl-hero-actions { margin-top: 14px; }
.bl-hero--band .bl-hero-post { max-width: none; }

/* Testimonials imported from the owner's own website (AI-assisted registration).
   Rendered by rating_page.php UNDER the BackLocal reviews, visibly different from a
   review card: no avatar, no scores, quiet background, explicit source label. */
.bl-testimonials { margin-top: 18px; padding: 14px 16px 6px; border-radius: 14px; background: #f5f2ec; border: 1px dashed #d9d0c2; }
.bl-testimonials-head { display: grid; gap: 2px; margin-bottom: 10px; }
.bl-testimonials-head strong { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #5a6472; }
.bl-testimonials-head span { font-size: .84rem; color: #5a6472; line-height: 1.4; }
.bl-testimonial { margin: 0 0 12px; padding: 0 0 0 12px; border-left: 3px solid #cdb9a0; font-size: .95rem; line-height: 1.5; color: #2f3b46; font-style: italic; }
.bl-testimonial footer { margin-top: 4px; font-size: .8rem; font-style: normal; color: #5a6472; }
.bl-testimonial footer a { color: #1b5fb3; }