/* Payments Knowledge Hub home spotlight.
 * Additive only: keeps the core Payments Hub card prominent without removing cards.
 */

.home-premium-shell {
  --mba-payments-core-blue: #0f5fa8;
  --mba-payments-core-cyan: #18b6d7;
  --mba-payments-core-gold: #d99a2b;
  --mba-payments-core-ink: #07192f;
}

.home-premium-shell .home-dashboard-grid:has(> button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"]),
.home-premium-shell .home-dashboard-grid:has(> button.home-dashboard-card[aria-label^="Open Knowledge Library"]) {
  row-gap: 22px !important;
}

.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"],
.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Knowledge Library"] {
  order: -20 !important;
  grid-column: 1 / -1 !important;
  position: relative !important;
  z-index: 0 !important;
  isolation: isolate !important;
  min-height: 106px !important;
  height: auto !important;
  align-items: center !important;
  grid-template-columns: 58px minmax(0, 1fr) 34px !important;
  gap: 14px !important;
  padding: 15px 15px 16px !important;
  overflow: hidden !important;
  border-radius: 25px !important;
  border: 1.35px solid rgba(255, 255, 255, 0.96) !important;
  outline: 1px solid rgba(15, 95, 168, 0.16) !important;
  outline-offset: -3px !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.98), transparent 34%),
    radial-gradient(circle at 88% 0%, rgba(24, 182, 215, 0.20), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(217, 154, 43, 0.18), transparent 42%),
    linear-gradient(140deg, rgba(249, 253, 255, 0.92), rgba(228, 247, 255, 0.70) 52%, rgba(255, 250, 238, 0.76)) !important;
  box-shadow:
    0 10px 24px rgba(7, 25, 47, 0.12),
    0 4px 12px rgba(15, 95, 168, 0.09),
    inset 0 1.3px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(15, 95, 168, 0.13) !important;
}

.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"]::before,
.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Knowledge Library"]::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit !important;
  background:
    linear-gradient(128deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.26) 24%, transparent 48%),
    radial-gradient(circle at 86% 84%, rgba(15, 95, 168, 0.11), transparent 40%) !important;
  opacity: 0.94 !important;
  transform: none !important;
  animation: none !important;
}

.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"]::after,
.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Knowledge Library"]::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 24px 11px 24px !important;
  z-index: 0 !important;
  width: auto !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--mba-payments-core-blue), var(--mba-payments-core-cyan) 58%, var(--mba-payments-core-gold)) !important;
  opacity: 0.76 !important;
  transform: none !important;
  animation: none !important;
}

.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"] > *,
.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Knowledge Library"] > * {
  position: relative !important;
  z-index: 1 !important;
}

.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"] .home-dashboard-card__icon,
.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Knowledge Library"] .home-dashboard-card__icon {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  max-height: 58px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 30% 16%, rgba(255, 255, 255, 0.96), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(199, 235, 255, 0.54)) !important;
  border: 1px solid rgba(255, 255, 255, 0.86) !important;
  box-shadow:
    0 12px 26px rgba(15, 95, 168, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}

.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"] .home-dashboard-card__icon svg,
.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"] .home-dashboard-card__icon img,
.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Knowledge Library"] .home-dashboard-card__icon svg,
.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Knowledge Library"] .home-dashboard-card__icon img {
  max-width: 58px !important;
  max-height: 58px !important;
}

.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"] .home-dashboard-card__copy,
.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Knowledge Library"] .home-dashboard-card__copy {
  min-width: 0 !important;
  overflow: visible !important;
  gap: 5px !important;
  padding-right: 0 !important;
}

.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"] .home-dashboard-card__title,
.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Knowledge Library"] .home-dashboard-card__title {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  color: var(--mba-payments-core-ink) !important;
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: clamp(20px, 5.1vw, 26px) !important;
  font-weight: 900 !important;
  line-height: 1.06 !important;
  letter-spacing: -0.025em !important;
  text-wrap: balance !important;
}

.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"] .home-dashboard-card__subtitle,
.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Knowledge Library"] .home-dashboard-card__subtitle {
  display: block !important;
  max-height: none !important;
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: ellipsis !important;
  color: rgba(7, 25, 47, 0.72) !important;
  font-size: clamp(13px, 3.35vw, 15px) !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
}

.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"] .home-dashboard-card__arrow,
.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Knowledge Library"] .home-dashboard-card__arrow {
  display: inline-grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  color: var(--mba-payments-core-blue) !important;
  background: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(15, 95, 168, 0.12) !important;
  box-shadow: 0 8px 18px rgba(15, 95, 168, 0.12) !important;
}

