/* ==========================================================================
   Listing page (public/l) — scoped under .listing-page
   Clean, minimalist, MarketDental brand palette.
   ========================================================================== */

.listing-page {
  /* Brand (MarketDental) */
  --md-primary: #f15d22;
  --md-primary-rgb: 241, 93, 34;
  --md-primary-hover: #db4f17;
  --md-primary-active: #c2440f;
  --md-secondary: #4d5259;

  /* Apple-like neutrals */
  --md-ink: #1d1d1f;
  --md-text: #424245;
  --md-muted: #86868b;
  --md-bg:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.01) 0%,
      rgba(252, 252, 252, 1) 85%
    ),
    radial-gradient(
      ellipse at top left,
      rgba(13, 110, 253, 0.25),
      transparent 50%
    ),
    radial-gradient(
      ellipse at top right,
      rgba(255, 228, 132, 0.25),
      transparent 50%
    ),
    radial-gradient(
      ellipse at center right,
      rgba(112, 44, 249, 0.25),
      transparent 50%
    ),
    radial-gradient(
      ellipse at center left,
      rgba(214, 51, 132, 0.25),
      transparent 50%
    );
  --bs-body-bg: #ffffff;
  --md-surface: #ffffff;
  --md-surface-2: #f5f5f7;
  --md-border: #e6e6eb;
  --md-gold: #f5a623;

  /* Shape & depth */
  --md-radius: 22px;
  --md-radius-sm: 14px;
  --md-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.05);
  --md-shadow:
    0 10px 30px -12px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.04);
  --md-ease: cubic-bezier(0.4, 0, 0.2, 1);

  font-family: var(--bs-font-sans-serif);
  background: var(--md-bg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: var(--md-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

/* Keep the page a single background: the body's fixed gradient fills the
   viewport, and the document root matches it so there is no seam. */
html:has(.listing-page) {
  background-color: #fcfcfc;
}

html:has(.listing-page[data-bs-theme="dark"]),
html[data-bs-theme="dark"]:has(.listing-page),
[data-bs-theme="dark"] html:has(.listing-page) {
  background-color: #000;
}

.listing-page .listing-container {
  max-width: 720px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* --------------------------------------------------------------------------
   Sticky top bar (brand attribution + persistent CTA)
   -------------------------------------------------------------------------- */
.listing-page .listing-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--md-border);
}

.listing-page .listing-poweredby {
  color: var(--md-muted);
  font-size: 0.8125rem;
  font-weight: 400;
}

.listing-page .listing-poweredby strong {
  color: var(--md-ink);
}

.listing-page .listing-poweredby .bi {
  color: var(--md-primary);
}

.listing-page .listing-topbar .btn-sm {
  padding: 0.35rem 0.9rem;
}

/* --------------------------------------------------------------------------
   Theme toggle
   -------------------------------------------------------------------------- */
.listing-page #theme-toggle {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--md-muted) !important;
  transition:
    background-color 0.2s var(--md-ease),
    color 0.2s var(--md-ease);
}

.listing-page #theme-toggle:hover {
  background-color: var(--md-surface-2);
  color: var(--md-ink) !important;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.listing-page .listing-hero {
  padding: 2.5rem 1rem 1rem;
}

.listing-page .listing-logo {
  max-height: 110px;
  width: auto;
  margin-bottom: 1.25rem !important;
}

.listing-page .listing-hero-title {
  font-size: clamp(1.6rem, 5vw, 2.25rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--md-ink);
}

.listing-page .listing-hero-location {
  font-size: 0.95rem;
  color: var(--md-muted) !important;
}

/* Big rating number */
.listing-page .listing-hero .display-1,
.listing-page .listing-hero-number {
  /* font-weight: 700; */
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--md-ink);
  margin-bottom: 0.35rem;
}

.listing-page .listing-stars {
  letter-spacing: 0.08em;
}

.listing-page .listing-hero-stars {
  font-size: 1.4rem;
  gap: 0.15rem;
  color: var(--md-gold) !important;
}

.listing-page .listing-hero-count {
  font-size: 1rem;
  margin-top: 0.5rem;
  color: var(--md-muted) !important;
}

