/* ==========================================================================
   provider.css — /en/provider.html
   Design A "Editorial Trust"
   Page-unique styles only. Shared provider-hero, trust-panel, license-badge,
   contact-section, provider-card, etc. live in global.css.
   ========================================================================== */

/* ── Provider hero embellishments ──────────────────────────────────────── */
.provider-hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  flex: 1;
  min-width: 0;
}
.provider-hero-badges {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-start: var(--sp-2);
  flex-wrap: wrap;
}
.provider-hero-rating {
  color: #fff;
}
.provider-hero-rating .rating-stars {
  color: #F59E0B;
}
.provider-hero-rating-count {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.7);
}
.provider-hero-actions {
  margin-inline-start: auto;
  display: flex;
  gap: var(--sp-2);
  align-self: flex-start;
  padding-block-start: var(--sp-2);
}
.btn-on-dark {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.btn-on-dark:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

/* ── Trust panel — license + badges row ────────────────────────────────── */
.trust-license-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-block-end: var(--sp-5);
  padding-block-end: var(--sp-5);
  border-block-end: 1px solid var(--gray-200);
}
.trust-license-badges {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* ── Top spacing helpers ───────────────────────────────────────────────── */
.provider-block-spaced { margin-block-start: var(--sp-6); }

/* ── Provider layout (custom 2-col) ────────────────────────────────────── */
.provider-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  align-items: start;
}
@media (min-width: 1024px) {
  .provider-layout {
    grid-template-columns: 1fr 22rem;
  }
}

/* ── About card ────────────────────────────────────────────────────────── */
.provider-about {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-6);
}
.provider-about + .provider-about {
  margin-block-start: var(--sp-6);
}
.provider-about-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  margin-block-end: var(--sp-4);
  color: var(--gray-900);
}
.provider-about-title.is-sm {
  font-size: var(--text-base);
}
.provider-about-text {
  font-size: var(--text-base);
  color: var(--gray-700);
  line-height: var(--leading-relaxed);
}
.provider-about-text + .provider-about-text {
  margin-block-start: var(--sp-4);
}

/* ── Provider details grid ─────────────────────────────────────────────── */
.provider-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  margin-block-start: var(--sp-6);
}
@media (min-width: 480px) {
  .provider-details-grid { grid-template-columns: repeat(3, 1fr); }
}
.provider-detail-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.provider-detail-label {
  font-size: var(--text-xs);
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.provider-detail-value {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--gray-900);
}

/* ── Tab buttons with count badges ─────────────────────────────────────── */
.tab-count-badge {
  font-size: 10px;
  padding: 0.15em 0.5em;
}

/* ── Card layout uses two card-body parts (header + footer) ─────────────── */
.card-rating-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.card-rating-inline svg {
  color: #F59E0B;
}

/* ── View-all CTA after grid ───────────────────────────────────────────── */
.view-all-wrap {
  text-align: center;
  margin-block-start: var(--sp-8);
}