@media (hover: hover) and (pointer: fine) {
  .home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"]:hover,
  .home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Knowledge Library"]:hover {
    transform: translateY(-2px) scale(1.006) translateZ(0) !important;
    box-shadow:
      0 14px 30px rgba(7, 25, 47, 0.15),
      0 6px 16px rgba(15, 95, 168, 0.11),
      inset 0 1.3px 0 rgba(255, 255, 255, 1) !important;
  }
}

.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"]:focus-visible,
.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Knowledge Library"]:focus-visible {
  outline: 3px solid rgba(24, 182, 215, 0.62) !important;
  outline-offset: 3px !important;
}

@media (max-width: 430px) {
  .home-premium-shell .home-dashboard-grid:has(> button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"]),
  .home-premium-shell .home-dashboard-grid:has(> button.home-dashboard-card[aria-label^="Open Knowledge Library"]) {
    row-gap: 24px !important;
  }

  .home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"],
  .home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Knowledge Library"] {
    min-height: 108px !important;
    grid-template-columns: 56px minmax(0, 1fr) 32px !important;
    gap: 12px !important;
    padding: 14px 14px 16px !important;
    border-radius: 24px !important;
  }

  .home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"] .home-dashboard-card__icon,
  .home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Knowledge Library"] .home-dashboard-card__icon {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    border-radius: 17px !important;
  }

  .home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"] .home-dashboard-card__icon svg,
  .home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"] .home-dashboard-card__icon img,
  .home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Knowledge Library"] .home-dashboard-card__icon svg,
  .home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Knowledge Library"] .home-dashboard-card__icon img {
    max-width: 56px !important;
    max-height: 56px !important;
  }
}

@media (max-width: 360px) {
  .home-premium-shell .home-dashboard-grid:has(> button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"]),
  .home-premium-shell .home-dashboard-grid:has(> button.home-dashboard-card[aria-label^="Open Knowledge Library"]) {
    row-gap: 22px !important;
  }

  .home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"],
  .home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Knowledge Library"] {
    grid-template-columns: 52px minmax(0, 1fr) 30px !important;
    min-height: 106px !important;
    gap: 10px !important;
  }

  .home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"] .home-dashboard-card__title,
  .home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Knowledge Library"] .home-dashboard-card__title {
    font-size: 19px !important;
  }
}

@media (min-width: 768px) {
  .home-premium-shell .home-dashboard-grid:has(> button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"]),
  .home-premium-shell .home-dashboard-grid:has(> button.home-dashboard-card[aria-label^="Open Knowledge Library"]) {
    row-gap: 20px !important;
  }

  .home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"],
  .home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Knowledge Library"] {
    min-height: 104px !important;
    grid-template-columns: 58px minmax(0, 1fr) 34px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"],
  .home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Knowledge Library"] {
    transition: none !important;
    animation: none !important;
  }
}

.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"]::before,
.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Knowledge Library"]::before {
  background:
    linear-gradient(128deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.26) 24%, transparent 48%),
    linear-gradient(112deg, transparent 0%, transparent 34%, rgba(255, 255, 255, 0.72) 45%, rgba(255, 255, 255, 0.18) 53%, transparent 64%, transparent 100%),
    radial-gradient(circle at 86% 84%, rgba(15, 95, 168, 0.11), transparent 40%) !important;
  background-size: 100% 100%, 260% 100%, 100% 100% !important;
  background-position: 0 0, -190% 0, 0 0 !important;
  animation: mbaPaymentsCardShine 4.8s ease-in-out infinite !important;
}

.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"],
.home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Knowledge Library"] {
  box-shadow:
    0 11px 26px rgba(7, 25, 47, 0.13),
    0 5px 14px rgba(15, 95, 168, 0.10),
    0 0 22px rgba(24, 182, 215, 0.12),
    inset 0 1.3px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(15, 95, 168, 0.13) !important;
}

@keyframes mbaPaymentsCardShine {
  0%, 42% {
    background-position: 0 0, -190% 0, 0 0;
  }
  72%, 100% {
    background-position: 0 0, 190% 0, 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Payments Knowledge Hub"]::before,
  .home-premium-shell .home-dashboard-grid > button.home-dashboard-card[aria-label^="Open Knowledge Library"]::before {
    animation: none !important;
    background-position: 0 0, 18% 0, 0 0 !important;
  }
}