/**
 * Shared page layouts — Design Foundation (catalogs, lists, profiles).
 */

.eidoc-page {
  color: var(--ui-color-ink);
}

/* Expert catalog cards — ExpertCatalog.tsx top accent bar */
#experts-catalog-root .experts-foundation-card-accent {
  border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0;
}

#experts-catalog-root .experts-foundation-card {
  border-radius: var(--ui-radius-lg);
  overflow: hidden;
}

#experts-catalog-root .experts-foundation-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ui-shadow-float);
}

/* Alpine :class must not contain `var(` (see expert-my-review-star--muted). */
#experts-catalog-root .experts-foundation-star--muted {
  color: var(--ui-color-border);
}

.experts-catalog-filter-toggle--open {
  background-color: var(--brand-blue-pale, #f0f7ff);
}

.eidoc-page .eidoc-surface-card,
.eidoc-page .card.eidoc-surface-card {
  background-color: var(--ui-color-surface);
  border: none;
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-card);
}

.eidoc-page .eidoc-surface-card--flat {
  box-shadow: var(--ui-shadow-sm);
}

/* Tab bar (expert profile, similar) */
.eidoc-tab-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.375rem;
  width: 100%;
  min-width: 0;
  padding: 0.5rem;
  background-color: var(--ui-color-surface);
  border: none;
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-card);
}

.eidoc-tab-bar .eidoc-tab {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  padding: 0.5rem;
  border-radius: var(--ui-radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-weight: 600;
  color: var(--ui-color-muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.eidoc-tab-bar .eidoc-tab:hover {
  background-color: var(--ui-color-surface-muted);
  color: var(--ui-color-ink);
}

.eidoc-tab-bar .eidoc-tab--active {
  background-color: var(--brand-blue);
  color: #fff;
}

.eidoc-tab-bar .eidoc-tab--active:hover {
  background-color: var(--brand-blue-hover);
  color: #fff;
}

.eidoc-tab-bar .eidoc-tab--active span,
.eidoc-tab-bar .eidoc-tab--active i {
  color: #fff !important;
}

/* Consultation / order list */
.eidoc-order-card {
  display: block;
  background-color: var(--ui-color-surface);
  border: none;
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-sm);
  padding: 1rem 1.25rem;
  transition: box-shadow 0.15s ease;
}

@media (min-width: 640px) {
  .eidoc-order-card {
    padding: 1.25rem 1.5rem;
  }
}

.eidoc-order-card:hover {
  box-shadow: var(--ui-shadow-card);
}

.eidoc-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--ui-radius-pill);
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: var(--ui-color-surface-muted);
  color: var(--ui-color-muted);
}

.eidoc-status-badge--success {
  background-color: #ecfdf5;
  color: var(--ui-color-success);
}

.eidoc-status-badge--warning {
  background-color: #fffbeb;
  color: var(--ui-color-warning);
}

