/* BondMai Card System
   Phase 3 component layer. Preserves homepage structure and only improves card consistency. */

body:has(.appShell.view-market) :where(
  .bm-card,
  .destinationCard,
  .trendCard,
  .returningTravelerCard,
  .featuredRequestCard,
  .trustedTravelerCard,
  .tripCard,
  .matchCard
) {
  background: var(--bm-card-bg);
  border: var(--bm-card-border);
  box-shadow: var(--bm-shadow-1);
  color: var(--bm-color-text);
}

body:has(.appShell.view-market) :where(.bm-card, .tripCard, .matchCard) {
  border-radius: var(--bm-radius-lg);
}

body:has(.appShell.view-market) :where(.bm-card--product, .trendCard) {
  border-radius: var(--bm-card-radius-product);
  overflow: hidden;
}

body:has(.appShell.view-market) :where(.bm-card--country, .destinationCard) {
  border-radius: var(--bm-card-radius-country);
  overflow: hidden;
}

body:has(.appShell.view-market) :where(.bm-card--traveler, .trustedTravelerCard, .returningTravelerCard, .tripCard) {
  border-radius: var(--bm-card-radius-traveler);
}

body:has(.appShell.view-market) :where(.bm-card--wish, .featuredRequestCard) {
  border-radius: var(--bm-card-radius-wish);
}

body:has(.appShell.view-market) :where(.bm-card--ai, .aiRecommendationSection, .aiRecommendationSection .matchCard) {
  border-radius: var(--bm-card-radius-ai);
}

body:has(.appShell.view-market) .aiRecommendationSection {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bm-color-surface-lowest) 94%, var(--bm-color-mint-soft)), var(--bm-color-surface-lowest));
  box-shadow: var(--bm-shadow-ai);
}

body:has(.appShell.view-market) :where(.productVisual, .wishVisual, .heroVisual) {
  background-color: var(--bm-color-surface-high);
  overflow: hidden;
}

body:has(.appShell.view-market) :where(.productVisual, .featuredRequestCard .wishVisual) {
  border-radius: var(--bm-card-media-radius);
}

body:has(.appShell.view-market) .trendCard > .productVisual {
  border-radius: var(--bm-card-radius-product) var(--bm-card-radius-product) 0 0;
}

body:has(.appShell.view-market) :where(.productVisual, .wishVisual)::after {
  pointer-events: none;
}

body:has(.appShell.view-market) .productVisual::after {
  background: var(--bm-card-media-scrim);
}

body:has(.appShell.view-market) :where(.status, .departBadge, .verifiedBadge, .travelerTrustBadge span, .acceptedTags span, .tagRow span, .reasonPills span, .matchFooter span) {
  min-height: var(--bm-chip-height);
  border-radius: var(--bm-chip-radius);
  background: var(--bm-card-trust-bg);
  color: var(--bm-card-trust-text);
  border: 1px solid color-mix(in srgb, var(--bm-color-mint) 62%, transparent);
}

body:has(.appShell.view-market) :where(.memberAvatar, .tripCard .avatar, .returningAvatar .countryFlag) {
  box-shadow: 0 10px 28px rgba(25, 50, 74, .12);
}

body:has(.appShell.view-market) :where(.rankBadge) {
  box-shadow: var(--bm-shadow-coral);
}

body:has(.appShell.view-market) :where(.productStats, .trustSignalRow, .requestMeta span) {
  border-color: var(--bm-color-outline-soft);
}

body:has(.appShell.view-market) :where(.tripCard, .trustedTravelerCard, .returningTravelerCard) {
  background:
    linear-gradient(180deg, var(--bm-color-surface-lowest), color-mix(in srgb, var(--bm-color-surface-lowest) 86%, var(--bm-color-mint-soft)));
}

body:has(.appShell.view-market) :where(.featuredRequestCard, .trendCard) {
  background: var(--bm-color-surface-lowest);
}

body:has(.appShell.view-market) .destinationCard::before,
body:has(.appShell.view-market) .trendCard::before,
body:has(.appShell.view-market) .trustedTravelerCard::before,
body:has(.appShell.view-market) .featuredRequestCard::before,
body:has(.appShell.view-market) .tripCard::before,
body:has(.appShell.view-market) .matchCard::before {
  pointer-events: none;
}

@media (max-width: 760px) {
  body:has(.appShell.view-market) :where(.bm-card, .destinationCard, .trendCard, .returningTravelerCard, .featuredRequestCard, .trustedTravelerCard, .tripCard, .matchCard) {
    border-radius: var(--bm-radius-lg);
  }
}

/* Marketplace alias strengthening: keep older high-specificity homepage rules aligned with card tokens. */
html body .appShell.view-market :where(.destinationCard) {
  border-radius: var(--bm-card-radius-country) !important;
  border: 1px solid color-mix(in srgb, var(--bm-color-white) 74%, transparent) !important;
  box-shadow: var(--bm-shadow-1) !important;
}

html body .appShell.view-market :where(.trendCard) {
  border-radius: var(--bm-card-radius-product) !important;
  border: var(--bm-card-border) !important;
  background: var(--bm-card-bg) !important;
  box-shadow: var(--bm-shadow-1) !important;
}

html body .appShell.view-market :where(.featuredRequestCard) {
  border-radius: var(--bm-card-radius-wish) !important;
  border: var(--bm-card-border) !important;
  background: var(--bm-card-bg) !important;
  box-shadow: var(--bm-shadow-1) !important;
}

html body .appShell.view-market :where(.trustedTravelerCard, .returningTravelerCard, .tripCard) {
  border-radius: var(--bm-card-radius-traveler) !important;
  border: var(--bm-card-border) !important;
  background:
    linear-gradient(180deg, var(--bm-color-surface-lowest), color-mix(in srgb, var(--bm-color-surface-lowest) 88%, var(--bm-color-mint-soft))) !important;
  box-shadow: var(--bm-shadow-1) !important;
}

html body .appShell.view-market :where(.aiRecommendationSection) {
  border-radius: var(--bm-card-radius-ai) !important;
  border: var(--bm-card-border) !important;
}

html body .appShell.view-market .aiRecommendationSection :where(.matchCard) {
  border-radius: var(--bm-radius-xl) !important;
  border: var(--bm-card-border) !important;
  background: var(--bm-color-surface-lowest) !important;
  box-shadow: var(--bm-shadow-none) !important;
}