/* Keep Stripe onboarding button readable even when disabled */
.stripe-onboarding-btn.mud-button.mud-disabled,
.stripe-onboarding-btn.mud-button:disabled {
  color: #ffffff !important;
  opacity: 0.7;
}

.stripe-onboarding-btn .mud-button-label .mud-icon-root {
  filter: none !important;
}

/* Remove transitions on wizard message only (backdrop should animate) */
#wizard-message,
#wizard-message * {
  transition: none !important;
}

/* Completely disable MudPaper hover effects for wizard card */
#wizard-message .mud-paper.profit-calculator-card:not(.wizard-dark-card) {
  background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(245,245,250,0.98) 100%) !important;
  backdrop-filter: blur(8px);
  transform: none !important;
}

/* Enable dark gray hover for wizard buttons (text variant) */
#wizard-message .mud-button.mud-button-text:hover {
  background-color: rgba(0,0,0,0.08) !important;
}

/* Slightly darken filled buttons on hover */
#wizard-message .mud-button.mud-button-filled:hover {
  filter: brightness(0.92) !important;
}

/* Disable hover/active effects inside steps 1 and 2 target areas */
#wizard-financial-focus *:hover,
#wizard-business-section *:hover,
#wizard-financial-focus *:active,
#wizard-business-section *:active,
#wizard-financial-focus *:focus,
#wizard-business-section *:focus {
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

/* Full-screen scrim by default; JS positions for spotlight mode */
#wizard-highlight {
  position: fixed;
  inset: 0;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,0.75); /* softer than 0.85 */
  pointer-events: none;
  opacity: 0.6; /* lighter while terms dialog is open */
  transition: opacity 500ms ease !important; /* Smooth fade */
  z-index: 2147483646; /* ensure on top by default */
}

/* Make the wizard message a fixed overlay container by default so it never affects layout */
#wizard-message {
  position: fixed;
  top: 16px; /* temporary default before JS positions */
  left: 16px; /* temporary default before JS positions */
  z-index: 2147483647; /* above highlight */
  pointer-events: none; /* allow clicks only on paper */
  visibility: hidden; /* until JS turns it visible */
}

/* Allow interaction within the card */
#wizard-message .mud-paper {
  pointer-events: auto;
}

/* Ensure no background/border is visible which could create a ring */
#wizard-highlight, #wizard-message {
  background: transparent !important;
  border: none !important;
}

/* Remove hover effect globally from profit-calculator-card (keep elevation consistent) */
.mud-paper.profit-calculator-card,
.mud-card.profit-calculator-card {
  transition: none !important;
}

/* Also remove hover effect on loading skeleton rows inside profit calculator (Edit/Create Book) */
.mud-paper.profit-channel-card,
.mud-card.profit-channel-card,
.mud-paper.print-charge-card,
.mud-card.print-charge-card {
  transition: none !important;
}
.mud-paper.profit-channel-card:hover,
.mud-paper.profit-channel-card:focus,
.mud-paper.profit-channel-card:active,
.mud-card.profit-channel-card:hover,
.mud-card.profit-channel-card:focus,
.mud-card.profit-channel-card:active,
.mud-paper.print-charge-card:hover,
.mud-paper.print-charge-card:focus,
.mud-paper.print-charge-card:active,
.mud-card.print-charge-card:hover,
.mud-card.print-charge-card:focus,
.mud-card.print-charge-card:active {
  transform: none !important;
  box-shadow: none !important; /* skeleton rows/cards stay flat */
}

/* Wizard dark card theme */
#wizard-message .wizard-dark-card {
  background: #0e0e0e !important; /* deep black */
  color: #ffffff !important;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

/* Ensure all text inside is white */
#wizard-message .wizard-dark-card,
#wizard-message .wizard-dark-card *:not(.mud-button) {
  color: #ffffff !important;
}

/* Divider subtle on dark */
#wizard-message .wizard-dark-card .mud-divider {
  background-color: rgba(255,255,255,0.12) !important;
}

/* Buttons inside wizard card: white text, subtle white hover */
#wizard-message .wizard-dark-card .mud-button {
  color: #ffffff !important;
}

/* Text buttons: keep transparent, add light hover */
#wizard-message .wizard-dark-card .mud-button.mud-button-text {
  background-color: transparent !important;
}
#wizard-message .wizard-dark-card .mud-button.mud-button-text:hover {
  background-color: rgba(255,255,255,0.12) !important;
}

/* Filled primary button: use semi-transparent white fill to read as white action on black */
#wizard-message .wizard-dark-card .mud-button.mud-button-filled {
  background-color: rgba(255,255,255,0.16) !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
}
#wizard-message .wizard-dark-card .mud-button.mud-button-filled:hover {
  background-color: rgba(255,255,255,0.24) !important;
}

/* Icons in buttons/text */
#wizard-message .wizard-dark-card .mud-icon-root,
#wizard-message .wizard-dark-card i,
#wizard-message .wizard-dark-card svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Paper elevation hover should not bump */
#wizard-message .wizard-dark-card:hover,
#wizard-message .wizard-dark-card:focus {
  transform: none !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important;
}

/* Force dark background even when profit-calculator-card is present */
#wizard-message .mud-paper.profit-calculator-card.wizard-dark-card {
  background: #0e0e0e !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important;
}

/* Next/Finish button on dark wizard card: white bg, black text */
#wizard-message .wizard-dark-card .mud-button.mud-button-filled {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  filter: none !important; /* override global filled hover filter */
}
#wizard-message .wizard-dark-card .mud-button.mud-button-filled:hover {
  background-color: #f5f5f5 !important;
  color: #000000 !important;
  border-color: rgba(0,0,0,0.18) !important;
  filter: none !important;
}

/* Ensure the filled button label and its descendants render black on dark card */
#wizard-message .wizard-dark-card .mud-button.mud-button-filled .mud-button-label,
#wizard-message .wizard-dark-card .mud-button.mud-button-filled .mud-button-label *,
#wizard-message .wizard-dark-card .mud-button.mud-button-filled .mud-typography-root {
  color: #000000 !important;
  fill: #000000 !important;
}

/* Consistent narrow width for wizard card across all steps */
#wizard-message .mud-paper.profit-calculator-card,
#wizard-message .wizard-dark-card {
  width: min(92vw, 360px) !important;
  max-width: 360px !important;
}