/* Experts catalog — align with global tokens */
#experts-catalog-root.experts-foundation-page {
  --mp-hero-from: var(--brand-navy, #0b1f3a);
  --mp-hero-mid: var(--brand-blue, #1d4ed8);
  --mp-hero-to: var(--ui-color-teal, #0891b2);
  --experts-brand-primary: var(--brand-blue, #1d4ed8);
  --experts-background: var(--ui-color-canvas, #f1f5f9);
  --experts-foreground: var(--ui-color-ink, #0f172a);
  --experts-muted: var(--ui-color-muted, #6b7280);
  --experts-border: var(--ui-color-border, #e2e8f0);
  --experts-surface: var(--ui-color-surface, #fff);
  --experts-surface-muted: var(--ui-color-surface-muted, #f8fafc);
  --experts-primary-soft: var(--brand-blue-light, #eff6ff);
  --experts-radius: var(--ui-radius-md, 0.75rem);
  --experts-shadow: var(--ui-shadow-sm);
  --experts-shadow-hover: var(--ui-shadow-card);
  padding-top: var(--ui-page-gap-top, 1rem);
}

#experts-catalog-root .experts-foundation-page__stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  #experts-catalog-root .experts-foundation-page__stack {
    gap: 1.5rem;
  }
}

#experts-catalog-root .experts-catalog-foundation-hero {
  min-height: 12.5rem;
}

#experts-catalog-root .experts-catalog-foundation-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

#experts-catalog-root .experts-catalog-foundation-hero__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

#experts-catalog-root .experts-catalog-foundation-hero__cta-link:hover {
  color: #fff;
}

#experts-catalog-root .experts-catalog-foundation-hero__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.625rem;
  background: #fff;
  color: var(--brand-navy, #0b1f3a);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

#experts-catalog-root .experts-catalog-foundation-hero__cta-btn:hover {
  background: rgba(255, 255, 255, 0.92);
}

html[data-theme="dark"] #experts-catalog-root.experts-foundation-page {
  --experts-background: var(--ui-color-canvas);
  --experts-foreground: hsl(var(--bc));
  --experts-muted: var(--ui-color-muted);
  --experts-border: hsl(var(--b3));
  --experts-surface: hsl(var(--b1));
  --experts-surface-muted: hsl(var(--b2));
}

/* Marketplace catalog */
#marketplace-catalog-root.marketplace-foundation-page {
  --mp-primary: var(--brand-blue, #1d4ed8);
  --mp-bg: var(--ui-color-canvas, #f1f5f9);
  --mp-surface: var(--ui-color-surface, #fff);
  --mp-muted-surface: var(--ui-color-surface-muted, #f8fafc);
  --mp-border: var(--ui-color-border, #e2e8f0);
  --mp-text: var(--ui-color-ink, #0f172a);
  --mp-muted: var(--ui-color-muted, #6b7280);
  --mp-radius: var(--ui-radius-lg, 1rem);
  --mp-shadow: var(--ui-shadow-sm);
  --mp-shadow-hover: var(--ui-shadow-card);
}

[data-theme="dark"] #marketplace-catalog-root.marketplace-foundation-page,
.dark #marketplace-catalog-root.marketplace-foundation-page {
  --mp-bg: var(--ui-color-canvas);
  --mp-surface: hsl(var(--b1));
  --mp-muted-surface: hsl(var(--b2));
  --mp-border: hsl(var(--b3));
  --mp-text: hsl(var(--bc));
  --mp-muted: var(--ui-color-muted);
}

/* Services catalog hero search */
#services-catalog-root.services-foundation-page .services-foundation-search,
#services-catalog-root .services-hero-search {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-sm);
}

#services-catalog-root.services-foundation-page .services-hero-search:focus-within {
  border-color: color-mix(in srgb, var(--brand-blue) 38%, var(--ui-color-border));
  box-shadow: var(--ui-shadow-focus);
}

/* Companies catalog — marketplace-foundation-hero pattern */
#companies-catalog-root.companies-foundation-page {
  --mp-hero-from: var(--brand-navy, #0b1f3a);
  --mp-hero-mid: var(--brand-blue, #1d4ed8);
  --mp-hero-to: var(--ui-color-teal, #0891b2);
  width: 100%;
  max-width: none;
  background: var(--ui-color-canvas, #f1f5f9);
  padding-top: var(--ui-page-gap-top, 1rem);
}

#companies-catalog-root .companies-foundation-page__stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#companies-catalog-root #companies-catalog-form {
  margin: 0;
}

#companies-catalog-root .companies-foundation-catalog {
  padding-top: 1rem;
}

@media (min-width: 768px) {
  #companies-catalog-root .companies-foundation-page__stack {
    gap: 1.5rem;
  }

  #companies-catalog-root .companies-foundation-catalog {
    padding-top: 1.5rem;
  }
}

#companies-catalog-root .companies-catalog-foundation-hero {
  min-height: 12.5rem;
}

#companies-catalog-root .companies-catalog-foundation-hero__themes {
  max-width: 100%;
}

#companies-catalog-root .companies-catalog-foundation-hero__themes-label {
  margin: 0 0 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

#companies-catalog-root .companies-catalog-foundation-hero__themes-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#companies-catalog-root .companies-catalog-foundation-hero__theme-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#companies-catalog-root .companies-catalog-foundation-hero__theme-chip:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

#companies-catalog-root .companies-catalog-foundation-hero__theme-chip.is-active {
  background: #fff;
  border-color: #fff;
  color: var(--brand-navy, #0b1f3a);
}

#companies-catalog-root .companies-catalog-foundation-hero__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  max-width: 42rem;
}

#companies-catalog-root .companies-catalog-foundation-hero__filter-input {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.625rem 0.875rem;
  border-radius: 0.75rem;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.8125rem;
  color: #fff;
  outline: none;
  box-sizing: border-box;
}

#companies-catalog-root .companies-catalog-foundation-hero__filter-input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

#companies-catalog-root .companies-catalog-foundation-hero__filter-input:focus {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.18);
}

#companies-catalog-root .companies-catalog-foundation-hero__filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.625rem;
  background: #fff;
  color: var(--brand-navy, #0b1f3a);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

#companies-catalog-root .companies-catalog-foundation-hero__filter-btn:hover {
  background: rgba(255, 255, 255, 0.92);
}

#companies-catalog-root .companies-foundation-catalog__inner {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 var(--ui-page-gap-x, 1rem) 2rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  #companies-catalog-root .companies-foundation-catalog__inner {
    padding-left: var(--ui-page-gap-x, 1.5rem);
    padding-right: var(--ui-page-gap-x, 1.5rem);
  }
}

