/* jcpt-readability-fix-20260611
 * Goal: keep the current layout, but remove low-contrast "beauty" effects.
 * This layer is intentionally practical: clearer title, readable buttons,
 * readable chips/tags, lighter shadows, and stable mobile typography.
 */

:root {
  --jcpt-ink: #16324a;
  --jcpt-ink-strong: #0f2538;
  --jcpt-muted: #4f6b80;
  --jcpt-line: #b9ccd9;
  --jcpt-soft: #f7fbfd;
  --jcpt-soft-2: #eef6fb;
  --jcpt-blue: #1f5f95;
  --jcpt-blue-dark: #164b78;
  --jcpt-teal: #0f7a77;
  --jcpt-teal-dark: #0b625f;
}

/* Header: remove the accidental light rectangle behind the title. */
.app-shell.portal-shell .portal-header.portal-header-merged :is(
  .portal-header-primary,
  .portal-brand-stage,
  .brand-block,
  .brand-logo-link
) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  filter: none !important;
  overflow: visible !important;
}

.app-shell.portal-shell .portal-header.portal-header-merged .brand-logo-link .brand-title,
.app-shell.portal-shell .portal-header.portal-header-merged.portal-header-no-account .brand-logo-link .brand-title,
.app-shell.portal-shell span.brand-title {
  display: inline-block !important;
  color: #f8fbff !important;
  background: transparent !important;
  background-image: none !important;
  text-shadow: 0 1px 2px rgba(3, 16, 28, .45) !important;
  -webkit-text-fill-color: #f8fbff !important;
  -webkit-text-stroke: 0 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1.14 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.app-shell.portal-shell .portal-header.portal-header-merged .portal-nav.portal-nav-split-resource {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(210, 230, 244, .24) !important;
  box-shadow: none !important;
}

.app-shell.portal-shell .portal-header.portal-header-merged .portal-nav.portal-nav-split-resource :is(a,.portal-nav-trigger) {
  color: #edf7ff !important;
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  text-shadow: none !important;
}

.app-shell.portal-shell .portal-header.portal-header-merged .portal-nav.portal-nav-split-resource :is(a.router-link-active,a:hover,.portal-nav-trigger.active,.portal-nav-trigger:hover) {
  color: #ffffff !important;
  background: rgba(255, 255, 255, .18) !important;
  border-color: rgba(255, 255, 255, .18) !important;
}

/* Primary buttons: white text on dark/teal/blue, never blue text on blue. */
.app-shell.portal-shell :is(
  .pill-button,
  .cta-button,
  .market-search-button,
  .market-search-button-strong,
  .task-hall-claim-btn,
  .market-primary-call,
  .compact-action
):not(.ghost-button):not(:disabled) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(180deg, var(--jcpt-teal), var(--jcpt-teal-dark)) !important;
  border: 1px solid rgba(5, 93, 90, .95) !important;
  text-shadow: none !important;
  box-shadow: 0 8px 18px rgba(11, 98, 95, .20) !important;
  font-weight: 750 !important;
}

.app-shell.portal-shell :is(
  .pill-button,
  .cta-button,
  .market-search-button,
  .market-search-button-strong,
  .task-hall-claim-btn,
  .market-primary-call,
  .compact-action
):not(.ghost-button):not(:disabled):hover {
  color: #ffffff !important;
  background: linear-gradient(180deg, #118b87, #0b6764) !important;
  box-shadow: 0 10px 22px rgba(11, 98, 95, .24) !important;
  transform: translateY(-1px) !important;
}

.app-shell.portal-shell :is(button,a).ghost-button,
.app-shell.portal-shell button:disabled,
.app-shell.portal-shell .pill-button:disabled,
.app-shell.portal-shell .cta-button:disabled {
  color: #526a7d !important;
  -webkit-text-fill-color: #526a7d !important;
  background: #eef4f8 !important;
  border: 1px solid #c5d5df !important;
  text-shadow: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Chips and tags: reduce glass effects, increase contrast, avoid tiny faint text. */
.app-shell.portal-shell :is(
  .mode-chip,
  .market-category-chip,
  .chip,
  .tag,
  .status-pill,
  .trust-pill,
  .merchant-reason-chip,
  .merchant-score-chip,
  .user-track-chip,
  .sort-chip,
  .market-helper-chip,
  .selected-chip,
  .market-hotword,
  .standard-subscribe-chip,
  .store-badge,
  .version-chip,
  .trust-hash-chip,
  .portal-mode-badge,
  .sp-tag
) {
  color: var(--jcpt-ink) !important;
  -webkit-text-fill-color: var(--jcpt-ink) !important;
  background: var(--jcpt-soft) !important;
  background-image: none !important;
  border: 1px solid var(--jcpt-line) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  min-height: 32px !important;
  padding: 6px 12px !important;
}

.app-shell.portal-shell :is(
  .mode-chip.active,
  .market-category-chip.active,
  .chip.active,
  .tag.active,
  .selected-chip,
  .sort-chip.active,
  .market-helper-chip.active,
  .market-hotword.active,
  .standard-subscribe-chip.active
) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: var(--jcpt-blue-dark) !important;
  border-color: var(--jcpt-blue-dark) !important;
  box-shadow: none !important;
}

.app-shell.portal-shell :is(.standard-subscribe-chip.warn,.badge-gold,.premium-badge,.gold-tag) {
  color: #7a3c00 !important;
  -webkit-text-fill-color: #7a3c00 !important;
  background: #fff6e6 !important;
  border-color: #e2b86c !important;
}

/* Search area and cards: practical, lighter, easier to scan. */
.app-shell.portal-shell :is(
  .market-search-panel-strong,
  .market-search-superbox,
  .market-results,
  .merchant-card-shopping,
  .market-secondary-card,
  .market-lab-index-item
) {
  background: #ffffff !important;
  background-image: none !important;
  border-color: #c7d8e2 !important;
  box-shadow: 0 8px 22px rgba(26, 58, 82, .08) !important;
}

.app-shell.portal-shell :is(.merchant-card-shopping h3,.market-results-title-block h2,.section-title) {
  color: var(--jcpt-ink-strong) !important;
  -webkit-text-fill-color: var(--jcpt-ink-strong) !important;
  text-shadow: none !important;
}

.app-shell.portal-shell :is(.merchant-card-shopping p,.market-results p,.field-helper,.helper-text) {
  color: var(--jcpt-muted) !important;
}

.app-shell.portal-shell :is(input, textarea, select) {
  color: var(--jcpt-ink-strong) !important;
  background: #ffffff !important;
  border-color: #b9ccd9 !important;
}

.app-shell.portal-shell :is(input, textarea)::placeholder {
  color: #71889a !important;
  opacity: 1 !important;
}

@media (max-width: 900px) {
  .app-shell.portal-shell .portal-header.portal-header-merged .brand-logo-link .brand-title,
  .app-shell.portal-shell .portal-header.portal-header-merged.portal-header-no-account .brand-logo-link .brand-title,
  .app-shell.portal-shell span.brand-title {
    white-space: normal !important;
    font-size: clamp(22px, 6vw, 30px) !important;
  }

  .app-shell.portal-shell :is(
    .mode-chip,
    .market-category-chip,
    .chip,
    .tag,
    .status-pill,
    .merchant-reason-chip,
    .merchant-score-chip,
    .market-hotword
  ) {
    font-size: 12px !important;
    min-height: 30px !important;
    padding: 5px 10px !important;
  }
}