.listing-page .listing-hero-count strong {
  color: var(--md-ink);
}

.listing-page .listing-hero-trust {
  color: var(--md-muted) !important;
}

.listing-page .listing-hero-trust .bi {
  color: var(--md-primary);
}

.listing-page .listing-hero .text-secondary {
  color: var(--md-muted) !important;
}

/* --------------------------------------------------------------------------
   Stat summary cards
   -------------------------------------------------------------------------- */
.listing-page .listing-stats {
  margin: 0.5rem 0 1.5rem;
}

.listing-page .listing-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1.25rem 0.75rem;
  background-color: rgba(255, 255, 255, 0.62);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--md-radius-sm);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.04);
}

.listing-page .listing-stat-value {
  font-size: clamp(1.6rem, 5vw, 2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--md-ink);
}

.listing-page .listing-stat-unit {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--md-muted);
}

.listing-page .listing-stat-label {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--md-muted);
}

/* --------------------------------------------------------------------------
   Review source breakdown
   -------------------------------------------------------------------------- */
.listing-page .listing-source-item {
  padding: 0.85rem 1rem;
  background-color: rgba(245, 245, 247, 0.5);
  border-radius: var(--md-radius-sm);
  height: 100%;
}

.listing-page .listing-source-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-size: 1.15rem;
  color: var(--md-primary);
}

.listing-page .listing-source-name {
  font-weight: 400;
  color: var(--md-ink);
  letter-spacing: -0.01em;
}

.listing-page .listing-source-meta {
  font-size: 0.8125rem;
  color: var(--md-muted);
}

/* --------------------------------------------------------------------------
   Final CTA band
   -------------------------------------------------------------------------- */
.listing-page .listing-cta-band {
  /*
  background:
    linear-gradient(
      135deg,
      rgba(var(--md-secondary-rgb), 0.12),
      rgba(245, 166, 35, 0.1)
    ),
    rgba(255, 255, 255, 0.62);
  border-color: rgba(var(--md-secondary-rgb), 0.3) !important;
  */
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
}

.listing-page .listing-cta-band .card-body {
  padding: 2.5rem 1.75rem;
}

.listing-page .listing-cta-band-title {
  font-size: clamp(1.3rem, 4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--md-ink);
}

.listing-page .listing-cta-band-text {
  color: var(--md-muted);
  max-width: 36rem;
  margin-inline: auto;
}

.listing-page .listing-cta-stat {
  max-width: 28rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--md-radius-sm);
  background-color: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.listing-page .listing-cta-stat-value {
  font-size: clamp(2.5rem, 8vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--md-primary);
}

.listing-page .listing-cta-stat-label {
  margin-top: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--md-ink);
}

.listing-page .listing-cta-stat-note {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--md-muted);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.listing-page .btn {
  --bs-btn-font-weight: 400;
  border-radius: 6px;
  transition:
    transform 0.15s var(--md-ease),
    box-shadow 0.2s var(--md-ease),
    background-color 0.2s var(--md-ease),
    color 0.2s var(--md-ease);
}

.listing-page .btn:active {
  transform: scale(0.97);
}

.listing-page .btn-primary {
  --bs-btn-bg: var(--md-primary);
  --bs-btn-border-color: var(--md-primary);
  --bs-btn-hover-bg: var(--md-primary-hover);
  --bs-btn-hover-border-color: var(--md-primary-hover);
  --bs-btn-active-bg: var(--md-primary-active);
  --bs-btn-active-border-color: var(--md-primary-active);
  --bs-btn-disabled-bg: var(--md-primary);
  --bs-btn-disabled-border-color: var(--md-primary);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  box-shadow: 0 3px 8px -3px rgba(var(--md-primary-rgb), 0.3);
}

.listing-page .btn-primary:hover {
  box-shadow: 0 5px 11px -4px rgba(var(--md-primary-rgb), 0.35);
}

.listing-page .btn-light {
  --bs-btn-bg: var(--md-surface);
  --bs-btn-border-color: var(--md-border);
  --bs-btn-hover-bg: var(--md-surface-2);
  --bs-btn-hover-border-color: var(--md-border);
  --bs-btn-active-bg: var(--md-surface-2);
  --bs-btn-color: var(--md-ink);
  --bs-btn-hover-color: var(--md-ink);
}