#companies-catalog-root .companies-foundation-catalog__count {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--ui-color-muted, #6b7280);
}

#companies-catalog-root .companies-foundation-card {
  position: relative;
  min-height: 17.5rem;
  overflow: hidden;
  border-radius: var(--ui-radius-lg, 1rem);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
  text-decoration: none;
  opacity: 0;
  transform: translateY(10px);
  animation: companies-card-enter 520ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: min(calc(var(--company-card-index, 0) * 46ms), 360ms);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms ease, background-color 220ms ease;
}

#companies-catalog-root .companies-foundation-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: transparent;
  opacity: 0.86;
  transition: background 220ms ease, opacity 220ms ease;
}

#companies-catalog-root .companies-foundation-card--verified::before {
  background: color-mix(in srgb, hsl(var(--p, 221 83% 53%)) 72%, white);
}

#companies-catalog-root .companies-foundation-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
  background: color-mix(in srgb, hsl(var(--b1, 0 0% 100%)) 96%, hsl(var(--p, 221 83% 53%)) 4%);
}

#companies-catalog-root .companies-foundation-card:hover::before {
  opacity: 1;
}

#companies-catalog-root .companies-foundation-card:active {
  transform: translateY(-1px) scale(0.995);
  transition-duration: 120ms;
}

#companies-catalog-root .companies-foundation-card__body {
  min-height: 17.5rem;
  padding: 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#companies-catalog-root .companies-foundation-card__head {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  min-width: 0;
}

#companies-catalog-root .companies-foundation-card__logo {
  width: 3.25rem;
  height: 3.25rem;
  flex: 0 0 3.25rem;
  border-radius: 0.875rem;
  border: 1px solid hsl(var(--b2, 0 0% 92%));
  object-fit: cover;
  background: hsl(var(--b2, 0 0% 92%));
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms ease;
}

#companies-catalog-root .companies-foundation-card__logo--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--bc, 215 28% 17%) / 0.68);
  font-size: 1.125rem;
  font-weight: 600;
  background: linear-gradient(135deg, hsl(var(--b2, 0 0% 92%)), hsl(var(--b1, 0 0% 100%)));
}

#companies-catalog-root .companies-foundation-card:hover .companies-foundation-card__logo {
  transform: scale(1.035);
  border-color: hsl(var(--p, 221 83% 53%) / 0.22);
}

#companies-catalog-root .companies-foundation-card__title-block {
  min-width: 0;
  flex: 1;
}

#companies-catalog-root .companies-foundation-card__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.375rem;
  margin-bottom: 0.375rem;
}

#companies-catalog-root .companies-foundation-card__trust,
#companies-catalog-root .companies-foundation-card__demo {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  max-width: 100%;
  min-height: 1.375rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.1;
}