/* ── Reviews block (provider) ──────────────────────────────────────────── */
.reviews-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-6);
  padding-block-end: var(--sp-6);
  border-block-end: 1px solid var(--gray-200);
  margin-block-end: var(--sp-6);
}
.reviews-summary {
  text-align: center;
  min-width: 80px;
}
.reviews-summary-stars {
  display: flex;
  justify-content: center;
  margin-block: var(--sp-1);
  color: #F59E0B;
}
.review-score-big {
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  color: var(--gray-900);
  line-height: 1;
}
.review-score-label {
  font-size: var(--text-sm);
  color: var(--gray-700);
}
.review-bars {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
  min-width: 180px;
}
.review-bar-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-xs);
  color: var(--gray-700);
}
.review-bar-label { width: 32px; text-align: end; }
.review-bar-track {
  flex: 1;
  height: 6px;
  background: var(--gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.review-bar-fill {
  height: 100%;
  background: #F59E0B;
  border-radius: var(--radius-full);
}
.review-bar-fill[data-pct="78"] { width: 78%; }
.review-bar-fill[data-pct="15"] { width: 15%; }
.review-bar-fill[data-pct="5"]  { width: 5%; }
.review-bar-fill[data-pct="1"]  { width: 1%; }
.review-bar-count { width: 24px; }

.review-card {
  padding-block: var(--sp-5);
  border-block-end: 1px solid var(--gray-200);
}
.review-card:last-child { border-block-end: none; }
.review-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-block-end: var(--sp-3);
}
.review-card-meta {
  flex: 1;
  min-width: 0;
}
.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--secondary-light);
  color: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  flex-shrink: 0;
}
.review-avatar.is-primary { background: var(--primary-light); color: var(--primary); }
.review-avatar.is-success { background: var(--success-light); color: var(--success); }
.review-avatar.is-navy    { background: var(--navy-light);    color: var(--navy); }
.review-author {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.review-date {
  font-size: var(--text-xs);
  color: var(--gray-700);
}
.review-rating-inline .rating-stars {
  color: #F59E0B;
}
.review-rating-inline .rating-star-empty {
  color: var(--gray-200);
}
.review-text {
  font-size: var(--text-sm);
  color: var(--gray-700);
  line-height: var(--leading-relaxed);
}

.reviews-footer {
  text-align: center;
  margin-block-start: var(--sp-6);
}

/* ── Sidebar embellishments ────────────────────────────────────────────── */
.contact-locked-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
}
.contact-gated-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--gray-900);
  margin-block-end: var(--sp-1);
}
.contact-gated-desc {
  font-size: var(--text-sm);
  color: var(--gray-700);
}
.contact-gated-fineprint {
  font-size: var(--text-xs);
  color: var(--gray-700);
}
.contact-gated-fineprint a {
  color: var(--secondary);
  font-weight: var(--weight-semibold);
}
.contact-section-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--gray-900);
  margin-block-end: var(--sp-4);
}
.contact-panel-note {
  margin-block-start: var(--sp-4);
}
.contact-panel-note-icon {
  display: inline;
  vertical-align: middle;
  margin-inline-end: 4px;
}

/* ── Hours card ────────────────────────────────────────────────────────── */
.hours-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.hours-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
}
.hours-row svg {
  color: var(--primary);
  flex-shrink: 0;
}
.hours-day { color: var(--gray-700); }
.hours-time {
  margin-inline-start: auto;
  font-weight: var(--weight-semibold);
  color: var(--gray-900);
}
.hours-status {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--success-light);
  border-radius: var(--radius-md);
}
.hours-status svg {
  color: var(--success);
  flex-shrink: 0;
}
.hours-status-text {
  font-size: var(--text-xs);
  color: var(--success);
  font-weight: var(--weight-semibold);
}

/* ── Service areas chips (display-only) ───────────────────────────────── */
.service-areas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.service-area-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  background: var(--bg-white);
  font-size: var(--text-sm);
  color: var(--gray-700);
}
.service-area-chip svg {
  width: 12px;
  height: 12px;
}

/* ── Languages list ────────────────────────────────────────────────────── */
.languages-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* ── Commission-free banner ────────────────────────────────────────────── */
.commission-free-banner {
  background: linear-gradient(135deg, var(--primary-light), #fff);
  border: 1.5px solid var(--primary-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.commission-free-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--on-primary-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}
.commission-free-icon svg {
  width: 24px;
  height: 24px;
}
.commission-free-title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--primary);
}
.commission-free-desc {
  font-size: var(--text-sm);
  color: var(--gray-700);
}

/* ══════════════════════════════════════════════════════════════════════════
   PROVIDER HERO — no cover photo uploaded
   ──────────────────────────────────────────────────────────────────────────
   .provider-hero-img is dimmed to 60% over a navy container so a white heading
   stays readable on top of a real photograph. Applied to the branded default
   that reads as a murky smudge — dark on dark with the colour drained out. When
   the hero is the placeholder the view adds this modifier: show the default at
   full strength on a light field, and keep only as much of the bottom-up navy
   wash as the heading actually needs. Real cover photos are untouched.
   ══════════════════════════════════════════════════════════════════════════ */
.provider-hero--placeholder { background: #EDF3FA; }
.provider-hero--placeholder .provider-hero-img { opacity: 1; }
.provider-hero--placeholder .provider-hero-overlay {
  background: linear-gradient(to top,
              rgba(0, 48, 96, 0.82) 0%,
              rgba(0, 48, 96, 0.34) 42%,
              rgba(0, 48, 96, 0) 68%);
}