.listing-page .listing-cta {
  border-radius: 7px;
  font-weight: 400;
}

.listing-page .listing-cta-btn {
  border-radius: 7px !important;
  font-weight: 400;
  color: var(--md-ink) !important;
  background-color: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.listing-page .listing-cta-btn:hover {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

.listing-page .listing-cta-btn .bi {
  font-size: 1.05em;
  color: var(--md-primary);
}

/* Pills (sort, directions) */
.listing-page .rounded-pill {
  border-radius: 50rem !important;
  font-weight: 400;
}

/* Joined button group — keep custom radii only on the outer edges */
.listing-page .btn-group > .btn {
  border-radius: 0 !important;
}

.listing-page .btn-group > .btn:first-child {
  border-top-left-radius: 7px !important;
  border-bottom-left-radius: 7px !important;
}

.listing-page .btn-group > .btn:last-child {
  border-top-right-radius: 7px !important;
  border-bottom-right-radius: 7px !important;
}

/* The grouped primary CTA shouldn't cast a detached glow */
.listing-page .btn-group > .btn-primary {
  box-shadow: none;
}

.listing-page .btn-group > .btn:active {
  transform: none;
}

/* --------------------------------------------------------------------------
   Cards — frosted glass so the gradient body shows through consistently
   -------------------------------------------------------------------------- */
.listing-page .card {
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: var(--md-radius) !important;
  background-color: rgba(255, 255, 255, 0.62);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: box-shadow 0.3s var(--md-ease);
}

.listing-page .card:hover {
  box-shadow: var(--md-shadow);
}

.listing-page .card-body {
  padding: 1.75rem;
}

.listing-page .listing-section-title {
  font-size: 0.6875rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--md-muted);
  margin-bottom: 1rem;
}

.listing-page .listing-contact-card h3 {
  color: var(--md-ink);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.listing-page .listing-contact-card .text-secondary {
  color: var(--md-muted) !important;
}

/* --------------------------------------------------------------------------
   Map
   -------------------------------------------------------------------------- */
.listing-page .listing-map-iframe {
  width: 100%;
  height: 100%;
  min-height: 220px;
  border: none;
  display: block;
}

/* Stacked layout (mobile): square the corners that meet the card edge */
@media (max-width: 767.98px) {
  .listing-page .listing-map-iframe {
    border-radius: 0 !important;
    min-height: 200px;
  }
}

/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */
.listing-page .listing-review-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--md-border);
}

.listing-page .listing-review-item:first-of-type {
  padding-top: 0.5rem;
}

.listing-page .listing-review-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.listing-page .listing-review-avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--md-surface-2);
  border: 1px solid var(--md-border);
  font-weight: 400;
  color: var(--md-secondary);
}

.listing-page .listing-review-item .fw-semibold {
  color: var(--md-ink);
  letter-spacing: -0.01em;
}

.listing-page .listing-review-meta {
  font-size: 0.8125rem;
  color: var(--md-muted);
}