#companies-catalog-root .companies-foundation-card__trust {
  color: hsl(var(--p, 221 83% 53%));
  background: hsl(var(--p, 221 83% 53%) / 0.09);
  animation: companies-trust-breathe 5200ms ease-in-out infinite;
}

#companies-catalog-root .companies-foundation-card__demo {
  color: hsl(var(--s, 314 100% 47%));
  background: hsl(var(--s, 314 100% 47%) / 0.09);
}

#companies-catalog-root .companies-foundation-card__title {
  margin: 0;
  color: hsl(var(--bc, 215 28% 17%));
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#companies-catalog-root .companies-foundation-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  margin: 0;
}

#companies-catalog-root .companies-foundation-card__facts > div {
  min-width: 0;
  padding: 0.625rem;
  border: 1px solid hsl(var(--b2, 0 0% 92%) / 0.75);
  border-radius: 0.75rem;
  background: hsl(var(--b2, 0 0% 92%) / 0.26);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms ease, background-color 220ms ease;
}

#companies-catalog-root .companies-foundation-card:hover .companies-foundation-card__facts > div {
  border-color: hsl(var(--p, 221 83% 53%) / 0.14);
  background: hsl(var(--b1, 0 0% 100%) / 0.72);
  transform: translateY(-1px);
}

#companies-catalog-root .companies-foundation-card__facts dt {
  margin: 0 0 0.25rem;
  color: hsl(var(--bc, 215 28% 17%) / 0.54);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.15;
}

#companies-catalog-root .companies-foundation-card__facts dd {
  margin: 0;
  overflow: hidden;
  color: hsl(var(--bc, 215 28% 17%) / 0.86);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#companies-catalog-root .companies-foundation-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.875rem;
  border-top: 1px solid hsl(var(--b2, 0 0% 92%) / 0.72);
}

#companies-catalog-root .companies-foundation-card__signal,
#companies-catalog-root .companies-foundation-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  font-size: 0.75rem;
  line-height: 1.2;
  transition: color 220ms ease, opacity 220ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

#companies-catalog-root .companies-foundation-card__signal {
  overflow: hidden;
  color: hsl(var(--bc, 215 28% 17%) / 0.54);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#companies-catalog-root .companies-foundation-card__cta {
  flex: 0 0 auto;
  color: hsl(var(--p, 221 83% 53%));
  font-weight: 600;
}

#companies-catalog-root .companies-foundation-card__cta i {
  font-size: 0.625rem;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

#companies-catalog-root .companies-foundation-card:hover .companies-foundation-card__cta i {
  transform: translateX(3px);
}

@keyframes companies-card-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes companies-trust-breathe {
  0%,
  72%,
  100% {
    box-shadow: 0 0 0 0 hsl(var(--p, 221 83% 53%) / 0);
  }
  82% {
    box-shadow: 0 0 0 4px hsl(var(--p, 221 83% 53%) / 0.07);
  }
}

@media (max-width: 380px) {
  #companies-catalog-root .companies-foundation-card__facts {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  #companies-catalog-root .companies-foundation-card,
  #companies-catalog-root .companies-foundation-card__logo,
  #companies-catalog-root .companies-foundation-card__facts > div,
  #companies-catalog-root .companies-foundation-card__signal,
  #companies-catalog-root .companies-foundation-card__cta,
  #companies-catalog-root .companies-foundation-card__cta i,
  #companies-catalog-root .companies-foundation-card__trust {
    animation: none;
    transition: none;
  }

  #companies-catalog-root .companies-foundation-card {
    opacity: 1;
    transform: none;
  }

  #companies-catalog-root .companies-foundation-card:hover,
  #companies-catalog-root .companies-foundation-card:active,
  #companies-catalog-root .companies-foundation-card:hover .companies-foundation-card__logo,
  #companies-catalog-root .companies-foundation-card:hover .companies-foundation-card__facts > div,
  #companies-catalog-root .companies-foundation-card:hover .companies-foundation-card__cta i {
    transform: none;
  }
}