.listing-page .listing-review-stars {
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.listing-page .listing-review-item .badge {
  background-color: var(--md-surface-2);
  color: var(--md-secondary) !important;
  border: none !important;
  font-weight: 400;
  border-radius: 50rem;
  padding: 0.35em 0.7em;
}

/* Owner response */
.listing-page .listing-review-owner {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background-color: rgba(245, 245, 247, 0.5);
  border-radius: var(--md-radius-sm);
  border: none;
  font-size: 0.9375rem;
}

.listing-page .listing-review-owner .listing-review-avatar {
  width: 2.25rem;
  height: 2.25rem;
  background-color: var(--md-surface);
}

.listing-page .listing-review-owner-label {
  font-weight: 400;
  color: var(--md-ink);
  margin-bottom: 0.1rem;
}

/* --------------------------------------------------------------------------
   Platform links / footer
   -------------------------------------------------------------------------- */
.listing-page .listing-platform-links {
  font-size: 0.875rem;
}

.listing-page .listing-platform-links a {
  color: var(--md-muted);
  text-decoration: none;
}

.listing-page .listing-platform-links a:hover {
  color: var(--md-primary);
  text-decoration: underline;
}

.listing-page .footer {
  padding: 2rem 0 2.5rem;
  margin-top: 1rem;
}

.listing-page .footer small {
  color: var(--md-muted) !important;
}

/* --------------------------------------------------------------------------
   Dark mode
   The dark palette must apply whether data-bs-theme="dark" lands on an
   ancestor (e.g. <html>) or directly on <body class="listing-page">.
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] .listing-page,
.listing-page[data-bs-theme="dark"],
[data-bs-theme="dark"].listing-page {
  --md-ink: #f5f5f7;
  --md-text: #d2d2d7;
  --md-muted: #98989d;
  --md-bg: #000000;
  --md-surface: #1c1c1e;
  --md-surface-2: #2c2c2e;
  --md-border: #38383a;
}

/* Dark mode: frosted glass over the dark solid background */
[data-bs-theme="dark"] .listing-page .card,
.listing-page[data-bs-theme="dark"] .card,
[data-bs-theme="dark"].listing-page .card {
  background-color: rgba(44, 44, 46, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .listing-page .btn-light,
[data-bs-theme="dark"] .listing-page .listing-cta-btn,
.listing-page[data-bs-theme="dark"] .btn-light,
.listing-page[data-bs-theme="dark"] .listing-cta-btn,
[data-bs-theme="dark"].listing-page .btn-light,
[data-bs-theme="dark"].listing-page .listing-cta-btn {
  color: var(--md-ink) !important;
  background-color: rgba(60, 60, 65, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .listing-page .btn-light:hover,
[data-bs-theme="dark"] .listing-page .listing-cta-btn:hover,
.listing-page[data-bs-theme="dark"] .btn-light:hover,
.listing-page[data-bs-theme="dark"] .listing-cta-btn:hover,
[data-bs-theme="dark"].listing-page .btn-light:hover,
[data-bs-theme="dark"].listing-page .listing-cta-btn:hover {
  background-color: rgba(80, 80, 86, 0.8) !important;
}

[data-bs-theme="dark"] .listing-page .listing-topbar,
.listing-page[data-bs-theme="dark"] .listing-topbar,
[data-bs-theme="dark"].listing-page .listing-topbar {
  background-color: rgba(28, 28, 30, 0.82);
}

[data-bs-theme="dark"] .listing-page .listing-cta-band,
.listing-page[data-bs-theme="dark"] .listing-cta-band,
[data-bs-theme="dark"].listing-page .listing-cta-band {
  background:
    linear-gradient(
      135deg,
      rgba(var(--md-primary-rgb), 0.22),
      rgba(245, 166, 35, 0.12)
    ),
    rgba(44, 44, 46, 0.72);
}

[data-bs-theme="dark"] .listing-page .listing-stat-card,
.listing-page[data-bs-theme="dark"] .listing-stat-card,
[data-bs-theme="dark"].listing-page .listing-stat-card {
  background-color: rgba(44, 44, 46, 0.72);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .listing-page .listing-source-item,
.listing-page[data-bs-theme="dark"] .listing-source-item,
[data-bs-theme="dark"].listing-page .listing-source-item {
  background-color: rgba(28, 28, 30, 0.5);
}

[data-bs-theme="dark"] .listing-page .listing-source-icon,
.listing-page[data-bs-theme="dark"] .listing-source-icon,
[data-bs-theme="dark"].listing-page .listing-source-icon {
  background-color: rgba(44, 44, 46, 0.7);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] .listing-page .listing-cta-stat,
.listing-page[data-bs-theme="dark"] .listing-cta-stat,
[data-bs-theme="dark"].listing-page .listing-cta-stat {
  background-color: rgba(28, 28, 30, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .listing-page .listing-review-owner,
.listing-page[data-bs-theme="dark"] .listing-review-owner,
[data-bs-theme="dark"].listing-page .listing-review-owner {
  background-color: rgba(28, 28, 30, 0.5);
}

/* --------------------------------------------------------------------------
   Respect reduced-motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .listing-page .btn,
  .listing-page .card,
  .listing-page #theme-toggle {
    transition: none !important;
  }

  .listing-page .btn:active {
    transform: none !important;
  }
}